diff --git a/README.md b/README.md index ca3662da8..15992edd3 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,25 @@ This repository contains a static directory structure used in [Bebras tasks](htt This would be usually considered bad (or outdated) practice, but it addresses a requirement: allow people who are not experts in JavaScript tools (who cannot install `npm`, `bower`, etc.) to have a development environment for Bebras tasks. +## Bundles + +To optimise loading of files, this directory also contains bundles, which can be used in place of importing the corresponding JS files. + +To define a bundle, you must, in `importModules*.js` : + +* add how to import the bundle to `importableModules` +* add the list of modules this bundle includes in `bundledModules` + +and then, include, in `gulpfile.js`, the list of files to include in this bundle. + +The command +``` +gulp bundles +``` +will then generate all bundles into the subfolder `bundles/`. + +While testing this feature, bundles are loaded by `importModules*.js` only if `window.useBundles` is `true`. + ### TODO - find a better solution? diff --git a/bundles/bebras-base.js b/bundles/bebras-base.js new file mode 100644 index 000000000..c0dec2a33 --- /dev/null +++ b/bundles/bebras-base.js @@ -0,0 +1,1610 @@ +/*! jQuery v1.7.1 jquery.com | jquery.org/license */ +(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"":"")+""),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g0){if(c!=="border")for(;g=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c
a",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="
"+""+"
",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="
t
",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="
",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")}; +f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;le&&i.push({elem:this,matches:d.slice(e)});for(j=0;j0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return bc[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="

";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="
";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h0)for(h=g;h=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/",""],legend:[1,"
","
"],thead:[1,"","
"],tr:[2,"","
"],td:[3,"","
"],col:[2,"","
"],area:[1,"",""],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div
","
"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function() +{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1>");try{for(var c=0,d=this.length;c1&&l0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]===""&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("
").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window); +if(typeof JSON!=="object"){JSON={}}(function(){function f(n){return n<10?"0"+n:n}if(typeof Date.prototype.toJSON!=="function"){Date.prototype.toJSON=function(key){return isFinite(this.valueOf())?this.getUTCFullYear()+"-"+f(this.getUTCMonth()+1)+"-"+f(this.getUTCDate())+"T"+f(this.getUTCHours())+":"+f(this.getUTCMinutes())+":"+f(this.getUTCSeconds())+"Z":null};String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(key){return this.valueOf()}}var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},rep;function quote(string){escapable.lastIndex=0;return escapable.test(string)?'"'+string.replace(escapable,function(a){var c=meta[a];return typeof c==="string"?c:"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+string+'"'}function str(key,holder){var i,k,v,length,mind=gap,partial,value=holder[key];if(value&&typeof value==="object"&&typeof value.toJSON==="function"){value=value.toJSON(key)}if(typeof rep==="function"){value=rep.call(holder,key,value)}switch(typeof value){case"string":return quote(value);case"number":return isFinite(value)?String(value):"null";case"boolean":case"null":return String(value);case"object":if(!value){return"null"}gap+=indent;partial=[];if(Object.prototype.toString.apply(value)==="[object Array]"){length=value.length;for(i=0;ir;r++)if(t[r]===e)return t.push(t.splice(r,1)[0])}function n(t,e,r){function n(){var a=Array.prototype.slice.call(arguments,0),s=a.join("␀"),o=n.cache=n.cache||{},l=n.count=n.count||[];return o[T](s)?(i(l,s),r?r(o[s]):o[s]):(l.length>=1e3&&delete o[l.shift()],l.push(s),o[s]=t[z](e,a),r?r(o[s]):o[s])}return n}function a(){return this.hex}function s(t,e){for(var r=[],i=0,n=t.length;n-2*!e>i;i+=2){var a=[{x:+t[i-2],y:+t[i-1]},{x:+t[i],y:+t[i+1]},{x:+t[i+2],y:+t[i+3]},{x:+t[i+4],y:+t[i+5]}];e?i?n-4==i?a[3]={x:+t[0],y:+t[1]}:n-2==i&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[n-2],y:+t[n-1]}:n-4==i?a[3]=a[2]:i||(a[0]={x:+t[i],y:+t[i+1]}),r.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return r}function o(t,e,r,i,n){var a=-3*e+9*r-9*i+3*n,s=t*a+6*e-12*r+6*i;return t*s-3*e+3*r}function l(t,e,r,i,n,a,s,l,h){null==h&&(h=1),h=h>1?1:0>h?0:h;for(var u=h/2,c=12,f=[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816],p=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472],d=0,g=0;c>g;g++){var x=u*f[g]+u,v=o(x,t,r,n,s),y=o(x,e,i,a,l),m=v*v+y*y;d+=p[g]*Y.sqrt(m)}return u*d}function h(t,e,r,i,n,a,s,o,h){if(!(0>h||l(t,e,r,i,n,a,s,o)d;)c/=2,f+=(h>p?1:-1)*c,p=l(t,e,r,i,n,a,s,o,f);return f}}function u(t,e,r,i,n,a,s,o){if(!(W(t,r)W(n,s)||W(e,i)W(a,o))){var l=(t*i-e*r)*(n-s)-(t-r)*(n*o-a*s),h=(t*i-e*r)*(a-o)-(e-i)*(n*o-a*s),u=(t-r)*(a-o)-(e-i)*(n-s);if(u){var c=l/u,f=h/u,p=+c.toFixed(2),d=+f.toFixed(2);if(!(p<+G(t,r).toFixed(2)||p>+W(t,r).toFixed(2)||p<+G(n,s).toFixed(2)||p>+W(n,s).toFixed(2)||d<+G(e,i).toFixed(2)||d>+W(e,i).toFixed(2)||d<+G(a,o).toFixed(2)||d>+W(a,o).toFixed(2)))return{x:c,y:f}}}}function c(t,e){return p(t,e)}function f(t,e){return p(t,e,1)}function p(t,r,i){var n=e.bezierBBox(t),a=e.bezierBBox(r);if(!e.isBBoxIntersect(n,a))return i?0:[];for(var s=l.apply(0,t),o=l.apply(0,r),h=W(~~(s/5),1),c=W(~~(o/5),1),f=[],p=[],d={},g=i?0:[],x=0;h+1>x;x++){var v=e.findDotsAtSegment.apply(e,t.concat(x/h));f.push({x:v.x,y:v.y,t:x/h})}for(x=0;c+1>x;x++)v=e.findDotsAtSegment.apply(e,r.concat(x/c)),p.push({x:v.x,y:v.y,t:x/c});for(x=0;h>x;x++)for(var y=0;c>y;y++){var m=f[x],b=f[x+1],_=p[y],w=p[y+1],k=H(b.x-m.x)<.001?"y":"x",B=H(w.x-_.x)<.001?"y":"x",C=u(m.x,m.y,b.x,b.y,_.x,_.y,w.x,w.y);if(C){if(d[C.x.toFixed(4)]==C.y.toFixed(4))continue;d[C.x.toFixed(4)]=C.y.toFixed(4);var S=m.t+H((C[k]-m[k])/(b[k]-m[k]))*(b.t-m.t),T=_.t+H((C[B]-_[B])/(w[B]-_[B]))*(w.t-_.t);S>=0&&1.001>=S&&T>=0&&1.001>=T&&(i?g++:g.push({x:C.x,y:C.y,t1:G(S,1),t2:G(T,1)}))}}return g}function d(t,r,i){t=e._path2curve(t),r=e._path2curve(r);for(var n,a,s,o,l,h,u,c,f,d,g=i?0:[],x=0,v=t.length;v>x;x++){var y=t[x];if("M"==y[0])n=l=y[1],a=h=y[2];else{"C"==y[0]?(f=[n,a].concat(y.slice(1)),n=f[6],a=f[7]):(f=[n,a,n,a,l,h,l,h],n=l,a=h);for(var m=0,b=r.length;b>m;m++){var _=r[m];if("M"==_[0])s=u=_[1],o=c=_[2];else{"C"==_[0]?(d=[s,o].concat(_.slice(1)),s=d[6],o=d[7]):(d=[s,o,s,o,u,c,u,c],s=u,o=c);var w=p(f,d,i);if(i)g+=w;else{for(var k=0,B=w.length;B>k;k++)w[k].segment1=x,w[k].segment2=m,w[k].bez1=f,w[k].bez2=d;g=g.concat(w)}}}}}return g}function g(t,e,r,i,n,a){null!=t?(this.a=+t,this.b=+e,this.c=+r,this.d=+i,this.e=+n,this.f=+a):(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0)}function x(){return this.x+I+this.y}function v(){return this.x+I+this.y+I+this.width+" × "+this.height}function y(t,e,r,i,n,a){function s(t){return((c*t+u)*t+h)*t}function o(t,e){var r=l(t,e);return((d*r+p)*r+f)*r}function l(t,e){var r,i,n,a,o,l;for(n=t,l=0;8>l;l++){if(a=s(n)-t,H(a)n)return r;if(n>i)return i;for(;i>r;){if(a=s(n),H(a-t)a?r=n:i=n,n=(i-r)/2+r}return n}var h=3*e,u=3*(i-e)-h,c=1-h-u,f=3*r,p=3*(n-r)-f,d=1-f-p;return o(t,1/(200*a))}function m(t,e){var r=[],i={};if(this.ms=e,this.times=1,t){for(var n in t)t[T](n)&&(i[ht(n)]=t[n],r.push(ht(n)));r.sort(Bt)}this.anim=i,this.top=r[r.length-1],this.percents=r}function b(r,i,n,a,s,o){n=ht(n);var l,h,u,c=[],f,p,d,x=r.ms,v={},m={},b={};if(a)for(w=0,B=Ee.length;B>w;w++){var _=Ee[w];if(_.el.id==i.id&&_.anim==r){_.percent!=n?(Ee.splice(w,1),u=1):h=_,i.attr(_.totalOrigin);break}}else a=+m;for(var w=0,B=r.percents.length;B>w;w++){if(r.percents[w]==n||r.percents[w]>a*r.top){n=r.percents[w],p=r.percents[w-1]||0,x=x/r.top*(n-p),f=r.percents[w+1],l=r.anim[n];break}a&&i.attr(r.anim[r.percents[w]])}if(l){if(h)h.initstatus=a,h.start=new Date-h.ms*a;else{for(var C in l)if(l[T](C)&&(pt[T](C)||i.paper.customAttributes[T](C)))switch(v[C]=i.attr(C),null==v[C]&&(v[C]=ft[C]),m[C]=l[C],pt[C]){case $:b[C]=(m[C]-v[C])/x;break;case"colour":v[C]=e.getRGB(v[C]);var S=e.getRGB(m[C]);b[C]={r:(S.r-v[C].r)/x,g:(S.g-v[C].g)/x,b:(S.b-v[C].b)/x};break;case"path":var A=Qt(v[C],m[C]),E=A[1];for(v[C]=A[0],b[C]=[],w=0,B=v[C].length;B>w;w++){b[C][w]=[0];for(var M=1,N=v[C][w].length;N>M;M++)b[C][w][M]=(E[w][M]-v[C][w][M])/x}break;case"transform":var L=i._,z=le(L[C],m[C]);if(z)for(v[C]=z.from,m[C]=z.to,b[C]=[],b[C].real=!0,w=0,B=v[C].length;B>w;w++)for(b[C][w]=[v[C][w][0]],M=1,N=v[C][w].length;N>M;M++)b[C][w][M]=(m[C][w][M]-v[C][w][M])/x;else{var F=i.matrix||new g,R={_:{transform:L.transform},getBBox:function(){return i.getBBox(1)}};v[C]=[F.a,F.b,F.c,F.d,F.e,F.f],se(R,m[C]),m[C]=R._.transform,b[C]=[(R.matrix.a-F.a)/x,(R.matrix.b-F.b)/x,(R.matrix.c-F.c)/x,(R.matrix.d-F.d)/x,(R.matrix.e-F.e)/x,(R.matrix.f-F.f)/x]}break;case"csv":var I=j(l[C])[q](k),D=j(v[C])[q](k);if("clip-rect"==C)for(v[C]=D,b[C]=[],w=D.length;w--;)b[C][w]=(I[w]-v[C][w])/x;m[C]=I;break;default:for(I=[][P](l[C]),D=[][P](v[C]),b[C]=[],w=i.paper.customAttributes[C].length;w--;)b[C][w]=((I[w]||0)-(D[w]||0))/x}var V=l.easing,O=e.easing_formulas[V];if(!O)if(O=j(V).match(st),O&&5==O.length){var Y=O;O=function(t){return y(t,+Y[1],+Y[2],+Y[3],+Y[4],x)}}else O=St;if(d=l.start||r.start||+new Date,_={anim:r,percent:n,timestamp:d,start:d+(r.del||0),status:0,initstatus:a||0,stop:!1,ms:x,easing:O,from:v,diff:b,to:m,el:i,callback:l.callback,prev:p,next:f,repeat:o||r.times,origin:i.attr(),totalOrigin:s},Ee.push(_),a&&!h&&!u&&(_.stop=!0,_.start=new Date-x*a,1==Ee.length))return Ne();u&&(_.start=new Date-_.ms*a),1==Ee.length&&Me(Ne)}t("raphael.anim.start."+i.id,i,r)}}function _(t){for(var e=0;en;n++)for(l=t[n],a=1,o=l.length;o>a;a+=2)r=e.x(l[a],l[a+1]),i=e.y(l[a],l[a+1]),l[a]=r,l[a+1]=i;return t};if(e._g=A,e.type=A.win.SVGAngle||A.doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML","VML"==e.type){var Nt=A.doc.createElement("div"),Lt;if(Nt.innerHTML='',Lt=Nt.firstChild,Lt.style.behavior="url(#default#VML)",!Lt||"object"!=typeof Lt.adj)return e.type=R;Nt=null}e.svg=!(e.vml="VML"==e.type),e._Paper=M,e.fn=N=M.prototype=e.prototype,e._id=0,e.is=function(t,e){return e=O.call(e),"finite"==e?!at[T](+t):"array"==e?t instanceof Array:"null"==e&&null===t||e==typeof t&&null!==t||"object"==e&&t===Object(t)||"array"==e&&Array.isArray&&Array.isArray(t)||tt.call(t).slice(8,-1).toLowerCase()==e},e.angle=function(t,r,i,n,a,s){if(null==a){var o=t-i,l=r-n;return o||l?(180+180*Y.atan2(-l,-o)/U+360)%360:0}return e.angle(t,r,a,s)-e.angle(i,n,a,s)},e.rad=function(t){return t%360*U/180},e.deg=function(t){return Math.round(180*t/U%360*1e3)/1e3},e.snapTo=function(t,r,i){if(i=e.is(i,"finite")?i:10,e.is(t,Q)){for(var n=t.length;n--;)if(H(t[n]-r)<=i)return t[n]}else{t=+t;var a=r%t;if(i>a)return r-a;if(a>t-i)return r-a+t}return r};var zt=e.createUUID=function(t,e){return function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(t,e).toUpperCase()}}(/[xy]/g,function(t){var e=16*Y.random()|0,r="x"==t?e:3&e|8;return r.toString(16)});e.setWindow=function(r){t("raphael.setWindow",e,A.win,r),A.win=r,A.doc=A.win.document,e._engine.initWin&&e._engine.initWin(A.win)};var Pt=function(t){if(e.vml){var r=/^\s+|\s+$/g,i;try{var a=new ActiveXObject("htmlfile");a.write(""),a.close(),i=a.body}catch(s){i=createPopup().document.body}var o=i.createTextRange();Pt=n(function(t){try{i.style.color=j(t).replace(r,R);var e=o.queryCommandValue("ForeColor");return e=(255&e)<<16|65280&e|(16711680&e)>>>16,"#"+("000000"+e.toString(16)).slice(-6)}catch(n){return"none"}})}else{var l=A.doc.createElement("i");l.title="Raphaël Colour Picker",l.style.display="none",A.doc.body.appendChild(l),Pt=n(function(t){return l.style.color=t,A.doc.defaultView.getComputedStyle(l,R).getPropertyValue("color")})}return Pt(t)},Ft=function(){return"hsb("+[this.h,this.s,this.b]+")"},Rt=function(){return"hsl("+[this.h,this.s,this.l]+")"},It=function(){return this.hex},jt=function(t,r,i){if(null==r&&e.is(t,"object")&&"r"in t&&"g"in t&&"b"in t&&(i=t.b,r=t.g,t=t.r),null==r&&e.is(t,Z)){var n=e.getRGB(t);t=n.r,r=n.g,i=n.b}return(t>1||r>1||i>1)&&(t/=255,r/=255,i/=255),[t,r,i]},qt=function(t,r,i,n){t*=255,r*=255,i*=255;var a={r:t,g:r,b:i,hex:e.rgb(t,r,i),toString:It};return e.is(n,"finite")&&(a.opacity=n),a};e.color=function(t){var r;return e.is(t,"object")&&"h"in t&&"s"in t&&"b"in t?(r=e.hsb2rgb(t),t.r=r.r,t.g=r.g,t.b=r.b,t.hex=r.hex):e.is(t,"object")&&"h"in t&&"s"in t&&"l"in t?(r=e.hsl2rgb(t),t.r=r.r,t.g=r.g,t.b=r.b,t.hex=r.hex):(e.is(t,"string")&&(t=e.getRGB(t)),e.is(t,"object")&&"r"in t&&"g"in t&&"b"in t?(r=e.rgb2hsl(t),t.h=r.h,t.s=r.s,t.l=r.l,r=e.rgb2hsb(t),t.v=r.b):(t={hex:"none"},t.r=t.g=t.b=t.h=t.s=t.v=t.l=-1)),t.toString=It,t},e.hsb2rgb=function(t,e,r,i){this.is(t,"object")&&"h"in t&&"s"in t&&"b"in t&&(r=t.b,e=t.s,i=t.o,t=t.h),t*=360;var n,a,s,o,l;return t=t%360/60,l=r*e,o=l*(1-H(t%2-1)),n=a=s=r-l,t=~~t,n+=[l,o,0,0,o,l][t],a+=[o,l,l,o,0,0][t],s+=[0,0,o,l,l,o][t],qt(n,a,s,i)},e.hsl2rgb=function(t,e,r,i){this.is(t,"object")&&"h"in t&&"s"in t&&"l"in t&&(r=t.l,e=t.s,t=t.h),(t>1||e>1||r>1)&&(t/=360,e/=100,r/=100),t*=360;var n,a,s,o,l;return t=t%360/60,l=2*e*(.5>r?r:1-r),o=l*(1-H(t%2-1)),n=a=s=r-l/2,t=~~t,n+=[l,o,0,0,o,l][t],a+=[o,l,l,o,0,0][t],s+=[0,0,o,l,l,o][t],qt(n,a,s,i)},e.rgb2hsb=function(t,e,r){r=jt(t,e,r),t=r[0],e=r[1],r=r[2];var i,n,a,s;return a=W(t,e,r),s=a-G(t,e,r),i=0==s?null:a==t?(e-r)/s:a==e?(r-t)/s+2:(t-e)/s+4,i=(i+360)%6*60/360,n=0==s?0:s/a,{h:i,s:n,b:a,toString:Ft}},e.rgb2hsl=function(t,e,r){r=jt(t,e,r),t=r[0],e=r[1],r=r[2];var i,n,a,s,o,l;return s=W(t,e,r),o=G(t,e,r),l=s-o,i=0==l?null:s==t?(e-r)/l:s==e?(r-t)/l+2:(t-e)/l+4,i=(i+360)%6*60/360,a=(s+o)/2,n=0==l?0:.5>a?l/(2*a):l/(2-2*a),{h:i,s:n,l:a,toString:Rt}},e._path2string=function(){return this.join(",").replace(vt,"$1")};var Dt=e._preload=function(t,e){var r=A.doc.createElement("img");r.style.cssText="position:absolute;left:-9999em;top:-9999em",r.onload=function(){e.call(this),this.onload=null,A.doc.body.removeChild(this)},r.onerror=function(){A.doc.body.removeChild(this)},A.doc.body.appendChild(r),r.src=t};e.getRGB=n(function(t){if(!t||(t=j(t)).indexOf("-")+1)return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:a};if("none"==t)return{r:-1,g:-1,b:-1,hex:"none",toString:a};!(xt[T](t.toLowerCase().substring(0,2))||"#"==t.charAt())&&(t=Pt(t));var r,i,n,s,o,l,h,u=t.match(nt);return u?(u[2]&&(s=ut(u[2].substring(5),16),n=ut(u[2].substring(3,5),16),i=ut(u[2].substring(1,3),16)),u[3]&&(s=ut((l=u[3].charAt(3))+l,16),n=ut((l=u[3].charAt(2))+l,16),i=ut((l=u[3].charAt(1))+l,16)),u[4]&&(h=u[4][q](gt),i=ht(h[0]),"%"==h[0].slice(-1)&&(i*=2.55),n=ht(h[1]),"%"==h[1].slice(-1)&&(n*=2.55),s=ht(h[2]),"%"==h[2].slice(-1)&&(s*=2.55),"rgba"==u[1].toLowerCase().slice(0,4)&&(o=ht(h[3])),h[3]&&"%"==h[3].slice(-1)&&(o/=100)),u[5]?(h=u[5][q](gt),i=ht(h[0]),"%"==h[0].slice(-1)&&(i*=2.55),n=ht(h[1]),"%"==h[1].slice(-1)&&(n*=2.55),s=ht(h[2]),"%"==h[2].slice(-1)&&(s*=2.55),("deg"==h[0].slice(-3)||"°"==h[0].slice(-1))&&(i/=360),"hsba"==u[1].toLowerCase().slice(0,4)&&(o=ht(h[3])),h[3]&&"%"==h[3].slice(-1)&&(o/=100),e.hsb2rgb(i,n,s,o)):u[6]?(h=u[6][q](gt),i=ht(h[0]),"%"==h[0].slice(-1)&&(i*=2.55),n=ht(h[1]),"%"==h[1].slice(-1)&&(n*=2.55),s=ht(h[2]),"%"==h[2].slice(-1)&&(s*=2.55),("deg"==h[0].slice(-3)||"°"==h[0].slice(-1))&&(i/=360),"hsla"==u[1].toLowerCase().slice(0,4)&&(o=ht(h[3])),h[3]&&"%"==h[3].slice(-1)&&(o/=100),e.hsl2rgb(i,n,s,o)):(u={r:i,g:n,b:s,toString:a},u.hex="#"+(16777216|s|n<<8|i<<16).toString(16).slice(1),e.is(o,"finite")&&(u.opacity=o),u)):{r:-1,g:-1,b:-1,hex:"none",error:1,toString:a}},e),e.hsb=n(function(t,r,i){return e.hsb2rgb(t,r,i).hex}),e.hsl=n(function(t,r,i){return e.hsl2rgb(t,r,i).hex}),e.rgb=n(function(t,e,r){function i(t){return t+.5|0}return"#"+(16777216|i(r)|i(e)<<8|i(t)<<16).toString(16).slice(1)}),e.getColor=function(t){var e=this.getColor.start=this.getColor.start||{h:0,s:1,b:t||.75},r=this.hsb2rgb(e.h,e.s,e.b);return e.h+=.075,e.h>1&&(e.h=0,e.s-=.2,e.s<=0&&(this.getColor.start={h:0,s:1,b:e.b})),r.hex},e.getColor.reset=function(){delete this.start},e.parsePathString=function(t){if(!t)return null;var r=Vt(t);if(r.arr)return Yt(r.arr);var i={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},n=[];return e.is(t,Q)&&e.is(t[0],Q)&&(n=Yt(t)),n.length||j(t).replace(yt,function(t,e,r){var a=[],s=e.toLowerCase();if(r.replace(bt,function(t,e){e&&a.push(+e)}),"m"==s&&a.length>2&&(n.push([e][P](a.splice(0,2))),s="l",e="m"==e?"l":"L"),"r"==s)n.push([e][P](a));else for(;a.length>=i[s]&&(n.push([e][P](a.splice(0,i[s]))),i[s]););}),n.toString=e._path2string,r.arr=Yt(n),n},e.parseTransformString=n(function(t){if(!t)return null;var r={r:3,s:4,t:2,m:6},i=[];return e.is(t,Q)&&e.is(t[0],Q)&&(i=Yt(t)),i.length||j(t).replace(mt,function(t,e,r){var n=[],a=O.call(e);r.replace(bt,function(t,e){e&&n.push(+e)}),i.push([e][P](n))}),i.toString=e._path2string,i});var Vt=function(t){var e=Vt.ps=Vt.ps||{};return e[t]?e[t].sleep=100:e[t]={sleep:100},setTimeout(function(){for(var r in e)e[T](r)&&r!=t&&(e[r].sleep--,!e[r].sleep&&delete e[r])}),e[t]};e.findDotsAtSegment=function(t,e,r,i,n,a,s,o,l){var h=1-l,u=X(h,3),c=X(h,2),f=l*l,p=f*l,d=u*t+3*c*l*r+3*h*l*l*n+p*s,g=u*e+3*c*l*i+3*h*l*l*a+p*o,x=t+2*l*(r-t)+f*(n-2*r+t),v=e+2*l*(i-e)+f*(a-2*i+e),y=r+2*l*(n-r)+f*(s-2*n+r),m=i+2*l*(a-i)+f*(o-2*a+i),b=h*t+l*r,_=h*e+l*i,w=h*n+l*s,k=h*a+l*o,B=90-180*Y.atan2(x-y,v-m)/U;return(x>y||m>v)&&(B+=180),{x:d,y:g,m:{x:x,y:v},n:{x:y,y:m},start:{x:b,y:_},end:{x:w,y:k},alpha:B}},e.bezierBBox=function(t,r,i,n,a,s,o,l){e.is(t,"array")||(t=[t,r,i,n,a,s,o,l]);var h=Zt.apply(null,t);return{x:h.min.x,y:h.min.y,x2:h.max.x,y2:h.max.y,width:h.max.x-h.min.x,height:h.max.y-h.min.y}},e.isPointInsideBBox=function(t,e,r){return e>=t.x&&e<=t.x2&&r>=t.y&&r<=t.y2},e.isBBoxIntersect=function(t,r){var i=e.isPointInsideBBox;return i(r,t.x,t.y)||i(r,t.x2,t.y)||i(r,t.x,t.y2)||i(r,t.x2,t.y2)||i(t,r.x,r.y)||i(t,r.x2,r.y)||i(t,r.x,r.y2)||i(t,r.x2,r.y2)||(t.xr.x||r.xt.x)&&(t.yr.y||r.yt.y)},e.pathIntersection=function(t,e){return d(t,e)},e.pathIntersectionNumber=function(t,e){return d(t,e,1)},e.isPointInsidePath=function(t,r,i){var n=e.pathBBox(t);return e.isPointInsideBBox(n,r,i)&&d(t,[["M",r,i],["H",n.x2+10]],1)%2==1},e._removedFactory=function(e){return function(){t("raphael.log",null,"Raphaël: you are calling to method “"+e+"” of removed object",e)}};var Ot=e.pathBBox=function(t){var e=Vt(t);if(e.bbox)return r(e.bbox);if(!t)return{x:0,y:0,width:0,height:0,x2:0,y2:0};t=Qt(t);for(var i=0,n=0,a=[],s=[],o,l=0,h=t.length;h>l;l++)if(o=t[l],"M"==o[0])i=o[1],n=o[2],a.push(i),s.push(n);else{var u=Zt(i,n,o[1],o[2],o[3],o[4],o[5],o[6]);a=a[P](u.min.x,u.max.x),s=s[P](u.min.y,u.max.y),i=o[5],n=o[6]}var c=G[z](0,a),f=G[z](0,s),p=W[z](0,a),d=W[z](0,s),g=p-c,x=d-f,v={x:c,y:f,x2:p,y2:d,width:g,height:x,cx:c+g/2,cy:f+x/2};return e.bbox=r(v),v},Yt=function(t){var i=r(t);return i.toString=e._path2string,i},Wt=e._pathToRelative=function(t){var r=Vt(t);if(r.rel)return Yt(r.rel);e.is(t,Q)&&e.is(t&&t[0],Q)||(t=e.parsePathString(t));var i=[],n=0,a=0,s=0,o=0,l=0;"M"==t[0][0]&&(n=t[0][1],a=t[0][2],s=n,o=a,l++,i.push(["M",n,a]));for(var h=l,u=t.length;u>h;h++){var c=i[h]=[],f=t[h];if(f[0]!=O.call(f[0]))switch(c[0]=O.call(f[0]),c[0]){case"a":c[1]=f[1],c[2]=f[2],c[3]=f[3],c[4]=f[4],c[5]=f[5],c[6]=+(f[6]-n).toFixed(3),c[7]=+(f[7]-a).toFixed(3);break;case"v":c[1]=+(f[1]-a).toFixed(3);break;case"m":s=f[1],o=f[2];default:for(var p=1,d=f.length;d>p;p++)c[p]=+(f[p]-(p%2?n:a)).toFixed(3)}else{c=i[h]=[],"m"==f[0]&&(s=f[1]+n,o=f[2]+a);for(var g=0,x=f.length;x>g;g++)i[h][g]=f[g]}var v=i[h].length;switch(i[h][0]){case"z":n=s,a=o;break;case"h":n+=+i[h][v-1];break;case"v":a+=+i[h][v-1];break;default:n+=+i[h][v-2],a+=+i[h][v-1]}}return i.toString=e._path2string,r.rel=Yt(i),i},Gt=e._pathToAbsolute=function(t){var r=Vt(t);if(r.abs)return Yt(r.abs);if(e.is(t,Q)&&e.is(t&&t[0],Q)||(t=e.parsePathString(t)),!t||!t.length)return[["M",0,0]];var i=[],n=0,a=0,o=0,l=0,h=0;"M"==t[0][0]&&(n=+t[0][1],a=+t[0][2],o=n,l=a,h++,i[0]=["M",n,a]);for(var u=3==t.length&&"M"==t[0][0]&&"R"==t[1][0].toUpperCase()&&"Z"==t[2][0].toUpperCase(),c,f,p=h,d=t.length;d>p;p++){if(i.push(c=[]),f=t[p],f[0]!=ct.call(f[0]))switch(c[0]=ct.call(f[0]),c[0]){case"A":c[1]=f[1],c[2]=f[2],c[3]=f[3],c[4]=f[4],c[5]=f[5],c[6]=+(f[6]+n),c[7]=+(f[7]+a);break;case"V":c[1]=+f[1]+a;break;case"H":c[1]=+f[1]+n;break;case"R":for(var g=[n,a][P](f.slice(1)),x=2,v=g.length;v>x;x++)g[x]=+g[x]+n,g[++x]=+g[x]+a;i.pop(),i=i[P](s(g,u));break;case"M":o=+f[1]+n,l=+f[2]+a;default:for(x=1,v=f.length;v>x;x++)c[x]=+f[x]+(x%2?n:a)}else if("R"==f[0])g=[n,a][P](f.slice(1)),i.pop(),i=i[P](s(g,u)),c=["R"][P](f.slice(-2));else for(var y=0,m=f.length;m>y;y++)c[y]=f[y];switch(c[0]){case"Z":n=o,a=l;break;case"H":n=c[1];break;case"V":a=c[1];break;case"M":o=c[c.length-2],l=c[c.length-1];default:n=c[c.length-2],a=c[c.length-1]}}return i.toString=e._path2string,r.abs=Yt(i),i},Ht=function(t,e,r,i){return[t,e,r,i,r,i]},Xt=function(t,e,r,i,n,a){var s=1/3,o=2/3;return[s*t+o*r,s*e+o*i,s*n+o*r,s*a+o*i,n,a]},Ut=function(t,e,r,i,a,s,o,l,h,u){var c=120*U/180,f=U/180*(+a||0),p=[],d,g=n(function(t,e,r){var i=t*Y.cos(r)-e*Y.sin(r),n=t*Y.sin(r)+e*Y.cos(r);return{x:i,y:n}});if(u)S=u[0],T=u[1],B=u[2],C=u[3];else{d=g(t,e,-f),t=d.x,e=d.y,d=g(l,h,-f),l=d.x,h=d.y;var x=Y.cos(U/180*a),v=Y.sin(U/180*a),y=(t-l)/2,m=(e-h)/2,b=y*y/(r*r)+m*m/(i*i);b>1&&(b=Y.sqrt(b),r=b*r,i=b*i);var _=r*r,w=i*i,k=(s==o?-1:1)*Y.sqrt(H((_*w-_*m*m-w*y*y)/(_*m*m+w*y*y))),B=k*r*m/i+(t+l)/2,C=k*-i*y/r+(e+h)/2,S=Y.asin(((e-C)/i).toFixed(9)),T=Y.asin(((h-C)/i).toFixed(9));S=B>t?U-S:S,T=B>l?U-T:T,0>S&&(S=2*U+S),0>T&&(T=2*U+T),o&&S>T&&(S-=2*U),!o&&T>S&&(T-=2*U)}var A=T-S;if(H(A)>c){var E=T,M=l,N=h;T=S+c*(o&&T>S?1:-1),l=B+r*Y.cos(T),h=C+i*Y.sin(T),p=Ut(l,h,r,i,a,0,o,M,N,[T,E,B,C])}A=T-S;var L=Y.cos(S),z=Y.sin(S),F=Y.cos(T),R=Y.sin(T),I=Y.tan(A/4),j=4/3*r*I,D=4/3*i*I,V=[t,e],O=[t+j*z,e-D*L],W=[l+j*R,h-D*F],G=[l,h];if(O[0]=2*V[0]-O[0],O[1]=2*V[1]-O[1],u)return[O,W,G][P](p);p=[O,W,G][P](p).join()[q](",");for(var X=[],$=0,Z=p.length;Z>$;$++)X[$]=$%2?g(p[$-1],p[$],f).y:g(p[$],p[$+1],f).x;return X},$t=function(t,e,r,i,n,a,s,o,l){var h=1-l;return{x:X(h,3)*t+3*X(h,2)*l*r+3*h*l*l*n+X(l,3)*s,y:X(h,3)*e+3*X(h,2)*l*i+3*h*l*l*a+X(l,3)*o}},Zt=n(function(t,e,r,i,n,a,s,o){var l=n-2*r+t-(s-2*n+r),h=2*(r-t)-2*(n-r),u=t-r,c=(-h+Y.sqrt(h*h-4*l*u))/2/l,f=(-h-Y.sqrt(h*h-4*l*u))/2/l,p=[e,o],d=[t,s],g;return H(c)>"1e12"&&(c=.5),H(f)>"1e12"&&(f=.5),c>0&&1>c&&(g=$t(t,e,r,i,n,a,s,o,c),d.push(g.x),p.push(g.y)),f>0&&1>f&&(g=$t(t,e,r,i,n,a,s,o,f),d.push(g.x),p.push(g.y)),l=a-2*i+e-(o-2*a+i),h=2*(i-e)-2*(a-i),u=e-i,c=(-h+Y.sqrt(h*h-4*l*u))/2/l,f=(-h-Y.sqrt(h*h-4*l*u))/2/l,H(c)>"1e12"&&(c=.5),H(f)>"1e12"&&(f=.5),c>0&&1>c&&(g=$t(t,e,r,i,n,a,s,o,c),d.push(g.x),p.push(g.y)),f>0&&1>f&&(g=$t(t,e,r,i,n,a,s,o,f),d.push(g.x),p.push(g.y)),{min:{x:G[z](0,d),y:G[z](0,p)},max:{x:W[z](0,d),y:W[z](0,p)}}}),Qt=e._path2curve=n(function(t,e){var r=!e&&Vt(t);if(!e&&r.curve)return Yt(r.curve);for(var i=Gt(t),n=e&&Gt(e),a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},o=(function(t,e,r){var i,n,a={T:1,Q:1};if(!t)return["C",e.x,e.y,e.x,e.y,e.x,e.y];switch(!(t[0]in a)&&(e.qx=e.qy=null),t[0]){case"M":e.X=t[1],e.Y=t[2];break;case"A":t=["C"][P](Ut[z](0,[e.x,e.y][P](t.slice(1))));break;case"S":"C"==r||"S"==r?(i=2*e.x-e.bx,n=2*e.y-e.by):(i=e.x,n=e.y),t=["C",i,n][P](t.slice(1));break;case"T":"Q"==r||"T"==r?(e.qx=2*e.x-e.qx,e.qy=2*e.y-e.qy):(e.qx=e.x,e.qy=e.y),t=["C"][P](Xt(e.x,e.y,e.qx,e.qy,t[1],t[2]));break;case"Q":e.qx=t[1],e.qy=t[2],t=["C"][P](Xt(e.x,e.y,t[1],t[2],t[3],t[4]));break;case"L":t=["C"][P](Ht(e.x,e.y,t[1],t[2]));break;case"H":t=["C"][P](Ht(e.x,e.y,t[1],e.y));break;case"V":t=["C"][P](Ht(e.x,e.y,e.x,t[1]));break;case"Z":t=["C"][P](Ht(e.x,e.y,e.X,e.Y))}return t}),l=function(t,e){if(t[e].length>7){t[e].shift();for(var r=t[e];r.length;)u[e]="A",n&&(c[e]="A"),t.splice(e++,0,["C"][P](r.splice(0,6)));t.splice(e,1),g=W(i.length,n&&n.length||0)}},h=function(t,e,r,a,s){t&&e&&"M"==t[s][0]&&"M"!=e[s][0]&&(e.splice(s,0,["M",a.x,a.y]),r.bx=0,r.by=0,r.x=t[s][1],r.y=t[s][2],g=W(i.length,n&&n.length||0))},u=[],c=[],f="",p="",d=0,g=W(i.length,n&&n.length||0);g>d;d++){i[d]&&(f=i[d][0]),"C"!=f&&(u[d]=f,d&&(p=u[d-1])),i[d]=o(i[d],a,p),"A"!=u[d]&&"C"==f&&(u[d]="C"),l(i,d),n&&(n[d]&&(f=n[d][0]),"C"!=f&&(c[d]=f,d&&(p=c[d-1])),n[d]=o(n[d],s,p),"A"!=c[d]&&"C"==f&&(c[d]="C"),l(n,d)),h(i,n,a,s,d),h(n,i,s,a,d);var x=i[d],v=n&&n[d],y=x.length,m=n&&v.length;a.x=x[y-2],a.y=x[y-1],a.bx=ht(x[y-4])||a.x,a.by=ht(x[y-3])||a.y,s.bx=n&&(ht(v[m-4])||s.x),s.by=n&&(ht(v[m-3])||s.y),s.x=n&&v[m-2],s.y=n&&v[m-1]}return n||(r.curve=Yt(i)),n?[i,n]:i},null,Yt),Jt=e._parseDots=n(function(t){for(var r=[],i=0,n=t.length;n>i;i++){var a={},s=t[i].match(/^([^:]*):?([\d\.]*)/);if(a.color=e.getRGB(s[1]),a.color.error)return null;a.opacity=a.color.opacity,a.color=a.color.hex,s[2]&&(a.offset=s[2]+"%"),r.push(a)}for(i=1,n=r.length-1;n>i;i++)if(!r[i].offset){for(var o=ht(r[i-1].offset||0),l=0,h=i+1;n>h;h++)if(r[h].offset){l=r[h].offset;break}l||(l=100,h=n),l=ht(l);for(var u=(l-o)/(h-i+1);h>i;i++)o+=u,r[i].offset=o+"%"}return r}),Kt=e._tear=function(t,e){t==e.top&&(e.top=t.prev),t==e.bottom&&(e.bottom=t.next),t.next&&(t.next.prev=t.prev),t.prev&&(t.prev.next=t.next)},te=e._tofront=function(t,e){e.top!==t&&(Kt(t,e),t.next=null,t.prev=e.top,e.top.next=t,e.top=t)},ee=e._toback=function(t,e){e.bottom!==t&&(Kt(t,e),t.next=e.bottom,t.prev=null,e.bottom.prev=t,e.bottom=t)},re=e._insertafter=function(t,e,r){Kt(t,r),e==r.top&&(r.top=t),e.next&&(e.next.prev=t),t.next=e.next,t.prev=e,e.next=t},ie=e._insertbefore=function(t,e,r){Kt(t,r),e==r.bottom&&(r.bottom=t),e.prev&&(e.prev.next=t),t.prev=e.prev,e.prev=t,t.next=e},ne=e.toMatrix=function(t,e){var r=Ot(t),i={_:{transform:R},getBBox:function(){return r}};return se(i,e),i.matrix},ae=e.transformPath=function(t,e){return Mt(t,ne(t,e))},se=e._extractTransform=function(t,r){if(null==r)return t._.transform;r=j(r).replace(/\.{3}|\u2026/g,t._.transform||R);var i=e.parseTransformString(r),n=0,a=0,s=0,o=1,l=1,h=t._,u=new g;if(h.transform=i||[],i)for(var c=0,f=i.length;f>c;c++){var p=i[c],d=p.length,x=j(p[0]).toLowerCase(),v=p[0]!=x,y=v?u.invert():0,m,b,_,w,k;"t"==x&&3==d?v?(m=y.x(0,0),b=y.y(0,0),_=y.x(p[1],p[2]),w=y.y(p[1],p[2]),u.translate(_-m,w-b)):u.translate(p[1],p[2]):"r"==x?2==d?(k=k||t.getBBox(1),u.rotate(p[1],k.x+k.width/2,k.y+k.height/2),n+=p[1]):4==d&&(v?(_=y.x(p[2],p[3]),w=y.y(p[2],p[3]),u.rotate(p[1],_,w)):u.rotate(p[1],p[2],p[3]),n+=p[1]):"s"==x?2==d||3==d?(k=k||t.getBBox(1),u.scale(p[1],p[d-1],k.x+k.width/2,k.y+k.height/2),o*=p[1],l*=p[d-1]):5==d&&(v?(_=y.x(p[3],p[4]),w=y.y(p[3],p[4]),u.scale(p[1],p[2],_,w)):u.scale(p[1],p[2],p[3],p[4]),o*=p[1],l*=p[2]):"m"==x&&7==d&&u.add(p[1],p[2],p[3],p[4],p[5],p[6]),h.dirtyT=1,t.matrix=u}t.matrix=u,h.sx=o,h.sy=l,h.deg=n,h.dx=a=u.e,h.dy=s=u.f,1==o&&1==l&&!n&&h.bbox?(h.bbox.x+=+a,h.bbox.y+=+s):h.dirtyT=1},oe=function(t){var e=t[0];switch(e.toLowerCase()){case"t":return[e,0,0];case"m":return[e,1,0,0,1,0,0];case"r":return 4==t.length?[e,0,t[2],t[3]]:[e,0];case"s":return 5==t.length?[e,1,1,t[3],t[4]]:3==t.length?[e,1,1]:[e,1]}},le=e._equaliseTransform=function(t,r){r=j(r).replace(/\.{3}|\u2026/g,t),t=e.parseTransformString(t)||[],r=e.parseTransformString(r)||[];for(var i=W(t.length,r.length),n=[],a=[],s=0,o,l,h,u;i>s;s++){if(h=t[s]||oe(r[s]),u=r[s]||oe(h),h[0]!=u[0]||"r"==h[0].toLowerCase()&&(h[2]!=u[2]||h[3]!=u[3])||"s"==h[0].toLowerCase()&&(h[3]!=u[3]||h[4]!=u[4]))return;for(n[s]=[],a[s]=[],o=0,l=W(h.length,u.length);l>o;o++)o in h&&(n[s][o]=h[o]),o in u&&(a[s][o]=u[o])}return{from:n,to:a}};e._getContainer=function(t,r,i,n){var a;return a=null!=n||e.is(t,"object")?t:A.doc.getElementById(t),null!=a?a.tagName?null==r?{container:a,width:a.style.pixelWidth||a.offsetWidth,height:a.style.pixelHeight||a.offsetHeight}:{container:a,width:r,height:i}:{container:1,x:t,y:r,width:i,height:n}:void 0},e.pathToRelative=Wt,e._engine={},e.path2curve=Qt,e.matrix=function(t,e,r,i,n,a){return new g(t,e,r,i,n,a)},function(t){function r(t){return t[0]*t[0]+t[1]*t[1]}function i(t){var e=Y.sqrt(r(t));t[0]&&(t[0]/=e),t[1]&&(t[1]/=e)}t.add=function(t,e,r,i,n,a){var s=[[],[],[]],o=[[this.a,this.c,this.e],[this.b,this.d,this.f],[0,0,1]],l=[[t,r,n],[e,i,a],[0,0,1]],h,u,c,f;for(t&&t instanceof g&&(l=[[t.a,t.c,t.e],[t.b,t.d,t.f],[0,0,1]]),h=0;3>h;h++)for(u=0;3>u;u++){for(f=0,c=0;3>c;c++)f+=o[h][c]*l[c][u];s[h][u]=f}this.a=s[0][0],this.b=s[1][0],this.c=s[0][1],this.d=s[1][1],this.e=s[0][2],this.f=s[1][2]},t.invert=function(){var t=this,e=t.a*t.d-t.b*t.c;return new g(t.d/e,-t.b/e,-t.c/e,t.a/e,(t.c*t.f-t.d*t.e)/e,(t.b*t.e-t.a*t.f)/e)},t.clone=function(){return new g(this.a,this.b,this.c,this.d,this.e,this.f)},t.translate=function(t,e){ +this.add(1,0,0,1,t,e)},t.scale=function(t,e,r,i){null==e&&(e=t),(r||i)&&this.add(1,0,0,1,r,i),this.add(t,0,0,e,0,0),(r||i)&&this.add(1,0,0,1,-r,-i)},t.rotate=function(t,r,i){t=e.rad(t),r=r||0,i=i||0;var n=+Y.cos(t).toFixed(9),a=+Y.sin(t).toFixed(9);this.add(n,a,-a,n,r,i),this.add(1,0,0,1,-r,-i)},t.x=function(t,e){return t*this.a+e*this.c+this.e},t.y=function(t,e){return t*this.b+e*this.d+this.f},t.get=function(t){return+this[j.fromCharCode(97+t)].toFixed(4)},t.toString=function(){return e.svg?"matrix("+[this.get(0),this.get(1),this.get(2),this.get(3),this.get(4),this.get(5)].join()+")":[this.get(0),this.get(2),this.get(1),this.get(3),0,0].join()},t.toFilter=function(){return"progid:DXImageTransform.Microsoft.Matrix(M11="+this.get(0)+", M12="+this.get(2)+", M21="+this.get(1)+", M22="+this.get(3)+", Dx="+this.get(4)+", Dy="+this.get(5)+", sizingmethod='auto expand')"},t.offset=function(){return[this.e.toFixed(4),this.f.toFixed(4)]},t.split=function(){var t={};t.dx=this.e,t.dy=this.f;var n=[[this.a,this.c],[this.b,this.d]];t.scalex=Y.sqrt(r(n[0])),i(n[0]),t.shear=n[0][0]*n[1][0]+n[0][1]*n[1][1],n[1]=[n[1][0]-n[0][0]*t.shear,n[1][1]-n[0][1]*t.shear],t.scaley=Y.sqrt(r(n[1])),i(n[1]),t.shear/=t.scaley;var a=-n[0][1],s=n[1][1];return 0>s?(t.rotate=e.deg(Y.acos(s)),0>a&&(t.rotate=360-t.rotate)):t.rotate=e.deg(Y.asin(a)),t.isSimple=!(+t.shear.toFixed(9)||t.scalex.toFixed(9)!=t.scaley.toFixed(9)&&t.rotate),t.isSuperSimple=!+t.shear.toFixed(9)&&t.scalex.toFixed(9)==t.scaley.toFixed(9)&&!t.rotate,t.noRotation=!+t.shear.toFixed(9)&&!t.rotate,t},t.toTransformString=function(t){var e=t||this[q]();return e.isSimple?(e.scalex=+e.scalex.toFixed(4),e.scaley=+e.scaley.toFixed(4),e.rotate=+e.rotate.toFixed(4),(e.dx||e.dy?"t"+[e.dx,e.dy]:R)+(1!=e.scalex||1!=e.scaley?"s"+[e.scalex,e.scaley,0,0]:R)+(e.rotate?"r"+[e.rotate,0,0]:R)):"m"+[this.get(0),this.get(1),this.get(2),this.get(3),this.get(4),this.get(5)]}}(g.prototype);for(var he=function(){this.returnValue=!1},ue=function(){return this.originalEvent.preventDefault()},ce=function(){this.cancelBubble=!0},fe=function(){return this.originalEvent.stopPropagation()},pe=function(t){var e=A.doc.documentElement.scrollTop||A.doc.body.scrollTop,r=A.doc.documentElement.scrollLeft||A.doc.body.scrollLeft;return{x:t.clientX+r,y:t.clientY+e}},de=function(){return A.doc.addEventListener?function(t,e,r,i){var n=function(t){var e=pe(t);return r.call(i,t,e.x,e.y)};if(t.addEventListener(e,n,!1),F&&V[e]){var a=function(e){for(var n=pe(e),a=e,s=0,o=e.targetTouches&&e.targetTouches.length;o>s;s++)if(e.targetTouches[s].target==t){e=e.targetTouches[s],e.originalEvent=a,e.preventDefault=ue,e.stopPropagation=fe;break}return r.call(i,e,n.x,n.y)};t.addEventListener(V[e],a,!1)}return function(){return t.removeEventListener(e,n,!1),F&&V[e]&&t.removeEventListener(V[e],a,!1),!0}}:A.doc.attachEvent?function(t,e,r,i){var n=function(t){t=t||A.win.event;var e=A.doc.documentElement.scrollTop||A.doc.body.scrollTop,n=A.doc.documentElement.scrollLeft||A.doc.body.scrollLeft,a=t.clientX+n,s=t.clientY+e;return t.preventDefault=t.preventDefault||he,t.stopPropagation=t.stopPropagation||ce,r.call(i,t,a,s)};t.attachEvent("on"+e,n);var a=function(){return t.detachEvent("on"+e,n),!0};return a}:void 0}(),ge=[],xe=function(e){for(var r=e.clientX,i=e.clientY,n=A.doc.documentElement.scrollTop||A.doc.body.scrollTop,a=A.doc.documentElement.scrollLeft||A.doc.body.scrollLeft,s,o=ge.length;o--;){if(s=ge[o],F&&e.touches){for(var l=e.touches.length,h;l--;)if(h=e.touches[l],h.identifier==s.el._drag.id){r=h.clientX,i=h.clientY,(e.originalEvent?e.originalEvent:e).preventDefault();break}}else e.preventDefault();var u=s.el.node,c,f=u.nextSibling,p=u.parentNode,d=u.style.display;A.win.opera&&p.removeChild(u),u.style.display="none",c=s.el.paper.getElementByPoint(r,i),u.style.display=d,A.win.opera&&(f?p.insertBefore(u,f):p.appendChild(u)),c&&t("raphael.drag.over."+s.el.id,s.el,c),r+=a,i+=n,t("raphael.drag.move."+s.el.id,s.move_scope||s.el,r-s.el._drag.x,i-s.el._drag.y,r,i,e)}},ve=function(r){e.unmousemove(xe).unmouseup(ve);for(var i=ge.length,n;i--;)n=ge[i],n.el._drag={},t("raphael.drag.end."+n.el.id,n.end_scope||n.start_scope||n.move_scope||n.el,r);ge=[]},ye=e.el={},me=D.length;me--;)!function(t){e[t]=ye[t]=function(r,i){return e.is(r,"function")&&(this.events=this.events||[],this.events.push({name:t,f:r,unbind:de(this.shape||this.node||A.doc,t,r,i||this)})),this},e["un"+t]=ye["un"+t]=function(r){for(var i=this.events||[],n=i.length;n--;)i[n].name!=t||!e.is(r,"undefined")&&i[n].f!=r||(i[n].unbind(),i.splice(n,1),!i.length&&delete this.events);return this}}(D[me]);ye.data=function(r,i){var n=wt[this.id]=wt[this.id]||{};if(0==arguments.length)return n;if(1==arguments.length){if(e.is(r,"object")){for(var a in r)r[T](a)&&this.data(a,r[a]);return this}return t("raphael.data.get."+this.id,this,n[r],r),n[r]}return n[r]=i,t("raphael.data.set."+this.id,this,i,r),this},ye.removeData=function(t){return null==t?wt[this.id]={}:wt[this.id]&&delete wt[this.id][t],this},ye.getData=function(){return r(wt[this.id]||{})},ye.hover=function(t,e,r,i){return this.mouseover(t,r).mouseout(e,i||r)},ye.unhover=function(t,e){return this.unmouseover(t).unmouseout(e)};var be=[];ye.drag=function(r,i,n,a,s,o){function l(l){(l.originalEvent||l).preventDefault();var h=l.clientX,u=l.clientY,c=A.doc.documentElement.scrollTop||A.doc.body.scrollTop,f=A.doc.documentElement.scrollLeft||A.doc.body.scrollLeft;if(this._drag.id=l.identifier,F&&l.touches)for(var p=l.touches.length,d;p--;)if(d=l.touches[p],this._drag.id=d.identifier,d.identifier==this._drag.id){h=d.clientX,u=d.clientY;break}this._drag.x=h+f,this._drag.y=u+c,!ge.length&&e.mousemove(xe).mouseup(ve),ge.push({el:this,move_scope:a,start_scope:s,end_scope:o}),i&&t.on("raphael.drag.start."+this.id,i),r&&t.on("raphael.drag.move."+this.id,r),n&&t.on("raphael.drag.end."+this.id,n),t("raphael.drag.start."+this.id,s||a||this,l.clientX+f,l.clientY+c,l)}return this._drag={},be.push({el:this,start:l}),this.mousedown(l),this},ye.onDragOver=function(e){e?t.on("raphael.drag.over."+this.id,e):t.unbind("raphael.drag.over."+this.id)},ye.undrag=function(){for(var r=be.length;r--;)be[r].el==this&&(this.unmousedown(be[r].start),be.splice(r,1),t.unbind("raphael.drag.*."+this.id));!be.length&&e.unmousemove(xe).unmouseup(ve),ge=[]},N.circle=function(t,r,i){var n=e._engine.circle(this,t||0,r||0,i||0);return this.__set__&&this.__set__.push(n),n},N.rect=function(t,r,i,n,a){var s=e._engine.rect(this,t||0,r||0,i||0,n||0,a||0);return this.__set__&&this.__set__.push(s),s},N.ellipse=function(t,r,i,n){var a=e._engine.ellipse(this,t||0,r||0,i||0,n||0);return this.__set__&&this.__set__.push(a),a},N.path=function(t){t&&!e.is(t,Z)&&!e.is(t[0],Q)&&(t+=R);var r=e._engine.path(e.format[z](e,arguments),this);return this.__set__&&this.__set__.push(r),r},N.image=function(t,r,i,n,a){var s=e._engine.image(this,t||"about:blank",r||0,i||0,n||0,a||0);return this.__set__&&this.__set__.push(s),s},N.text=function(t,r,i){var n=e._engine.text(this,t||0,r||0,j(i));return this.__set__&&this.__set__.push(n),n},N.set=function(t){!e.is(t,"array")&&(t=Array.prototype.splice.call(arguments,0,arguments.length));var r=new ze(t);return this.__set__&&this.__set__.push(r),r.paper=this,r.type="set",r},N.setStart=function(t){this.__set__=t||this.set()},N.setFinish=function(t){var e=this.__set__;return delete this.__set__,e},N.getSize=function(){var t=this.canvas.parentNode;return{width:t.offsetWidth,height:t.offsetHeight}},N.setSize=function(t,r){return e._engine.setSize.call(this,t,r)},N.setViewBox=function(t,r,i,n,a){return e._engine.setViewBox.call(this,t,r,i,n,a)},N.top=N.bottom=null,N.raphael=e;var _e=function(t){var e=t.getBoundingClientRect(),r=t.ownerDocument,i=r.body,n=r.documentElement,a=n.clientTop||i.clientTop||0,s=n.clientLeft||i.clientLeft||0,o=e.top+(A.win.pageYOffset||n.scrollTop||i.scrollTop)-a,l=e.left+(A.win.pageXOffset||n.scrollLeft||i.scrollLeft)-s;return{y:o,x:l}};N.getElementByPoint=function(t,e){var r=this,i=r.canvas,n=A.doc.elementFromPoint(t,e);if(A.win.opera&&"svg"==n.tagName){var a=_e(i),s=i.createSVGRect();s.x=t-a.x,s.y=e-a.y,s.width=s.height=1;var o=i.getIntersectionList(s,null);o.length&&(n=o[o.length-1])}if(!n)return null;for(;n.parentNode&&n!=i.parentNode&&!n.raphael;)n=n.parentNode;return n==r.canvas.parentNode&&(n=i),n=n&&n.raphael?r.getById(n.raphaelid):null},N.getElementsByBBox=function(t){var r=this.set();return this.forEach(function(i){e.isBBoxIntersect(i.getBBox(),t)&&r.push(i)}),r},N.getById=function(t){for(var e=this.bottom;e;){if(e.id==t)return e;e=e.next}return null},N.forEach=function(t,e){for(var r=this.bottom;r;){if(t.call(e,r)===!1)return this;r=r.next}return this},N.getElementsByPoint=function(t,e){var r=this.set();return this.forEach(function(i){i.isPointInside(t,e)&&r.push(i)}),r},ye.isPointInside=function(t,r){var i=this.realPath=Et[this.type](this);return this.attr("transform")&&this.attr("transform").length&&(i=e.transformPath(i,this.attr("transform"))),e.isPointInsidePath(i,t,r)},ye.getBBox=function(t){if(this.removed)return{};var e=this._;return t?(!e.dirty&&e.bboxwt||(this.realPath=Et[this.type](this),e.bboxwt=Ot(this.realPath),e.bboxwt.toString=v,e.dirty=0),e.bboxwt):((e.dirty||e.dirtyT||!e.bbox)&&(!e.dirty&&this.realPath||(e.bboxwt=0,this.realPath=Et[this.type](this)),e.bbox=Ot(Mt(this.realPath,this.matrix)),e.bbox.toString=v,e.dirty=e.dirtyT=0),e.bbox)},ye.clone=function(){if(this.removed)return null;var t=this.paper[this.type]().attr(this.attr());return this.__set__&&this.__set__.push(t),t},ye.glow=function(t){if("text"==this.type)return null;t=t||{};var e={width:(t.width||10)+(+this.attr("stroke-width")||1),fill:t.fill||!1,opacity:null==t.opacity?.5:t.opacity,offsetx:t.offsetx||0,offsety:t.offsety||0,color:t.color||"#000"},r=e.width/2,i=this.paper,n=i.set(),a=this.realPath||Et[this.type](this);a=this.matrix?Mt(a,this.matrix):a;for(var s=1;r+1>s;s++)n.push(i.path(a).attr({stroke:e.color,fill:e.fill?e.color:"none","stroke-linejoin":"round","stroke-linecap":"round","stroke-width":+(e.width/r*s).toFixed(3),opacity:+(e.opacity/r).toFixed(3)}));return n.insertBefore(this).translate(e.offsetx,e.offsety)};var we={},ke=function(t,r,i,n,a,s,o,u,c){return null==c?l(t,r,i,n,a,s,o,u):e.findDotsAtSegment(t,r,i,n,a,s,o,u,h(t,r,i,n,a,s,o,u,c))},Be=function(t,r){return function(i,n,a){i=Qt(i);for(var s,o,l,h,u="",c={},f,p=0,d=0,g=i.length;g>d;d++){if(l=i[d],"M"==l[0])s=+l[1],o=+l[2];else{if(h=ke(s,o,l[1],l[2],l[3],l[4],l[5],l[6]),p+h>n){if(r&&!c.start){if(f=ke(s,o,l[1],l[2],l[3],l[4],l[5],l[6],n-p),u+=["C"+f.start.x,f.start.y,f.m.x,f.m.y,f.x,f.y],a)return u;c.start=u,u=["M"+f.x,f.y+"C"+f.n.x,f.n.y,f.end.x,f.end.y,l[5],l[6]].join(),p+=h,s=+l[5],o=+l[6];continue}if(!t&&!r)return f=ke(s,o,l[1],l[2],l[3],l[4],l[5],l[6],n-p),{x:f.x,y:f.y,alpha:f.alpha}}p+=h,s=+l[5],o=+l[6]}u+=l.shift()+l}return c.end=u,f=t?p:r?c:e.findDotsAtSegment(s,o,l[0],l[1],l[2],l[3],l[4],l[5],1),f.alpha&&(f={x:f.x,y:f.y,alpha:f.alpha}),f}},Ce=Be(1),Se=Be(),Te=Be(0,1);e.getTotalLength=Ce,e.getPointAtLength=Se,e.getSubpath=function(t,e,r){if(this.getTotalLength(t)-r<1e-6)return Te(t,e).end;var i=Te(t,r,1);return e?Te(i,e).end:i},ye.getTotalLength=function(){var t=this.getPath();if(t)return this.node.getTotalLength?this.node.getTotalLength():Ce(t)},ye.getPointAtLength=function(t){var e=this.getPath();if(e)return Se(e,t)},ye.getPath=function(){var t,r=e._getPath[this.type];if("text"!=this.type&&"set"!=this.type)return r&&(t=r(this)),t},ye.getSubpath=function(t,r){var i=this.getPath();if(i)return e.getSubpath(i,t,r)};var Ae=e.easing_formulas={linear:function(t){return t},"<":function(t){return X(t,1.7)},">":function(t){return X(t,.48)},"<>":function(t){var e=.48-t/1.04,r=Y.sqrt(.1734+e*e),i=r-e,n=X(H(i),1/3)*(0>i?-1:1),a=-r-e,s=X(H(a),1/3)*(0>a?-1:1),o=n+s+.5;return 3*(1-o)*o*o+o*o*o},backIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},backOut:function(t){t-=1;var e=1.70158;return t*t*((e+1)*t+e)+1},elastic:function(t){return t==!!t?t:X(2,-10*t)*Y.sin((t-.075)*(2*U)/.3)+1},bounce:function(t){var e=7.5625,r=2.75,i;return 1/r>t?i=e*t*t:2/r>t?(t-=1.5/r,i=e*t*t+.75):2.5/r>t?(t-=2.25/r,i=e*t*t+.9375):(t-=2.625/r,i=e*t*t+.984375),i}};Ae.easeIn=Ae["ease-in"]=Ae["<"],Ae.easeOut=Ae["ease-out"]=Ae[">"],Ae.easeInOut=Ae["ease-in-out"]=Ae["<>"],Ae["back-in"]=Ae.backIn,Ae["back-out"]=Ae.backOut;var Ee=[],Me=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){setTimeout(t,16)},Ne=function(){for(var r=+new Date,i=0;ia))if(s>a){var v=o(a/s);for(var y in l)if(l[T](y)){switch(pt[y]){case $:d=+l[y]+v*s*h[y];break;case"colour":d="rgb("+[Le(ot(l[y].r+v*s*h[y].r)),Le(ot(l[y].g+v*s*h[y].g)),Le(ot(l[y].b+v*s*h[y].b))].join(",")+")";break;case"path":d=[];for(var m=0,_=l[y].length;_>m;m++){d[m]=[l[y][m][0]];for(var w=1,k=l[y][m].length;k>w;w++)d[m][w]=+l[y][m][w]+v*s*h[y][m][w];d[m]=d[m].join(I)}d=d.join(I);break;case"transform":if(h[y].real)for(d=[],m=0,_=l[y].length;_>m;m++)for(d[m]=[l[y][m][0]],w=1,k=l[y][m].length;k>w;w++)d[m][w]=l[y][m][w]+v*s*h[y][m][w];else{var B=function(t){return+l[y][t]+v*s*h[y][t]};d=[["m",B(0),B(1),B(2),B(3),B(4),B(5)]]}break;case"csv":if("clip-rect"==y)for(d=[],m=4;m--;)d[m]=+l[y][m]+v*s*h[y][m];break;default:var C=[][P](l[y]);for(d=[],m=f.paper.customAttributes[y].length;m--;)d[m]=+C[m]+v*s*h[y][m]}p[y]=d}f.attr(p),function(e,r,i){setTimeout(function(){t("raphael.anim.frame."+e,r,i)})}(f.id,f,n.anim)}else{if(function(r,i,n){setTimeout(function(){t("raphael.anim.frame."+i.id,i,n),t("raphael.anim.finish."+i.id,i,n),e.is(r,"function")&&r.call(i)})}(n.callback,f,n.anim),f.attr(u),Ee.splice(i--,1),n.repeat>1&&!n.next){for(x in u)u[T](x)&&(g[x]=n.totalOrigin[x]);n.el.attr(g),b(n.anim,n.el,n.anim.percents[0],null,n.totalOrigin,n.repeat-1)}n.next&&!n.stop&&b(n.anim,n.el,n.next,null,n.totalOrigin,n.repeat)}}}Ee.length&&Me(Ne)},Le=function(t){return t>255?255:0>t?0:t};ye.animateWith=function(t,r,i,n,a,s){var o=this;if(o.removed)return s&&s.call(o),o;var l=i instanceof m?i:e.animation(i,n,a,s),h,u;b(l,o,l.percents[0],null,o.attr());for(var c=0,f=Ee.length;f>c;c++)if(Ee[c].anim==r&&Ee[c].el==t){Ee[f-1].start=Ee[c].start;break}return o},ye.onAnimation=function(e){return e?t.on("raphael.anim.frame."+this.id,e):t.unbind("raphael.anim.frame."+this.id),this},m.prototype.delay=function(t){var e=new m(this.anim,this.ms);return e.times=this.times,e.del=+t||0,e},m.prototype.repeat=function(t){var e=new m(this.anim,this.ms);return e.del=this.del,e.times=Y.floor(W(t,0))||1,e},e.animation=function(t,r,i,n){if(t instanceof m)return t;!e.is(i,"function")&&i||(n=n||i||null,i=null),t=Object(t),r=+r||0;var a={},s,o;for(o in t)t[T](o)&&ht(o)!=o&&ht(o)+"%"!=o&&(s=!0,a[o]=t[o]);if(s)return i&&(a.easing=i),n&&(a.callback=n),new m({100:a},r);if(n){var l=0;for(var h in t){var u=ut(h);t[T](h)&&u>l&&(l=u)}l+="%",!t[l].callback&&(t[l].callback=n)}return new m(t,r)},ye.animate=function(t,r,i,n){var a=this;if(a.removed)return n&&n.call(a),a;var s=t instanceof m?t:e.animation(t,r,i,n);return b(s,a,s.percents[0],null,a.attr()),a},ye.setTime=function(t,e){return t&&null!=e&&this.status(t,G(e,t.ms)/t.ms),this},ye.status=function(t,e){var r=[],i=0,n,a;if(null!=e)return b(t,this,-1,G(e,1)),this;for(n=Ee.length;n>i;i++)if(a=Ee[i],a.el.id==this.id&&(!t||a.anim==t)){if(t)return a.status;r.push({anim:a.anim,status:a.status})}return t?0:r},ye.pause=function(e){for(var r=0;re;e++)!t[e]||t[e].constructor!=ye.constructor&&t[e].constructor!=ze||(this[this.items.length]=this.items[this.items.length]=t[e],this.length++)},Pe=ze.prototype;Pe.push=function(){for(var t,e,r=0,i=arguments.length;i>r;r++)t=arguments[r],!t||t.constructor!=ye.constructor&&t.constructor!=ze||(e=this.items.length,this[e]=this.items[e]=t,this.length++);return this},Pe.pop=function(){return this.length&&delete this[this.length--],this.items.pop()},Pe.forEach=function(t,e){for(var r=0,i=this.items.length;i>r;r++)if(t.call(e,this.items[r],r)===!1)return this;return this};for(var Fe in ye)ye[T](Fe)&&(Pe[Fe]=function(t){return function(){var e=arguments;return this.forEach(function(r){r[t][z](r,e)})}}(Fe));return Pe.attr=function(t,r){if(t&&e.is(t,Q)&&e.is(t[0],"object"))for(var i=0,n=t.length;n>i;i++)this.items[i].attr(t[i]);else for(var a=0,s=this.items.length;s>a;a++)this.items[a].attr(t,r);return this},Pe.clear=function(){for(;this.length;)this.pop()},Pe.splice=function(t,e,r){t=0>t?W(this.length+t,0):t,e=W(0,G(this.length-t,e));var i=[],n=[],a=[],s;for(s=2;ss;s++)n.push(this[t+s]);for(;ss?a[s]:i[s-o];for(s=this.items.length=this.length-=e-o;this[s];)delete this[s++];return new ze(n)},Pe.exclude=function(t){for(var e=0,r=this.length;r>e;e++)if(this[e]==t)return this.splice(e,1),!0},Pe.animate=function(t,r,i,n){(e.is(i,"function")||!i)&&(n=i||null);var a=this.items.length,s=a,o,l=this,h;if(!a)return this;n&&(h=function(){!--a&&n.call(l)}),i=e.is(i,Z)?i:h;var u=e.animation(t,r,i,h);for(o=this.items[--s].animate(u);s--;)this.items[s]&&!this.items[s].removed&&this.items[s].animateWith(o,u,u),this.items[s]&&!this.items[s].removed||a--;return this},Pe.insertAfter=function(t){for(var e=this.items.length;e--;)this.items[e].insertAfter(t);return this},Pe.getBBox=function(){for(var t=[],e=[],r=[],i=[],n=this.items.length;n--;)if(!this.items[n].removed){var a=this.items[n].getBBox();t.push(a.x),e.push(a.y),r.push(a.x+a.width),i.push(a.y+a.height)}return t=G[z](0,t),e=G[z](0,e),r=W[z](0,r),i=W[z](0,i),{x:t,y:e,x2:r,y2:i,width:r-t,height:i-e}},Pe.clone=function(t){t=this.paper.set();for(var e=0,r=this.items.length;r>e;e++)t.push(this.items[e].clone());return t},Pe.toString=function(){return"Raphaël‘s set"},Pe.glow=function(t){var e=this.paper.set();return this.forEach(function(r,i){var n=r.glow(t);null!=n&&n.forEach(function(t,r){e.push(t)})}),e},Pe.isPointInside=function(t,e){var r=!1;return this.forEach(function(i){return i.isPointInside(t,e)?(r=!0,!1):void 0}),r},e.registerFont=function(t){if(!t.face)return t;this.fonts=this.fonts||{};var e={w:t.w,face:{},glyphs:{}},r=t.face["font-family"];for(var i in t.face)t.face[T](i)&&(e.face[i]=t.face[i]);if(this.fonts[r]?this.fonts[r].push(e):this.fonts[r]=[e],!t.svg){e.face["units-per-em"]=ut(t.face["units-per-em"],10);for(var n in t.glyphs)if(t.glyphs[T](n)){var a=t.glyphs[n];if(e.glyphs[n]={w:a.w,k:{},d:a.d&&"M"+a.d.replace(/[mlcxtrv]/g,function(t){return{l:"L",c:"C",x:"z",t:"m",r:"l",v:"c"}[t]||"M"})+"z"},a.k)for(var s in a.k)a[T](s)&&(e.glyphs[n].k[s]=a.k[s])}}return t},N.getFont=function(t,r,i,n){if(n=n||"normal",i=i||"normal",r=+r||{normal:400,bold:700,lighter:300,bolder:800}[r]||400,e.fonts){var a=e.fonts[t];if(!a){var s=new RegExp("(^|\\s)"+t.replace(/[^\w\d\s+!~.:_-]/g,R)+"(\\s|$)","i");for(var o in e.fonts)if(e.fonts[T](o)&&s.test(o)){a=e.fonts[o];break}}var l;if(a)for(var h=0,u=a.length;u>h&&(l=a[h],l.face["font-weight"]!=r||l.face["font-style"]!=i&&l.face["font-style"]||l.face["font-stretch"]!=n);h++);return l}},N.print=function(t,r,i,n,a,s,o,l){s=s||"middle",o=W(G(o||0,1),-1),l=W(G(l||1,3),1);var h=j(i)[q](R),u=0,c=0,f=R,p;if(e.is(n,"string")&&(n=this.getFont(n)),n){p=(a||16)/n.face["units-per-em"];for(var d=n.face.bbox[q](k),g=+d[0],x=d[3]-d[1],v=0,y=+d[1]+("baseline"==s?x+ +n.face.descent:x/2),m=0,b=h.length;b>m;m++){if("\n"==h[m])u=0,w=0,c=0,v+=x*l;else{var _=c&&n.glyphs[h[m-1]]||{},w=n.glyphs[h[m]];u+=c?(_.w||n.w)+(_.k&&_.k[h[m]]||0)+n.w*o:0,c=1}w&&w.d&&(f+=e.transformPath(w.d,["t",u*p,v*p,"s",p,p,g,y,"t",(t-g)/p,(r-y)/p]))}}return this.path(f).attr({fill:"#000",stroke:"none"})},N.add=function(t){if(e.is(t,"array"))for(var r=this.set(),i=0,n=t.length,a;n>i;i++)a=t[i]||{},B[T](a.type)&&r.push(this[a.type]().attr(a));return r},e.format=function(t,r){var i=e.is(r,Q)?[0][P](r):arguments;return t&&e.is(t,Z)&&i.length-1&&(t=t.replace(C,function(t,e){return null==i[++e]?R:i[e]})),t||R},e.fullfill=function(){var t=/\{([^\}]+)\}/g,e=/(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g,r=function(t,r,i){var n=i;return r.replace(e,function(t,e,r,i,a){e=e||i,n&&(e in n&&(n=n[e]),"function"==typeof n&&a&&(n=n()))}),n=(null==n||n==i?t:n)+""};return function(e,i){return String(e).replace(t,function(t,e){return r(t,e,i)})}}(),e.ninja=function(){if(E.was)A.win.Raphael=E.is;else{window.Raphael=void 0;try{delete window.Raphael}catch(t){}}return e},e.st=Pe,t.on("raphael.DOMload",function(){w=!0}),function(t,r,i){function n(){/in/.test(t.readyState)?setTimeout(n,9):e.eve("raphael.DOMload")}null==t.readyState&&t.addEventListener&&(t.addEventListener(r,i=function(){t.removeEventListener(r,i,!1),t.readyState="complete"},!1),t.readyState="loading"),n()}(document,"DOMContentLoaded"),e}.apply(e,i),!(void 0!==n&&(t.exports=n))},function(t,e,r){var i,n;!function(r){var a="0.4.2",s="hasOwnProperty",o=/[\.\/]/,l="*",h=function(){},u=function(t,e){return t-e},c,f,p={n:{}},d=function(t,e){t=String(t);var r=p,i=f,n=Array.prototype.slice.call(arguments,2),a=d.listeners(t),s=0,o=!1,l,h=[],g={},x=[],v=c,y=[];c=t,f=0;for(var m=0,b=a.length;b>m;m++)"zIndex"in a[m]&&(h.push(a[m].zIndex),a[m].zIndex<0&&(g[a[m].zIndex]=a[m]));for(h.sort(u);h[s]<0;)if(l=g[h[s++]],x.push(l.apply(e,n)),f)return f=i,x;for(m=0;b>m;m++)if(l=a[m],"zIndex"in l)if(l.zIndex==h[s]){if(x.push(l.apply(e,n)),f)break;do if(s++,l=g[h[s]],l&&x.push(l.apply(e,n)),f)break;while(l)}else g[l.zIndex]=l;else if(x.push(l.apply(e,n)),f)break;return f=i,c=v,x.length?x:null};d._events=p,d.listeners=function(t){var e=t.split(o),r=p,i,n,a,s,h,u,c,f,d=[r],g=[];for(s=0,h=e.length;h>s;s++){for(f=[],u=0,c=d.length;c>u;u++)for(r=d[u].n,n=[r[e[s]],r[l]],a=2;a--;)i=n[a],i&&(f.push(i),g=g.concat(i.f||[]));d=f}return g},d.on=function(t,e){if(t=String(t),"function"!=typeof e)return function(){};for(var r=t.split(o),i=p,n=0,a=r.length;a>n;n++)i=i.n,i=i.hasOwnProperty(r[n])&&i[r[n]]||(i[r[n]]={n:{}});for(i.f=i.f||[],n=0,a=i.f.length;a>n;n++)if(i.f[n]==e)return h;return i.f.push(e),function(t){+t==+t&&(e.zIndex=+t)}},d.f=function(t){var e=[].slice.call(arguments,1);return function(){d.apply(null,[t,null].concat(e).concat([].slice.call(arguments,0)))}},d.stop=function(){f=1},d.nt=function(t){return t?new RegExp("(?:\\.|\\/|^)"+t+"(?:\\.|\\/|$)").test(c):c},d.nts=function(){return c.split(o)},d.off=d.unbind=function(t,e){if(!t)return void(d._events=p={n:{}});var r=t.split(o),i,n,a,h,u,c,f,g=[p];for(h=0,u=r.length;u>h;h++)for(c=0;ch;h++)for(i=g[h];i.n;){if(e){if(i.f){for(c=0,f=i.f.length;f>c;c++)if(i.f[c]==e){i.f.splice(c,1);break}!i.f.length&&delete i.f}for(n in i.n)if(i.n[s](n)&&i.n[n].f){var x=i.n[n].f;for(c=0,f=x.length;f>c;c++)if(x[c]==e){x.splice(c,1);break}!x.length&&delete i.n[n].f}}else{delete i.f;for(n in i.n)i.n[s](n)&&i.n[n].f&&delete i.n[n].f}i=i.n}},d.once=function(t,e){var r=function(){return d.unbind(t,r),e.apply(this,arguments)};return d.on(t,r)},d.version=a,d.toString=function(){return"You are running Eve "+a},"undefined"!=typeof t&&t.exports?t.exports=d:(i=[],n=function(){return d}.apply(e,i),!(void 0!==n&&(t.exports=n)))}(this)},function(t,e,r){var i,n;i=[r(1)],n=function(t){if(!t||t.svg){var e="hasOwnProperty",r=String,i=parseFloat,n=parseInt,a=Math,s=a.max,o=a.abs,l=a.pow,h=/[, ]+/,u=t.eve,c="",f=" ",p="http://www.w3.org/1999/xlink",d={block:"M5,0 0,2.5 5,5z",classic:"M5,0 0,2.5 5,5 3.5,3 3.5,2z",diamond:"M2.5,0 5,2.5 2.5,5 0,2.5z",open:"M6,1 1,3.5 6,6",oval:"M2.5,0A2.5,2.5,0,0,1,2.5,5 2.5,2.5,0,0,1,2.5,0z"},g={};t.toString=function(){return"Your browser supports SVG.\nYou are running Raphaël "+this.version};var x=function(i,n){if(n){"string"==typeof i&&(i=x(i));for(var a in n)n[e](a)&&("xlink:"==a.substring(0,6)?i.setAttributeNS(p,a.substring(6),r(n[a])):i.setAttribute(a,r(n[a])))}else i=t._g.doc.createElementNS("http://www.w3.org/2000/svg",i),i.style&&(i.style.webkitTapHighlightColor="rgba(0,0,0,0)");return i},v=function(e,n){var h="linear",u=e.id+n,f=.5,p=.5,d=e.node,g=e.paper,v=d.style,y=t._g.doc.getElementById(u);if(!y){if(n=r(n).replace(t._radial_gradient,function(t,e,r){if(h="radial",e&&r){f=i(e),p=i(r);var n=2*(p>.5)-1;l(f-.5,2)+l(p-.5,2)>.25&&(p=a.sqrt(.25-l(f-.5,2))*n+.5)&&.5!=p&&(p=p.toFixed(5)-1e-5*n)}return c}),n=n.split(/\s*\-\s*/),"linear"==h){var b=n.shift();if(b=-i(b),isNaN(b))return null;var _=[0,0,a.cos(t.rad(b)),a.sin(t.rad(b))],w=1/(s(o(_[2]),o(_[3]))||1);_[2]*=w,_[3]*=w,_[2]<0&&(_[0]=-_[2],_[2]=0),_[3]<0&&(_[1]=-_[3],_[3]=0)}var k=t._parseDots(n);if(!k)return null;if(u=u.replace(/[\(\)\s,\xb0#]/g,"_"),e.gradient&&u!=e.gradient.id&&(g.defs.removeChild(e.gradient),delete e.gradient),!e.gradient){y=x(h+"Gradient",{id:u}),e.gradient=y,x(y,"radial"==h?{fx:f,fy:p}:{x1:_[0],y1:_[1],x2:_[2],y2:_[3],gradientTransform:e.matrix.invert()}),g.defs.appendChild(y);for(var B=0,C=k.length;C>B;B++)y.appendChild(x("stop",{offset:k[B].offset?k[B].offset:B?"100%":"0%","stop-color":k[B].color||"#fff","stop-opacity":isFinite(k[B].opacity)?k[B].opacity:1}))}}return x(d,{fill:m(u),opacity:1,"fill-opacity":1}),v.fill=c,v.opacity=1,v.fillOpacity=1,1},y=function(){var t=document.documentMode;return t&&(9===t||10===t)},m=function(t){if(y())return"url('#"+t+"')";var e=document.location,r=e.protocol+"//"+e.host+e.pathname+e.search;return"url('"+r+"#"+t+"')"},b=function(t){var e=t.getBBox(1);x(t.pattern,{patternTransform:t.matrix.invert()+" translate("+e.x+","+e.y+")"})},_=function(i,n,a){if("path"==i.type){for(var s=r(n).toLowerCase().split("-"),o=i.paper,l=a?"end":"start",h=i.node,u=i.attrs,f=u["stroke-width"],p=s.length,v="classic",y,m,b,_,w,k=3,B=3,C=5;p--;)switch(s[p]){case"block":case"classic":case"oval":case"diamond":case"open":case"none":v=s[p];break;case"wide":B=5;break;case"narrow":B=2;break;case"long":k=5;break;case"short":k=2}if("open"==v?(k+=2,B+=2,C+=2,b=1,_=a?4:1,w={fill:"none",stroke:u.stroke}):(_=b=k/2,w={fill:u.stroke,stroke:"none"}),i._.arrows?a?(i._.arrows.endPath&&g[i._.arrows.endPath]--,i._.arrows.endMarker&&g[i._.arrows.endMarker]--):(i._.arrows.startPath&&g[i._.arrows.startPath]--,i._.arrows.startMarker&&g[i._.arrows.startMarker]--):i._.arrows={},"none"!=v){var S="raphael-marker-"+v,T="raphael-marker-"+l+v+k+B+"-obj"+i.id;t._g.doc.getElementById(S)?g[S]++:(o.defs.appendChild(x(x("path"),{"stroke-linecap":"round",d:d[v],id:S})),g[S]=1);var A=t._g.doc.getElementById(T),E;A?(g[T]++,E=A.getElementsByTagName("use")[0]):(A=x(x("marker"),{id:T,markerHeight:B,markerWidth:k,orient:"auto",refX:_,refY:B/2}),E=x(x("use"),{"xlink:href":"#"+S,transform:(a?"rotate(180 "+k/2+" "+B/2+") ":c)+"scale("+k/C+","+B/C+")","stroke-width":(1/((k/C+B/C)/2)).toFixed(4)}),A.appendChild(E),o.defs.appendChild(A),g[T]=1),x(E,w);var M=b*("diamond"!=v&&"oval"!=v);a?(y=i._.arrows.startdx*f||0,m=t.getTotalLength(u.path)-M*f):(y=M*f,m=t.getTotalLength(u.path)-(i._.arrows.enddx*f||0)),w={},w["marker-"+l]="url(#"+T+")",(m||y)&&(w.d=t.getSubpath(u.path,y,m)),x(h,w),i._.arrows[l+"Path"]=S,i._.arrows[l+"Marker"]=T,i._.arrows[l+"dx"]=M,i._.arrows[l+"Type"]=v,i._.arrows[l+"String"]=n}else a?(y=i._.arrows.startdx*f||0,m=t.getTotalLength(u.path)-y):(y=0,m=t.getTotalLength(u.path)-(i._.arrows.enddx*f||0)),i._.arrows[l+"Path"]&&x(h,{d:t.getSubpath(u.path,y,m)}),delete i._.arrows[l+"Path"],delete i._.arrows[l+"Marker"],delete i._.arrows[l+"dx"],delete i._.arrows[l+"Type"],delete i._.arrows[l+"String"];for(w in g)if(g[e](w)&&!g[w]){var N=t._g.doc.getElementById(w);N&&N.parentNode.removeChild(N)}}},w={"-":[3,1],".":[1,1],"-.":[3,1,1,1],"-..":[3,1,1,1,1,1],". ":[1,3],"- ":[4,3],"--":[8,3],"- .":[4,3,1,3],"--.":[8,3,1,3],"--..":[8,3,1,3,1,3]},k=function(t,e,i){if(e=w[r(e).toLowerCase()]){for(var n=t.attrs["stroke-width"]||"1",a={round:n,square:n,butt:0}[t.attrs["stroke-linecap"]||i["stroke-linecap"]]||0,s=[],o=e.length;o--;)s[o]=e[o]*n+(o%2?1:-1)*a;x(t.node,{"stroke-dasharray":s.join(",")})}else x(t.node,{"stroke-dasharray":"none"})},B=function(i,a){var l=i.node,u=i.attrs,f=l.style.visibility;l.style.visibility="hidden";for(var d in a)if(a[e](d)){if(!t._availableAttrs[e](d))continue;var g=a[d];switch(u[d]=g,d){case"blur":i.blur(g);break;case"title":var y=l.getElementsByTagName("title");if(y.length&&(y=y[0]))y.firstChild.nodeValue=g;else{y=x("title");var m=t._g.doc.createTextNode(g);y.appendChild(m),l.appendChild(y)}break;case"href":case"target":var w=l.parentNode;if("a"!=w.tagName.toLowerCase()){var B=x("a");w.insertBefore(B,l),B.appendChild(l),w=B}"target"==d?w.setAttributeNS(p,"show","blank"==g?"new":g):w.setAttributeNS(p,d,g);break;case"cursor":l.style.cursor=g;break;case"transform":i.transform(g);break;case"arrow-start":_(i,g);break;case"arrow-end":_(i,g,1);break;case"clip-rect":var C=r(g).split(h);if(4==C.length){i.clip&&i.clip.parentNode.parentNode.removeChild(i.clip.parentNode);var T=x("clipPath"),A=x("rect");T.id=t.createUUID(),x(A,{x:C[0],y:C[1],width:C[2],height:C[3]}),T.appendChild(A),i.paper.defs.appendChild(T),x(l,{"clip-path":"url(#"+T.id+")"}),i.clip=A}if(!g){var E=l.getAttribute("clip-path");if(E){var M=t._g.doc.getElementById(E.replace(/(^url\(#|\)$)/g,c));M&&M.parentNode.removeChild(M),x(l,{"clip-path":c}),delete i.clip}}break;case"path":"path"==i.type&&(x(l,{d:g?u.path=t._pathToAbsolute(g):"M0,0"}),i._.dirty=1,i._.arrows&&("startString"in i._.arrows&&_(i,i._.arrows.startString),"endString"in i._.arrows&&_(i,i._.arrows.endString,1)));break;case"width":if(l.setAttribute(d,g),i._.dirty=1,!u.fx)break;d="x",g=u.x;case"x":u.fx&&(g=-u.x-(u.width||0));case"rx":if("rx"==d&&"rect"==i.type)break;case"cx":l.setAttribute(d,g),i.pattern&&b(i),i._.dirty=1;break;case"height":if(l.setAttribute(d,g),i._.dirty=1,!u.fy)break;d="y",g=u.y;case"y":u.fy&&(g=-u.y-(u.height||0));case"ry":if("ry"==d&&"rect"==i.type)break;case"cy":l.setAttribute(d,g),i.pattern&&b(i),i._.dirty=1;break;case"r":"rect"==i.type?x(l,{rx:g,ry:g}):l.setAttribute(d,g),i._.dirty=1;break;case"src":"image"==i.type&&l.setAttributeNS(p,"href",g);break;case"stroke-width":1==i._.sx&&1==i._.sy||(g/=s(o(i._.sx),o(i._.sy))||1),l.setAttribute(d,g),u["stroke-dasharray"]&&k(i,u["stroke-dasharray"],a),i._.arrows&&("startString"in i._.arrows&&_(i,i._.arrows.startString),"endString"in i._.arrows&&_(i,i._.arrows.endString,1));break;case"stroke-dasharray":k(i,g,a);break;case"fill":var N=r(g).match(t._ISURL);if(N){T=x("pattern");var L=x("image");T.id=t.createUUID(),x(T,{x:0,y:0,patternUnits:"userSpaceOnUse",height:1,width:1}),x(L,{x:0,y:0,"xlink:href":N[1]}),T.appendChild(L),function(e){t._preload(N[1],function(){var t=this.offsetWidth,r=this.offsetHeight;x(e,{width:t,height:r}),x(L,{width:t,height:r})})}(T),i.paper.defs.appendChild(T),x(l,{fill:"url(#"+T.id+")"}),i.pattern=T,i.pattern&&b(i);break}var z=t.getRGB(g);if(z.error){if(("circle"==i.type||"ellipse"==i.type||"r"!=r(g).charAt())&&v(i,g)){ +if("opacity"in u||"fill-opacity"in u){var P=t._g.doc.getElementById(l.getAttribute("fill").replace(/^url\(#|\)$/g,c));if(P){var F=P.getElementsByTagName("stop");x(F[F.length-1],{"stop-opacity":("opacity"in u?u.opacity:1)*("fill-opacity"in u?u["fill-opacity"]:1)})}}u.gradient=g,u.fill="none";break}}else delete a.gradient,delete u.gradient,!t.is(u.opacity,"undefined")&&t.is(a.opacity,"undefined")&&x(l,{opacity:u.opacity}),!t.is(u["fill-opacity"],"undefined")&&t.is(a["fill-opacity"],"undefined")&&x(l,{"fill-opacity":u["fill-opacity"]});z[e]("opacity")&&x(l,{"fill-opacity":z.opacity>1?z.opacity/100:z.opacity});case"stroke":z=t.getRGB(g),l.setAttribute(d,z.hex),"stroke"==d&&z[e]("opacity")&&x(l,{"stroke-opacity":z.opacity>1?z.opacity/100:z.opacity}),"stroke"==d&&i._.arrows&&("startString"in i._.arrows&&_(i,i._.arrows.startString),"endString"in i._.arrows&&_(i,i._.arrows.endString,1));break;case"gradient":("circle"==i.type||"ellipse"==i.type||"r"!=r(g).charAt())&&v(i,g);break;case"opacity":u.gradient&&!u[e]("stroke-opacity")&&x(l,{"stroke-opacity":g>1?g/100:g});case"fill-opacity":if(u.gradient){P=t._g.doc.getElementById(l.getAttribute("fill").replace(/^url\(#|\)$/g,c)),P&&(F=P.getElementsByTagName("stop"),x(F[F.length-1],{"stop-opacity":g}));break}default:"font-size"==d&&(g=n(g,10)+"px");var R=d.replace(/(\-.)/g,function(t){return t.substring(1).toUpperCase()});l.style[R]=g,i._.dirty=1,l.setAttribute(d,g)}}S(i,a),l.style.visibility=f},C=1.2,S=function(i,a){if("text"==i.type&&(a[e]("text")||a[e]("font")||a[e]("font-size")||a[e]("x")||a[e]("y"))){var s=i.attrs,o=i.node,l=o.firstChild?n(t._g.doc.defaultView.getComputedStyle(o.firstChild,c).getPropertyValue("font-size"),10):10;if(a[e]("text")){for(s.text=a.text;o.firstChild;)o.removeChild(o.firstChild);for(var h=r(a.text).split("\n"),u=[],f,p=0,d=h.length;d>p;p++)f=x("tspan"),p&&x(f,{dy:l*C,x:s.x}),f.appendChild(t._g.doc.createTextNode(h[p])),o.appendChild(f),u[p]=f}else for(u=o.getElementsByTagName("tspan"),p=0,d=u.length;d>p;p++)p?x(u[p],{dy:l*C,x:s.x}):x(u[0],{dy:0});x(o,{x:s.x,y:s.y}),i._.dirty=1;var g=i._getBBox(),v=s.y-(g.y+g.height/2);v&&t.is(v,"finite")&&x(u[0],{dy:v})}},T=function(t){return t.parentNode&&"a"===t.parentNode.tagName.toLowerCase()?t.parentNode:t},A=function(e,r){function i(){return("0000"+(Math.random()*Math.pow(36,5)<<0).toString(36)).slice(-5)}var n=0,a=0;this[0]=this.node=e,e.raphael=!0,this.id=i(),e.raphaelid=this.id,this.matrix=t.matrix(),this.realPath=null,this.paper=r,this.attrs=this.attrs||{},this._={transform:[],sx:1,sy:1,deg:0,dx:0,dy:0,dirty:1},!r.bottom&&(r.bottom=this),this.prev=r.top,r.top&&(r.top.next=this),r.top=this,this.next=null},E=t.el;A.prototype=E,E.constructor=A,t._engine.path=function(t,e){var r=x("path");e.canvas&&e.canvas.appendChild(r);var i=new A(r,e);return i.type="path",B(i,{fill:"none",stroke:"#000",path:t}),i},E.rotate=function(t,e,n){if(this.removed)return this;if(t=r(t).split(h),t.length-1&&(e=i(t[1]),n=i(t[2])),t=i(t[0]),null==n&&(e=n),null==e||null==n){var a=this.getBBox(1);e=a.x+a.width/2,n=a.y+a.height/2}return this.transform(this._.transform.concat([["r",t,e,n]])),this},E.scale=function(t,e,n,a){if(this.removed)return this;if(t=r(t).split(h),t.length-1&&(e=i(t[1]),n=i(t[2]),a=i(t[3])),t=i(t[0]),null==e&&(e=t),null==a&&(n=a),null==n||null==a)var s=this.getBBox(1);return n=null==n?s.x+s.width/2:n,a=null==a?s.y+s.height/2:a,this.transform(this._.transform.concat([["s",t,e,n,a]])),this},E.translate=function(t,e){return this.removed?this:(t=r(t).split(h),t.length-1&&(e=i(t[1])),t=i(t[0])||0,e=+e||0,this.transform(this._.transform.concat([["t",t,e]])),this)},E.transform=function(r){var i=this._;if(null==r)return i.transform;if(t._extractTransform(this,r),this.clip&&x(this.clip,{transform:this.matrix.invert()}),this.pattern&&b(this),this.node&&x(this.node,{transform:this.matrix}),1!=i.sx||1!=i.sy){var n=this.attrs[e]("stroke-width")?this.attrs["stroke-width"]:1;this.attr({"stroke-width":n})}return this},E.hide=function(){return this.removed||(this.node.style.display="none"),this},E.show=function(){return this.removed||(this.node.style.display=""),this},E.remove=function(){var e=T(this.node);if(!this.removed&&e.parentNode){var r=this.paper;r.__set__&&r.__set__.exclude(this),u.unbind("raphael.*.*."+this.id),this.gradient&&r.defs.removeChild(this.gradient),t._tear(this,r),e.parentNode.removeChild(e),this.removeData();for(var i in this)this[i]="function"==typeof this[i]?t._removedFactory(i):null;this.removed=!0}},E._getBBox=function(){if("none"==this.node.style.display){this.show();var t=!0}var e=!1,r;this.paper.canvas.parentElement?r=this.paper.canvas.parentElement.style:this.paper.canvas.parentNode&&(r=this.paper.canvas.parentNode.style),r&&"none"==r.display&&(e=!0,r.display="");var i={};try{i=this.node.getBBox()}catch(n){i={x:this.node.clientLeft,y:this.node.clientTop,width:this.node.clientWidth,height:this.node.clientHeight}}finally{i=i||{},e&&(r.display="none")}return t&&this.hide(),i},E.attr=function(r,i){if(this.removed)return this;if(null==r){var n={};for(var a in this.attrs)this.attrs[e](a)&&(n[a]=this.attrs[a]);return n.gradient&&"none"==n.fill&&(n.fill=n.gradient)&&delete n.gradient,n.transform=this._.transform,n}if(null==i&&t.is(r,"string")){if("fill"==r&&"none"==this.attrs.fill&&this.attrs.gradient)return this.attrs.gradient;if("transform"==r)return this._.transform;for(var s=r.split(h),o={},l=0,c=s.length;c>l;l++)r=s[l],r in this.attrs?o[r]=this.attrs[r]:t.is(this.paper.customAttributes[r],"function")?o[r]=this.paper.customAttributes[r].def:o[r]=t._availableAttrs[r];return c-1?o:o[s[0]]}if(null==i&&t.is(r,"array")){for(o={},l=0,c=r.length;c>l;l++)o[r[l]]=this.attr(r[l]);return o}if(null!=i){var f={};f[r]=i}else null!=r&&t.is(r,"object")&&(f=r);for(var p in f)u("raphael.attr."+p+"."+this.id,this,f[p]);for(p in this.paper.customAttributes)if(this.paper.customAttributes[e](p)&&f[e](p)&&t.is(this.paper.customAttributes[p],"function")){var d=this.paper.customAttributes[p].apply(this,[].concat(f[p]));this.attrs[p]=f[p];for(var g in d)d[e](g)&&(f[g]=d[g])}return B(this,f),this},E.toFront=function(){if(this.removed)return this;var e=T(this.node);e.parentNode.appendChild(e);var r=this.paper;return r.top!=this&&t._tofront(this,r),this},E.toBack=function(){if(this.removed)return this;var e=T(this.node),r=e.parentNode;r.insertBefore(e,r.firstChild),t._toback(this,this.paper);var i=this.paper;return this},E.insertAfter=function(e){if(this.removed||!e)return this;var r=T(this.node),i=T(e.node||e[e.length-1].node);return i.nextSibling?i.parentNode.insertBefore(r,i.nextSibling):i.parentNode.appendChild(r),t._insertafter(this,e,this.paper),this},E.insertBefore=function(e){if(this.removed||!e)return this;var r=T(this.node),i=T(e.node||e[0].node);return i.parentNode.insertBefore(r,i),t._insertbefore(this,e,this.paper),this},E.blur=function(e){var r=this;if(0!==+e){var i=x("filter"),n=x("feGaussianBlur");r.attrs.blur=e,i.id=t.createUUID(),x(n,{stdDeviation:+e||1.5}),i.appendChild(n),r.paper.defs.appendChild(i),r._blur=i,x(r.node,{filter:"url(#"+i.id+")"})}else r._blur&&(r._blur.parentNode.removeChild(r._blur),delete r._blur,delete r.attrs.blur),r.node.removeAttribute("filter");return r},t._engine.circle=function(t,e,r,i){var n=x("circle");t.canvas&&t.canvas.appendChild(n);var a=new A(n,t);return a.attrs={cx:e,cy:r,r:i,fill:"none",stroke:"#000"},a.type="circle",x(n,a.attrs),a},t._engine.rect=function(t,e,r,i,n,a){var s=x("rect");t.canvas&&t.canvas.appendChild(s);var o=new A(s,t);return o.attrs={x:e,y:r,width:i,height:n,rx:a||0,ry:a||0,fill:"none",stroke:"#000"},o.type="rect",x(s,o.attrs),o},t._engine.ellipse=function(t,e,r,i,n){var a=x("ellipse");t.canvas&&t.canvas.appendChild(a);var s=new A(a,t);return s.attrs={cx:e,cy:r,rx:i,ry:n,fill:"none",stroke:"#000"},s.type="ellipse",x(a,s.attrs),s},t._engine.image=function(t,e,r,i,n,a){var s=x("image");x(s,{x:r,y:i,width:n,height:a,preserveAspectRatio:"none"}),s.setAttributeNS(p,"href",e),t.canvas&&t.canvas.appendChild(s);var o=new A(s,t);return o.attrs={x:r,y:i,width:n,height:a,src:e},o.type="image",o},t._engine.text=function(e,r,i,n){var a=x("text");e.canvas&&e.canvas.appendChild(a);var s=new A(a,e);return s.attrs={x:r,y:i,"text-anchor":"middle",text:n,"font-family":t._availableAttrs["font-family"],"font-size":t._availableAttrs["font-size"],stroke:"none",fill:"#000"},s.type="text",B(s,s.attrs),s},t._engine.setSize=function(t,e){return this.width=t||this.width,this.height=e||this.height,this.canvas.setAttribute("width",this.width),this.canvas.setAttribute("height",this.height),this._viewBox&&this.setViewBox.apply(this,this._viewBox),this},t._engine.create=function(){var e=t._getContainer.apply(0,arguments),r=e&&e.container,i=e.x,n=e.y,a=e.width,s=e.height;if(!r)throw new Error("SVG container not found.");var o=x("svg"),l="overflow:hidden;",h;return i=i||0,n=n||0,a=a||512,s=s||342,x(o,{height:s,version:1.1,width:a,xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}),1==r?(o.style.cssText=l+"position:absolute;left:"+i+"px;top:"+n+"px",t._g.doc.body.appendChild(o),h=1):(o.style.cssText=l+"position:relative",r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o)),r=new t._Paper,r.width=a,r.height=s,r.canvas=o,r.clear(),r._left=r._top=0,h&&(r.renderfix=function(){}),r.renderfix(),r},t._engine.setViewBox=function(t,e,r,i,n){u("raphael.setViewBox",this,this._viewBox,[t,e,r,i,n]);var a=this.getSize(),o=s(r/a.width,i/a.height),l=this.top,h=n?"xMidYMid meet":"xMinYMin",c,p;for(null==t?(this._vbSize&&(o=1),delete this._vbSize,c="0 0 "+this.width+f+this.height):(this._vbSize=o,c=t+f+e+f+r+f+i),x(this.canvas,{viewBox:c,preserveAspectRatio:h});o&&l;)p="stroke-width"in l.attrs?l.attrs["stroke-width"]:1,l.attr({"stroke-width":p}),l._.dirty=1,l._.dirtyT=1,l=l.prev;return this._viewBox=[t,e,r,i,!!n],this},t.prototype.renderfix=function(){var t=this.canvas,e=t.style,r;try{r=t.getScreenCTM()||t.createSVGMatrix()}catch(i){r=t.createSVGMatrix()}var n=-r.e%1,a=-r.f%1;(n||a)&&(n&&(this._left=(this._left+n)%1,e.left=this._left+"px"),a&&(this._top=(this._top+a)%1,e.top=this._top+"px"))},t.prototype.clear=function(){t.eve("raphael.clear",this);for(var e=this.canvas;e.firstChild;)e.removeChild(e.firstChild);this.bottom=this.top=null,(this.desc=x("desc")).appendChild(t._g.doc.createTextNode("Created with Raphaël "+t.version)),e.appendChild(this.desc),e.appendChild(this.defs=x("defs"))},t.prototype.remove=function(){u("raphael.remove",this),this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas);for(var e in this)this[e]="function"==typeof this[e]?t._removedFactory(e):null};var M=t.st;for(var N in E)E[e](N)&&!M[e](N)&&(M[N]=function(t){return function(){var e=arguments;return this.forEach(function(r){r[t].apply(r,e)})}}(N))}}.apply(e,i),!(void 0!==n&&(t.exports=n))},function(t,e,r){var i,n;i=[r(1)],n=function(t){if(!t||t.vml){var e="hasOwnProperty",r=String,i=parseFloat,n=Math,a=n.round,s=n.max,o=n.min,l=n.abs,h="fill",u=/[, ]+/,c=t.eve,f=" progid:DXImageTransform.Microsoft",p=" ",d="",g={M:"m",L:"l",C:"c",Z:"x",m:"t",l:"r",c:"v",z:"x"},x=/([clmz]),?([^clmz]*)/gi,v=/ progid:\S+Blur\([^\)]+\)/g,y=/-?[^,\s-]+/g,m="position:absolute;left:0;top:0;width:1px;height:1px;behavior:url(#default#VML)",b=21600,_={path:1,rect:1,image:1},w={circle:1,ellipse:1},k=function(e){var i=/[ahqstv]/gi,n=t._pathToAbsolute;if(r(e).match(i)&&(n=t._path2curve),i=/[clmz]/g,n==t._pathToAbsolute&&!r(e).match(i)){var s=r(e).replace(x,function(t,e,r){var i=[],n="m"==e.toLowerCase(),s=g[e];return r.replace(y,function(t){n&&2==i.length&&(s+=i+g["m"==e?"l":"L"],i=[]),i.push(a(t*b))}),s+i});return s}var o=n(e),l,h;s=[];for(var u=0,c=o.length;c>u;u++){l=o[u],h=o[u][0].toLowerCase(),"z"==h&&(h="x");for(var f=1,v=l.length;v>f;f++)h+=a(l[f]*b)+(f!=v-1?",":d);s.push(h)}return s.join(p)},B=function(e,r,i){var n=t.matrix();return n.rotate(-e,.5,.5),{dx:n.x(r,i),dy:n.y(r,i)}},C=function(t,e,r,i,n,a){var s=t._,o=t.matrix,u=s.fillpos,c=t.node,f=c.style,d=1,g="",x,v=b/e,y=b/r;if(f.visibility="hidden",e&&r){if(c.coordsize=l(v)+p+l(y),f.rotation=a*(0>e*r?-1:1),a){var m=B(a,i,n);i=m.dx,n=m.dy}if(0>e&&(g+="x"),0>r&&(g+=" y")&&(d=-1),f.flip=g,c.coordorigin=i*-v+p+n*-y,u||s.fillsize){var _=c.getElementsByTagName(h);_=_&&_[0],c.removeChild(_),u&&(m=B(a,o.x(u[0],u[1]),o.y(u[0],u[1])),_.position=m.dx*d+p+m.dy*d),s.fillsize&&(_.size=s.fillsize[0]*l(e)+p+s.fillsize[1]*l(r)),c.appendChild(_)}f.visibility="visible"}};t.toString=function(){return"Your browser doesn’t support SVG. Falling down to VML.\nYou are running Raphaël "+this.version};var S=function(t,e,i){for(var n=r(e).toLowerCase().split("-"),a=i?"end":"start",s=n.length,o="classic",l="medium",h="medium";s--;)switch(n[s]){case"block":case"classic":case"oval":case"diamond":case"open":case"none":o=n[s];break;case"wide":case"narrow":h=n[s];break;case"long":case"short":l=n[s]}var u=t.node.getElementsByTagName("stroke")[0];u[a+"arrow"]=o,u[a+"arrowlength"]=l,u[a+"arrowwidth"]=h},T=function(n,l){n.attrs=n.attrs||{};var c=n.node,f=n.attrs,g=c.style,x,v=_[n.type]&&(l.x!=f.x||l.y!=f.y||l.width!=f.width||l.height!=f.height||l.cx!=f.cx||l.cy!=f.cy||l.rx!=f.rx||l.ry!=f.ry||l.r!=f.r),y=w[n.type]&&(f.cx!=l.cx||f.cy!=l.cy||f.r!=l.r||f.rx!=l.rx||f.ry!=l.ry),m=n;for(var B in l)l[e](B)&&(f[B]=l[B]);if(v&&(f.path=t._getPath[n.type](n),n._.dirty=1),l.href&&(c.href=l.href),l.title&&(c.title=l.title),l.target&&(c.target=l.target),l.cursor&&(g.cursor=l.cursor),"blur"in l&&n.blur(l.blur),(l.path&&"path"==n.type||v)&&(c.path=k(~r(f.path).toLowerCase().indexOf("r")?t._pathToAbsolute(f.path):f.path),n._.dirty=1,"image"==n.type&&(n._.fillpos=[f.x,f.y],n._.fillsize=[f.width,f.height],C(n,1,1,0,0,0))),"transform"in l&&n.transform(l.transform),y){var T=+f.cx,E=+f.cy,M=+f.rx||+f.r||0,L=+f.ry||+f.r||0;c.path=t.format("ar{0},{1},{2},{3},{4},{1},{4},{1}x",a((T-M)*b),a((E-L)*b),a((T+M)*b),a((E+L)*b),a(T*b)),n._.dirty=1}if("clip-rect"in l){var z=r(l["clip-rect"]).split(u);if(4==z.length){z[2]=+z[2]+ +z[0],z[3]=+z[3]+ +z[1];var P=c.clipRect||t._g.doc.createElement("div"),F=P.style;F.clip=t.format("rect({1}px {2}px {3}px {0}px)",z),c.clipRect||(F.position="absolute",F.top=0,F.left=0,F.width=n.paper.width+"px",F.height=n.paper.height+"px",c.parentNode.insertBefore(P,c),P.appendChild(c),c.clipRect=P)}l["clip-rect"]||c.clipRect&&(c.clipRect.style.clip="auto")}if(n.textpath){var R=n.textpath.style;l.font&&(R.font=l.font),l["font-family"]&&(R.fontFamily='"'+l["font-family"].split(",")[0].replace(/^['"]+|['"]+$/g,d)+'"'),l["font-size"]&&(R.fontSize=l["font-size"]),l["font-weight"]&&(R.fontWeight=l["font-weight"]),l["font-style"]&&(R.fontStyle=l["font-style"])}if("arrow-start"in l&&S(m,l["arrow-start"]),"arrow-end"in l&&S(m,l["arrow-end"],1),null!=l.opacity||null!=l.fill||null!=l.src||null!=l.stroke||null!=l["stroke-width"]||null!=l["stroke-opacity"]||null!=l["fill-opacity"]||null!=l["stroke-dasharray"]||null!=l["stroke-miterlimit"]||null!=l["stroke-linejoin"]||null!=l["stroke-linecap"]){var I=c.getElementsByTagName(h),j=!1;if(I=I&&I[0],!I&&(j=I=N(h)),"image"==n.type&&l.src&&(I.src=l.src),l.fill&&(I.on=!0),null!=I.on&&"none"!=l.fill&&null!==l.fill||(I.on=!1),I.on&&l.fill){var q=r(l.fill).match(t._ISURL);if(q){I.parentNode==c&&c.removeChild(I),I.rotate=!0,I.src=q[1],I.type="tile";var D=n.getBBox(1);I.position=D.x+p+D.y,n._.fillpos=[D.x,D.y],t._preload(q[1],function(){n._.fillsize=[this.offsetWidth,this.offsetHeight]})}else I.color=t.getRGB(l.fill).hex,I.src=d,I.type="solid",t.getRGB(l.fill).error&&(m.type in{circle:1,ellipse:1}||"r"!=r(l.fill).charAt())&&A(m,l.fill,I)&&(f.fill="none",f.gradient=l.fill,I.rotate=!1)}if("fill-opacity"in l||"opacity"in l){var V=((+f["fill-opacity"]+1||2)-1)*((+f.opacity+1||2)-1)*((+t.getRGB(l.fill).o+1||2)-1);V=o(s(V,0),1),I.opacity=V,I.src&&(I.color="none")}c.appendChild(I);var O=c.getElementsByTagName("stroke")&&c.getElementsByTagName("stroke")[0],Y=!1;!O&&(Y=O=N("stroke")),(l.stroke&&"none"!=l.stroke||l["stroke-width"]||null!=l["stroke-opacity"]||l["stroke-dasharray"]||l["stroke-miterlimit"]||l["stroke-linejoin"]||l["stroke-linecap"])&&(O.on=!0),("none"==l.stroke||null===l.stroke||null==O.on||0==l.stroke||0==l["stroke-width"])&&(O.on=!1);var W=t.getRGB(l.stroke);O.on&&l.stroke&&(O.color=W.hex),V=((+f["stroke-opacity"]+1||2)-1)*((+f.opacity+1||2)-1)*((+W.o+1||2)-1);var G=.75*(i(l["stroke-width"])||1);if(V=o(s(V,0),1),null==l["stroke-width"]&&(G=f["stroke-width"]),l["stroke-width"]&&(O.weight=G),G&&1>G&&(V*=G)&&(O.weight=1),O.opacity=V,l["stroke-linejoin"]&&(O.joinstyle=l["stroke-linejoin"]||"miter"),O.miterlimit=l["stroke-miterlimit"]||8,l["stroke-linecap"]&&(O.endcap="butt"==l["stroke-linecap"]?"flat":"square"==l["stroke-linecap"]?"square":"round"),"stroke-dasharray"in l){var H={"-":"shortdash",".":"shortdot","-.":"shortdashdot","-..":"shortdashdotdot",". ":"dot","- ":"dash","--":"longdash","- .":"dashdot","--.":"longdashdot","--..":"longdashdotdot"};O.dashstyle=H[e](l["stroke-dasharray"])?H[l["stroke-dasharray"]]:d}Y&&c.appendChild(O)}if("text"==m.type){m.paper.canvas.style.display=d;var X=m.paper.span,U=100,$=f.font&&f.font.match(/\d+(?:\.\d*)?(?=px)/);g=X.style,f.font&&(g.font=f.font),f["font-family"]&&(g.fontFamily=f["font-family"]),f["font-weight"]&&(g.fontWeight=f["font-weight"]),f["font-style"]&&(g.fontStyle=f["font-style"]),$=i(f["font-size"]||$&&$[0])||10,g.fontSize=$*U+"px",m.textpath.string&&(X.innerHTML=r(m.textpath.string).replace(/"));var Z=X.getBoundingClientRect();m.W=f.w=(Z.right-Z.left)/U,m.H=f.h=(Z.bottom-Z.top)/U,m.X=f.x,m.Y=f.y+m.H/2,("x"in l||"y"in l)&&(m.path.v=t.format("m{0},{1}l{2},{1}",a(f.x*b),a(f.y*b),a(f.x*b)+1));for(var Q=["x","y","text","font","font-family","font-weight","font-style","font-size"],J=0,K=Q.length;K>J;J++)if(Q[J]in l){m._.dirty=1;break}switch(f["text-anchor"]){case"start":m.textpath.style["v-text-align"]="left",m.bbx=m.W/2;break;case"end":m.textpath.style["v-text-align"]="right",m.bbx=-m.W/2;break;default:m.textpath.style["v-text-align"]="center",m.bbx=0}m.textpath.style["v-text-kern"]=!0}},A=function(e,a,s){e.attrs=e.attrs||{};var o=e.attrs,l=Math.pow,h,u,c="linear",f=".5 .5";if(e.attrs.gradient=a,a=r(a).replace(t._radial_gradient,function(t,e,r){return c="radial",e&&r&&(e=i(e),r=i(r),l(e-.5,2)+l(r-.5,2)>.25&&(r=n.sqrt(.25-l(e-.5,2))*(2*(r>.5)-1)+.5),f=e+p+r),d}),a=a.split(/\s*\-\s*/),"linear"==c){var g=a.shift();if(g=-i(g),isNaN(g))return null}var x=t._parseDots(a);if(!x)return null;if(e=e.shape||e.node,x.length){e.removeChild(s),s.on=!0,s.method="none",s.color=x[0].color,s.color2=x[x.length-1].color;for(var v=[],y=0,m=x.length;m>y;y++)x[y].offset&&v.push(x[y].offset+p+x[y].color);s.colors=v.length?v.join():"0% "+s.color,"radial"==c?(s.type="gradientTitle",s.focus="100%",s.focussize="0 0",s.focusposition=f,s.angle=0):(s.type="gradient",s.angle=(270-g)%360),e.appendChild(s)}return 1},E=function(e,r){this[0]=this.node=e,e.raphael=!0,this.id=t._oid++,e.raphaelid=this.id,this.X=0,this.Y=0,this.attrs={},this.paper=r,this.matrix=t.matrix(),this._={transform:[],sx:1,sy:1,dx:0,dy:0,deg:0,dirty:1,dirtyT:1},!r.bottom&&(r.bottom=this),this.prev=r.top,r.top&&(r.top.next=this),r.top=this,this.next=null},M=t.el;E.prototype=M,M.constructor=E,M.transform=function(e){if(null==e)return this._.transform;var i=this.paper._viewBoxShift,n=i?"s"+[i.scale,i.scale]+"-1-1t"+[i.dx,i.dy]:d,a;i&&(a=e=r(e).replace(/\.{3}|\u2026/g,this._.transform||d)),t._extractTransform(this,n+e);var s=this.matrix.clone(),o=this.skew,l=this.node,h,u=~r(this.attrs.fill).indexOf("-"),c=!r(this.attrs.fill).indexOf("url(");if(s.translate(1,1),c||u||"image"==this.type)if(o.matrix="1 0 0 1",o.offset="0 0",h=s.split(),u&&h.noRotation||!h.isSimple){l.style.filter=s.toFilter();var f=this.getBBox(),g=this.getBBox(1),x=f.x-g.x,v=f.y-g.y;l.coordorigin=x*-b+p+v*-b,C(this,1,1,x,v,0)}else l.style.filter=d,C(this,h.scalex,h.scaley,h.dx,h.dy,h.rotate);else l.style.filter=d,o.matrix=r(s),o.offset=s.offset();return null!==a&&(this._.transform=a,t._extractTransform(this,a)),this},M.rotate=function(t,e,n){if(this.removed)return this;if(null!=t){if(t=r(t).split(u),t.length-1&&(e=i(t[1]),n=i(t[2])),t=i(t[0]),null==n&&(e=n),null==e||null==n){var a=this.getBBox(1);e=a.x+a.width/2,n=a.y+a.height/2}return this._.dirtyT=1,this.transform(this._.transform.concat([["r",t,e,n]])),this}},M.translate=function(t,e){return this.removed?this:(t=r(t).split(u),t.length-1&&(e=i(t[1])),t=i(t[0])||0,e=+e||0,this._.bbox&&(this._.bbox.x+=t,this._.bbox.y+=e),this.transform(this._.transform.concat([["t",t,e]])),this)},M.scale=function(t,e,n,a){if(this.removed)return this;if(t=r(t).split(u),t.length-1&&(e=i(t[1]),n=i(t[2]),a=i(t[3]),isNaN(n)&&(n=null),isNaN(a)&&(a=null)),t=i(t[0]),null==e&&(e=t),null==a&&(n=a),null==n||null==a)var s=this.getBBox(1);return n=null==n?s.x+s.width/2:n,a=null==a?s.y+s.height/2:a,this.transform(this._.transform.concat([["s",t,e,n,a]])),this._.dirtyT=1,this},M.hide=function(){return!this.removed&&(this.node.style.display="none"),this},M.show=function(){return!this.removed&&(this.node.style.display=d),this},M.auxGetBBox=t.el.getBBox,M.getBBox=function(){var t=this.auxGetBBox();if(this.paper&&this.paper._viewBoxShift){var e={},r=1/this.paper._viewBoxShift.scale;return e.x=t.x-this.paper._viewBoxShift.dx,e.x*=r,e.y=t.y-this.paper._viewBoxShift.dy,e.y*=r,e.width=t.width*r,e.height=t.height*r,e.x2=e.x+e.width,e.y2=e.y+e.height,e}return t},M._getBBox=function(){return this.removed?{}:{x:this.X+(this.bbx||0)-this.W/2,y:this.Y-this.H,width:this.W,height:this.H}},M.remove=function(){if(!this.removed&&this.node.parentNode){this.paper.__set__&&this.paper.__set__.exclude(this),t.eve.unbind("raphael.*.*."+this.id),t._tear(this,this.paper),this.node.parentNode.removeChild(this.node),this.shape&&this.shape.parentNode.removeChild(this.shape);for(var e in this)this[e]="function"==typeof this[e]?t._removedFactory(e):null;this.removed=!0}},M.attr=function(r,i){if(this.removed)return this;if(null==r){var n={};for(var a in this.attrs)this.attrs[e](a)&&(n[a]=this.attrs[a]);return n.gradient&&"none"==n.fill&&(n.fill=n.gradient)&&delete n.gradient,n.transform=this._.transform,n}if(null==i&&t.is(r,"string")){if(r==h&&"none"==this.attrs.fill&&this.attrs.gradient)return this.attrs.gradient;for(var s=r.split(u),o={},l=0,f=s.length;f>l;l++)r=s[l],r in this.attrs?o[r]=this.attrs[r]:t.is(this.paper.customAttributes[r],"function")?o[r]=this.paper.customAttributes[r].def:o[r]=t._availableAttrs[r];return f-1?o:o[s[0]]}if(this.attrs&&null==i&&t.is(r,"array")){for(o={},l=0,f=r.length;f>l;l++)o[r[l]]=this.attr(r[l]);return o}var p;null!=i&&(p={},p[r]=i),null==i&&t.is(r,"object")&&(p=r);for(var d in p)c("raphael.attr."+d+"."+this.id,this,p[d]);if(p){for(d in this.paper.customAttributes)if(this.paper.customAttributes[e](d)&&p[e](d)&&t.is(this.paper.customAttributes[d],"function")){var g=this.paper.customAttributes[d].apply(this,[].concat(p[d]));this.attrs[d]=p[d];for(var x in g)g[e](x)&&(p[x]=g[x])}p.text&&"text"==this.type&&(this.textpath.string=p.text),T(this,p)}return this},M.toFront=function(){return!this.removed&&this.node.parentNode.appendChild(this.node),this.paper&&this.paper.top!=this&&t._tofront(this,this.paper),this},M.toBack=function(){return this.removed?this:(this.node.parentNode.firstChild!=this.node&&(this.node.parentNode.insertBefore(this.node,this.node.parentNode.firstChild),t._toback(this,this.paper)),this)},M.insertAfter=function(e){return this.removed?this:(e.constructor==t.st.constructor&&(e=e[e.length-1]),e.node.nextSibling?e.node.parentNode.insertBefore(this.node,e.node.nextSibling):e.node.parentNode.appendChild(this.node),t._insertafter(this,e,this.paper),this)},M.insertBefore=function(e){return this.removed?this:(e.constructor==t.st.constructor&&(e=e[0]),e.node.parentNode.insertBefore(this.node,e.node),t._insertbefore(this,e,this.paper),this)},M.blur=function(e){var r=this.node.runtimeStyle,i=r.filter;return i=i.replace(v,d),0!==+e?(this.attrs.blur=e,r.filter=i+p+f+".Blur(pixelradius="+(+e||1.5)+")",r.margin=t.format("-{0}px 0 0 -{0}px",a(+e||1.5))):(r.filter=i,r.margin=0,delete this.attrs.blur),this},t._engine.path=function(t,e){var r=N("shape");r.style.cssText=m,r.coordsize=b+p+b,r.coordorigin=e.coordorigin;var i=new E(r,e),n={fill:"none",stroke:"#000"};t&&(n.path=t),i.type="path",i.path=[],i.Path=d,T(i,n),e.canvas&&e.canvas.appendChild(r);var a=N("skew");return a.on=!0,r.appendChild(a),i.skew=a,i.transform(d),i},t._engine.rect=function(e,r,i,n,a,s){var o=t._rectPath(r,i,n,a,s),l=e.path(o),h=l.attrs;return l.X=h.x=r,l.Y=h.y=i,l.W=h.width=n,l.H=h.height=a,h.r=s,h.path=o,l.type="rect",l},t._engine.ellipse=function(t,e,r,i,n){var a=t.path(),s=a.attrs;return a.X=e-i,a.Y=r-n,a.W=2*i,a.H=2*n,a.type="ellipse",T(a,{cx:e,cy:r,rx:i,ry:n}),a},t._engine.circle=function(t,e,r,i){var n=t.path(),a=n.attrs;return n.X=e-i,n.Y=r-i,n.W=n.H=2*i,n.type="circle",T(n,{cx:e,cy:r,r:i}),n},t._engine.image=function(e,r,i,n,a,s){var o=t._rectPath(i,n,a,s),l=e.path(o).attr({stroke:"none"}),u=l.attrs,c=l.node,f=c.getElementsByTagName(h)[0];return u.src=r,l.X=u.x=i,l.Y=u.y=n,l.W=u.width=a,l.H=u.height=s,u.path=o,l.type="image",f.parentNode==c&&c.removeChild(f),f.rotate=!0,f.src=r,f.type="tile",l._.fillpos=[i,n],l._.fillsize=[a,s],c.appendChild(f),C(l,1,1,0,0,0),l},t._engine.text=function(e,i,n,s){var o=N("shape"),l=N("path"),h=N("textpath");i=i||0,n=n||0,s=s||"",l.v=t.format("m{0},{1}l{2},{1}",a(i*b),a(n*b),a(i*b)+1),l.textpathok=!0,h.string=r(s),h.on=!0,o.style.cssText=m,o.coordsize=b+p+b,o.coordorigin="0 0";var u=new E(o,e),c={fill:"#000",stroke:"none",font:t._availableAttrs.font,text:s};u.shape=o,u.path=l,u.textpath=h,u.type="text",u.attrs.text=r(s),u.attrs.x=i,u.attrs.y=n,u.attrs.w=1,u.attrs.h=1,T(u,c),o.appendChild(h),o.appendChild(l),e.canvas.appendChild(o);var f=N("skew");return f.on=!0,o.appendChild(f),u.skew=f,u.transform(d),u},t._engine.setSize=function(e,r){var i=this.canvas.style;return this.width=e,this.height=r,e==+e&&(e+="px"),r==+r&&(r+="px"),i.width=e,i.height=r,i.clip="rect(0 "+e+" "+r+" 0)",this._viewBox&&t._engine.setViewBox.apply(this,this._viewBox),this},t._engine.setViewBox=function(e,r,i,n,a){t.eve("raphael.setViewBox",this,this._viewBox,[e,r,i,n,a]);var s=this.getSize(),o=s.width,l=s.height,h,u;return a&&(h=l/n,u=o/i,o>i*h&&(e-=(o-i*h)/2/h),l>n*u&&(r-=(l-n*u)/2/u)),this._viewBox=[e,r,i,n,!!a],this._viewBoxShift={dx:-e,dy:-r,scale:s},this.forEach(function(t){t.transform("...")}),this};var N;t._engine.initWin=function(t){var e=t.document;e.styleSheets.length<31?e.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)"):e.styleSheets[0].addRule(".rvml","behavior:url(#default#VML)");try{!e.namespaces.rvml&&e.namespaces.add("rvml","urn:schemas-microsoft-com:vml"),N=function(t){return e.createElement("')}}catch(r){N=function(t){return e.createElement("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}},t._engine.initWin(t._g.win),t._engine.create=function(){var e=t._getContainer.apply(0,arguments),r=e.container,i=e.height,n,a=e.width,s=e.x,o=e.y;if(!r)throw new Error("VML container not found.");var l=new t._Paper,h=l.canvas=t._g.doc.createElement("div"),u=h.style;return s=s||0,o=o||0,a=a||512,i=i||342,l.width=a,l.height=i,a==+a&&(a+="px"),i==+i&&(i+="px"),l.coordsize=1e3*b+p+1e3*b,l.coordorigin="0 0",l.span=t._g.doc.createElement("span"),l.span.style.cssText="position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;",h.appendChild(l.span),u.cssText=t.format("top:0;left:0;width:{0};height:{1};display:inline-block;position:relative;clip:rect(0 {0} {1} 0);overflow:hidden",a,i),1==r?(t._g.doc.body.appendChild(h),u.left=s+"px",u.top=o+"px",u.position="absolute"):r.firstChild?r.insertBefore(h,r.firstChild):r.appendChild(h),l.renderfix=function(){},l},t.prototype.clear=function(){t.eve("raphael.clear",this),this.canvas.innerHTML=d,this.span=t._g.doc.createElement("span"),this.span.style.cssText="position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;display:inline;",this.canvas.appendChild(this.span),this.bottom=this.top=null},t.prototype.remove=function(){t.eve("raphael.remove",this),this.canvas.parentNode.removeChild(this.canvas);for(var e in this)this[e]="function"==typeof this[e]?t._removedFactory(e):null;return!0};var L=t.st;for(var z in M)M[e](z)&&!L[e](z)&&(L[z]=function(t){return function(){var e=arguments;return this.forEach(function(r){r[t].apply(r,e)})}}(z))}}.apply(e,i),!(void 0!==n&&(t.exports=n))}])}); +/* + * This file is to be included by beaver contest tasks, it defines a basic + * implementation of the main functions of the task object, as well as a grader. + * + * Task can overwrite these definitions. + * + */ + + +/************************************************************************ + * Untouched parts from beaver-task-1.0. + ************************************************************************/ + +var task = {}; + +task.showViews = function(views, callback) { + if (views.forum || views.hint || views.editor) { + //console.error("this task does not have forum, hint nor editor specific view, showing task view instead."); + views.task = true; + } + $.each(['task', 'solution'], function(i, view) { + if (views[view]) { + $('#'+view).show(); + } else { + $('#'+view).hide(); + } + }); + if (typeof task.hackShowViews === 'function') {task.hackShowViews(views);} + callback(); +}; + +task.getViews = function(callback) { + // all beaver tasks have the same views + var views = { + task: {}, + hints: {requires: "task"}, + forum: {requires: "task"}, + editor: {requires: "task"}, + submission: {requires: "task"} + }; + + // Only declare the solution view if there's actually one + var solution = $('#solution').html(); + if(solution && $.trim('' + solution)) { + views.solution = {}; + } + + callback(views); +}; + +task.updateToken = function(token, callback) { + callback(); +}; + +task.getHeight = function(callback) { + callback(parseInt($("html").outerHeight(true))); +}; + +task.getMetaData = function(callback) { + if (typeof json !== 'undefined') { + callback(json); + } else { + callback({nbHints:0}); + } +}; + + +/************************************************************************ + * Updated parts in beaver-task-2.0. + ************************************************************************/ + +// TODO We update the grader below, if the task has levels. Is this line necessary? +var grader = grader ? grader : {}; + +function getUrlParameter(sParam) { + var sPageURL = decodeURIComponent(window.location.search.substring(1)), + sURLVariables = sPageURL.split('&'), + sParameterName, + i; + + for (i = 0; i < sURLVariables.length; i++) { + sParameterName = sURLVariables[i].split('='); + + if (sParameterName[0] === sParam) { + return sParameterName[1] === undefined ? true : sParameterName[1]; + } + } +}; + +window.forcedLevel = getUrlParameter("level"); + +function initWrapper(initSubTask, levels, defaultLevel, reloadWithCallbacks) { + // Create a subTask instance, possibly operating on an existing object. + function createTask(displayFlag) { + var subTask = {}; + subTask.delayFactory = new DelayFactory(); + subTask.raphaelFactory = new RaphaelFactory(); + + // Simulation factory needs a specific corresponding delay factory. + // TODO should it expect something else? subTask? A list of factories? + subTask.simulationFactory = new SimulationFactory(subTask.delayFactory); + + subTask.display = displayFlag; + initSubTask(subTask); + return subTask; + } + + // Destroy a subTask instance. + function destroyTask(subTask, callback) { + var doUnload = function() { + // Order is important. + subTask.raphaelFactory.destroyAll(); + subTask.simulationFactory.destroyAll(); + subTask.delayFactory.destroyAll(); + if(callback && typeof callback === "function") { + callback(); + } + }; + if(levels || subTask.assumeLevels) { + subTask.unloadLevel(doUnload); + } + else { + // TODO Can we assume non-level tasks will imeplement 'unload'? + subTask.unload(doUnload); + } + } + + // Invoke a function for each level, and wait for callback. + // When done, invoke finalCallback (optional). + function callbackLoop(array, itemCallback, finalCallback) { + var index = 0; + function innerLoop() { + if(index >= array.length) { + if(finalCallback) { + finalCallback(); + } + return; + } + itemCallback(array[index], function() { + index++; + innerLoop(); + }); + } + innerLoop(); + } + + // Main subTask instance, for user display. + var mainTask; + var mainTaskParams; + + // The state of the task, including current level and levelState for each level. + var state = null; + + // Instances of subTask intended for grading. + var gradingTasks = {}; + + // Store whether this task has loaded but reloadAnswer was not yet called. + // Used for automatically changing to the first level that can gain points. + var hasJustLoaded = false; + + task.load = function(views, callback) { + hasJustLoaded = true; + platform.getTaskParams(null, null, function(taskParams) { + if(taskParams.options && taskParams.options.level) { + window.forcedLevel = taskParams.options.level; + } + if(window.forcedLevel) { + levels = null; + } + + mainTask = createTask(true); + mainTask.taskParams = taskParams; + mainTaskParams = taskParams; + task.displayedSubTask = mainTask; + + if(levels || mainTask.assumeLevels) { + // TODO okay to assume default level is the first level, if not supplied? + if(defaultLevel === null || defaultLevel === undefined) { + if (window.forcedLevel) { + defaultLevel = window.forcedLevel; + $("." + window.forcedLevel).show(); // TODO: why is it needed here? + } else if(mainTask.assumeLevels) { + defaultLevel = "easy"; + } else { + defaultLevel = levels[0]; + } + } + + // The objects levelAnswers and levelStates are indexed by level names. + state = { + levelAnswers: {}, + levelStates: {}, + level: defaultLevel + }; + if(window.displayHelper) { + displayHelper.displayLevel(state.level); + } + mainTask.loadLevel(state.level, null, views); + if(levels) { + displayHelper.setupLevels(defaultLevel, reloadWithCallbacks, levels); + } + callback(); + } + else { + // TODO what's the desired behavior when no levels? + mainTask.load(views, callback); + } + }); + }; + + task.getState = function(callback) { + if(levels || mainTask.assumeLevels) { + // Update state to reflect latest user interaction. + state.levelStates[state.level] = mainTask.getStateObject(); + state.levelAnswers[state.level] = mainTask.getAnswerObject(); + callback(JSON.stringify(state)); + } + else { + // TODO is this the desired behavior? It is from beaver-task-1.0. + var currentState = {}; + var displayedAnswer = mainTask.getAnswerObject(); + currentState.displayedAnswer = displayedAnswer; + callback(JSON.stringify(currentState)); + } + }; + + task.getStateObject = function() { + state.levelStates[state.level] = mainTask.getStateObject(); + state.levelAnswers[state.level] = mainTask.getAnswerObject(); + return state; + }; + + task.reloadAnswer = function(strAnswer, callback) { + if(hasJustLoaded && levels) { + // If this is the first time we reload an answer, jump to the first + // level that can gain points, if there are levels. + hasJustLoaded = false; + task.gradeAnswer(strAnswer, null, function(score, message) { + var maxScores = displayHelper.getLevelsMaxScores(); + var level = levels[0]; + for(var i=1; i < levels.length; i++) { + if(score >= maxScores[levels[i-1]] || (level == 'basic' && levels[i] == 'easy')) { + level = levels[i]; + } + } + if (window.forcedLevel != null) { + level = window.forcedLevel; + } + var newAnswer = null; + if(strAnswer && strAnswer !== '') { + newAnswer = JSON.parse(strAnswer); + } + task.reloadAnswerObject(newAnswer, function() { + displayHelper.setLevel(level); + callback(); + }); + }); + return; + } + + var newAnswer; + if(strAnswer && strAnswer !== '') { + newAnswer = JSON.parse(strAnswer); + } + else { + newAnswer = null; + } + task.reloadAnswerObject(newAnswer, callback); + }; + + task.reloadAnswerObject = function(newAnswers, callback) { + if(levels || mainTask.assumeLevels) { + if (!newAnswers) { + state.levelAnswers = {}; + } + else { + state.levelAnswers = newAnswers; + } + + // Recreate the main task and load the relevant answer. + var level = state.level; + var levelAnswer = state.levelAnswers[level]; + if(levelAnswer === undefined || levelAnswer === null) { + levelAnswer = mainTask.getDefaultAnswerObject(); + state.levelAnswers[level] = levelAnswer; + } + + state.levelStates[state.level] = mainTask.getStateObject(); + var levelState = state.levelStates[level]; + if(mainTask.getDefaultStateObject && (levelState === undefined || levelState === null)) { + levelState = mainTask.getDefaultStateObject(); + state.levelStates[level] = levelState; + } + + destroyTask(mainTask, function() { + mainTask = createTask(true); + mainTask.taskParams = mainTaskParams; + task.displayedSubTask = mainTask; + if(window.displayHelper) { + displayHelper.displayLevel(level); + } + mainTask.loadLevel(level, levelState); + mainTask.reloadAnswerObject(levelAnswer); + if(mainTask.resetDisplay) { + mainTask.resetDisplay(); + } + if(callback && typeof callback === "function") { + callback(); + } + }); + } + else { + // TODO is this the desired behavior? Taken from beaver-task-1.0. + if (!newAnswers) { + mainTask.reloadAnswerObject(mainTask.getDefaultAnswerObject()); + } else { + mainTask.reloadAnswerObject(newAnswers); + } + if(callback && typeof callback === "function") { + callback(); + } + } + }; + + task.reloadState = function(newStateStr, callback) { + if (newStateStr) { + task.reloadStateObject(JSON.parse(newStateStr), callback); + } else { + task.reloadStateObject(task.getDefaultStateObject(), callback); + } + }; + + task.reloadStateObject = function(newState, callback) { + if(levels || mainTask.assumeLevels) { + // Recreate the task to reflect the new state. + state = newState; + if(!state.levelStates) { state.levelStates = {}; } + if(!state.levelAnswers) { state.levelAnswers = {}; } + if(!state.level) { + if (window.forcedLevel != null) { + state.level = window.forcedLevel; + } else { + state.level = 'easy'; + } + } + var level = state.level; + var levelState = state.levelStates[level]; + destroyTask(mainTask, function() { + mainTask = createTask(false); + mainTask.taskParams = mainTaskParams; + task.displayedSubTask = mainTask; + if(window.displayHelper) { + displayHelper.displayLevel(level); + } + mainTask.loadLevel(level, levelState); + mainTask.reloadAnswerObject(state.levelAnswers[level]); + if(callback && typeof callback === "function") { + callback(); + } + }); + } + else { + // TODO is this the desired behavior? Taken from beaver-task-1.0. + if (typeof newState.displayedAnswer !== 'undefined') { + mainTask.reloadAnswer(newState.displayedAnswer, callback); + } + else { + if(callback && typeof callback === "function") { + callback(); + } + } + } + }; + + task.getDefaultStateObject = function() { + return { + level: defaultLevel, + levelStates: {}, + levelAnswers: {} + }; + }; + + task.getDefaultAnswerObject = function() { + return {}; + }; + + task.getAnswer = function(callback) { + if(levels || mainTask.assumeLevels) { + // Update answer to reflect latest user interaction. + state.levelAnswers[state.level] = mainTask.getAnswerObject(); + callback(JSON.stringify(state.levelAnswers)); + } + else { + // TODO is this desired behavior? Taken from beaver-task-1. + var answerObj = mainTask.getAnswerObject(); + callback(JSON.stringify(answerObj)); + } + }; + + task.getAnswerObject = function() { + if(levels || mainTask.assumeLevels) { + state.levelAnswers[state.level] = mainTask.getAnswerObject(); + return state.levelAnswers; + } + else { + return mainTask.getAnswerObject(); + } + }; + + task.unload = function(callback) { + var instances = []; + var iSeed; + + if (typeof Blockly !== 'undefined') { // TEMPORARY, to replace with a global unload function provided by the task + removeBlockly(); + } + + + if (levels) { + for(var iLevel in gradingTasks) { + for(iSeed in gradingTasks[iLevel]) { + instances.push(gradingTasks[iLevel][iSeed]); + } + } + } else { + for(iSeed in gradingTasks) { + instances.push(gradingTasks[iSeed]); + } + } + instances.push(mainTask); + callbackLoop(instances, function(subTask, loopCallback) { + destroyTask(subTask, loopCallback); + }, function() { + task.displayedSubTask = null; + callback(); + }); + + }; + + function gradeAnswerInner(gradingTask, answer, minScore, maxScore, callback) { + gradingTask.isGrading = true; + if(answer === undefined || answer === null) { + answer = gradingTask.getDefaultAnswerObject(); + } + if (window.forcedLevel != null) { + answer = answer[window.forcedLevel]; + } else if(!levels && mainTask.assumeLevels && answer.easy) { + answer = answer.easy; + } + gradingTask.reloadAnswerObject(answer); + gradingTask.getGrade(function(result) { + gradingTask.isGrading = false; + var score = 0; + if(result.successRate > 0) { + score = Math.round(result.successRate * (maxScore - minScore) + minScore); + } + callback({ + score: score, + message: result.message + }); + }); + } + + function gradeAnswerByLevel(taskParams, level, seed, levelAnswer, minScore, maxScore, callback) { + var gradingTask; + + if(!gradingTasks[level]) { + gradingTasks[level] = {}; + } + // Create new instance to be kept in gradingTasks array, and use it for this grading. + if(!gradingTasks[level][seed]) { + gradingTask = createTask(false); + gradingTask.taskParams = taskParams; + gradingTask.isGrading = false; + gradingTask.loadLevel(level); + gradingTasks[level][seed] = gradingTask; + gradeAnswerInner(gradingTask, levelAnswer, minScore, maxScore, callback); + } + // Current gradingTasks[level][seed] instance is busy, so create a temporary instance, + // to be destroyed immediately after grading. + else if(gradingTasks[level][seed].isGrading) { + gradingTask = createTask(false); + gradingTask.taskParams = taskParams; + gradingTask.isGrading = false; + gradingTask.loadLevel(level); + gradeAnswerInner(gradingTask, levelAnswer, minScore, maxScore, function(result) { + destroyTask(gradingTask, function() { + callback(result); + }); + }); + } + // Current gradingTasks[level][seed] instance is not busy, use it. + else { + gradingTasks[level][seed].taskParams = taskParams; + gradeAnswerInner(gradingTasks[level][seed], levelAnswer, minScore, maxScore, callback); + } + } + + function gradeAnswerNoLevels(taskParams, seed, answer, minScore, maxScore, callback) { + var gradingTask; + + // Grade a task instance. + var doGrading = function() { + gradeAnswerInner(gradingTask, answer, minScore, maxScore, callback); + }; + + // Grade a task instance and destroy it. Invoke callback after destruction. + var doGradingAndDestroy = function() { + gradeAnswerInner(gradingTask, answer, minScore, maxScore, function(result) { + destroyTask(gradingTask, function() { + callback(result); + }); + }); + }; + + // Create new instance to be kept in gradingTasks array, and use it for this grading. + if(!gradingTasks[seed]) { + gradingTask = createTask(false); + gradingTask.taskParams = taskParams; + gradingTasks[seed] = gradingTask; + gradingTask.load(null, doGrading); + } + // Current gradingTasks[seed] instance is busy, so create a temporary instance, + // to be destroyed immediately after grading. + else if(gradingTasks[seed].isGrading) { + gradingTask = createTask(false); + gradingTask.taskParams = taskParams; + gradingTask.load(null, doGradingAndDestroy); + } + // Current gradingTasks[seed] instance is not busy, use it. + else { + gradingTask = gradingTasks[seed]; + gradingTask.taskParams = taskParams; + doGrading(); + } + } + + task.gradeAnswer = function(strAnswer, answerToken, callback) { + task.getLevelGrade(strAnswer, answerToken, callback, null); + }; + + // TODO: case where gradeAnswer is called again before it calls its callback + task.getLevelGrade = function(strAnswer, answerToken, callback, gradedLevel) { + // TODO Can we fetch task params just once instead of every time? + // If we can, then why do we need to index by seed in graders[level][seed]? + platform.getTaskParams(null, null, function(taskParams) { + if (strAnswer === '') { + callback(taskParams.minScore, ''); + return; + } + + var seed = taskParams.randomSeed; + var parsedAnswer = $.parseJSON(strAnswer); + + if(levels) { + var maxScores = displayHelper.getLevelsMaxScores(); + var minScores = {}; + for(var i=0; i < levels.length; i++) { + minScores[levels[i]] = i > 0 ? maxScores[levels[i-1]] : 0; + } + var levelAnswers = parsedAnswer; + var scores = {}; + var messages = {}; + + callbackLoop(levels, function(level, loopCallback) { + if(gradedLevel !== null && gradedLevel !== undefined && level !== gradedLevel) { + loopCallback(); + return; + } + gradeAnswerByLevel(taskParams, level, seed, levelAnswers[level], minScores[level], maxScores[level], function(result) { + scores[level] = result.score; + messages[level] = result.message; + loopCallback(); + }); + }, + function() { + // TODO is this correct? Taken from Arthur's level wrapper. + if(gradedLevel === null || gradedLevel === undefined) { + displayHelper.sendBestScore(callback, scores, messages); + } else { + callback(scores[gradedLevel], messages[gradedLevel]); + } + }); + } + else { + gradeAnswerNoLevels(taskParams, seed, parsedAnswer, taskParams.minScore, taskParams.maxScore, function(result) { + callback(result.score, result.message); + }); + } + }); + }; + + // TODO is this the correct behavior? + grader.gradeTask = task.gradeAnswer; + task.gradeTask = grader.gradeTask; +} + +/************************************************************************ + * Utilities + ************************************************************************/ + +function extractLevelSpecific(item, level) { + if ((typeof item != "object")) { + return item; + } + if($.isArray(item)) { + return $.map(item, function(val) { + return extractLevelSpecific(val, level); + }); + } + if (item.shared === undefined) { + if (item[level] === undefined) { + var newItem = {}; + for (var prop in item) { + newItem[prop] = extractLevelSpecific(item[prop], level); + } + return newItem; + } + return extractLevelSpecific(item[level], level); + } + if ($.isArray(item.shared)) { + var newItem = []; + for (var iElem = 0; iElem < item.shared.length; iElem++) { + newItem.push(extractLevelSpecific(item.shared[iElem], level)); + } + if (item[level] != undefined) { + if (!$.isArray(item[level])) { + console.error("Incompatible types when merging shared and " + level); + } + for (var iElem = 0; iElem < item[level].length; iElem++) { + newItem.push(extractLevelSpecific(item[level][iElem], level)); + } + } + return newItem; + } + if (typeof item.shared == "object") { + var newItem = {}; + for (var prop in item.shared) { + newItem[prop] = extractLevelSpecific(item.shared[prop], level); + } + if (item[level] != undefined) { + if (typeof item[level] != "object") { + console.error("Incompatible types when merging shared and " + level); + } + for (var prop in item[level]) { + newItem[prop] = extractLevelSpecific(item[level][prop], level); + } + } + return newItem; + } + console.error("Invalid type for shared property"); +} + + +$('document').ready(function() { + platform.initWithTask(window.task); +}); + +/* + * js_channel is a very lightweight abstraction on top of + * postMessage which defines message formats and semantics + * to support interactions more rich than just message passing + * js_channel supports: + * + query/response - traditional rpc + * + query/update/response - incremental async return of results + * to a query + * + notifications - fire and forget + * + error handling + * + * js_channel is based heavily on json-rpc, but is focused at the + * problem of inter-iframe RPC. + * + * Message types: + * There are 5 types of messages that can flow over this channel, + * and you may determine what type of message an object is by + * examining its parameters: + * 1. Requests + * + integer id + * + string method + * + (optional) any params + * 2. Callback Invocations (or just "Callbacks") + * + integer id + * + string callback + * + (optional) params + * 3. Error Responses (or just "Errors) + * + integer id + * + string error + * + (optional) string message + * 4. Responses + * + integer id + * + (optional) any result + * 5. Notifications + * + string method + * + (optional) any params + */ + +// Universal module definition // +(function (root, factory) { + if (typeof exports === 'object') { + // CommonJS + module.exports = factory(); + } else if (typeof define === 'function' && define.amd) { + // AMD + define([], function () { + return (root.Channel = factory()); + }); + } else { + // Global Variables + root.Channel = factory(); + } +}(this, function () { + "use strict"; + var Channel = (function() { + + // current transaction id, start out at a random *odd* number between 1 and a million + // There is one current transaction counter id per page, and it's shared between + // channel instances. That means of all messages posted from a single javascript + // evaluation context, we'll never have two with the same id. + var s_curTranId = Math.floor(Math.random()*1000001); + + // no two bound channels in the same javascript evaluation context may have the same origin, scope, and window. + // further if two bound channels have the same window and scope, they may not have *overlapping* origins + // (either one or both support '*'). This restriction allows a single onMessage handler to efficiently + // route messages based on origin and scope. The s_boundChans maps origins to scopes, to message + // handlers. Request and Notification messages are routed using this table. + // Finally, channels are inserted into this table when built, and removed when destroyed. + var s_boundChans = { }; + + // add a channel to s_boundChans, throwing if a dup exists + function s_addBoundChan(win, origin, scope, handler) { + function hasWin(arr) { + for (var i = 0; i < arr.length; i++) if (arr[i].win === win) return true; + return false; + } + + // does she exist? + var exists = false; + + if (origin === '*') { + // we must check all other origins, sadly. + for (var k in s_boundChans) { + if (!s_boundChans.hasOwnProperty(k)) continue; + if (k === '*') continue; + if (typeof s_boundChans[k][scope] === 'object') { + exists = hasWin(s_boundChans[k][scope]); + if (exists) break; + } + } + } else { + // we must check only '*' + if ((s_boundChans['*'] && s_boundChans['*'][scope])) { + exists = hasWin(s_boundChans['*'][scope]); + } + if (!exists && s_boundChans[origin] && s_boundChans[origin][scope]) + { + exists = hasWin(s_boundChans[origin][scope]); + } + } + if (exists) throw "A channel is already bound to the same window which overlaps with origin '"+ origin +"' and has scope '"+scope+"'"; + + if (typeof s_boundChans[origin] != 'object') s_boundChans[origin] = { }; + if (typeof s_boundChans[origin][scope] != 'object') s_boundChans[origin][scope] = [ ]; + s_boundChans[origin][scope].push({win: win, handler: handler}); + } + + function s_removeBoundChan(win, origin, scope) { + var arr = s_boundChans[origin][scope]; + for (var i = 0; i < arr.length; i++) { + if (arr[i].win === win) { + arr.splice(i,1); + } + } + if (s_boundChans[origin][scope].length === 0) { + delete s_boundChans[origin][scope]; + } + } + + function s_isArray(obj) { + if (Array.isArray) return Array.isArray(obj); + else { + return (obj.constructor.toString().indexOf("Array") != -1); + } + } + + // No two outstanding outbound messages may have the same id, period. Given that, a single table + // mapping "transaction ids" to message handlers, allows efficient routing of Callback, Error, and + // Response messages. Entries are added to this table when requests are sent, and removed when + // responses are received. + var s_transIds = { }; + + // class singleton onMessage handler + // this function is registered once and all incoming messages route through here. This + // arrangement allows certain efficiencies, message data is only parsed once and dispatch + // is more efficient, especially for large numbers of simultaneous channels. + var s_onMessage = function(e) { + try { + var m = JSON.parse(e.data); + if (typeof m !== 'object' || m === null) throw "malformed"; + } catch(e) { + // just ignore any posted messages that do not consist of valid JSON + return; + } + + var w = e.source; + var o = e.origin; + var s, i, meth; + + if (typeof m.method === 'string') { + var ar = m.method.split('::'); + if (ar.length == 2) { + s = ar[0]; + meth = ar[1]; + } else { + meth = m.method; + } + } + + if (typeof m.id !== 'undefined') i = m.id; + + // w is message source window + // o is message origin + // m is parsed message + // s is message scope + // i is message id (or undefined) + // meth is unscoped method name + // ^^ based on these factors we can route the message + + // if it has a method it's either a notification or a request, + // route using s_boundChans + if (typeof meth === 'string') { + var delivered = false; + if (s_boundChans[o] && s_boundChans[o][s]) { + for (var j = 0; j < s_boundChans[o][s].length; j++) { + if (s_boundChans[o][s][j].win === w) { + s_boundChans[o][s][j].handler(o, meth, m); + delivered = true; + break; + } + } + } + + if (!delivered && s_boundChans['*'] && s_boundChans['*'][s]) { + for (var j = 0; j < s_boundChans['*'][s].length; j++) { + if (s_boundChans['*'][s][j].win === w) { + s_boundChans['*'][s][j].handler(o, meth, m); + break; + } + } + } + } + // otherwise it must have an id (or be poorly formed + else if (typeof i != 'undefined') { + if (s_transIds[i]) s_transIds[i](o, meth, m); + } + }; + + // Setup postMessage event listeners + if (window.addEventListener) window.addEventListener('message', s_onMessage, false); + else if(window.attachEvent) window.attachEvent('onmessage', s_onMessage); + + /* a messaging channel is constructed from a window and an origin. + * the channel will assert that all messages received over the + * channel match the origin + * + * Arguments to Channel.build(cfg): + * + * cfg.window - the remote window with which we'll communicate + * cfg.origin - the expected origin of the remote window, may be '*' + * which matches any origin + * cfg.scope - the 'scope' of messages. a scope string that is + * prepended to message names. local and remote endpoints + * of a single channel must agree upon scope. Scope may + * not contain double colons ('::'). + * cfg.debugOutput - A boolean value. If true and window.console.log is + * a function, then debug strings will be emitted to that + * function. + * cfg.postMessageObserver - A function that will be passed two arguments, + * an origin and a message. It will be passed these immediately + * before messages are posted. + * cfg.gotMessageObserver - A function that will be passed two arguments, + * an origin and a message. It will be passed these arguments + * immediately after they pass scope and origin checks, but before + * they are processed. + * cfg.onReady - A function that will be invoked when a channel becomes "ready", + * this occurs once both sides of the channel have been + * instantiated and an application level handshake is exchanged. + * the onReady function will be passed a single argument which is + * the channel object that was returned from build(). + * cfg.reconnect - A boolean value - if true, the channel allows reconnection + * useful when the page in a child frame is reloaded and wants + * to re-establish connection with parent window using the same + * origin, scope and bindings. + * cfg.publish - A boolean value. If true, bind will automatically publish + * the method on the remote side. The method will be published under + * channelObject.remote, but it will not be available before the onReady + * callback is called on the other side. + * cfg.remote - An array of method names for which stubs should be generated without + * waiting for remote end to publish them. A string (for a single method name) + * is also accepted. This allows methods under channelObject.remote to be called + * also before onReady callback is called; the invocations will be queued until + * the channel is ready. If the methods do not exist on remote side, the + * error callback will be called. + */ + return { + build: function(cfg) { + var debug = function(m) { + if (cfg.debugOutput && window.console && window.console.log) { + // try to stringify, if it doesn't work we'll let javascript's built in toString do its magic + try { + if (typeof m !== 'string') { + m = JSON.stringify(m); + } + } + catch(e) { + } + window.console.log("["+chanId+"] " + m); + } + }; + + /* browser capabilities check */ + if (!window.postMessage) throw("jschannel cannot run this browser, no postMessage"); + if (!window.JSON || !window.JSON.stringify || ! window.JSON.parse) { + throw("jschannel cannot run this browser, no JSON parsing/serialization"); + } + + /* basic argument validation */ + if (typeof cfg != 'object') throw("Channel build invoked without a proper object argument"); + + if (!cfg.window || !cfg.window.postMessage) throw("Channel.build() called without a valid window argument"); + + /* we'd have to do a little more work to be able to run multiple channels that intercommunicate the same + * window... Not sure if we care to support that */ + if (window === cfg.window) throw("target window is same as present window -- not allowed"); + + // let's require that the client specify an origin. if we just assume '*' we'll be + // propagating unsafe practices. that would be lame. + var validOrigin = false; + if (typeof cfg.origin === 'string') { + var oMatch; + if (cfg.origin === "*") validOrigin = true; + // allow valid domains under http and https. Also, trim paths off otherwise valid origins. + else if (null !== (oMatch = cfg.origin.match(/^https?:\/\/(?:[-a-zA-Z0-9_\.])+(?::\d+)?/))) { + cfg.origin = oMatch[0].toLowerCase(); + validOrigin = true; + } + } + + if (!validOrigin) throw ("Channel.build() called with an invalid origin"); + + if (typeof cfg.scope !== 'undefined') { + if (typeof cfg.scope !== 'string') throw 'scope, when specified, must be a string'; + if (cfg.scope.split('::').length > 1) throw "scope may not contain double colons: '::'"; + } else { + cfg.scope = "__default"; + } + + /* private variables */ + // generate a random and psuedo unique id for this channel + var chanId = (function () { + var text = ""; + var alpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; + for(var i=0; i < 5; i++) text += alpha.charAt(Math.floor(Math.random() * alpha.length)); + return text; + })(); + + // registrations: mapping method names to call objects + var regTbl = { }; + // current oustanding sent requests + var outTbl = { }; + // current oustanding received requests + var inTbl = { }; + // are we ready yet? when false we will block outbound messages. + var ready = false; + var pendingQueue = [ ]; + var publishQueue = [ ]; + + var createTransaction = function(id,origin,callbacks) { + var shouldDelayReturn = false; + var completed = false; + + return { + origin: origin, + invoke: function(cbName, v) { + // verify in table + if (!inTbl[id]) throw "attempting to invoke a callback of a nonexistent transaction: " + id; + // verify that the callback name is valid + var valid = false; + for (var i = 0; i < callbacks.length; i++) if (cbName === callbacks[i]) { valid = true; break; } + if (!valid) throw "request supports no such callback '" + cbName + "'"; + + // send callback invocation + postMessage({ id: id, callback: cbName, params: v}); + }, + error: function(error, message) { + completed = true; + // verify in table + if (!inTbl[id]) throw "error called for nonexistent message: " + id; + + // remove transaction from table + delete inTbl[id]; + + // send error + postMessage({ id: id, error: error, message: message }); + }, + complete: function(v) { + completed = true; + // verify in table + if (!inTbl[id]) throw "complete called for nonexistent message: " + id; + // remove transaction from table + delete inTbl[id]; + // send complete + postMessage({ id: id, result: v }); + }, + delayReturn: function(delay) { + if (typeof delay === 'boolean') { + shouldDelayReturn = (delay === true); + } + return shouldDelayReturn; + }, + completed: function() { + return completed; + } + }; + }; + + var setTransactionTimeout = function(transId, timeout, method) { + return window.setTimeout(function() { + if (outTbl[transId]) { + // XXX: what if client code raises an exception here? + var msg = "timeout (" + timeout + "ms) exceeded on method '" + method + "'"; + if (outTbl[transId].error) { + outTbl[transId].error("timeout_error", msg); + } + delete outTbl[transId]; + delete s_transIds[transId]; + } + }, timeout); + }; + + var onMessage = function(origin, method, m) { + // if an observer was specified at allocation time, invoke it + if (typeof cfg.gotMessageObserver === 'function') { + // pass observer a clone of the object so that our + // manipulations are not visible (i.e. method unscoping). + // This is not particularly efficient, but then we expect + // that message observers are primarily for debugging anyway. + try { + cfg.gotMessageObserver(origin, m); + } catch (e) { + debug("gotMessageObserver() raised an exception: " + e.toString()); + } + } + + // now, what type of message is this? + if (m.id && method) { + inTbl[m.id] = { }; + var trans = createTransaction(m.id, origin, m.callbacks ? m.callbacks : [ ]); + // a request! do we have a registered handler for this request? + if (regTbl[method]) { + try { + // callback handling. we'll magically create functions inside the parameter list for each + // callback + if (m.callbacks && s_isArray(m.callbacks) && m.callbacks.length > 0) { + for (var i = 0; i < m.callbacks.length; i++) { + var path = m.callbacks[i]; + var obj = m.params; + var pathItems = path.split('/'); + for (var j = 0; j < pathItems.length - 1; j++) { + var cp = pathItems[j]; + if (typeof obj[cp] !== 'object') obj[cp] = { }; + obj = obj[cp]; + } + obj[pathItems[pathItems.length - 1]] = (function() { + var cbName = path; + return function(params) { + return trans.invoke(cbName, params); + }; + })(); + } + } + var resp = regTbl[method](trans, m.params); + if (!trans.delayReturn() && !trans.completed()) trans.complete(resp); + } catch(e) { + // automagic handling of exceptions: + var error = "runtime_error"; + var message = null; + // * if it's a string then it gets an error code of 'runtime_error' and string is the message + if (typeof e === 'string') { + message = e; + } else if (typeof e === 'object') { + // if it's an Error instance we use the constructor name to set the error property + // and we just copy the error message + if (e instanceof Error) { + error = e.constructor.name; + message = e.message; + } + // Otherwise, it's either an array or an object + // * if it's an array of length two, then array[0] is the code, array[1] is the error message + else if (e && s_isArray(e) && e.length == 2) { + error = e[0]; + message = e[1]; + } + // * if it's an object then we'll look form error and message parameters + else if (typeof e.error === 'string') { + error = e.error; + if (!e.message) message = ""; + else if (typeof e.message === 'string') message = e.message; + else e = e.message; // let the stringify/toString message give us a reasonable verbose error string + } + } + + // message is *still* null, let's try harder + if (message === null) { + try { + message = JSON.stringify(e); + /* On MSIE8, this can result in 'out of memory', which + * leaves message undefined. */ + if (typeof(message) == 'undefined') + message = e.toString(); + } catch (e2) { + message = e.toString(); + } + } + + trans.error(error,message); + } + } else { // if no method found, send error + trans.error("method_not_found", "No method '" + method + "' was (yet) bound by the provider"); + } + } else if (m.id && m.callback) { + if (!outTbl[m.id] ||!outTbl[m.id].callbacks || !outTbl[m.id].callbacks[m.callback]) + { + debug("ignoring invalid callback, id:"+m.id+ " (" + m.callback +")"); + } else { + // XXX: what if client code raises an exception here? + outTbl[m.id].callbacks[m.callback](m.params); + } + } else if (m.id) { + if (!outTbl[m.id]) { + debug("ignoring invalid response: " + m.id); + } else { + // XXX: what if client code raises an exception here? + if (m.error) { + // We might not have an error callback + if(outTbl[m.id].error) { + outTbl[m.id].error(m.error, m.message); + } + } else { + // But we always have a success callback + if (m.result !== undefined) { + outTbl[m.id].success(m.result); + } else { + outTbl[m.id].success(); + } + } + delete outTbl[m.id]; + delete s_transIds[m.id]; + } + } else if (method) { + // tis a notification. + if (regTbl[method]) { + // yep, there's a handler for that. + // transaction has only origin for notifications. + regTbl[method]({ origin: origin }, m.params); + // if the client throws, we'll just let it bubble out + // what can we do? Also, here we'll ignore return values + } + } + }; + + // now register our bound channel for msg routing + s_addBoundChan(cfg.window, cfg.origin, cfg.scope, onMessage); + + // scope method names based on cfg.scope specified when the Channel was instantiated + var scopeMethod = function(m) { + return [cfg.scope, m].join("::"); + }; + + // a small wrapper around postmessage whose primary function is to handle the + // case that clients start sending messages before the other end is "ready" + var postMessage = function(msg, force) { + if (!msg) throw "postMessage called with null message"; + + // delay posting if we're not ready yet. + if (!force && !ready) { + debug("queue message: " + JSON.stringify(msg)); + pendingQueue.push(msg); + } else { + if (typeof cfg.postMessageObserver === 'function') { + try { + cfg.postMessageObserver(cfg.origin, msg); + } catch (e) { + debug("postMessageObserver() raised an exception: " + e.toString()); + } + } + debug("post message: " + JSON.stringify(msg) + " with origin " + cfg.origin); + cfg.window.postMessage(JSON.stringify(msg), cfg.origin); + } + }; + + var onReady = function(trans, params) { + debug('ready msg received'); + if (ready && !cfg.reconnect) { + throw "received ready message while in ready state."; + } + ready = true; + + // only append suffix to chanId once: + if (chanId.length < 6) { + if (params.type === 'publish-request') { + chanId += '-R'; + } else { + chanId += '-L'; + } + } + debug('ready msg accepted.'); + + if (params.type === 'publish-request') { + obj.notify({ method: '__ready', params: { + type:'publish-reply', + publish: publishQueue + } }); + } + + for (var i = 0; i < params.publish.length; i++) { + if (params.publish[i].action === "bind") { + createStubs([params.publish[i].method], obj.remote); + } else { // unbind + delete obj.remote[params.publish[i].method]; + } + } + + //unbind ready handler unless we allow reconnecting: + if (!cfg.reconnect) { + obj.unbind('__ready', true); // now this handler isn't needed any more. + } + + // flush queue + while (pendingQueue.length) { + postMessage(pendingQueue.splice(0, 1)[0]); + } + publishQueue = []; + // invoke onReady observer if provided + if (typeof cfg.onReady === 'function') cfg.onReady(obj); + + }; + + var createStubs = function(stubList, targetObj) { + stubList = [].concat(stubList); // Coerce into array, allows string to be used for single-item array + var method; + for(var i=0; i < stubList.length; i++) { + method = stubList[i].toString(); + targetObj[method] = function(m) { + return function(params, success, error) { + if (success) { + obj.call({ + method: m, + params: params, + success: success, + error: error + }); + } else { + obj.notify({ + method: m, + params: params + }); + } + }; + }(method); + } + } + + // Dynamic publish from remote + var onBind = function(trans, method) { + createStubs([method], obj.remote); + }; + + // Dynamic unpublish from remote + var onUnbind = function(trans, method) { + if (obj.remote[method]) { + delete obj.remote[method]; + } + }; + + var obj = { + + remote: {}, + + // tries to unbind a bound message handler. returns false if not possible + unbind: function (method, doNotPublish) { + if (regTbl[method]) { + if (!(delete regTbl[method])) throw ("can't delete method: " + method); + if (cfg.publish && ! doNotPublish) { + if (ready) { + obj.notify({ method: '__unbind', params: method }); + } else { + publishQueue.push({ action: 'unbind', method: method }); + } + } + return true; + } + return false; + }, + bind: function (method, cb, doNotPublish) { + if (!method || typeof method !== 'string') throw "'method' argument to bind must be string"; + if (!cb || typeof cb !== 'function') throw "callback missing from bind params"; + + if (regTbl[method]) throw "method '"+method+"' is already bound!"; + regTbl[method] = cb; + if (cfg.publish && ! doNotPublish) { + if (ready) { + obj.notify({ method: '__bind', params: method }); + } else { + publishQueue.push({ action: 'bind', method: method }); + } + } + return this; + }, + call: function(m) { + if (!m) throw 'missing arguments to call function'; + if (!m.method || typeof m.method !== 'string') throw "'method' argument to call must be string"; + if (!m.success || typeof m.success !== 'function') throw "'success' callback missing from call"; + + // now it's time to support the 'callback' feature of jschannel. We'll traverse the argument + // object and pick out all of the functions that were passed as arguments. + var callbacks = { }; + var callbackNames = [ ]; + var seen = [ ]; + + var pruneFunctions = function (path, obj) { + if (obj && seen.indexOf(obj) >= 0) { + throw "params cannot be a recursive data structure" + } + seen.push(obj); + + if (typeof obj === 'object') { + for (var k in obj) { + if (!obj.hasOwnProperty(k)) continue; + var np = path + (path.length ? '/' : '') + k; + if (typeof obj[k] === 'function') { + callbacks[np] = obj[k]; + callbackNames.push(np); + delete obj[k]; + } else if (typeof obj[k] === 'object') { + pruneFunctions(np, obj[k]); + } + } + } + }; + pruneFunctions("", m.params); + + // build a 'request' message and send it + var msg = { id: s_curTranId, method: scopeMethod(m.method), params: m.params }; + if (callbackNames.length) msg.callbacks = callbackNames; + + if (m.timeout) + // XXX: This function returns a timeout ID, but we don't do anything with it. + // We might want to keep track of it so we can cancel it using clearTimeout() + // when the transaction completes. + setTransactionTimeout(s_curTranId, m.timeout, scopeMethod(m.method)); + + // insert into the transaction table + outTbl[s_curTranId] = { callbacks: callbacks, error: m.error, success: m.success }; + s_transIds[s_curTranId] = onMessage; + + // increment current id + s_curTranId++; + + postMessage(msg); + }, + notify: function(m) { + if (!m) throw 'missing arguments to notify function'; + if (!m.method || typeof m.method !== 'string') throw "'method' argument to notify must be string"; + + // no need to go into any transaction table + postMessage({ method: scopeMethod(m.method), params: m.params }); + }, + destroy: function () { + s_removeBoundChan(cfg.window, cfg.origin, cfg.scope); + if (window.removeEventListener) window.removeEventListener('message', onMessage, false); + else if(window.detachEvent) window.detachEvent('onmessage', onMessage); + ready = false; + regTbl = { }; + inTbl = { }; + outTbl = { }; + cfg.origin = null; + pendingQueue = [ ]; + debug("channel destroyed"); + chanId = ""; + } + }; + + obj.bind('__ready', onReady, true); + obj.bind('__bind', onBind, true); + obj.bind('__unbind', onUnbind, true); + if (cfg.remote) { + createStubs(cfg.remote, obj.remote); + } + setTimeout(function() { + if (chanId.length > 0) { // The channel might already have been destroyed + postMessage({ method: scopeMethod('__ready'), params: { + type: "publish-request", + publish: publishQueue + } }, true); + } + + }, 0); + + return obj; + } + }; + })(); + + + return Channel; +})); + +function RaphaelFactory() { + this.items = {}; + this.animations = {}; + + this.create = function(id, elementID, width, height) { + if(this.items[id] !== null && this.items[id] !== undefined) { + throw "RaphaelFactory: id " + id + " already exists"; + } + this.items[id] = new Raphael(elementID, width, height); + + // Offset in mouse events can be affected by the top left element, in firefox 3.6 (and perhaps other browsers). + // This makes sure there is an element at 0,0. + this.items[id].rect(0, 0, 1, 1).attr("opacity", 0); + + return this.items[id]; + }; + + this.get = function(id) { + return this.items[id]; + }; + + this.animate = function(name, object, params, time) { + this.animations[name] = object; + var self = this; + object.animate(params, time, function() { + delete self.animations[name]; + }); + }; + + this.pauseAnimate = function(name) { + if (this.animations[name]) { + this.animations[name].pause(); + } + }; + + this.resumeAnimate = function(name) { + if (this.animations[name]) { + this.animations[name].resume(); + } + }; + + this.stopAnimate = function(name) { + if (this.animations[name]) { + this.animations[name].stop(); + delete this.animations[name]; + } + }; + + this.destroy = function(id) { + this.stop(id); + this.remove(id); + }; + + this.stop = function(id) { + var paper = this.items[id]; + if(paper !== null && paper !== undefined) { + paper.remove(); + } + }; + + this.remove = function(id) { + delete this.items[id]; + }; + + this.destroyAll = function() { + for(var id in this.items) { + this.stop(id); + } + for(var animID in this.animations) { + this.stopAnimate(animID); + } + this.items = {}; + }; +} +function DelayFactory() { + this.timeouts = {}; + this.intervals = {}; + this.items = {}; + + this.create = function(id, callback, delay, isInterval) { + if(this.items[id] !== null && this.items[id] !== undefined) { + throw "DelayFactory: id " + id + " already exists"; + } + if(isInterval) { + this.createInterval(id, callback, delay); + } + else { + this.createTimeout(id, callback, delay); + } + }; + + this.createTimeout = function(id, callback, delay) { + if(this.items[id] !== null && this.items[id] !== undefined) { + throw "DelayFactory: id " + id + " already exists"; + } + var self = this; + this.timeouts[id] = setTimeout(function() { + delete self.timeouts[id]; + delete self.items[id]; + callback(); + }, delay); + this.items[id] = this.timeouts[id]; + }; + + this.createInterval = function(id, callback, delay) { + if(this.items[id] !== null && this.items[id] !== undefined) { + throw "DelayFactory: id " + id + " already exists"; + } + this.intervals[id] = setInterval(callback, delay); + this.items[id] = this.intervals[id]; + }; + + this.get = function(id) { + return this.items[id]; + }; + + this.destroy = function(id) { + this.stop(id); + this.remove(id); + }; + + this.stop = function(id) { + var timeout = this.timeouts[id]; + if(timeout !== null && timeout !== undefined) { + clearTimeout(timeout); + } + var interval = this.intervals[id]; + if(interval !== null && interval !== undefined) { + clearInterval(interval); + } + }; + + this.remove = function(id) { + delete this.timeouts[id]; + delete this.intervals[id]; + delete this.items[id]; + }; + + this.destroyAll = function() { + for(var id in this.items) { + this.stop(id); + } + this.timeouts = {}; + this.intervals = {}; + this.items = {}; + }; +} +function SimulationFactory(delayFactory) { + this.items = {}; + + this.create = function(id) { + if(this.items[id] !== null && this.items[id] !== undefined) { + throw "SimulationFactory: id " + id + " already exists"; + } + this.items[id] = new Simulation(id, delayFactory); + return this.items[id]; + }; + + this.get = function(id) { + return this.items[id]; + }; + + this.destroy = function(id) { + this.stop(id); + this.remove(id); + }; + + this.stop = function(id) { + var simulation = this.items[id]; + if(simulation !== null && simulation !== undefined) { + simulation.stop(); + } + }; + + this.remove = function(id) { + delete this.items[id]; + }; + + this.destroyAll = function() { + for(var id in this.items) { + this.stop(id); + } + this.items = {}; + }; +} \ No newline at end of file diff --git a/bundles/bebras-interface.js b/bundles/bebras-interface.js new file mode 100644 index 000000000..2c3b10987 --- /dev/null +++ b/bundles/bebras-interface.js @@ -0,0 +1,3431 @@ +(function () { + +'use strict'; + +function getUrlParameterByName(name) { + name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); + var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), + results = regex.exec(location.href); + return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); +} + +function isCrossDomain() { + function isInIframe() { + try { + return window.self !== window.top; + } catch (e) { + return false; + } + } + function isSameDomain() { + var res = false; + function doNothing(document){} + try{ + res = !! parent.document; + } catch(e){ + res = false; + } + return res; + } + return isInIframe() && !isSameDomain(); +} + +var platform; + +if (!isCrossDomain()) { + + /* Implementation of a platform proxy for the task iframe. This object is always + * available, but is effective only when setPlatform is called with a true + * platform object. + */ + + platform = { + registered_objects: [], + parent_platform: null, + initFailed: false, + setPlatform: function(platformArg) { + platform.parent_platform = platformArg; + }, + trigger: function(event, content) { + for (var i = 0; i < platform.registered_objects.length; i++) { + var object = platform.registered_objects[i]; + if (typeof (object[event]) != "undefined") { + object[event].apply(object, content); + } + } + }, + subscribe: function(object) { + this.registered_objects.push(object); + }, + unsubscribe: function(object) { + var index = this.registered_objects.indexOf(object); + if (index != -1) { + this.registered_objects.splice(index, 1); + } + }, + validate: function(mode, success, error) { + // TODO: this case is a bit blur... + var res = platform.parent_platform.validate(mode, success, error); + this.trigger('validate', [mode]); + return res; + }, + showView: function(views, success, error) { + return platform.parent_platform.showView(views, success, error); + }, + askHint: function(platformToken, success, error) { + return platform.parent_platform.askHint(platformToken, success, error); + }, + updateHeight: function(height, success, error) { + return platform.parent_platform.updateDisplay({height: height}, success, error); + }, + updateDisplay: function(data, success, error) { + return platform.parent_platform.updateDisplay(data, success, error); + }, + getTaskParams: function(key, defaultValue, success, error) { + return platform.parent_platform.getTaskParams(key, defaultValue, success, error); + }, + openUrl: function(url, success, error) { + return platform.parent_platform.openUrl(url, success, error); + }, + initCallback: function(callback) { + this.initCallbackFun = callback; + if (platform.initDone) { + callback(); + } + }, + initWithTask: function(task) { + platform.task = task; + window.task = task; + platform.initDone = true; + if (platform.initCallbackFun) { + platform.initCallbackFun(); + } + } + }; + +} else { + + // cross-domain version, depends on jschannel + platform = {}; + var callAndTrigger = function(fun, triggerName, error, args) { + return function() { + try { + platform.trigger(triggerName, args); + fun(arguments); + } catch(e) { + error(e.toString()+'\n'+e.stack); + } + }; + }; + platform.ready = false; + platform.initFailed = false; + platform.initWithTask = function(task) { + if (typeof Channel === 'undefined') { + platform.initFailed = true; + console.error('cannot init task if jschannel is not present'); + return; + } + + var previousHeights = []; + var getHeightFiltered = function(success, error) { + // If the new height has already been returned just before the current + // height, we're in a loop between two heights, possibly because of a + // scrollbar. + // In that case we want to keep the largest of the two heights. + if(!task.getHeight) { error('task.getHeight not defined yet'); } + task.getHeight(function(h) { + if((previousHeights.length == 2) && + (previousHeights[0] == h) && + (previousHeights[1] >= h)) { + success(previousHeights[1]); + return; + } + previousHeights.push(h); + previousHeights = previousHeights.slice(-2); + success(h); + }, error); + } + + var gradeAnswer = function(params, success, error) { + var newSuccess = function(score, message, scoreToken) { + success([score, message, scoreToken]); + }; + if (typeof task.gradeAnswer === 'function') { + task.gradeAnswer(params[0], params[1], newSuccess, error); + } else { + window.grader.gradeTask(params[0], params[1], newSuccess, error); + } + }; + var channelId = getUrlParameterByName('channelId'); + var chan = Channel.build({window: window.parent, origin: "*", scope: channelId, onReady: function() {platform.ready = true;}}); + platform.chan = chan; + platform.task = task; + platform.channelId = channelId; + chan.bind('task.load', function(trans, views) {task.load(views, callAndTrigger(trans.complete, 'load', trans.error, [views]), trans.error);trans.delayReturn(true);}); + chan.bind('task.unload', function(trans) {task.unload(callAndTrigger(trans.complete, 'unload', trans.error, null), trans.error);trans.delayReturn(true);}); + chan.bind('task.getHeight', function(trans) {getHeightFiltered(trans.complete, trans.error);trans.delayReturn(true);}); + chan.bind('task.getMetaData', function(trans) {task.getMetaData(trans.complete, trans.error);trans.delayReturn(true);}); + chan.bind('task.getViews', function(trans) {task.getViews(trans.complete, trans.error);trans.delayReturn(true);}); + chan.bind('task.showViews', function(trans, views) {task.showViews(views, callAndTrigger(trans.complete, 'showViews', trans.error, [views]), trans.error);trans.delayReturn(true);}); + chan.bind('task.updateToken', function(trans, token) {task.updateToken(token, trans.complete, trans.error);trans.delayReturn(true);}); + chan.bind('task.reloadAnswer', function(trans, answer) {task.reloadAnswer(answer, callAndTrigger(trans.complete, 'reloadAnswer', trans.error, [answer]), trans.error);trans.delayReturn(true);}); + chan.bind('task.getAnswer', function(trans) {task.getAnswer(trans.complete, trans.error);trans.delayReturn(true);}); + chan.bind('task.getState', function(trans) {task.getState(trans.complete, trans.error);trans.delayReturn(true);}); + chan.bind('task.getResources', function(trans) {task.getResources(trans.complete, trans.error);trans.delayReturn(true);}); + chan.bind('task.reloadState', function(trans, state) {task.reloadState(state, callAndTrigger(trans.complete, 'reloadState', trans.error, [state]), trans.error);trans.delayReturn(true);}); + chan.bind('grader.gradeTask', function(trans, params) {gradeAnswer(params, trans.complete, trans.error);trans.delayReturn(true);}); + chan.bind('task.gradeAnswer', function(trans, params) {gradeAnswer(params, trans.complete, trans.error);trans.delayReturn(true);}); + }; + + platform.registered_objects = []; + platform.trigger = function(event, content) { + for (var i = 0; i < platform.registered_objects.length; i++) { + var object = platform.registered_objects[i]; + if (typeof object[event] !== "undefined") { + object[event].apply(object, content); + } + } + }; + platform.subscribe = function(object) { + platform.registered_objects.push(object); + }; + platform.unsubscribe = function(object) { + var index = platform.registered_objects.indexOf(object); + if (index != -1) { + platform.registered_objects.splice(index, 1); + } + }; + platform.stop = function() { + platform.chan.destroy(); + }; + platform.validate = function (sMode, success, error) { + if (!success) success = function(){}; // not mandatory, as most code doesn't use it + if (!error) error = function() {console.error(arguments);}; + platform.chan.call({method: "platform.validate", + params: sMode, + error: error, + success: callAndTrigger(success, 'validate', error, [sMode]) + }); + }; + platform.getTaskParams = function(key, defaultValue, success, error) { + if (!success) success = function(){}; + if (!error) error = function() {console.error(arguments);}; + platform.chan.call({method: "platform.getTaskParams", + params: [key, defaultValue], + error: error, + success: success + }); + }; + platform.showView = function(views, success, error) { + if (!success) success = function(){}; + if (!error) error = function() {console.error(arguments);}; + platform.chan.call({method: "platform.showView", + params: views, + error: error, + success: success + }); + }; + platform.askHint = function(platformToken, success, error) { + if (!success) success = function(){}; + if (!error) error = function() {console.error(arguments);}; + platform.chan.call({method: "platform.askHint", + params: platformToken, + error: error, + success: success + }); + }; + platform.updateHeight = function(height, success, error) { + // Legacy + platform.updateDisplay({height: height}, success, error); + }; + platform.updateDisplay = function(data, success, error) { + if (!success) success = function(){}; + if (!error) error = function() {console.error(arguments);}; + platform.chan.call({method: "platform.updateDisplay", + params: data, + error: error, + success: success + }); + }; + platform.openUrl = function(url, success, error) { + if (!success) success = function(){}; + if (!error) error = function() {console.error(arguments);}; + platform.chan.call({method: "platform.openUrl", + params: url, + error: error, + success: success + }); + }; +} + +window.platform = platform; + +}()); + +(function() { + +'use strict'; + +/* + * Implementation of the displayHelper API. + * + * Copyright (c) 2012 Association France-ioi, MIT License http://opensource.org/licenses/MIT + * + * See documentation for more information. + */ + +window.displayHelper = { + loaded: false, + timeLoaded: 0, + checkAnswerInterval: null, + prevAnswer: '', + readOnly: false, + savedAnswer: '', + submittedAnswer: '', + submittedScore: 0, + hasAnswerChanged: true, + taskSelector: '#task', + hideValidateButton: false, + hideRestartButton: false, + confirmRestartAll: true, + showScore: false, + refreshMessages: true, + stoppedShowingResult: false, + previousMessages: {}, + popupMessageShown: false, + + thresholds: {}, + // Legacy settings for old tasks ; new ones are expected to use thresholds + thresholdEasy: 60, + thresholdMedium: 120, + + timeoutMinutes: 5, + avatarType: "beaver", + bUseFullWidth: false, + + hasLevels: false, + pointsAsStars: true, // TODO: false as default + unlockedLevels: 4, + neverHadHard: false, + showMultiversionNotice: false, + taskLevel: '', + + // Defaults + levels: ['easy', 'medium', 'hard'], + levelsIdx: { easy: 0, medium: 1, hard: 2 }, + maxStars: 4, + popupMessageHandler: null, + + formatTranslation: function(s, args) { return s.replace(/\{([^}]+)\}/g, function(_, match){ return args[match]; }); }, + + languageStrings: { + fr: { + version: "Version", + levelVersionName_easy: "version facile", + levelVersionName_medium: "version moyenne", + levelVersionName_hard: "version difficile", + levelVersionName_easy_stars: "version à 2 étoiles", + levelVersionName_medium_stars: "version à 3 étoiles", + levelVersionName_hard_stars: "version à 4 étoiles", + levelName_easy: "Facile", + levelName_medium: "Moyen", + levelName_hard: "Difficile", + warningTimeout: "

Attention, cela fait plus de {0} minutes que vous êtes sur cette question.

Vous devriez sans doute changer de sujet, en cliquant sur le bouton tout en haut à droite.

", + alright: "D'accord", + moveOn: "Passer à la suite", + solvedMoveOn: "Vous avez entièrement résolu cette question, passez à une autre question.", + confirmRestart: "Êtes-vous certain de vouloir recommencer cette version ?", + yes: "Oui", + no: "Non", + tryHardLevel: "Nous vous proposons d'essayer la version 4 étoiles.", + tryMediumLevel: "Nous vous proposons d'essayer la version 3 étoiles.", + tryNextTask: "Nous vous proposons de passer au sujet suivant. S'il vous reste du temps, vous reviendrez plus tard essayer la version suivante.", + yourScoreIsNow: "Votre score est maintenant :", + worseScoreStays: "C'est moins bien qu'avant ; votre score reste :", + scoreStays: "Votre score reste le même :", + score: "Score :", + noPointsForLevel: "Vous n'avez pas encore de points sur cette version.", + outOf: " sur ", + tryToDoBetterOrChangeTask: "Essayez de faire encore mieux, ou passez à une autre question.", + tryToDoBetterOrMoveToNextLevel: "Essayez de faire encore mieux, ou passez à une version plus difficile.", + bestPossibleScoreCongrats: "C'est le meilleur score possible sur ce sujet ; félicitations !", + forMorePointsMoveToNextLevel: "Pour obtenir plus de points, passez à une version plus difficile.", + youDidBetterBefore: "Vous aviez fait mieux avant.", + scoreStays2: "Votre score reste le même.", + reloadBestAnswer: "Rechargez votre meilleure réponse.", + noAnswerSaved: "Aucune réponse actuellement enregistrée pour cette version.", + validate: "Valider", + restart: "Recommencer", + harderLevelSolved: "Attention : vous avez déjà résolu une version plus difficile. Vous ne pourrez pas gagner de points supplémentaires avec cette version.", + showLevelAnyway: "Voir quand même", + scoreObtained: "Score obtenu :", + hardVersionTakesTime: "Résoudre une {0} peut vous prendre beaucoup de temps ; songez en priorité à répondre aux questions en {1} pour gagner des points rapidement.", + illKeepThatInMind: "J'y prendrai garde", + harderLevelAvailable: "Notez que pour cette question, vous pouvez résoudre directement une version plus difficile que celle-ci.", + lockedLevel: "Cette version est verrouillée. Résolvez la précédente pour l'afficher !", + gradeThisAnswer: "Évaluer cette réponse", + + // The following messages are used for tasks with no feedback + saveAnswer: "Enregistrer votre réponse", + answerSavedModifyOrCancelIt: "Votre réponse a été enregistrée. Vous pouvez la modifier, ou bien {0} et recommencer.", + cancelIt: "l'annuler", + warningDifferentAnswerSaved: "Attention : une réponse différente est enregistrée.", + youMay: "Vous pouvez {0}.", + reloadIt: "la recharger", + saveThisNewAnswer: "Enregistrer cette nouvelle réponse", + + gradingInProgress: "Évaluation en cours", + scoreIs: "Votre score est de :", + point: "point", + points: "points", + // The following messages are used when viewing tasks after contest is over + contestOverScoreStays: "Le concours étant terminé, votre réponse n'est pas enregistrée et votre score reste de :", + scoreWouldBecome: "Avec cette réponse, votre score serait :", + reloadValidAnswer: "Rechargez la réponse validée.", + contestOverAnswerNotSaved: "Le concours est terminé : votre réponse n'est pas enregistrée.", + scoreWouldStay: "Avec cette réponse, votre score resterait le même :", + answerNotSavedContestOver: "Le concours étant terminé, votre réponse n'a pas été enregistrée. Vous pouvez {0}.", + reloadSubmittedAnswer: "recharger la réponse que vous avez soumise", + difficultyWarning: "Attention : résoudre cette version prend du temps.
Vous pourrez résoudre bien plus rapidement les versions 2 et 3 étoiles d'autres sujets.", + enemyWarning: "Attention : dans ce défi, l'ordinateur vous empêchera de trouver la solution par hasard." + }, + en: { + version: "Version", + levelVersionName_easy: "easy version", + levelVersionName_medium: "medium version", + levelVersionName_hard: "hard version", + levelVersionName_easy_stars: "2 stars version", + levelVersionName_medium_stars: "3 stars version", + levelVersionName_hard_stars: "4 stars version", + levelName_easy: "Easy", + levelName_medium: "Medium", + levelName_hard: "Hard", + warningTimeout: "

Warning, it has been more than {0} minutes since you started working on this task.

You should probably switch to a diffrent task, by clicking on the button on the top-right.

", + alright: "Alright", + moveOn: "Move on", + solvedMoveOn: "You solved this task completely, move on to another task.", + confirmRestart: "Are you sure you want to restart this version?", + yes: "Yes", + no: "No", + tryHardLevel: "We suggest you try the 4 stars version.", + tryMediumLevel: "We suggest you try the 3 stars version.", + tryNextTask: "We suggest you try the next task. If you still have time, come back later and try the next version of this task.", + yourScoreIsNow: "Your score is now:", + worseScoreStays: "This is not as good as before. Your score stays:", + scoreStays: "Your score stays the same:", + score: "Score:", + noPointsForLevel: "You have not received any points yet on this version.", + outOf: " out of ", + tryToDoBetterOrChangeTask: "Try to do even better, or move on to another task.", + tryToDoBetterOrMoveToNextLevel: "Try to do even better, or move on to a more difficult version.", + bestPossibleScoreCongrats: "This is the best possible score on this task, congratulations!", + forMorePointsMoveToNextLevel: "To obtain more points, move on to a harder version of this task.", + youDidBetterBefore: "You did better before.", + scoreStays2: "Your score stays the same.", + reloadBestAnswer: "Reload your best answer.", + noAnswerSaved: "No answer saved so far for this version.", + validate: "Validate", + restart: "Restart", + harderLevelSolved: "Warning: you already solved a harder version of this task. You won't be able to obtain extra points with this version.", + showLevelAnyway: "Show it to me anyways.", + scoreObtained: "Obtained score:", + hardVersionTakesTime: "Solving a {0} can take a lot of time. Consider working on the {1} to gain points quickly.", + illKeepThatInMind: "I'll consider it.", + harderLevelAvailable: "Note that for this task, you may try to directly work on a harder version than this one.", + lockedLevel: "This version is locked. Solve the previous version to display it!", + gradeThisAnswer: "Grade this answer", + + // The following messages are used for tasks with no feedback + saveAnswer: "Save this answer", + answerSavedModifyOrCancelIt: "Your answer has been saved. You can modify it, or {0} and restart.", + cancelIt: "cancel it", + warningDifferentAnswerSaved: "Warning: a different answer was saved before.", + youMay: "You may {0}.", + reloadIt: "reload it", + saveThisNewAnswer: "Save this new answer", + + gradingInProgress: "Grading in process", + scoreIs: "Your score is:", + point: "point", + points: "points", + // The following messages are used when viewing tasks after contest is over + contestOverScoreStays: "The contest being over, your new answer was not saved and your score stays:", + scoreWouldBecome: "With this answer, your score would be:", + reloadValidAnswer: "Reload the validated answer.", + contestOverAnswerNotSaved: "The contest being over, your new answer was not saved.", + scoreWouldStay: "With this answer, your score would stay the same:", + answerNotSavedContestOver: "The contest being over, your answer was not saved. You may {0}.", + reloadSubmittedAnswer: "reload the validated answer", + difficultyWarning: "Warning: solving this version takes time.
You would solve the 2 or 3 star versions of other tasks more quickly.", + enemyWarning: "Warning: in this challenge, the computer will make sure you don't find the solution by chance." + }, + sv: { + version: "Version", + levelVersionName_easy: "lätt version", + levelVersionName_medium: "medelsvår version", + levelVersionName_hard: "svår version", + levelVersionName_easy_stars: "2-stjärnig version", + levelVersionName_medium_stars: "3-stjärnig version", + levelVersionName_hard_stars: "4-stjärnig version", + levelName_easy: "Lätt", + levelName_medium: "Medelsvår", + levelName_hard: "Svår", + warningTimeout: "

Varning: det har gått mer än {0} minuter sedan du började med den här uppgiften.

Du borde kanske byta till en annan uppgift, genom att klicka på knappen uppe till höger.

", + alright: "Okej", + moveOn: "Gå vidare", + solvedMoveOn: "Du löste uppgiften helt! Gå nu vidare till en annan uppgift.", + confirmRestart: "Är du säker på att du vill börja om med den här versionen?", + yes: "Ja", + no: "Nej", + tryHardLevel: "Vi föreslår att du provar den 4-stjärniga versionen.", + tryMediumLevel: "Vi föreslår att du provar den 3-stjärniga versionen.", + tryNextTask: "Vi föreslår att du provar nästa uppgift. Kom tillbaka senare och prova en svårare version av den här uppgiften.", + yourScoreIsNow: "Din poäng är nu:", + worseScoreStays: "Det är inte lika bra som tidigare. Poängen fortfarande:", + scoreStays: "Din poäng är fortfarande:", + score: "Poäng:", + noPointsForLevel: "Du har inte fått några poäng än på den här versionen.", + outOf: " utav ", + tryToDoBetterOrChangeTask: "Försök klara det ännu bättre, eller gå vidare till en annan uppgift.", + tryToDoBetterOrMoveToNextLevel: "Försök klara det ännu bättre, eller gå vidare till en svårare version.", + bestPossibleScoreCongrats: "Detta är högsta möjliga poäng på den här uppgiften. Grattis!", + forMorePointsMoveToNextLevel: "För att få mer poäng, gå vidare till en svårare version av den här uppgiften.", + youDidBetterBefore: "Det gick bättre tidigare.", + scoreStays2: "Din poäng ändras inte.", + reloadBestAnswer: "Ladda in ditt bästa svar.", + noAnswerSaved: "No answer saved so far for this version.", + validate: "Kontrollera svaret", + restart: "Börja om", + harderLevelSolved: "Varning: du har redan löst en svårare version av den här uppgiften. Du kommer inte kunna få mer poäng med den här versionen.", + showLevelAnyway: "Visa den ändå.", + scoreObtained: "Uppnådd poäng:", + hardVersionTakesTime: "Att lösa en {0} kan ta lång tid. Fundera på om du ska jobba med en {1} för att tjäna poäng snabbare.", + illKeepThatInMind: "Jag ska tänka på det.", + harderLevelAvailable: "Notera att på den här uppgiften kan du direkt försöka med en svårare version än denna.", + lockedLevel: "Den här versionen är låst. Lös den föregående nivån för att visa den!", + gradeThisAnswer: "Bedöm svaret", + + // The following messages are used for tasks with no feedback + saveAnswer: "Spara svaret", + answerSavedModifyOrCancelIt: "Ditt svar har sparats. Du kan ändra det, eller {0} och börja om.", + cancelIt: "avbryta det", + warningDifferentAnswerSaved: "Varning: ett annat svar finns redan sparat.", + youMay: "Du kan {0}.", + reloadIt: "ladda in det på nytt", + saveThisNewAnswer: "Spara det här nya svaret", + + gradingInProgress: "Rättning pågår", + scoreIs: "Din poäng är:", + point: "poäng", + points: "poäng", + // The following messages are used when viewing tasks after contest is over + contestOverScoreStays: "Eftersom tävlingen är över sparas inte ditt svar och din poäng ändras inte.", + scoreWouldBecome: "Med det här svaret, skulle din poäng vara:", + reloadValidAnswer: "Ladda in det kontrollerade svaret.", + contestOverAnswerNotSaved: "Eftersom tävlingen är över sparas inte ditt svar.", + scoreWouldStay: "Med det här svaret, skulle din poäng inte ändras:", + answerNotSavedContestOver: "Eftersom tävlingen är över sparas inte ditt svar. Du kan {0}.", + reloadSubmittedAnswer: "ladda in det kontrollerade svaret på nytt", + difficultyWarning: "Varning: att lösa den här versionen tar lång tid.
Det kan gå snabbare att lösa 2- eller 3-stjärniga versioner av andra uppgifter.", + enemyWarning: "Varning: i den här utmaningen kommer datorn se till att du inte hittar lösningen av en slump." + }, + fi: { + version: "Versio", + levelVersionName_easy: "helppo versio", + levelVersionName_medium: "hieman vaikeampi versio", + levelVersionName_hard: "vaikea versio", + levelVersionName_easy_stars: "2 tähden versio", + levelVersionName_medium_stars: "3 tähden versio", + levelVersionName_hard_stars: "4 tähden versio", + levelName_easy: "Helppo", + levelName_medium: "Hieman vaikeampi", + levelName_hard: "Vaikea", + warningTimeout: "

Varoitus: on kulunut jo yli {0} minuuttia siitä, kun aloit tekemään tätä tehtävää.

Sinun mahdollisesti kannattaisi siirtyä yrittämään jotain toista tehtävää, klikkaamalla oikean yläkulman nappia.

", + alright: "Ok", + moveOn: "Siirry eteenpäin", + solvedMoveOn: "Ratkaisit tämän tehtävän kokonaan, siirry nyt seuraavaan tehtävään.", + confirmRestart: "Oletko varma, että haluat aloittaa tämän version alusta?", + yes: "Kyllä", + no: "Ei", + tryHardLevel: "Ehdotamme, että kokeilet 4 tähden versiota.", + tryMediumLevel: "Ehdotamme, että kokeilet 3 tähden versiota.", + tryNextTask: "Ehdotamme, että kokeilet seuraavaa tehtävää. Jos sinulle jää vielä aikaa, voit myöhemmin palata takaisin tämän tehtävän pariin.", + yourScoreIsNow: "Pisteesi nyt:", + worseScoreStays: "Tämä on aiempaa alhaisempi. Pistemääränäsi säilyy:", + scoreStays: "Pistemääränäsi sailyy:", + score: "Pisteet:", + noPointsForLevel: "Et ole vielä saanut pisteitä tästä versiosta.", + outOf: " / ", + tryToDoBetterOrChangeTask: "Yritä saada vielä paremmat pisteet, tai siirry toiseen tehtävään.", + tryToDoBetterOrMoveToNextLevel: "Yritä saada vielä paremmat pisteet, tai siirry saman tehtävän vaikeampaan versioon.", + bestPossibleScoreCongrats: "Onnittelut: saavutit tehtävän maksimipistemäärän!", + forMorePointsMoveToNextLevel: "Siirry tehtävän vaikeampaan versioon saadaksesi enemmän pisteitä.", + youDidBetterBefore: "Sait aiemmin enemmän pisteitä.", + scoreStays2: "Pistemääräsi säilyy samana.", + reloadBestAnswer: "Palauta paras aiempi vastauksesi.", + noAnswerSaved: "No answer saved so far for this version.", + validate: "Tarkista vastaus", + restart: "Aloita alusta", + harderLevelSolved: "Varoitus: olet jo ratkaissut vaikeamman version tästä tehtävästä. Tämän helpomman version ratkaiseminen ei voi korottaa pistemäärääsi.", + showLevelAnyway: "Siirry joka tapauksessa.", + scoreObtained: "Saatu pistemäärä:", + hardVersionTakesTime: "{0} voi viedä runsaasti aikaa. {1} voi tuottaa pisteitä nopeammin.", + illKeepThatInMind: "Huomioin tämän.", + harderLevelAvailable: "Huomaa, että voit myös suoraan koittaa ratkaista vaikeampaa versiota tästä tehtävästä.", + lockedLevel: "Tämä versio on vielä lukittu: ratkaise ensin helpompi versio!", + gradeThisAnswer: "Pisteytä tämä vastaus", + + // The following messages are used for tasks with no feedback + saveAnswer: "Tallenna vastaus", + answerSavedModifyOrCancelIt: "Vastauksesi on tallennettu. Voit muokata sitä, tai {0} ja aloittaa uudelleen alusta.", + cancelIt: "perua sen", + warningDifferentAnswerSaved: "Varoitus: toisenlainen vastaus on tallennettu jo aiemmin.", + youMay: "Voit {0}.", + reloadIt: "ladata sen uudelleen", + saveThisNewAnswer: "tallentaa tämän uuden vastauksen", + + gradingInProgress: "Pisteytystä suoritetaan", + scoreIs: "Pistemääräsi on:", + point: "piste", + points: "pisteet", + // The following messages are used when viewing tasks after contest is over + contestOverScoreStays: "Kilpailu on jo päättynyt, joten uutta vastaustasi ei enää tallennettu ja pistemääränäsi säilyy:", + scoreWouldBecome: "Jos tämäkin vastaus huomioitaisiin, pistemääräsi olisi:", + reloadValidAnswer: "Palauta aiemmin hyväksytty vastaus.", + contestOverAnswerNotSaved: "Kilpailu on jo päättynyt, joten uutta vastaustasi ei enää tallennettu.", + scoreWouldStay: "Jos tämäkin vastaus huomioitaisiin, pistemääräsi olisi yhä:", + answerNotSavedContestOver: "Kilpailu on jo päättynyt, joten uutta vastaustasi ei enää tallennettu. Voit {0}.", + reloadSubmittedAnswer: "palauttaa aiemmin lähetetyn vastauksen", + difficultyWarning: "Varoitus: tämän version ratkaiseminen vie aikaa.
Saat luultavasti ratkaistua 2 tai 3 tähden version nopeammin.", + enemyWarning: "Varoitus: tässä tehtävässä tietokone pyrkii varmistamaan, ettet voi löytää ratkaisua sattumalta." + }, + de: { + version: "Version", + levelVersionName_easy: "leichte Version", + levelVersionName_medium: "mittlere Version", + levelVersionName_hard: "schwere Version", + levelVersionName_easy_stars: "2-Sterne-Version", + levelVersionName_medium_stars: "3-Sterne-Version", + levelVersionName_hard_stars: "4-Sterne-Version", + levelName_easy: "Leicht", + levelName_medium: "Mittel", + levelName_hard: "Schwer", + warningTimeout: "

Achtung, du bist schon seit {0} Minuten bei dieser Frage.

Du solltest jetzt zu einer anderen Aufgabe wechseln.

", + alright: "OK", + moveOn: "Fortfahren", + solvedMoveOn: "Du hast diese Frage bereits vollständig gelöst. Wähle eine andere Frage zum Bearbeiten aus.", + confirmRestart: "Bist du sicher, dass du diese Version neustarten möchtest?", + yes: "Ja", + no: "Nein", + tryHardLevel: "Wir schlagen dir vor, die 4-Sterne-Version zu bearbeiten.", + tryMediumLevel: "Wir schlagen dir vor, die 3-Sterne-Version zu bearbeiten", + tryNextTask: "Wir schlagen dir vor, die nächste Aufgabe zu bearbeiten. Wenn du am Ende noch Zeit hast, kannst du hierher zurückkehren und die schwerere Version bearbeiten.", + yourScoreIsNow: "Dein Punktestand ist jetzt:", + worseScoreStays: "Das ist weniger als vorher; dein Punktestand bleibt:", + scoreStays: "Dein Punktestand bleibt gleich:", + score: "Punktestand:", + noPointsForLevel: "Du hast noch keine Punkte für diese Version erhalten.", + outOf: " von ", + tryToDoBetterOrChangeTask: "Versuche, dich zu verbessern oder wähle eine andere Frage.", + tryToDoBetterOrMoveToNextLevel: "Versuche, dich zu verbessern oder wähle schwierigere Version.", + bestPossibleScoreCongrats: "Das ist die bestmögliche Punktzahl für diese Aufgabe. Glückwunsch!", + forMorePointsMoveToNextLevel: "Wähle eine schwerere Version aus, um noch mehr Punkte zu bekommen.", + youDidBetterBefore: "Du hast dich verbessern.", + scoreStays2: "Dein Punktestand bleibt gleich.", + reloadBestAnswer: "Deine beste Antwort wieder laden.", + noAnswerSaved: "Bisher noch keine Antwort für diese Version gespeichert.", + validate: "Erstellen", + restart: "Neustarten", + harderLevelSolved: "Achtung: Du hast schon eine schwerere Version gelöst. Du kannst mit dieser Version keine zusätzlichen Punkte bekommen.", + showLevelAnyway: "Trotzdem anzeigen", + scoreObtained: "Erhaltene Punkte:", + hardVersionTakesTime: "Eine {0} zu lösen kann dich viel Zeit kosten; Denke zunächst daran, die Fragen in {1} zu beantworten, um schnell Punkte zu bekommen.", + illKeepThatInMind: "Ich hab das verstanden", + harderLevelAvailable: "Beachte, dass du bei dieser Frage direkt zu einer schwereren Version gehen kannst.", + lockedLevel: "Diese Version ist noch gesperrt. Löse die vorherige um diese freizuschalten.", + gradeThisAnswer: "Diese Antwort auswerten", + + // The following messages are used for tasks with no feedback + saveAnswer: "Antwort speichern", + answerSavedModifyOrCancelIt: "Deine Antwort wurde eingereicht. Du kannst sie noch bearbeiten, oder {0} und neu beginnen.", + cancelIt: "Abbrechen", + warningDifferentAnswerSaved: "Achtung: Eine andere Antwort ist bereits gespeichert!", + youMay: "Du kannst {0}.", + reloadIt: "Neu laden", + saveThisNewAnswer: "Diese Antwort speichern", + + gradingInProgress: "Das Ergebnis wird ausgewertet …", + scoreIs: "Dein Punktestand beträgt:", + point: "Punkt", + points: "Punkte", + // The following messages are used when viewing tasks after contest is over + contestOverScoreStays: "Der Contest ist vorbei, deine Antwort wurde nicht eingereicht und deine Punktestand bleibt:", + scoreWouldBecome: "Mit dieser Antwort wäre dein Punktestand:", + reloadValidAnswer: "Die gültige Antwort neu laden.", + contestOverAnswerNotSaved: "Der Contest ist vorbei, deine Antwort wurde nicht eingereicht.", + scoreWouldStay: "Mit dieser Antwort bliebe dein Punktestand gleich:", + answerNotSavedContestOver: "Der Contest ist vorbei, deine Antwort wurde nicht eingereicht. Du kannst {0}.", + reloadSubmittedAnswer: "Lade die Lösung, die du eingereicht hast", + difficultyWarning: "Achtung: diese Version zu lösen kann einige Zeit in Anspruch nehmen.
Die 2- und 3-Stern Version von anderen Aufgaben lassen sich schneller lösen.", + enemyWarning: "Attention : dans ce défi, l'ordinateur vous empêchera de trouver la solution par hasard." + }, + ar: { + version: "المستوى", + levelVersionName_easy: "المستوى السهل", + levelVersionName_medium: "المستوى المتوسط", + levelVersionName_hard: "المستوى الصعب", + levelVersionName_easy_stars: "المستوى الأول", + levelVersionName_medium_stars: "المستوى الثاني", + levelVersionName_hard_stars: "المستوى الثالث", + levelName_easy: "سهل", + levelName_medium: "متوسط", + levelName_hard: "صعب", + warningTimeout: "

لقد مر وقت طويل منذ أن بدأت في هذه المسألة, من الأفضل أن تبدأ في مسألة أخرى حتى لا يضيع الوقت

", + alright: "حسناً", + moveOn: "استمر", + solvedMoveOn: "لقد أجبت على هذا السؤال بالكامل. ابدأ في سؤال أخر", + confirmRestart: "هل ترغب في بدء هذا سؤال من جديد؟", + yes: "نعم", + no: "لا", + tryHardLevel: "نقترح أن تبدأ في المستوى الثالث للسؤال", + tryMediumLevel: "نقترح أن تبدأ في المستوى الثاني للسؤال", + tryNextTask: "نقترح أن تبدأ في المسألة التالية, وإذا تبقى عندك وقت يمكنك حل المستوى الأصعب في هذه المسألة لاحقاً", + yourScoreIsNow: "مجموع نقاطك:", + worseScoreStays: "هذا ليس جيداً. ما زالت نقاطك:", + scoreStays: "نقاطك ما زالت كما هي:", + score: "النقاط", + noPointsForLevel: "لم تحقق أي نقاط في هذا المستوى", + outOf: "من", + tryToDoBetterOrChangeTask: "حاول في مسألة أخرى", + tryToDoBetterOrMoveToNextLevel: "حاول في المستوى الأصعب", + bestPossibleScoreCongrats: "مبروك ... لقد حصلت على أعلى درجة في هذا السؤال", + forMorePointsMoveToNextLevel: "للحصول على المزيد من النقاط جاوب على المستوى الأصعب", + youDidBetterBefore: "لقد قمت بها أفضل من هذا في وقت سابق", + scoreStays2: "ما زالت نقاطك كما هي", + reloadBestAnswer: "اعد تحميل إجابتك الأفضل", + noAnswerSaved: "No answer saved so far for this version.", + validate: "تحقق", + restart: "ابدأ من جديد", + harderLevelSolved: "لقد قمت بحل المستوى الأصعب في هذا السؤال, لن تتمكن من الحصول على درجات أعلى في هذا السؤال", + showLevelAnyway: "اظهرها لي على أي حال", + scoreObtained: "النقاط المكتسبة:", + hardVersionTakesTime: "Solving a {0} can take a lot of time. Consider working on the {1} to gain points quickly.", + illKeepThatInMind: "I'll consider it.", + harderLevelAvailable: "تنبيه: يمكنك حل المستوى الأصعب في هذه المسألة مباشرة", + lockedLevel: "هذا المستوى مغلق. يجب عليك حل المستوى السابق أولا", + gradeThisAnswer: "قيم هذه الإجابة", + + // The following messages are used for tasks with no feedback + saveAnswer: "احفظ هذه الإجابة", + answerSavedModifyOrCancelIt: "تم حفظ إجابتك, يمكنك تعديلها أو بدأها من جديد", + cancelIt: "احذفها", + warningDifferentAnswerSaved: "تنبيه: يوجد اجابة أخرى محفوظة سابقاً", + youMay: "You may {0}.", + reloadIt: "حملها من جديد", + saveThisNewAnswer: "احفظ الإجابة الجديدة", + + gradingInProgress: "نقوم بالتقييم", + scoreIs: "مجموع نقاطك:", + point: "نقطة", + points: "نقاط", + // The following messages are used when viewing tasks after contest is over + contestOverScoreStays: "المسابقة انتهت. إجابتك الجديدة لم تحفظ ومجموع نقاطك ما زال:", + scoreWouldBecome: " مع تلك الإجابة، مجموع نقاطك أصبح:", + reloadValidAnswer: "اعد تحميل الإجابة المحققة", + contestOverAnswerNotSaved: "المسابقة إنتهت ولم يتم حفظ إجاباتك الجديدة", + scoreWouldStay: "بهذه الإجابة سوف يظل مجموع نقاطك كما هو", + answerNotSavedContestOver: "The contest being over, your answer was not saved. You may {0}.", + reloadSubmittedAnswer: "اعد تحميل الإجابة المحققة", + difficultyWarning: "تنبيه: حل هذه النسخة سوف يستغرق وقت كثير. الإفضل أن تبدأ في حل مسائل أخرى", + enemyWarning: "تحذير: في هذه المسألة سيمنعك الكمبيوتر من إيجاد الحل عن طريق الصدفة. فكر جيداً" + }, + es: { + version: "Versión", + levelVersionName_easy: "versión fácil", + levelVersionName_medium: "versión moderada", + levelVersionName_hard: "versión difícil", + levelVersionName_easy_stars: "versión de 2 estrellas", + levelVersionName_medium_stars: "versión de 3 estrellas", + levelVersionName_hard_stars: "versión de 4 estrellas", + levelName_easy: "Fácil", + levelName_medium: "Moderado", + levelName_hard: "Difícil", + warningTimeout: "

Atención, ya lleva {0} minutos en esta pregunta.

Le recomendamos cambiar de tema haciendo click sobre el botón de arriba a la derecha.

", + alright: "De acuerdo", + moveOn: "Pasar a la siguiente", + solvedMoveOn: "Ha resuelto completamente esta pregunta. Pase a otra pregunta.", + confirmRestart: "¿Está seguro que desea volver a iniciar esta versión?", + yes: "Sí", + no: "No", + tryHardLevel: "Le recomendamos intentar la versión de 4 estrellas.", + tryMediumLevel: "Le recomendamos intentar la versión de 3 estrellas.", + tryNextTask: "Nous vous proposons de passer au sujet suivant. S'il vous reste du temps, vous reviendrez plus tard essayer la version suivante.", + yourScoreIsNow: "Su puntuación es ahora :", + worseScoreStays: "Esto no está tan bien como antes; su puntuación se mantiene en :", + scoreStays: "Su puntuación se mantiene igual :", + score: "Puntuación :", + noPointsForLevel: "Aún no ha recibido puntos en esta versión.", + outOf: " de ", + tryToDoBetterOrChangeTask: "Intente nuevamente para obtener una mejor puntuación, o pase a la siguiente pregunta.", + tryToDoBetterOrMoveToNextLevel: "Intente nuevamente para obtener una mejor puntuación, o pase una versión más difícil.", + bestPossibleScoreCongrats: "Esta es la mejor puntuación posible en este problema, ¡felicitaciones!", + forMorePointsMoveToNextLevel: "Para obtener más puntos, pase a una versión más difícil.", + youDidBetterBefore: "Realizó un mejor trabajo antes.", + scoreStays2: "Su puntuación se mantiene igual.", + reloadBestAnswer: "Recargar su mejor respuesta.", + noAnswerSaved: "Aún no hay respuesta guardada para esta versión.", + validate: "Validar", + restart: "Reiniciar", + harderLevelSolved: "Atención: ya ha resuelto una versión más difícil. No puede ganar puntos extra con esta versión.", + showLevelAnyway: "Mostrar el nivel de igual manera", + scoreObtained: "Puntuación obtenida:", + hardVersionTakesTime: "Resolver una {0} puede tomar mucho tiempo; le aconsejamos priorizar resolver las preguntas en {1} para ganar puntos rápidamente.", + illKeepThatInMind: "Lo tendré en mente", + harderLevelAvailable: "Note que para esta pregunta, puede resolver directamente una versión más difícil que esta.", + lockedLevel: "Esta versión está bloqueada. Resuelva la version anterior para verla.", + gradeThisAnswer: "Evaluar esta respuesta", + + // The following messages are used for tasks with no feedback + saveAnswer: "Guardar su respuesta", + answerSavedModifyOrCancelIt: "Su respuesta fue guardada. Puede modificarla, o bien {0} y reiniciar.", + cancelIt: "cancelarla", + warningDifferentAnswerSaved: "Atención: una respuesta diferente ha sido guardada.", + youMay: "Usted puede {0}.", + reloadIt: "recargarla", + saveThisNewAnswer: "Guardar esta nueva respuesta", + + gradingInProgress: "Evaluación en curso", + scoreIs: "Su puntuación es:", + point: "punto", + points: "puntos", + // The following messages are used when viewing tasks after contest is over + contestOverScoreStays: "El concurso está terminando, su respuesta no ha sido guardada y su puntuación se mantiene en:", + scoreWouldBecome: "Con esta respuesta, su puntuación será :", + reloadValidAnswer: "Volver a cargar la respuesta válida.", + contestOverAnswerNotSaved: "El concurso ha terminado: su respuesta no fue guardada.", + scoreWouldStay: "Con esta respuesta, su puntuación será la misma:", + answerNotSavedContestOver: "El concurso está terminando y su respuesta no ha sido guardada. Usted puede {0}.", + reloadSubmittedAnswer: "recargar la respuesta que ha enviado", + difficultyWarning: "Advertencia: resolver esta versión toma tiempo.
Usted puede resolver más rápidamente las versiones de 2 y 3 estrellas de otros problemas.", + enemyWarning: "Advertencia: en este desafío, la computadora se asegurará que no encuentre la respuesta por casualidad." + }, + sl: { + version: "Stopnja", + levelVersionName_easy: "enostavna stopnja", + levelVersionName_medium: "srednja stopnja", + levelVersionName_hard: "težka stopnja", + levelVersionName_easy_stars: "stopnja 2 zvezdici", + levelVersionName_medium_stars: "stopnja 3 zvezdice", + levelVersionName_hard_stars: "stopnja 4 zvezdice", + levelName_easy: "Enostavno", + levelName_medium: "Srednje", + levelName_hard: "Težko", + warningTimeout: "

Opozorilo: Odkar rešuješ to nalogo, je minilo že več kot {0} minut.

Najbolje, da izbereš drugo nalogo, tako da klikneš gumb v zgornjem desnem kotu.

", + alright: "V redu", + moveOn: "Nadaljuj", + solvedMoveOn: "Ta naloga je dokončana, nadaljuj z naslednjo nalogo.", + confirmRestart: "Ali res želiš znova začeti to stopnjo?", + yes: "Da", + no: "Ne", + tryHardLevel: "Predlagamo, da poizkusiš stopnjo s 4 zvezdicami.", + tryMediumLevel: "Predlagamo, da poizkusiš stopnjo s 3 zvezdicami.", + tryNextTask: "Prdlagamo, da poizkusiš naslednjo nalogo. Če bo ostalo dovolj časa, se vrni in poizkusi naslednjo stopnjo te naloge.", + yourScoreIsNow: "Tvoj rezultat je:", + worseScoreStays: "Rešitev ni tako dobra, kot prejšnja. Tvoj rezultat ostaja:", + scoreStays: "Tvoj rezultat ostaja enak:", + score: "Rezultat:", + noPointsForLevel: "Na tej stopnji nisi dobil(-a) še nobene točke.", + outOf: " od ", + tryToDoBetterOrChangeTask: "Poskusi nalogo rešiti še bolje ali se premakni na naslednjo nalogo.", + tryToDoBetterOrMoveToNextLevel: "Poskusi nalogo rešiti še bolje ali se premakni na težjo stopnjo.", + bestPossibleScoreCongrats: "Čestitamo, to je najboljši možni rezultat te naloge!", + forMorePointsMoveToNextLevel: "Če želiš dobiti še več točk, se premakni na težjo stopnjo te naloge.", + youDidBetterBefore: "Rešitev je boljša od prejšnje.", + scoreStays2: "Tvoj rezultat ostaja enak.", + reloadBestAnswer: "Znova naloži najboljšo rešitev.", + noAnswerSaved: "No answer saved so far for this version.", + validate: "Preveri", + restart: "Začni znova", + harderLevelSolved: "Opozorilo: Rešil(-a) si že težjo stopnjo te naloge. S to stopnjo ne boš dobil(-a) dodatnih točk.", + showLevelAnyway: "Vseeno mi pokaži stopnjo.", + scoreObtained: "Dobljeni rezultat:", + hardVersionTakesTime: "Reševanje {0} lahko traja veliko časa. Razmisli o reševanju {1}, da boš hitro dobil(-a) točke.", + illKeepThatInMind: "Razmislil(-a) bom.", + harderLevelAvailable: "Ne pozabi, da lahko to nalogo rešuješ na težji stopnji kot je ta.", + lockedLevel: "Ta stopnja je zaklenjena! Za pikaz moraš najprej rešiti prejšnjo stopnjo!", + gradeThisAnswer: "Oceni ta odgovor", + + // The following messages are used for tasks with no feedback + saveAnswer: "Shrani ta odgovor", + answerSavedModifyOrCancelIt: "Tvoj odgovor je bil shranjen. Lahko ga spremeniš ali {0} in začneš znova.", + cancelIt: "prekličeš", + warningDifferentAnswerSaved: "Opozorilo: Prej je bil shranjen drugačen odgovor.", + youMay: "Lahko ga {0}.", + reloadIt: "naložiš znova", + saveThisNewAnswer: "Shrani ta nov odgovor", + + gradingInProgress: "Ocenjevanje poteka", + scoreIs: "Tvoj rezultat je:", + point: "točka", + points: "točk", + // The following messages are used when viewing tasks after contest is over + contestOverScoreStays: "Ker je tekmovanja konec, tvoj novi odgovor ni bil shranjen in rezultat bo ostal:", + scoreWouldBecome: "S to rešitvijo bi bil tvoj rezultat:", + reloadValidAnswer: "Znova naloži preverjeno rešitev.", + contestOverAnswerNotSaved: "Ker je tekmovanja konec, tvoj novi odgovor ni bil shranjen.", + scoreWouldStay: "S to rešitvijo bi tvoj rezultat ostal enak:", + answerNotSavedContestOver: "Ker je tekmovanja konec, tvoj novi odgovor ni bil shranjen. Lahko {0}.", + reloadSubmittedAnswer: "znova naložiš preverjeno rešitev", + difficultyWarning: "Opozorilo: Reševanje te stopnje lahko traja veliko časa.
Hitreje lahko rešiš stopnje z 2 ali s 3 zvezdicami drugih nalog.", + enemyWarning: "Opozorilo: Pri tej nalogi ti bo računalnik preprečil naključno rešitev." + }, + }, + initLanguage: function() { + if (window.stringsLanguage == undefined) { + window.stringsLanguage = 'fr'; + } + this.strings = this.languageStrings[window.stringsLanguage]; + }, + /*********************************************** + * Initialization functions called by the task * + ***********************************************/ + load: function(views) { + this.initLanguage(); + var self = this; + this.showScore = (typeof views.grader !== 'undefined' && views.grader === true); + window.platform.getTaskParams(null, null, function(taskParams) { + self.taskParams = taskParams; + self.readOnly = (self.taskParams.readonly === true || self.taskParams.readOnly == 'true'); + self.graderScore = +self.taskParams.noScore; + self.savedAnswer = ''; + + $("#difficultyWarning").html(self.strings.difficultyWarning).addClass("warningHeader"); + $("#enemyWarning").html(self.strings.enemyWarning).addClass("warningHeader"); + var addTaskHTML = '
'; + // Place button placements at the end of HTML if they don't already exist + var placementNames = ['graderMessage', 'validate', 'cancel', 'saved']; + for (var iPlacement = 0; iPlacement < placementNames.length; iPlacement++) { + var placement = 'displayHelper_' + placementNames[iPlacement]; + if ($('#' + placement).length === 0) { + addTaskHTML += '
'; + } + } + addTaskHTML += '
'; + if (!document.getElementById('displayHelperAnswering')) { + $(self.taskSelector).append(addTaskHTML); + } + self.loaded = true; + self.timeLoaded = new Date().getTime(); + if (self.popupMessageShown) { + $('#displayHelperAnswering').hide(); + } + + var taskDelayWarning = function() { + if (self.popupMessageShown) { + self.taskDelayWarningTimeout = setTimeout(taskDelayWarning, 5000); + } else { + self.showPopupMessage(self.formatTranslation(self.strings.warningTimeout, [self.timeoutMinutes]), 'blanket', self.strings.alright, null, null, "warning"); + self.taskDelayWarningTimeout = null; + } + }; + if (self.timeoutMinutes > 0) { + self.taskDelayWarningTimeout = setTimeout(taskDelayWarning, self.timeoutMinutes * 60 * 1000); + } + }); + }, + unload: function() { + if (this.taskDelayWarningTimeout) { + this.taskDelayWarningTimeout = clearTimeout(this.taskDelayWarningTimeout); + } + clearInterval(this.checkAnswerInterval); + this.checkAnswerInterval = null; + this.loaded = false; + this.prevAnswer = ''; + this.readOnly = false; + this.savedAnswer = ''; + this.submittedAnswer = ''; + this.submittedScore = 0; + this.hasAnswerChanged = true; + this.hideValidateButton = false; + this.hideRestartButton = false; + this.showScore = false; + this.refreshMessages = true; + this.stoppedShowingResult = false; + this.previousMessages = {}; + this.popupMessageShown = false; + this.hasLevels = false; + this.pointsAsStars = true; // TODO: false as default + this.unlockedLevels = 4; + this.neverHadHard = false; + this.showMultiversionNotice = false; + this.taskLevel = ''; + this.initLevelVars(); + return true; + }, + + initLevelVars: function() { + var defaultLevelsRanks = { basic: 1, easy: 2, medium: 3, hard: 4 }; + this.levelsRanks = {}; + this.levelsScores = {}; + this.prevLevelsScores = {}; + for(var i=0; i < this.levels.length; i++) { + var levelName = this.levels[i]; + if(typeof this.levelsRanks[levelName] == 'undefined') { + this.levelsRanks[levelName] = defaultLevelsRanks[levelName]; + } + this.levelsScores[levelName] = 0; + this.prevLevelsScores[levelName] = 0; + } + }, + + setupLevels: function(initLevel, reloadWithCallbacks, levels) { + this.reloadWithCallbacks = reloadWithCallbacks; + this.initLanguage(); + if(levels) { + this.levels = levels; + this.levelsIdx = {}; + for(var i = 0; i < this.levels.length; i++) { + this.levelsIdx[this.levels[i]] = i; + } + } + this.initLevelVars(); + + var self = this; + function callSetupLevels() { + if(!initLevel) { + initLevel = self.taskParams.options.difficulty ? self.taskParams.options.difficulty : "easy"; + } + self.doSetupLevels(initLevel); + }; + if (!this.taskParams) { + window.platform.getTaskParams(null, null, function(taskParams) { + self.taskParams = taskParams; + callSetupLevels(); + }); + } else { + callSetupLevels(); + } + }, + doSetupLevels: function(initLevel) { + // TODO To fix: levelWrapper-1 does not work correctly without this part, + // so the level is loaded twice initially (once here, and once below). + if(!this.reloadWithCallbacks) { + task.reloadStateObject(task.getDefaultStateObject(), true); + task.reloadAnswerObject(task.getDefaultAnswerObject()); + } + + this.setupParams(); + if (!document.getElementById('popupMessage')) { + this.setupLevelsTabs(); + $('#tabsMenu .li').on('click', function(event) { + event.preventDefault(); + var newLevel = $(this).children().attr('href').split('#')[1]; + displayHelper.setLevel(newLevel); + }); + } + + this.setLevel(initLevel); + + if (this.unlockedLevels > 1 && this.showMultiversionNotice) { + this.showPopupMessage(this.strings.harderLevelAvailable, 'blanket', this.strings.alright, + function() { + this.showMultiversionNotice = false; + } + ); + } + }, + setupParams: function() { + var taskParams = this.taskParams; + + this.hasLevels = true; + var paramNames = ['pointsAsStars', 'unlockedLevels', 'neverHadHard', 'showMultiversionNotice']; + for (var iParam = 0; iParam < paramNames.length; iParam++) { + var param = paramNames[iParam]; + if (taskParams[param] !== undefined) { + this[param] = taskParams[param]; + } + } + + var maxScore = taskParams.maxScore !== undefined ? taskParams.maxScore : 40; + this.levelsMaxScores = {}; + for(var i=0; i < this.levels.length; i++) { + var levelName = this.levels[i]; + var levelMaxScore = maxScore * this.levelsRanks[levelName] / this.maxStars; + this.levelsMaxScores[levelName] = this.pointsAsStars ? levelMaxScore : Math.round(levelMaxScore); + } + }, + setupLevelsTabs: function() { + var scoreHTML; + var maxScores = this.levelsMaxScores; + if (this.pointsAsStars) { + var titleStarContainers = []; + scoreHTML = ''; + $('#task > h1').append(scoreHTML); + drawStars('titleStars', this.maxStars, 24, 0, 'normal'); + } else { + // Disabled: doesn't work with new tabs layout. + //scoreHTML = '
Score retenu : 0 sur ' + maxScores.hard + '
'; + //$('#tabsContainer').append(scoreHTML); + } + + var tabsStarContainers = []; + var tabsHTML = ''; + $('#tabsContainer').append(tabsHTML); + + var self = this; + setTimeout(function() { + for (var iLevel = 0; iLevel < self.levels.length; iLevel++) { + curLevel = self.levels[iLevel]; + if (iLevel >= self.unlockedLevels) { + $('#tab_' + curLevel).addClass('lockedLevel'); + } + self.updateStarsAtLevel(curLevel); + } + self.updateLayout(); + }, 100); + + $('#tabsContainer').after('
'); + }, + + updateStarsAtLevel: function(level) { + var rate = this.levelsScores[level] / this.levelsMaxScores[level]; + var iLevel = this.levelsIdx[level]; + var starsIdx = this.levelsRanks[level]; + var mode = 'normal'; + if (iLevel >= this.unlockedLevels) { + mode = 'locked'; + } + if (this.graderScore > this.levelsMaxScores[level]) { + mode = 'useless'; + } + drawStars('stars_' + starsIdx, starsIdx, 14, rate, mode); + }, + + updateLayout: function() { + if (!this.bUseFullWidth) { + return + } + $('#valider').appendTo($('#displayHelper_validate')); + if(window.innerWidth >= 1200) { + $('#task').addClass('largeScreen'); + $('#displayHelperAnswering').appendTo($('#zone_1')); + } + else { + $('#task').removeClass('largeScreen'); + if ($('#showSolutionButton')) { + $('#displayHelperAnswering').insertBefore($('#showSolutionButton')); + } + else { + $('#displayHelperAnswering').appendTo($('#task')); + } + } + }, + + useFullWidth: function() { + // TODO: find a clean way to do this + try { + $('#question-iframe', window.parent.document).css('width', '100%'); + } catch(e) { + } + // This try is probably not needed but avoid breaking just in case + try { + $(document).ready(function () {displayHelper.updateLayout();}); + $(window).resize(function () {displayHelper.updateLayout();}); + this.bUseFullWidth = true; + } catch(e) { + } + }, + + // Deprecated: use directly levelsMaxScores instead + getLevelsMaxScores: function() { + return this.levelsMaxScores; + }, + + displayLevel: function(newLevel) { + // Only displays a level, without requesting a level change to the task + if (this.popupMessageShown) { + $('#popupMessage').hide(); + $('#displayHelperAnswering, #taskContent').show(); + this.popupMessageShown = false; + } + + var allLevels = ['basic', 'easy', 'medium', 'hard']; + if(this.levelsRanks) { + for(var lr in this.levelsRanks) { + allLevels.push(lr); + } + } + for(var i=0; i < allLevels.length; i++) { + var curLevel = allLevels[i]; + $('#tab_' + curLevel).removeClass('current'); + $('.' + curLevel).hide(); + } + $('#tab_' + newLevel).addClass('current'); + $('.' + newLevel).show(); + + // Add prev and next classes to .current direct siblings + $('#tabsMenu .li').removeClass('prev next'); + $('#tabsMenu .li.current').prev().addClass('prev'); + $('#tabsMenu .li.current').next().addClass('next'); + }, + + setLevel: function(newLevel) { + if (this.taskLevel == newLevel) { + return; + } + + this.displayLevel(newLevel); + + var answer = task.getAnswerObject(); + var state = task.getStateObject(); + state.level = newLevel; + this.taskLevel = newLevel; + var self = this; + + var afterReload = function() { + self.submittedScore = self.levelsScores[self.taskLevel]; + self.refreshMessages = true; + self.checkAnswerChanged(); + self.stopShowingResult(); + if ($('#tab_' + newLevel).hasClass('lockedLevel')) { + self.showPopupMessage(self.strings.lockedLevel, 'lock'); + } else if (!self.hasSolution) { + if ($('#tab_' + newLevel).hasClass('uselessLevel') && self.levelsScores[newLevel] < self.levelsMaxScores[newLevel]) { + self.showPopupMessage(self.strings.harderLevelSolved, 'tab', self.strings.showLevelAnyway, null, null, "warning"); + } else if (newLevel == 'hard' && self.neverHadHard) { + var hardVersionKey = "levelVersionName_hard"; + var easyVersionKey = "levelVersionName_easy"; + if (self.pointsAsStars) { + hardVersionKey += "_stars"; + easyVersionKey += "_stars"; + } + self.showPopupMessage(self.formatTranslation(self.strings.hardVersionTakesTime, [self.strings[hardVersionKey], self.strings[easyVersionKey]]), + 'tab', + self.strings.illKeepThatInMind, function() { + self.neverHadHard = false; + } + ); + } + } + }; + + if(self.reloadWithCallbacks) { + task.reloadStateObject(state, function() { + task.reloadAnswerObject(answer, afterReload); + }); + } + else { + task.reloadStateObject(state, true); + task.reloadAnswerObject(answer); + afterReload(); + } + }, + + getImgPath: function() { + if(window.contestsRoot) { + // Hack: when in the context of the platform, we need to change the path + return window.contestsRoot + '/' + window.contestFolder + '/'; + } else if(window.modulesPath) { + var modulesPath = window.modulesPath[window.modulesPath.length-1] == '/' ? window.modulesPath : window.modulesPath + '/'; + return modulesPath + 'img/'; + } else { + return '../../../_common/modules/img/'; + } + }, + + getAvatar: function(mood) { + if (displayHelper.avatarType == "beaver") { + return "castor.png"; + } else if (displayHelper.avatarType == "none") { + return ""; + } else { + if (mood == "success") { + return "laptop_success.png"; + } else if (mood == "warning") { + return "laptop_warning.png"; + }{ + return "laptop_error.png"; + } + } + }, + + + showPopupDialog: function(message) { + if ($('#popupMessage').length == 0) { + $('#task').after('
'); + } + + $('#popupMessage').addClass('floatingMessage'); + + var imgPath = displayHelper.getImgPath(); + + var popupHtml = '
' + + '' + + '
' + message + '
'; + + $('#popupMessage').html(popupHtml).show(); + + this.popupMessageShown = true; + try { + $(parent.document).scrollTop(0); + } catch (e) { + } + }, + + + errorPopupAvatar: function() { + $('#popupMessage').addClass('noAvatar'); + }, + + + showPopupMessage: function(message, mode, yesButtonText, agreeFunc, noButtonText, avatarMood, defaultText, disagreeFunc) { + if(this.popupMessageHandler) { + // A custom popupMessageHandler was defined, call it + // It must return true if it handled the popup, false if displayHelper + // should handle the popup instead + if(this.popupMessageHandler.apply(null, arguments)) { + return; + } + } + + if ($('#popupMessage').length == 0) { + $('#task').after('
'); + } + if (mode == 'blanket' || mode == 'input') { + $('#popupMessage').addClass('floatingMessage'); + } else { + $('#taskContent, #displayHelperAnswering').hide(); + $('#popupMessage').removeClass('floatingMessage'); + } + $('#popupMessage').removeClass('noAvatar'); + + var imgPath = displayHelper.getImgPath(); + if(mode == 'lock') { + var buttonYes = ''; + } else if (mode == 'input') { + var buttonYes = ''; + } else { + var buttonYes = ''; + } + var buttonNo = ''; + if (noButtonText != undefined) { + buttonNo = ''; + } + var popupHtml = '
' + + '' + + '' + + '
' + message + '
'; + if(mode == 'input') { + popupHtml += ''; + } + popupHtml += '
' + buttonYes + buttonNo + '
'; + $('#popupMessage').html(popupHtml).show(); + if(mode == 'input') { + $('#popupInput').focus(); + } + + var validateFunc = function() { + $('#popupMessage').hide(); + $('#displayHelperAnswering, #taskContent').show(); + displayHelper.popupMessageShown = false; + if (agreeFunc) { + if(mode == 'input') { + agreeFunc($('#popupInput').val()); + } else { + agreeFunc(); + } + } + }; + + var validateFuncNo = function() { + $('#popupMessage').hide(); + $('#displayHelperAnswering, #taskContent').show(); + displayHelper.popupMessageShown = false; + if (disagreeFunc) { + if(mode == 'input') { + disagreeFunc($('#popupInput').val()); + } else { + disagreeFunc(); + } + } + }; + + $('#popupMessage .buttonYes').click(validateFunc); + $('#popupMessage .buttonNo').click(validateFuncNo); + $('#popupInput').keypress(function (e) { + if(e.which === 13) { validateFunc(); } + }); + + $('#popupMessage .buttonNo').click(function() { + $('#popupMessage').hide(); + $('#displayHelperAnswering, #taskContent').show(); + displayHelper.popupMessageShown = false; + }); + this.popupMessageShown = true; + try { + $(parent.document).scrollTop(0); + } catch (e) { + } + }, + + // Function to call at the beginning of task loading, before any html has + // been modified. It places the markers where the buttons will appear, if the + // markers are not present already. + showViews: function(views) { + // Fix for an old version of Firefox in which selection was stuck + try { + if (document.getSelection) { + var selection = document.getSelection(); + if (selection !== undefined && selection.removeAllRanges !== undefined) { + selection.removeAllRanges(); + } + } + } catch (err) {} + + this.views = views; + this.hasSolution = (typeof views.solution !== 'undefined'); + if (this.hasSolution && this.graderScore) { + this.prevSavedScore = this.graderScore; + } + var self = this; + this.checkAnswerInterval = setInterval( + function() { + self.checkAnswerChanged(); + }, 1000); + task.getAnswer(function(answer) { + self.defaultAnswer = answer; + self.refreshMessages = true; + self.checkAnswerChanged(); + }); + }, + + reloadAnswer: function(strAnswer) { + this.savedAnswer = strAnswer; + this.prevAnswer = strAnswer; + this.submittedAnswer = strAnswer; + var that = this; + if (this.showScore) { + // TODO we only know the answer here, and not the state. Possibly problematic? + this.updateScore(strAnswer, true, function() { + that.checkAnswerChanged(); // necessary? + }); + } else { + that.checkAnswerChanged(); // necessary? + } + }, + + reloadState: function() { + this.checkAnswerChanged(); // necessary? + }, + + stopShowingResult: function() { + this.stoppedShowingResult = true; + this.updateMessages(); + }, + + /********************** + * Internal functions * + **********************/ + restartAll: function() { + if(this.confirmRestartAll) { + this.showPopupMessage(this.strings.confirmRestart, 'blanket', this.strings.yes, this.restartAllNoConfirm, this.strings.no); + } + else { + this.restartAllNoConfirm(); + } + }, + + restartAllNoConfirm: function() { + displayHelper.stopShowingResult(); + if (!displayHelper.hasLevels) { + // TODO is this the desired behavior for no levels? + task.reloadAnswer('', function() {}); + } else { + task.getAnswer(function(strAnswer) { + var answer = $.parseJSON(strAnswer); + var defaultAnswer = task.getDefaultAnswerObject(); + var level = displayHelper.taskLevel; + answer[level] = defaultAnswer[level]; + task.reloadAnswer(JSON.stringify(answer), function() {}); + }); + } + }, + + setValidateString: function(str) { + this.customValidateString = str; + $("#displayHelper_validate > input").val(str); + }, + + callValidate: function() { + if (this.customValidate != undefined) { + this.customValidate(); + } else { + platform.validate("none", function() {}); + } + }, + + validate: function(mode) { + this.stoppedShowingResult = false; + var self = this; + if (mode == 'log') { + // Ignore it? Do something? + } else if (mode == 'cancel') { + this.savedAnswer = ''; + task.reloadAnswer('', function() { + self.checkAnswerChanged(); + }); + } else { + task.getAnswer(function(strAnswer) { + if (!self.hasSolution) { + self.prevSavedScore = self.graderScore; + if (self.hasLevels) { + self.prevLevelsScores[self.taskLevel] = self.levelsScores[self.taskLevel]; + } + } + var refresh = function() { + self.refreshMessages = true; + self.checkAnswerChanged(); + }; + self.submittedAnswer = strAnswer; + if (self.showScore) { + self.updateScore(strAnswer, false, refresh, (mode == "silent")); + } else { + self.savedAnswer = strAnswer; + refresh(); + } + }); + } + }, + + updateScore: function(strAnswer, allLevels, callback, silentMode) { + var self = this; + function refresh() { + self.refreshMessages = true; + self.checkAnswerChanged(); + callback(); + } + if (allLevels) { + // TODO: make sure the grader doesn't evaluate each level at each call (most do right now!) + var levelsToDo = this.levels.slice(); + var updateNextScore = null; + updateNextScore = function() { + var nextLevel = levelsToDo.shift(); + if(nextLevel) { + self.updateScoreOneLevel(strAnswer, nextLevel, updateNextScore); + } else { + refresh(); + } + } + updateNextScore(); + } else { + this.updateScoreOneLevel(strAnswer, this.taskLevel, function() { + if (!silentMode) { + if (self.hasLevels) { + self.showValidatePopup(self.taskLevel); + } else { + self.showValidatePopup(); + } + } + callback(); + }, silentMode); + } + }, + updateScoreOneLevel: function(strAnswer, gradedLevel, callback, silentMode) { + var self = this; + this.graderMessage = this.strings.gradingInProgress; + task.getLevelGrade(strAnswer, null, function(score, message) { + score = +score; + self.submittedScore = score; + if (self.hasSolution) { + self.graderScore = score; + self.levelsScores[gradedLevel] = score; + } else { + if (self.hasLevels) { + if (score > self.levelsScores[gradedLevel]) { + self.levelsScores[gradedLevel] = score; + self.graderScore = score; + if (self.savedAnswer === '') { + self.savedAnswer = strAnswer; + } else { + var savedAnswerObj = $.parseJSON(self.savedAnswer); + var answerObj = $.parseJSON(strAnswer); + savedAnswerObj[gradedLevel] = answerObj[gradedLevel]; + self.savedAnswer = JSON.stringify(savedAnswerObj); + } + } + } else if (score > self.graderScore) { + self.savedAnswer = strAnswer; + self.graderScore = score; + } + } + if (silentMode) { + message = ""; + } + if (message !== undefined) { + self.graderMessage = message; + } else { + self.graderMessage = ""; + } + // TODO : should not be called from here, might update the display of a level not currently opened! + if (self.hasLevels) { + self.updateScoreDisplays(gradedLevel); + } + callback(); + }, gradedLevel); + }, + updateScoreDisplays: function(gradedLevel) { + var scores = this.levelsScores; + var maxScores = this.levelsMaxScores; + if (this.pointsAsStars) { + this.updateStarsAtLevel(gradedLevel); + drawStars('titleStars', this.maxStars, 24, this.graderScore / maxScores.hard, 'normal'); + } else { + $('#tabScore_' + gradedLevel).html(scores[gradedLevel]); + $('#bestScore').html(this.graderScore); + } + + var gradedLevelNum = $.inArray(gradedLevel, this.levels); + var curLevel; + // Possibly unlocking a level + if (maxScores[gradedLevel] == scores[gradedLevel]) { + var unlockedLevel = gradedLevelNum + 1; + if (unlockedLevel < this.levels.length && unlockedLevel >= this.unlockedLevels) { + curLevel = this.levels[unlockedLevel]; + $('#tab_' + curLevel).removeClass('lockedLevel'); + this.unlockedLevels++; + this.updateStarsAtLevel(curLevel); + } + } + if (scores[gradedLevel] == this.graderScore) { + // Marks levels that can't earn points as useless + for (curLevel in this.levelsRanks) { + if (maxScores[curLevel] > this.graderScore) { + break; + } + if (this.pointsAsStars) { + this.updateStarsAtLevel(curLevel); + } + $('#tab_' + curLevel).addClass('uselessLevel'); + } + } + }, + showValidatePopup: function(gradedLevel) { + var curTime = new Date().getTime(); + var secondsSinceLoaded = (curTime - this.timeLoaded) / 1000; + var actionNext = "stay"; + // Display popup to indicate what to do next + var fullMessage = this.graderMessage; + var maxScores = this.levelsMaxScores; + var buttonText = this.strings.alright; + var avatarMood = "error"; + if ((gradedLevel == undefined) && (this.graderScore >= this.taskParams.maxScore - 0.001)) { + avatarMood = "success"; + buttonText = this.strings.moveOn; + fullMessage += "

"; + actionNext = "nextTask"; + fullMessage += this.strings.solvedMoveOn; + } else if (maxScores && (gradedLevel !== undefined) && this.graderScore >= maxScores[gradedLevel] - 0.001) { + avatarMood = "success"; + buttonText = this.strings.moveOn; + fullMessage += "

"; + var levelIdx = this.levelsIdx[gradedLevel]; + var nextLevel = levelIdx !== undefined && levelIdx < this.levels.length-1 ? this.levels[levelIdx+1] : null; + if(nextLevel) { + // Offer to try next task if the user solved this difficulty slowly + var threshold = this.thresholds[gradedLevel]; + if(!threshold) { + if(gradedLevel == "medium") { threshold = this.thresholdMedium; } + else if(gradedLevel == "easy") { threshold = this.thresholdEasy; } + } + if(!threshold || (threshold && secondsSinceLoaded < threshold)) { + actionNext = nextLevel; + if(gradedLevel == "easy") { fullMessage += this.strings.tryMediumLevel; } + if(gradedLevel == "medium") { fullMessage += this.strings.tryHardLevel; } + } else { + actionNext = "nextTask"; + fullMessage += this.strings.tryNextTask; + } + } else { + // Solved the last level, move on + actionNext = "nextTask"; + fullMessage += this.strings.solvedMoveOn; + } + } + var self = this; + // Offer an option to stay on the task instead of forcing nextTask + var noButtonText = actionNext == "nextTask" ? this.strings.no : null; + this.showPopupMessage(fullMessage, 'blanket', buttonText, + function() { + // TODO: replace with something compatible with the API. + try { + $(parent.document).scrollTop(0); + } catch (e) { + } + if (actionNext == "nextTask") { + platform.validate("nextImmediate"); + } else if(self.levelsIdx[actionNext] !== undefined) { + self.setLevel(actionNext); + } + }, + noButtonText, + avatarMood + ); + }, + + // Does task have unsaved answers? + hasNonSavedAnswer: function(callback) { + if (!task) { + return false; + } + var self = this; + task.getAnswer(function(curAnswer) { + if (curAnswer != self.prevAnswer) { + try { + if (self != top && parent.Tracker) { + var data = { + dataType: 'nonSavedAnswer', teamID: parent.teamID, questionKey: parent.currentQuestionKey, answer: curAnswer + }; + // Call TrackData, only when loaded in an iframe + // this is not yet document in the API, but should be soonish + parent.Tracker.trackData(data); + } + } catch (e) {} + self.prevAnswer = curAnswer; + } + if (curAnswer != self.submittedAnswer) { + self.submittedAnswer = ''; + self.refreshMessages = true; + } + if (curAnswer == self.defaultAnswer && self.savedAnswer === '') { + callback(false); + } else { + callback(curAnswer != self.submittedAnswer); + } + }); + }, + + // Checks task.getAnswer() against previously recorded result, and calls + // displayHelper.updateMessages() accordingly. + checkAnswerChanged: function() { + if (!this.loaded) { + this.checkAnswerInterval = clearInterval(this.checkAnswerInterval); + return; + } + var self = this; + this.hasNonSavedAnswer(function(hasNonSavedAnswer) { + if (hasNonSavedAnswer && !self.hasAnswerChanged) { + self.refreshMessages = true; + self.hasAnswerChanged = true; + } else if (!hasNonSavedAnswer && self.hasAnswerChanged) { + self.refreshMessages = true; + self.hasAnswerChanged = false; + } + if (self.refreshMessages) { + self.updateMessages(); + } + }); + }, + + getFullFeedbackSavedMessage: function(taskMode) { + var scoreDiffMsg = this.strings.score; + var showRetrieveAnswer = false; + if (this.submittedAnswer !== '' && this.prevSavedScore !== undefined) { + if (!this.hasSolution) { + if (this.prevSavedScore < this.submittedScore) { + scoreDiffMsg = this.strings.yourScoreIsNow; + } else if (this.prevSavedScore > this.submittedScore) { + scoreDiffMsg = this.strings.worseScoreStays; + showRetrieveAnswer = true; + } + else { + scoreDiffMsg = this.strings.scoreStays; + } + } else { + if (this.prevSavedScore != this.submittedScore) { + scoreDiffMsg = this.strings.contestOverScoreStays + " " + this.prevSavedScore + ". " + this.strings.scoreWouldBecome; + } else if (this.submittedAnswer != this.savedAnswer) { + scoreDiffMsg = this.strings.contestOverScoreStays + " " + this.prevSavedScore + ". " + this.strings.scoreWouldStay; + } else { + scoreDiffMsg = this.strings.scoreIs; + } + } + } + scoreDiffMsg += " " + this.graderScore + this.strings.outOf + this.taskParams.maxScore + "."; + if ((this.hasSolution && this.savedAnswer != this.prevAnswer) || + (this.graderScore > 0 && (taskMode == 'saved_changed' || showRetrieveAnswer))) { + scoreDiffMsg += ' ' + this.strings.reloadValidAnswer + ''; + } + return scoreDiffMsg; + }, + getFullFeedbackWithLevelsSavedMessage: function() { + var maxScoreLevel = this.levelsMaxScores[this.taskLevel]; + var showRetrieveAnswer = false; + var message = ""; + var curAnswer = this.submittedAnswer; + var answerExists = false; + if (curAnswer !== '') { + curAnswer = $.parseJSON(curAnswer); + answerExists = !$.isEmptyObject(curAnswer); + } + if (!answerExists) { + if (this.levelsScores[this.taskLevel] > 0) { + if (this.hideScoreDetails) { + message = this.strings.scoreObtained + ' ' + this.levelsScores[this.taskLevel] + " " + strPoint + " " + this.strings.outOf + " " + maxScoreLevel + ".
";; + } else { + showRetrieveAnswer = true; + } + } else { + message += this.strings.noPointsForLevel; + } + } else { + var strPoint = this.strings.point; + if (this.submittedScore > 1) { + strPoint = this.strings.points; + } + message = this.strings.scoreObtained + ' ' + this.submittedScore + " " + strPoint + " " + this.strings.outOf + " " + maxScoreLevel + ".
"; + if (this.hideScoreDetails) { + } else if (this.hasSolution) { + message += this.strings.contestOverAnswerNotSaved; + if (this.prevSavedScore !== undefined) { + showRetrieveAnswer = true; + } + } else { + var prevScore = this.prevLevelsScores[this.taskLevel]; + if (this.prevSavedScore !== undefined) { + if (this.submittedScore > prevScore) { + if (this.submittedScore < maxScoreLevel) { + if (this.taskLevel == "hard") { + message += this.strings.tryToDoBetterOrChangeTask; + } else { + message += this.strings.tryToDoBetterOrMoveToNextLevel; + } + } else if (this.taskLevel == "hard") { + message += this.strings.bestPossibleScoreCongrats; + } else { + message += this.strings.forMorePointsMoveToNextLevel; + } + } else if (this.submittedScore < prevScore) { + message += this.strings.youDidBetterBefore; + showRetrieveAnswer = true; + } + else { + message += this.strings.scoreStays2; + } + } + } + } + if (showRetrieveAnswer) { + message += ' ' + this.strings.reloadBestAnswer + ''; + } + return message; + }, + getFullFeedbackGraderMessage: function(taskMode) { + switch (taskMode) { + case 'saved_unchanged': + var color = 'red'; + if (this.submittedScore == this.taskParams.maxScore) { + color = 'green'; + } else if (this.submittedScore > 0) { + color = '#ff8c00'; + } + if (this.graderMessage !== "") { + if (!this.stoppedShowingResult) { + return '
' + this.graderMessage + '
'; + } + } + break; + } + return ''; + }, + // TODO: rename function below to getFullFeedbackValidate, assuming it is not called from outside this file + getFullFeedbackValidateMessage: function(taskMode, disabledStr) { + var strValidate = this.strings.validate; + if (this.customValidateString != undefined) { + strValidate = this.customValidateString; + } + switch (taskMode) { + case 'saved_unchanged': + if (this.graderMessage !== "") { + if (!this.hideValidateButton && !this.hasSolution) { + return ''; + } + } + break; + case 'unsaved_unchanged': + case 'unsaved_changed': + if (!this.hideValidateButton) { + if (this.hasSolution) { + return ''; + } else { + return ''; + } + } + break; + case 'saved_changed': + if (!this.hideValidateButton) { + if (this.hasSolution) { + return ''; + } else { + // was: Valider votre nouvelle réponse + return ''; + } + } + break; + } + return ''; + }, + + lastSentHeight: null, + updateMessages: function() { + this.initLanguage(); + var self = this; + this.refreshMessages = false; + var suffix, prefix; + if (this.hasAnswerChanged) { + suffix = 'changed'; + } else { + suffix = 'unchanged'; + } + if (this.savedAnswer !== '' && this.savedAnswer != this.defaultAnswer) { + prefix = 'saved'; + } else { + prefix = 'unsaved'; + } + if (this.submittedAnswer !== '' && this.submittedAnswer != this.savedAnswer) { + prefix = 'saved'; // equivalent, should be named differently + suffix = 'unchanged'; + } + var taskMode = prefix + '_' + suffix; + var messages = { graderMessage: '', validate: '', cancel: '', saved: '' }; + var disabledStr = this.readOnly ? ' disabled' : ''; + if (this.showScore) { + if (!this.hideRestartButton) { + messages.cancel = '
'; + } + messages.graderMessage = this.getFullFeedbackGraderMessage(taskMode); + messages.validate = this.getFullFeedbackValidateMessage(taskMode, disabledStr); + if (this.hasLevels) { + messages.saved = this.getFullFeedbackWithLevelsSavedMessage(taskMode); + } else { + messages.saved = this.getFullFeedbackSavedMessage(taskMode); + } + } else { + switch (taskMode) { + case 'unsaved_unchanged': + case 'unsaved_changed': + if (!this.hasSolution) { + messages.validate = ''; + } + break; + case 'saved_unchanged': + if (!this.hasSolution) { + messages.saved = this.formatTranslation(this.strings.answerSavedModifyOrCancelIt, + ["" + this.strings.cancelIt + ""]); + } else { + messages.saved = this.formatTranslation(this.strings.answerNotSavedContestOver, + ["" + this.strings.reloadSubmittedAnswer + ""]); + } + break; + case 'saved_changed': + messages.saved = "
" + this.strings.warningDifferentAnswerSaved + " " + + this.formatTranslation(this.strings.youMay, ["" + this.strings.reloadIt + ""]); + if (!this.hideValidateButton) { + messages.validate = ""; + } + break; + } + } + for (var type in messages) { + if (this.loaded && (typeof this.previousMessages[type] === 'undefined' || this.previousMessages[type] !== messages[type])) { + $('#displayHelper_' + type).html(messages[type]); + this.previousMessages[type] = messages[type]; + } + } + if (this.pointsAsStars && $('#answerScore').length) { + drawStars('answerScore', this.levelsRanks[this.taskLevel], 20, + this.levelsScores[this.taskLevel] / this.levelsMaxScores[this.taskLevel], 'normal'); + } + window.task.getHeight(function(height) { + if (height != self.lastSentHeight) { + self.lastSentHeight = height; + window.platform.updateDisplay({height: height}, function(){}); + } + }); + }, + + getSavedAnswer: function() { + // Gets the previously saved answer + var retrievedAnswer; + if (this.hasLevels) { + var savedAnswerObj = this.savedAnswer && $.parseJSON(this.savedAnswer); + if(savedAnswerObj) { + var retrievedAnswerObj = task.getAnswerObject(); + retrievedAnswerObj[this.taskLevel] = savedAnswerObj[this.taskLevel]; + retrievedAnswer = retrievedAnswerObj[this.taskLevel] && JSON.stringify(retrievedAnswerObj); + } else { + retrievedAnswer = null; + } + } else { + retrievedAnswer = this.savedAnswer; + } + return retrievedAnswer; + }, + retrieveAnswer: function() { + // Loads previously saved answer + var retrievedAnswer = this.getSavedAnswer(); + if(!retrievedAnswer) { + this.showPopupMessage(this.strings.noAnswerSaved, 'blanket', this.strings.alright, null, null, "warning"); + return; + } + var self = displayHelper; + task.reloadAnswer(retrievedAnswer, function() { + self.submittedAnswer = self.savedAnswer; + self.updateScore(self.savedAnswer, false, function() {}); + }); + }, + hasSavedAnswer: function() { + // Returns whether a saved answer exists + if (this.hasLevels) { + var savedAnswerObj = this.savedAnswer && $.parseJSON(this.savedAnswer); + if(savedAnswerObj) { + return !!savedAnswerObj[this.taskLevel]; + } + } else { + return !!this.savedAnswer; + } + return false; + }, + + sendBestScore: function(callback, scores, messages) { + var bestLevel = 'easy'; + for (var curLevel in scores) { + if (scores[bestLevel] <= scores[curLevel]) { + bestLevel = curLevel; + } + } + callback(scores[bestLevel], messages[bestLevel] + " (" + this.strings["levelVersionName_" + bestLevel] + ")"); + } +}; + + +/* + draw nbStars stars of width starWidth in element of id id + fills rate% of them in yellow from the left + mode is "norma", "locked" or "useless" +*/ +function drawStars(id, nbStars, starWidth, rate, mode) { + $('#' + id).addClass('stars'); + + function clipPath(coords, xClip) { + var result = [[coords[0][0], coords[0][1]]]; + var clipped = false; + for (var iCoord = 1; iCoord <= coords.length; iCoord++) { + var x1 = coords[iCoord - 1][0]; + var y1 = coords[iCoord - 1][1]; + var x2 = coords[iCoord % coords.length][0]; + var y2 = coords[iCoord % coords.length][1]; + if (x2 > xClip) { + if (!clipped) { + result.push([xClip, y1 + (y2 - y1) * (xClip - x1) / (x2 - x1)]); + clipped = true; + } + } else { + if (clipped) { + result.push([xClip, y1 + (y2 - y1) * (xClip - x1) / (x2 - x1)]); + clipped = false; + } + result.push([x2, y2]); + } + } + result.pop(); + return result; + } + + function pathFromCoords(coords) { + var result = 'm' + coords[0][0] + ',' + coords[0][1]; + for (var iCoord = 1; iCoord < coords.length; iCoord++) { + var x1 = coords[iCoord - 1][0]; + var y1 = coords[iCoord - 1][1]; + var x2 = coords[iCoord][0]; + var y2 = coords[iCoord][1]; + result += ' ' + (x2 - x1) + ',' + (y2 - y1); + } + result += 'z'; + return result; + } + + var fillColors = { normal: 'white', locked: '#ddd', useless: '#ced' }; + var strokeColors = { normal: 'black', locked: '#ddd', useless: '#444' }; + var starCoords = [[25, 60], [5, 37], [35, 30], [50, 5], [65, 30], [95, 37], [75, 60], [78, 90], [50, 77], [22, 90]]; + var fullStarCoords = [ + [[5, 37], [35, 30], [50, 5], [65, 30], [95, 37], [75, 60], [25, 60]], + [[22, 90], [50, 77], [78, 90], [75, 60], [25, 60]] + ]; + + + if ($('#' + id).length == 0) { + return; + } + $('#' + id).html(''); + var paper = new Raphael(id, starWidth * nbStars, starWidth * 0.95); + for (var iStar = 0; iStar < nbStars; iStar++) { + var scaleFactor = starWidth / 100; + var deltaX = iStar * starWidth; + var coordsStr = pathFromCoords(starCoords, iStar * 100); + + paper.path(coordsStr).attr({ + fill: fillColors[mode], + stroke: 'none' + }).transform('s' + scaleFactor + ',' + scaleFactor + ' 0,0 t' + (deltaX / scaleFactor) + ',0'); + + var ratio = Math.min(1, Math.max(0, rate * nbStars - iStar)); + var xClip = ratio * 100; + if (xClip > 0) { + for (var iPiece = 0; iPiece < fullStarCoords.length; iPiece++) { + var coords = clipPath(fullStarCoords[iPiece], xClip); + var star = paper.path(pathFromCoords(coords)).attr({ + fill: '#ffc90e', + stroke: 'none' + }).transform('s' + scaleFactor + ',' + scaleFactor + ' 0,0 t' + (deltaX / scaleFactor) + ",0"); + } + } + paper.path(coordsStr).attr({ + fill: 'none', + stroke: strokeColors[mode], + 'stroke-width': 5 * scaleFactor + }).transform('s' + scaleFactor + ',' + scaleFactor + ' 0,0 t' + (deltaX / scaleFactor) + ',0'); + } +} + + +window.platform.subscribe(displayHelper); + +})(); + +var Beav = new Object(); + + +/**********************************************************************************/ +/* Object */ + +Beav.Object = new Object(); + +Beav.Object.eq = function eq(x, y) { + // assumes arguments to be of same type + var tx = typeof(x); + var ty = typeof(y); + if (tx != ty) { + throw "Beav.Object.eq incompatible types"; + } + if (tx == "boolean" || tx == "number" || tx == "string" || tx == "undefined") { + return x == y; + } + if ($.isArray(x)) { + if (! $.isArray(y)) + throw "Beav.Object.eq incompatible types"; + if (x.length != y.length) + return false; + for (var i = 0; i < x.length; i++) + if (! eq(x[i], y[i])) + return false; + return true; + } + if (tx == "object") { + var kx = []; + for (var key in x) { + kx.push(key); + } + var ky = []; + for (var key in y) { + ky.push(key); + } + var sort_keys = function(n1,n2) { return (n1 < n2) ? -1 : ((n1 > n2) ? 1 : 0); }; + kx.sort(sort_keys); + ky.sort(sort_keys); + if (kx.length != ky.length) + return false; + for (var i = 0; i < kx.length; i++) { + var ex = kx[i]; + var ey = ky[i]; + if (ex != ey) + return false; + if (! eq(x[ex], y[ex])) + return false; + } + return true; + } + throw "Beav.Object.eq unsupported types"; +}; + + +/**********************************************************************************/ +/* Array */ + +Beav.Array = new Object(); + +Beav.Array.make = function(nb, initValue) { + var t = []; + for (var i = 0; i < nb; i++) + t[i] = initValue; + return t; +}; + +Beav.Array.init = function(nb, initFct) { + var t = []; + for (var i = 0; i < nb; i++) + t.push(initFct(i)); + return t; +}; + +Beav.Array.indexOf = function(t, v, eq) { + if (eq === undefined) + eq = Beav.Object.eq; + for (var i = 0; i < t.length; i++) + if (eq(t[i], v)) + return i; + return -1; +}; + +Beav.Array.has = function(t, v, eq) { + return Beav.Array.indexOf(t, v, eq) != -1; +}; + +Beav.Array.filterCount = function(t, filterFct) { + var count = 0; + for (var i = 0; i < t.length; i++) + if (filterFct(t[i], i)) + count++; + return count; +}; + +Beav.Array.stableSort = function(t, compFct) { + var swap = function(a, b) { + var v = t[a]; + t[a] = t[b]; + t[b] = v; + }; + var insert = function (i, j, v) { + while(i+1 < j && compFct(t[i+1], v) < 0) { + swap(i, i+1); + i++; + } + t[i] = v; + }; + var merge = function(i, k, j) { + for ( ; i": ">", + '"': '"', + "'": ''', + "/": '/' }; + return String(stringToEncode).replace(/[&<>"'\/]/g, function (s) { + return entityMap[s]; + }); +}; + + +/**********************************************************************************/ +/* Raphael */ + +Beav.Raphael = new Object(); + +Beav.Raphael.line = function(paper, x1, y1, x2, y2) { + return paper.path([ "M", x1, y1, "L", x2, y2 ]); +}; + +Beav.Raphael.lineRelative = function(paper, x1, y1, dx, dy) { + return Beav.Raphael.line(paper, x1, y1, x1+dx, y1+dy); +}; + + +/**********************************************************************************/ +/* Random */ + +Beav.Random = new Object(); + +Beav.Random.bit = function(randomSeed, idBit) { + return (randomSeed & (1 << idBit)) ? 1 : 0; +}; + + +/**********************************************************************************/ +/* Task */ + +Beav.Task = new Object(); + +Beav.Task.scoreInterpolate = function(minScore, maxScore, minResult, maxResult, result) { + // requires minResult <= result <= maxResult and minScore <= maxScore + return Math.round(minScore + (maxScore - minScore) * (result - minResult) / (maxResult - minResult)); +}; + + +/**********************************************************************************/ +/* Geometry */ + +Beav.Geometry = new Object(); + +Beav.Geometry.distance = function(x1,y1,x2,y2) { + return Math.sqrt(Math.pow(x2 - x1,2) + Math.pow(y2 - y1,2)); +}; + +/* + This is used to handle drag on devices that have both a touch screen and a mouse. + Can be tested on chrome by loading a task in desktop mode, then switching to tablet mode. + To call instead of element.drag(onMove, onStart, onEnd); +*/ +Beav.dragWithTouch = function(element, onMove, onStart, onEnd) { + var touchingX = 0; + var touchingY = 0; + var disabled = false; + + function onTouchStart(evt) { + if (disabled) { + return; + } + var touches = evt.changedTouches; + touchingX = touches[0].pageX; + touchingY = touches[0].pageY; + onStart(touches[0].pageX, touches[0].pageY, evt); + } + + function onTouchEnd(evt) { + if (disabled) { + return; + } + onEnd(null); + } + + function onTouchMove(evt) { + if (disabled) { + return; + } + var touches = evt.changedTouches; + var dx = touches[0].pageX - touchingX; + var dy = touches[0].pageY - touchingY; + onMove(dx, dy, touches[0].pageX, touches[0].pageY, evt); + } + + function callOnStart(x,y,event) { + disabled = true; + onStart(x,y,event); + } + + function callOnMove(dx,dy,x,y,event) { + disabled = true; + onMove(dx,dy,x,y,event); + } + + function callOnEnd(event) { + disabled = false; + onEnd(event); + } + + // element.undrag(); + element.drag(callOnMove,callOnStart,callOnEnd); + if (element.touchstart) { + element.touchstart(onTouchStart); + element.touchend(onTouchEnd); + element.touchcancel(onTouchEnd); + element.touchmove(onTouchMove); + } +} +(function() { + +'use strict'; + +// requires jQuery, and a task object in the global scope. + +// this should be called before the task loads, because the task can modify +// its html at load, and we want to return unmodified html in getTaskResources. +var res = {}; + +var taskResourcesLoaded = false; + +window.implementGetResources = function(task) { + task.getResources = function(callback) + { + if (taskResourcesLoaded) { + callback(res); + return; + } + res.task = ('task' in res) ? res.task : [{ type: 'html', content: $('#task').html() }]; + res.solution = ('solution' in res) ? res.solution : [{ type: 'html', content: $('#solution').html() }]; + res.grader = []; + res.task_modules = []; + res.solution_modules = []; + res.grader_modules = []; + if (!res.hints) { + res.hints = []; + $('.hint').each(function(index) { + res.hints[res.hints.length] = [{type: 'html', content: $(this).html() }]; + $(this).attr('hint-Num', res.hints.length-1); + }); + } + res.proxy = []; + res.proxy_modules = []; + res.display = []; + res.display_modules = []; + res.sat = []; + res.sat_modules = []; + res.files = []; + if (!res.title) { + res.title = $('title').text(); + } + + // Resources + var curDest = 'task'; + var curType = 'javascript'; + $('script, style, link').each(function() { + if ($(this).hasClass('remove')) { + return; + } + if ($(this).hasClass('solution') && $(this).hasClass('module')) { + curDest = res.solution_modules; + } + else if ($(this).hasClass('solution')) { + curDest = res.solution; + } + else if ($(this).hasClass('grader') && $(this).hasClass('module')) { + curDest = res.grader_modules; + } + else if ($(this).hasClass('grader')) { + curDest = res.grader; + } + else if ($(this).hasClass('hint')) { + res.hints.push([{ type: 'html', content: $(this).html() }]); + return; + } + else if ($(this).hasClass('proxy') && $(this).hasClass('module')) { + curDest = res.proxy_modules; + } + else if ($(this).hasClass('proxy')) { + curDest = res.proxy; + } + else if ($(this).hasClass('stdButtonsAndMessages') && $(this).hasClass('module')) { + curDest = res.display_modules; + } + else if ($(this).hasClass('stdButtonsAndMessages')) { + curDest = res.display; + } + else if ($(this).hasClass('stdAnswerTypes') && $(this).hasClass('module')) { + curDest = res.sat_modules; + } + else if ($(this).hasClass('stdAnswerTypes')) { + curDest = res.sat; + } + else if ($(this).hasClass('module')) { + curDest = res.task_modules; + } + else { + curDest = res.task; + } + + if ($(this).is('script')) { + curType = 'javascript'; + } + else if ($(this).is('style') || $(this).is('link')) { + curType = 'css'; + } + + if ($(this).attr('src')) { + curDest.push({ type: curType, url: $(this).attr('src'), id: $(this).attr('id') }); + } + else if ($(this).attr('href')) { + curDest.push({ type: curType, url: $(this).attr('href'), id: $(this).attr('id') }); + } + else { + curDest.push({ type: curType, id: $(this).attr('id'), content: $(this).html() }); + } + }); + + // Images + var images = []; + var image = ''; + $('#task img').each(function() { + var src = $(this).attr('src'); + if (src) { + image = src.toString(); + if ($.inArray(image, images) === -1) { + res.task.push({ type: 'image', url: image }); + images.push(image); + } + } + }); + fillImages($('#task').html(), images, res.task); + $('script').each(function() { + if ($(this).hasClass('remove') || $(this).attr('src') || $(this).attr('href')) { + return; + } + fillImages($(this).html(), images, res.task); + }); + $('#solution img').each(function() { + image = $(this).attr('src').toString(); + if ($.inArray(image, images) === -1) { + res.solution.push({ type: 'image', url: image }); + images.push(image); + } + }); + fillImages($('#solution').html(), images, res.solution); + $('.hint').each(function() { + var hintnum = $(this).attr('hint-num'); + $('[hint-num='+hintnum+'] img').each(function() { + image = $(this).attr('src').toString(); + if ($.inArray(image, images) === -1) { + res.hints[hintnum].push({ type: 'image', url: image }); + images.push(image); + } + }); + fillImages($(this).html(), images, res.hints[hintnum]); + }); + + // Links + $('iframe').each(function () { + var curUrl = $(this).attr('src'); + if(curUrl.indexOf('://') == -1 && curUrl.charAt(0) != '/') { + res.files.push({ type: this.tagName, url: $(this).attr('src') }); + } + }); + + // Other resources + $('source, track').each(function() { + res.files.push({ type: this.tagName, url: $(this).attr('src') }); + }); + $('fioi-video-player').each(function() { + var fileAttributes = ["data-source", "data-image", "data-subtitles"]; + for(var i=0; i\ +
\ + \ + \ + \ +
Concours castorLe concours Castor
\ + ' + }, + laptop: { + 'header' : '\ +
\ + \ + \ + \ + \ +
Concours AlkindiLe concours Alkindi
\ +
' + }, + none: { + 'header' : '' + } + }; + + function inIframe() { + try { + return window.self !== window.top; + } catch (e) { + return false; + } + } + + + + if(typeof window.jwt == 'undefined') { + window.jwt = { + isDummy: true, + sign: function() { return null; }, + decode: function(token) { return token; } + }; + } + + function TaskToken(data, key) { + + this.data = data + this.data.sHintsRequested = "[]"; + this.key = key + + var query = document.location.search.replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0]; + this.queryToken = query.sToken; + + this.addHintRequest = function(hint_params, callback) { + try { + hint_params = jwt.decode(hint_params).askedHint; + } catch(e) {} + var hintsReq = JSON.parse(this.data.sHintsRequested); + var exists = hintsReq.find(function(h) { + return h == hint_params; + }); + if(!exists) { + hintsReq.push(hint_params); + this.data.sHintsRequested = JSON.stringify(hintsReq); + } + return this.get(callback); + } + + this.update = function(newData, callback) { + for(var key in newData) { + this.data[key] = newData[key]; + } + } + + this.getToken = function(data, callback) { + var res = jwt.sign(data, this.key) + if(callback) { + // imitate async req + setTimeout(function() { + callback(res) + }, 0); + } + return res; + } + + this.get = function(callback) { + if(window.jwt.isDummy && this.queryToken) { + var token = this.queryToken; + if(callback) { + // imitate async req + setTimeout(function() { + callback(token) + }, 0); + } + return token; + } + return this.getToken(this.data, callback); + } + + this.getAnswerToken = function(answer, callback) { + var answerData = {}; + for(var key in this.data) { + answerData[key] = this.data[key]; + } + answerData.sAnswer = answer; + return this.getToken(answerData, callback); + } + } + + + function AnswerToken(key) { + this.key = key + this.get = function(answer, callback) { + var res = jwt.sign(answer, this.key) + if(callback) { + // imitate async req + setTimeout(function() { + callback(res) + }, 0) + } + return res; + } + } + + + +var taskMetaData; + +// important for tracker.js +var compiledTask = true; + +window.miniPlatformShowSolution = function() { + $("#showSolutionButton").hide(); + task.getAnswer(function(answer) { + task.showViews({"task": true, "solution": true}, function() { + // For tasks with no feedback / older tasks + // miniPlatformPreviewGrade(answer); + platform.trigger('showViews', [{"task": true, "solution": true}]); + }); + }); +} + +function miniPlatformPreviewGrade(answer) { + var minScore = -3; + if (taskMetaData.fullFeedback) { + minScore = 0; + } + var maxScore = 40; + var score; + var showGrade = function(score) { + if ($("#previewScorePopup").length === 0) { + $("
" + + "
" + + "


").insertBefore("#solution"); + } + $("#previewScorePopup").show(); + $("#previewScoreMessage").html("" + getLanguageString('showSolution') + " " + score + "/" + maxScore + "
" + getLanguageString('showSolution')); + }; + // acceptedAnswers is not documented, but necessary for old Bebras tasks + if (taskMetaData.acceptedAnswers && taskMetaData.acceptedAnswers[0]) { + if ($.inArray("" + answer, taskMetaData.acceptedAnswers) > -1) { + score = maxScore; + } + else { + score = minScore; + } + showGrade(score); + } else { + score = grader.gradeTask(answer, null, showGrade); + } +} + +var alreadyStayed = false; + +var miniPlatformValidate = function(task) { return function(mode, success, error) { + //$.post('updateTestToken.php', {action: 'showSolution'}, function(){}, 'json'); + if (mode == 'nextImmediate' || mode == 'log') { + return; + } + if (mode == 'stay') { + if (alreadyStayed) { + platform.trigger('validate', [mode]); + if (success) { + success(); + } + } else { + alreadyStayed = true; + } + } + if (mode == 'cancel') { + alreadyStayed = false; + } + if(platform.registered_objects && platform.registered_objects.length > 0) { + platform.trigger('validate', [mode]); + } else { + // Try to validate + task.getAnswer(function(answer) { + task.gradeAnswer(answer, task_token.getAnswerToken(answer), function(score, message) { + if(success) { success(); } + }) + }); + } + if (success) { + success(); + } +}}; + +function getUrlParameter(sParam) +{ + var sPageURL = window.location.search.substring(1); + var sURLVariables = sPageURL.split('&'); + for (var i = 0; i < sURLVariables.length; i++) + { + var sParameterName = sURLVariables[i].split('='); + if (sParameterName[0] == sParam) + { + return decodeURIComponent(sParameterName[1]); + } + } +} + +function getHashParameter(sParam) +{ + var sPageURL = window.location.hash.substring(1); + var sURLVariables = sPageURL.split('&'); + for (var i = 0; i < sURLVariables.length; i++) + { + var sParameterName = sURLVariables[i].split('='); + if (sParameterName[0] == sParam) + { + return decodeURIComponent(sParameterName[1]); + } + } +} + +var chooseView = (function () { + // Manages the buttons to choose the view + return { + doubleEnabled: false, + isDouble: false, + lastShownViews: {}, + + init: function(views) { + if (! $("#choose-view").length) + $(document.body).append('
'); + $("#choose-view").html(""); + // Display buttons to select task view or solution view + /* + for(var viewName in views) { + if (!views[viewName].requires) { + var btn = $('') + $("#choose-view").append(btn); + btn.click(this.selectFactory(viewName)); + } + } + */ + $("#grade").remove(); + var btnGradeAnswer = $('
'); + // display grader button only if dev mode by adding URL hash 'dev' + if (getHashParameter('dev')) { + $(document.body).append(btnGradeAnswer); + } + btnGradeAnswer.click(function() { + task.getAnswer(function(answer) { + answer_token.get(answer, function(answer_token) { + task.gradeAnswer(answer, answer_token, function(score, message, scoreToken) { + alert("Score : " + score + ", message : " + message); + }); + }) + }, function() { + alert("error"); + }); + }) + }, + + reinit: function(views) { + this.init(views); + var newShownViews = {}; + for(var viewName in this.lastShownViews) { + if(!this.lastShownViews[viewName]) { continue; } + if(views[viewName] && !views[viewName].requires) { + newShownViews[viewName] = true; + } + } + for(var viewName in views) { + if(views[viewName].includes) { + for(var i=0; i'); + var platformLoad = function(task) { + window.task_token.update({id: taskMetaData.id}); + window.answer_token = new AnswerToken(demo_key) + + platform.validate = miniPlatformValidate(task); + platform.updateHeight = function(height,success,error) {if (success) {success();}}; + platform.updateDisplay = function(data,success,error) { + if(data.views) { + chooseView.reinit(data.views); + } + if (success) {success();} + }; + var taskOptions = {}; + try { + var strOptions = getUrlParameter("options"); + if (strOptions !== undefined) { + taskOptions = $.parseJSON(strOptions); + } + } catch(exception) { + alert("Error: invalid options"); + } + var minScore = -3; + if (taskMetaData.fullFeedback) { + minScore = 0; + } + platform.getTaskParams = function(key, defaultValue, success, error) { + var res = {'minScore': minScore, 'maxScore': 40, 'noScore': 0, 'readOnly': false, 'randomSeed': "0", 'options': taskOptions}; + if (key) { + if (key !== 'options' && key in res) { + res = res[key]; + } else if (res.options && key in res.options) { + res = res.options[key]; + } else { + res = (typeof defaultValue !== 'undefined') ? defaultValue : null; + } + } + if (success) { + success(res); + } else { + return res; + } + }; + platform.askHint = function(hint_params, success, error) { + /* + $.post('updateTestToken.php', JSON.stringify({action: 'askHint'}), function(postRes){ + if (success) {success();} + }, 'json'); + */ + task_token.addHintRequest(hint_params, function(token) { + task.updateToken(token, function() {}) + success(token) + }) + }; + + + var loadedViews = {'task': true, 'solution': true, 'hints': true, 'editor': true, 'grader': true, 'metadata': true, 'submission': true}; + var shownViews = {'task': true}; + // TODO: modifs ARTHUR à relire + if (taskOptions.showSolutionOnLoad) { + shownViews.solution = true; + } + if (!taskOptions.hideTitle) { + $("#task h1").show(); + } + + if (taskMetaData.fullFeedback) { + loadedViews.grader = true; + } + + task.load( + loadedViews, + function() { + platform.trigger('load', [loadedViews]); + task.getViews(function(views) { + chooseView.init(views); + }); + task.showViews(shownViews, function() { + chooseView.update(shownViews); + platform.trigger('showViews', [{"task": true}]); + }); + if ($("#solution").length) { + $("#task").append("
"); + } + + // add branded header to platformless task depending on avatarType + // defaults to beaver platform branding + if(window.displayHelper) { + if (miniPlatformWrapping[displayHelper.avatarType].header) { + $('body').prepend(miniPlatformWrapping[displayHelper.avatarType].header); + } else { + $('body').prepend(miniPlatformWrapping[beaver].header); + } + } + }, + function(error) { + console.error(error) + } + ); + + + task_token.get(function(token) { + task.updateToken(token, function() {}) + }) + + + /* For the 'resize' event listener below, we use a cross-browser + * compatible version for "addEventListener" (modern) and "attachEvent" (old). + * Source: https://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer + */ + function addEvent(evnt, elem, func) { + if (elem.addEventListener) // W3C DOM + elem.addEventListener(evnt,func,false); + else if (elem.attachEvent) { // IE DOM + elem.attachEvent("on"+evnt, func); + } + else { // No much to do + elem[evnt] = func; + } + } + + addEvent('resize', window, function() { + task.getViews(function(views) { + chooseView.reinit(views); + }); + }); + }; + var getMetaDataAndLoad = function(task) { + task.getMetaData(function(metaData) { + taskMetaData = metaData; + platformLoad(task); + }); + }; + if (window.platform.task || platform.initFailed) { + // case everything went fine with task loading, or task loading failed + // (due to missing jschannel and file:// protocol... + getMetaDataAndLoad(window.task ? window.task : window.platform.task); + } else { + // task is not loaded yet + var oldInit = platform.initWithTask; + platform.initWithTask = function(task) { + oldInit(task); + getMetaDataAndLoad(task); + }; + } + } +}); + +})(); diff --git a/bundles/blockly-base.js b/bundles/blockly-base.js new file mode 100644 index 000000000..756599e9e --- /dev/null +++ b/bundles/blockly-base.js @@ -0,0 +1,1788 @@ +// Do not edit this file; automatically generated by build.py. +'use strict'; + +var COMPILED=!0,goog=goog||{};goog.global=this;goog.isDef=function(a){return void 0!==a};goog.exportPath_=function(a,b,c){a=a.split(".");c=c||goog.global;a[0]in c||!c.execScript||c.execScript("var "+a[0]);for(var d;a.length&&(d=a.shift());)!a.length&&goog.isDef(b)?c[d]=b:c=c[d]?c[d]:c[d]={}}; +goog.define=function(a,b){var c=b;COMPILED||(goog.global.CLOSURE_UNCOMPILED_DEFINES&&Object.prototype.hasOwnProperty.call(goog.global.CLOSURE_UNCOMPILED_DEFINES,a)?c=goog.global.CLOSURE_UNCOMPILED_DEFINES[a]:goog.global.CLOSURE_DEFINES&&Object.prototype.hasOwnProperty.call(goog.global.CLOSURE_DEFINES,a)&&(c=goog.global.CLOSURE_DEFINES[a]));goog.exportPath_(a,c)};goog.DEBUG=!1;goog.LOCALE="en";goog.TRUSTED_SITE=!0;goog.STRICT_MODE_COMPATIBLE=!1;goog.DISALLOW_TEST_ONLY_CODE=COMPILED&&!goog.DEBUG; +goog.ENABLE_CHROME_APP_SAFE_SCRIPT_LOADING=!1;goog.provide=function(a){if(goog.isInModuleLoader_())throw Error("goog.provide can not be used within a goog.module.");if(!COMPILED&&goog.isProvided_(a))throw Error('Namespace "'+a+'" already declared.');goog.constructNamespace_(a)};goog.constructNamespace_=function(a,b){if(!COMPILED){delete goog.implicitNamespaces_[a];for(var c=a;(c=c.substring(0,c.lastIndexOf(".")))&&!goog.getObjectByName(c);)goog.implicitNamespaces_[c]=!0}goog.exportPath_(a,b)}; +goog.VALID_MODULE_RE_=/^[a-zA-Z_$][a-zA-Z0-9._$]*$/;goog.module=function(a){if(!goog.isString(a)||!a||-1==a.search(goog.VALID_MODULE_RE_))throw Error("Invalid module identifier");if(!goog.isInModuleLoader_())throw Error("Module "+a+" has been loaded incorrectly.");if(goog.moduleLoaderState_.moduleName)throw Error("goog.module may only be called once per module.");goog.moduleLoaderState_.moduleName=a;if(!COMPILED){if(goog.isProvided_(a))throw Error('Namespace "'+a+'" already declared.');delete goog.implicitNamespaces_[a]}}; +goog.module.get=function(a){return goog.module.getInternal_(a)};goog.module.getInternal_=function(a){if(!COMPILED)return goog.isProvided_(a)?a in goog.loadedModules_?goog.loadedModules_[a]:goog.getObjectByName(a):null};goog.moduleLoaderState_=null;goog.isInModuleLoader_=function(){return null!=goog.moduleLoaderState_}; +goog.module.declareLegacyNamespace=function(){if(!COMPILED&&!goog.isInModuleLoader_())throw Error("goog.module.declareLegacyNamespace must be called from within a goog.module");if(!COMPILED&&!goog.moduleLoaderState_.moduleName)throw Error("goog.module must be called prior to goog.module.declareLegacyNamespace.");goog.moduleLoaderState_.declareLegacyNamespace=!0}; +goog.setTestOnly=function(a){if(goog.DISALLOW_TEST_ONLY_CODE)throw a=a||"",Error("Importing test-only code into non-debug environment"+(a?": "+a:"."));};goog.forwardDeclare=function(a){};COMPILED||(goog.isProvided_=function(a){return a in goog.loadedModules_||!goog.implicitNamespaces_[a]&&goog.isDefAndNotNull(goog.getObjectByName(a))},goog.implicitNamespaces_={"goog.module":!0}); +goog.getObjectByName=function(a,b){for(var c=a.split("."),d=b||goog.global,e;e=c.shift();)if(goog.isDefAndNotNull(d[e]))d=d[e];else return null;return d};goog.globalize=function(a,b){var c=b||goog.global,d;for(d in a)c[d]=a[d]}; +goog.addDependency=function(a,b,c,d){if(goog.DEPENDENCIES_ENABLED){var e;a=a.replace(/\\/g,"/");var f=goog.dependencies_;d&&"boolean"!==typeof d||(d=d?{module:"goog"}:{});for(var g=0;e=b[g];g++)f.nameToPath[e]=a,f.loadFlags[a]=d;for(d=0;b=c[d];d++)a in f.requires||(f.requires[a]={}),f.requires[a][b]=!0}};goog.ENABLE_DEBUG_LOADER=!0;goog.logToConsole_=function(a){goog.global.console&&goog.global.console.error(a)}; +goog.require=function(a){if(!COMPILED){goog.ENABLE_DEBUG_LOADER&&goog.IS_OLD_IE_&&goog.maybeProcessDeferredDep_(a);if(goog.isProvided_(a)){if(goog.isInModuleLoader_())return goog.module.getInternal_(a)}else if(goog.ENABLE_DEBUG_LOADER){var b=goog.getPathFromDeps_(a);if(b)goog.writeScripts_(b);else throw a="goog.require could not find: "+a,goog.logToConsole_(a),Error(a);}return null}};goog.basePath="";goog.nullFunction=function(){}; +goog.abstractMethod=function(){throw Error("unimplemented abstract method");};goog.addSingletonGetter=function(a){a.getInstance=function(){if(a.instance_)return a.instance_;goog.DEBUG&&(goog.instantiatedSingletons_[goog.instantiatedSingletons_.length]=a);return a.instance_=new a}};goog.instantiatedSingletons_=[];goog.LOAD_MODULE_USING_EVAL=!0;goog.SEAL_MODULE_EXPORTS=goog.DEBUG;goog.loadedModules_={};goog.DEPENDENCIES_ENABLED=!COMPILED&&goog.ENABLE_DEBUG_LOADER;goog.TRANSPILE="detect"; +goog.TRANSPILER="transpile.js"; +goog.DEPENDENCIES_ENABLED&&(goog.dependencies_={loadFlags:{},nameToPath:{},requires:{},visited:{},written:{},deferred:{}},goog.inHtmlDocument_=function(){var a=goog.global.document;return null!=a&&"write"in a},goog.findBasePath_=function(){if(goog.isDef(goog.global.CLOSURE_BASE_PATH))goog.basePath=goog.global.CLOSURE_BASE_PATH;else if(goog.inHtmlDocument_())for(var a=goog.global.document.getElementsByTagName("SCRIPT"),b=a.length-1;0<=b;--b){var c=a[b].src,d=c.lastIndexOf("?"),d=-1==d?c.length:d;if("base.js"== +c.substr(d-7,7)){goog.basePath=c.substr(0,d-7);break}}},goog.importScript_=function(a,b){(goog.global.CLOSURE_IMPORT_SCRIPT||goog.writeScriptTag_)(a,b)&&(goog.dependencies_.written[a]=!0)},goog.IS_OLD_IE_=!(goog.global.atob||!goog.global.document||!goog.global.document.all),goog.importProcessedScript_=function(a,b,c){goog.importScript_("",'goog.retrieveAndExec_("'+a+'", '+b+", "+c+");")},goog.queuedModules_=[],goog.wrapModule_=function(a,b){return goog.LOAD_MODULE_USING_EVAL&&goog.isDef(goog.global.JSON)? +"goog.loadModule("+goog.global.JSON.stringify(b+"\n//# sourceURL="+a+"\n")+");":'goog.loadModule(function(exports) {"use strict";'+b+"\n;return exports});\n//# sourceURL="+a+"\n"},goog.loadQueuedModules_=function(){var a=goog.queuedModules_.length;if(0\x3c/script>')},goog.appendScriptSrcNode_=function(a){var b=goog.global.document,c=b.createElement("script");c.type="text/javascript";c.src=a;c.defer=!1;c.async=!1;b.head.appendChild(c)},goog.writeScriptTag_=function(a,b){if(goog.inHtmlDocument_()){var c= +goog.global.document;if(!goog.ENABLE_CHROME_APP_SAFE_SCRIPT_LOADING&&"complete"==c.readyState){if(/\bdeps.js$/.test(a))return!1;throw Error('Cannot write "'+a+'" after document load');}if(void 0===b)if(goog.IS_OLD_IE_){var d=" onreadystatechange='goog.onScriptLoad_(this, "+ ++goog.lastNonModuleScriptIndex_+")' ";c.write(' + + + + + + + + + + + + + + +
+
+
+
+		 +
+ +		 +
+
+

+
+
+ 		+
+
+
+
+ + + + \ No newline at end of file diff --git a/ext/machines/license.txt b/ext/machines/license.txt new file mode 100644 index 000000000..9eb54b0b1 --- /dev/null +++ b/ext/machines/license.txt @@ -0,0 +1,6 @@ +Copyright (c) 2011 Gregory Apou + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/ext/machines/ll1.html b/ext/machines/ll1.html new file mode 100644 index 000000000..93030b960 --- /dev/null +++ b/ext/machines/ll1.html @@ -0,0 +1,520 @@ + + +LL(1) Parser Generator + + + + + + + + +
+
LL(1) grammar ('' is ε):
+ +		 + + +
+ + + +
FIRSTFOLLOWNonterminal
+
+
+

Maximum number of steps:

+

Input (tokens):

+

+
+
TraceTree
+ + +
StackInputRule
+		 +
+
+ + + \ No newline at end of file diff --git a/ext/machines/lr1.html b/ext/machines/lr1.html new file mode 100644 index 000000000..c523a0115 --- /dev/null +++ b/ext/machines/lr1.html @@ -0,0 +1,223 @@ + + + +LR(1) Parser Generator + + + + + + + + + + + + + + + + +
+
+
+
+		 +
+ +		 +
+
+

+
+
+ 		+
+
+
+
+ + + + \ No newline at end of file diff --git a/ext/machines/slr.html b/ext/machines/slr.html new file mode 100644 index 000000000..0991dd8ab --- /dev/null +++ b/ext/machines/slr.html @@ -0,0 +1,226 @@ + + + +SLR Parser Generator + + + + + + + + + + + + + + + + +
+
+
+
+		 +
+ +		 +
+
+

+
+
+ 		+
+
+
+
+ + + + \ No newline at end of file diff --git a/ext/machines/turing.html b/ext/machines/turing.html new file mode 100644 index 000000000..4e9d6f56c --- /dev/null +++ b/ext/machines/turing.html @@ -0,0 +1,252 @@ + + + +Turing Machine + + + + + +
Examples:-
-
+

Alphabet: Σ = {>, #, }

+ + +
+Nonhalting states: {} +
Halting states: H = {} +		 +All states: K = {} +
+
+ + +
transitions
qσδ(q, σ)
+

Initial configuration: (, + >, + ) +

+

Maximum number of steps:

+

+

Transition results:

+ + \ No newline at end of file diff --git a/ext/mathjax/MathJax.js b/ext/mathjax/MathJax.js new file mode 100644 index 000000000..c54a1ed2d --- /dev/null +++ b/ext/mathjax/MathJax.js @@ -0,0 +1,19 @@ +/* + * /MathJax.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +if(document.getElementById&&document.childNodes&&document.createElement){if(!(window.MathJax&&MathJax.Hub)){if(window.MathJax){window.MathJax={AuthorConfig:window.MathJax}}else{window.MathJax={}}MathJax.isPacked=true;MathJax.version="2.7.5";MathJax.fileversion="2.7.5";MathJax.cdnVersion="2.7.5";MathJax.cdnFileVersions={};(function(d){var b=window[d];if(!b){b=window[d]={}}var e=[];var c=function(f){var g=f.constructor;if(!g){g=function(){}}for(var h in f){if(h!=="constructor"&&f.hasOwnProperty(h)){g[h]=f[h]}}return g};var a=function(){return function(){return arguments.callee.Init.call(this,arguments)}};b.Object=c({constructor:a(),Subclass:function(f,h){var g=a();g.SUPER=this;g.Init=this.Init;g.Subclass=this.Subclass;g.Augment=this.Augment;g.protoFunction=this.protoFunction;g.can=this.can;g.has=this.has;g.isa=this.isa;g.prototype=new this(e);g.prototype.constructor=g;g.Augment(f,h);return g},Init:function(f){var g=this;if(f.length===1&&f[0]===e){return g}if(!(g instanceof f.callee)){g=new f.callee(e)}return g.Init.apply(g,f)||g},Augment:function(f,g){var h;if(f!=null){for(h in f){if(f.hasOwnProperty(h)){this.protoFunction(h,f[h])}}if(f.toString!==this.prototype.toString&&f.toString!=={}.toString){this.protoFunction("toString",f.toString)}}if(g!=null){for(h in g){if(g.hasOwnProperty(h)){this[h]=g[h]}}}return this},protoFunction:function(g,f){this.prototype[g]=f;if(typeof f==="function"){f.SUPER=this.SUPER.prototype}},prototype:{Init:function(){},SUPER:function(f){return f.callee.SUPER},can:function(f){return typeof(this[f])==="function"},has:function(f){return typeof(this[f])!=="undefined"},isa:function(f){return(f instanceof Object)&&(this instanceof f)}},can:function(f){return this.prototype.can.call(this,f)},has:function(f){return this.prototype.has.call(this,f)},isa:function(g){var f=this;while(f){if(f===g){return true}else{f=f.SUPER}}return false},SimpleSUPER:c({constructor:function(f){return this.SimpleSUPER.define(f)},define:function(f){var h={};if(f!=null){for(var g in f){if(f.hasOwnProperty(g)){h[g]=this.wrap(g,f[g])}}if(f.toString!==this.prototype.toString&&f.toString!=={}.toString){h.toString=this.wrap("toString",f.toString)}}return h},wrap:function(i,h){if(typeof(h)!=="function"||!h.toString().match(/\.\s*SUPER\s*\(/)){return h}var g=function(){this.SUPER=g.SUPER[i];try{var f=h.apply(this,arguments)}catch(j){delete this.SUPER;throw j}delete this.SUPER;return f};g.toString=function(){return h.toString.apply(h,arguments)};return g}})});b.Object.isArray=Array.isArray||function(f){return Object.prototype.toString.call(f)==="[object Array]"};b.Object.Array=Array})("MathJax");(function(BASENAME){var BASE=window[BASENAME];if(!BASE){BASE=window[BASENAME]={}}var isArray=BASE.Object.isArray;var CALLBACK=function(data){var cb=function(){return arguments.callee.execute.apply(arguments.callee,arguments)};for(var id in CALLBACK.prototype){if(CALLBACK.prototype.hasOwnProperty(id)){if(typeof(data[id])!=="undefined"){cb[id]=data[id]}else{cb[id]=CALLBACK.prototype[id]}}}cb.toString=CALLBACK.prototype.toString;return cb};CALLBACK.prototype={isCallback:true,hook:function(){},data:[],object:window,execute:function(){if(!this.called||this.autoReset){this.called=!this.autoReset;return this.hook.apply(this.object,this.data.concat([].slice.call(arguments,0)))}},reset:function(){delete this.called},toString:function(){return this.hook.toString.apply(this.hook,arguments)}};var ISCALLBACK=function(f){return(typeof(f)==="function"&&f.isCallback)};var EVAL=function(code){return eval.call(window,code)};var TESTEVAL=function(){EVAL("var __TeSt_VaR__ = 1");if(window.__TeSt_VaR__){try{delete window.__TeSt_VaR__}catch(error){window.__TeSt_VaR__=null}}else{if(window.execScript){EVAL=function(code){BASE.__code=code;code="try {"+BASENAME+".__result = eval("+BASENAME+".__code)} catch(err) {"+BASENAME+".__result = err}";window.execScript(code);var result=BASE.__result;delete BASE.__result;delete BASE.__code;if(result instanceof Error){throw result}return result}}else{EVAL=function(code){BASE.__code=code;code="try {"+BASENAME+".__result = eval("+BASENAME+".__code)} catch(err) {"+BASENAME+".__result = err}";var head=(document.getElementsByTagName("head"))[0];if(!head){head=document.body}var script=document.createElement("script");script.appendChild(document.createTextNode(code));head.appendChild(script);head.removeChild(script);var result=BASE.__result;delete BASE.__result;delete BASE.__code;if(result instanceof Error){throw result}return result}}}TESTEVAL=null};var USING=function(args,i){if(arguments.length>1){if(arguments.length===2&&!(typeof arguments[0]==="function")&&arguments[0] instanceof Object&&typeof arguments[1]==="number"){args=[].slice.call(args,i)}else{args=[].slice.call(arguments,0)}}if(isArray(args)&&args.length===1&&typeof(args[0])==="function"){args=args[0]}if(typeof args==="function"){if(args.execute===CALLBACK.prototype.execute){return args}return CALLBACK({hook:args})}else{if(isArray(args)){if(typeof(args[0])==="string"&&args[1] instanceof Object&&typeof args[1][args[0]]==="function"){return CALLBACK({hook:args[1][args[0]],object:args[1],data:args.slice(2)})}else{if(typeof args[0]==="function"){return CALLBACK({hook:args[0],data:args.slice(1)})}else{if(typeof args[1]==="function"){return CALLBACK({hook:args[1],object:args[0],data:args.slice(2)})}}}}else{if(typeof(args)==="string"){if(TESTEVAL){TESTEVAL()}return CALLBACK({hook:EVAL,data:[args]})}else{if(args instanceof Object){return CALLBACK(args)}else{if(typeof(args)==="undefined"){return CALLBACK({})}}}}}throw Error("Can't make callback from given data")};var DELAY=function(time,callback){callback=USING(callback);callback.timeout=setTimeout(callback,time);return callback};var WAITFOR=function(callback,signal){callback=USING(callback);if(!callback.called){WAITSIGNAL(callback,signal);signal.pending++}};var WAITEXECUTE=function(){var signals=this.signal;delete this.signal;this.execute=this.oldExecute;delete this.oldExecute;var result=this.execute.apply(this,arguments);if(ISCALLBACK(result)&&!result.called){WAITSIGNAL(result,signals)}else{for(var i=0,m=signals.length;i0&&priority=0;i--){this.hooks.splice(i,1)}this.remove=[]}});var EXECUTEHOOKS=function(hooks,data,reset){if(!hooks){return null}if(!isArray(hooks)){hooks=[hooks]}if(!isArray(data)){data=(data==null?[]:[data])}var handler=HOOKS(reset);for(var i=0,m=hooks.length;ig){g=document.styleSheets.length}if(!i){i=document.head||((document.getElementsByTagName("head"))[0]);if(!i){i=document.body}}return i};var f=[];var c=function(){for(var k=0,j=f.length;k=this.timeout){i(this.STATUS.ERROR);return 1}return 0},file:function(j,i){if(i<0){a.Ajax.loadTimeout(j)}else{a.Ajax.loadComplete(j)}},execute:function(){this.hook.call(this.object,this,this.data[0],this.data[1])},checkSafari2:function(i,j,k){if(i.time(k)){return}if(document.styleSheets.length>j&&document.styleSheets[j].cssRules&&document.styleSheets[j].cssRules.length){k(i.STATUS.OK)}else{setTimeout(i,i.delay)}},checkLength:function(i,l,n){if(i.time(n)){return}var m=0;var j=(l.sheet||l.styleSheet);try{if((j.cssRules||j.rules||[]).length>0){m=1}}catch(k){if(k.message.match(/protected variable|restricted URI/)){m=1}else{if(k.message.match(/Security error/)){m=1}}}if(m){setTimeout(a.Callback([n,i.STATUS.OK]),0)}else{setTimeout(i,i.delay)}}},loadComplete:function(i){i=this.fileURL(i);var j=this.loading[i];if(j&&!j.preloaded){a.Message.Clear(j.message);clearTimeout(j.timeout);if(j.script){if(f.length===0){setTimeout(c,0)}f.push(j.script)}this.loaded[i]=j.status;delete this.loading[i];this.addHook(i,j.callback)}else{if(j){delete this.loading[i]}this.loaded[i]=this.STATUS.OK;j={status:this.STATUS.OK}}if(!this.loadHooks[i]){return null}return this.loadHooks[i].Execute(j.status)},loadTimeout:function(i){if(this.loading[i].timeout){clearTimeout(this.loading[i].timeout)}this.loading[i].status=this.STATUS.ERROR;this.loadError(i);this.loadComplete(i)},loadError:function(i){a.Message.Set(["LoadFailed","File failed to load: %1",i],null,2000);a.Hub.signal.Post(["file load error",i])},Styles:function(k,l){var i=this.StyleString(k);if(i===""){l=a.Callback(l);l()}else{var j=document.createElement("style");j.type="text/css";this.head=h(this.head);this.head.appendChild(j);if(j.styleSheet&&typeof(j.styleSheet.cssText)!=="undefined"){j.styleSheet.cssText=i}else{j.appendChild(document.createTextNode(i))}l=this.timer.create.call(this,l,j)}return l},StyleString:function(n){if(typeof(n)==="string"){return n}var k="",o,m;for(o in n){if(n.hasOwnProperty(o)){if(typeof n[o]==="string"){k+=o+" {"+n[o]+"}\n"}else{if(a.Object.isArray(n[o])){for(var l=0;l="0"&&q<="9"){f[j]=p[f[j]-1];if(typeof f[j]==="number"){f[j]=this.number(f[j])}}else{if(q==="{"){q=f[j].substr(1);if(q>="0"&&q<="9"){f[j]=p[f[j].substr(1,f[j].length-2)-1];if(typeof f[j]==="number"){f[j]=this.number(f[j])}}else{var k=f[j].match(/^\{([a-z]+):%(\d+)\|(.*)\}$/);if(k){if(k[1]==="plural"){var d=p[k[2]-1];if(typeof d==="undefined"){f[j]="???"}else{d=this.plural(d)-1;var h=k[3].replace(/(^|[^%])(%%)*%\|/g,"$1$2%\uEFEF").split(/\|/);if(d>=0&&d=3){c.push([f[0],f[1],this.processSnippet(g,f[2])])}else{c.push(e[d])}}}}else{c.push(e[d])}}return c},markdownPattern:/(%.)|(\*{1,3})((?:%.|.)+?)\2|(`+)((?:%.|.)+?)\4|\[((?:%.|.)+?)\]\(([^\s\)]+)\)/,processMarkdown:function(b,h,d){var j=[],e;var c=b.split(this.markdownPattern);var g=c[0];for(var f=1,a=c.length;f1?d[1]:""));f=null}if(e&&(!b.preJax||d)){c.nodeValue=c.nodeValue.replace(b.postJax,(e.length>1?e[1]:""))}if(f&&!f.nodeValue.match(/\S/)){f=f.previousSibling}}if(b.preRemoveClass&&f&&f.className===b.preRemoveClass){a.MathJax.preview=f}a.MathJax.checked=1},processInput:function(a){var b,i=MathJax.ElementJax.STATE;var h,e,d=a.scripts.length;try{while(a.ithis.processUpdateTime&&a.i1){d.jax[a.outputJax].push(b)}b.MathJax.state=c.OUTPUT},prepareOutput:function(c,f){while(c.jthis.processUpdateTime&&h.i=0;q--){if((b[q].src||"").match(f)){s.script=b[q].innerHTML;if(RegExp.$2){var t=RegExp.$2.substr(1).split(/\&/);for(var p=0,l=t.length;p=parseInt(y[z])}}return true},Select:function(j){var i=j[d.Browser];if(i){return i(d.Browser)}return null}};var e=k.replace(/^Mozilla\/(\d+\.)+\d+ /,"").replace(/[a-z][-a-z0-9._: ]+\/\d+[^ ]*-[^ ]*\.([a-z][a-z])?\d+ /i,"").replace(/Gentoo |Ubuntu\/(\d+\.)*\d+ (\([^)]*\) )?/,"");d.Browser=d.Insert(d.Insert(new String("Unknown"),{version:"0.0"}),a);for(var v in a){if(a.hasOwnProperty(v)){if(a[v]&&v.substr(0,2)==="is"){v=v.slice(2);if(v==="Mac"||v==="PC"){continue}d.Browser=d.Insert(new String(v),a);var r=new RegExp(".*(Version/| Trident/.*; rv:)((?:\\d+\\.)+\\d+)|.*("+v+")"+(v=="MSIE"?" ":"/")+"((?:\\d+\\.)*\\d+)|(?:^|\\(| )([a-z][-a-z0-9._: ]+|(?:Apple)?WebKit)/((?:\\d+\\.)+\\d+)");var u=r.exec(e)||["","","","unknown","0.0"];d.Browser.name=(u[1]!=""?v:(u[3]||u[5]));d.Browser.version=u[2]||u[4]||u[6];break}}}try{d.Browser.Select({Safari:function(j){var i=parseInt((String(j.version).split("."))[0]);if(i>85){j.webkit=j.version}if(i>=538){j.version="8.0"}else{if(i>=537){j.version="7.0"}else{if(i>=536){j.version="6.0"}else{if(i>=534){j.version="5.1"}else{if(i>=533){j.version="5.0"}else{if(i>=526){j.version="4.0"}else{if(i>=525){j.version="3.1"}else{if(i>500){j.version="3.0"}else{if(i>400){j.version="2.0"}else{if(i>85){j.version="1.0"}}}}}}}}}}j.webkit=(navigator.appVersion.match(/WebKit\/(\d+)\./))[1];j.isMobile=(navigator.appVersion.match(/Mobile/i)!=null);j.noContextMenu=j.isMobile},Firefox:function(j){if((j.version==="0.0"||k.match(/Firefox/)==null)&&navigator.product==="Gecko"){var m=k.match(/[\/ ]rv:(\d+\.\d.*?)[\) ]/);if(m){j.version=m[1]}else{var i=(navigator.buildID||navigator.productSub||"0").substr(0,8);if(i>="20111220"){j.version="9.0"}else{if(i>="20111120"){j.version="8.0"}else{if(i>="20110927"){j.version="7.0"}else{if(i>="20110816"){j.version="6.0"}else{if(i>="20110621"){j.version="5.0"}else{if(i>="20110320"){j.version="4.0"}else{if(i>="20100121"){j.version="3.6"}else{if(i>="20090630"){j.version="3.5"}else{if(i>="20080617"){j.version="3.0"}else{if(i>="20061024"){j.version="2.0"}}}}}}}}}}}}j.isMobile=(navigator.appVersion.match(/Android/i)!=null||k.match(/ Fennec\//)!=null||k.match(/Mobile/)!=null)},Chrome:function(i){i.noContextMenu=i.isMobile=!!navigator.userAgent.match(/ Mobile[ \/]/)},Opera:function(i){i.version=opera.version()},Edge:function(i){i.isMobile=!!navigator.userAgent.match(/ Phone/)},MSIE:function(j){j.isMobile=!!navigator.userAgent.match(/ Phone/);j.isIE9=!!(document.documentMode&&(window.performance||window.msPerformance));MathJax.HTML.setScriptBug=!j.isIE9||document.documentMode<9;MathJax.Hub.msieHTMLCollectionBug=(document.documentMode<9);if(document.documentMode<10&&!s.params.NoMathPlayer){try{new ActiveXObject("MathPlayer.Factory.1");j.hasMathPlayer=true}catch(m){}try{if(j.hasMathPlayer){var i=document.createElement("object");i.id="mathplayer";i.classid="clsid:32F66A20-7614-11D4-BD11-00104BD3F987";g.appendChild(i);document.namespaces.add("m","http://www.w3.org/1998/Math/MathML");j.mpNamespace=true;if(document.readyState&&(document.readyState==="loading"||document.readyState==="interactive")){document.write('');j.mpImported=true}}else{document.namespaces.add("mjx_IE_fix","http://www.w3.org/1999/xlink")}}catch(m){}}}})}catch(c){console.error(c.message)}d.Browser.Select(MathJax.Message.browsers);if(h.AuthorConfig&&typeof h.AuthorConfig.AuthorInit==="function"){h.AuthorConfig.AuthorInit()}d.queue=h.Callback.Queue();d.queue.Push(["Post",s.signal,"Begin"],["Config",s],["Cookie",s],["Styles",s],["Message",s],function(){var i=h.Callback.Queue(s.Jax(),s.Extensions());return i.Push({})},["Menu",s],s.onLoad(),function(){MathJax.isReady=true},["Typeset",s],["Hash",s],["MenuZoom",s],["Post",s.signal,"End"])})("MathJax")}}; diff --git a/ext/mathjax/config/TeX-MML-AM_CHTML.js b/ext/mathjax/config/TeX-MML-AM_CHTML.js new file mode 100644 index 000000000..5b6f4db71 --- /dev/null +++ b/ext/mathjax/config/TeX-MML-AM_CHTML.js @@ -0,0 +1,69 @@ +/* + * /MathJax/config/TeX-MML-AM_CHTML.js + * + * Copyright (c) 2010-2018 The MathJax Consortium + * + * Part of the MathJax library. + * See http://www.mathjax.org for details. + * + * Licensed under the Apache License, Version 2.0; + * you may not use this file except in compliance with the License. + * + * http://www.apache.org/licenses/LICENSE-2.0 + */ + +MathJax.Ajax.Preloading( + "[MathJax]/jax/input/TeX/config.js", + "[MathJax]/jax/input/MathML/config.js", + "[MathJax]/jax/input/AsciiMath/config.js", + "[MathJax]/jax/output/CommonHTML/config.js", + "[MathJax]/jax/output/PreviewHTML/config.js", + "[MathJax]/extensions/tex2jax.js", + "[MathJax]/extensions/mml2jax.js", + "[MathJax]/extensions/asciimath2jax.js", + "[MathJax]/extensions/MathEvents.js", + "[MathJax]/extensions/MathZoom.js", + "[MathJax]/extensions/MathMenu.js", + "[MathJax]/jax/element/mml/jax.js", + "[MathJax]/extensions/toMathML.js", + "[MathJax]/extensions/TeX/noErrors.js", + "[MathJax]/extensions/TeX/noUndefined.js", + "[MathJax]/jax/input/TeX/jax.js", + "[MathJax]/extensions/TeX/AMSmath.js", + "[MathJax]/extensions/TeX/AMSsymbols.js", + "[MathJax]/jax/input/MathML/jax.js", + "[MathJax]/jax/input/AsciiMath/jax.js", + "[MathJax]/jax/output/PreviewHTML/jax.js", + "[MathJax]/extensions/fast-preview.js", + "[MathJax]/extensions/AssistiveMML.js", + "[MathJax]/extensions/a11y/accessibility-menu.js" +); + +MathJax.Hub.Config({ + extensions: ['[a11y]/accessibility-menu.js'] +}); + +MathJax.InputJax.TeX=MathJax.InputJax({id:"TeX",version:"2.7.5",directory:MathJax.InputJax.directory+"/TeX",extensionDir:MathJax.InputJax.extensionDir+"/TeX",config:{TagSide:"right",TagIndent:"0.8em",MultLineWidth:"85%",equationNumbers:{autoNumber:"none",formatNumber:function(a){return a},formatTag:function(a){return"("+a+")"},formatID:function(a){return"mjx-eqn-"+String(a).replace(/\s/g,"_")},formatURL:function(b,a){return a+"#"+encodeURIComponent(b)},useLabelIds:true}},resetEquationNumbers:function(){}});MathJax.InputJax.TeX.Register("math/tex");MathJax.InputJax.TeX.loadComplete("config.js"); +MathJax.InputJax.MathML=MathJax.InputJax({id:"MathML",version:"2.7.5",directory:MathJax.InputJax.directory+"/MathML",extensionDir:MathJax.InputJax.extensionDir+"/MathML",entityDir:MathJax.InputJax.directory+"/MathML/entities",config:{useMathMLspacing:false}});MathJax.InputJax.MathML.Register("math/mml");MathJax.InputJax.MathML.loadComplete("config.js"); +MathJax.InputJax.AsciiMath=MathJax.InputJax({id:"AsciiMath",version:"2.7.5",directory:MathJax.InputJax.directory+"/AsciiMath",extensionDir:MathJax.InputJax.extensionDir+"/AsciiMath",config:{fixphi:true,useMathMLspacing:true,displaystyle:true,decimalsign:"."}});MathJax.InputJax.AsciiMath.Register("math/asciimath");MathJax.InputJax.AsciiMath.loadComplete("config.js"); +MathJax.OutputJax.CommonHTML=MathJax.OutputJax({id:"CommonHTML",version:"2.7.5",directory:MathJax.OutputJax.directory+"/CommonHTML",extensionDir:MathJax.OutputJax.extensionDir+"/CommonHTML",autoloadDir:MathJax.OutputJax.directory+"/CommonHTML/autoload",fontDir:MathJax.OutputJax.directory+"/CommonHTML/fonts",webfontDir:MathJax.OutputJax.fontDir+"/HTML-CSS",config:{matchFontHeight:true,scale:100,minScaleAdjust:50,mtextFontInherit:false,undefinedFamily:"STIXGeneral,'Cambria Math','Arial Unicode MS',serif",EqnChunk:(MathJax.Hub.Browser.isMobile?20:100),EqnChunkFactor:1.5,EqnChunkDelay:100,linebreaks:{automatic:false,width:"container"}}});if(!MathJax.Hub.config.delayJaxRegistration){MathJax.OutputJax.CommonHTML.Register("jax/mml")}MathJax.OutputJax.CommonHTML.loadComplete("config.js"); +MathJax.OutputJax.PreviewHTML=MathJax.OutputJax({id:"PreviewHTML",version:"2.7.5",directory:MathJax.OutputJax.directory+"/PreviewHTML",extensionDir:MathJax.OutputJax.extensionDir+"/PreviewHTML",noFastPreview:true,config:{scale:100,minScaleAdjust:50,mtextFontInherit:false,linebreaks:{automatic:false,width:"container"}}});if(!MathJax.Hub.config.delayJaxRegistration){MathJax.OutputJax.PreviewHTML.Register("jax/mml")}MathJax.OutputJax.PreviewHTML.loadComplete("config.js"); +MathJax.Extension.tex2jax={version:"2.7.5",config:{inlineMath:[["\\(","\\)"]],displayMath:[["$$","$$"],["\\[","\\]"]],skipTags:["script","noscript","style","textarea","pre","code","annotation","annotation-xml"],ignoreClass:"tex2jax_ignore",processClass:"tex2jax_process",processEscapes:false,processEnvironments:true,processRefs:true,preview:"TeX"},ignoreTags:{br:(MathJax.Hub.Browser.isMSIE&&document.documentMode<9?"\n":" "),wbr:"","#comment":""},PreProcess:function(a){if(!this.configured){this.config=MathJax.Hub.CombineConfig("tex2jax",this.config);if(this.config.Augment){MathJax.Hub.Insert(this,this.config.Augment)}if(typeof(this.config.previewTeX)!=="undefined"&&!this.config.previewTeX){this.config.preview="none"}this.configured=true}if(typeof(a)==="string"){a=document.getElementById(a)}if(!a){a=document.body}if(this.createPatterns()){this.scanElement(a,a.nextSibling)}},createPatterns:function(){var d=[],e=[],c,a,b=this.config;this.match={};for(c=0,a=b.inlineMath.length;c0)},patternQuote:function(a){return a.replace(/([\^$(){}+*?\-|\[\]\:\\])/g,"\\$1")},endPattern:function(a){return new RegExp(this.patternQuote(a)+"|\\\\.|[{}]","g")},sortLength:function(d,c){if(d.length!==c.length){return c.length-d.length}return(d==c?0:(d/i,"").replace(/<\?xml:namespace .*?\/>/i,"");b=b.replace(/ /g," ")}MathJax.HTML.setScript(a,b);d.removeChild(e)}else{var c=MathJax.HTML.Element("span");c.appendChild(e);MathJax.HTML.setScript(a,c.innerHTML)}if(this.config.preview!=="none"){this.createPreview(e,a)}},ProcessMathFlattened:function(f){var d=f.parentNode;if(!d||d.className===MathJax.Hub.config.preRemoveClass){return}var b=document.createElement("script");b.type="math/mml";d.insertBefore(b,f);var c="",e,a=f;while(f&&f.nodeName!=="/MATH"){e=f;f=f.nextSibling;c+=this.NodeHTML(e);e.parentNode.removeChild(e)}if(f&&f.nodeName==="/MATH"){f.parentNode.removeChild(f)}b.text=c+"";if(this.config.preview!=="none"){this.createPreview(a,b)}},NodeHTML:function(e){var c,b,a;if(e.nodeName==="#text"){c=this.quoteHTML(e.nodeValue)}else{if(e.nodeName==="#comment"){c=""}else{c="<"+e.nodeName.toLowerCase();for(b=0,a=e.attributes.length;b";if(e.outerHTML!=null&&e.outerHTML.match(/(.<\/[A-Z]+>|\/>)$/)){for(b=0,a=e.childNodes.length;b"}}}return c},OuterHTML:function(d){if(d.nodeName.charAt(0)==="#"){return this.NodeHTML(d)}if(!this.AttributeBug){return d.outerHTML}var c=this.NodeHTML(d);for(var b=0,a=d.childNodes.length;b";return c},quoteHTML:function(a){if(a==null){a=""}return a.replace(/&/g,"&").replace(//g,">").replace(/\"/g,""")},createPreview:function(g,f){var e=this.config.preview;if(e==="none"){return}var i=false;var c=MathJax.Hub.config.preRemoveClass;if((f.previousSibling||{}).className===c){return}if(e==="mathml"){i=true;if(this.MathTagBug){e="alttext"}else{e=g.cloneNode(true)}}if(e==="alttext"||e==="altimg"){i=true;var d=this.filterPreview(g.getAttribute("alttext"));if(e==="alttext"){if(d!=null){e=MathJax.HTML.TextNode(d)}else{e=null}}else{var a=g.getAttribute("altimg");if(a!=null){var b={width:g.getAttribute("altimg-width"),height:g.getAttribute("altimg-height")};e=MathJax.HTML.Element("img",{src:a,alt:d,style:b})}else{e=null}}}if(e){var h;if(i){h=MathJax.HTML.Element("span",{className:c});h.appendChild(e)}else{h=MathJax.HTML.Element("span",{className:c},e)}f.parentNode.insertBefore(h,f)}},filterPreview:function(a){return a},InitBrowser:function(){var b=MathJax.HTML.Element("span",{id:"<",className:"mathjax",innerHTML:"x"});var a=b.outerHTML||"";this.AttributeBug=a!==""&&!(a.match(/id="<"/)&&a.match(/class="mathjax"/)&&a.match(/<\/math>/));this.MathTagBug=b.childNodes.length>1;this.CleanupHTML=MathJax.Hub.Browser.isMSIE}};MathJax.Hub.Register.PreProcessor(["PreProcess",MathJax.Extension.mml2jax],5);MathJax.Ajax.loadComplete("[MathJax]/extensions/mml2jax.js"); +MathJax.Extension.asciimath2jax={version:"2.7.5",config:{delimiters:[["`","`"]],skipTags:["script","noscript","style","textarea","pre","code","annotation","annotation-xml"],ignoreClass:"asciimath2jax_ignore",processClass:"asciimath2jax_process",preview:"AsciiMath"},ignoreTags:{br:(MathJax.Hub.Browser.isMSIE&&document.documentMode<9?"\n":" "),wbr:"","#comment":""},PreProcess:function(a){if(!this.configured){this.config=MathJax.Hub.CombineConfig("asciimath2jax",this.config);if(this.config.Augment){MathJax.Hub.Insert(this,this.config.Augment)}this.configured=true}if(typeof(a)==="string"){a=document.getElementById(a)}if(!a){a=document.body}if(this.createPatterns()){this.scanElement(a,a.nextSibling)}},createPatterns:function(){var d=[],c,a,b=this.config;this.match={};if(b.delimiters.length===0){return false}for(c=0,a=b.delimiters.length;c0){this.HoverFadeTimer(q,q.hover.inc);return}s.parentNode.removeChild(s);if(r){r.parentNode.removeChild(r)}if(q.hover.remove){clearTimeout(q.hover.remove)}delete q.hover},HoverFadeTimer:function(q,s,r){q.hover.inc=s;if(!q.hover.timer){q.hover.timer=setTimeout(g(["HoverFade",this,q]),(r||o.fadeDelay))}},HoverMenu:function(q){if(!q){q=window.event}return b[this.jax].ContextMenu(q,this.math,true)},ClearHover:function(q){if(q.hover.remove){clearTimeout(q.hover.remove)}if(q.hover.timer){clearTimeout(q.hover.timer)}f.ClearHoverTimer();delete q.hover},Px:function(q){if(Math.abs(q)<0.006){return"0px"}return q.toFixed(2).replace(/\.?0+$/,"")+"px"},getImages:function(){if(k.discoverable){var q=new Image();q.src=o.button.src}}};var a=c.Touch={last:0,delay:500,start:function(r){var q=new Date().getTime();var s=(q-a.lastt){z.style.height=t+"px";z.style.width=(x.zW+this.scrollSize)+"px"}if(z.offsetWidth>l){z.style.width=l+"px";z.style.height=(x.zH+this.scrollSize)+"px"}}if(this.operaPositionBug){z.style.width=Math.min(l,x.zW)+"px"}if(z.offsetWidth>m&&z.offsetWidth-m=9);h.msiePositionBug=!m;h.msieSizeBug=l.versionAtLeast("7.0")&&(!document.documentMode||n===7||n===8);h.msieZIndexBug=(n<=7);h.msieInlineBlockAlignBug=(n<=7);h.msieTrapEventBug=!window.addEventListener;if(document.compatMode==="BackCompat"){h.scrollSize=52}if(m){delete i.styles["#MathJax_Zoom"].filter}},Opera:function(l){h.operaPositionBug=true;h.operaRefreshBug=true}});h.topImg=(h.msieInlineBlockAlignBug?d.Element("img",{style:{width:0,height:0,position:"relative"},src:"about:blank"}):d.Element("span",{style:{width:0,height:0,display:"inline-block"}}));if(h.operaPositionBug||h.msieTopBug){h.topImg.style.border="1px solid"}MathJax.Callback.Queue(["StartupHook",MathJax.Hub.Register,"Begin Styles",{}],["Styles",f,i.styles],["Post",a.Startup.signal,"MathZoom Ready"],["loadComplete",f,"[MathJax]/extensions/MathZoom.js"])})(MathJax.Hub,MathJax.HTML,MathJax.Ajax,MathJax.OutputJax["HTML-CSS"],MathJax.OutputJax.NativeMML); +(function(f,o,q,e,r){var p="2.7.5";var d=MathJax.Callback.Signal("menu");MathJax.Extension.MathMenu={version:p,signal:d};var t=function(u){return MathJax.Localization._.apply(MathJax.Localization,[["MathMenu",u]].concat([].slice.call(arguments,1)))};var i=MathJax.Object.isArray;var a=f.Browser.isPC,l=f.Browser.isMSIE,m=((document.documentMode||0)>8);var j=(a?null:"5px");var s=f.CombineConfig("MathMenu",{delay:150,showRenderer:true,showMathPlayer:true,showFontMenu:false,showContext:false,showDiscoverable:false,showLocale:true,showLocaleURL:false,semanticsAnnotations:{TeX:["TeX","LaTeX","application/x-tex"],StarMath:["StarMath 5.0"],Maple:["Maple"],ContentMathML:["MathML-Content","application/mathml-content+xml"],OpenMath:["OpenMath"]},windowSettings:{status:"no",toolbar:"no",locationbar:"no",menubar:"no",directories:"no",personalbar:"no",resizable:"yes",scrollbars:"yes",width:400,height:300,left:Math.round((screen.width-400)/2),top:Math.round((screen.height-300)/3)},styles:{"#MathJax_About":{position:"fixed",left:"50%",width:"auto","text-align":"center",border:"3px outset",padding:"1em 2em","background-color":"#DDDDDD",color:"black",cursor:"default","font-family":"message-box","font-size":"120%","font-style":"normal","text-indent":0,"text-transform":"none","line-height":"normal","letter-spacing":"normal","word-spacing":"normal","word-wrap":"normal","white-space":"nowrap","float":"none","z-index":201,"border-radius":"15px","-webkit-border-radius":"15px","-moz-border-radius":"15px","-khtml-border-radius":"15px","box-shadow":"0px 10px 20px #808080","-webkit-box-shadow":"0px 10px 20px #808080","-moz-box-shadow":"0px 10px 20px #808080","-khtml-box-shadow":"0px 10px 20px #808080",filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')"},"#MathJax_About.MathJax_MousePost":{outline:"none"},".MathJax_Menu":{position:"absolute","background-color":"white",color:"black",width:"auto",padding:(a?"2px":"5px 0px"),border:"1px solid #CCCCCC",margin:0,cursor:"default",font:"menu","text-align":"left","text-indent":0,"text-transform":"none","line-height":"normal","letter-spacing":"normal","word-spacing":"normal","word-wrap":"normal","white-space":"nowrap","float":"none","z-index":201,"border-radius":j,"-webkit-border-radius":j,"-moz-border-radius":j,"-khtml-border-radius":j,"box-shadow":"0px 10px 20px #808080","-webkit-box-shadow":"0px 10px 20px #808080","-moz-box-shadow":"0px 10px 20px #808080","-khtml-box-shadow":"0px 10px 20px #808080",filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')"},".MathJax_MenuItem":{padding:(a?"2px 2em":"1px 2em"),background:"transparent"},".MathJax_MenuArrow":{position:"absolute",right:".5em","padding-top":".25em",color:"#666666","font-family":(l?"'Arial unicode MS'":null),"font-size":".75em"},".MathJax_MenuActive .MathJax_MenuArrow":{color:"white"},".MathJax_MenuArrow.RTL":{left:".5em",right:"auto"},".MathJax_MenuCheck":{position:"absolute",left:".7em","font-family":(l?"'Arial unicode MS'":null)},".MathJax_MenuCheck.RTL":{right:".7em",left:"auto"},".MathJax_MenuRadioCheck":{position:"absolute",left:(a?"1em":".7em")},".MathJax_MenuRadioCheck.RTL":{right:(a?"1em":".7em"),left:"auto"},".MathJax_MenuLabel":{padding:(a?"2px 2em 4px 1.33em":"1px 2em 3px 1.33em"),"font-style":"italic"},".MathJax_MenuRule":{"border-top":(a?"1px solid #CCCCCC":"1px solid #DDDDDD"),margin:(a?"4px 1px 0px":"4px 3px")},".MathJax_MenuDisabled":{color:"GrayText"},".MathJax_MenuActive":{"background-color":(a?"Highlight":"#606872"),color:(a?"HighlightText":"white")},".MathJax_MenuDisabled:focus, .MathJax_MenuLabel:focus":{"background-color":"#E8E8E8"},".MathJax_ContextMenu:focus":{outline:"none"},".MathJax_ContextMenu .MathJax_MenuItem:focus":{outline:"none"},"#MathJax_AboutClose":{top:".2em",right:".2em"},".MathJax_Menu .MathJax_MenuClose":{top:"-10px",left:"-10px"},".MathJax_MenuClose":{position:"absolute",cursor:"pointer",display:"inline-block",border:"2px solid #AAA","border-radius":"18px","-webkit-border-radius":"18px","-moz-border-radius":"18px","-khtml-border-radius":"18px","font-family":"'Courier New',Courier","font-size":"24px",color:"#F0F0F0"},".MathJax_MenuClose span":{display:"block","background-color":"#AAA",border:"1.5px solid","border-radius":"18px","-webkit-border-radius":"18px","-moz-border-radius":"18px","-khtml-border-radius":"18px","line-height":0,padding:"8px 0 6px"},".MathJax_MenuClose:hover":{color:"white!important",border:"2px solid #CCC!important"},".MathJax_MenuClose:hover span":{"background-color":"#CCC!important"},".MathJax_MenuClose:hover:focus":{outline:"none"}}});var n,k,b;f.Register.StartupHook("MathEvents Ready",function(){n=MathJax.Extension.MathEvents.Event.False;k=MathJax.Extension.MathEvents.Hover;b=MathJax.Extension.MathEvents.Event.KEY});var h=MathJax.Object.Subclass({Keydown:function(u,v){switch(u.keyCode){case b.ESCAPE:this.Remove(u,v);break;case b.RIGHT:this.Right(u,v);break;case b.LEFT:this.Left(u,v);break;case b.UP:this.Up(u,v);break;case b.DOWN:this.Down(u,v);break;case b.RETURN:case b.SPACE:this.Space(u,v);break;default:return;break}return n(u)},Escape:function(u,v){},Right:function(u,v){},Left:function(u,v){},Up:function(u,v){},Down:function(u,v){},Space:function(u,v){}},{});var g=MathJax.Menu=h.Subclass({version:p,items:[],posted:false,title:null,margin:5,Init:function(u){this.items=[].slice.call(arguments,0)},With:function(u){if(u){f.Insert(this,u)}return this},Post:function(M,E,B){if(!M){M=window.event||{}}var I=document.getElementById("MathJax_MenuFrame");if(!I){I=g.Background(this);delete c.lastItem;delete c.lastMenu;delete g.skipUp;d.Post(["post",g.jax]);g.isRTL=(MathJax.Localization.fontDirection()==="rtl")}var v=o.Element("div",{onmouseup:g.Mouseup,ondblclick:n,ondragstart:n,onselectstart:n,oncontextmenu:n,menuItem:this,className:"MathJax_Menu",onkeydown:g.Keydown,role:"menu"});if(M.type==="contextmenu"||M.type==="mouseover"){v.className+=" MathJax_ContextMenu"}if(!B){MathJax.Localization.setCSS(v)}for(var N=0,K=this.items.length;NA-this.margin){H=A-v.offsetWidth-this.margin}if(g.isMobile){H=Math.max(5,H-Math.floor(v.offsetWidth/2));F-=20}g.skipUp=M.isContextMenu}else{var z="left",J=E.offsetWidth;H=(g.isMobile?30:J-2);F=0;while(E&&E!==I){H+=E.offsetLeft;F+=E.offsetTop;E=E.parentNode}if(!g.isMobile){if((g.isRTL&&H-J-v.offsetWidth>this.margin)||(!g.isRTL&&H+v.offsetWidth>A-this.margin)){z="right";H=Math.max(this.margin,H-J-v.offsetWidth+6)}}if(!a){v.style["borderRadiusTop"+z]=0;v.style["WebkitBorderRadiusTop"+z]=0;v.style["MozBorderRadiusTop"+z]=0;v.style["KhtmlBorderRadiusTop"+z]=0}}v.style.left=H+"px";v.style.top=F+"px";if(document.selection&&document.selection.empty){document.selection.empty()}var G=window.pageXOffset||document.documentElement.scrollLeft;var D=window.pageYOffset||document.documentElement.scrollTop;g.Focus(v);if(M.type==="keydown"){g.skipMouseoverFromKey=true;setTimeout(function(){delete g.skipMouseoverFromKey},s.delay)}window.scrollTo(G,D);return n(M)},Remove:function(u,v){d.Post(["unpost",g.jax]);var w=document.getElementById("MathJax_MenuFrame");if(w){w.parentNode.removeChild(w);if(this.msieFixedPositionBug){detachEvent("onresize",g.Resize)}}if(g.jax.hover){delete g.jax.hover.nofade;k.UnHover(g.jax)}g.Unfocus(v);if(u.type==="mousedown"){g.CurrentNode().blur()}return n(u)},Find:function(u){return this.FindN(1,u,[].slice.call(arguments,1))},FindId:function(u){return this.FindN(0,u,[].slice.call(arguments,1))},FindN:function(y,v,x){for(var w=0,u=this.items.length;w0){u.oldTabIndex=u.tabIndex}u.tabIndex=-1}},SetTabIndex:function(){var v=g.AllNodes();for(var w=0,u;u=v[w];w++){if(u.oldTabIndex!==undefined){u.tabIndex=u.oldTabIndex;delete u.oldTabIndex}else{u.tabIndex=f.getTabOrder(u)}}},Mod:function(u,v){return((u%v)+v)%v},IndexOf:(Array.prototype.indexOf?function(u,v,w){return u.indexOf(v,w)}:function(u,x,y){for(var w=(y||0),v=u.length;w=0&&c.GetMenuNode(w).menuItem!==v[u].menuItem){v[u].menuItem.posted=false;v[u].parentNode.removeChild(v[u]);u--}},Touchstart:function(u,v){return this.TouchEvent(u,v,"Mousedown")},Touchend:function(u,v){return this.TouchEvent(u,v,"Mouseup")},TouchEvent:function(v,w,u){if(this!==c.lastItem){if(c.lastMenu){g.Event(v,c.lastMenu,"Mouseout")}g.Event(v,w,"Mouseover",true);c.lastItem=this;c.lastMenu=w}if(this.nativeTouch){return null}g.Event(v,w,u);return false},Remove:function(u,v){v=v.parentNode.menuItem;return v.Remove(u,v)},With:function(u){if(u){f.Insert(this,u)}return this},isRTL:function(){return g.isRTL},rtlClass:function(){return(this.isRTL()?" RTL":"")}},{GetMenuNode:function(u){return u.parentNode}});g.ENTRY=g.ITEM.Subclass({role:"menuitem",Attributes:function(u){u=f.Insert({onmouseover:g.Mouseover,onmouseout:g.Mouseout,onmousedown:g.Mousedown,onkeydown:g.Keydown,"aria-disabled":!!this.disabled},u);u=this.SUPER(arguments).Attributes.call(this,u);if(this.disabled){u.className+=" MathJax_MenuDisabled"}return u},MoveVertical:function(u,E,w){var x=c.GetMenuNode(E);var D=[];for(var z=0,C=x.menuItem.items,y;y=C[z];z++){if(!y.hidden){D.push(y)}}var B=g.IndexOf(D,this);if(B===-1){return}var A=D.length;var v=x.childNodes;do{B=g.Mod(w(B),A)}while(D[B].hidden||!v[B].role||v[B].role==="separator");this.Deactivate(E);D[B].Activate(u,v[B])},Up:function(v,u){this.MoveVertical(v,u,function(w){return w-1})},Down:function(v,u){this.MoveVertical(v,u,function(w){return w+1})},Right:function(v,u){this.MoveHorizontal(v,u,g.Right,!this.isRTL())},Left:function(v,u){this.MoveHorizontal(v,u,g.Left,this.isRTL())},MoveHorizontal:function(A,z,u,B){var x=c.GetMenuNode(z);if(x.menuItem===g.menu&&A.shiftKey){u(A,z)}if(B){return}if(x.menuItem!==g.menu){this.Deactivate(z)}var v=x.previousSibling.childNodes;var y=v.length;while(y--){var w=v[y];if(w.menuItem.submenu&&w.menuItem.submenu===x.menuItem){g.Focus(w);break}}this.RemoveSubmenus(z)},Space:function(u,v){this.Mouseup(u,v)},Activate:function(u,v){this.Deactivate(v);if(!this.disabled){v.className+=" MathJax_MenuActive"}this.DeactivateSubmenus(v);g.Focus(v)},Deactivate:function(u){u.className=u.className.replace(/ MathJax_MenuActive/,"")}});g.ITEM.COMMAND=g.ENTRY.Subclass({action:function(){},Init:function(u,w,v){if(!i(u)){u=[u,u]}this.name=u;this.action=w;this.With(v)},Label:function(u,v){return[this.Name()]},Mouseup:function(u,v){if(!this.disabled){this.Remove(u,v);d.Post(["command",this]);this.action.call(this,u)}return n(u)}});g.ITEM.SUBMENU=g.ENTRY.Subclass({submenu:null,marker:"\u25BA",markerRTL:"\u25C4",Attributes:function(u){u=f.Insert({"aria-haspopup":"true"},u);u=this.SUPER(arguments).Attributes.call(this,u);return u},Init:function(u,w){if(!i(u)){u=[u,u]}this.name=u;var v=1;if(!(w instanceof g.ITEM)){this.With(w),v++}this.submenu=g.apply(g,[].slice.call(arguments,v))},Label:function(u,v){this.submenu.posted=false;return[this.Name()+" ",["span",{className:"MathJax_MenuArrow"+this.rtlClass()},[this.isRTL()?this.markerRTL:this.marker]]]},Timer:function(u,v){this.ClearTimer();u={type:u.type,clientX:u.clientX,clientY:u.clientY};this.timer=setTimeout(e(["Mouseup",this,u,v]),s.delay)},ClearTimer:function(){if(this.timer){clearTimeout(this.timer)}},Touchend:function(v,x){var w=this.submenu.posted;var u=this.SUPER(arguments).Touchend.apply(this,arguments);if(w){this.Deactivate(x);delete c.lastItem;delete c.lastMenu}return u},Mouseout:function(u,v){if(!this.submenu.posted){this.Deactivate(v)}this.ClearTimer()},Mouseover:function(u,v){this.Activate(u,v)},Mouseup:function(u,v){if(!this.disabled){if(!this.submenu.posted){this.ClearTimer();this.submenu.Post(u,v,this.ltr);g.Focus(v)}else{this.DeactivateSubmenus(v)}}return n(u)},Activate:function(u,v){if(!this.disabled){this.Deactivate(v);v.className+=" MathJax_MenuActive"}if(!this.submenu.posted){this.DeactivateSubmenus(v);if(!g.isMobile){this.Timer(u,v)}}g.Focus(v)},MoveVertical:function(w,v,u){this.ClearTimer();this.SUPER(arguments).MoveVertical.apply(this,arguments)},MoveHorizontal:function(w,y,v,x){if(!x){this.SUPER(arguments).MoveHorizontal.apply(this,arguments);return}if(this.disabled){return}if(!this.submenu.posted){this.Activate(w,y);return}var u=c.GetMenuNode(y).nextSibling.childNodes;if(u.length>0){this.submenu.items[0].Activate(w,u[0])}}});g.ITEM.RADIO=g.ENTRY.Subclass({variable:null,marker:(a?"\u25CF":"\u2713"),role:"menuitemradio",Attributes:function(v){var u=s.settings[this.variable]===this.value?"true":"false";v=f.Insert({"aria-checked":u},v);v=this.SUPER(arguments).Attributes.call(this,v);return v},Init:function(v,u,w){if(!i(v)){v=[v,v]}this.name=v;this.variable=u;this.With(w);if(this.value==null){this.value=this.name[0]}},Label:function(v,w){var u={className:"MathJax_MenuRadioCheck"+this.rtlClass()};if(s.settings[this.variable]!==this.value){u={style:{display:"none"}}}return[["span",u,[this.marker]]," "+this.Name()]},Mouseup:function(x,y){if(!this.disabled){var z=y.parentNode.childNodes;for(var v=0,u=z.length;v/g,">");var y=t("EqSource","MathJax Equation Source");if(g.isMobile){u.document.open();u.document.write(""+y+"");u.document.write("
"+z+"
");u.document.write("
");u.document.write("");u.document.close()}else{u.document.open();u.document.write(""+y+"");u.document.write("
"+z+"
");u.document.write("");u.document.close();var v=u.document.body.firstChild;setTimeout(function(){var B=(u.outerHeight-u.innerHeight)||30,A=(u.outerWidth-u.innerWidth)||30,w,E;A=Math.max(140,Math.min(Math.floor(0.5*screen.width),v.offsetWidth+A+25));B=Math.max(40,Math.min(Math.floor(0.5*screen.height),v.offsetHeight+B+25));if(g.prototype.msieHeightBug){B+=35}u.resizeTo(A,B);var D;try{D=x.screenX}catch(C){}if(x&&D!=null){w=Math.max(0,Math.min(x.screenX-Math.floor(A/2),screen.width-A-20));E=Math.max(0,Math.min(x.screenY-Math.floor(B/2),screen.height-B-20));u.moveTo(w,E)}},50)}};g.Scale=function(){var z=["CommonHTML","HTML-CSS","SVG","NativeMML","PreviewHTML"],u=z.length,y=100,w,v;for(w=0;w7;g.Augment({margin:20,msieBackgroundBug:((document.documentMode||0)<9),msieFixedPositionBug:(v||!w),msieAboutBug:v,msieHeightBug:((document.documentMode||0)<9)});if(m){delete s.styles["#MathJax_About"].filter;delete s.styles[".MathJax_Menu"].filter}},Firefox:function(u){g.skipMouseover=u.isMobile&&u.versionAtLeast("6.0");g.skipMousedown=u.isMobile}});g.isMobile=f.Browser.isMobile;g.noContextMenu=f.Browser.noContextMenu;g.CreateLocaleMenu=function(){if(!g.menu){return}var z=g.menu.Find("Language").submenu,w=z.items;var v=[],B=MathJax.Localization.strings;for(var A in B){if(B.hasOwnProperty(A)){v.push(A)}}v=v.sort();z.items=[];for(var x=0,u=v.length;x0||this.Get("scriptlevel")>0)&&g>=0){return""}return this.TEXSPACELENGTH[Math.abs(g)]},TEXSPACELENGTH:["",a.LENGTH.THINMATHSPACE,a.LENGTH.MEDIUMMATHSPACE,a.LENGTH.THICKMATHSPACE],TEXSPACE:[[0,-1,2,3,0,0,0,1],[-1,-1,0,3,0,0,0,1],[2,2,0,0,2,0,0,2],[3,3,0,0,3,0,0,3],[0,0,0,0,0,0,0,0],[0,-1,2,3,0,0,0,1],[1,1,0,1,1,1,1,1],[1,-1,2,3,1,0,1,1]],autoDefault:function(e){return""},isSpacelike:function(){return false},isEmbellished:function(){return false},Core:function(){return this},CoreMO:function(){return this},childIndex:function(g){if(g==null){return}for(var f=0,e=this.data.length;f=55296&&e.charCodeAt(0)<56320)?a.VARIANT.ITALIC:a.VARIANT.NORMAL)}return""},setTeXclass:function(f){this.getPrevClass(f);var e=this.data.join("");if(e.length>1&&e.match(/^[a-z][a-z0-9]*$/i)&&this.texClass===a.TEXCLASS.ORD){this.texClass=a.TEXCLASS.OP;this.autoOP=true}return this}});a.mn=a.mbase.Subclass({type:"mn",isToken:true,texClass:a.TEXCLASS.ORD,defaults:{mathvariant:a.INHERIT,mathsize:a.INHERIT,mathbackground:a.INHERIT,mathcolor:a.INHERIT,dir:a.INHERIT}});a.mo=a.mbase.Subclass({type:"mo",isToken:true,defaults:{mathvariant:a.INHERIT,mathsize:a.INHERIT,mathbackground:a.INHERIT,mathcolor:a.INHERIT,dir:a.INHERIT,form:a.AUTO,fence:a.AUTO,separator:a.AUTO,lspace:a.AUTO,rspace:a.AUTO,stretchy:a.AUTO,symmetric:a.AUTO,maxsize:a.AUTO,minsize:a.AUTO,largeop:a.AUTO,movablelimits:a.AUTO,accent:a.AUTO,linebreak:a.LINEBREAK.AUTO,lineleading:a.INHERIT,linebreakstyle:a.AUTO,linebreakmultchar:a.INHERIT,indentalign:a.INHERIT,indentshift:a.INHERIT,indenttarget:a.INHERIT,indentalignfirst:a.INHERIT,indentshiftfirst:a.INHERIT,indentalignlast:a.INHERIT,indentshiftlast:a.INHERIT,texClass:a.AUTO},defaultDef:{form:a.FORM.INFIX,fence:false,separator:false,lspace:a.LENGTH.THICKMATHSPACE,rspace:a.LENGTH.THICKMATHSPACE,stretchy:false,symmetric:false,maxsize:a.SIZE.INFINITY,minsize:"0em",largeop:false,movablelimits:false,accent:false,linebreak:a.LINEBREAK.AUTO,lineleading:"1ex",linebreakstyle:"before",indentalign:a.INDENTALIGN.AUTO,indentshift:"0",indenttarget:"",indentalignfirst:a.INDENTALIGN.INDENTALIGN,indentshiftfirst:a.INDENTSHIFT.INDENTSHIFT,indentalignlast:a.INDENTALIGN.INDENTALIGN,indentshiftlast:a.INDENTSHIFT.INDENTSHIFT,texClass:a.TEXCLASS.REL},SPACE_ATTR:{lspace:1,rspace:2},useMMLspacing:3,hasMMLspacing:function(){if(this.useMMLspacing){return true}return this.form&&(this.OPTABLE[this.form]||{})[this.data.join("")]},autoDefault:function(g,n){var l=this.def;if(!l){if(g==="form"){return this.getForm()}var k=this.data.join("");var f=[this.Get("form"),a.FORM.INFIX,a.FORM.POSTFIX,a.FORM.PREFIX];for(var h=0,e=f.length;h=55296&&k<56320){k=(((k-55296)<<10)+(j.charCodeAt(1)-56320))+65536}for(var g=0,e=this.RANGES.length;g=0;e--){if(this.data[0]&&!this.data[e].isSpacelike()){return this.data[e]}}return null},Core:function(){if(!(this.isEmbellished())||typeof(this.core)==="undefined"){return this}return this.data[this.core]},CoreMO:function(){if(!(this.isEmbellished())||typeof(this.core)==="undefined"){return this}return this.data[this.core].CoreMO()},toString:function(){if(this.inferred){return"["+this.data.join(",")+"]"}return this.SUPER(arguments).toString.call(this)},setTeXclass:function(g){var f,e=this.data.length;if((this.open||this.close)&&(!g||!g.fnOP)){this.getPrevClass(g);g=null;for(f=0;f0){e++}return e},adjustChild_texprimestyle:function(e){if(e==this.den){return true}return this.Get("texprimestyle")},setTeXclass:a.mbase.setSeparateTeXclasses});a.msqrt=a.mbase.Subclass({type:"msqrt",inferRow:true,linebreakContainer:true,texClass:a.TEXCLASS.ORD,setTeXclass:a.mbase.setSeparateTeXclasses,adjustChild_texprimestyle:function(e){return true}});a.mroot=a.mbase.Subclass({type:"mroot",linebreakContainer:true,texClass:a.TEXCLASS.ORD,adjustChild_displaystyle:function(e){if(e===1){return false}return this.Get("displaystyle")},adjustChild_scriptlevel:function(f){var e=this.Get("scriptlevel");if(f===1){e+=2}return e},adjustChild_texprimestyle:function(e){if(e===0){return true}return this.Get("texprimestyle")},setTeXclass:a.mbase.setSeparateTeXclasses});a.mstyle=a.mbase.Subclass({type:"mstyle",isSpacelike:a.mbase.childrenSpacelike,isEmbellished:a.mbase.childEmbellished,Core:a.mbase.childCore,CoreMO:a.mbase.childCoreMO,inferRow:true,defaults:{scriptlevel:a.INHERIT,displaystyle:a.INHERIT,scriptsizemultiplier:Math.sqrt(1/2),scriptminsize:"8pt",mathbackground:a.INHERIT,mathcolor:a.INHERIT,dir:a.INHERIT,infixlinebreakstyle:a.LINEBREAKSTYLE.BEFORE,decimalseparator:"."},adjustChild_scriptlevel:function(g){var f=this.scriptlevel;if(f==null){f=this.Get("scriptlevel")}else{if(String(f).match(/^ *[-+]/)){var e=this.Get("scriptlevel",null,true);f=e+parseInt(f)}}return f},inheritFromMe:true,noInherit:{mpadded:{width:true,height:true,depth:true,lspace:true,voffset:true},mtable:{width:true,height:true,depth:true,align:true}},getRemoved:{fontfamily:"fontFamily",fontweight:"fontWeight",fontstyle:"fontStyle",fontsize:"fontSize"},setTeXclass:a.mbase.setChildTeXclass});a.merror=a.mbase.Subclass({type:"merror",inferRow:true,linebreakContainer:true,texClass:a.TEXCLASS.ORD});a.mpadded=a.mbase.Subclass({type:"mpadded",inferRow:true,isSpacelike:a.mbase.childrenSpacelike,isEmbellished:a.mbase.childEmbellished,Core:a.mbase.childCore,CoreMO:a.mbase.childCoreMO,defaults:{mathbackground:a.INHERIT,mathcolor:a.INHERIT,width:"",height:"",depth:"",lspace:0,voffset:0},setTeXclass:a.mbase.setChildTeXclass});a.mphantom=a.mbase.Subclass({type:"mphantom",texClass:a.TEXCLASS.ORD,inferRow:true,isSpacelike:a.mbase.childrenSpacelike,isEmbellished:a.mbase.childEmbellished,Core:a.mbase.childCore,CoreMO:a.mbase.childCoreMO,setTeXclass:a.mbase.setChildTeXclass});a.mfenced=a.mbase.Subclass({type:"mfenced",defaults:{mathbackground:a.INHERIT,mathcolor:a.INHERIT,open:"(",close:")",separators:","},addFakeNodes:function(){var f=this.getValues("open","close","separators");f.open=f.open.replace(/[ \t\n\r]/g,"");f.close=f.close.replace(/[ \t\n\r]/g,"");f.separators=f.separators.replace(/[ \t\n\r]/g,"");if(f.open!==""){this.SetData("open",a.mo(f.open).With({fence:true,form:a.FORM.PREFIX,texClass:a.TEXCLASS.OPEN}))}if(f.separators!==""){while(f.separators.length0){return false}return this.Get("displaystyle")},adjustChild_scriptlevel:function(f){var e=this.Get("scriptlevel");if(f>0){e++}return e},adjustChild_texprimestyle:function(e){if(e===this.sub){return true}return this.Get("texprimestyle")},setTeXclass:a.mbase.setBaseTeXclasses});a.msub=a.msubsup.Subclass({type:"msub"});a.msup=a.msubsup.Subclass({type:"msup",sub:2,sup:1});a.mmultiscripts=a.msubsup.Subclass({type:"mmultiscripts",adjustChild_texprimestyle:function(e){if(e%2===1){return true}return this.Get("texprimestyle")}});a.mprescripts=a.mbase.Subclass({type:"mprescripts"});a.none=a.mbase.Subclass({type:"none"});a.munderover=a.mbase.Subclass({type:"munderover",base:0,under:1,over:2,sub:1,sup:2,ACCENTS:["","accentunder","accent"],linebreakContainer:true,isEmbellished:a.mbase.childEmbellished,Core:a.mbase.childCore,CoreMO:a.mbase.childCoreMO,defaults:{mathbackground:a.INHERIT,mathcolor:a.INHERIT,accent:a.AUTO,accentunder:a.AUTO,align:a.ALIGN.CENTER,texClass:a.AUTO,subscriptshift:"",superscriptshift:""},autoDefault:function(e){if(e==="texClass"){return(this.isEmbellished()?this.CoreMO().Get(e):a.TEXCLASS.ORD)}if(e==="accent"&&this.data[this.over]){return this.data[this.over].CoreMO().Get("accent")}if(e==="accentunder"&&this.data[this.under]){return this.data[this.under].CoreMO().Get("accent")}return false},adjustChild_displaystyle:function(e){if(e>0){return false}return this.Get("displaystyle")},adjustChild_scriptlevel:function(g){var f=this.Get("scriptlevel");var e=(this.data[this.base]&&!this.Get("displaystyle")&&this.data[this.base].CoreMO().Get("movablelimits"));if(g==this.under&&(e||!this.Get("accentunder"))){f++}if(g==this.over&&(e||!this.Get("accent"))){f++}return f},adjustChild_texprimestyle:function(e){if(e===this.base&&this.data[this.over]){return true}return this.Get("texprimestyle")},setTeXclass:a.mbase.setBaseTeXclasses});a.munder=a.munderover.Subclass({type:"munder"});a.mover=a.munderover.Subclass({type:"mover",over:1,under:2,sup:1,sub:2,ACCENTS:["","accent","accentunder"]});a.mtable=a.mbase.Subclass({type:"mtable",defaults:{mathbackground:a.INHERIT,mathcolor:a.INHERIT,align:a.ALIGN.AXIS,rowalign:a.ALIGN.BASELINE,columnalign:a.ALIGN.CENTER,groupalign:"{left}",alignmentscope:true,columnwidth:a.WIDTH.AUTO,width:a.WIDTH.AUTO,rowspacing:"1ex",columnspacing:".8em",rowlines:a.LINES.NONE,columnlines:a.LINES.NONE,frame:a.LINES.NONE,framespacing:"0.4em 0.5ex",equalrows:false,equalcolumns:false,displaystyle:false,side:a.SIDE.RIGHT,minlabelspacing:"0.8em",texClass:a.TEXCLASS.ORD,useHeight:1},adjustChild_displaystyle:function(){return(this.displaystyle!=null?this.displaystyle:this.defaults.displaystyle)},inheritFromMe:true,noInherit:{mover:{align:true},munder:{align:true},munderover:{align:true},mtable:{align:true,rowalign:true,columnalign:true,groupalign:true,alignmentscope:true,columnwidth:true,width:true,rowspacing:true,columnspacing:true,rowlines:true,columnlines:true,frame:true,framespacing:true,equalrows:true,equalcolumns:true,displaystyle:true,side:true,minlabelspacing:true,texClass:true,useHeight:1}},linebreakContainer:true,Append:function(){for(var f=0,e=arguments.length;f>10)+55296)+String.fromCharCode((e&1023)+56320)}});a.xml=a.mbase.Subclass({type:"xml",Init:function(){this.div=document.createElement("div");return this.SUPER(arguments).Init.apply(this,arguments)},Append:function(){for(var f=0,e=arguments.length;f":d.REL,"?":[1,1,b.CLOSE],"\\":d.ORD,"^":d.ORD11,_:d.ORD11,"|":[2,2,b.ORD,{fence:true,stretchy:true,symmetric:true}],"#":d.ORD,"$":d.ORD,"\u002E":[0,3,b.PUNCT,{separator:true}],"\u02B9":d.ORD,"\u0300":d.ACCENT,"\u0301":d.ACCENT,"\u0303":d.WIDEACCENT,"\u0304":d.ACCENT,"\u0306":d.ACCENT,"\u0307":d.ACCENT,"\u0308":d.ACCENT,"\u030C":d.ACCENT,"\u0332":d.WIDEACCENT,"\u0338":d.REL4,"\u2015":[0,0,b.ORD,{stretchy:true}],"\u2017":[0,0,b.ORD,{stretchy:true}],"\u2020":d.BIN3,"\u2021":d.BIN3,"\u20D7":d.ACCENT,"\u2111":d.ORD,"\u2113":d.ORD,"\u2118":d.ORD,"\u211C":d.ORD,"\u2205":d.ORD,"\u221E":d.ORD,"\u2305":d.BIN3,"\u2306":d.BIN3,"\u2322":d.REL4,"\u2323":d.REL4,"\u2329":d.OPEN,"\u232A":d.CLOSE,"\u23AA":d.ORD,"\u23AF":[0,0,b.ORD,{stretchy:true}],"\u23B0":d.OPEN,"\u23B1":d.CLOSE,"\u2500":d.ORD,"\u25EF":d.BIN3,"\u2660":d.ORD,"\u2661":d.ORD,"\u2662":d.ORD,"\u2663":d.ORD,"\u3008":d.OPEN,"\u3009":d.CLOSE,"\uFE37":d.WIDEACCENT,"\uFE38":d.WIDEACCENT}}},{OPTYPES:d});var c=a.mo.prototype.OPTABLE;c.infix["^"]=d.WIDEREL;c.infix._=d.WIDEREL;c.prefix["\u2223"]=d.OPEN;c.prefix["\u2225"]=d.OPEN;c.postfix["\u2223"]=d.CLOSE;c.postfix["\u2225"]=d.CLOSE})(MathJax.ElementJax.mml);MathJax.ElementJax.mml.loadComplete("jax.js"); +MathJax.Hub.Register.LoadHook("[MathJax]/jax/element/mml/jax.js",function(){var c="2.7.5";var a=MathJax.ElementJax.mml,b=MathJax.Hub.config.menuSettings;a.mbase.Augment({toMathML:function(l){var h=(this.inferred&&this.parent.inferRow);if(l==null){l=""}var f=this.type,e=this.toMathMLattributes();if(f==="mspace"){return l+"<"+f+e+" />"}var k=[],j=(this.isToken?"":l+(h?"":" "));for(var g=0,d=this.data.length;g")}}}if(this.isToken||this.isChars){return l+"<"+f+e+">"+k.join("")+""}if(h){return k.join("\n")}if(k.length===0||(k.length===1&&k[0]==="")){return l+"<"+f+e+" />"}return l+"<"+f+e+">\n"+k.join("\n")+"\n"+l+""},toMathMLattributes:function(){var j=(this.type==="mstyle"?a.math.prototype.defaults:this.defaults);var h=(this.attrNames||a.copyAttributeNames),g=a.skipAttributes,l=a.copyAttributes;var e=[];if(this.type==="math"&&(!this.attr||!("xmlns" in this.attr))){e.push('xmlns="http://www.w3.org/1998/Math/MathML"')}if(!this.attrNames){for(var k in j){if(!g[k]&&!l[k]&&j.hasOwnProperty(k)){if(this[k]!=null&&this[k]!==j[k]){if(this.Get(k,null,1)!==this[k]){e.push(k+'="'+this.toMathMLattribute(this[k])+'"')}}}}}for(var f=0,d=h.length;f126||(k<32&&k!==10&&k!==13&&k!==9)){f[g]="&#x"+k.toString(16).toUpperCase()+";"}else{var j={"&":"&","<":"<",">":">",'"':"""}[f[g]];if(j){f[g]=j}}}else{if(g+11);var p=this.type,k=this.toMathMLattributes();var j=[],o=d+(g?" "+(n?" ":""):"")+" ";for(var h=0,f=this.data.length;h")}}if(j.length===0||(j.length===1&&j[0]==="")){if(!g){return"<"+p+k+" />"}j.push(o+"")}if(g){if(n){j.unshift(d+" ");j.push(d+" ")}j.unshift(d+" ");var l=e.originalText.replace(/[&<>]/g,function(i){return{">":">","<":"<","&":"&"}[i]});j.push(d+' '+l+"");j.push(d+" ")}return d+"<"+p+k+">\n"+j.join("\n")+"\n"+d+""}});a.msubsup.Augment({toMathML:function(j){var f=this.type;if(this.data[this.sup]==null){f="msub"}if(this.data[this.sub]==null){f="msup"}var e=this.toMathMLattributes();delete this.data[0].inferred;var h=[];for(var g=0,d=this.data.length;g\n"+h.join("\n")+"\n"+j+""}});a.munderover.Augment({toMathML:function(k){var f=this.type;var j=this.data[this.base];if(j&&j.isa(a.TeXAtom)&&j.movablelimits&&!j.Get("displaystyle")){type="msubsup";if(this.data[this.under]==null){f="msup"}if(this.data[this.over]==null){f="msub"}}else{if(this.data[this.under]==null){f="mover"}if(this.data[this.over]==null){f="munder"}}var e=this.toMathMLattributes();delete this.data[0].inferred;var h=[];for(var g=0,d=this.data.length;g\n"+h.join("\n")+"\n"+k+""}});a.TeXAtom.Augment({toMathML:function(e){var d=this.toMathMLattributes();if(!d&&this.data[0].data.length===1){return e.substr(2)+this.data[0].toMathML(e)}return e+"\n"+this.data[0].toMathML(e+" ")+"\n"+e+""}});a.chars.Augment({toMathML:function(d){return(d||"")+this.toMathMLquote(this.toString())}});a.entity.Augment({toMathML:function(d){return(d||"")+"&"+this.toMathMLquote(this.data[0])+";"}});a.xml.Augment({toMathML:function(d){return(d||"")+this.toString()}});MathJax.Hub.Register.StartupHook("TeX mathchoice Ready",function(){a.TeXmathchoice.Augment({toMathML:function(d){return this.Core().toMathML(d)}})});MathJax.Hub.Startup.signal.Post("toMathML Ready")});MathJax.Ajax.loadComplete("[MathJax]/extensions/toMathML.js"); +(function(b,e){var d="2.7.5";var a=b.CombineConfig("TeX.noErrors",{disabled:false,multiLine:true,inlineDelimiters:["",""],style:{"font-size":"90%","text-align":"left",color:"black",padding:"1px 3px",border:"1px solid"}});var c="\u00A0";MathJax.Extension["TeX/noErrors"]={version:d,config:a};b.Register.StartupHook("TeX Jax Ready",function(){var f=MathJax.InputJax.TeX.formatError;MathJax.InputJax.TeX.Augment({formatError:function(j,i,k,g){if(a.disabled){return f.apply(this,arguments)}var h=j.message.replace(/\n.*/,"");b.signal.Post(["TeX Jax - parse error",h,i,k,g]);var m=a.inlineDelimiters;var l=(k||a.multiLine);if(!k){i=m[0]+i+m[1]}if(l){i=i.replace(/ /g,c)}else{i=i.replace(/\n/g," ")}return MathJax.ElementJax.mml.merror(i).With({isError:true,multiLine:l})}})});b.Register.StartupHook("HTML-CSS Jax Config",function(){b.Config({"HTML-CSS":{styles:{".MathJax .noError":b.Insert({"vertical-align":(b.Browser.isMSIE&&a.multiLine?"-2px":"")},a.style)}}})});b.Register.StartupHook("HTML-CSS Jax Ready",function(){var g=MathJax.ElementJax.mml;var h=MathJax.OutputJax["HTML-CSS"];var f=g.math.prototype.toHTML,i=g.merror.prototype.toHTML;g.math.Augment({toHTML:function(j,k){var l=this.data[0];if(l&&l.data[0]&&l.data[0].isError){j.style.fontSize="";j=this.HTMLcreateSpan(j);j.bbox=l.data[0].toHTML(j).bbox}else{j=f.apply(this,arguments)}return j}});g.merror.Augment({toHTML:function(p){if(!this.isError){return i.apply(this,arguments)}p=this.HTMLcreateSpan(p);p.className="noError";if(this.multiLine){p.style.display="inline-block"}var r=this.data[0].data[0].data.join("").split(/\n/);for(var o=0,l=r.length;o1){var n=(q.h+q.d)/2,j=h.TeX.x_height/2;p.parentNode.style.verticalAlign=h.Em(q.d+(j-n));q.h=j+n;q.d=n-j}p.bbox={h:q.h,d:q.d,w:k,lw:0,rw:k};return p}})});b.Register.StartupHook("SVG Jax Config",function(){b.Config({SVG:{styles:{".MathJax_SVG .noError":b.Insert({"vertical-align":(b.Browser.isMSIE&&a.multiLine?"-2px":"")},a.style)}}})});b.Register.StartupHook("SVG Jax Ready",function(){var g=MathJax.ElementJax.mml;var f=g.math.prototype.toSVG,h=g.merror.prototype.toSVG;g.math.Augment({toSVG:function(i,j){var k=this.data[0];if(k&&k.data[0]&&k.data[0].isError){i=k.data[0].toSVG(i)}else{i=f.apply(this,arguments)}return i}});g.merror.Augment({toSVG:function(n){if(!this.isError||this.Parent().type!=="math"){return h.apply(this,arguments)}n=e.addElement(n,"span",{className:"noError",isMathJax:true});if(this.multiLine){n.style.display="inline-block"}var o=this.data[0].data[0].data.join("").split(/\n/);for(var l=0,j=o.length;l1){var k=n.offsetHeight/2;n.style.verticalAlign=(-k+(k/j))+"px"}return n}})});b.Register.StartupHook("NativeMML Jax Ready",function(){var h=MathJax.ElementJax.mml;var g=MathJax.Extension["TeX/noErrors"].config;var f=h.math.prototype.toNativeMML,i=h.merror.prototype.toNativeMML;h.math.Augment({toNativeMML:function(j){var k=this.data[0];if(k&&k.data[0]&&k.data[0].isError){j=k.data[0].toNativeMML(j)}else{j=f.apply(this,arguments)}return j}});h.merror.Augment({toNativeMML:function(n){if(!this.isError){return i.apply(this,arguments)}n=n.appendChild(document.createElement("span"));var o=this.data[0].data[0].data.join("").split(/\n/);for(var l=0,k=o.length;l1){n.style.verticalAlign="middle"}}for(var p in g.style){if(g.style.hasOwnProperty(p)){var j=p.replace(/-./g,function(m){return m.charAt(1).toUpperCase()});n.style[j]=g.style[p]}}return n}})});b.Register.StartupHook("PreviewHTML Jax Config",function(){b.Config({PreviewHTML:{styles:{".MathJax_PHTML .noError":b.Insert({"vertical-align":(b.Browser.isMSIE&&a.multiLine?"-2px":"")},a.style)}}})});b.Register.StartupHook("PreviewHTML Jax Ready",function(){var f=MathJax.ElementJax.mml;var h=MathJax.HTML;var g=f.merror.prototype.toPreviewHTML;f.merror.Augment({toPreviewHTML:function(l){if(!this.isError){return g.apply(this,arguments)}l=this.PHTMLcreateSpan(l);l.className="noError";if(this.multiLine){l.style.display="inline-block"}var n=this.data[0].data[0].data.join("").split(/\n/);for(var k=0,j=n.length;k1){var l=1.2*j/2;o.h=l+0.25;o.d=l-0.25;n.style.verticalAlign=g.Em(0.45-l)}else{o.h=1;o.d=0.2+2/g.em}return n}})});b.Startup.signal.Post("TeX noErrors Ready")})(MathJax.Hub,MathJax.HTML);MathJax.Ajax.loadComplete("[MathJax]/extensions/TeX/noErrors.js"); +MathJax.Extension["TeX/noUndefined"]={version:"2.7.5",config:MathJax.Hub.CombineConfig("TeX.noUndefined",{disabled:false,attributes:{mathcolor:"red"}})};MathJax.Hub.Register.StartupHook("TeX Jax Ready",function(){var b=MathJax.Extension["TeX/noUndefined"].config;var a=MathJax.ElementJax.mml;var c=MathJax.InputJax.TeX.Parse.prototype.csUndefined;MathJax.InputJax.TeX.Parse.Augment({csUndefined:function(d){if(b.disabled){return c.apply(this,arguments)}MathJax.Hub.signal.Post(["TeX Jax - undefined control sequence",d]);this.Push(a.mtext(d).With(b.attributes))}});MathJax.Hub.Startup.signal.Post("TeX noUndefined Ready")});MathJax.Ajax.loadComplete("[MathJax]/extensions/TeX/noUndefined.js"); +(function(d,c,j){var i,h="\u00A0";var k=function(m){return MathJax.Localization._.apply(MathJax.Localization,[["TeX",m]].concat([].slice.call(arguments,1)))};var f=MathJax.Object.isArray;var e=MathJax.Object.Subclass({Init:function(n,m){this.global={isInner:m};this.data=[b.start(this.global)];if(n){this.data[0].env=n}this.env=this.data[0].env},Push:function(){var o,n,p,q;for(o=0,n=arguments.length;o":"27E9","\\lt":"27E8","\\gt":"27E9","/":"/","|":["|",{texClass:i.TEXCLASS.ORD}],".":"","\\\\":"\\","\\lmoustache":"23B0","\\rmoustache":"23B1","\\lgroup":"27EE","\\rgroup":"27EF","\\arrowvert":"23D0","\\Arrowvert":"2016","\\bracevert":"23AA","\\Vert":["2016",{texClass:i.TEXCLASS.ORD}],"\\|":["2016",{texClass:i.TEXCLASS.ORD}],"\\vert":["|",{texClass:i.TEXCLASS.ORD}],"\\uparrow":"2191","\\downarrow":"2193","\\updownarrow":"2195","\\Uparrow":"21D1","\\Downarrow":"21D3","\\Updownarrow":"21D5","\\backslash":"\\","\\rangle":"27E9","\\langle":"27E8","\\rbrace":"}","\\lbrace":"{","\\}":"}","\\{":"{","\\rceil":"2309","\\lceil":"2308","\\rfloor":"230B","\\lfloor":"230A","\\lbrack":"[","\\rbrack":"]"},macros:{displaystyle:["SetStyle","D",true,0],textstyle:["SetStyle","T",false,0],scriptstyle:["SetStyle","S",false,1],scriptscriptstyle:["SetStyle","SS",false,2],rm:["SetFont",i.VARIANT.NORMAL],mit:["SetFont",i.VARIANT.ITALIC],oldstyle:["SetFont",i.VARIANT.OLDSTYLE],cal:["SetFont",i.VARIANT.CALIGRAPHIC],it:["SetFont","-tex-mathit"],bf:["SetFont",i.VARIANT.BOLD],bbFont:["SetFont",i.VARIANT.DOUBLESTRUCK],scr:["SetFont",i.VARIANT.SCRIPT],frak:["SetFont",i.VARIANT.FRAKTUR],sf:["SetFont",i.VARIANT.SANSSERIF],tt:["SetFont",i.VARIANT.MONOSPACE],tiny:["SetSize",0.5],Tiny:["SetSize",0.6],scriptsize:["SetSize",0.7],small:["SetSize",0.85],normalsize:["SetSize",1],large:["SetSize",1.2],Large:["SetSize",1.44],LARGE:["SetSize",1.73],huge:["SetSize",2.07],Huge:["SetSize",2.49],arcsin:["NamedFn"],arccos:["NamedFn"],arctan:["NamedFn"],arg:["NamedFn"],cos:["NamedFn"],cosh:["NamedFn"],cot:["NamedFn"],coth:["NamedFn"],csc:["NamedFn"],deg:["NamedFn"],det:"NamedOp",dim:["NamedFn"],exp:["NamedFn"],gcd:"NamedOp",hom:["NamedFn"],inf:"NamedOp",ker:["NamedFn"],lg:["NamedFn"],lim:"NamedOp",liminf:["NamedOp","lim inf"],limsup:["NamedOp","lim sup"],ln:["NamedFn"],log:["NamedFn"],max:"NamedOp",min:"NamedOp",Pr:"NamedOp",sec:["NamedFn"],sin:["NamedFn"],sinh:["NamedFn"],sup:"NamedOp",tan:["NamedFn"],tanh:["NamedFn"],limits:["Limits",1],nolimits:["Limits",0],overline:["UnderOver","00AF",null,1],underline:["UnderOver","005F"],overbrace:["UnderOver","23DE",1],underbrace:["UnderOver","23DF",1],overparen:["UnderOver","23DC"],underparen:["UnderOver","23DD"],overrightarrow:["UnderOver","2192"],underrightarrow:["UnderOver","2192"],overleftarrow:["UnderOver","2190"],underleftarrow:["UnderOver","2190"],overleftrightarrow:["UnderOver","2194"],underleftrightarrow:["UnderOver","2194"],overset:"Overset",underset:"Underset",stackrel:["Macro","\\mathrel{\\mathop{#2}\\limits^{#1}}",2],over:"Over",overwithdelims:"Over",atop:"Over",atopwithdelims:"Over",above:"Over",abovewithdelims:"Over",brace:["Over","{","}"],brack:["Over","[","]"],choose:["Over","(",")"],frac:"Frac",sqrt:"Sqrt",root:"Root",uproot:["MoveRoot","upRoot"],leftroot:["MoveRoot","leftRoot"],left:"LeftRight",right:"LeftRight",middle:"Middle",llap:"Lap",rlap:"Lap",raise:"RaiseLower",lower:"RaiseLower",moveleft:"MoveLeftRight",moveright:"MoveLeftRight",",":["Spacer",i.LENGTH.THINMATHSPACE],":":["Spacer",i.LENGTH.MEDIUMMATHSPACE],">":["Spacer",i.LENGTH.MEDIUMMATHSPACE],";":["Spacer",i.LENGTH.THICKMATHSPACE],"!":["Spacer",i.LENGTH.NEGATIVETHINMATHSPACE],enspace:["Spacer",".5em"],quad:["Spacer","1em"],qquad:["Spacer","2em"],thinspace:["Spacer",i.LENGTH.THINMATHSPACE],negthinspace:["Spacer",i.LENGTH.NEGATIVETHINMATHSPACE],hskip:"Hskip",hspace:"Hskip",kern:"Hskip",mskip:"Hskip",mspace:"Hskip",mkern:"Hskip",rule:"rule",Rule:["Rule"],Space:["Rule","blank"],big:["MakeBig",i.TEXCLASS.ORD,0.85],Big:["MakeBig",i.TEXCLASS.ORD,1.15],bigg:["MakeBig",i.TEXCLASS.ORD,1.45],Bigg:["MakeBig",i.TEXCLASS.ORD,1.75],bigl:["MakeBig",i.TEXCLASS.OPEN,0.85],Bigl:["MakeBig",i.TEXCLASS.OPEN,1.15],biggl:["MakeBig",i.TEXCLASS.OPEN,1.45],Biggl:["MakeBig",i.TEXCLASS.OPEN,1.75],bigr:["MakeBig",i.TEXCLASS.CLOSE,0.85],Bigr:["MakeBig",i.TEXCLASS.CLOSE,1.15],biggr:["MakeBig",i.TEXCLASS.CLOSE,1.45],Biggr:["MakeBig",i.TEXCLASS.CLOSE,1.75],bigm:["MakeBig",i.TEXCLASS.REL,0.85],Bigm:["MakeBig",i.TEXCLASS.REL,1.15],biggm:["MakeBig",i.TEXCLASS.REL,1.45],Biggm:["MakeBig",i.TEXCLASS.REL,1.75],mathord:["TeXAtom",i.TEXCLASS.ORD],mathop:["TeXAtom",i.TEXCLASS.OP],mathopen:["TeXAtom",i.TEXCLASS.OPEN],mathclose:["TeXAtom",i.TEXCLASS.CLOSE],mathbin:["TeXAtom",i.TEXCLASS.BIN],mathrel:["TeXAtom",i.TEXCLASS.REL],mathpunct:["TeXAtom",i.TEXCLASS.PUNCT],mathinner:["TeXAtom",i.TEXCLASS.INNER],vcenter:["TeXAtom",i.TEXCLASS.VCENTER],mathchoice:["Extension","mathchoice"],buildrel:"BuildRel",hbox:["HBox",0],text:"HBox",mbox:["HBox",0],fbox:"FBox",strut:"Strut",mathstrut:["Macro","\\vphantom{(}"],phantom:"Phantom",vphantom:["Phantom",1,0],hphantom:["Phantom",0,1],smash:"Smash",acute:["Accent","00B4"],grave:["Accent","0060"],ddot:["Accent","00A8"],tilde:["Accent","007E"],bar:["Accent","00AF"],breve:["Accent","02D8"],check:["Accent","02C7"],hat:["Accent","005E"],vec:["Accent","2192"],dot:["Accent","02D9"],widetilde:["Accent","007E",1],widehat:["Accent","005E",1],matrix:"Matrix",array:"Matrix",pmatrix:["Matrix","(",")"],cases:["Matrix","{","","left left",null,".1em",null,true],eqalign:["Matrix",null,null,"right left",i.LENGTH.THICKMATHSPACE,".5em","D"],displaylines:["Matrix",null,null,"center",null,".5em","D"],cr:"Cr","\\":"CrLaTeX",newline:"Cr",hline:["HLine","solid"],hdashline:["HLine","dashed"],eqalignno:["Matrix",null,null,"right left",i.LENGTH.THICKMATHSPACE,".5em","D",null,"right"],leqalignno:["Matrix",null,null,"right left",i.LENGTH.THICKMATHSPACE,".5em","D",null,"left"],hfill:"HFill",hfil:"HFill",hfilll:"HFill",bmod:["Macro",'\\mmlToken{mo}[lspace="thickmathspace" rspace="thickmathspace"]{mod}'],pmod:["Macro","\\pod{\\mmlToken{mi}{mod}\\kern 6mu #1}",1],mod:["Macro","\\mathchoice{\\kern18mu}{\\kern12mu}{\\kern12mu}{\\kern12mu}\\mmlToken{mi}{mod}\\,\\,#1",1],pod:["Macro","\\mathchoice{\\kern18mu}{\\kern8mu}{\\kern8mu}{\\kern8mu}(#1)",1],iff:["Macro","\\;\\Longleftrightarrow\\;"],skew:["Macro","{{#2{#3\\mkern#1mu}\\mkern-#1mu}{}}",3],mathcal:["Macro","{\\cal #1}",1],mathscr:["Macro","{\\scr #1}",1],mathrm:["Macro","{\\rm #1}",1],mathbf:["Macro","{\\bf #1}",1],mathbb:["Macro","{\\bbFont #1}",1],Bbb:["Macro","{\\bbFont #1}",1],mathit:["Macro","{\\it #1}",1],mathfrak:["Macro","{\\frak #1}",1],mathsf:["Macro","{\\sf #1}",1],mathtt:["Macro","{\\tt #1}",1],textrm:["Macro","\\mathord{\\rm\\text{#1}}",1],textit:["Macro","\\mathord{\\it\\text{#1}}",1],textbf:["Macro","\\mathord{\\bf\\text{#1}}",1],textsf:["Macro","\\mathord{\\sf\\text{#1}}",1],texttt:["Macro","\\mathord{\\tt\\text{#1}}",1],pmb:["Macro","\\rlap{#1}\\kern1px{#1}",1],TeX:["Macro","T\\kern-.14em\\lower.5ex{E}\\kern-.115em X"],LaTeX:["Macro","L\\kern-.325em\\raise.21em{\\scriptstyle{A}}\\kern-.17em\\TeX"]," ":["Macro","\\text{ }"],not:"Not",dots:"Dots",space:"Tilde","\u00A0":"Tilde",begin:"BeginEnd",end:"BeginEnd",newcommand:["Extension","newcommand"],renewcommand:["Extension","newcommand"],newenvironment:["Extension","newcommand"],renewenvironment:["Extension","newcommand"],def:["Extension","newcommand"],let:["Extension","newcommand"],verb:["Extension","verb"],boldsymbol:["Extension","boldsymbol"],tag:["Extension","AMSmath"],notag:["Extension","AMSmath"],label:["Extension","AMSmath"],ref:["Extension","AMSmath"],eqref:["Extension","AMSmath"],nonumber:["Macro","\\notag"],unicode:["Extension","unicode"],color:"Color",href:["Extension","HTML"],"class":["Extension","HTML"],style:["Extension","HTML"],cssId:["Extension","HTML"],bbox:["Extension","bbox"],mmlToken:"MmlToken",require:"Require"},environment:{array:["AlignedArray"],matrix:["Array",null,null,null,"c"],pmatrix:["Array",null,"(",")","c"],bmatrix:["Array",null,"[","]","c"],Bmatrix:["Array",null,"\\{","\\}","c"],vmatrix:["Array",null,"\\vert","\\vert","c"],Vmatrix:["Array",null,"\\Vert","\\Vert","c"],cases:["Array",null,"\\{",".","ll",null,".2em","T"],equation:[null,"Equation"],"equation*":[null,"Equation"],eqnarray:["ExtensionEnv",null,"AMSmath"],"eqnarray*":["ExtensionEnv",null,"AMSmath"],align:["ExtensionEnv",null,"AMSmath"],"align*":["ExtensionEnv",null,"AMSmath"],aligned:["ExtensionEnv",null,"AMSmath"],multline:["ExtensionEnv",null,"AMSmath"],"multline*":["ExtensionEnv",null,"AMSmath"],split:["ExtensionEnv",null,"AMSmath"],gather:["ExtensionEnv",null,"AMSmath"],"gather*":["ExtensionEnv",null,"AMSmath"],gathered:["ExtensionEnv",null,"AMSmath"],alignat:["ExtensionEnv",null,"AMSmath"],"alignat*":["ExtensionEnv",null,"AMSmath"],alignedat:["ExtensionEnv",null,"AMSmath"]},p_height:1.2/0.85});if(this.config.Macros){var m=this.config.Macros;for(var n in m){if(m.hasOwnProperty(n)){if(typeof(m[n])==="string"){g.macros[n]=["Macro",m[n]]}else{g.macros[n]=["Macro"].concat(m[n])}g.macros[n].isUser=true}}}};var a=MathJax.Object.Subclass({Init:function(n,o){this.string=n;this.i=0;this.macroCount=0;var m;if(o){m={};for(var p in o){if(o.hasOwnProperty(p)){m[p]=o[p]}}}this.stack=d.Stack(m,!!o);this.Parse();this.Push(b.stop())},Parse:function(){var o,m;while(this.i=55296&&m<56320){o+=this.string.charAt(this.i++)}if(g.special.hasOwnProperty(o)){this[g.special[o]](o)}else{if(g.letter.test(o)){this.Variable(o)}else{if(g.digit.test(o)){this.Number(o)}else{this.Other(o)}}}}},Push:function(){this.stack.Push.apply(this.stack,arguments)},mml:function(){if(this.stack.Top().type!=="mml"){return null}return this.stack.Top().data[0]},mmlToken:function(m){return m},ControlSequence:function(p){var m=this.GetCS(),o=this.csFindMacro(m);if(o){if(!f(o)){o=[o]}var n=o[0];if(!(n instanceof Function)){n=this[n]}n.apply(this,[p+m].concat(o.slice(1)))}else{if(g.mathchar0mi.hasOwnProperty(m)){this.csMathchar0mi(m,g.mathchar0mi[m])}else{if(g.mathchar0mo.hasOwnProperty(m)){this.csMathchar0mo(m,g.mathchar0mo[m])}else{if(g.mathchar7.hasOwnProperty(m)){this.csMathchar7(m,g.mathchar7[m])}else{if(g.delimiter.hasOwnProperty("\\"+m)){this.csDelimiter(m,g.delimiter["\\"+m])}else{this.csUndefined(p+m)}}}}}},csFindMacro:function(m){return(g.macros.hasOwnProperty(m)?g.macros[m]:null)},csMathchar0mi:function(m,o){var n={mathvariant:i.VARIANT.ITALIC};if(f(o)){n=o[1];o=o[0]}this.Push(this.mmlToken(i.mi(i.entity("#x"+o)).With(n)))},csMathchar0mo:function(m,o){var n={stretchy:false};if(f(o)){n=o[1];n.stretchy=false;o=o[0]}this.Push(this.mmlToken(i.mo(i.entity("#x"+o)).With(n)))},csMathchar7:function(m,o){var n={mathvariant:i.VARIANT.NORMAL};if(f(o)){n=o[1];o=o[0]}if(this.stack.env.font){n.mathvariant=this.stack.env.font}this.Push(this.mmlToken(i.mi(i.entity("#x"+o)).With(n)))},csDelimiter:function(m,o){var n={};if(f(o)){n=o[1];o=o[0]}if(o.length===4){o=i.entity("#x"+o)}else{o=i.chars(o)}this.Push(this.mmlToken(i.mo(o).With({fence:false,stretchy:false}).With(n)))},csUndefined:function(m){d.Error(["UndefinedControlSequence","Undefined control sequence %1",m])},Variable:function(n){var m={};if(this.stack.env.font){m.mathvariant=this.stack.env.font}this.Push(this.mmlToken(i.mi(i.chars(n)).With(m)))},Number:function(p){var m,o=this.string.slice(this.i-1).match(g.number);if(o){m=i.mn(o[0].replace(/[{}]/g,""));this.i+=o[0].length-1}else{m=i.mo(i.chars(p))}if(this.stack.env.font){m.mathvariant=this.stack.env.font}this.Push(this.mmlToken(m))},Open:function(m){this.Push(b.open())},Close:function(m){this.Push(b.close())},Tilde:function(m){this.Push(i.mtext(i.chars(h)))},Space:function(m){},Superscript:function(r){if(this.GetNext().match(/\d/)){this.string=this.string.substr(0,this.i+1)+" "+this.string.substr(this.i+1)}var q,o,p=this.stack.Top();if(p.type==="prime"){o=p.data[0];q=p.data[1];this.stack.Pop()}else{o=this.stack.Prev();if(!o){o=i.mi("")}}if(o.isEmbellishedWrapper){o=o.data[0].data[0]}var n=o.movesupsub,m=o.sup;if((o.type==="msubsup"&&o.data[o.sup])||(o.type==="munderover"&&o.data[o.over]&&!o.subsupOK)){d.Error(["DoubleExponent","Double exponent: use braces to clarify"])}if(o.type!=="msubsup"){if(n){if(o.type!=="munderover"||o.data[o.over]){if(o.movablelimits&&o.isa(i.mi)){o=this.mi2mo(o)}o=i.munderover(o,null,null).With({movesupsub:true})}m=o.over}else{o=i.msubsup(o,null,null);m=o.sup}}this.Push(b.subsup(o).With({position:m,primes:q,movesupsub:n}))},Subscript:function(r){if(this.GetNext().match(/\d/)){this.string=this.string.substr(0,this.i+1)+" "+this.string.substr(this.i+1)}var q,o,p=this.stack.Top();if(p.type==="prime"){o=p.data[0];q=p.data[1];this.stack.Pop()}else{o=this.stack.Prev();if(!o){o=i.mi("")}}if(o.isEmbellishedWrapper){o=o.data[0].data[0]}var n=o.movesupsub,m=o.sub;if((o.type==="msubsup"&&o.data[o.sub])||(o.type==="munderover"&&o.data[o.under]&&!o.subsupOK)){d.Error(["DoubleSubscripts","Double subscripts: use braces to clarify"])}if(o.type!=="msubsup"){if(n){if(o.type!=="munderover"||o.data[o.under]){if(o.movablelimits&&o.isa(i.mi)){o=this.mi2mo(o)}o=i.munderover(o,null,null).With({movesupsub:true})}m=o.under}else{o=i.msubsup(o,null,null);m=o.sub}}this.Push(b.subsup(o).With({position:m,primes:q,movesupsub:n}))},PRIME:"\u2032",SMARTQUOTE:"\u2019",Prime:function(o){var n=this.stack.Prev();if(!n){n=i.mi()}if(n.type==="msubsup"&&n.data[n.sup]){d.Error(["DoubleExponentPrime","Prime causes double exponent: use braces to clarify"])}var m="";this.i--;do{m+=this.PRIME;this.i++,o=this.GetNext()}while(o==="'"||o===this.SMARTQUOTE);m=["","\u2032","\u2033","\u2034","\u2057"][m.length]||m;this.Push(b.prime(n,this.mmlToken(i.mo(m))))},mi2mo:function(m){var n=i.mo();n.Append.apply(n,m.data);var o;for(o in n.defaults){if(n.defaults.hasOwnProperty(o)&&m[o]!=null){n[o]=m[o]}}for(o in i.copyAttributes){if(i.copyAttributes.hasOwnProperty(o)&&m[o]!=null){n[o]=m[o]}}n.lspace=n.rspace="0";n.useMMLspacing&=~(n.SPACE_ATTR.lspace|n.SPACE_ATTR.rspace);return n},Comment:function(m){while(this.id.config.MAXMACROS){d.Error(["MaxMacroSub1","MathJax maximum macro substitution count exceeded; is there a recursive macro call?"])}},Matrix:function(n,p,v,r,u,o,m,w,t){var s=this.GetNext();if(s===""){d.Error(["MissingArgFor","Missing argument for %1",n])}if(s==="{"){this.i++}else{this.string=s+"}"+this.string.slice(this.i+1);this.i=0}var q=b.array().With({requireClose:true,arraydef:{rowspacing:(o||"4pt"),columnspacing:(u||"1em")}});if(w){q.isCases=true}if(t){q.isNumbered=true;q.arraydef.side=t}if(p||v){q.open=p;q.close=v}if(m==="D"){q.arraydef.displaystyle=true}if(r!=null){q.arraydef.columnalign=r}this.Push(q)},Entry:function(p){this.Push(b.cell().With({isEntry:true,name:p}));if(this.stack.Top().isCases){var o=this.string;var t=0,s=-1,q=this.i,n=o.length;while(qd.config.MAXMACROS){d.Error(["MaxMacroSub2","MathJax maximum substitution count exceeded; is there a recursive latex environment?"])}if(q[0]&&this[q[0]]){n=this[q[0]].apply(this,[n].concat(q.slice(2)))}}this.Push(n)},envFindName:function(m){return(g.environment.hasOwnProperty(m)?g.environment[m]:null)},Equation:function(m,n){return n},ExtensionEnv:function(n,m){this.Extension(n.name,m,"environment")},Array:function(n,p,u,s,t,o,m,q){if(!s){s=this.GetArgument("\\begin{"+n.name+"}")}var v=("c"+s).replace(/[^clr|:]/g,"").replace(/[^|:]([|:])+/g,"$1");s=s.replace(/[^clr]/g,"").split("").join(" ");s=s.replace(/l/g,"left").replace(/r/g,"right").replace(/c/g,"center");var r=b.array().With({arraydef:{columnalign:s,columnspacing:(t||"1em"),rowspacing:(o||"4pt")}});if(v.match(/[|:]/)){if(v.charAt(0).match(/[|:]/)){r.frame.push("left");r.frame.dashed=v.charAt(0)===":"}if(v.charAt(v.length-1).match(/[|:]/)){r.frame.push("right")}v=v.substr(1,v.length-2);r.arraydef.columnlines=v.split("").join(" ").replace(/[^|: ]/g,"none").replace(/\|/g,"solid").replace(/:/g,"dashed")}if(p){r.open=this.convertDelimiter(p)}if(u){r.close=this.convertDelimiter(u)}if(m==="D"){r.arraydef.displaystyle=true}else{if(m){r.arraydef.displaystyle=false}}if(m==="S"){r.arraydef.scriptlevel=1}if(q){r.arraydef.useHeight=false}this.Push(n);return r},AlignedArray:function(m){var n=this.GetBrackets("\\begin{"+m.name+"}");return this.setArrayAlign(this.Array.apply(this,arguments),n)},setArrayAlign:function(n,m){m=this.trimSpaces(m||"");if(m==="t"){n.arraydef.align="baseline 1"}else{if(m==="b"){n.arraydef.align="baseline -1"}else{if(m==="c"){n.arraydef.align="center"}else{if(m){n.arraydef.align=m}}}}return n},convertDelimiter:function(m){if(m){m=(g.delimiter.hasOwnProperty(m)?g.delimiter[m]:null)}if(m==null){return null}if(f(m)){m=m[0]}if(m.length===4){m=String.fromCharCode(parseInt(m,16))}return m},trimSpaces:function(n){if(typeof(n)!="string"){return n}var m=n.replace(/^\s+|\s+$/g,"");if(m.match(/\\$/)&&n.match(/ $/)){m+=" "}return m},nextIsSpace:function(){return this.string.charAt(this.i).match(/\s/)},GetNext:function(){while(this.nextIsSpace()){this.i++}return this.string.charAt(this.i)},GetCS:function(){var m=this.string.slice(this.i).match(/^([a-z]+|.) ?/i);if(m){this.i+=m[1].length;return m[1]}else{this.i++;return" "}},GetArgument:function(n,o){switch(this.GetNext()){case"":if(!o){d.Error(["MissingArgFor","Missing argument for %1",n])}return null;case"}":if(!o){d.Error(["ExtraCloseMissingOpen","Extra close brace or missing open brace"])}return null;case"\\":this.i++;return"\\"+this.GetCS();case"{":var m=++this.i,p=1;while(this.i1){n=[i.mrow.apply(i,n)]}}return n},InternalText:function(n,m){n=n.replace(/^\s+/,h).replace(/\s+$/,h);return i.mtext(i.chars(n)).With(m)},setDef:function(m,n){n.isUser=true;g.macros[m]=n},setEnv:function(m,n){n.isUser=true;g.environment[m]=n},SubstituteArgs:function(n,m){var q="";var p="";var r;var o=0;while(on.length){d.Error(["IllegalMacroParam","Illegal macro parameter reference"])}p=this.AddArgs(this.AddArgs(p,q),n[r-1]);q=""}}else{q+=r}}}return this.AddArgs(p,q)},AddArgs:function(n,m){if(m.match(/^[a-z]/i)&&n.match(/(^|[^\\])(\\\\)*\\[a-z]+$/i)){n+=" "}if(n.length+m.length>d.config.MAXBUFFER){d.Error(["MaxBufferSize","MathJax internal buffer size exceeded; is there a recursive macro call?"])}return n+m}});d.Augment({Stack:e,Parse:a,Definitions:g,Startup:l,config:{MAXMACROS:10000,MAXBUFFER:5*1024},sourceMenuTitle:["TeXCommands","TeX Commands"],annotationEncoding:"application/x-tex",prefilterHooks:MathJax.Callback.Hooks(true),postfilterHooks:MathJax.Callback.Hooks(true),Config:function(){this.SUPER(arguments).Config.apply(this,arguments);if(this.config.equationNumbers.autoNumber!=="none"){if(!this.config.extensions){this.config.extensions=[]}this.config.extensions.push("AMSmath.js")}},Translate:function(m){var n,o=false,q=MathJax.HTML.getScript(m);var s=(m.type.replace(/\n/g," ").match(/(;|\s|\n)mode\s*=\s*display(;|\s|\n|$)/)!=null);var r={math:q,display:s,script:m};var t=this.prefilterHooks.Execute(r);if(t){return t}q=r.math;try{n=d.Parse(q).mml()}catch(p){if(!p.texError){throw p}n=this.formatError(p,q,s,m);o=true}if(n.isa(i.mtable)&&n.displaystyle==="inherit"){n.displaystyle=s}if(n.inferred){n=i.apply(MathJax.ElementJax,n.data)}else{n=i(n)}if(s){n.root.display="block"}if(o){n.texError=true}r.math=n;return this.postfilterHooks.Execute(r)||r.math},prefilterMath:function(n,o,m){return n},postfilterMath:function(n,o,m){this.combineRelations(n.root);return n},formatError:function(p,o,q,m){var n=p.message.replace(/\n.*/,"");c.signal.Post(["TeX Jax - parse error",n,o,q,m]);return i.Error(n)},Error:function(m){if(f(m)){m=k.apply(k,m)}throw c.Insert(Error(m),{texError:true})},Macro:function(m,n,o){g.macros[m]=["Macro"].concat([].slice.call(arguments,1));g.macros[m].isUser=true},fenced:function(o,n,p){var m=i.mrow().With({open:o,close:p,texClass:i.TEXCLASS.INNER});m.Append(i.mo(o).With({fence:true,stretchy:true,symmetric:true,texClass:i.TEXCLASS.OPEN}));if(n.type==="mrow"&&n.inferred){m.Append.apply(m,n.data)}else{m.Append(n)}m.Append(i.mo(p).With({fence:true,stretchy:true,symmetric:true,texClass:i.TEXCLASS.CLOSE}));return m},fixedFence:function(o,n,p){var m=i.mrow().With({open:o,close:p,texClass:i.TEXCLASS.ORD});if(o){m.Append(this.mathPalette(o,"l"))}if(n.type==="mrow"){m.Append.apply(m,n.data)}else{m.Append(n)}if(p){m.Append(this.mathPalette(p,"r"))}return m},mathPalette:function(p,n){if(p==="{"||p==="}"){p="\\"+p}var o="{\\bigg"+n+" "+p+"}",m="{\\big"+n+" "+p+"}";return d.Parse("\\mathchoice"+o+m+m+m,{}).mml()},combineRelations:function(q){var r,n,p,o;for(r=0,n=q.data.length;r0){p+="rl";o.push("0em 0em");q--}o=o.join(" ");if(i){return this.AMSarray(l,j,i,p,o)}var m=this.AMSarray(l,j,i,p,o);return this.setArrayAlign(m,k)},EquationBegin:function(i,j){this.checkEqnEnv();this.stack.global.forcetag=(j&&a.autoNumber!=="none");return i},EquationStar:function(i,j){this.stack.global.tagged=true;return j},checkEqnEnv:function(){if(this.stack.global.eqnenv){h.Error(["ErroneousNestingEq","Erroneous nesting of equation structures"])}this.stack.global.eqnenv=true},MultiIntegral:function(j,m){var l=this.GetNext();if(l==="\\"){var k=this.i;l=this.GetArgument(j);this.i=k;if(l==="\\limits"){if(j==="\\idotsint"){m="\\!\\!\\mathop{\\,\\,"+m+"}"}else{m="\\!\\!\\!\\mathop{\\,\\,\\,"+m+"}"}}}this.string=m+" "+this.string.slice(this.i);this.i=0},xArrow:function(k,o,n,i){var m={width:"+"+(n+i)+"mu",lspace:n+"mu"};var p=this.GetBrackets(k),q=this.ParseArg(k);var s=b.mo(b.chars(String.fromCharCode(o))).With({stretchy:true,texClass:b.TEXCLASS.REL});var j=b.munderover(s);j.SetData(j.over,b.mpadded(q).With(m).With({voffset:".15em"}));if(p){p=h.Parse(p,this.stack.env).mml();j.SetData(j.under,b.mpadded(p).With(m).With({voffset:"-.24em"}))}this.Push(j.With({subsupOK:true}))},GetDelimiterArg:function(i){var j=this.trimSpaces(this.GetArgument(i));if(j==""){return null}if(j in d.delimiter){return j}h.Error(["MissingOrUnrecognizedDelim","Missing or unrecognized delimiter for %1",i])},GetStar:function(){var i=(this.GetNext()==="*");if(i){this.i++}return i}});f.Augment({autoTag:function(){var j=this.global;if(!j.notag){g.number++;j.tagID=a.formatNumber(g.number.toString());var i=h.Parse("\\text{"+a.formatTag(j.tagID)+"}",{}).mml();j.tag=b.mtd(i).With({id:a.formatID(j.tagID)})}},getTag:function(){var m=this.global,k=m.tag;m.tagged=true;if(m.label){if(a.useLabelIds){k.id=a.formatID(m.label)}g.eqlabels[m.label]={tag:m.tagID,id:k.id}}if(document.getElementById(k.id)||g.IDs[k.id]||g.eqIDs[k.id]){var l=0,j;do{l++;j=k.id+"_"+l}while(document.getElementById(j)||g.IDs[j]||g.eqIDs[j]);k.id=j;if(m.label){g.eqlabels[m.label].id=j}}g.eqIDs[k.id]=1;this.clearTag();return k},clearTag:function(){var i=this.global;delete i.tag;delete i.tagID;delete i.label},fixInitialMO:function(l){for(var k=0,j=l.length;k element, not %1","<"+j.firstChild.nodeName+">"])}var i={math:j.firstChild,script:e};c.DOMfilterHooks.Execute(i);this.mml=this.MakeMML(i.math)},MakeMML:function(h){var i=String(h.getAttribute("class")||"");var f,g=h.nodeName.toLowerCase().replace(/^[a-z]+:/,"");var e=(i.match(/(^| )MJX-TeXAtom-([^ ]*)/));if(e){f=this.TeXAtom(e[2],e[2]==="OP"&&!i.match(/MJX-fixedlimits/))}else{if(!(a[g]&&a[g].isa&&a[g].isa(a.mbase))){MathJax.Hub.signal.Post(["MathML Jax - unknown node type",g]);return a.Error(b("UnknownNodeType","Unknown node type: %1",g))}else{f=a[g]()}}this.AddAttributes(f,h);this.CheckClass(f,f["class"]);this.AddChildren(f,h);if(c.config.useMathMLspacing){f.useMMLspacing=8}return f},TeXAtom:function(g,f){var e=a.TeXAtom().With({texClass:a.TEXCLASS[g]});if(f){e.movesupsub=e.movablelimits=true}return e},CheckClass:function(f,h){h=(h||"").split(/ /);var j=[];for(var g=0,e=h.length;g=2){var l=e.data[0],n=e.data[e.data.length-1];if(l.type==="mo"&&l.Get("fence")&&n.type==="mo"&&n.Get("fence")){if(l.data[0]){e.open=l.data.join("")}if(n.data[0]){e.close=n.data.join("")}}}},preProcessMath:function(f){if(f.match(/^<[a-z]+:/i)&&!f.match(/^<[^<>]* xmlns:/)){f=f.replace(/^<([a-z]+)(:math)/i,'<$1$2 xmlns:$1="http://www.w3.org/1998/Math/MathML"')}var e=f.match(/^(])+)>)/i);if(e&&e[2].match(/ (?!xmlns=)[a-z]+=\"http:/i)){f=e[1].replace(/ (?!xmlns=)([a-z]+=(['"])http:.*?\2)/ig," xmlns:$1 $1")+f.substr(e[0].length)}if(f.match(/^]/i)&&!f.match(/^<[^<>]* xmlns=/)){f=f.replace(/^<(math)/i,'\s*$/,"$2");return f.replace(/&([a-z][a-z0-9]*);/ig,this.replaceEntity)},trimSpace:function(e){return e.replace(/[\t\n\r]/g," ").replace(/^ +/,"").replace(/ +$/,"").replace(/ +/g," ")},replaceEntity:function(g,f){if(f.match(/^(lt|amp|quot)$/)){return g}if(c.Parse.Entity[f]){return c.Parse.Entity[f]}var h=f.charAt(0).toLowerCase();var e=f.match(/^[a-zA-Z](fr|scr|opf)$/);if(e){h=e[1]}if(!c.Parse.loaded[h]){c.Parse.loaded[h]=true;MathJax.Hub.RestartAfter(MathJax.Ajax.Require(c.entityDir+"/"+h+".js"))}return g}},{loaded:[]});c.Augment({sourceMenuTitle:["OriginalMathML","Original MathML"],prefilterHooks:MathJax.Callback.Hooks(true),DOMfilterHooks:MathJax.Callback.Hooks(true),postfilterHooks:MathJax.Callback.Hooks(true),Translate:function(e){if(!this.ParseXML){this.ParseXML=this.createParser()}var f,h,i={script:e};if(e.firstChild&&e.firstChild.nodeName.toLowerCase().replace(/^[a-z]+:/,"")==="math"){i.math=e.firstChild}else{h=MathJax.HTML.getScript(e);if(d.isMSIE){h=h.replace(/( )+$/,"")}i.math=h}var j=this.prefilterHooks.Execute(i);if(j){return j}h=i.math;try{f=c.Parse(h,e).mml}catch(g){if(!g.mathmlError){throw g}f=this.formatError(g,h,e)}i.math=a(f);return this.postfilterHooks.Execute(i)||i.math},prefilterMath:function(f,e){return f},prefilterMathML:function(f,e){return f},formatError:function(h,g,e){var f=h.message.replace(/\n.*/,"");MathJax.Hub.signal.Post(["MathML Jax - parse error",f,g,e]);return a.Error(f)},Error:function(e){if(MathJax.Object.isArray(e)){e=b.apply(b,e)}throw MathJax.Hub.Insert(Error(e),{mathmlError:true})},parseDOM:function(e){return this.parser.parseFromString(e,"text/xml")},parseMS:function(e){return(this.parser.loadXML(e)?this.parser:null)},parseDIV:function(e){this.div.innerHTML="
"+e.replace(/<([a-z]+)([^>]*)\/>/g,"<$1$2>")+"
";var f=this.div.firstChild;this.div.innerHTML="";return f},parseError:function(e){return null},createMSParser:function(){var j=null;var f=["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument.2.0","Microsoft.XMLDOM"];for(var g=0,e=f.length;g=ab-1){this.lastChild=ae}this.childNodes[ad]=ae;ae.nextSibling=ac.nextSibling;ac.nextSibling=ac.parent=null;return ac},hasChildNodes:function(ab){return(this.childNodes.length>0)},toString:function(){return"{"+this.childNodes.join("")+"}"}});var x=function(){g=MathJax.ElementJax.mml;var ab=g.mbase.prototype.Init;g.mbase.Augment({firstChild:null,lastChild:null,nodeValue:null,nextSibling:null,Init:function(){var ac=ab.apply(this,arguments)||this;ac.childNodes=ac.data;ac.nodeName=ac.type;return ac},appendChild:function(af){if(af.parent){af.parent.removeChild(af)}var ad=arguments;if(af.isa(X)){ad=af.childNodes;af.data=af.childNodes=[];af.firstChild=af.lastChild=null}for(var ae=0,ac=ad.length;ae=ac-1){this.lastChild=af}this.SetData(ae,af);af.nextSibling=ad.nextSibling;ad.nextSibling=ad.parent=null;return ad},hasChildNodes:function(ac){return(this.childNodes.length>0)},setAttribute:function(ac,ad){this[ac]=ad}})};var Q={};var e={getElementById:true,createElementNS:function(ac,ab){var ad=g[ab]();if(ab==="mo"&&aa.config.useMathMLspacing){ad.useMMLspacing=128}return ad},createTextNode:function(ab){return g.chars(ab).With({nodeValue:ab})},createDocumentFragment:function(){return X()}};var J={appName:"MathJax"};var C="blue";var o=true;var v=true;var d=".";var f=true;var l=(J.appName.slice(0,9)=="Microsoft");function E(ab){if(l){return e.createElement(ab)}else{return e.createElementNS("http://www.w3.org/1999/xhtml",ab)}}var W="http://www.w3.org/1998/Math/MathML";function P(ab){if(l){return e.createElement("m:"+ab)}else{return e.createElementNS(W,ab)}}function O(ab,ad){var ac;if(l){ac=e.createElement("m:"+ab)}else{ac=e.createElementNS(W,ab)}if(ad){ac.appendChild(ad)}return ac}function u(ab,ac){z.push({input:ab,tag:"mo",output:ac,tex:null,ttype:V});B()}function r(ab){z.push(ab);B()}var D=["\uD835\uDC9C","\u212C","\uD835\uDC9E","\uD835\uDC9F","\u2130","\u2131","\uD835\uDCA2","\u210B","\u2110","\uD835\uDCA5","\uD835\uDCA6","\u2112","\u2133","\uD835\uDCA9","\uD835\uDCAA","\uD835\uDCAB","\uD835\uDCAC","\u211B","\uD835\uDCAE","\uD835\uDCAF","\uD835\uDCB0","\uD835\uDCB1","\uD835\uDCB2","\uD835\uDCB3","\uD835\uDCB4","\uD835\uDCB5","\uD835\uDCB6","\uD835\uDCB7","\uD835\uDCB8","\uD835\uDCB9","\u212F","\uD835\uDCBB","\u210A","\uD835\uDCBD","\uD835\uDCBE","\uD835\uDCBF","\uD835\uDCC0","\uD835\uDCC1","\uD835\uDCC2","\uD835\uDCC3","\u2134","\uD835\uDCC5","\uD835\uDCC6","\uD835\uDCC7","\uD835\uDCC8","\uD835\uDCC9","\uD835\uDCCA","\uD835\uDCCB","\uD835\uDCCC","\uD835\uDCCD","\uD835\uDCCE","\uD835\uDCCF"];var H=["\uD835\uDD04","\uD835\uDD05","\u212D","\uD835\uDD07","\uD835\uDD08","\uD835\uDD09","\uD835\uDD0A","\u210C","\u2111","\uD835\uDD0D","\uD835\uDD0E","\uD835\uDD0F","\uD835\uDD10","\uD835\uDD11","\uD835\uDD12","\uD835\uDD13","\uD835\uDD14","\u211C","\uD835\uDD16","\uD835\uDD17","\uD835\uDD18","\uD835\uDD19","\uD835\uDD1A","\uD835\uDD1B","\uD835\uDD1C","\u2128","\uD835\uDD1E","\uD835\uDD1F","\uD835\uDD20","\uD835\uDD21","\uD835\uDD22","\uD835\uDD23","\uD835\uDD24","\uD835\uDD25","\uD835\uDD26","\uD835\uDD27","\uD835\uDD28","\uD835\uDD29","\uD835\uDD2A","\uD835\uDD2B","\uD835\uDD2C","\uD835\uDD2D","\uD835\uDD2E","\uD835\uDD2F","\uD835\uDD30","\uD835\uDD31","\uD835\uDD32","\uD835\uDD33","\uD835\uDD34","\uD835\uDD35","\uD835\uDD36","\uD835\uDD37"];var w=["\uD835\uDD38","\uD835\uDD39","\u2102","\uD835\uDD3B","\uD835\uDD3C","\uD835\uDD3D","\uD835\uDD3E","\u210D","\uD835\uDD40","\uD835\uDD41","\uD835\uDD42","\uD835\uDD43","\uD835\uDD44","\u2115","\uD835\uDD46","\u2119","\u211A","\u211D","\uD835\uDD4A","\uD835\uDD4B","\uD835\uDD4C","\uD835\uDD4D","\uD835\uDD4E","\uD835\uDD4F","\uD835\uDD50","\u2124","\uD835\uDD52","\uD835\uDD53","\uD835\uDD54","\uD835\uDD55","\uD835\uDD56","\uD835\uDD57","\uD835\uDD58","\uD835\uDD59","\uD835\uDD5A","\uD835\uDD5B","\uD835\uDD5C","\uD835\uDD5D","\uD835\uDD5E","\uD835\uDD5F","\uD835\uDD60","\uD835\uDD61","\uD835\uDD62","\uD835\uDD63","\uD835\uDD64","\uD835\uDD65","\uD835\uDD66","\uD835\uDD67","\uD835\uDD68","\uD835\uDD69","\uD835\uDD6A","\uD835\uDD6B"];var c=0,A=1,U=2,i=3,b=4,h=5,a=6,L=7,V=8,m=9,Y=10,K=15;var k={input:'"',tag:"mtext",output:"mbox",tex:null,ttype:Y};var z=[{input:"alpha",tag:"mi",output:"\u03B1",tex:null,ttype:c},{input:"beta",tag:"mi",output:"\u03B2",tex:null,ttype:c},{input:"chi",tag:"mi",output:"\u03C7",tex:null,ttype:c},{input:"delta",tag:"mi",output:"\u03B4",tex:null,ttype:c},{input:"Delta",tag:"mo",output:"\u0394",tex:null,ttype:c},{input:"epsi",tag:"mi",output:"\u03B5",tex:"epsilon",ttype:c},{input:"varepsilon",tag:"mi",output:"\u025B",tex:null,ttype:c},{input:"eta",tag:"mi",output:"\u03B7",tex:null,ttype:c},{input:"gamma",tag:"mi",output:"\u03B3",tex:null,ttype:c},{input:"Gamma",tag:"mo",output:"\u0393",tex:null,ttype:c},{input:"iota",tag:"mi",output:"\u03B9",tex:null,ttype:c},{input:"kappa",tag:"mi",output:"\u03BA",tex:null,ttype:c},{input:"lambda",tag:"mi",output:"\u03BB",tex:null,ttype:c},{input:"Lambda",tag:"mo",output:"\u039B",tex:null,ttype:c},{input:"lamda",tag:"mi",output:"\u03BB",tex:null,ttype:c},{input:"Lamda",tag:"mo",output:"\u039B",tex:null,ttype:c},{input:"mu",tag:"mi",output:"\u03BC",tex:null,ttype:c},{input:"nu",tag:"mi",output:"\u03BD",tex:null,ttype:c},{input:"omega",tag:"mi",output:"\u03C9",tex:null,ttype:c},{input:"Omega",tag:"mo",output:"\u03A9",tex:null,ttype:c},{input:"phi",tag:"mi",output:f?"\u03D5":"\u03C6",tex:null,ttype:c},{input:"varphi",tag:"mi",output:f?"\u03C6":"\u03D5",tex:null,ttype:c},{input:"Phi",tag:"mo",output:"\u03A6",tex:null,ttype:c},{input:"pi",tag:"mi",output:"\u03C0",tex:null,ttype:c},{input:"Pi",tag:"mo",output:"\u03A0",tex:null,ttype:c},{input:"psi",tag:"mi",output:"\u03C8",tex:null,ttype:c},{input:"Psi",tag:"mi",output:"\u03A8",tex:null,ttype:c},{input:"rho",tag:"mi",output:"\u03C1",tex:null,ttype:c},{input:"sigma",tag:"mi",output:"\u03C3",tex:null,ttype:c},{input:"Sigma",tag:"mo",output:"\u03A3",tex:null,ttype:c},{input:"tau",tag:"mi",output:"\u03C4",tex:null,ttype:c},{input:"theta",tag:"mi",output:"\u03B8",tex:null,ttype:c},{input:"vartheta",tag:"mi",output:"\u03D1",tex:null,ttype:c},{input:"Theta",tag:"mo",output:"\u0398",tex:null,ttype:c},{input:"upsilon",tag:"mi",output:"\u03C5",tex:null,ttype:c},{input:"xi",tag:"mi",output:"\u03BE",tex:null,ttype:c},{input:"Xi",tag:"mo",output:"\u039E",tex:null,ttype:c},{input:"zeta",tag:"mi",output:"\u03B6",tex:null,ttype:c},{input:"*",tag:"mo",output:"\u22C5",tex:"cdot",ttype:c},{input:"**",tag:"mo",output:"\u2217",tex:"ast",ttype:c},{input:"***",tag:"mo",output:"\u22C6",tex:"star",ttype:c},{input:"//",tag:"mo",output:"/",tex:null,ttype:c},{input:"\\\\",tag:"mo",output:"\\",tex:"backslash",ttype:c},{input:"setminus",tag:"mo",output:"\\",tex:null,ttype:c},{input:"xx",tag:"mo",output:"\u00D7",tex:"times",ttype:c},{input:"|><",tag:"mo",output:"\u22C9",tex:"ltimes",ttype:c},{input:"><|",tag:"mo",output:"\u22CA",tex:"rtimes",ttype:c},{input:"|><|",tag:"mo",output:"\u22C8",tex:"bowtie",ttype:c},{input:"-:",tag:"mo",output:"\u00F7",tex:"div",ttype:c},{input:"divide",tag:"mo",output:"-:",tex:null,ttype:V},{input:"@",tag:"mo",output:"\u2218",tex:"circ",ttype:c},{input:"o+",tag:"mo",output:"\u2295",tex:"oplus",ttype:c},{input:"ox",tag:"mo",output:"\u2297",tex:"otimes",ttype:c},{input:"o.",tag:"mo",output:"\u2299",tex:"odot",ttype:c},{input:"sum",tag:"mo",output:"\u2211",tex:null,ttype:L},{input:"prod",tag:"mo",output:"\u220F",tex:null,ttype:L},{input:"^^",tag:"mo",output:"\u2227",tex:"wedge",ttype:c},{input:"^^^",tag:"mo",output:"\u22C0",tex:"bigwedge",ttype:L},{input:"vv",tag:"mo",output:"\u2228",tex:"vee",ttype:c},{input:"vvv",tag:"mo",output:"\u22C1",tex:"bigvee",ttype:L},{input:"nn",tag:"mo",output:"\u2229",tex:"cap",ttype:c},{input:"nnn",tag:"mo",output:"\u22C2",tex:"bigcap",ttype:L},{input:"uu",tag:"mo",output:"\u222A",tex:"cup",ttype:c},{input:"uuu",tag:"mo",output:"\u22C3",tex:"bigcup",ttype:L},{input:"!=",tag:"mo",output:"\u2260",tex:"ne",ttype:c},{input:":=",tag:"mo",output:":=",tex:null,ttype:c},{input:"lt",tag:"mo",output:"<",tex:null,ttype:c},{input:"<=",tag:"mo",output:"\u2264",tex:"le",ttype:c},{input:"lt=",tag:"mo",output:"\u2264",tex:"leq",ttype:c},{input:"gt",tag:"mo",output:">",tex:null,ttype:c},{input:">=",tag:"mo",output:"\u2265",tex:"ge",ttype:c},{input:"gt=",tag:"mo",output:"\u2265",tex:"geq",ttype:c},{input:"-<",tag:"mo",output:"\u227A",tex:"prec",ttype:c},{input:"-lt",tag:"mo",output:"\u227A",tex:null,ttype:c},{input:">-",tag:"mo",output:"\u227B",tex:"succ",ttype:c},{input:"-<=",tag:"mo",output:"\u2AAF",tex:"preceq",ttype:c},{input:">-=",tag:"mo",output:"\u2AB0",tex:"succeq",ttype:c},{input:"in",tag:"mo",output:"\u2208",tex:null,ttype:c},{input:"!in",tag:"mo",output:"\u2209",tex:"notin",ttype:c},{input:"sub",tag:"mo",output:"\u2282",tex:"subset",ttype:c},{input:"sup",tag:"mo",output:"\u2283",tex:"supset",ttype:c},{input:"sube",tag:"mo",output:"\u2286",tex:"subseteq",ttype:c},{input:"supe",tag:"mo",output:"\u2287",tex:"supseteq",ttype:c},{input:"-=",tag:"mo",output:"\u2261",tex:"equiv",ttype:c},{input:"~=",tag:"mo",output:"\u2245",tex:"cong",ttype:c},{input:"~~",tag:"mo",output:"\u2248",tex:"approx",ttype:c},{input:"prop",tag:"mo",output:"\u221D",tex:"propto",ttype:c},{input:"and",tag:"mtext",output:"and",tex:null,ttype:a},{input:"or",tag:"mtext",output:"or",tex:null,ttype:a},{input:"not",tag:"mo",output:"\u00AC",tex:"neg",ttype:c},{input:"=>",tag:"mo",output:"\u21D2",tex:"implies",ttype:c},{input:"if",tag:"mo",output:"if",tex:null,ttype:a},{input:"<=>",tag:"mo",output:"\u21D4",tex:"iff",ttype:c},{input:"AA",tag:"mo",output:"\u2200",tex:"forall",ttype:c},{input:"EE",tag:"mo",output:"\u2203",tex:"exists",ttype:c},{input:"_|_",tag:"mo",output:"\u22A5",tex:"bot",ttype:c},{input:"TT",tag:"mo",output:"\u22A4",tex:"top",ttype:c},{input:"|--",tag:"mo",output:"\u22A2",tex:"vdash",ttype:c},{input:"|==",tag:"mo",output:"\u22A8",tex:"models",ttype:c},{input:"(",tag:"mo",output:"(",tex:"left(",ttype:b},{input:")",tag:"mo",output:")",tex:"right)",ttype:h},{input:"[",tag:"mo",output:"[",tex:"left[",ttype:b},{input:"]",tag:"mo",output:"]",tex:"right]",ttype:h},{input:"{",tag:"mo",output:"{",tex:null,ttype:b},{input:"}",tag:"mo",output:"}",tex:null,ttype:h},{input:"|",tag:"mo",output:"|",tex:null,ttype:m},{input:":|:",tag:"mo",output:"|",tex:null,ttype:c},{input:"|:",tag:"mo",output:"|",tex:null,ttype:b},{input:":|",tag:"mo",output:"|",tex:null,ttype:h},{input:"(:",tag:"mo",output:"\u2329",tex:"langle",ttype:b},{input:":)",tag:"mo",output:"\u232A",tex:"rangle",ttype:h},{input:"<<",tag:"mo",output:"\u2329",tex:null,ttype:b},{input:">>",tag:"mo",output:"\u232A",tex:null,ttype:h},{input:"{:",tag:"mo",output:"{:",tex:null,ttype:b,invisible:true},{input:":}",tag:"mo",output:":}",tex:null,ttype:h,invisible:true},{input:"int",tag:"mo",output:"\u222B",tex:null,ttype:c},{input:"dx",tag:"mi",output:"{:d x:}",tex:null,ttype:V},{input:"dy",tag:"mi",output:"{:d y:}",tex:null,ttype:V},{input:"dz",tag:"mi",output:"{:d z:}",tex:null,ttype:V},{input:"dt",tag:"mi",output:"{:d t:}",tex:null,ttype:V},{input:"oint",tag:"mo",output:"\u222E",tex:null,ttype:c},{input:"del",tag:"mo",output:"\u2202",tex:"partial",ttype:c},{input:"grad",tag:"mo",output:"\u2207",tex:"nabla",ttype:c},{input:"+-",tag:"mo",output:"\u00B1",tex:"pm",ttype:c},{input:"O/",tag:"mo",output:"\u2205",tex:"emptyset",ttype:c},{input:"oo",tag:"mo",output:"\u221E",tex:"infty",ttype:c},{input:"aleph",tag:"mo",output:"\u2135",tex:null,ttype:c},{input:"...",tag:"mo",output:"...",tex:"ldots",ttype:c},{input:":.",tag:"mo",output:"\u2234",tex:"therefore",ttype:c},{input:":'",tag:"mo",output:"\u2235",tex:"because",ttype:c},{input:"/_",tag:"mo",output:"\u2220",tex:"angle",ttype:c},{input:"/_\\",tag:"mo",output:"\u25B3",tex:"triangle",ttype:c},{input:"'",tag:"mo",output:"\u2032",tex:"prime",ttype:c},{input:"tilde",tag:"mover",output:"~",tex:null,ttype:A,acc:true},{input:"\\ ",tag:"mo",output:"\u00A0",tex:null,ttype:c},{input:"frown",tag:"mo",output:"\u2322",tex:null,ttype:c},{input:"quad",tag:"mo",output:"\u00A0\u00A0",tex:null,ttype:c},{input:"qquad",tag:"mo",output:"\u00A0\u00A0\u00A0\u00A0",tex:null,ttype:c},{input:"cdots",tag:"mo",output:"\u22EF",tex:null,ttype:c},{input:"vdots",tag:"mo",output:"\u22EE",tex:null,ttype:c},{input:"ddots",tag:"mo",output:"\u22F1",tex:null,ttype:c},{input:"diamond",tag:"mo",output:"\u22C4",tex:null,ttype:c},{input:"square",tag:"mo",output:"\u25A1",tex:null,ttype:c},{input:"|__",tag:"mo",output:"\u230A",tex:"lfloor",ttype:c},{input:"__|",tag:"mo",output:"\u230B",tex:"rfloor",ttype:c},{input:"|~",tag:"mo",output:"\u2308",tex:"lceiling",ttype:c},{input:"~|",tag:"mo",output:"\u2309",tex:"rceiling",ttype:c},{input:"CC",tag:"mo",output:"\u2102",tex:null,ttype:c},{input:"NN",tag:"mo",output:"\u2115",tex:null,ttype:c},{input:"QQ",tag:"mo",output:"\u211A",tex:null,ttype:c},{input:"RR",tag:"mo",output:"\u211D",tex:null,ttype:c},{input:"ZZ",tag:"mo",output:"\u2124",tex:null,ttype:c},{input:"f",tag:"mi",output:"f",tex:null,ttype:A,func:true},{input:"g",tag:"mi",output:"g",tex:null,ttype:A,func:true},{input:"lim",tag:"mo",output:"lim",tex:null,ttype:L},{input:"Lim",tag:"mo",output:"Lim",tex:null,ttype:L},{input:"sin",tag:"mo",output:"sin",tex:null,ttype:A,func:true},{input:"cos",tag:"mo",output:"cos",tex:null,ttype:A,func:true},{input:"tan",tag:"mo",output:"tan",tex:null,ttype:A,func:true},{input:"sinh",tag:"mo",output:"sinh",tex:null,ttype:A,func:true},{input:"cosh",tag:"mo",output:"cosh",tex:null,ttype:A,func:true},{input:"tanh",tag:"mo",output:"tanh",tex:null,ttype:A,func:true},{input:"cot",tag:"mo",output:"cot",tex:null,ttype:A,func:true},{input:"sec",tag:"mo",output:"sec",tex:null,ttype:A,func:true},{input:"csc",tag:"mo",output:"csc",tex:null,ttype:A,func:true},{input:"arcsin",tag:"mo",output:"arcsin",tex:null,ttype:A,func:true},{input:"arccos",tag:"mo",output:"arccos",tex:null,ttype:A,func:true},{input:"arctan",tag:"mo",output:"arctan",tex:null,ttype:A,func:true},{input:"coth",tag:"mo",output:"coth",tex:null,ttype:A,func:true},{input:"sech",tag:"mo",output:"sech",tex:null,ttype:A,func:true},{input:"csch",tag:"mo",output:"csch",tex:null,ttype:A,func:true},{input:"exp",tag:"mo",output:"exp",tex:null,ttype:A,func:true},{input:"abs",tag:"mo",output:"abs",tex:null,ttype:A,rewriteleftright:["|","|"]},{input:"norm",tag:"mo",output:"norm",tex:null,ttype:A,rewriteleftright:["\u2225","\u2225"]},{input:"floor",tag:"mo",output:"floor",tex:null,ttype:A,rewriteleftright:["\u230A","\u230B"]},{input:"ceil",tag:"mo",output:"ceil",tex:null,ttype:A,rewriteleftright:["\u2308","\u2309"]},{input:"log",tag:"mo",output:"log",tex:null,ttype:A,func:true},{input:"ln",tag:"mo",output:"ln",tex:null,ttype:A,func:true},{input:"det",tag:"mo",output:"det",tex:null,ttype:A,func:true},{input:"dim",tag:"mo",output:"dim",tex:null,ttype:c},{input:"mod",tag:"mo",output:"mod",tex:null,ttype:c},{input:"gcd",tag:"mo",output:"gcd",tex:null,ttype:A,func:true},{input:"lcm",tag:"mo",output:"lcm",tex:null,ttype:A,func:true},{input:"lub",tag:"mo",output:"lub",tex:null,ttype:c},{input:"glb",tag:"mo",output:"glb",tex:null,ttype:c},{input:"min",tag:"mo",output:"min",tex:null,ttype:L},{input:"max",tag:"mo",output:"max",tex:null,ttype:L},{input:"Sin",tag:"mo",output:"Sin",tex:null,ttype:A,func:true},{input:"Cos",tag:"mo",output:"Cos",tex:null,ttype:A,func:true},{input:"Tan",tag:"mo",output:"Tan",tex:null,ttype:A,func:true},{input:"Arcsin",tag:"mo",output:"Arcsin",tex:null,ttype:A,func:true},{input:"Arccos",tag:"mo",output:"Arccos",tex:null,ttype:A,func:true},{input:"Arctan",tag:"mo",output:"Arctan",tex:null,ttype:A,func:true},{input:"Sinh",tag:"mo",output:"Sinh",tex:null,ttype:A,func:true},{input:"Cosh",tag:"mo",output:"Cosh",tex:null,ttype:A,func:true},{input:"Tanh",tag:"mo",output:"Tanh",tex:null,ttype:A,func:true},{input:"Cot",tag:"mo",output:"Cot",tex:null,ttype:A,func:true},{input:"Sec",tag:"mo",output:"Sec",tex:null,ttype:A,func:true},{input:"Csc",tag:"mo",output:"Csc",tex:null,ttype:A,func:true},{input:"Log",tag:"mo",output:"Log",tex:null,ttype:A,func:true},{input:"Ln",tag:"mo",output:"Ln",tex:null,ttype:A,func:true},{input:"Abs",tag:"mo",output:"abs",tex:null,ttype:A,notexcopy:true,rewriteleftright:["|","|"]},{input:"uarr",tag:"mo",output:"\u2191",tex:"uparrow",ttype:c},{input:"darr",tag:"mo",output:"\u2193",tex:"downarrow",ttype:c},{input:"rarr",tag:"mo",output:"\u2192",tex:"rightarrow",ttype:c},{input:"->",tag:"mo",output:"\u2192",tex:"to",ttype:c},{input:">->",tag:"mo",output:"\u21A3",tex:"rightarrowtail",ttype:c},{input:"->>",tag:"mo",output:"\u21A0",tex:"twoheadrightarrow",ttype:c},{input:">->>",tag:"mo",output:"\u2916",tex:"twoheadrightarrowtail",ttype:c},{input:"|->",tag:"mo",output:"\u21A6",tex:"mapsto",ttype:c},{input:"larr",tag:"mo",output:"\u2190",tex:"leftarrow",ttype:c},{input:"harr",tag:"mo",output:"\u2194",tex:"leftrightarrow",ttype:c},{input:"rArr",tag:"mo",output:"\u21D2",tex:"Rightarrow",ttype:c},{input:"lArr",tag:"mo",output:"\u21D0",tex:"Leftarrow",ttype:c},{input:"hArr",tag:"mo",output:"\u21D4",tex:"Leftrightarrow",ttype:c},{input:"sqrt",tag:"msqrt",output:"sqrt",tex:null,ttype:A},{input:"root",tag:"mroot",output:"root",tex:null,ttype:U},{input:"frac",tag:"mfrac",output:"/",tex:null,ttype:U},{input:"/",tag:"mfrac",output:"/",tex:null,ttype:i},{input:"stackrel",tag:"mover",output:"stackrel",tex:null,ttype:U},{input:"overset",tag:"mover",output:"stackrel",tex:null,ttype:U},{input:"underset",tag:"munder",output:"stackrel",tex:null,ttype:U},{input:"_",tag:"msub",output:"_",tex:null,ttype:i},{input:"^",tag:"msup",output:"^",tex:null,ttype:i},{input:"hat",tag:"mover",output:"\u005E",tex:null,ttype:A,acc:true},{input:"bar",tag:"mover",output:"\u00AF",tex:"overline",ttype:A,acc:true},{input:"vec",tag:"mover",output:"\u2192",tex:null,ttype:A,acc:true},{input:"dot",tag:"mover",output:".",tex:null,ttype:A,acc:true},{input:"ddot",tag:"mover",output:"..",tex:null,ttype:A,acc:true},{input:"overarc",tag:"mover",output:"\u23DC",tex:"overparen",ttype:A,acc:true},{input:"ul",tag:"munder",output:"\u0332",tex:"underline",ttype:A,acc:true},{input:"ubrace",tag:"munder",output:"\u23DF",tex:"underbrace",ttype:K,acc:true},{input:"obrace",tag:"mover",output:"\u23DE",tex:"overbrace",ttype:K,acc:true},{input:"text",tag:"mtext",output:"text",tex:null,ttype:Y},{input:"mbox",tag:"mtext",output:"mbox",tex:null,ttype:Y},{input:"color",tag:"mstyle",ttype:U},{input:"id",tag:"mrow",ttype:U},{input:"class",tag:"mrow",ttype:U},{input:"cancel",tag:"menclose",output:"cancel",tex:null,ttype:A},k,{input:"bb",tag:"mstyle",atname:"mathvariant",atval:"bold",output:"bb",tex:null,ttype:A},{input:"mathbf",tag:"mstyle",atname:"mathvariant",atval:"bold",output:"mathbf",tex:null,ttype:A},{input:"sf",tag:"mstyle",atname:"mathvariant",atval:"sans-serif",output:"sf",tex:null,ttype:A},{input:"mathsf",tag:"mstyle",atname:"mathvariant",atval:"sans-serif",output:"mathsf",tex:null,ttype:A},{input:"bbb",tag:"mstyle",atname:"mathvariant",atval:"double-struck",output:"bbb",tex:null,ttype:A,codes:w},{input:"mathbb",tag:"mstyle",atname:"mathvariant",atval:"double-struck",output:"mathbb",tex:null,ttype:A,codes:w},{input:"cc",tag:"mstyle",atname:"mathvariant",atval:"script",output:"cc",tex:null,ttype:A,codes:D},{input:"mathcal",tag:"mstyle",atname:"mathvariant",atval:"script",output:"mathcal",tex:null,ttype:A,codes:D},{input:"tt",tag:"mstyle",atname:"mathvariant",atval:"monospace",output:"tt",tex:null,ttype:A},{input:"mathtt",tag:"mstyle",atname:"mathvariant",atval:"monospace",output:"mathtt",tex:null,ttype:A},{input:"fr",tag:"mstyle",atname:"mathvariant",atval:"fraktur",output:"fr",tex:null,ttype:A,codes:H},{input:"mathfrak",tag:"mstyle",atname:"mathvariant",atval:"fraktur",output:"mathfrak",tex:null,ttype:A,codes:H}];function T(ac,ab){if(ac.input>ab.input){return 1}else{return -1}}var S=[];function n(){var ac;var ab=z.length;for(ac=0;ac>1;if(ac[ab]=S[ab]}s=y;if(af!=""){y=z[ae].ttype;return z[ae]}y=c;ab=1;ak=ah.slice(0,1);var ai=true;while("0"<=ak&&ak<="9"&&ab<=ah.length){ak=ah.slice(ab,ab+1);ab++}if(ak==d){ak=ah.slice(ab,ab+1);if("0"<=ak&&ak<="9"){ai=false;ab++;while("0"<=ak&&ak<="9"&&ab<=ah.length){ak=ah.slice(ab,ab+1);ab++}}}if((ai&&ab>1)||ab>2){ak=ah.slice(0,ab-1);aj="mn"}else{ab=2;ak=ah.slice(0,1);aj=(("A">ak||ak>"Z")&&("a">ak||ak>"z")?"mo":"mi")}if(ak=="-"&&s==i){y=i;return{input:ak,tag:aj,output:ak,ttype:A,func:true}}return{input:ak,tag:aj,output:ak,ttype:c}}function R(ac){var ab;if(!ac.hasChildNodes()){return}if(ac.firstChild.hasChildNodes()&&(ac.nodeName=="mrow"||ac.nodeName=="M:MROW")){ab=ac.firstChild.firstChild.nodeValue;if(ab=="("||ab=="["||ab=="{"){ac.removeChild(ac.firstChild)}}if(ac.lastChild.hasChildNodes()&&(ac.nodeName=="mrow"||ac.nodeName=="M:MROW")){ab=ac.lastChild.firstChild.nodeValue;if(ab==")"||ab=="]"||ab=="}"){ac.removeChild(ac.lastChild)}}}var F,s,y;function G(ai){var ad,ac,al,af,ak,ag=e.createDocumentFragment();ai=p(ai,0);ad=j(ai);if(ad==null||ad.ttype==h&&F>0){return[null,ai]}if(ad.ttype==V){ai=ad.output+p(ai,ad.input.length);ad=j(ai)}switch(ad.ttype){case L:case c:ai=p(ai,ad.input.length);return[O(ad.tag,e.createTextNode(ad.output)),ai];case b:F++;ai=p(ai,ad.input.length);al=q(ai,true);F--;if(typeof ad.invisible=="boolean"&&ad.invisible){ac=O("mrow",al[0])}else{ac=O("mo",e.createTextNode(ad.output));ac=O("mrow",ac);ac.appendChild(al[0])}return[ac,al[1]];case Y:if(ad!=k){ai=p(ai,ad.input.length)}if(ai.charAt(0)=="{"){af=ai.indexOf("}")}else{if(ai.charAt(0)=="("){af=ai.indexOf(")")}else{if(ai.charAt(0)=="["){af=ai.indexOf("]")}else{if(ad==k){af=ai.slice(1).indexOf('"')+1}else{af=0}}}}if(af==-1){af=ai.length}ak=ai.slice(1,af);if(ak.charAt(0)==" "){ac=O("mspace");ac.setAttribute("width","1ex");ag.appendChild(ac)}ag.appendChild(O(ad.tag,e.createTextNode(ak)));if(ak.charAt(ak.length-1)==" "){ac=O("mspace");ac.setAttribute("width","1ex");ag.appendChild(ac)}ai=p(ai,af+1);return[O("mrow",ag),ai];case K:case A:ai=p(ai,ad.input.length);al=G(ai);if(al[0]==null){return[O(ad.tag,e.createTextNode(ad.output)),ai]}if(typeof ad.func=="boolean"&&ad.func){ak=ai.charAt(0);if(ak=="^"||ak=="_"||ak=="/"||ak=="|"||ak==","||(ad.input.length==1&&ad.input.match(/\w/)&&ak!="(")){return[O(ad.tag,e.createTextNode(ad.output)),ai]}else{ac=O("mrow",O(ad.tag,e.createTextNode(ad.output)));ac.appendChild(al[0]);return[ac,al[1]]}}R(al[0]);if(ad.input=="sqrt"){return[O(ad.tag,al[0]),al[1]]}else{if(typeof ad.rewriteleftright!="undefined"){ac=O("mrow",O("mo",e.createTextNode(ad.rewriteleftright[0])));ac.appendChild(al[0]);ac.appendChild(O("mo",e.createTextNode(ad.rewriteleftright[1])));return[ac,al[1]]}else{if(ad.input=="cancel"){ac=O(ad.tag,al[0]);ac.setAttribute("notation","updiagonalstrike");return[ac,al[1]]}else{if(typeof ad.acc=="boolean"&&ad.acc){ac=O(ad.tag,al[0]);var ah=O("mo",e.createTextNode(ad.output));if(ad.input=="vec"&&((al[0].nodeName=="mrow"&&al[0].childNodes.length==1&&al[0].firstChild.firstChild.nodeValue!==null&&al[0].firstChild.firstChild.nodeValue.length==1)||(al[0].firstChild.nodeValue!==null&&al[0].firstChild.nodeValue.length==1))){ah.setAttribute("stretchy",false)}ac.appendChild(ah);return[ac,al[1]]}else{if(!l&&typeof ad.codes!="undefined"){for(af=0;af64&&ak.charCodeAt(ae)<91){aj=aj+ad.codes[ak.charCodeAt(ae)-65]}else{if(ak.charCodeAt(ae)>96&&ak.charCodeAt(ae)<123){aj=aj+ad.codes[ak.charCodeAt(ae)-71]}else{aj=aj+ak.charAt(ae)}}}if(al[0].nodeName=="mi"){al[0]=O("mo").appendChild(e.createTextNode(aj))}else{al[0].replaceChild(O("mo").appendChild(e.createTextNode(aj)),al[0].childNodes[af])}}}}ac=O(ad.tag,al[0]);ac.setAttribute(ad.atname,ad.atval);return[ac,al[1]]}}}}case U:ai=p(ai,ad.input.length);al=G(ai);if(al[0]==null){return[O("mo",e.createTextNode(ad.input)),ai]}R(al[0]);var ab=G(al[1]);if(ab[0]==null){return[O("mo",e.createTextNode(ad.input)),ai]}R(ab[0]);if(["color","class","id"].indexOf(ad.input)>=0){if(ai.charAt(0)=="{"){af=ai.indexOf("}")}else{if(ai.charAt(0)=="("){af=ai.indexOf(")")}else{if(ai.charAt(0)=="["){af=ai.indexOf("]")}}}ak=ai.slice(1,af);ac=O(ad.tag,ab[0]);if(ad.input==="color"){ac.setAttribute("mathcolor",ak)}else{if(ad.input==="class"){ac.setAttribute("class",ak)}else{if(ad.input==="id"){ac.setAttribute("id",ak)}}}return[ac,ab[1]]}if(ad.input=="root"||ad.output=="stackrel"){ag.appendChild(ab[0])}ag.appendChild(al[0]);if(ad.input=="frac"){ag.appendChild(ab[0])}return[O(ad.tag,ag),ab[1]];case i:ai=p(ai,ad.input.length);return[O("mo",e.createTextNode(ad.output)),ai];case a:ai=p(ai,ad.input.length);ac=O("mspace");ac.setAttribute("width","1ex");ag.appendChild(ac);ag.appendChild(O(ad.tag,e.createTextNode(ad.output)));ac=O("mspace");ac.setAttribute("width","1ex");ag.appendChild(ac);return[O("mrow",ag),ai];case m:F++;ai=p(ai,ad.input.length);al=q(ai,false);F--;ak="";if(al[0].lastChild!=null){ak=al[0].lastChild.firstChild.nodeValue}if(ak=="|"&&ai.charAt(0)!==","){ac=O("mo",e.createTextNode(ad.output));ac=O("mrow",ac);ac.appendChild(al[0]);return[ac,al[1]]}else{ac=O("mo",e.createTextNode("\u2223"));ac=O("mrow",ac);return[ac,ai]}default:ai=p(ai,ad.input.length);return[O(ad.tag,e.createTextNode(ad.output)),ai]}}function t(ah){var af,ai,ag,ae,ab,ad;ah=p(ah,0);ai=j(ah);ab=G(ah);ae=ab[0];ah=ab[1];af=j(ah);if(af.ttype==i&&af.input!="/"){ah=p(ah,af.input.length);ab=G(ah);if(ab[0]==null){ab[0]=O("mo",e.createTextNode("\u25A1"))}else{R(ab[0])}ah=ab[1];ad=(ai.ttype==L||ai.ttype==K);if(af.input=="_"){ag=j(ah);if(ag.input=="^"){ah=p(ah,ag.input.length);var ac=G(ah);R(ac[0]);ah=ac[1];ae=O((ad?"munderover":"msubsup"),ae);ae.appendChild(ab[0]);ae.appendChild(ac[0]);ae=O("mrow",ae)}else{ae=O((ad?"munder":"msub"),ae);ae.appendChild(ab[0])}}else{if(af.input=="^"&&ad){ae=O("mover",ae);ae.appendChild(ab[0])}else{ae=O(af.tag,ae);ae.appendChild(ab[0])}}if(typeof ai.func!="undefined"&&ai.func){ag=j(ah);if(ag.ttype!=i&&ag.ttype!=h){ab=t(ah);ae=O("mrow",ae);ae.appendChild(ab[0]);ah=ab[1]}}}return[ae,ah]}function q(ak,aj){var ao,al,ag,ar,ah=e.createDocumentFragment();do{ak=p(ak,0);ag=t(ak);al=ag[0];ak=ag[1];ao=j(ak);if(ao.ttype==i&&ao.input=="/"){ak=p(ak,ao.input.length);ag=t(ak);if(ag[0]==null){ag[0]=O("mo",e.createTextNode("\u25A1"))}else{R(ag[0])}ak=ag[1];R(al);al=O(ao.tag,al);al.appendChild(ag[0]);ah.appendChild(al);ao=j(ak)}else{if(al!=undefined){ah.appendChild(al)}}}while((ao.ttype!=h&&(ao.ttype!=m||aj)||F==0)&&ao!=null&&ao.output!="");if(ao.ttype==h||ao.ttype==m){var at=ah.childNodes.length;if(at>0&&ah.childNodes[at-1].nodeName=="mrow"&&ah.childNodes[at-1].lastChild&&ah.childNodes[at-1].lastChild.firstChild){var av=ah.childNodes[at-1].lastChild.firstChild.nodeValue;if(av==")"||av=="]"){var ac=ah.childNodes[at-1].firstChild.firstChild.nodeValue;if(ac=="("&&av==")"&&ao.output!="}"||ac=="["&&av=="]"){var ad=[];var ap=true;var am=ah.childNodes.length;for(ar=0;ap&&ar1){ap=ad[ar].length==ad[ar-2].length}}ap=ap&&(ad.length>1||ad[0].length>0);var af=[];if(ap){var ae,ab,ai,an,au=e.createDocumentFragment();for(ar=0;ar2){ah.removeChild(ah.firstChild);ah.removeChild(ah.firstChild)}au.appendChild(O("mtr",ae))}al=O("mtable",au);al.setAttribute("columnlines",af.join(" "));if(typeof ao.invisible=="boolean"&&ao.invisible){al.setAttribute("columnalign","left")}ah.replaceChild(al,ah.firstChild)}}}}ak=p(ak,ao.input.length);if(typeof ao.invisible!="boolean"||!ao.invisible){al=O("mo",e.createTextNode(ao.output));ah.appendChild(al)}}return[ah,ak]}function M(ad,ac){var ae,ab;F=0;ad=ad.replace(/ /g,"");ad=ad.replace(/>/g,">");ad=ad.replace(/</g,"<");ae=q(ad.replace(/^\s+/g,""),false)[0];ab=O("mstyle",ae);if(C!=""){ab.setAttribute("mathcolor",C)}if(mathfontsize!=""){ab.setAttribute("fontsize",mathfontsize);ab.setAttribute("mathsize",mathfontsize)}if(mathfontfamily!=""){ab.setAttribute("fontfamily",mathfontfamily);ab.setAttribute("mathvariant",mathfontfamily)}if(o){ab.setAttribute("displaystyle","true")}ab=O("math",ab);if(v){ab.setAttribute("title",ad.replace(/\s+/g," "))}return ab}v=false;mathfontfamily="";C="";mathfontsize="";(function(){for(var ac=0,ab=z.length;ac *":{display:"table-row!important"},".MJXp-surd":{"vertical-align":"top"},".MJXp-surd > *":{display:"block!important"},".MJXp-script-box > * ":{display:"table!important",height:"50%"},".MJXp-script-box > * > *":{display:"table-cell!important","vertical-align":"top"},".MJXp-script-box > *:last-child > *":{"vertical-align":"bottom"},".MJXp-script-box > * > * > *":{display:"block!important"},".MJXp-mphantom":{visibility:"hidden"},".MJXp-munderover, .MJXp-munder":{display:"inline-table!important"},".MJXp-over":{display:"inline-block!important","text-align":"center"},".MJXp-over > *":{display:"block!important"},".MJXp-munderover > *, .MJXp-munder > *":{display:"table-row!important"},".MJXp-mtable":{"vertical-align":".25em",margin:"0 .125em"},".MJXp-mtable > *":{display:"inline-table!important","vertical-align":"middle"},".MJXp-mtr":{display:"table-row!important"},".MJXp-mtd":{display:"table-cell!important","text-align":"center",padding:".5em 0 0 .5em"},".MJXp-mtr > .MJXp-mtd:first-child":{"padding-left":0},".MJXp-mtr:first-child > .MJXp-mtd":{"padding-top":0},".MJXp-mlabeledtr":{display:"table-row!important"},".MJXp-mlabeledtr > .MJXp-mtd:first-child":{"padding-left":0},".MJXp-mlabeledtr:first-child > .MJXp-mtd":{"padding-top":0},".MJXp-merror":{"background-color":"#FFFF88",color:"#CC0000",border:"1px solid #CC0000",padding:"1px 3px","font-style":"normal","font-size":"90%"}};(function(){for(var n=0;n<10;n++){var o="scaleX(."+n+")";m[".MJXp-scale"+n]={"-webkit-transform":o,"-moz-transform":o,"-ms-transform":o,"-o-transform":o,transform:o}}})();var k=1000000;var c="V",l="H";g.Augment({settings:b.config.menuSettings,config:{styles:m},hideProcessedMath:false,maxStretchyParts:1000,Config:function(){if(!this.require){this.require=[]}this.SUPER(arguments).Config.call(this);var n=this.settings;if(n.scale){this.config.scale=n.scale}this.require.push(MathJax.OutputJax.extensionDir+"/MathEvents.js")},Startup:function(){j=MathJax.Extension.MathEvents.Event;a=MathJax.Extension.MathEvents.Touch;d=MathJax.Extension.MathEvents.Hover;this.ContextMenu=j.ContextMenu;this.Mousedown=j.AltContextMenu;this.Mouseover=d.Mouseover;this.Mouseout=d.Mouseout;this.Mousemove=d.Mousemove;var n=e.addElement(document.body,"div",{style:{width:"5in"}});this.pxPerInch=n.offsetWidth/5;n.parentNode.removeChild(n);return i.Styles(this.config.styles,["InitializePHTML",this])},InitializePHTML:function(){},preTranslate:function(p){var s=p.jax[this.id],t,q=s.length,u,r,v,o,n;for(t=0;tthis.PHTML.h){this.PHTML.h=q.PHTML.h}if(q.PHTML.d>this.PHTML.d){this.PHTML.d=q.PHTML.d}if(q.PHTML.t>this.PHTML.t){this.PHTML.t=q.PHTML.t}if(q.PHTML.b>this.PHTML.b){this.PHTML.b=q.PHTML.b}}}else{if(n.forceChild){e.addElement(p,"span")}}},PHTMLstretchChild:function(q,p,s){var r=this.data[q];if(r&&r.PHTMLcanStretch("Vertical",p,s)){var t=this.PHTML,o=r.PHTML,n=o.w;r.PHTMLstretchV(p,s);t.w+=o.w-n;if(o.h>t.h){t.h=o.h}if(o.d>t.d){t.d=o.d}}},PHTMLcreateSpan:function(n){if(!this.PHTML){this.PHTML={}}this.PHTML={w:0,h:0,d:0,l:0,r:0,t:0,b:0};if(this.inferred){return n}if(this.type==="mo"&&this.data.join("")==="\u222B"){g.lastIsInt=true}else{if(this.type!=="mspace"||this.width!=="negativethinmathspace"){g.lastIsInt=false}}if(!this.PHTMLspanID){this.PHTMLspanID=g.GetID()}var o=(this.id||"MJXp-Span-"+this.PHTMLspanID);return e.addElement(n,"span",{className:"MJXp-"+this.type,id:o})},PHTMLspanElement:function(){if(!this.PHTMLspanID){return null}return document.getElementById(this.id||"MJXp-Span-"+this.PHTMLspanID)},PHTMLhandleToken:function(o){var n=this.getValues("mathvariant");if(n.mathvariant!==h.VARIANT.NORMAL){o.className+=" "+g.VARIANT[n.mathvariant]}},PHTMLhandleStyle:function(n){if(this.style){n.style.cssText=this.style}},PHTMLhandleColor:function(n){if(this.mathcolor){n.style.color=this.mathcolor}if(this.mathbackground){n.style.backgroundColor=this.mathbackground}},PHTMLhandleScriptlevel:function(n){var o=this.Get("scriptlevel");if(o){n.className+=" MJXp-script"}},PHTMLhandleText:function(y,A){var v,p;var z=0,o=0,q=0;for(var s=0,r=A.length;s=55296&&p<56319){s++;p=(((p-55296)<<10)+(A.charCodeAt(s)-56320))+65536}var t=0.7,u=0.22,x=0.5;if(p<127){if(v.match(/[A-Za-ehik-or-xz0-9]/)){u=0}if(v.match(/[A-HK-Z]/)){x=0.67}else{if(v.match(/[IJ]/)){x=0.36}}if(v.match(/[acegm-su-z]/)){t=0.45}else{if(v.match(/[ij]/)){t=0.75}}if(v.match(/[ijlt]/)){x=0.28}}if(g.DELIMITERS[v]){x=g.DELIMITERS[v].w||0.4}if(t>z){z=t}if(u>o){o=u}q+=x}if(!this.CHML){this.PHTML={}}this.PHTML={h:0.9,d:0.3,w:q,l:0,r:0,t:z,b:o};e.addText(y,A)},PHTMLbboxFor:function(o){if(this.data[o]&&this.data[o].PHTML){return this.data[o].PHTML}return{w:0,h:0,d:0,l:0,r:0,t:0,b:0}},PHTMLcanStretch:function(q,o,p){if(this.isEmbellished()){var n=this.Core();if(n&&n!==this){return n.PHTMLcanStretch(q,o,p)}}return false},PHTMLstretchV:function(n,o){},PHTMLstretchH:function(n){},CoreParent:function(){var n=this;while(n&&n.isEmbellished()&&n.CoreMO()===this&&!n.isa(h.math)){n=n.Parent()}return n},CoreText:function(n){if(!n){return""}if(n.isEmbellished()){return n.CoreMO().data.join("")}while((n.isa(h.mrow)||n.isa(h.TeXAtom)||n.isa(h.mstyle)||n.isa(h.mphantom))&&n.data.length===1&&n.data[0]){n=n.data[0]}if(!n.isToken){return""}else{return n.data.join("")}}});h.chars.Augment({toPreviewHTML:function(n){var o=this.toString().replace(/[\u2061-\u2064]/g,"");this.PHTMLhandleText(n,o)}});h.entity.Augment({toPreviewHTML:function(n){var o=this.toString().replace(/[\u2061-\u2064]/g,"");this.PHTMLhandleText(n,o)}});h.math.Augment({toPreviewHTML:function(n){n=this.PHTMLdefaultSpan(n);if(this.Get("display")==="block"){n.className+=" MJXp-display"}return n}});h.mo.Augment({toPreviewHTML:function(o){o=this.PHTMLdefaultSpan(o);this.PHTMLadjustAccent(o);var n=this.getValues("lspace","rspace","scriptlevel","displaystyle","largeop");if(n.scriptlevel===0){this.PHTML.l=g.length2em(n.lspace);this.PHTML.r=g.length2em(n.rspace);o.style.marginLeft=g.Em(this.PHTML.l);o.style.marginRight=g.Em(this.PHTML.r)}else{this.PHTML.l=0.15;this.PHTML.r=0.1}if(n.displaystyle&&n.largeop){var p=e.Element("span",{className:"MJXp-largeop"});p.appendChild(o.firstChild);o.appendChild(p);this.PHTML.h*=1.2;this.PHTML.d*=1.2;if(this.data.join("")==="\u222B"){p.className+=" MJXp-int"}}return o},PHTMLadjustAccent:function(p){var o=this.CoreParent();if(o&&o.isa(h.munderover)&&this.CoreText(o.data[o.base]).length===1){var q=o.data[o.over],n=o.data[o.under];var s=this.data.join(""),r;if(q&&this===q.CoreMO()&&o.Get("accent")){r=g.REMAPACCENT[s]}else{if(n&&this===n.CoreMO()&&o.Get("accentunder")){r=g.REMAPACCENTUNDER[s]}}if(r){s=p.innerHTML=r}if(s.match(/[\u02C6-\u02DC\u00A8]/)){this.PHTML.acc=-0.52}else{if(s==="\u2192"){this.PHTML.acc=-0.15;this.PHTML.vec=true}}}},PHTMLcanStretch:function(q,o,p){if(!this.Get("stretchy")){return false}var r=this.data.join("");if(r.length>1){return false}r=g.DELIMITERS[r];var n=(r&&r.dir===q.substr(0,1));if(n){n=(this.PHTML.h!==o||this.PHTML.d!==p||(this.Get("minsize",true)||this.Get("maxsize",true)))}return n},PHTMLstretchV:function(p,u){var o=this.PHTMLspanElement(),t=this.PHTML;var n=this.getValues("symmetric","maxsize","minsize");if(n.symmetric){l=2*Math.max(p-0.25,u+0.25)}else{l=p+u}n.maxsize=g.length2em(n.maxsize,t.h+t.d);n.minsize=g.length2em(n.minsize,t.h+t.d);l=Math.max(n.minsize,Math.min(n.maxsize,l));var s=l/(t.h+t.d-0.3);var q=e.Element("span",{style:{"font-size":g.Em(s)}});if(s>1.25){var r=Math.ceil(1.25/s*10);q.className="MJXp-right MJXp-scale"+r;q.style.marginLeft=g.Em(t.w*(r/10-1)+0.07);t.w*=s*r/10}q.appendChild(o.firstChild);o.appendChild(q);if(n.symmetric){o.style.verticalAlign=g.Em(0.25*(1-s))}}});h.mspace.Augment({toPreviewHTML:function(q){q=this.PHTMLdefaultSpan(q);var o=this.getValues("height","depth","width");var n=g.length2em(o.width),p=g.length2em(o.height),s=g.length2em(o.depth);var r=this.PHTML;r.w=n;r.h=p;r.d=s;if(n<0){if(!g.lastIsInt){q.style.marginLeft=g.Em(n)}n=0}q.style.width=g.Em(n);q.style.height=g.Em(p+s);if(s){q.style.verticalAlign=g.Em(-s)}return q}});h.mpadded.Augment({toPreviewHTML:function(u){u=this.PHTMLdefaultSpan(u,{childSpans:true,className:"MJXp-box",forceChild:true});var o=u.firstChild;var v=this.getValues("width","height","depth","lspace","voffset");var s=this.PHTMLdimen(v.lspace);var q=0,n=0,t=s.len,r=-s.len,p=0;if(v.width!==""){s=this.PHTMLdimen(v.width,"w",0);if(s.pm){r+=s.len}else{u.style.width=g.Em(s.len)}}if(v.height!==""){s=this.PHTMLdimen(v.height,"h",0);if(!s.pm){q+=-this.PHTMLbboxFor(0).h}q+=s.len}if(v.depth!==""){s=this.PHTMLdimen(v.depth,"d",0);if(!s.pm){n+=-this.PHTMLbboxFor(0).d;p+=-s.len}n+=s.len}if(v.voffset!==""){s=this.PHTMLdimen(v.voffset);q-=s.len;n+=s.len;p+=s.len}if(q){o.style.marginTop=g.Em(q)}if(n){o.style.marginBottom=g.Em(n)}if(t){o.style.marginLeft=g.Em(t)}if(r){o.style.marginRight=g.Em(r)}if(p){u.style.verticalAlign=g.Em(p)}return u},PHTMLdimen:function(q,r,n){if(n==null){n=-k}q=String(q);var o=q.match(/width|height|depth/);var p=(o?this.PHTML[o[0].charAt(0)]:(r?this.PHTML[r]:0));return{len:g.length2em(q,p)||0,pm:!!q.match(/^[-+]/)}}});h.munderover.Augment({toPreviewHTML:function(r){var t=this.getValues("displaystyle","accent","accentunder","align");var n=this.data[this.base];if(!t.displaystyle&&n!=null&&(n.movablelimits||n.CoreMO().Get("movablelimits"))){r=h.msubsup.prototype.toPreviewHTML.call(this,r);r.className=r.className.replace(/munderover/,"msubsup");return r}r=this.PHTMLdefaultSpan(r,{childSpans:true,className:"",noBBox:true});var p=this.PHTMLbboxFor(this.over),v=this.PHTMLbboxFor(this.under),u=this.PHTMLbboxFor(this.base),s=this.PHTML,o=p.acc;if(this.data[this.over]){if(r.lastChild.firstChild){r.lastChild.firstChild.style.marginLeft=p.l=r.lastChild.firstChild.style.marginRight=p.r=0}var q=e.Element("span",{},[["span",{className:"MJXp-over"}]]);q.firstChild.appendChild(r.lastChild);if(r.childNodes.length>(this.data[this.under]?1:0)){q.firstChild.appendChild(r.firstChild)}this.data[this.over].PHTMLhandleScriptlevel(q.firstChild.firstChild);if(o!=null){if(p.vec){q.firstChild.firstChild.firstChild.style.fontSize="60%";p.h*=0.6;p.d*=0.6;p.w*=0.6}o=o-p.d+0.1;if(u.t!=null){o+=u.t-u.h}q.firstChild.firstChild.style.marginBottom=g.Em(o)}if(r.firstChild){r.insertBefore(q,r.firstChild)}else{r.appendChild(q)}}if(this.data[this.under]){if(r.lastChild.firstChild){r.lastChild.firstChild.style.marginLeft=v.l=r.lastChild.firstChild.marginRight=v.r=0}this.data[this.under].PHTMLhandleScriptlevel(r.lastChild)}s.w=Math.max(0.8*p.w,0.8*v.w,u.w);s.h=0.8*(p.h+p.d+(o||0))+u.h;s.d=u.d+0.8*(v.h+v.d);return r}});h.msubsup.Augment({toPreviewHTML:function(q){q=this.PHTMLdefaultSpan(q,{noBBox:true});if(!this.data[this.base]){if(q.firstChild){q.insertBefore(e.Element("span"),q.firstChild)}else{q.appendChild(e.Element("span"))}}var s=this.data[this.base],p=this.data[this.sub],n=this.data[this.sup];if(!s){s={bbox:{h:0.8,d:0.2}}}q.firstChild.style.marginRight=".05em";var o=Math.max(0.4,s.PHTML.h-0.4),u=Math.max(0.2,s.PHTML.d+0.1);var t=this.PHTML;if(n&&p){var r=e.Element("span",{className:"MJXp-script-box",style:{height:g.Em(o+n.PHTML.h*0.8+u+p.PHTML.d*0.8),"vertical-align":g.Em(-u-p.PHTML.d*0.8)}},[["span",{},[["span",{},[["span",{style:{"margin-bottom":g.Em(-(n.PHTML.d-0.05))}}]]]]],["span",{},[["span",{},[["span",{style:{"margin-top":g.Em(-(n.PHTML.h-0.05))}}]]]]]]);p.PHTMLhandleScriptlevel(r.firstChild);n.PHTMLhandleScriptlevel(r.lastChild);r.firstChild.firstChild.firstChild.appendChild(q.lastChild);r.lastChild.firstChild.firstChild.appendChild(q.lastChild);q.appendChild(r);t.h=Math.max(s.PHTML.h,n.PHTML.h*0.8+o);t.d=Math.max(s.PHTML.d,p.PHTML.d*0.8+u);t.w=s.PHTML.w+Math.max(n.PHTML.w,p.PHTML.w)+0.07}else{if(n){q.lastChild.style.verticalAlign=g.Em(o);n.PHTMLhandleScriptlevel(q.lastChild);t.h=Math.max(s.PHTML.h,n.PHTML.h*0.8+o);t.d=Math.max(s.PHTML.d,n.PHTML.d*0.8-o);t.w=s.PHTML.w+n.PHTML.w+0.07}else{if(p){q.lastChild.style.verticalAlign=g.Em(-u);p.PHTMLhandleScriptlevel(q.lastChild);t.h=Math.max(s.PHTML.h,p.PHTML.h*0.8-u);t.d=Math.max(s.PHTML.d,p.PHTML.d*0.8+u);t.w=s.PHTML.w+p.PHTML.w+0.07}}}return q}});h.mfrac.Augment({toPreviewHTML:function(r){r=this.PHTMLdefaultSpan(r,{childSpans:true,className:"MJXp-box",forceChild:true,noBBox:true});var o=this.getValues("linethickness","displaystyle");if(!o.displaystyle){if(this.data[0]){this.data[0].PHTMLhandleScriptlevel(r.firstChild)}if(this.data[1]){this.data[1].PHTMLhandleScriptlevel(r.lastChild)}}var n=e.Element("span",{className:"MJXp-box"},[["span",{className:"MJXp-denom"},[["span",{},[["span",{className:"MJXp-rule",style:{height:"1em"}}]]],["span"]]]]);n.firstChild.lastChild.appendChild(r.lastChild);r.appendChild(n);var s=this.PHTMLbboxFor(0),p=this.PHTMLbboxFor(1),v=this.PHTML;v.w=Math.max(s.w,p.w)*0.8;v.h=s.h+s.d+0.1+0.25;v.d=p.h+p.d-0.25;v.l=v.r=0.125;o.linethickness=Math.max(0,g.length2em(o.linethickness||"0",0));if(o.linethickness){var u=n.firstChild.firstChild.firstChild;var q=g.Em(o.linethickness);u.style.borderTop="none";u.style.borderBottom=(o.linethickness<0.15?"1px":q)+" solid";u.style.margin=q+" 0";q=o.linethickness;n.style.marginTop=g.Em(3*q-1.2);r.style.verticalAlign=g.Em(1.5*q+0.1);v.h+=1.5*q-0.1;v.d+=1.5*q}else{n.style.marginTop="-.7em"}return r}});h.msqrt.Augment({toPreviewHTML:function(n){n=this.PHTMLdefaultSpan(n,{childSpans:true,className:"MJXp-box",forceChild:true,noBBox:true});this.PHTMLlayoutRoot(n,n.firstChild);return n},PHTMLlayoutRoot:function(u,n){var v=this.PHTMLbboxFor(0);var q=Math.ceil((v.h+v.d+0.14)*100),w=g.Em(14/q);var r=e.Element("span",{className:"MJXp-surd"},[["span",{style:{"font-size":q+"%","margin-top":w}},["\u221A"]]]);var s=e.Element("span",{className:"MJXp-root"},[["span",{className:"MJXp-rule",style:{"border-top":".08em solid"}}]]);var p=(1.2/2.2)*q/100;if(q>150){var o=Math.ceil(150/q*10);r.firstChild.className="MJXp-right MJXp-scale"+o;r.firstChild.style.marginLeft=g.Em(p*(o/10-1)/q*100);p=p*o/10;s.firstChild.style.borderTopWidth=g.Em(0.08/Math.sqrt(o/10))}s.appendChild(n);u.appendChild(r);u.appendChild(s);this.PHTML.h=v.h+0.18;this.PHTML.d=v.d;this.PHTML.w=v.w+p;return u}});h.mroot.Augment({toPreviewHTML:function(q){q=this.PHTMLdefaultSpan(q,{childSpans:true,className:"MJXp-box",forceChild:true,noBBox:true});var p=this.PHTMLbboxFor(1),n=q.removeChild(q.lastChild);var t=this.PHTMLlayoutRoot(e.Element("span"),q.firstChild);n.className="MJXp-script";var u=parseInt(t.firstChild.firstChild.style.fontSize);var o=0.55*(u/120)+p.d*0.8,s=-0.6*(u/120);if(u>150){s*=0.95*Math.ceil(150/u*10)/10}n.style.marginRight=g.Em(s);n.style.verticalAlign=g.Em(o);if(-s>p.w*0.8){n.style.marginLeft=g.Em(-s-p.w*0.8)}q.appendChild(n);q.appendChild(t);this.PHTML.w+=Math.max(0,p.w*0.8+s);this.PHTML.h=Math.max(this.PHTML.h,p.h*0.8+o);return q},PHTMLlayoutRoot:h.msqrt.prototype.PHTMLlayoutRoot});h.mfenced.Augment({toPreviewHTML:function(q){q=this.PHTMLcreateSpan(q);this.PHTMLhandleStyle(q);this.PHTMLhandleColor(q);this.addFakeNodes();this.PHTMLaddChild(q,"open",{});for(var p=0,n=this.data.length;ps){s=x.w}}}var o=this.PHTML;o.w=s;o.h=y/2+0.25;o.d=y/2-0.25;o.l=o.r=0.125;return E}});h.mlabeledtr.Augment({PHTMLdefaultSpan:function(q,o){if(!o){o={}}q=this.PHTMLcreateSpan(q);this.PHTMLhandleStyle(q);this.PHTMLhandleColor(q);if(this.isToken){this.PHTMLhandleToken(q)}for(var p=1,n=this.data.length;p/g,"")}catch(k){if(!k.restart){throw k}return MathJax.Callback.After(["HandleMML",this,l],k.restart)}n.setAttribute("data-mathml",i);j=f.addElement(n,"span",{isMathJax:true,unselectable:"on",className:"MJX_Assistive_MathML"+(h.root.Get("display")==="block"?" MJX_Assistive_MathML_Block":"")});try{j.innerHTML=i}catch(k){}n.style.position="relative";n.setAttribute("role","presentation");n.firstChild.setAttribute("aria-hidden","true");j.setAttribute("role","presentation")}l.i++}l.callback()}};b.Startup.signal.Post("AssistiveMML Ready")})(MathJax.Ajax,MathJax.Callback,MathJax.Hub,MathJax.HTML);MathJax.Callback.Queue(["Require",MathJax.Ajax,"[MathJax]/extensions/toMathML.js"],["loadComplete",MathJax.Ajax,"[MathJax]/extensions/AssistiveMML.js"],function(){MathJax.Hub.Register.StartupHook("End Config",["Config",MathJax.Extension.AssistiveMML])}); +!function(a,b){var c,d,e=a.config.menuSettings,f=Function.prototype.bind?function(a,b){return a.bind(b)}:function(a,b){return function(){a.apply(b,arguments)}},g=Object.keys||function(a){var b=[];for(var c in a)a.hasOwnProperty(c)&&b.push(c);return b},h=MathJax.Ajax.config.path;h.a11y||(h.a11y=a.config.root+"/extensions/a11y");var i=b["accessibility-menu"]={version:"1.5.0",prefix:"",defaults:{},modules:[],MakeOption:function(a){return i.prefix+a},GetOption:function(a){return e[i.MakeOption(a)]},AddDefaults:function(){for(var a,b=g(i.defaults),c=0;a=b[c];c++){var d=i.MakeOption(a);void 0===e[d]&&(e[d]=i.defaults[a])}},AddMenu:function(){for(var a,b=Array(this.modules.length),e=0;a=this.modules[e];e++)b[e]=a.placeHolder;var f=d.FindId("Accessibility");if(f)b.unshift(c.RULE()),f.submenu.items.push.apply(f.submenu.items,b);else{var g=(d.FindId("Settings","Renderer")||{}).submenu;g&&(b.unshift(c.RULE()),b.unshift(g.items.pop()),b.unshift(g.items.pop())),b.unshift("Accessibility");var f=c.SUBMENU.apply(c.SUBMENU,b),h=d.IndexOfId("Locale");h?d.items.splice(h,0,f):d.items.push(c.RULE(),f)}},Register:function(a){i.defaults[a.option]=!1,i.modules.push(a)},Startup:function(){c=MathJax.Menu.ITEM,d=MathJax.Menu.menu;for(var a,b=0;a=this.modules[b];b++)a.CreateMenu();this.AddMenu()},LoadExtensions:function(){for(var b,c=[],d=0;b=this.modules[d];d++)e[b.option]&&c.push(b.module);return c.length?a.Startup.loadArray(c):null}},j=MathJax.Extension.ModuleLoader=MathJax.Object.Subclass({option:"",name:["",""],module:"",placeHolder:null,submenu:!1,extension:null,Init:function(a,b,c,d,e){this.option=a,this.name=[b.replace(/ /g,""),b],this.module=c,this.extension=d,this.submenu=e||!1},CreateMenu:function(){var a=f(this.Load,this);this.submenu?this.placeHolder=c.SUBMENU(this.name,c.CHECKBOX(["Activate","Activate"],i.MakeOption(this.option),{action:a}),c.RULE(),c.COMMAND(["OptionsWhenActive","(Options when Active)"],null,{disabled:!0})):this.placeHolder=c.CHECKBOX(this.name,i.MakeOption(this.option),{action:a})},Load:function(){a.Queue(["Require",MathJax.Ajax,this.module,["Enable",this]])},Enable:function(a){var b=MathJax.Extension[this.extension];b&&(b.Enable(!0,!0),MathJax.Menu.saveCookie())}});i.Register(j("collapsible","Collapsible Math","[a11y]/collapsible.js","collapsible")),i.Register(j("autocollapse","Auto Collapse","[a11y]/auto-collapse.js","auto-collapse")),i.Register(j("explorer","Explorer","[a11y]/explorer.js","explorer",!0)),i.AddDefaults(),a.Register.StartupHook("End Extensions",function(){a.Register.StartupHook("MathMenu Ready",function(){i.Startup(),a.Startup.signal.Post("Accessibility Menu Ready")},5)},5),MathJax.Hub.Register.StartupHook("End Cookie",function(){MathJax.Callback.Queue(["LoadExtensions",i],["loadComplete",MathJax.Ajax,"[a11y]/accessibility-menu.js"])})}(MathJax.Hub,MathJax.Extension);MathJax.Ajax.loadComplete("[MathJax]/config/TeX-MML-AM_CHTML.js"); diff --git a/ext/mathjax/extensions/AssistiveMML.js b/ext/mathjax/extensions/AssistiveMML.js new file mode 100644 index 000000000..935fcc62e --- /dev/null +++ b/ext/mathjax/extensions/AssistiveMML.js @@ -0,0 +1,19 @@ +/* + * /MathJax/extensions/AssistiveMML.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function(a,e,b,f){var c=b.config.menuSettings;var d=MathJax.Extension.AssistiveMML={version:"2.7.5",config:b.CombineConfig("AssistiveMML",{disabled:false,styles:{".MJX_Assistive_MathML":{position:"absolute!important",top:0,left:0,clip:(b.Browser.isMSIE&&(document.documentMode||0)<8?"rect(1px 1px 1px 1px)":"rect(1px, 1px, 1px, 1px)"),padding:"1px 0 0 0!important",border:"0!important",height:"1px!important",width:"1px!important",overflow:"hidden!important",display:"block!important","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none"},".MJX_Assistive_MathML.MJX_Assistive_MathML_Block":{width:"100%!important"}}}),Config:function(){if(!this.config.disabled&&c.assistiveMML==null){b.Config({menuSettings:{assistiveMML:true}})}a.Styles(this.config.styles);b.Register.MessageHook("End Math",function(g){if(c.assistiveMML){return d.AddAssistiveMathML(g[1])}})},AddAssistiveMathML:function(g){var h={jax:b.getAllJax(g),i:0,callback:MathJax.Callback({})};this.HandleMML(h);return h.callback},RemoveAssistiveMathML:function(k){var h=b.getAllJax(k),l;for(var j=0,g=h.length;j/g,"")}catch(k){if(!k.restart){throw k}return MathJax.Callback.After(["HandleMML",this,l],k.restart)}n.setAttribute("data-mathml",i);j=f.addElement(n,"span",{isMathJax:true,unselectable:"on",className:"MJX_Assistive_MathML"+(h.root.Get("display")==="block"?" MJX_Assistive_MathML_Block":"")});try{j.innerHTML=i}catch(k){}n.style.position="relative";n.setAttribute("role","presentation");n.firstChild.setAttribute("aria-hidden","true");j.setAttribute("role","presentation")}l.i++}l.callback()}};b.Startup.signal.Post("AssistiveMML Ready")})(MathJax.Ajax,MathJax.Callback,MathJax.Hub,MathJax.HTML);MathJax.Callback.Queue(["Require",MathJax.Ajax,"[MathJax]/extensions/toMathML.js"],["loadComplete",MathJax.Ajax,"[MathJax]/extensions/AssistiveMML.js"],function(){MathJax.Hub.Register.StartupHook("End Config",["Config",MathJax.Extension.AssistiveMML])}); diff --git a/ext/mathjax/extensions/MathEvents.js b/ext/mathjax/extensions/MathEvents.js new file mode 100644 index 000000000..c8370f8f6 --- /dev/null +++ b/ext/mathjax/extensions/MathEvents.js @@ -0,0 +1,19 @@ +/* + * /MathJax/extensions/MathEvents.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function(d,h,l,g,m,b,j){var p="2.7.5";var i=MathJax.Extension;var c=i.MathEvents={version:p};var k=d.config.menuSettings;var o={hover:500,frame:{x:3.5,y:5,bwidth:1,bcolor:"#A6D",hwidth:"15px",hcolor:"#83A"},button:{x:-6,y:-3,wx:-2},fadeinInc:0.2,fadeoutInc:0.05,fadeDelay:50,fadeoutStart:400,fadeoutDelay:15*1000,styles:{".MathJax_Hover_Frame":{"border-radius":".25em","-webkit-border-radius":".25em","-moz-border-radius":".25em","-khtml-border-radius":".25em","box-shadow":"0px 0px 15px #83A","-webkit-box-shadow":"0px 0px 15px #83A","-moz-box-shadow":"0px 0px 15px #83A","-khtml-box-shadow":"0px 0px 15px #83A",border:"1px solid #A6D ! important",display:"inline-block",position:"absolute"},".MathJax_Menu_Button .MathJax_Hover_Arrow":{position:"absolute",cursor:"pointer",display:"inline-block",border:"2px solid #AAA","border-radius":"4px","-webkit-border-radius":"4px","-moz-border-radius":"4px","-khtml-border-radius":"4px","font-family":"'Courier New',Courier","font-size":"9px",color:"#F0F0F0"},".MathJax_Menu_Button .MathJax_Hover_Arrow span":{display:"block","background-color":"#AAA",border:"1px solid","border-radius":"3px","line-height":0,padding:"4px"},".MathJax_Hover_Arrow:hover":{color:"white!important",border:"2px solid #CCC!important"},".MathJax_Hover_Arrow:hover span":{"background-color":"#CCC!important"}}};var n=c.Event={LEFTBUTTON:0,RIGHTBUTTON:2,MENUKEY:"altKey",KEY:{RETURN:13,ESCAPE:27,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40},Mousedown:function(q){return n.Handler(q,"Mousedown",this)},Mouseup:function(q){return n.Handler(q,"Mouseup",this)},Mousemove:function(q){return n.Handler(q,"Mousemove",this)},Mouseover:function(q){return n.Handler(q,"Mouseover",this)},Mouseout:function(q){return n.Handler(q,"Mouseout",this)},Click:function(q){return n.Handler(q,"Click",this)},DblClick:function(q){return n.Handler(q,"DblClick",this)},Menu:function(q){return n.Handler(q,"ContextMenu",this)},Handler:function(t,r,s){if(l.loadingMathMenu){return n.False(t)}var q=b[s.jaxID];if(!t){t=window.event}t.isContextMenu=(r==="ContextMenu");if(q[r]){return q[r](t,s)}if(i.MathZoom){return i.MathZoom.HandleEvent(t,r,s)}},False:function(q){if(!q){q=window.event}if(q){if(q.preventDefault){q.preventDefault()}else{q.returnValue=false}if(q.stopPropagation){q.stopPropagation()}q.cancelBubble=true}return false},Keydown:function(r,q){if(!r){r=window.event}if(r.keyCode===n.KEY.SPACE){n.ContextMenu(r,this)}},ContextMenu:function(t,E,w){var B=b[E.jaxID],v=B.getJaxFromMath(E);var F=(B.config.showMathMenu!=null?B:d).config.showMathMenu;if(!F||(k.context!=="MathJax"&&!w)){return}if(c.msieEventBug){t=window.event||t}n.ClearSelection();f.ClearHoverTimer();if(v.hover){if(v.hover.remove){clearTimeout(v.hover.remove);delete v.hover.remove}v.hover.nofade=true}var u=MathJax.Menu;var G,D;if(u){if(u.loadingDomain){return n.False(t)}G=m.loadDomain("MathMenu");if(!G){u.jax=v;var r=u.menu.Find("Show Math As").submenu;r.items[0].name=v.sourceMenuTitle;r.items[0].format=(v.sourceMenuFormat||"MathML");r.items[1].name=j[v.inputJax].sourceMenuTitle;r.items[5].disabled=!j[v.inputJax].annotationEncoding;var A=r.items[2];A.disabled=true;var q=A.submenu.items;annotationList=MathJax.Hub.Config.semanticsAnnotations;for(var z=0,y=q.length;z0){this.HoverFadeTimer(q,q.hover.inc);return}s.parentNode.removeChild(s);if(r){r.parentNode.removeChild(r)}if(q.hover.remove){clearTimeout(q.hover.remove)}delete q.hover},HoverFadeTimer:function(q,s,r){q.hover.inc=s;if(!q.hover.timer){q.hover.timer=setTimeout(g(["HoverFade",this,q]),(r||o.fadeDelay))}},HoverMenu:function(q){if(!q){q=window.event}return b[this.jax].ContextMenu(q,this.math,true)},ClearHover:function(q){if(q.hover.remove){clearTimeout(q.hover.remove)}if(q.hover.timer){clearTimeout(q.hover.timer)}f.ClearHoverTimer();delete q.hover},Px:function(q){if(Math.abs(q)<0.006){return"0px"}return q.toFixed(2).replace(/\.?0+$/,"")+"px"},getImages:function(){if(k.discoverable){var q=new Image();q.src=o.button.src}}};var a=c.Touch={last:0,delay:500,start:function(r){var q=new Date().getTime();var s=(q-a.last8);var j=(a?null:"5px");var s=f.CombineConfig("MathMenu",{delay:150,showRenderer:true,showMathPlayer:true,showFontMenu:false,showContext:false,showDiscoverable:false,showLocale:true,showLocaleURL:false,semanticsAnnotations:{TeX:["TeX","LaTeX","application/x-tex"],StarMath:["StarMath 5.0"],Maple:["Maple"],ContentMathML:["MathML-Content","application/mathml-content+xml"],OpenMath:["OpenMath"]},windowSettings:{status:"no",toolbar:"no",locationbar:"no",menubar:"no",directories:"no",personalbar:"no",resizable:"yes",scrollbars:"yes",width:400,height:300,left:Math.round((screen.width-400)/2),top:Math.round((screen.height-300)/3)},styles:{"#MathJax_About":{position:"fixed",left:"50%",width:"auto","text-align":"center",border:"3px outset",padding:"1em 2em","background-color":"#DDDDDD",color:"black",cursor:"default","font-family":"message-box","font-size":"120%","font-style":"normal","text-indent":0,"text-transform":"none","line-height":"normal","letter-spacing":"normal","word-spacing":"normal","word-wrap":"normal","white-space":"nowrap","float":"none","z-index":201,"border-radius":"15px","-webkit-border-radius":"15px","-moz-border-radius":"15px","-khtml-border-radius":"15px","box-shadow":"0px 10px 20px #808080","-webkit-box-shadow":"0px 10px 20px #808080","-moz-box-shadow":"0px 10px 20px #808080","-khtml-box-shadow":"0px 10px 20px #808080",filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')"},"#MathJax_About.MathJax_MousePost":{outline:"none"},".MathJax_Menu":{position:"absolute","background-color":"white",color:"black",width:"auto",padding:(a?"2px":"5px 0px"),border:"1px solid #CCCCCC",margin:0,cursor:"default",font:"menu","text-align":"left","text-indent":0,"text-transform":"none","line-height":"normal","letter-spacing":"normal","word-spacing":"normal","word-wrap":"normal","white-space":"nowrap","float":"none","z-index":201,"border-radius":j,"-webkit-border-radius":j,"-moz-border-radius":j,"-khtml-border-radius":j,"box-shadow":"0px 10px 20px #808080","-webkit-box-shadow":"0px 10px 20px #808080","-moz-box-shadow":"0px 10px 20px #808080","-khtml-box-shadow":"0px 10px 20px #808080",filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')"},".MathJax_MenuItem":{padding:(a?"2px 2em":"1px 2em"),background:"transparent"},".MathJax_MenuArrow":{position:"absolute",right:".5em","padding-top":".25em",color:"#666666","font-family":(l?"'Arial unicode MS'":null),"font-size":".75em"},".MathJax_MenuActive .MathJax_MenuArrow":{color:"white"},".MathJax_MenuArrow.RTL":{left:".5em",right:"auto"},".MathJax_MenuCheck":{position:"absolute",left:".7em","font-family":(l?"'Arial unicode MS'":null)},".MathJax_MenuCheck.RTL":{right:".7em",left:"auto"},".MathJax_MenuRadioCheck":{position:"absolute",left:(a?"1em":".7em")},".MathJax_MenuRadioCheck.RTL":{right:(a?"1em":".7em"),left:"auto"},".MathJax_MenuLabel":{padding:(a?"2px 2em 4px 1.33em":"1px 2em 3px 1.33em"),"font-style":"italic"},".MathJax_MenuRule":{"border-top":(a?"1px solid #CCCCCC":"1px solid #DDDDDD"),margin:(a?"4px 1px 0px":"4px 3px")},".MathJax_MenuDisabled":{color:"GrayText"},".MathJax_MenuActive":{"background-color":(a?"Highlight":"#606872"),color:(a?"HighlightText":"white")},".MathJax_MenuDisabled:focus, .MathJax_MenuLabel:focus":{"background-color":"#E8E8E8"},".MathJax_ContextMenu:focus":{outline:"none"},".MathJax_ContextMenu .MathJax_MenuItem:focus":{outline:"none"},"#MathJax_AboutClose":{top:".2em",right:".2em"},".MathJax_Menu .MathJax_MenuClose":{top:"-10px",left:"-10px"},".MathJax_MenuClose":{position:"absolute",cursor:"pointer",display:"inline-block",border:"2px solid #AAA","border-radius":"18px","-webkit-border-radius":"18px","-moz-border-radius":"18px","-khtml-border-radius":"18px","font-family":"'Courier New',Courier","font-size":"24px",color:"#F0F0F0"},".MathJax_MenuClose span":{display:"block","background-color":"#AAA",border:"1.5px solid","border-radius":"18px","-webkit-border-radius":"18px","-moz-border-radius":"18px","-khtml-border-radius":"18px","line-height":0,padding:"8px 0 6px"},".MathJax_MenuClose:hover":{color:"white!important",border:"2px solid #CCC!important"},".MathJax_MenuClose:hover span":{"background-color":"#CCC!important"},".MathJax_MenuClose:hover:focus":{outline:"none"}}});var n,k,b;f.Register.StartupHook("MathEvents Ready",function(){n=MathJax.Extension.MathEvents.Event.False;k=MathJax.Extension.MathEvents.Hover;b=MathJax.Extension.MathEvents.Event.KEY});var h=MathJax.Object.Subclass({Keydown:function(u,v){switch(u.keyCode){case b.ESCAPE:this.Remove(u,v);break;case b.RIGHT:this.Right(u,v);break;case b.LEFT:this.Left(u,v);break;case b.UP:this.Up(u,v);break;case b.DOWN:this.Down(u,v);break;case b.RETURN:case b.SPACE:this.Space(u,v);break;default:return;break}return n(u)},Escape:function(u,v){},Right:function(u,v){},Left:function(u,v){},Up:function(u,v){},Down:function(u,v){},Space:function(u,v){}},{});var g=MathJax.Menu=h.Subclass({version:p,items:[],posted:false,title:null,margin:5,Init:function(u){this.items=[].slice.call(arguments,0)},With:function(u){if(u){f.Insert(this,u)}return this},Post:function(M,E,B){if(!M){M=window.event||{}}var I=document.getElementById("MathJax_MenuFrame");if(!I){I=g.Background(this);delete c.lastItem;delete c.lastMenu;delete g.skipUp;d.Post(["post",g.jax]);g.isRTL=(MathJax.Localization.fontDirection()==="rtl")}var v=o.Element("div",{onmouseup:g.Mouseup,ondblclick:n,ondragstart:n,onselectstart:n,oncontextmenu:n,menuItem:this,className:"MathJax_Menu",onkeydown:g.Keydown,role:"menu"});if(M.type==="contextmenu"||M.type==="mouseover"){v.className+=" MathJax_ContextMenu"}if(!B){MathJax.Localization.setCSS(v)}for(var N=0,K=this.items.length;NA-this.margin){H=A-v.offsetWidth-this.margin}if(g.isMobile){H=Math.max(5,H-Math.floor(v.offsetWidth/2));F-=20}g.skipUp=M.isContextMenu}else{var z="left",J=E.offsetWidth;H=(g.isMobile?30:J-2);F=0;while(E&&E!==I){H+=E.offsetLeft;F+=E.offsetTop;E=E.parentNode}if(!g.isMobile){if((g.isRTL&&H-J-v.offsetWidth>this.margin)||(!g.isRTL&&H+v.offsetWidth>A-this.margin)){z="right";H=Math.max(this.margin,H-J-v.offsetWidth+6)}}if(!a){v.style["borderRadiusTop"+z]=0;v.style["WebkitBorderRadiusTop"+z]=0;v.style["MozBorderRadiusTop"+z]=0;v.style["KhtmlBorderRadiusTop"+z]=0}}v.style.left=H+"px";v.style.top=F+"px";if(document.selection&&document.selection.empty){document.selection.empty()}var G=window.pageXOffset||document.documentElement.scrollLeft;var D=window.pageYOffset||document.documentElement.scrollTop;g.Focus(v);if(M.type==="keydown"){g.skipMouseoverFromKey=true;setTimeout(function(){delete g.skipMouseoverFromKey},s.delay)}window.scrollTo(G,D);return n(M)},Remove:function(u,v){d.Post(["unpost",g.jax]);var w=document.getElementById("MathJax_MenuFrame");if(w){w.parentNode.removeChild(w);if(this.msieFixedPositionBug){detachEvent("onresize",g.Resize)}}if(g.jax.hover){delete g.jax.hover.nofade;k.UnHover(g.jax)}g.Unfocus(v);if(u.type==="mousedown"){g.CurrentNode().blur()}return n(u)},Find:function(u){return this.FindN(1,u,[].slice.call(arguments,1))},FindId:function(u){return this.FindN(0,u,[].slice.call(arguments,1))},FindN:function(y,v,x){for(var w=0,u=this.items.length;w0){u.oldTabIndex=u.tabIndex}u.tabIndex=-1}},SetTabIndex:function(){var v=g.AllNodes();for(var w=0,u;u=v[w];w++){if(u.oldTabIndex!==undefined){u.tabIndex=u.oldTabIndex;delete u.oldTabIndex}else{u.tabIndex=f.getTabOrder(u)}}},Mod:function(u,v){return((u%v)+v)%v},IndexOf:(Array.prototype.indexOf?function(u,v,w){return u.indexOf(v,w)}:function(u,x,y){for(var w=(y||0),v=u.length;w=0&&c.GetMenuNode(w).menuItem!==v[u].menuItem){v[u].menuItem.posted=false;v[u].parentNode.removeChild(v[u]);u--}},Touchstart:function(u,v){return this.TouchEvent(u,v,"Mousedown")},Touchend:function(u,v){return this.TouchEvent(u,v,"Mouseup")},TouchEvent:function(v,w,u){if(this!==c.lastItem){if(c.lastMenu){g.Event(v,c.lastMenu,"Mouseout")}g.Event(v,w,"Mouseover",true);c.lastItem=this;c.lastMenu=w}if(this.nativeTouch){return null}g.Event(v,w,u);return false},Remove:function(u,v){v=v.parentNode.menuItem;return v.Remove(u,v)},With:function(u){if(u){f.Insert(this,u)}return this},isRTL:function(){return g.isRTL},rtlClass:function(){return(this.isRTL()?" RTL":"")}},{GetMenuNode:function(u){return u.parentNode}});g.ENTRY=g.ITEM.Subclass({role:"menuitem",Attributes:function(u){u=f.Insert({onmouseover:g.Mouseover,onmouseout:g.Mouseout,onmousedown:g.Mousedown,onkeydown:g.Keydown,"aria-disabled":!!this.disabled},u);u=this.SUPER(arguments).Attributes.call(this,u);if(this.disabled){u.className+=" MathJax_MenuDisabled"}return u},MoveVertical:function(u,E,w){var x=c.GetMenuNode(E);var D=[];for(var z=0,C=x.menuItem.items,y;y=C[z];z++){if(!y.hidden){D.push(y)}}var B=g.IndexOf(D,this);if(B===-1){return}var A=D.length;var v=x.childNodes;do{B=g.Mod(w(B),A)}while(D[B].hidden||!v[B].role||v[B].role==="separator");this.Deactivate(E);D[B].Activate(u,v[B])},Up:function(v,u){this.MoveVertical(v,u,function(w){return w-1})},Down:function(v,u){this.MoveVertical(v,u,function(w){return w+1})},Right:function(v,u){this.MoveHorizontal(v,u,g.Right,!this.isRTL())},Left:function(v,u){this.MoveHorizontal(v,u,g.Left,this.isRTL())},MoveHorizontal:function(A,z,u,B){var x=c.GetMenuNode(z);if(x.menuItem===g.menu&&A.shiftKey){u(A,z)}if(B){return}if(x.menuItem!==g.menu){this.Deactivate(z)}var v=x.previousSibling.childNodes;var y=v.length;while(y--){var w=v[y];if(w.menuItem.submenu&&w.menuItem.submenu===x.menuItem){g.Focus(w);break}}this.RemoveSubmenus(z)},Space:function(u,v){this.Mouseup(u,v)},Activate:function(u,v){this.Deactivate(v);if(!this.disabled){v.className+=" MathJax_MenuActive"}this.DeactivateSubmenus(v);g.Focus(v)},Deactivate:function(u){u.className=u.className.replace(/ MathJax_MenuActive/,"")}});g.ITEM.COMMAND=g.ENTRY.Subclass({action:function(){},Init:function(u,w,v){if(!i(u)){u=[u,u]}this.name=u;this.action=w;this.With(v)},Label:function(u,v){return[this.Name()]},Mouseup:function(u,v){if(!this.disabled){this.Remove(u,v);d.Post(["command",this]);this.action.call(this,u)}return n(u)}});g.ITEM.SUBMENU=g.ENTRY.Subclass({submenu:null,marker:"\u25BA",markerRTL:"\u25C4",Attributes:function(u){u=f.Insert({"aria-haspopup":"true"},u);u=this.SUPER(arguments).Attributes.call(this,u);return u},Init:function(u,w){if(!i(u)){u=[u,u]}this.name=u;var v=1;if(!(w instanceof g.ITEM)){this.With(w),v++}this.submenu=g.apply(g,[].slice.call(arguments,v))},Label:function(u,v){this.submenu.posted=false;return[this.Name()+" ",["span",{className:"MathJax_MenuArrow"+this.rtlClass()},[this.isRTL()?this.markerRTL:this.marker]]]},Timer:function(u,v){this.ClearTimer();u={type:u.type,clientX:u.clientX,clientY:u.clientY};this.timer=setTimeout(e(["Mouseup",this,u,v]),s.delay)},ClearTimer:function(){if(this.timer){clearTimeout(this.timer)}},Touchend:function(v,x){var w=this.submenu.posted;var u=this.SUPER(arguments).Touchend.apply(this,arguments);if(w){this.Deactivate(x);delete c.lastItem;delete c.lastMenu}return u},Mouseout:function(u,v){if(!this.submenu.posted){this.Deactivate(v)}this.ClearTimer()},Mouseover:function(u,v){this.Activate(u,v)},Mouseup:function(u,v){if(!this.disabled){if(!this.submenu.posted){this.ClearTimer();this.submenu.Post(u,v,this.ltr);g.Focus(v)}else{this.DeactivateSubmenus(v)}}return n(u)},Activate:function(u,v){if(!this.disabled){this.Deactivate(v);v.className+=" MathJax_MenuActive"}if(!this.submenu.posted){this.DeactivateSubmenus(v);if(!g.isMobile){this.Timer(u,v)}}g.Focus(v)},MoveVertical:function(w,v,u){this.ClearTimer();this.SUPER(arguments).MoveVertical.apply(this,arguments)},MoveHorizontal:function(w,y,v,x){if(!x){this.SUPER(arguments).MoveHorizontal.apply(this,arguments);return}if(this.disabled){return}if(!this.submenu.posted){this.Activate(w,y);return}var u=c.GetMenuNode(y).nextSibling.childNodes;if(u.length>0){this.submenu.items[0].Activate(w,u[0])}}});g.ITEM.RADIO=g.ENTRY.Subclass({variable:null,marker:(a?"\u25CF":"\u2713"),role:"menuitemradio",Attributes:function(v){var u=s.settings[this.variable]===this.value?"true":"false";v=f.Insert({"aria-checked":u},v);v=this.SUPER(arguments).Attributes.call(this,v);return v},Init:function(v,u,w){if(!i(v)){v=[v,v]}this.name=v;this.variable=u;this.With(w);if(this.value==null){this.value=this.name[0]}},Label:function(v,w){var u={className:"MathJax_MenuRadioCheck"+this.rtlClass()};if(s.settings[this.variable]!==this.value){u={style:{display:"none"}}}return[["span",u,[this.marker]]," "+this.Name()]},Mouseup:function(x,y){if(!this.disabled){var z=y.parentNode.childNodes;for(var v=0,u=z.length;v/g,">");var y=t("EqSource","MathJax Equation Source");if(g.isMobile){u.document.open();u.document.write(""+y+"");u.document.write("
"+z+"
");u.document.write("
");u.document.write("");u.document.close()}else{u.document.open();u.document.write(""+y+"");u.document.write("
"+z+"
");u.document.write("");u.document.close();var v=u.document.body.firstChild;setTimeout(function(){var B=(u.outerHeight-u.innerHeight)||30,A=(u.outerWidth-u.innerWidth)||30,w,E;A=Math.max(140,Math.min(Math.floor(0.5*screen.width),v.offsetWidth+A+25));B=Math.max(40,Math.min(Math.floor(0.5*screen.height),v.offsetHeight+B+25));if(g.prototype.msieHeightBug){B+=35}u.resizeTo(A,B);var D;try{D=x.screenX}catch(C){}if(x&&D!=null){w=Math.max(0,Math.min(x.screenX-Math.floor(A/2),screen.width-A-20));E=Math.max(0,Math.min(x.screenY-Math.floor(B/2),screen.height-B-20));u.moveTo(w,E)}},50)}};g.Scale=function(){var z=["CommonHTML","HTML-CSS","SVG","NativeMML","PreviewHTML"],u=z.length,y=100,w,v;for(w=0;w7;g.Augment({margin:20,msieBackgroundBug:((document.documentMode||0)<9),msieFixedPositionBug:(v||!w),msieAboutBug:v,msieHeightBug:((document.documentMode||0)<9)});if(m){delete s.styles["#MathJax_About"].filter;delete s.styles[".MathJax_Menu"].filter}},Firefox:function(u){g.skipMouseover=u.isMobile&&u.versionAtLeast("6.0");g.skipMousedown=u.isMobile}});g.isMobile=f.Browser.isMobile;g.noContextMenu=f.Browser.noContextMenu;g.CreateLocaleMenu=function(){if(!g.menu){return}var z=g.menu.Find("Language").submenu,w=z.items;var v=[],B=MathJax.Localization.strings;for(var A in B){if(B.hasOwnProperty(A)){v.push(A)}}v=v.sort();z.items=[];for(var x=0,u=v.length;xt){z.style.height=t+"px";z.style.width=(x.zW+this.scrollSize)+"px"}if(z.offsetWidth>l){z.style.width=l+"px";z.style.height=(x.zH+this.scrollSize)+"px"}}if(this.operaPositionBug){z.style.width=Math.min(l,x.zW)+"px"}if(z.offsetWidth>m&&z.offsetWidth-m=9);h.msiePositionBug=!m;h.msieSizeBug=l.versionAtLeast("7.0")&&(!document.documentMode||n===7||n===8);h.msieZIndexBug=(n<=7);h.msieInlineBlockAlignBug=(n<=7);h.msieTrapEventBug=!window.addEventListener;if(document.compatMode==="BackCompat"){h.scrollSize=52}if(m){delete i.styles["#MathJax_Zoom"].filter}},Opera:function(l){h.operaPositionBug=true;h.operaRefreshBug=true}});h.topImg=(h.msieInlineBlockAlignBug?d.Element("img",{style:{width:0,height:0,position:"relative"},src:"about:blank"}):d.Element("span",{style:{width:0,height:0,display:"inline-block"}}));if(h.operaPositionBug||h.msieTopBug){h.topImg.style.border="1px solid"}MathJax.Callback.Queue(["StartupHook",MathJax.Hub.Register,"Begin Styles",{}],["Styles",f,i.styles],["Post",a.Startup.signal,"MathZoom Ready"],["loadComplete",f,"[MathJax]/extensions/MathZoom.js"])})(MathJax.Hub,MathJax.HTML,MathJax.Ajax,MathJax.OutputJax["HTML-CSS"],MathJax.OutputJax.NativeMML); diff --git a/ext/mathjax/extensions/TeX/AMSmath.js b/ext/mathjax/extensions/TeX/AMSmath.js new file mode 100644 index 000000000..2504c5cb4 --- /dev/null +++ b/ext/mathjax/extensions/TeX/AMSmath.js @@ -0,0 +1,19 @@ +/* + * /MathJax/extensions/TeX/AMSmath.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.Extension["TeX/AMSmath"]={version:"2.7.5",number:0,startNumber:0,IDs:{},eqIDs:{},labels:{},eqlabels:{},refs:[]};MathJax.Hub.Register.StartupHook("TeX Jax Ready",function(){var b=MathJax.ElementJax.mml,h=MathJax.InputJax.TeX,g=MathJax.Extension["TeX/AMSmath"];var d=h.Definitions,f=h.Stack.Item,a=h.config.equationNumbers;var c=function(k){var n=[];for(var l=0,j=k.length;l0){p+="rl";o.push("0em 0em");q--}o=o.join(" ");if(i){return this.AMSarray(l,j,i,p,o)}var m=this.AMSarray(l,j,i,p,o);return this.setArrayAlign(m,k)},EquationBegin:function(i,j){this.checkEqnEnv();this.stack.global.forcetag=(j&&a.autoNumber!=="none");return i},EquationStar:function(i,j){this.stack.global.tagged=true;return j},checkEqnEnv:function(){if(this.stack.global.eqnenv){h.Error(["ErroneousNestingEq","Erroneous nesting of equation structures"])}this.stack.global.eqnenv=true},MultiIntegral:function(j,m){var l=this.GetNext();if(l==="\\"){var k=this.i;l=this.GetArgument(j);this.i=k;if(l==="\\limits"){if(j==="\\idotsint"){m="\\!\\!\\mathop{\\,\\,"+m+"}"}else{m="\\!\\!\\!\\mathop{\\,\\,\\,"+m+"}"}}}this.string=m+" "+this.string.slice(this.i);this.i=0},xArrow:function(k,o,n,i){var m={width:"+"+(n+i)+"mu",lspace:n+"mu"};var p=this.GetBrackets(k),q=this.ParseArg(k);var s=b.mo(b.chars(String.fromCharCode(o))).With({stretchy:true,texClass:b.TEXCLASS.REL});var j=b.munderover(s);j.SetData(j.over,b.mpadded(q).With(m).With({voffset:".15em"}));if(p){p=h.Parse(p,this.stack.env).mml();j.SetData(j.under,b.mpadded(p).With(m).With({voffset:"-.24em"}))}this.Push(j.With({subsupOK:true}))},GetDelimiterArg:function(i){var j=this.trimSpaces(this.GetArgument(i));if(j==""){return null}if(j in d.delimiter){return j}h.Error(["MissingOrUnrecognizedDelim","Missing or unrecognized delimiter for %1",i])},GetStar:function(){var i=(this.GetNext()==="*");if(i){this.i++}return i}});f.Augment({autoTag:function(){var j=this.global;if(!j.notag){g.number++;j.tagID=a.formatNumber(g.number.toString());var i=h.Parse("\\text{"+a.formatTag(j.tagID)+"}",{}).mml();j.tag=b.mtd(i).With({id:a.formatID(j.tagID)})}},getTag:function(){var m=this.global,k=m.tag;m.tagged=true;if(m.label){if(a.useLabelIds){k.id=a.formatID(m.label)}g.eqlabels[m.label]={tag:m.tagID,id:k.id}}if(document.getElementById(k.id)||g.IDs[k.id]||g.eqIDs[k.id]){var l=0,j;do{l++;j=k.id+"_"+l}while(document.getElementById(j)||g.IDs[j]||g.eqIDs[j]);k.id=j;if(m.label){g.eqlabels[m.label].id=j}}g.eqIDs[k.id]=1;this.clearTag();return k},clearTag:function(){var i=this.global;delete i.tag;delete i.tagID;delete i.label},fixInitialMO:function(l){for(var k=0,j=l.length;k1){var n=(q.h+q.d)/2,j=h.TeX.x_height/2;p.parentNode.style.verticalAlign=h.Em(q.d+(j-n));q.h=j+n;q.d=n-j}p.bbox={h:q.h,d:q.d,w:k,lw:0,rw:k};return p}})});b.Register.StartupHook("SVG Jax Config",function(){b.Config({SVG:{styles:{".MathJax_SVG .noError":b.Insert({"vertical-align":(b.Browser.isMSIE&&a.multiLine?"-2px":"")},a.style)}}})});b.Register.StartupHook("SVG Jax Ready",function(){var g=MathJax.ElementJax.mml;var f=g.math.prototype.toSVG,h=g.merror.prototype.toSVG;g.math.Augment({toSVG:function(i,j){var k=this.data[0];if(k&&k.data[0]&&k.data[0].isError){i=k.data[0].toSVG(i)}else{i=f.apply(this,arguments)}return i}});g.merror.Augment({toSVG:function(n){if(!this.isError||this.Parent().type!=="math"){return h.apply(this,arguments)}n=e.addElement(n,"span",{className:"noError",isMathJax:true});if(this.multiLine){n.style.display="inline-block"}var o=this.data[0].data[0].data.join("").split(/\n/);for(var l=0,j=o.length;l1){var k=n.offsetHeight/2;n.style.verticalAlign=(-k+(k/j))+"px"}return n}})});b.Register.StartupHook("NativeMML Jax Ready",function(){var h=MathJax.ElementJax.mml;var g=MathJax.Extension["TeX/noErrors"].config;var f=h.math.prototype.toNativeMML,i=h.merror.prototype.toNativeMML;h.math.Augment({toNativeMML:function(j){var k=this.data[0];if(k&&k.data[0]&&k.data[0].isError){j=k.data[0].toNativeMML(j)}else{j=f.apply(this,arguments)}return j}});h.merror.Augment({toNativeMML:function(n){if(!this.isError){return i.apply(this,arguments)}n=n.appendChild(document.createElement("span"));var o=this.data[0].data[0].data.join("").split(/\n/);for(var l=0,k=o.length;l1){n.style.verticalAlign="middle"}}for(var p in g.style){if(g.style.hasOwnProperty(p)){var j=p.replace(/-./g,function(m){return m.charAt(1).toUpperCase()});n.style[j]=g.style[p]}}return n}})});b.Register.StartupHook("PreviewHTML Jax Config",function(){b.Config({PreviewHTML:{styles:{".MathJax_PHTML .noError":b.Insert({"vertical-align":(b.Browser.isMSIE&&a.multiLine?"-2px":"")},a.style)}}})});b.Register.StartupHook("PreviewHTML Jax Ready",function(){var f=MathJax.ElementJax.mml;var h=MathJax.HTML;var g=f.merror.prototype.toPreviewHTML;f.merror.Augment({toPreviewHTML:function(l){if(!this.isError){return g.apply(this,arguments)}l=this.PHTMLcreateSpan(l);l.className="noError";if(this.multiLine){l.style.display="inline-block"}var n=this.data[0].data[0].data.join("").split(/\n/);for(var k=0,j=n.length;k1){var l=1.2*j/2;o.h=l+0.25;o.d=l-0.25;n.style.verticalAlign=g.Em(0.45-l)}else{o.h=1;o.d=0.2+2/g.em}return n}})});b.Startup.signal.Post("TeX noErrors Ready")})(MathJax.Hub,MathJax.HTML);MathJax.Ajax.loadComplete("[MathJax]/extensions/TeX/noErrors.js"); diff --git a/ext/mathjax/extensions/TeX/noUndefined.js b/ext/mathjax/extensions/TeX/noUndefined.js new file mode 100644 index 000000000..b0fb0dfe7 --- /dev/null +++ b/ext/mathjax/extensions/TeX/noUndefined.js @@ -0,0 +1,19 @@ +/* + * /MathJax/extensions/TeX/noUndefined.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.Extension["TeX/noUndefined"]={version:"2.7.5",config:MathJax.Hub.CombineConfig("TeX.noUndefined",{disabled:false,attributes:{mathcolor:"red"}})};MathJax.Hub.Register.StartupHook("TeX Jax Ready",function(){var b=MathJax.Extension["TeX/noUndefined"].config;var a=MathJax.ElementJax.mml;var c=MathJax.InputJax.TeX.Parse.prototype.csUndefined;MathJax.InputJax.TeX.Parse.Augment({csUndefined:function(d){if(b.disabled){return c.apply(this,arguments)}MathJax.Hub.signal.Post(["TeX Jax - undefined control sequence",d]);this.Push(a.mtext(d).With(b.attributes))}});MathJax.Hub.Startup.signal.Post("TeX noUndefined Ready")});MathJax.Ajax.loadComplete("[MathJax]/extensions/TeX/noUndefined.js"); diff --git a/ext/mathjax/extensions/a11y/accessibility-menu.js b/ext/mathjax/extensions/a11y/accessibility-menu.js new file mode 100644 index 000000000..2d241f977 --- /dev/null +++ b/ext/mathjax/extensions/a11y/accessibility-menu.js @@ -0,0 +1 @@ +!function(a,b){var c,d,e=a.config.menuSettings,f=Function.prototype.bind?function(a,b){return a.bind(b)}:function(a,b){return function(){a.apply(b,arguments)}},g=Object.keys||function(a){var b=[];for(var c in a)a.hasOwnProperty(c)&&b.push(c);return b},h=MathJax.Ajax.config.path;h.a11y||(h.a11y=a.config.root+"/extensions/a11y");var i=b["accessibility-menu"]={version:"1.5.0",prefix:"",defaults:{},modules:[],MakeOption:function(a){return i.prefix+a},GetOption:function(a){return e[i.MakeOption(a)]},AddDefaults:function(){for(var a,b=g(i.defaults),c=0;a=b[c];c++){var d=i.MakeOption(a);void 0===e[d]&&(e[d]=i.defaults[a])}},AddMenu:function(){for(var a,b=Array(this.modules.length),e=0;a=this.modules[e];e++)b[e]=a.placeHolder;var f=d.FindId("Accessibility");if(f)b.unshift(c.RULE()),f.submenu.items.push.apply(f.submenu.items,b);else{var g=(d.FindId("Settings","Renderer")||{}).submenu;g&&(b.unshift(c.RULE()),b.unshift(g.items.pop()),b.unshift(g.items.pop())),b.unshift("Accessibility");var f=c.SUBMENU.apply(c.SUBMENU,b),h=d.IndexOfId("Locale");h?d.items.splice(h,0,f):d.items.push(c.RULE(),f)}},Register:function(a){i.defaults[a.option]=!1,i.modules.push(a)},Startup:function(){c=MathJax.Menu.ITEM,d=MathJax.Menu.menu;for(var a,b=0;a=this.modules[b];b++)a.CreateMenu();this.AddMenu()},LoadExtensions:function(){for(var b,c=[],d=0;b=this.modules[d];d++)e[b.option]&&c.push(b.module);return c.length?a.Startup.loadArray(c):null}},j=MathJax.Extension.ModuleLoader=MathJax.Object.Subclass({option:"",name:["",""],module:"",placeHolder:null,submenu:!1,extension:null,Init:function(a,b,c,d,e){this.option=a,this.name=[b.replace(/ /g,""),b],this.module=c,this.extension=d,this.submenu=e||!1},CreateMenu:function(){var a=f(this.Load,this);this.submenu?this.placeHolder=c.SUBMENU(this.name,c.CHECKBOX(["Activate","Activate"],i.MakeOption(this.option),{action:a}),c.RULE(),c.COMMAND(["OptionsWhenActive","(Options when Active)"],null,{disabled:!0})):this.placeHolder=c.CHECKBOX(this.name,i.MakeOption(this.option),{action:a})},Load:function(){a.Queue(["Require",MathJax.Ajax,this.module,["Enable",this]])},Enable:function(a){var b=MathJax.Extension[this.extension];b&&(b.Enable(!0,!0),MathJax.Menu.saveCookie())}});i.Register(j("collapsible","Collapsible Math","[a11y]/collapsible.js","collapsible")),i.Register(j("autocollapse","Auto Collapse","[a11y]/auto-collapse.js","auto-collapse")),i.Register(j("explorer","Explorer","[a11y]/explorer.js","explorer",!0)),i.AddDefaults(),a.Register.StartupHook("End Extensions",function(){a.Register.StartupHook("MathMenu Ready",function(){i.Startup(),a.Startup.signal.Post("Accessibility Menu Ready")},5)},5),MathJax.Hub.Register.StartupHook("End Cookie",function(){MathJax.Callback.Queue(["LoadExtensions",i],["loadComplete",MathJax.Ajax,"[a11y]/accessibility-menu.js"])})}(MathJax.Hub,MathJax.Extension); \ No newline at end of file diff --git a/ext/mathjax/extensions/asciimath2jax.js b/ext/mathjax/extensions/asciimath2jax.js new file mode 100644 index 000000000..e018187c5 --- /dev/null +++ b/ext/mathjax/extensions/asciimath2jax.js @@ -0,0 +1,19 @@ +/* + * /MathJax/extensions/asciimath2jax.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.Extension.asciimath2jax={version:"2.7.5",config:{delimiters:[["`","`"]],skipTags:["script","noscript","style","textarea","pre","code","annotation","annotation-xml"],ignoreClass:"asciimath2jax_ignore",processClass:"asciimath2jax_process",preview:"AsciiMath"},ignoreTags:{br:(MathJax.Hub.Browser.isMSIE&&document.documentMode<9?"\n":" "),wbr:"","#comment":""},PreProcess:function(a){if(!this.configured){this.config=MathJax.Hub.CombineConfig("asciimath2jax",this.config);if(this.config.Augment){MathJax.Hub.Insert(this,this.config.Augment)}this.configured=true}if(typeof(a)==="string"){a=document.getElementById(a)}if(!a){a=document.body}if(this.createPatterns()){this.scanElement(a,a.nextSibling)}},createPatterns:function(){var d=[],c,a,b=this.config;this.match={};if(b.delimiters.length===0){return false}for(c=0,a=b.delimiters.length;c/i,"").replace(/<\?xml:namespace .*?\/>/i,"");b=b.replace(/ /g," ")}MathJax.HTML.setScript(a,b);d.removeChild(e)}else{var c=MathJax.HTML.Element("span");c.appendChild(e);MathJax.HTML.setScript(a,c.innerHTML)}if(this.config.preview!=="none"){this.createPreview(e,a)}},ProcessMathFlattened:function(f){var d=f.parentNode;if(!d||d.className===MathJax.Hub.config.preRemoveClass){return}var b=document.createElement("script");b.type="math/mml";d.insertBefore(b,f);var c="",e,a=f;while(f&&f.nodeName!=="/MATH"){e=f;f=f.nextSibling;c+=this.NodeHTML(e);e.parentNode.removeChild(e)}if(f&&f.nodeName==="/MATH"){f.parentNode.removeChild(f)}b.text=c+"";if(this.config.preview!=="none"){this.createPreview(a,b)}},NodeHTML:function(e){var c,b,a;if(e.nodeName==="#text"){c=this.quoteHTML(e.nodeValue)}else{if(e.nodeName==="#comment"){c=""}else{c="<"+e.nodeName.toLowerCase();for(b=0,a=e.attributes.length;b";if(e.outerHTML!=null&&e.outerHTML.match(/(.<\/[A-Z]+>|\/>)$/)){for(b=0,a=e.childNodes.length;b"}}}return c},OuterHTML:function(d){if(d.nodeName.charAt(0)==="#"){return this.NodeHTML(d)}if(!this.AttributeBug){return d.outerHTML}var c=this.NodeHTML(d);for(var b=0,a=d.childNodes.length;b";return c},quoteHTML:function(a){if(a==null){a=""}return a.replace(/&/g,"&").replace(//g,">").replace(/\"/g,""")},createPreview:function(g,f){var e=this.config.preview;if(e==="none"){return}var i=false;var c=MathJax.Hub.config.preRemoveClass;if((f.previousSibling||{}).className===c){return}if(e==="mathml"){i=true;if(this.MathTagBug){e="alttext"}else{e=g.cloneNode(true)}}if(e==="alttext"||e==="altimg"){i=true;var d=this.filterPreview(g.getAttribute("alttext"));if(e==="alttext"){if(d!=null){e=MathJax.HTML.TextNode(d)}else{e=null}}else{var a=g.getAttribute("altimg");if(a!=null){var b={width:g.getAttribute("altimg-width"),height:g.getAttribute("altimg-height")};e=MathJax.HTML.Element("img",{src:a,alt:d,style:b})}else{e=null}}}if(e){var h;if(i){h=MathJax.HTML.Element("span",{className:c});h.appendChild(e)}else{h=MathJax.HTML.Element("span",{className:c},e)}f.parentNode.insertBefore(h,f)}},filterPreview:function(a){return a},InitBrowser:function(){var b=MathJax.HTML.Element("span",{id:"<",className:"mathjax",innerHTML:"x"});var a=b.outerHTML||"";this.AttributeBug=a!==""&&!(a.match(/id="<"/)&&a.match(/class="mathjax"/)&&a.match(/<\/math>/));this.MathTagBug=b.childNodes.length>1;this.CleanupHTML=MathJax.Hub.Browser.isMSIE}};MathJax.Hub.Register.PreProcessor(["PreProcess",MathJax.Extension.mml2jax],5);MathJax.Ajax.loadComplete("[MathJax]/extensions/mml2jax.js"); diff --git a/ext/mathjax/extensions/tex2jax.js b/ext/mathjax/extensions/tex2jax.js new file mode 100644 index 000000000..15d900ae0 --- /dev/null +++ b/ext/mathjax/extensions/tex2jax.js @@ -0,0 +1,19 @@ +/* + * /MathJax/extensions/tex2jax.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.Extension.tex2jax={version:"2.7.5",config:{inlineMath:[["\\(","\\)"]],displayMath:[["$$","$$"],["\\[","\\]"]],skipTags:["script","noscript","style","textarea","pre","code","annotation","annotation-xml"],ignoreClass:"tex2jax_ignore",processClass:"tex2jax_process",processEscapes:false,processEnvironments:true,processRefs:true,preview:"TeX"},ignoreTags:{br:(MathJax.Hub.Browser.isMSIE&&document.documentMode<9?"\n":" "),wbr:"","#comment":""},PreProcess:function(a){if(!this.configured){this.config=MathJax.Hub.CombineConfig("tex2jax",this.config);if(this.config.Augment){MathJax.Hub.Insert(this,this.config.Augment)}if(typeof(this.config.previewTeX)!=="undefined"&&!this.config.previewTeX){this.config.preview="none"}this.configured=true}if(typeof(a)==="string"){a=document.getElementById(a)}if(!a){a=document.body}if(this.createPatterns()){this.scanElement(a,a.nextSibling)}},createPatterns:function(){var d=[],e=[],c,a,b=this.config;this.match={};for(c=0,a=b.inlineMath.length;c0)},patternQuote:function(a){return a.replace(/([\^$(){}+*?\-|\[\]\:\\])/g,"\\$1")},endPattern:function(a){return new RegExp(this.patternQuote(a)+"|\\\\.|[{}]","g")},sortLength:function(d,c){if(d.length!==c.length){return c.length-d.length}return(d==c?0:(d"}var k=[],j=(this.isToken?"":l+(h?"":" "));for(var g=0,d=this.data.length;g")}}}if(this.isToken||this.isChars){return l+"<"+f+e+">"+k.join("")+""}if(h){return k.join("\n")}if(k.length===0||(k.length===1&&k[0]==="")){return l+"<"+f+e+" />"}return l+"<"+f+e+">\n"+k.join("\n")+"\n"+l+""},toMathMLattributes:function(){var j=(this.type==="mstyle"?a.math.prototype.defaults:this.defaults);var h=(this.attrNames||a.copyAttributeNames),g=a.skipAttributes,l=a.copyAttributes;var e=[];if(this.type==="math"&&(!this.attr||!("xmlns" in this.attr))){e.push('xmlns="http://www.w3.org/1998/Math/MathML"')}if(!this.attrNames){for(var k in j){if(!g[k]&&!l[k]&&j.hasOwnProperty(k)){if(this[k]!=null&&this[k]!==j[k]){if(this.Get(k,null,1)!==this[k]){e.push(k+'="'+this.toMathMLattribute(this[k])+'"')}}}}}for(var f=0,d=h.length;f126||(k<32&&k!==10&&k!==13&&k!==9)){f[g]="&#x"+k.toString(16).toUpperCase()+";"}else{var j={"&":"&","<":"<",">":">",'"':"""}[f[g]];if(j){f[g]=j}}}else{if(g+11);var p=this.type,k=this.toMathMLattributes();var j=[],o=d+(g?" "+(n?" ":""):"")+" ";for(var h=0,f=this.data.length;h")}}if(j.length===0||(j.length===1&&j[0]==="")){if(!g){return"<"+p+k+" />"}j.push(o+"")}if(g){if(n){j.unshift(d+" ");j.push(d+" ")}j.unshift(d+" ");var l=e.originalText.replace(/[&<>]/g,function(i){return{">":">","<":"<","&":"&"}[i]});j.push(d+' '+l+"");j.push(d+" ")}return d+"<"+p+k+">\n"+j.join("\n")+"\n"+d+""}});a.msubsup.Augment({toMathML:function(j){var f=this.type;if(this.data[this.sup]==null){f="msub"}if(this.data[this.sub]==null){f="msup"}var e=this.toMathMLattributes();delete this.data[0].inferred;var h=[];for(var g=0,d=this.data.length;g\n"+h.join("\n")+"\n"+j+""}});a.munderover.Augment({toMathML:function(k){var f=this.type;var j=this.data[this.base];if(j&&j.isa(a.TeXAtom)&&j.movablelimits&&!j.Get("displaystyle")){type="msubsup";if(this.data[this.under]==null){f="msup"}if(this.data[this.over]==null){f="msub"}}else{if(this.data[this.under]==null){f="mover"}if(this.data[this.over]==null){f="munder"}}var e=this.toMathMLattributes();delete this.data[0].inferred;var h=[];for(var g=0,d=this.data.length;g\n"+h.join("\n")+"\n"+k+""}});a.TeXAtom.Augment({toMathML:function(e){var d=this.toMathMLattributes();if(!d&&this.data[0].data.length===1){return e.substr(2)+this.data[0].toMathML(e)}return e+"\n"+this.data[0].toMathML(e+" ")+"\n"+e+""}});a.chars.Augment({toMathML:function(d){return(d||"")+this.toMathMLquote(this.toString())}});a.entity.Augment({toMathML:function(d){return(d||"")+"&"+this.toMathMLquote(this.data[0])+";"}});a.xml.Augment({toMathML:function(d){return(d||"")+this.toString()}});MathJax.Hub.Register.StartupHook("TeX mathchoice Ready",function(){a.TeXmathchoice.Augment({toMathML:function(d){return this.Core().toMathML(d)}})});MathJax.Hub.Startup.signal.Post("toMathML Ready")});MathJax.Ajax.loadComplete("[MathJax]/extensions/toMathML.js"); diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_AMS-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_AMS-Regular.eot new file mode 100644 index 000000000..036da6058 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_AMS-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Bold.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Bold.eot new file mode 100644 index 000000000..8de2fa61c Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Bold.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Regular.eot new file mode 100644 index 000000000..87ae3b716 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Bold.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Bold.eot new file mode 100644 index 000000000..f5ceb9592 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Bold.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Regular.eot new file mode 100644 index 000000000..3b9a74247 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Main-Bold.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Main-Bold.eot new file mode 100644 index 000000000..2ab45d6da Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Main-Bold.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Main-Italic.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Main-Italic.eot new file mode 100644 index 000000000..0687c92ea Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Main-Italic.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot new file mode 100644 index 000000000..f9d0db6ce Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Math-BoldItalic.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Math-BoldItalic.eot new file mode 100644 index 000000000..ebded3ddf Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Math-BoldItalic.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot new file mode 100644 index 000000000..fa54d7d34 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Math-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Math-Regular.eot new file mode 100644 index 000000000..4c5a2023f Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Math-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Bold.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Bold.eot new file mode 100644 index 000000000..bc672c161 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Bold.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Italic.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Italic.eot new file mode 100644 index 000000000..d4fc81f19 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Italic.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Regular.eot new file mode 100644 index 000000000..da7f6cd53 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Script-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Script-Regular.eot new file mode 100644 index 000000000..c7d5e1e26 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Script-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size1-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size1-Regular.eot new file mode 100644 index 000000000..9c33fcc39 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size1-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size2-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size2-Regular.eot new file mode 100644 index 000000000..0d7977c4b Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size2-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size3-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size3-Regular.eot new file mode 100644 index 000000000..f10a6aa6b Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size3-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size4-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size4-Regular.eot new file mode 100644 index 000000000..c222bb14d Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Size4-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Typewriter-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Typewriter-Regular.eot new file mode 100644 index 000000000..4876fac74 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Typewriter-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Bold.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Bold.eot new file mode 100644 index 000000000..7c6b130ae Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Bold.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Regular.eot new file mode 100644 index 000000000..d2f68507b Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_WinIE6-Regular.eot b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_WinIE6-Regular.eot new file mode 100644 index 000000000..ada072630 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/eot/MathJax_WinIE6-Regular.eot differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_AMS-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_AMS-Regular.otf new file mode 100644 index 000000000..632be7ca9 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_AMS-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Bold.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Bold.otf new file mode 100644 index 000000000..6bb411f33 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Bold.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Regular.otf new file mode 100644 index 000000000..992c5313a Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Bold.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Bold.otf new file mode 100644 index 000000000..0975b65e1 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Bold.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Regular.otf new file mode 100644 index 000000000..d93b4ff05 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Main-Bold.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Main-Bold.otf new file mode 100644 index 000000000..03b3e7a44 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Main-Bold.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Main-Italic.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Main-Italic.otf new file mode 100644 index 000000000..50a4ce22c Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Main-Italic.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf new file mode 100644 index 000000000..5cfdff9a9 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Math-BoldItalic.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Math-BoldItalic.otf new file mode 100644 index 000000000..04611b44a Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Math-BoldItalic.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf new file mode 100644 index 000000000..10028d6fb Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Math-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Math-Regular.otf new file mode 100644 index 000000000..9d9c1684a Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Math-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Bold.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Bold.otf new file mode 100644 index 000000000..f194abc08 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Bold.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Italic.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Italic.otf new file mode 100644 index 000000000..dd95fc63e Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Italic.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Regular.otf new file mode 100644 index 000000000..1417236d6 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Script-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Script-Regular.otf new file mode 100644 index 000000000..8bb8bcf68 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Script-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size1-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size1-Regular.otf new file mode 100644 index 000000000..2a15b2a07 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size1-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size2-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size2-Regular.otf new file mode 100644 index 000000000..446f8f9a9 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size2-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size3-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size3-Regular.otf new file mode 100644 index 000000000..5c7f4b49e Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size3-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size4-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size4-Regular.otf new file mode 100644 index 000000000..6ebc51ed4 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Size4-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Typewriter-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Typewriter-Regular.otf new file mode 100644 index 000000000..ebfe6a390 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Typewriter-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Bold.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Bold.otf new file mode 100644 index 000000000..61923a282 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Bold.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Regular.otf new file mode 100644 index 000000000..c6135389a Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_WinChrome-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_WinChrome-Regular.otf new file mode 100644 index 000000000..732b2f603 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_WinChrome-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_WinIE6-Regular.otf b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_WinIE6-Regular.otf new file mode 100644 index 000000000..e66e75278 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/otf/MathJax_WinIE6-Regular.otf differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_AMS-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_AMS-Regular.svg new file mode 100644 index 000000000..9167cfdde --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_AMS-Regular.svg @@ -0,0 +1,765 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Caligraphic-Bold.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Caligraphic-Bold.svg new file mode 100644 index 000000000..edd4a15a3 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Caligraphic-Bold.svg @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Caligraphic-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Caligraphic-Regular.svg new file mode 100644 index 000000000..e54a72cb1 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Caligraphic-Regular.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Fraktur-Bold.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Fraktur-Bold.svg new file mode 100644 index 000000000..d1c469bde --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Fraktur-Bold.svg @@ -0,0 +1,319 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Fraktur-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Fraktur-Regular.svg new file mode 100644 index 000000000..1cbd94f4a --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Fraktur-Regular.svg @@ -0,0 +1,309 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Bold.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Bold.svg new file mode 100644 index 000000000..757953133 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Bold.svg @@ -0,0 +1,656 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Italic.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Italic.svg new file mode 100644 index 000000000..93849a8a4 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Italic.svg @@ -0,0 +1,374 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Regular.svg new file mode 100644 index 000000000..9c257bbb8 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Regular.svg @@ -0,0 +1,659 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Math-BoldItalic.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Math-BoldItalic.svg new file mode 100644 index 000000000..6a1053261 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Math-BoldItalic.svg @@ -0,0 +1,331 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Math-Italic.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Math-Italic.svg new file mode 100644 index 000000000..4741efdda --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Math-Italic.svg @@ -0,0 +1,331 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Math-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Math-Regular.svg new file mode 100644 index 000000000..e05eeed0b --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Math-Regular.svg @@ -0,0 +1,330 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_SansSerif-Bold.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_SansSerif-Bold.svg new file mode 100644 index 000000000..fc549dab4 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_SansSerif-Bold.svg @@ -0,0 +1,280 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_SansSerif-Italic.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_SansSerif-Italic.svg new file mode 100644 index 000000000..782aa1b3b --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_SansSerif-Italic.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_SansSerif-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_SansSerif-Regular.svg new file mode 100644 index 000000000..17cf6f160 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_SansSerif-Regular.svg @@ -0,0 +1,211 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Script-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Script-Regular.svg new file mode 100644 index 000000000..d83a7bccb --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Script-Regular.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size1-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size1-Regular.svg new file mode 100644 index 000000000..66347250a --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size1-Regular.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size2-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size2-Regular.svg new file mode 100644 index 000000000..d3148ab2e --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size2-Regular.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size3-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size3-Regular.svg new file mode 100644 index 000000000..a33e4cece --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size3-Regular.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size4-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size4-Regular.svg new file mode 100644 index 000000000..081f4a24a --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Size4-Regular.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Typewriter-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Typewriter-Regular.svg new file mode 100644 index 000000000..deb15f046 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_Typewriter-Regular.svg @@ -0,0 +1,322 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_WinChrome-Regular.svg b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_WinChrome-Regular.svg new file mode 100644 index 000000000..166905665 --- /dev/null +++ b/ext/mathjax/fonts/HTML-CSS/TeX/svg/MathJax_WinChrome-Regular.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_AMS-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_AMS-Regular.woff new file mode 100644 index 000000000..11516fbfd Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_AMS-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Bold.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Bold.woff new file mode 100644 index 000000000..cf9462dde Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Bold.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Regular.woff new file mode 100644 index 000000000..24610d731 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Bold.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Bold.woff new file mode 100644 index 000000000..fa97e3c9f Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Bold.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Regular.woff new file mode 100644 index 000000000..1f23f9b23 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Main-Bold.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Main-Bold.woff new file mode 100644 index 000000000..45ab54c84 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Main-Bold.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Main-Italic.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Main-Italic.woff new file mode 100644 index 000000000..70b4f3bd8 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Main-Italic.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff new file mode 100644 index 000000000..736c1311a Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Math-BoldItalic.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Math-BoldItalic.woff new file mode 100644 index 000000000..de090069d Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Math-BoldItalic.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff new file mode 100644 index 000000000..df9b26d40 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Math-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Math-Regular.woff new file mode 100644 index 000000000..7e3888587 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Math-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Bold.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Bold.woff new file mode 100644 index 000000000..45e322b00 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Bold.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Italic.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Italic.woff new file mode 100644 index 000000000..c023dd1de Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Italic.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Regular.woff new file mode 100644 index 000000000..033e6e441 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Script-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Script-Regular.woff new file mode 100644 index 000000000..59a22ead1 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Script-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size1-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size1-Regular.woff new file mode 100644 index 000000000..23719065d Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size1-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size2-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size2-Regular.woff new file mode 100644 index 000000000..1e48a2512 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size2-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size3-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size3-Regular.woff new file mode 100644 index 000000000..bd564c458 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size3-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size4-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size4-Regular.woff new file mode 100644 index 000000000..46be3ea68 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Size4-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Typewriter-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Typewriter-Regular.woff new file mode 100644 index 000000000..949a41f80 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Typewriter-Regular.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Bold.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Bold.woff new file mode 100644 index 000000000..ed55c4cf1 Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Bold.woff differ diff --git a/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Regular.woff b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Regular.woff new file mode 100644 index 000000000..9dcf84c4b Binary files /dev/null and b/ext/mathjax/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Regular.woff differ diff --git a/ext/mathjax/jax/element/mml/jax.js b/ext/mathjax/jax/element/mml/jax.js new file mode 100644 index 000000000..5869ef447 --- /dev/null +++ b/ext/mathjax/jax/element/mml/jax.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/element/mml/jax.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.ElementJax.mml=MathJax.ElementJax({mimeType:"jax/mml"},{id:"mml",version:"2.7.5",directory:MathJax.ElementJax.directory+"/mml",extensionDir:MathJax.ElementJax.extensionDir+"/mml",optableDir:MathJax.ElementJax.directory+"/mml/optable"});MathJax.ElementJax.mml.Augment({Init:function(){if(arguments.length===1&&arguments[0].type==="math"){this.root=arguments[0]}else{this.root=MathJax.ElementJax.mml.math.apply(this,arguments)}if(this.root.attr&&this.root.attr.mode){if(!this.root.display&&this.root.attr.mode==="display"){this.root.display="block";this.root.attrNames.push("display")}delete this.root.attr.mode;for(var b=0,a=this.root.attrNames.length;b0||this.Get("scriptlevel")>0)&&g>=0){return""}return this.TEXSPACELENGTH[Math.abs(g)]},TEXSPACELENGTH:["",a.LENGTH.THINMATHSPACE,a.LENGTH.MEDIUMMATHSPACE,a.LENGTH.THICKMATHSPACE],TEXSPACE:[[0,-1,2,3,0,0,0,1],[-1,-1,0,3,0,0,0,1],[2,2,0,0,2,0,0,2],[3,3,0,0,3,0,0,3],[0,0,0,0,0,0,0,0],[0,-1,2,3,0,0,0,1],[1,1,0,1,1,1,1,1],[1,-1,2,3,1,0,1,1]],autoDefault:function(e){return""},isSpacelike:function(){return false},isEmbellished:function(){return false},Core:function(){return this},CoreMO:function(){return this},childIndex:function(g){if(g==null){return}for(var f=0,e=this.data.length;f=55296&&e.charCodeAt(0)<56320)?a.VARIANT.ITALIC:a.VARIANT.NORMAL)}return""},setTeXclass:function(f){this.getPrevClass(f);var e=this.data.join("");if(e.length>1&&e.match(/^[a-z][a-z0-9]*$/i)&&this.texClass===a.TEXCLASS.ORD){this.texClass=a.TEXCLASS.OP;this.autoOP=true}return this}});a.mn=a.mbase.Subclass({type:"mn",isToken:true,texClass:a.TEXCLASS.ORD,defaults:{mathvariant:a.INHERIT,mathsize:a.INHERIT,mathbackground:a.INHERIT,mathcolor:a.INHERIT,dir:a.INHERIT}});a.mo=a.mbase.Subclass({type:"mo",isToken:true,defaults:{mathvariant:a.INHERIT,mathsize:a.INHERIT,mathbackground:a.INHERIT,mathcolor:a.INHERIT,dir:a.INHERIT,form:a.AUTO,fence:a.AUTO,separator:a.AUTO,lspace:a.AUTO,rspace:a.AUTO,stretchy:a.AUTO,symmetric:a.AUTO,maxsize:a.AUTO,minsize:a.AUTO,largeop:a.AUTO,movablelimits:a.AUTO,accent:a.AUTO,linebreak:a.LINEBREAK.AUTO,lineleading:a.INHERIT,linebreakstyle:a.AUTO,linebreakmultchar:a.INHERIT,indentalign:a.INHERIT,indentshift:a.INHERIT,indenttarget:a.INHERIT,indentalignfirst:a.INHERIT,indentshiftfirst:a.INHERIT,indentalignlast:a.INHERIT,indentshiftlast:a.INHERIT,texClass:a.AUTO},defaultDef:{form:a.FORM.INFIX,fence:false,separator:false,lspace:a.LENGTH.THICKMATHSPACE,rspace:a.LENGTH.THICKMATHSPACE,stretchy:false,symmetric:false,maxsize:a.SIZE.INFINITY,minsize:"0em",largeop:false,movablelimits:false,accent:false,linebreak:a.LINEBREAK.AUTO,lineleading:"1ex",linebreakstyle:"before",indentalign:a.INDENTALIGN.AUTO,indentshift:"0",indenttarget:"",indentalignfirst:a.INDENTALIGN.INDENTALIGN,indentshiftfirst:a.INDENTSHIFT.INDENTSHIFT,indentalignlast:a.INDENTALIGN.INDENTALIGN,indentshiftlast:a.INDENTSHIFT.INDENTSHIFT,texClass:a.TEXCLASS.REL},SPACE_ATTR:{lspace:1,rspace:2},useMMLspacing:3,hasMMLspacing:function(){if(this.useMMLspacing){return true}return this.form&&(this.OPTABLE[this.form]||{})[this.data.join("")]},autoDefault:function(g,n){var l=this.def;if(!l){if(g==="form"){return this.getForm()}var k=this.data.join("");var f=[this.Get("form"),a.FORM.INFIX,a.FORM.POSTFIX,a.FORM.PREFIX];for(var h=0,e=f.length;h=55296&&k<56320){k=(((k-55296)<<10)+(j.charCodeAt(1)-56320))+65536}for(var g=0,e=this.RANGES.length;g=0;e--){if(this.data[0]&&!this.data[e].isSpacelike()){return this.data[e]}}return null},Core:function(){if(!(this.isEmbellished())||typeof(this.core)==="undefined"){return this}return this.data[this.core]},CoreMO:function(){if(!(this.isEmbellished())||typeof(this.core)==="undefined"){return this}return this.data[this.core].CoreMO()},toString:function(){if(this.inferred){return"["+this.data.join(",")+"]"}return this.SUPER(arguments).toString.call(this)},setTeXclass:function(g){var f,e=this.data.length;if((this.open||this.close)&&(!g||!g.fnOP)){this.getPrevClass(g);g=null;for(f=0;f0){e++}return e},adjustChild_texprimestyle:function(e){if(e==this.den){return true}return this.Get("texprimestyle")},setTeXclass:a.mbase.setSeparateTeXclasses});a.msqrt=a.mbase.Subclass({type:"msqrt",inferRow:true,linebreakContainer:true,texClass:a.TEXCLASS.ORD,setTeXclass:a.mbase.setSeparateTeXclasses,adjustChild_texprimestyle:function(e){return true}});a.mroot=a.mbase.Subclass({type:"mroot",linebreakContainer:true,texClass:a.TEXCLASS.ORD,adjustChild_displaystyle:function(e){if(e===1){return false}return this.Get("displaystyle")},adjustChild_scriptlevel:function(f){var e=this.Get("scriptlevel");if(f===1){e+=2}return e},adjustChild_texprimestyle:function(e){if(e===0){return true}return this.Get("texprimestyle")},setTeXclass:a.mbase.setSeparateTeXclasses});a.mstyle=a.mbase.Subclass({type:"mstyle",isSpacelike:a.mbase.childrenSpacelike,isEmbellished:a.mbase.childEmbellished,Core:a.mbase.childCore,CoreMO:a.mbase.childCoreMO,inferRow:true,defaults:{scriptlevel:a.INHERIT,displaystyle:a.INHERIT,scriptsizemultiplier:Math.sqrt(1/2),scriptminsize:"8pt",mathbackground:a.INHERIT,mathcolor:a.INHERIT,dir:a.INHERIT,infixlinebreakstyle:a.LINEBREAKSTYLE.BEFORE,decimalseparator:"."},adjustChild_scriptlevel:function(g){var f=this.scriptlevel;if(f==null){f=this.Get("scriptlevel")}else{if(String(f).match(/^ *[-+]/)){var e=this.Get("scriptlevel",null,true);f=e+parseInt(f)}}return f},inheritFromMe:true,noInherit:{mpadded:{width:true,height:true,depth:true,lspace:true,voffset:true},mtable:{width:true,height:true,depth:true,align:true}},getRemoved:{fontfamily:"fontFamily",fontweight:"fontWeight",fontstyle:"fontStyle",fontsize:"fontSize"},setTeXclass:a.mbase.setChildTeXclass});a.merror=a.mbase.Subclass({type:"merror",inferRow:true,linebreakContainer:true,texClass:a.TEXCLASS.ORD});a.mpadded=a.mbase.Subclass({type:"mpadded",inferRow:true,isSpacelike:a.mbase.childrenSpacelike,isEmbellished:a.mbase.childEmbellished,Core:a.mbase.childCore,CoreMO:a.mbase.childCoreMO,defaults:{mathbackground:a.INHERIT,mathcolor:a.INHERIT,width:"",height:"",depth:"",lspace:0,voffset:0},setTeXclass:a.mbase.setChildTeXclass});a.mphantom=a.mbase.Subclass({type:"mphantom",texClass:a.TEXCLASS.ORD,inferRow:true,isSpacelike:a.mbase.childrenSpacelike,isEmbellished:a.mbase.childEmbellished,Core:a.mbase.childCore,CoreMO:a.mbase.childCoreMO,setTeXclass:a.mbase.setChildTeXclass});a.mfenced=a.mbase.Subclass({type:"mfenced",defaults:{mathbackground:a.INHERIT,mathcolor:a.INHERIT,open:"(",close:")",separators:","},addFakeNodes:function(){var f=this.getValues("open","close","separators");f.open=f.open.replace(/[ \t\n\r]/g,"");f.close=f.close.replace(/[ \t\n\r]/g,"");f.separators=f.separators.replace(/[ \t\n\r]/g,"");if(f.open!==""){this.SetData("open",a.mo(f.open).With({fence:true,form:a.FORM.PREFIX,texClass:a.TEXCLASS.OPEN}))}if(f.separators!==""){while(f.separators.length0){return false}return this.Get("displaystyle")},adjustChild_scriptlevel:function(f){var e=this.Get("scriptlevel");if(f>0){e++}return e},adjustChild_texprimestyle:function(e){if(e===this.sub){return true}return this.Get("texprimestyle")},setTeXclass:a.mbase.setBaseTeXclasses});a.msub=a.msubsup.Subclass({type:"msub"});a.msup=a.msubsup.Subclass({type:"msup",sub:2,sup:1});a.mmultiscripts=a.msubsup.Subclass({type:"mmultiscripts",adjustChild_texprimestyle:function(e){if(e%2===1){return true}return this.Get("texprimestyle")}});a.mprescripts=a.mbase.Subclass({type:"mprescripts"});a.none=a.mbase.Subclass({type:"none"});a.munderover=a.mbase.Subclass({type:"munderover",base:0,under:1,over:2,sub:1,sup:2,ACCENTS:["","accentunder","accent"],linebreakContainer:true,isEmbellished:a.mbase.childEmbellished,Core:a.mbase.childCore,CoreMO:a.mbase.childCoreMO,defaults:{mathbackground:a.INHERIT,mathcolor:a.INHERIT,accent:a.AUTO,accentunder:a.AUTO,align:a.ALIGN.CENTER,texClass:a.AUTO,subscriptshift:"",superscriptshift:""},autoDefault:function(e){if(e==="texClass"){return(this.isEmbellished()?this.CoreMO().Get(e):a.TEXCLASS.ORD)}if(e==="accent"&&this.data[this.over]){return this.data[this.over].CoreMO().Get("accent")}if(e==="accentunder"&&this.data[this.under]){return this.data[this.under].CoreMO().Get("accent")}return false},adjustChild_displaystyle:function(e){if(e>0){return false}return this.Get("displaystyle")},adjustChild_scriptlevel:function(g){var f=this.Get("scriptlevel");var e=(this.data[this.base]&&!this.Get("displaystyle")&&this.data[this.base].CoreMO().Get("movablelimits"));if(g==this.under&&(e||!this.Get("accentunder"))){f++}if(g==this.over&&(e||!this.Get("accent"))){f++}return f},adjustChild_texprimestyle:function(e){if(e===this.base&&this.data[this.over]){return true}return this.Get("texprimestyle")},setTeXclass:a.mbase.setBaseTeXclasses});a.munder=a.munderover.Subclass({type:"munder"});a.mover=a.munderover.Subclass({type:"mover",over:1,under:2,sup:1,sub:2,ACCENTS:["","accent","accentunder"]});a.mtable=a.mbase.Subclass({type:"mtable",defaults:{mathbackground:a.INHERIT,mathcolor:a.INHERIT,align:a.ALIGN.AXIS,rowalign:a.ALIGN.BASELINE,columnalign:a.ALIGN.CENTER,groupalign:"{left}",alignmentscope:true,columnwidth:a.WIDTH.AUTO,width:a.WIDTH.AUTO,rowspacing:"1ex",columnspacing:".8em",rowlines:a.LINES.NONE,columnlines:a.LINES.NONE,frame:a.LINES.NONE,framespacing:"0.4em 0.5ex",equalrows:false,equalcolumns:false,displaystyle:false,side:a.SIDE.RIGHT,minlabelspacing:"0.8em",texClass:a.TEXCLASS.ORD,useHeight:1},adjustChild_displaystyle:function(){return(this.displaystyle!=null?this.displaystyle:this.defaults.displaystyle)},inheritFromMe:true,noInherit:{mover:{align:true},munder:{align:true},munderover:{align:true},mtable:{align:true,rowalign:true,columnalign:true,groupalign:true,alignmentscope:true,columnwidth:true,width:true,rowspacing:true,columnspacing:true,rowlines:true,columnlines:true,frame:true,framespacing:true,equalrows:true,equalcolumns:true,displaystyle:true,side:true,minlabelspacing:true,texClass:true,useHeight:1}},linebreakContainer:true,Append:function(){for(var f=0,e=arguments.length;f>10)+55296)+String.fromCharCode((e&1023)+56320)}});a.xml=a.mbase.Subclass({type:"xml",Init:function(){this.div=document.createElement("div");return this.SUPER(arguments).Init.apply(this,arguments)},Append:function(){for(var f=0,e=arguments.length;f":d.REL,"?":[1,1,b.CLOSE],"\\":d.ORD,"^":d.ORD11,_:d.ORD11,"|":[2,2,b.ORD,{fence:true,stretchy:true,symmetric:true}],"#":d.ORD,"$":d.ORD,"\u002E":[0,3,b.PUNCT,{separator:true}],"\u02B9":d.ORD,"\u0300":d.ACCENT,"\u0301":d.ACCENT,"\u0303":d.WIDEACCENT,"\u0304":d.ACCENT,"\u0306":d.ACCENT,"\u0307":d.ACCENT,"\u0308":d.ACCENT,"\u030C":d.ACCENT,"\u0332":d.WIDEACCENT,"\u0338":d.REL4,"\u2015":[0,0,b.ORD,{stretchy:true}],"\u2017":[0,0,b.ORD,{stretchy:true}],"\u2020":d.BIN3,"\u2021":d.BIN3,"\u20D7":d.ACCENT,"\u2111":d.ORD,"\u2113":d.ORD,"\u2118":d.ORD,"\u211C":d.ORD,"\u2205":d.ORD,"\u221E":d.ORD,"\u2305":d.BIN3,"\u2306":d.BIN3,"\u2322":d.REL4,"\u2323":d.REL4,"\u2329":d.OPEN,"\u232A":d.CLOSE,"\u23AA":d.ORD,"\u23AF":[0,0,b.ORD,{stretchy:true}],"\u23B0":d.OPEN,"\u23B1":d.CLOSE,"\u2500":d.ORD,"\u25EF":d.BIN3,"\u2660":d.ORD,"\u2661":d.ORD,"\u2662":d.ORD,"\u2663":d.ORD,"\u3008":d.OPEN,"\u3009":d.CLOSE,"\uFE37":d.WIDEACCENT,"\uFE38":d.WIDEACCENT}}},{OPTYPES:d});var c=a.mo.prototype.OPTABLE;c.infix["^"]=d.WIDEREL;c.infix._=d.WIDEREL;c.prefix["\u2223"]=d.OPEN;c.prefix["\u2225"]=d.OPEN;c.postfix["\u2223"]=d.CLOSE;c.postfix["\u2225"]=d.CLOSE})(MathJax.ElementJax.mml);MathJax.ElementJax.mml.loadComplete("jax.js"); diff --git a/ext/mathjax/jax/element/mml/optable/GeneralPunctuation.js b/ext/mathjax/jax/element/mml/optable/GeneralPunctuation.js new file mode 100644 index 000000000..9e446ffd2 --- /dev/null +++ b/ext/mathjax/jax/element/mml/optable/GeneralPunctuation.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/element/mml/optable/GeneralPunctuation.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function(a){var c=a.mo.OPTYPES;var b=a.TEXCLASS;MathJax.Hub.Insert(a.mo.prototype,{OPTABLE:{prefix:{"\u2016":[0,0,b.ORD,{fence:true,stretchy:true}],"\u2018":[0,0,b.OPEN,{fence:true}],"\u201C":[0,0,b.OPEN,{fence:true}]},postfix:{"\u2016":[0,0,b.ORD,{fence:true,stretchy:true}],"\u2019":[0,0,b.CLOSE,{fence:true}],"\u201D":[0,0,b.CLOSE,{fence:true}]}}});MathJax.Ajax.loadComplete(a.optableDir+"/GeneralPunctuation.js")})(MathJax.ElementJax.mml); diff --git a/ext/mathjax/jax/element/mml/optable/GreekAndCoptic.js b/ext/mathjax/jax/element/mml/optable/GreekAndCoptic.js new file mode 100644 index 000000000..5b0c23623 --- /dev/null +++ b/ext/mathjax/jax/element/mml/optable/GreekAndCoptic.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/element/mml/optable/GreekAndCoptic.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function(a){var c=a.mo.OPTYPES;var b=a.TEXCLASS;MathJax.Hub.Insert(a.mo.prototype,{OPTABLE:{infix:{"\u03F6":c.REL}}});MathJax.Ajax.loadComplete(a.optableDir+"/GreekAndCoptic.js")})(MathJax.ElementJax.mml); diff --git a/ext/mathjax/jax/input/AsciiMath/config.js b/ext/mathjax/jax/input/AsciiMath/config.js new file mode 100644 index 000000000..a2297840d --- /dev/null +++ b/ext/mathjax/jax/input/AsciiMath/config.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/input/AsciiMath/config.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.InputJax.AsciiMath=MathJax.InputJax({id:"AsciiMath",version:"2.7.5",directory:MathJax.InputJax.directory+"/AsciiMath",extensionDir:MathJax.InputJax.extensionDir+"/AsciiMath",config:{fixphi:true,useMathMLspacing:true,displaystyle:true,decimalsign:"."}});MathJax.InputJax.AsciiMath.Register("math/asciimath");MathJax.InputJax.AsciiMath.loadComplete("config.js"); diff --git a/ext/mathjax/jax/input/AsciiMath/jax.js b/ext/mathjax/jax/input/AsciiMath/jax.js new file mode 100644 index 000000000..b1f4af0d5 --- /dev/null +++ b/ext/mathjax/jax/input/AsciiMath/jax.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/input/AsciiMath/jax.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function(aa){var g;var X=MathJax.Object.Subclass({firstChild:null,lastChild:null,Init:function(){this.childNodes=[]},appendChild:function(ab){if(ab.parent){ab.parent.removeChild(ab)}if(this.lastChild){this.lastChild.nextSibling=ab}if(!this.firstChild){this.firstChild=ab}this.childNodes.push(ab);ab.parent=this;this.lastChild=ab;return ab},removeChild:function(ad){for(var ac=0,ab=this.childNodes.length;ac=ab-1){this.lastChild=ae}this.childNodes[ad]=ae;ae.nextSibling=ac.nextSibling;ac.nextSibling=ac.parent=null;return ac},hasChildNodes:function(ab){return(this.childNodes.length>0)},toString:function(){return"{"+this.childNodes.join("")+"}"}});var x=function(){g=MathJax.ElementJax.mml;var ab=g.mbase.prototype.Init;g.mbase.Augment({firstChild:null,lastChild:null,nodeValue:null,nextSibling:null,Init:function(){var ac=ab.apply(this,arguments)||this;ac.childNodes=ac.data;ac.nodeName=ac.type;return ac},appendChild:function(af){if(af.parent){af.parent.removeChild(af)}var ad=arguments;if(af.isa(X)){ad=af.childNodes;af.data=af.childNodes=[];af.firstChild=af.lastChild=null}for(var ae=0,ac=ad.length;ae=ac-1){this.lastChild=af}this.SetData(ae,af);af.nextSibling=ad.nextSibling;ad.nextSibling=ad.parent=null;return ad},hasChildNodes:function(ac){return(this.childNodes.length>0)},setAttribute:function(ac,ad){this[ac]=ad}})};var Q={};var e={getElementById:true,createElementNS:function(ac,ab){var ad=g[ab]();if(ab==="mo"&&aa.config.useMathMLspacing){ad.useMMLspacing=128}return ad},createTextNode:function(ab){return g.chars(ab).With({nodeValue:ab})},createDocumentFragment:function(){return X()}};var J={appName:"MathJax"};var C="blue";var o=true;var v=true;var d=".";var f=true;var l=(J.appName.slice(0,9)=="Microsoft");function E(ab){if(l){return e.createElement(ab)}else{return e.createElementNS("http://www.w3.org/1999/xhtml",ab)}}var W="http://www.w3.org/1998/Math/MathML";function P(ab){if(l){return e.createElement("m:"+ab)}else{return e.createElementNS(W,ab)}}function O(ab,ad){var ac;if(l){ac=e.createElement("m:"+ab)}else{ac=e.createElementNS(W,ab)}if(ad){ac.appendChild(ad)}return ac}function u(ab,ac){z.push({input:ab,tag:"mo",output:ac,tex:null,ttype:V});B()}function r(ab){z.push(ab);B()}var D=["\uD835\uDC9C","\u212C","\uD835\uDC9E","\uD835\uDC9F","\u2130","\u2131","\uD835\uDCA2","\u210B","\u2110","\uD835\uDCA5","\uD835\uDCA6","\u2112","\u2133","\uD835\uDCA9","\uD835\uDCAA","\uD835\uDCAB","\uD835\uDCAC","\u211B","\uD835\uDCAE","\uD835\uDCAF","\uD835\uDCB0","\uD835\uDCB1","\uD835\uDCB2","\uD835\uDCB3","\uD835\uDCB4","\uD835\uDCB5","\uD835\uDCB6","\uD835\uDCB7","\uD835\uDCB8","\uD835\uDCB9","\u212F","\uD835\uDCBB","\u210A","\uD835\uDCBD","\uD835\uDCBE","\uD835\uDCBF","\uD835\uDCC0","\uD835\uDCC1","\uD835\uDCC2","\uD835\uDCC3","\u2134","\uD835\uDCC5","\uD835\uDCC6","\uD835\uDCC7","\uD835\uDCC8","\uD835\uDCC9","\uD835\uDCCA","\uD835\uDCCB","\uD835\uDCCC","\uD835\uDCCD","\uD835\uDCCE","\uD835\uDCCF"];var H=["\uD835\uDD04","\uD835\uDD05","\u212D","\uD835\uDD07","\uD835\uDD08","\uD835\uDD09","\uD835\uDD0A","\u210C","\u2111","\uD835\uDD0D","\uD835\uDD0E","\uD835\uDD0F","\uD835\uDD10","\uD835\uDD11","\uD835\uDD12","\uD835\uDD13","\uD835\uDD14","\u211C","\uD835\uDD16","\uD835\uDD17","\uD835\uDD18","\uD835\uDD19","\uD835\uDD1A","\uD835\uDD1B","\uD835\uDD1C","\u2128","\uD835\uDD1E","\uD835\uDD1F","\uD835\uDD20","\uD835\uDD21","\uD835\uDD22","\uD835\uDD23","\uD835\uDD24","\uD835\uDD25","\uD835\uDD26","\uD835\uDD27","\uD835\uDD28","\uD835\uDD29","\uD835\uDD2A","\uD835\uDD2B","\uD835\uDD2C","\uD835\uDD2D","\uD835\uDD2E","\uD835\uDD2F","\uD835\uDD30","\uD835\uDD31","\uD835\uDD32","\uD835\uDD33","\uD835\uDD34","\uD835\uDD35","\uD835\uDD36","\uD835\uDD37"];var w=["\uD835\uDD38","\uD835\uDD39","\u2102","\uD835\uDD3B","\uD835\uDD3C","\uD835\uDD3D","\uD835\uDD3E","\u210D","\uD835\uDD40","\uD835\uDD41","\uD835\uDD42","\uD835\uDD43","\uD835\uDD44","\u2115","\uD835\uDD46","\u2119","\u211A","\u211D","\uD835\uDD4A","\uD835\uDD4B","\uD835\uDD4C","\uD835\uDD4D","\uD835\uDD4E","\uD835\uDD4F","\uD835\uDD50","\u2124","\uD835\uDD52","\uD835\uDD53","\uD835\uDD54","\uD835\uDD55","\uD835\uDD56","\uD835\uDD57","\uD835\uDD58","\uD835\uDD59","\uD835\uDD5A","\uD835\uDD5B","\uD835\uDD5C","\uD835\uDD5D","\uD835\uDD5E","\uD835\uDD5F","\uD835\uDD60","\uD835\uDD61","\uD835\uDD62","\uD835\uDD63","\uD835\uDD64","\uD835\uDD65","\uD835\uDD66","\uD835\uDD67","\uD835\uDD68","\uD835\uDD69","\uD835\uDD6A","\uD835\uDD6B"];var c=0,A=1,U=2,i=3,b=4,h=5,a=6,L=7,V=8,m=9,Y=10,K=15;var k={input:'"',tag:"mtext",output:"mbox",tex:null,ttype:Y};var z=[{input:"alpha",tag:"mi",output:"\u03B1",tex:null,ttype:c},{input:"beta",tag:"mi",output:"\u03B2",tex:null,ttype:c},{input:"chi",tag:"mi",output:"\u03C7",tex:null,ttype:c},{input:"delta",tag:"mi",output:"\u03B4",tex:null,ttype:c},{input:"Delta",tag:"mo",output:"\u0394",tex:null,ttype:c},{input:"epsi",tag:"mi",output:"\u03B5",tex:"epsilon",ttype:c},{input:"varepsilon",tag:"mi",output:"\u025B",tex:null,ttype:c},{input:"eta",tag:"mi",output:"\u03B7",tex:null,ttype:c},{input:"gamma",tag:"mi",output:"\u03B3",tex:null,ttype:c},{input:"Gamma",tag:"mo",output:"\u0393",tex:null,ttype:c},{input:"iota",tag:"mi",output:"\u03B9",tex:null,ttype:c},{input:"kappa",tag:"mi",output:"\u03BA",tex:null,ttype:c},{input:"lambda",tag:"mi",output:"\u03BB",tex:null,ttype:c},{input:"Lambda",tag:"mo",output:"\u039B",tex:null,ttype:c},{input:"lamda",tag:"mi",output:"\u03BB",tex:null,ttype:c},{input:"Lamda",tag:"mo",output:"\u039B",tex:null,ttype:c},{input:"mu",tag:"mi",output:"\u03BC",tex:null,ttype:c},{input:"nu",tag:"mi",output:"\u03BD",tex:null,ttype:c},{input:"omega",tag:"mi",output:"\u03C9",tex:null,ttype:c},{input:"Omega",tag:"mo",output:"\u03A9",tex:null,ttype:c},{input:"phi",tag:"mi",output:f?"\u03D5":"\u03C6",tex:null,ttype:c},{input:"varphi",tag:"mi",output:f?"\u03C6":"\u03D5",tex:null,ttype:c},{input:"Phi",tag:"mo",output:"\u03A6",tex:null,ttype:c},{input:"pi",tag:"mi",output:"\u03C0",tex:null,ttype:c},{input:"Pi",tag:"mo",output:"\u03A0",tex:null,ttype:c},{input:"psi",tag:"mi",output:"\u03C8",tex:null,ttype:c},{input:"Psi",tag:"mi",output:"\u03A8",tex:null,ttype:c},{input:"rho",tag:"mi",output:"\u03C1",tex:null,ttype:c},{input:"sigma",tag:"mi",output:"\u03C3",tex:null,ttype:c},{input:"Sigma",tag:"mo",output:"\u03A3",tex:null,ttype:c},{input:"tau",tag:"mi",output:"\u03C4",tex:null,ttype:c},{input:"theta",tag:"mi",output:"\u03B8",tex:null,ttype:c},{input:"vartheta",tag:"mi",output:"\u03D1",tex:null,ttype:c},{input:"Theta",tag:"mo",output:"\u0398",tex:null,ttype:c},{input:"upsilon",tag:"mi",output:"\u03C5",tex:null,ttype:c},{input:"xi",tag:"mi",output:"\u03BE",tex:null,ttype:c},{input:"Xi",tag:"mo",output:"\u039E",tex:null,ttype:c},{input:"zeta",tag:"mi",output:"\u03B6",tex:null,ttype:c},{input:"*",tag:"mo",output:"\u22C5",tex:"cdot",ttype:c},{input:"**",tag:"mo",output:"\u2217",tex:"ast",ttype:c},{input:"***",tag:"mo",output:"\u22C6",tex:"star",ttype:c},{input:"//",tag:"mo",output:"/",tex:null,ttype:c},{input:"\\\\",tag:"mo",output:"\\",tex:"backslash",ttype:c},{input:"setminus",tag:"mo",output:"\\",tex:null,ttype:c},{input:"xx",tag:"mo",output:"\u00D7",tex:"times",ttype:c},{input:"|><",tag:"mo",output:"\u22C9",tex:"ltimes",ttype:c},{input:"><|",tag:"mo",output:"\u22CA",tex:"rtimes",ttype:c},{input:"|><|",tag:"mo",output:"\u22C8",tex:"bowtie",ttype:c},{input:"-:",tag:"mo",output:"\u00F7",tex:"div",ttype:c},{input:"divide",tag:"mo",output:"-:",tex:null,ttype:V},{input:"@",tag:"mo",output:"\u2218",tex:"circ",ttype:c},{input:"o+",tag:"mo",output:"\u2295",tex:"oplus",ttype:c},{input:"ox",tag:"mo",output:"\u2297",tex:"otimes",ttype:c},{input:"o.",tag:"mo",output:"\u2299",tex:"odot",ttype:c},{input:"sum",tag:"mo",output:"\u2211",tex:null,ttype:L},{input:"prod",tag:"mo",output:"\u220F",tex:null,ttype:L},{input:"^^",tag:"mo",output:"\u2227",tex:"wedge",ttype:c},{input:"^^^",tag:"mo",output:"\u22C0",tex:"bigwedge",ttype:L},{input:"vv",tag:"mo",output:"\u2228",tex:"vee",ttype:c},{input:"vvv",tag:"mo",output:"\u22C1",tex:"bigvee",ttype:L},{input:"nn",tag:"mo",output:"\u2229",tex:"cap",ttype:c},{input:"nnn",tag:"mo",output:"\u22C2",tex:"bigcap",ttype:L},{input:"uu",tag:"mo",output:"\u222A",tex:"cup",ttype:c},{input:"uuu",tag:"mo",output:"\u22C3",tex:"bigcup",ttype:L},{input:"!=",tag:"mo",output:"\u2260",tex:"ne",ttype:c},{input:":=",tag:"mo",output:":=",tex:null,ttype:c},{input:"lt",tag:"mo",output:"<",tex:null,ttype:c},{input:"<=",tag:"mo",output:"\u2264",tex:"le",ttype:c},{input:"lt=",tag:"mo",output:"\u2264",tex:"leq",ttype:c},{input:"gt",tag:"mo",output:">",tex:null,ttype:c},{input:">=",tag:"mo",output:"\u2265",tex:"ge",ttype:c},{input:"gt=",tag:"mo",output:"\u2265",tex:"geq",ttype:c},{input:"-<",tag:"mo",output:"\u227A",tex:"prec",ttype:c},{input:"-lt",tag:"mo",output:"\u227A",tex:null,ttype:c},{input:">-",tag:"mo",output:"\u227B",tex:"succ",ttype:c},{input:"-<=",tag:"mo",output:"\u2AAF",tex:"preceq",ttype:c},{input:">-=",tag:"mo",output:"\u2AB0",tex:"succeq",ttype:c},{input:"in",tag:"mo",output:"\u2208",tex:null,ttype:c},{input:"!in",tag:"mo",output:"\u2209",tex:"notin",ttype:c},{input:"sub",tag:"mo",output:"\u2282",tex:"subset",ttype:c},{input:"sup",tag:"mo",output:"\u2283",tex:"supset",ttype:c},{input:"sube",tag:"mo",output:"\u2286",tex:"subseteq",ttype:c},{input:"supe",tag:"mo",output:"\u2287",tex:"supseteq",ttype:c},{input:"-=",tag:"mo",output:"\u2261",tex:"equiv",ttype:c},{input:"~=",tag:"mo",output:"\u2245",tex:"cong",ttype:c},{input:"~~",tag:"mo",output:"\u2248",tex:"approx",ttype:c},{input:"prop",tag:"mo",output:"\u221D",tex:"propto",ttype:c},{input:"and",tag:"mtext",output:"and",tex:null,ttype:a},{input:"or",tag:"mtext",output:"or",tex:null,ttype:a},{input:"not",tag:"mo",output:"\u00AC",tex:"neg",ttype:c},{input:"=>",tag:"mo",output:"\u21D2",tex:"implies",ttype:c},{input:"if",tag:"mo",output:"if",tex:null,ttype:a},{input:"<=>",tag:"mo",output:"\u21D4",tex:"iff",ttype:c},{input:"AA",tag:"mo",output:"\u2200",tex:"forall",ttype:c},{input:"EE",tag:"mo",output:"\u2203",tex:"exists",ttype:c},{input:"_|_",tag:"mo",output:"\u22A5",tex:"bot",ttype:c},{input:"TT",tag:"mo",output:"\u22A4",tex:"top",ttype:c},{input:"|--",tag:"mo",output:"\u22A2",tex:"vdash",ttype:c},{input:"|==",tag:"mo",output:"\u22A8",tex:"models",ttype:c},{input:"(",tag:"mo",output:"(",tex:"left(",ttype:b},{input:")",tag:"mo",output:")",tex:"right)",ttype:h},{input:"[",tag:"mo",output:"[",tex:"left[",ttype:b},{input:"]",tag:"mo",output:"]",tex:"right]",ttype:h},{input:"{",tag:"mo",output:"{",tex:null,ttype:b},{input:"}",tag:"mo",output:"}",tex:null,ttype:h},{input:"|",tag:"mo",output:"|",tex:null,ttype:m},{input:":|:",tag:"mo",output:"|",tex:null,ttype:c},{input:"|:",tag:"mo",output:"|",tex:null,ttype:b},{input:":|",tag:"mo",output:"|",tex:null,ttype:h},{input:"(:",tag:"mo",output:"\u2329",tex:"langle",ttype:b},{input:":)",tag:"mo",output:"\u232A",tex:"rangle",ttype:h},{input:"<<",tag:"mo",output:"\u2329",tex:null,ttype:b},{input:">>",tag:"mo",output:"\u232A",tex:null,ttype:h},{input:"{:",tag:"mo",output:"{:",tex:null,ttype:b,invisible:true},{input:":}",tag:"mo",output:":}",tex:null,ttype:h,invisible:true},{input:"int",tag:"mo",output:"\u222B",tex:null,ttype:c},{input:"dx",tag:"mi",output:"{:d x:}",tex:null,ttype:V},{input:"dy",tag:"mi",output:"{:d y:}",tex:null,ttype:V},{input:"dz",tag:"mi",output:"{:d z:}",tex:null,ttype:V},{input:"dt",tag:"mi",output:"{:d t:}",tex:null,ttype:V},{input:"oint",tag:"mo",output:"\u222E",tex:null,ttype:c},{input:"del",tag:"mo",output:"\u2202",tex:"partial",ttype:c},{input:"grad",tag:"mo",output:"\u2207",tex:"nabla",ttype:c},{input:"+-",tag:"mo",output:"\u00B1",tex:"pm",ttype:c},{input:"O/",tag:"mo",output:"\u2205",tex:"emptyset",ttype:c},{input:"oo",tag:"mo",output:"\u221E",tex:"infty",ttype:c},{input:"aleph",tag:"mo",output:"\u2135",tex:null,ttype:c},{input:"...",tag:"mo",output:"...",tex:"ldots",ttype:c},{input:":.",tag:"mo",output:"\u2234",tex:"therefore",ttype:c},{input:":'",tag:"mo",output:"\u2235",tex:"because",ttype:c},{input:"/_",tag:"mo",output:"\u2220",tex:"angle",ttype:c},{input:"/_\\",tag:"mo",output:"\u25B3",tex:"triangle",ttype:c},{input:"'",tag:"mo",output:"\u2032",tex:"prime",ttype:c},{input:"tilde",tag:"mover",output:"~",tex:null,ttype:A,acc:true},{input:"\\ ",tag:"mo",output:"\u00A0",tex:null,ttype:c},{input:"frown",tag:"mo",output:"\u2322",tex:null,ttype:c},{input:"quad",tag:"mo",output:"\u00A0\u00A0",tex:null,ttype:c},{input:"qquad",tag:"mo",output:"\u00A0\u00A0\u00A0\u00A0",tex:null,ttype:c},{input:"cdots",tag:"mo",output:"\u22EF",tex:null,ttype:c},{input:"vdots",tag:"mo",output:"\u22EE",tex:null,ttype:c},{input:"ddots",tag:"mo",output:"\u22F1",tex:null,ttype:c},{input:"diamond",tag:"mo",output:"\u22C4",tex:null,ttype:c},{input:"square",tag:"mo",output:"\u25A1",tex:null,ttype:c},{input:"|__",tag:"mo",output:"\u230A",tex:"lfloor",ttype:c},{input:"__|",tag:"mo",output:"\u230B",tex:"rfloor",ttype:c},{input:"|~",tag:"mo",output:"\u2308",tex:"lceiling",ttype:c},{input:"~|",tag:"mo",output:"\u2309",tex:"rceiling",ttype:c},{input:"CC",tag:"mo",output:"\u2102",tex:null,ttype:c},{input:"NN",tag:"mo",output:"\u2115",tex:null,ttype:c},{input:"QQ",tag:"mo",output:"\u211A",tex:null,ttype:c},{input:"RR",tag:"mo",output:"\u211D",tex:null,ttype:c},{input:"ZZ",tag:"mo",output:"\u2124",tex:null,ttype:c},{input:"f",tag:"mi",output:"f",tex:null,ttype:A,func:true},{input:"g",tag:"mi",output:"g",tex:null,ttype:A,func:true},{input:"lim",tag:"mo",output:"lim",tex:null,ttype:L},{input:"Lim",tag:"mo",output:"Lim",tex:null,ttype:L},{input:"sin",tag:"mo",output:"sin",tex:null,ttype:A,func:true},{input:"cos",tag:"mo",output:"cos",tex:null,ttype:A,func:true},{input:"tan",tag:"mo",output:"tan",tex:null,ttype:A,func:true},{input:"sinh",tag:"mo",output:"sinh",tex:null,ttype:A,func:true},{input:"cosh",tag:"mo",output:"cosh",tex:null,ttype:A,func:true},{input:"tanh",tag:"mo",output:"tanh",tex:null,ttype:A,func:true},{input:"cot",tag:"mo",output:"cot",tex:null,ttype:A,func:true},{input:"sec",tag:"mo",output:"sec",tex:null,ttype:A,func:true},{input:"csc",tag:"mo",output:"csc",tex:null,ttype:A,func:true},{input:"arcsin",tag:"mo",output:"arcsin",tex:null,ttype:A,func:true},{input:"arccos",tag:"mo",output:"arccos",tex:null,ttype:A,func:true},{input:"arctan",tag:"mo",output:"arctan",tex:null,ttype:A,func:true},{input:"coth",tag:"mo",output:"coth",tex:null,ttype:A,func:true},{input:"sech",tag:"mo",output:"sech",tex:null,ttype:A,func:true},{input:"csch",tag:"mo",output:"csch",tex:null,ttype:A,func:true},{input:"exp",tag:"mo",output:"exp",tex:null,ttype:A,func:true},{input:"abs",tag:"mo",output:"abs",tex:null,ttype:A,rewriteleftright:["|","|"]},{input:"norm",tag:"mo",output:"norm",tex:null,ttype:A,rewriteleftright:["\u2225","\u2225"]},{input:"floor",tag:"mo",output:"floor",tex:null,ttype:A,rewriteleftright:["\u230A","\u230B"]},{input:"ceil",tag:"mo",output:"ceil",tex:null,ttype:A,rewriteleftright:["\u2308","\u2309"]},{input:"log",tag:"mo",output:"log",tex:null,ttype:A,func:true},{input:"ln",tag:"mo",output:"ln",tex:null,ttype:A,func:true},{input:"det",tag:"mo",output:"det",tex:null,ttype:A,func:true},{input:"dim",tag:"mo",output:"dim",tex:null,ttype:c},{input:"mod",tag:"mo",output:"mod",tex:null,ttype:c},{input:"gcd",tag:"mo",output:"gcd",tex:null,ttype:A,func:true},{input:"lcm",tag:"mo",output:"lcm",tex:null,ttype:A,func:true},{input:"lub",tag:"mo",output:"lub",tex:null,ttype:c},{input:"glb",tag:"mo",output:"glb",tex:null,ttype:c},{input:"min",tag:"mo",output:"min",tex:null,ttype:L},{input:"max",tag:"mo",output:"max",tex:null,ttype:L},{input:"Sin",tag:"mo",output:"Sin",tex:null,ttype:A,func:true},{input:"Cos",tag:"mo",output:"Cos",tex:null,ttype:A,func:true},{input:"Tan",tag:"mo",output:"Tan",tex:null,ttype:A,func:true},{input:"Arcsin",tag:"mo",output:"Arcsin",tex:null,ttype:A,func:true},{input:"Arccos",tag:"mo",output:"Arccos",tex:null,ttype:A,func:true},{input:"Arctan",tag:"mo",output:"Arctan",tex:null,ttype:A,func:true},{input:"Sinh",tag:"mo",output:"Sinh",tex:null,ttype:A,func:true},{input:"Cosh",tag:"mo",output:"Cosh",tex:null,ttype:A,func:true},{input:"Tanh",tag:"mo",output:"Tanh",tex:null,ttype:A,func:true},{input:"Cot",tag:"mo",output:"Cot",tex:null,ttype:A,func:true},{input:"Sec",tag:"mo",output:"Sec",tex:null,ttype:A,func:true},{input:"Csc",tag:"mo",output:"Csc",tex:null,ttype:A,func:true},{input:"Log",tag:"mo",output:"Log",tex:null,ttype:A,func:true},{input:"Ln",tag:"mo",output:"Ln",tex:null,ttype:A,func:true},{input:"Abs",tag:"mo",output:"abs",tex:null,ttype:A,notexcopy:true,rewriteleftright:["|","|"]},{input:"uarr",tag:"mo",output:"\u2191",tex:"uparrow",ttype:c},{input:"darr",tag:"mo",output:"\u2193",tex:"downarrow",ttype:c},{input:"rarr",tag:"mo",output:"\u2192",tex:"rightarrow",ttype:c},{input:"->",tag:"mo",output:"\u2192",tex:"to",ttype:c},{input:">->",tag:"mo",output:"\u21A3",tex:"rightarrowtail",ttype:c},{input:"->>",tag:"mo",output:"\u21A0",tex:"twoheadrightarrow",ttype:c},{input:">->>",tag:"mo",output:"\u2916",tex:"twoheadrightarrowtail",ttype:c},{input:"|->",tag:"mo",output:"\u21A6",tex:"mapsto",ttype:c},{input:"larr",tag:"mo",output:"\u2190",tex:"leftarrow",ttype:c},{input:"harr",tag:"mo",output:"\u2194",tex:"leftrightarrow",ttype:c},{input:"rArr",tag:"mo",output:"\u21D2",tex:"Rightarrow",ttype:c},{input:"lArr",tag:"mo",output:"\u21D0",tex:"Leftarrow",ttype:c},{input:"hArr",tag:"mo",output:"\u21D4",tex:"Leftrightarrow",ttype:c},{input:"sqrt",tag:"msqrt",output:"sqrt",tex:null,ttype:A},{input:"root",tag:"mroot",output:"root",tex:null,ttype:U},{input:"frac",tag:"mfrac",output:"/",tex:null,ttype:U},{input:"/",tag:"mfrac",output:"/",tex:null,ttype:i},{input:"stackrel",tag:"mover",output:"stackrel",tex:null,ttype:U},{input:"overset",tag:"mover",output:"stackrel",tex:null,ttype:U},{input:"underset",tag:"munder",output:"stackrel",tex:null,ttype:U},{input:"_",tag:"msub",output:"_",tex:null,ttype:i},{input:"^",tag:"msup",output:"^",tex:null,ttype:i},{input:"hat",tag:"mover",output:"\u005E",tex:null,ttype:A,acc:true},{input:"bar",tag:"mover",output:"\u00AF",tex:"overline",ttype:A,acc:true},{input:"vec",tag:"mover",output:"\u2192",tex:null,ttype:A,acc:true},{input:"dot",tag:"mover",output:".",tex:null,ttype:A,acc:true},{input:"ddot",tag:"mover",output:"..",tex:null,ttype:A,acc:true},{input:"overarc",tag:"mover",output:"\u23DC",tex:"overparen",ttype:A,acc:true},{input:"ul",tag:"munder",output:"\u0332",tex:"underline",ttype:A,acc:true},{input:"ubrace",tag:"munder",output:"\u23DF",tex:"underbrace",ttype:K,acc:true},{input:"obrace",tag:"mover",output:"\u23DE",tex:"overbrace",ttype:K,acc:true},{input:"text",tag:"mtext",output:"text",tex:null,ttype:Y},{input:"mbox",tag:"mtext",output:"mbox",tex:null,ttype:Y},{input:"color",tag:"mstyle",ttype:U},{input:"id",tag:"mrow",ttype:U},{input:"class",tag:"mrow",ttype:U},{input:"cancel",tag:"menclose",output:"cancel",tex:null,ttype:A},k,{input:"bb",tag:"mstyle",atname:"mathvariant",atval:"bold",output:"bb",tex:null,ttype:A},{input:"mathbf",tag:"mstyle",atname:"mathvariant",atval:"bold",output:"mathbf",tex:null,ttype:A},{input:"sf",tag:"mstyle",atname:"mathvariant",atval:"sans-serif",output:"sf",tex:null,ttype:A},{input:"mathsf",tag:"mstyle",atname:"mathvariant",atval:"sans-serif",output:"mathsf",tex:null,ttype:A},{input:"bbb",tag:"mstyle",atname:"mathvariant",atval:"double-struck",output:"bbb",tex:null,ttype:A,codes:w},{input:"mathbb",tag:"mstyle",atname:"mathvariant",atval:"double-struck",output:"mathbb",tex:null,ttype:A,codes:w},{input:"cc",tag:"mstyle",atname:"mathvariant",atval:"script",output:"cc",tex:null,ttype:A,codes:D},{input:"mathcal",tag:"mstyle",atname:"mathvariant",atval:"script",output:"mathcal",tex:null,ttype:A,codes:D},{input:"tt",tag:"mstyle",atname:"mathvariant",atval:"monospace",output:"tt",tex:null,ttype:A},{input:"mathtt",tag:"mstyle",atname:"mathvariant",atval:"monospace",output:"mathtt",tex:null,ttype:A},{input:"fr",tag:"mstyle",atname:"mathvariant",atval:"fraktur",output:"fr",tex:null,ttype:A,codes:H},{input:"mathfrak",tag:"mstyle",atname:"mathvariant",atval:"fraktur",output:"mathfrak",tex:null,ttype:A,codes:H}];function T(ac,ab){if(ac.input>ab.input){return 1}else{return -1}}var S=[];function n(){var ac;var ab=z.length;for(ac=0;ac>1;if(ac[ab]=S[ab]}s=y;if(af!=""){y=z[ae].ttype;return z[ae]}y=c;ab=1;ak=ah.slice(0,1);var ai=true;while("0"<=ak&&ak<="9"&&ab<=ah.length){ak=ah.slice(ab,ab+1);ab++}if(ak==d){ak=ah.slice(ab,ab+1);if("0"<=ak&&ak<="9"){ai=false;ab++;while("0"<=ak&&ak<="9"&&ab<=ah.length){ak=ah.slice(ab,ab+1);ab++}}}if((ai&&ab>1)||ab>2){ak=ah.slice(0,ab-1);aj="mn"}else{ab=2;ak=ah.slice(0,1);aj=(("A">ak||ak>"Z")&&("a">ak||ak>"z")?"mo":"mi")}if(ak=="-"&&s==i){y=i;return{input:ak,tag:aj,output:ak,ttype:A,func:true}}return{input:ak,tag:aj,output:ak,ttype:c}}function R(ac){var ab;if(!ac.hasChildNodes()){return}if(ac.firstChild.hasChildNodes()&&(ac.nodeName=="mrow"||ac.nodeName=="M:MROW")){ab=ac.firstChild.firstChild.nodeValue;if(ab=="("||ab=="["||ab=="{"){ac.removeChild(ac.firstChild)}}if(ac.lastChild.hasChildNodes()&&(ac.nodeName=="mrow"||ac.nodeName=="M:MROW")){ab=ac.lastChild.firstChild.nodeValue;if(ab==")"||ab=="]"||ab=="}"){ac.removeChild(ac.lastChild)}}}var F,s,y;function G(ai){var ad,ac,al,af,ak,ag=e.createDocumentFragment();ai=p(ai,0);ad=j(ai);if(ad==null||ad.ttype==h&&F>0){return[null,ai]}if(ad.ttype==V){ai=ad.output+p(ai,ad.input.length);ad=j(ai)}switch(ad.ttype){case L:case c:ai=p(ai,ad.input.length);return[O(ad.tag,e.createTextNode(ad.output)),ai];case b:F++;ai=p(ai,ad.input.length);al=q(ai,true);F--;if(typeof ad.invisible=="boolean"&&ad.invisible){ac=O("mrow",al[0])}else{ac=O("mo",e.createTextNode(ad.output));ac=O("mrow",ac);ac.appendChild(al[0])}return[ac,al[1]];case Y:if(ad!=k){ai=p(ai,ad.input.length)}if(ai.charAt(0)=="{"){af=ai.indexOf("}")}else{if(ai.charAt(0)=="("){af=ai.indexOf(")")}else{if(ai.charAt(0)=="["){af=ai.indexOf("]")}else{if(ad==k){af=ai.slice(1).indexOf('"')+1}else{af=0}}}}if(af==-1){af=ai.length}ak=ai.slice(1,af);if(ak.charAt(0)==" "){ac=O("mspace");ac.setAttribute("width","1ex");ag.appendChild(ac)}ag.appendChild(O(ad.tag,e.createTextNode(ak)));if(ak.charAt(ak.length-1)==" "){ac=O("mspace");ac.setAttribute("width","1ex");ag.appendChild(ac)}ai=p(ai,af+1);return[O("mrow",ag),ai];case K:case A:ai=p(ai,ad.input.length);al=G(ai);if(al[0]==null){return[O(ad.tag,e.createTextNode(ad.output)),ai]}if(typeof ad.func=="boolean"&&ad.func){ak=ai.charAt(0);if(ak=="^"||ak=="_"||ak=="/"||ak=="|"||ak==","||(ad.input.length==1&&ad.input.match(/\w/)&&ak!="(")){return[O(ad.tag,e.createTextNode(ad.output)),ai]}else{ac=O("mrow",O(ad.tag,e.createTextNode(ad.output)));ac.appendChild(al[0]);return[ac,al[1]]}}R(al[0]);if(ad.input=="sqrt"){return[O(ad.tag,al[0]),al[1]]}else{if(typeof ad.rewriteleftright!="undefined"){ac=O("mrow",O("mo",e.createTextNode(ad.rewriteleftright[0])));ac.appendChild(al[0]);ac.appendChild(O("mo",e.createTextNode(ad.rewriteleftright[1])));return[ac,al[1]]}else{if(ad.input=="cancel"){ac=O(ad.tag,al[0]);ac.setAttribute("notation","updiagonalstrike");return[ac,al[1]]}else{if(typeof ad.acc=="boolean"&&ad.acc){ac=O(ad.tag,al[0]);var ah=O("mo",e.createTextNode(ad.output));if(ad.input=="vec"&&((al[0].nodeName=="mrow"&&al[0].childNodes.length==1&&al[0].firstChild.firstChild.nodeValue!==null&&al[0].firstChild.firstChild.nodeValue.length==1)||(al[0].firstChild.nodeValue!==null&&al[0].firstChild.nodeValue.length==1))){ah.setAttribute("stretchy",false)}ac.appendChild(ah);return[ac,al[1]]}else{if(!l&&typeof ad.codes!="undefined"){for(af=0;af64&&ak.charCodeAt(ae)<91){aj=aj+ad.codes[ak.charCodeAt(ae)-65]}else{if(ak.charCodeAt(ae)>96&&ak.charCodeAt(ae)<123){aj=aj+ad.codes[ak.charCodeAt(ae)-71]}else{aj=aj+ak.charAt(ae)}}}if(al[0].nodeName=="mi"){al[0]=O("mo").appendChild(e.createTextNode(aj))}else{al[0].replaceChild(O("mo").appendChild(e.createTextNode(aj)),al[0].childNodes[af])}}}}ac=O(ad.tag,al[0]);ac.setAttribute(ad.atname,ad.atval);return[ac,al[1]]}}}}case U:ai=p(ai,ad.input.length);al=G(ai);if(al[0]==null){return[O("mo",e.createTextNode(ad.input)),ai]}R(al[0]);var ab=G(al[1]);if(ab[0]==null){return[O("mo",e.createTextNode(ad.input)),ai]}R(ab[0]);if(["color","class","id"].indexOf(ad.input)>=0){if(ai.charAt(0)=="{"){af=ai.indexOf("}")}else{if(ai.charAt(0)=="("){af=ai.indexOf(")")}else{if(ai.charAt(0)=="["){af=ai.indexOf("]")}}}ak=ai.slice(1,af);ac=O(ad.tag,ab[0]);if(ad.input==="color"){ac.setAttribute("mathcolor",ak)}else{if(ad.input==="class"){ac.setAttribute("class",ak)}else{if(ad.input==="id"){ac.setAttribute("id",ak)}}}return[ac,ab[1]]}if(ad.input=="root"||ad.output=="stackrel"){ag.appendChild(ab[0])}ag.appendChild(al[0]);if(ad.input=="frac"){ag.appendChild(ab[0])}return[O(ad.tag,ag),ab[1]];case i:ai=p(ai,ad.input.length);return[O("mo",e.createTextNode(ad.output)),ai];case a:ai=p(ai,ad.input.length);ac=O("mspace");ac.setAttribute("width","1ex");ag.appendChild(ac);ag.appendChild(O(ad.tag,e.createTextNode(ad.output)));ac=O("mspace");ac.setAttribute("width","1ex");ag.appendChild(ac);return[O("mrow",ag),ai];case m:F++;ai=p(ai,ad.input.length);al=q(ai,false);F--;ak="";if(al[0].lastChild!=null){ak=al[0].lastChild.firstChild.nodeValue}if(ak=="|"&&ai.charAt(0)!==","){ac=O("mo",e.createTextNode(ad.output));ac=O("mrow",ac);ac.appendChild(al[0]);return[ac,al[1]]}else{ac=O("mo",e.createTextNode("\u2223"));ac=O("mrow",ac);return[ac,ai]}default:ai=p(ai,ad.input.length);return[O(ad.tag,e.createTextNode(ad.output)),ai]}}function t(ah){var af,ai,ag,ae,ab,ad;ah=p(ah,0);ai=j(ah);ab=G(ah);ae=ab[0];ah=ab[1];af=j(ah);if(af.ttype==i&&af.input!="/"){ah=p(ah,af.input.length);ab=G(ah);if(ab[0]==null){ab[0]=O("mo",e.createTextNode("\u25A1"))}else{R(ab[0])}ah=ab[1];ad=(ai.ttype==L||ai.ttype==K);if(af.input=="_"){ag=j(ah);if(ag.input=="^"){ah=p(ah,ag.input.length);var ac=G(ah);R(ac[0]);ah=ac[1];ae=O((ad?"munderover":"msubsup"),ae);ae.appendChild(ab[0]);ae.appendChild(ac[0]);ae=O("mrow",ae)}else{ae=O((ad?"munder":"msub"),ae);ae.appendChild(ab[0])}}else{if(af.input=="^"&&ad){ae=O("mover",ae);ae.appendChild(ab[0])}else{ae=O(af.tag,ae);ae.appendChild(ab[0])}}if(typeof ai.func!="undefined"&&ai.func){ag=j(ah);if(ag.ttype!=i&&ag.ttype!=h){ab=t(ah);ae=O("mrow",ae);ae.appendChild(ab[0]);ah=ab[1]}}}return[ae,ah]}function q(ak,aj){var ao,al,ag,ar,ah=e.createDocumentFragment();do{ak=p(ak,0);ag=t(ak);al=ag[0];ak=ag[1];ao=j(ak);if(ao.ttype==i&&ao.input=="/"){ak=p(ak,ao.input.length);ag=t(ak);if(ag[0]==null){ag[0]=O("mo",e.createTextNode("\u25A1"))}else{R(ag[0])}ak=ag[1];R(al);al=O(ao.tag,al);al.appendChild(ag[0]);ah.appendChild(al);ao=j(ak)}else{if(al!=undefined){ah.appendChild(al)}}}while((ao.ttype!=h&&(ao.ttype!=m||aj)||F==0)&&ao!=null&&ao.output!="");if(ao.ttype==h||ao.ttype==m){var at=ah.childNodes.length;if(at>0&&ah.childNodes[at-1].nodeName=="mrow"&&ah.childNodes[at-1].lastChild&&ah.childNodes[at-1].lastChild.firstChild){var av=ah.childNodes[at-1].lastChild.firstChild.nodeValue;if(av==")"||av=="]"){var ac=ah.childNodes[at-1].firstChild.firstChild.nodeValue;if(ac=="("&&av==")"&&ao.output!="}"||ac=="["&&av=="]"){var ad=[];var ap=true;var am=ah.childNodes.length;for(ar=0;ap&&ar1){ap=ad[ar].length==ad[ar-2].length}}ap=ap&&(ad.length>1||ad[0].length>0);var af=[];if(ap){var ae,ab,ai,an,au=e.createDocumentFragment();for(ar=0;ar2){ah.removeChild(ah.firstChild);ah.removeChild(ah.firstChild)}au.appendChild(O("mtr",ae))}al=O("mtable",au);al.setAttribute("columnlines",af.join(" "));if(typeof ao.invisible=="boolean"&&ao.invisible){al.setAttribute("columnalign","left")}ah.replaceChild(al,ah.firstChild)}}}}ak=p(ak,ao.input.length);if(typeof ao.invisible!="boolean"||!ao.invisible){al=O("mo",e.createTextNode(ao.output));ah.appendChild(al)}}return[ah,ak]}function M(ad,ac){var ae,ab;F=0;ad=ad.replace(/ /g,"");ad=ad.replace(/>/g,">");ad=ad.replace(/</g,"<");ae=q(ad.replace(/^\s+/g,""),false)[0];ab=O("mstyle",ae);if(C!=""){ab.setAttribute("mathcolor",C)}if(mathfontsize!=""){ab.setAttribute("fontsize",mathfontsize);ab.setAttribute("mathsize",mathfontsize)}if(mathfontfamily!=""){ab.setAttribute("fontfamily",mathfontfamily);ab.setAttribute("mathvariant",mathfontfamily)}if(o){ab.setAttribute("displaystyle","true")}ab=O("math",ab);if(v){ab.setAttribute("title",ad.replace(/\s+/g," "))}return ab}v=false;mathfontfamily="";C="";mathfontsize="";(function(){for(var ac=0,ab=z.length;ac element, not %1","<"+j.firstChild.nodeName+">"])}var i={math:j.firstChild,script:e};c.DOMfilterHooks.Execute(i);this.mml=this.MakeMML(i.math)},MakeMML:function(h){var i=String(h.getAttribute("class")||"");var f,g=h.nodeName.toLowerCase().replace(/^[a-z]+:/,"");var e=(i.match(/(^| )MJX-TeXAtom-([^ ]*)/));if(e){f=this.TeXAtom(e[2],e[2]==="OP"&&!i.match(/MJX-fixedlimits/))}else{if(!(a[g]&&a[g].isa&&a[g].isa(a.mbase))){MathJax.Hub.signal.Post(["MathML Jax - unknown node type",g]);return a.Error(b("UnknownNodeType","Unknown node type: %1",g))}else{f=a[g]()}}this.AddAttributes(f,h);this.CheckClass(f,f["class"]);this.AddChildren(f,h);if(c.config.useMathMLspacing){f.useMMLspacing=8}return f},TeXAtom:function(g,f){var e=a.TeXAtom().With({texClass:a.TEXCLASS[g]});if(f){e.movesupsub=e.movablelimits=true}return e},CheckClass:function(f,h){h=(h||"").split(/ /);var j=[];for(var g=0,e=h.length;g=2){var l=e.data[0],n=e.data[e.data.length-1];if(l.type==="mo"&&l.Get("fence")&&n.type==="mo"&&n.Get("fence")){if(l.data[0]){e.open=l.data.join("")}if(n.data[0]){e.close=n.data.join("")}}}},preProcessMath:function(f){if(f.match(/^<[a-z]+:/i)&&!f.match(/^<[^<>]* xmlns:/)){f=f.replace(/^<([a-z]+)(:math)/i,'<$1$2 xmlns:$1="http://www.w3.org/1998/Math/MathML"')}var e=f.match(/^(])+)>)/i);if(e&&e[2].match(/ (?!xmlns=)[a-z]+=\"http:/i)){f=e[1].replace(/ (?!xmlns=)([a-z]+=(['"])http:.*?\2)/ig," xmlns:$1 $1")+f.substr(e[0].length)}if(f.match(/^]/i)&&!f.match(/^<[^<>]* xmlns=/)){f=f.replace(/^<(math)/i,'\s*$/,"$2");return f.replace(/&([a-z][a-z0-9]*);/ig,this.replaceEntity)},trimSpace:function(e){return e.replace(/[\t\n\r]/g," ").replace(/^ +/,"").replace(/ +$/,"").replace(/ +/g," ")},replaceEntity:function(g,f){if(f.match(/^(lt|amp|quot)$/)){return g}if(c.Parse.Entity[f]){return c.Parse.Entity[f]}var h=f.charAt(0).toLowerCase();var e=f.match(/^[a-zA-Z](fr|scr|opf)$/);if(e){h=e[1]}if(!c.Parse.loaded[h]){c.Parse.loaded[h]=true;MathJax.Hub.RestartAfter(MathJax.Ajax.Require(c.entityDir+"/"+h+".js"))}return g}},{loaded:[]});c.Augment({sourceMenuTitle:["OriginalMathML","Original MathML"],prefilterHooks:MathJax.Callback.Hooks(true),DOMfilterHooks:MathJax.Callback.Hooks(true),postfilterHooks:MathJax.Callback.Hooks(true),Translate:function(e){if(!this.ParseXML){this.ParseXML=this.createParser()}var f,h,i={script:e};if(e.firstChild&&e.firstChild.nodeName.toLowerCase().replace(/^[a-z]+:/,"")==="math"){i.math=e.firstChild}else{h=MathJax.HTML.getScript(e);if(d.isMSIE){h=h.replace(/( )+$/,"")}i.math=h}var j=this.prefilterHooks.Execute(i);if(j){return j}h=i.math;try{f=c.Parse(h,e).mml}catch(g){if(!g.mathmlError){throw g}f=this.formatError(g,h,e)}i.math=a(f);return this.postfilterHooks.Execute(i)||i.math},prefilterMath:function(f,e){return f},prefilterMathML:function(f,e){return f},formatError:function(h,g,e){var f=h.message.replace(/\n.*/,"");MathJax.Hub.signal.Post(["MathML Jax - parse error",f,g,e]);return a.Error(f)},Error:function(e){if(MathJax.Object.isArray(e)){e=b.apply(b,e)}throw MathJax.Hub.Insert(Error(e),{mathmlError:true})},parseDOM:function(e){return this.parser.parseFromString(e,"text/xml")},parseMS:function(e){return(this.parser.loadXML(e)?this.parser:null)},parseDIV:function(e){this.div.innerHTML="
"+e.replace(/<([a-z]+)([^>]*)\/>/g,"<$1$2>")+"
";var f=this.div.firstChild;this.div.innerHTML="";return f},parseError:function(e){return null},createMSParser:function(){var j=null;var f=["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument.2.0","Microsoft.XMLDOM"];for(var g=0,e=f.length;g":"27E9","\\lt":"27E8","\\gt":"27E9","/":"/","|":["|",{texClass:i.TEXCLASS.ORD}],".":"","\\\\":"\\","\\lmoustache":"23B0","\\rmoustache":"23B1","\\lgroup":"27EE","\\rgroup":"27EF","\\arrowvert":"23D0","\\Arrowvert":"2016","\\bracevert":"23AA","\\Vert":["2016",{texClass:i.TEXCLASS.ORD}],"\\|":["2016",{texClass:i.TEXCLASS.ORD}],"\\vert":["|",{texClass:i.TEXCLASS.ORD}],"\\uparrow":"2191","\\downarrow":"2193","\\updownarrow":"2195","\\Uparrow":"21D1","\\Downarrow":"21D3","\\Updownarrow":"21D5","\\backslash":"\\","\\rangle":"27E9","\\langle":"27E8","\\rbrace":"}","\\lbrace":"{","\\}":"}","\\{":"{","\\rceil":"2309","\\lceil":"2308","\\rfloor":"230B","\\lfloor":"230A","\\lbrack":"[","\\rbrack":"]"},macros:{displaystyle:["SetStyle","D",true,0],textstyle:["SetStyle","T",false,0],scriptstyle:["SetStyle","S",false,1],scriptscriptstyle:["SetStyle","SS",false,2],rm:["SetFont",i.VARIANT.NORMAL],mit:["SetFont",i.VARIANT.ITALIC],oldstyle:["SetFont",i.VARIANT.OLDSTYLE],cal:["SetFont",i.VARIANT.CALIGRAPHIC],it:["SetFont","-tex-mathit"],bf:["SetFont",i.VARIANT.BOLD],bbFont:["SetFont",i.VARIANT.DOUBLESTRUCK],scr:["SetFont",i.VARIANT.SCRIPT],frak:["SetFont",i.VARIANT.FRAKTUR],sf:["SetFont",i.VARIANT.SANSSERIF],tt:["SetFont",i.VARIANT.MONOSPACE],tiny:["SetSize",0.5],Tiny:["SetSize",0.6],scriptsize:["SetSize",0.7],small:["SetSize",0.85],normalsize:["SetSize",1],large:["SetSize",1.2],Large:["SetSize",1.44],LARGE:["SetSize",1.73],huge:["SetSize",2.07],Huge:["SetSize",2.49],arcsin:["NamedFn"],arccos:["NamedFn"],arctan:["NamedFn"],arg:["NamedFn"],cos:["NamedFn"],cosh:["NamedFn"],cot:["NamedFn"],coth:["NamedFn"],csc:["NamedFn"],deg:["NamedFn"],det:"NamedOp",dim:["NamedFn"],exp:["NamedFn"],gcd:"NamedOp",hom:["NamedFn"],inf:"NamedOp",ker:["NamedFn"],lg:["NamedFn"],lim:"NamedOp",liminf:["NamedOp","lim inf"],limsup:["NamedOp","lim sup"],ln:["NamedFn"],log:["NamedFn"],max:"NamedOp",min:"NamedOp",Pr:"NamedOp",sec:["NamedFn"],sin:["NamedFn"],sinh:["NamedFn"],sup:"NamedOp",tan:["NamedFn"],tanh:["NamedFn"],limits:["Limits",1],nolimits:["Limits",0],overline:["UnderOver","00AF",null,1],underline:["UnderOver","005F"],overbrace:["UnderOver","23DE",1],underbrace:["UnderOver","23DF",1],overparen:["UnderOver","23DC"],underparen:["UnderOver","23DD"],overrightarrow:["UnderOver","2192"],underrightarrow:["UnderOver","2192"],overleftarrow:["UnderOver","2190"],underleftarrow:["UnderOver","2190"],overleftrightarrow:["UnderOver","2194"],underleftrightarrow:["UnderOver","2194"],overset:"Overset",underset:"Underset",stackrel:["Macro","\\mathrel{\\mathop{#2}\\limits^{#1}}",2],over:"Over",overwithdelims:"Over",atop:"Over",atopwithdelims:"Over",above:"Over",abovewithdelims:"Over",brace:["Over","{","}"],brack:["Over","[","]"],choose:["Over","(",")"],frac:"Frac",sqrt:"Sqrt",root:"Root",uproot:["MoveRoot","upRoot"],leftroot:["MoveRoot","leftRoot"],left:"LeftRight",right:"LeftRight",middle:"Middle",llap:"Lap",rlap:"Lap",raise:"RaiseLower",lower:"RaiseLower",moveleft:"MoveLeftRight",moveright:"MoveLeftRight",",":["Spacer",i.LENGTH.THINMATHSPACE],":":["Spacer",i.LENGTH.MEDIUMMATHSPACE],">":["Spacer",i.LENGTH.MEDIUMMATHSPACE],";":["Spacer",i.LENGTH.THICKMATHSPACE],"!":["Spacer",i.LENGTH.NEGATIVETHINMATHSPACE],enspace:["Spacer",".5em"],quad:["Spacer","1em"],qquad:["Spacer","2em"],thinspace:["Spacer",i.LENGTH.THINMATHSPACE],negthinspace:["Spacer",i.LENGTH.NEGATIVETHINMATHSPACE],hskip:"Hskip",hspace:"Hskip",kern:"Hskip",mskip:"Hskip",mspace:"Hskip",mkern:"Hskip",rule:"rule",Rule:["Rule"],Space:["Rule","blank"],big:["MakeBig",i.TEXCLASS.ORD,0.85],Big:["MakeBig",i.TEXCLASS.ORD,1.15],bigg:["MakeBig",i.TEXCLASS.ORD,1.45],Bigg:["MakeBig",i.TEXCLASS.ORD,1.75],bigl:["MakeBig",i.TEXCLASS.OPEN,0.85],Bigl:["MakeBig",i.TEXCLASS.OPEN,1.15],biggl:["MakeBig",i.TEXCLASS.OPEN,1.45],Biggl:["MakeBig",i.TEXCLASS.OPEN,1.75],bigr:["MakeBig",i.TEXCLASS.CLOSE,0.85],Bigr:["MakeBig",i.TEXCLASS.CLOSE,1.15],biggr:["MakeBig",i.TEXCLASS.CLOSE,1.45],Biggr:["MakeBig",i.TEXCLASS.CLOSE,1.75],bigm:["MakeBig",i.TEXCLASS.REL,0.85],Bigm:["MakeBig",i.TEXCLASS.REL,1.15],biggm:["MakeBig",i.TEXCLASS.REL,1.45],Biggm:["MakeBig",i.TEXCLASS.REL,1.75],mathord:["TeXAtom",i.TEXCLASS.ORD],mathop:["TeXAtom",i.TEXCLASS.OP],mathopen:["TeXAtom",i.TEXCLASS.OPEN],mathclose:["TeXAtom",i.TEXCLASS.CLOSE],mathbin:["TeXAtom",i.TEXCLASS.BIN],mathrel:["TeXAtom",i.TEXCLASS.REL],mathpunct:["TeXAtom",i.TEXCLASS.PUNCT],mathinner:["TeXAtom",i.TEXCLASS.INNER],vcenter:["TeXAtom",i.TEXCLASS.VCENTER],mathchoice:["Extension","mathchoice"],buildrel:"BuildRel",hbox:["HBox",0],text:"HBox",mbox:["HBox",0],fbox:"FBox",strut:"Strut",mathstrut:["Macro","\\vphantom{(}"],phantom:"Phantom",vphantom:["Phantom",1,0],hphantom:["Phantom",0,1],smash:"Smash",acute:["Accent","00B4"],grave:["Accent","0060"],ddot:["Accent","00A8"],tilde:["Accent","007E"],bar:["Accent","00AF"],breve:["Accent","02D8"],check:["Accent","02C7"],hat:["Accent","005E"],vec:["Accent","2192"],dot:["Accent","02D9"],widetilde:["Accent","007E",1],widehat:["Accent","005E",1],matrix:"Matrix",array:"Matrix",pmatrix:["Matrix","(",")"],cases:["Matrix","{","","left left",null,".1em",null,true],eqalign:["Matrix",null,null,"right left",i.LENGTH.THICKMATHSPACE,".5em","D"],displaylines:["Matrix",null,null,"center",null,".5em","D"],cr:"Cr","\\":"CrLaTeX",newline:"Cr",hline:["HLine","solid"],hdashline:["HLine","dashed"],eqalignno:["Matrix",null,null,"right left",i.LENGTH.THICKMATHSPACE,".5em","D",null,"right"],leqalignno:["Matrix",null,null,"right left",i.LENGTH.THICKMATHSPACE,".5em","D",null,"left"],hfill:"HFill",hfil:"HFill",hfilll:"HFill",bmod:["Macro",'\\mmlToken{mo}[lspace="thickmathspace" rspace="thickmathspace"]{mod}'],pmod:["Macro","\\pod{\\mmlToken{mi}{mod}\\kern 6mu #1}",1],mod:["Macro","\\mathchoice{\\kern18mu}{\\kern12mu}{\\kern12mu}{\\kern12mu}\\mmlToken{mi}{mod}\\,\\,#1",1],pod:["Macro","\\mathchoice{\\kern18mu}{\\kern8mu}{\\kern8mu}{\\kern8mu}(#1)",1],iff:["Macro","\\;\\Longleftrightarrow\\;"],skew:["Macro","{{#2{#3\\mkern#1mu}\\mkern-#1mu}{}}",3],mathcal:["Macro","{\\cal #1}",1],mathscr:["Macro","{\\scr #1}",1],mathrm:["Macro","{\\rm #1}",1],mathbf:["Macro","{\\bf #1}",1],mathbb:["Macro","{\\bbFont #1}",1],Bbb:["Macro","{\\bbFont #1}",1],mathit:["Macro","{\\it #1}",1],mathfrak:["Macro","{\\frak #1}",1],mathsf:["Macro","{\\sf #1}",1],mathtt:["Macro","{\\tt #1}",1],textrm:["Macro","\\mathord{\\rm\\text{#1}}",1],textit:["Macro","\\mathord{\\it\\text{#1}}",1],textbf:["Macro","\\mathord{\\bf\\text{#1}}",1],textsf:["Macro","\\mathord{\\sf\\text{#1}}",1],texttt:["Macro","\\mathord{\\tt\\text{#1}}",1],pmb:["Macro","\\rlap{#1}\\kern1px{#1}",1],TeX:["Macro","T\\kern-.14em\\lower.5ex{E}\\kern-.115em X"],LaTeX:["Macro","L\\kern-.325em\\raise.21em{\\scriptstyle{A}}\\kern-.17em\\TeX"]," ":["Macro","\\text{ }"],not:"Not",dots:"Dots",space:"Tilde","\u00A0":"Tilde",begin:"BeginEnd",end:"BeginEnd",newcommand:["Extension","newcommand"],renewcommand:["Extension","newcommand"],newenvironment:["Extension","newcommand"],renewenvironment:["Extension","newcommand"],def:["Extension","newcommand"],let:["Extension","newcommand"],verb:["Extension","verb"],boldsymbol:["Extension","boldsymbol"],tag:["Extension","AMSmath"],notag:["Extension","AMSmath"],label:["Extension","AMSmath"],ref:["Extension","AMSmath"],eqref:["Extension","AMSmath"],nonumber:["Macro","\\notag"],unicode:["Extension","unicode"],color:"Color",href:["Extension","HTML"],"class":["Extension","HTML"],style:["Extension","HTML"],cssId:["Extension","HTML"],bbox:["Extension","bbox"],mmlToken:"MmlToken",require:"Require"},environment:{array:["AlignedArray"],matrix:["Array",null,null,null,"c"],pmatrix:["Array",null,"(",")","c"],bmatrix:["Array",null,"[","]","c"],Bmatrix:["Array",null,"\\{","\\}","c"],vmatrix:["Array",null,"\\vert","\\vert","c"],Vmatrix:["Array",null,"\\Vert","\\Vert","c"],cases:["Array",null,"\\{",".","ll",null,".2em","T"],equation:[null,"Equation"],"equation*":[null,"Equation"],eqnarray:["ExtensionEnv",null,"AMSmath"],"eqnarray*":["ExtensionEnv",null,"AMSmath"],align:["ExtensionEnv",null,"AMSmath"],"align*":["ExtensionEnv",null,"AMSmath"],aligned:["ExtensionEnv",null,"AMSmath"],multline:["ExtensionEnv",null,"AMSmath"],"multline*":["ExtensionEnv",null,"AMSmath"],split:["ExtensionEnv",null,"AMSmath"],gather:["ExtensionEnv",null,"AMSmath"],"gather*":["ExtensionEnv",null,"AMSmath"],gathered:["ExtensionEnv",null,"AMSmath"],alignat:["ExtensionEnv",null,"AMSmath"],"alignat*":["ExtensionEnv",null,"AMSmath"],alignedat:["ExtensionEnv",null,"AMSmath"]},p_height:1.2/0.85});if(this.config.Macros){var m=this.config.Macros;for(var n in m){if(m.hasOwnProperty(n)){if(typeof(m[n])==="string"){g.macros[n]=["Macro",m[n]]}else{g.macros[n]=["Macro"].concat(m[n])}g.macros[n].isUser=true}}}};var a=MathJax.Object.Subclass({Init:function(n,o){this.string=n;this.i=0;this.macroCount=0;var m;if(o){m={};for(var p in o){if(o.hasOwnProperty(p)){m[p]=o[p]}}}this.stack=d.Stack(m,!!o);this.Parse();this.Push(b.stop())},Parse:function(){var o,m;while(this.i=55296&&m<56320){o+=this.string.charAt(this.i++)}if(g.special.hasOwnProperty(o)){this[g.special[o]](o)}else{if(g.letter.test(o)){this.Variable(o)}else{if(g.digit.test(o)){this.Number(o)}else{this.Other(o)}}}}},Push:function(){this.stack.Push.apply(this.stack,arguments)},mml:function(){if(this.stack.Top().type!=="mml"){return null}return this.stack.Top().data[0]},mmlToken:function(m){return m},ControlSequence:function(p){var m=this.GetCS(),o=this.csFindMacro(m);if(o){if(!f(o)){o=[o]}var n=o[0];if(!(n instanceof Function)){n=this[n]}n.apply(this,[p+m].concat(o.slice(1)))}else{if(g.mathchar0mi.hasOwnProperty(m)){this.csMathchar0mi(m,g.mathchar0mi[m])}else{if(g.mathchar0mo.hasOwnProperty(m)){this.csMathchar0mo(m,g.mathchar0mo[m])}else{if(g.mathchar7.hasOwnProperty(m)){this.csMathchar7(m,g.mathchar7[m])}else{if(g.delimiter.hasOwnProperty("\\"+m)){this.csDelimiter(m,g.delimiter["\\"+m])}else{this.csUndefined(p+m)}}}}}},csFindMacro:function(m){return(g.macros.hasOwnProperty(m)?g.macros[m]:null)},csMathchar0mi:function(m,o){var n={mathvariant:i.VARIANT.ITALIC};if(f(o)){n=o[1];o=o[0]}this.Push(this.mmlToken(i.mi(i.entity("#x"+o)).With(n)))},csMathchar0mo:function(m,o){var n={stretchy:false};if(f(o)){n=o[1];n.stretchy=false;o=o[0]}this.Push(this.mmlToken(i.mo(i.entity("#x"+o)).With(n)))},csMathchar7:function(m,o){var n={mathvariant:i.VARIANT.NORMAL};if(f(o)){n=o[1];o=o[0]}if(this.stack.env.font){n.mathvariant=this.stack.env.font}this.Push(this.mmlToken(i.mi(i.entity("#x"+o)).With(n)))},csDelimiter:function(m,o){var n={};if(f(o)){n=o[1];o=o[0]}if(o.length===4){o=i.entity("#x"+o)}else{o=i.chars(o)}this.Push(this.mmlToken(i.mo(o).With({fence:false,stretchy:false}).With(n)))},csUndefined:function(m){d.Error(["UndefinedControlSequence","Undefined control sequence %1",m])},Variable:function(n){var m={};if(this.stack.env.font){m.mathvariant=this.stack.env.font}this.Push(this.mmlToken(i.mi(i.chars(n)).With(m)))},Number:function(p){var m,o=this.string.slice(this.i-1).match(g.number);if(o){m=i.mn(o[0].replace(/[{}]/g,""));this.i+=o[0].length-1}else{m=i.mo(i.chars(p))}if(this.stack.env.font){m.mathvariant=this.stack.env.font}this.Push(this.mmlToken(m))},Open:function(m){this.Push(b.open())},Close:function(m){this.Push(b.close())},Tilde:function(m){this.Push(i.mtext(i.chars(h)))},Space:function(m){},Superscript:function(r){if(this.GetNext().match(/\d/)){this.string=this.string.substr(0,this.i+1)+" "+this.string.substr(this.i+1)}var q,o,p=this.stack.Top();if(p.type==="prime"){o=p.data[0];q=p.data[1];this.stack.Pop()}else{o=this.stack.Prev();if(!o){o=i.mi("")}}if(o.isEmbellishedWrapper){o=o.data[0].data[0]}var n=o.movesupsub,m=o.sup;if((o.type==="msubsup"&&o.data[o.sup])||(o.type==="munderover"&&o.data[o.over]&&!o.subsupOK)){d.Error(["DoubleExponent","Double exponent: use braces to clarify"])}if(o.type!=="msubsup"){if(n){if(o.type!=="munderover"||o.data[o.over]){if(o.movablelimits&&o.isa(i.mi)){o=this.mi2mo(o)}o=i.munderover(o,null,null).With({movesupsub:true})}m=o.over}else{o=i.msubsup(o,null,null);m=o.sup}}this.Push(b.subsup(o).With({position:m,primes:q,movesupsub:n}))},Subscript:function(r){if(this.GetNext().match(/\d/)){this.string=this.string.substr(0,this.i+1)+" "+this.string.substr(this.i+1)}var q,o,p=this.stack.Top();if(p.type==="prime"){o=p.data[0];q=p.data[1];this.stack.Pop()}else{o=this.stack.Prev();if(!o){o=i.mi("")}}if(o.isEmbellishedWrapper){o=o.data[0].data[0]}var n=o.movesupsub,m=o.sub;if((o.type==="msubsup"&&o.data[o.sub])||(o.type==="munderover"&&o.data[o.under]&&!o.subsupOK)){d.Error(["DoubleSubscripts","Double subscripts: use braces to clarify"])}if(o.type!=="msubsup"){if(n){if(o.type!=="munderover"||o.data[o.under]){if(o.movablelimits&&o.isa(i.mi)){o=this.mi2mo(o)}o=i.munderover(o,null,null).With({movesupsub:true})}m=o.under}else{o=i.msubsup(o,null,null);m=o.sub}}this.Push(b.subsup(o).With({position:m,primes:q,movesupsub:n}))},PRIME:"\u2032",SMARTQUOTE:"\u2019",Prime:function(o){var n=this.stack.Prev();if(!n){n=i.mi()}if(n.type==="msubsup"&&n.data[n.sup]){d.Error(["DoubleExponentPrime","Prime causes double exponent: use braces to clarify"])}var m="";this.i--;do{m+=this.PRIME;this.i++,o=this.GetNext()}while(o==="'"||o===this.SMARTQUOTE);m=["","\u2032","\u2033","\u2034","\u2057"][m.length]||m;this.Push(b.prime(n,this.mmlToken(i.mo(m))))},mi2mo:function(m){var n=i.mo();n.Append.apply(n,m.data);var o;for(o in n.defaults){if(n.defaults.hasOwnProperty(o)&&m[o]!=null){n[o]=m[o]}}for(o in i.copyAttributes){if(i.copyAttributes.hasOwnProperty(o)&&m[o]!=null){n[o]=m[o]}}n.lspace=n.rspace="0";n.useMMLspacing&=~(n.SPACE_ATTR.lspace|n.SPACE_ATTR.rspace);return n},Comment:function(m){while(this.id.config.MAXMACROS){d.Error(["MaxMacroSub1","MathJax maximum macro substitution count exceeded; is there a recursive macro call?"])}},Matrix:function(n,p,v,r,u,o,m,w,t){var s=this.GetNext();if(s===""){d.Error(["MissingArgFor","Missing argument for %1",n])}if(s==="{"){this.i++}else{this.string=s+"}"+this.string.slice(this.i+1);this.i=0}var q=b.array().With({requireClose:true,arraydef:{rowspacing:(o||"4pt"),columnspacing:(u||"1em")}});if(w){q.isCases=true}if(t){q.isNumbered=true;q.arraydef.side=t}if(p||v){q.open=p;q.close=v}if(m==="D"){q.arraydef.displaystyle=true}if(r!=null){q.arraydef.columnalign=r}this.Push(q)},Entry:function(p){this.Push(b.cell().With({isEntry:true,name:p}));if(this.stack.Top().isCases){var o=this.string;var t=0,s=-1,q=this.i,n=o.length;while(qd.config.MAXMACROS){d.Error(["MaxMacroSub2","MathJax maximum substitution count exceeded; is there a recursive latex environment?"])}if(q[0]&&this[q[0]]){n=this[q[0]].apply(this,[n].concat(q.slice(2)))}}this.Push(n)},envFindName:function(m){return(g.environment.hasOwnProperty(m)?g.environment[m]:null)},Equation:function(m,n){return n},ExtensionEnv:function(n,m){this.Extension(n.name,m,"environment")},Array:function(n,p,u,s,t,o,m,q){if(!s){s=this.GetArgument("\\begin{"+n.name+"}")}var v=("c"+s).replace(/[^clr|:]/g,"").replace(/[^|:]([|:])+/g,"$1");s=s.replace(/[^clr]/g,"").split("").join(" ");s=s.replace(/l/g,"left").replace(/r/g,"right").replace(/c/g,"center");var r=b.array().With({arraydef:{columnalign:s,columnspacing:(t||"1em"),rowspacing:(o||"4pt")}});if(v.match(/[|:]/)){if(v.charAt(0).match(/[|:]/)){r.frame.push("left");r.frame.dashed=v.charAt(0)===":"}if(v.charAt(v.length-1).match(/[|:]/)){r.frame.push("right")}v=v.substr(1,v.length-2);r.arraydef.columnlines=v.split("").join(" ").replace(/[^|: ]/g,"none").replace(/\|/g,"solid").replace(/:/g,"dashed")}if(p){r.open=this.convertDelimiter(p)}if(u){r.close=this.convertDelimiter(u)}if(m==="D"){r.arraydef.displaystyle=true}else{if(m){r.arraydef.displaystyle=false}}if(m==="S"){r.arraydef.scriptlevel=1}if(q){r.arraydef.useHeight=false}this.Push(n);return r},AlignedArray:function(m){var n=this.GetBrackets("\\begin{"+m.name+"}");return this.setArrayAlign(this.Array.apply(this,arguments),n)},setArrayAlign:function(n,m){m=this.trimSpaces(m||"");if(m==="t"){n.arraydef.align="baseline 1"}else{if(m==="b"){n.arraydef.align="baseline -1"}else{if(m==="c"){n.arraydef.align="center"}else{if(m){n.arraydef.align=m}}}}return n},convertDelimiter:function(m){if(m){m=(g.delimiter.hasOwnProperty(m)?g.delimiter[m]:null)}if(m==null){return null}if(f(m)){m=m[0]}if(m.length===4){m=String.fromCharCode(parseInt(m,16))}return m},trimSpaces:function(n){if(typeof(n)!="string"){return n}var m=n.replace(/^\s+|\s+$/g,"");if(m.match(/\\$/)&&n.match(/ $/)){m+=" "}return m},nextIsSpace:function(){return this.string.charAt(this.i).match(/\s/)},GetNext:function(){while(this.nextIsSpace()){this.i++}return this.string.charAt(this.i)},GetCS:function(){var m=this.string.slice(this.i).match(/^([a-z]+|.) ?/i);if(m){this.i+=m[1].length;return m[1]}else{this.i++;return" "}},GetArgument:function(n,o){switch(this.GetNext()){case"":if(!o){d.Error(["MissingArgFor","Missing argument for %1",n])}return null;case"}":if(!o){d.Error(["ExtraCloseMissingOpen","Extra close brace or missing open brace"])}return null;case"\\":this.i++;return"\\"+this.GetCS();case"{":var m=++this.i,p=1;while(this.i1){n=[i.mrow.apply(i,n)]}}return n},InternalText:function(n,m){n=n.replace(/^\s+/,h).replace(/\s+$/,h);return i.mtext(i.chars(n)).With(m)},setDef:function(m,n){n.isUser=true;g.macros[m]=n},setEnv:function(m,n){n.isUser=true;g.environment[m]=n},SubstituteArgs:function(n,m){var q="";var p="";var r;var o=0;while(on.length){d.Error(["IllegalMacroParam","Illegal macro parameter reference"])}p=this.AddArgs(this.AddArgs(p,q),n[r-1]);q=""}}else{q+=r}}}return this.AddArgs(p,q)},AddArgs:function(n,m){if(m.match(/^[a-z]/i)&&n.match(/(^|[^\\])(\\\\)*\\[a-z]+$/i)){n+=" "}if(n.length+m.length>d.config.MAXBUFFER){d.Error(["MaxBufferSize","MathJax internal buffer size exceeded; is there a recursive macro call?"])}return n+m}});d.Augment({Stack:e,Parse:a,Definitions:g,Startup:l,config:{MAXMACROS:10000,MAXBUFFER:5*1024},sourceMenuTitle:["TeXCommands","TeX Commands"],annotationEncoding:"application/x-tex",prefilterHooks:MathJax.Callback.Hooks(true),postfilterHooks:MathJax.Callback.Hooks(true),Config:function(){this.SUPER(arguments).Config.apply(this,arguments);if(this.config.equationNumbers.autoNumber!=="none"){if(!this.config.extensions){this.config.extensions=[]}this.config.extensions.push("AMSmath.js")}},Translate:function(m){var n,o=false,q=MathJax.HTML.getScript(m);var s=(m.type.replace(/\n/g," ").match(/(;|\s|\n)mode\s*=\s*display(;|\s|\n|$)/)!=null);var r={math:q,display:s,script:m};var t=this.prefilterHooks.Execute(r);if(t){return t}q=r.math;try{n=d.Parse(q).mml()}catch(p){if(!p.texError){throw p}n=this.formatError(p,q,s,m);o=true}if(n.isa(i.mtable)&&n.displaystyle==="inherit"){n.displaystyle=s}if(n.inferred){n=i.apply(MathJax.ElementJax,n.data)}else{n=i(n)}if(s){n.root.display="block"}if(o){n.texError=true}r.math=n;return this.postfilterHooks.Execute(r)||r.math},prefilterMath:function(n,o,m){return n},postfilterMath:function(n,o,m){this.combineRelations(n.root);return n},formatError:function(p,o,q,m){var n=p.message.replace(/\n.*/,"");c.signal.Post(["TeX Jax - parse error",n,o,q,m]);return i.Error(n)},Error:function(m){if(f(m)){m=k.apply(k,m)}throw c.Insert(Error(m),{texError:true})},Macro:function(m,n,o){g.macros[m]=["Macro"].concat([].slice.call(arguments,1));g.macros[m].isUser=true},fenced:function(o,n,p){var m=i.mrow().With({open:o,close:p,texClass:i.TEXCLASS.INNER});m.Append(i.mo(o).With({fence:true,stretchy:true,symmetric:true,texClass:i.TEXCLASS.OPEN}));if(n.type==="mrow"&&n.inferred){m.Append.apply(m,n.data)}else{m.Append(n)}m.Append(i.mo(p).With({fence:true,stretchy:true,symmetric:true,texClass:i.TEXCLASS.CLOSE}));return m},fixedFence:function(o,n,p){var m=i.mrow().With({open:o,close:p,texClass:i.TEXCLASS.ORD});if(o){m.Append(this.mathPalette(o,"l"))}if(n.type==="mrow"){m.Append.apply(m,n.data)}else{m.Append(n)}if(p){m.Append(this.mathPalette(p,"r"))}return m},mathPalette:function(p,n){if(p==="{"||p==="}"){p="\\"+p}var o="{\\bigg"+n+" "+p+"}",m="{\\big"+n+" "+p+"}";return d.Parse("\\mathchoice"+o+m+m+m,{}).mml()},combineRelations:function(q){var r,n,p,o;for(r=0,n=q.data.length;rthis.data.length){this.selection=1}var j=!!h.hover;h.Update();if(j){var i=document.getElementById(h.inputID+"-Span");MathJax.Extension.MathEvents.Hover.Hover(h,i)}return MathJax.Extension.MathEvents.Event.False(k)},CHTMLsetStatus:function(h){this.messageID=MathJax.Message.Set((this.data[1]&&this.data[1].isToken)?this.data[1].data.join(""):this.data[1].toString())},CHTMLclearStatus:function(h){if(this.messageID){MathJax.Message.Clear(this.messageID,0)}delete this.messageID},CHTMLtooltipOver:function(i,j){if(!j){j=window.event}if(b){clearTimeout(b);b=null}if(f){clearTimeout(f)}var h=j.pageX;var l=j.pageY;if(h==null){h=j.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;l=j.clientY+document.body.scrollTop+document.documentElement.scrollTop}var k=MathJax.Callback(["CHTMLtooltipPost",this,i,h+a.offsetX,l+a.offsetY]);f=setTimeout(k,a.delayPost)},CHTMLtooltipOut:function(h,i){if(f){clearTimeout(f);f=null}if(b){clearTimeout(b)}var j=MathJax.Callback(["CHTMLtooltipClear",this,80]);b=setTimeout(j,a.delayClear)},CHTMLtooltipPost:function(i,h,l){f=null;if(b){clearTimeout(b);b=null}var k=this.CHTMLtooltip;k.style.display="block";k.style.opacity="";if(this===d){return}k.style.left=h+"px";k.style.top=l+"px";k.innerHTML='';e.getMetrics(i);try{this.data[1].toCommonHTML(k.firstChild.firstChild)}catch(j){if(!j.restart){throw j}k.style.display="none";MathJax.Callback.After(["CHTMLtooltipPost",this,i,h,l],j.restart);return}d=this},CHTMLtooltipClear:function(i){var h=this.CHTMLtooltip;if(i<=0){h.style.display="none";h.style.opacity=h.style.filter="";b=null}else{h.style.opacity=i/100;h.style.filter="alpha(opacity="+i+")";b=setTimeout(MathJax.Callback(["CHTMLtooltipClear",this,i-20]),50)}}});MathJax.Hub.Startup.signal.Post("CommonHTML maction Ready");MathJax.Ajax.loadComplete(e.autoloadDir+"/maction.js")}); diff --git a/ext/mathjax/jax/output/CommonHTML/autoload/menclose.js b/ext/mathjax/jax/output/CommonHTML/autoload/menclose.js new file mode 100644 index 000000000..a9028d546 --- /dev/null +++ b/ext/mathjax/jax/output/CommonHTML/autoload/menclose.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/CommonHTML/autoload/menclose.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.Hub.Register.StartupHook("CommonHTML Jax Ready",function(){var g="2.7.5";var a=MathJax.ElementJax.mml,d=MathJax.OutputJax.CommonHTML;var f="http://www.w3.org/2000/svg";var e=4,b=1,c=2;a.menclose.Augment({toCommonHTML:function(o){var y=this.getValues("notation","thickness","padding");if(y.thickness==null){y.thickness=".075em"}if(y.padding==null){y.padding=".2em"}o=this.CHTMLdefaultNode(o,{childNodes:"mjx-box",forceChild:true});var j=o.firstChild,v=this.CHTMLbboxFor(0);var h=this.CHTMLlength2em(y.padding,1/d.em);var z=this.CHTMLlength2em(y.thickness,1/d.em);z=Math.max(1,Math.round(z*d.em))/d.em;var q=d.Px(z)+" solid";var u={L:h,R:h,T:h,B:h,H:v.h+h,D:v.d+h,W:v.w+2*h};j.style.padding=d.Em(h);var s=MathJax.Hub.SplitList(y.notation),w={};for(var r=0,l=s.length;rx.r){x.r=x.w}x.h+=u.T;if(x.h>x.t){x.t=x.h}x.d+=u.B;if(x.d>x.b){x.b=x.d}return o},CHTMLnotation:{box:function(m,j,l,k,i,h){k-=i;m.style.padding=d.Em(k);m.style.border=h},roundedbox:function(n,k,m,l,i,h){var j=Math.min(k.w,k.h+k.d+2*l)/4;d.addElement(n.parentNode,"mjx-box",{style:{padding:d.Em(l-i),border:h,"border-radius":d.Em(j),height:d.Em(k.h+k.d),"vertical-align":d.Em(-m.D),width:d.Em(k.w),"margin-left":d.Em(-m.W)}})},circle:function(j,o,n,i,r,l){var q=n.H,h=n.D,k=n.W;var m=this.CHTMLsvg(j,n,r);this.CHTMLsvgElement(m.firstChild,"ellipse",{rx:d.Px(k/2-r/2),ry:d.Px((q+h)/2-r/2),cx:d.Px(k/2),cy:d.Px((q+h)/2)})},left:function(m,j,l,k,i,h){m.style.borderLeft=h;m.style.paddingLeft=d.Em(k-i)},right:function(m,j,l,k,i,h){m.style.borderRight=h;m.style.paddingRight=d.Em(k-i)},top:function(m,j,l,k,i,h){m.style.borderTop=h;m.style.paddingTop=d.Em(k-i)},bottom:function(m,j,l,k,i,h){m.style.borderBottom=h;m.style.paddingBottom=d.Em(k-i)},actuarial:function(m,j,l,k,i,h){m.style.borderTop=m.style.borderRight=h;m.style.paddingTop=m.style.paddingRight=d.Em(k-i)},madruwb:function(m,j,l,k,i,h){m.style.borderBottom=m.style.borderRight=h;m.style.paddingBottom=m.style.paddingRight=d.Em(k-i)},verticalstrike:function(m,j,l,k,i,h){d.addElement(m.parentNode,"mjx-box",{style:{"border-left":h,height:d.Em(l.H+l.D),"vertical-align":d.Em(-l.D),width:d.Em(j.w/2+k-i/2),"margin-left":d.Em(-j.w/2-k-i/2)}})},horizontalstrike:function(m,j,l,k,i,h){d.addElement(m.parentNode,"mjx-box",{style:{"border-top":h,height:d.Em((l.H+l.D)/2-i/2),"vertical-align":d.Em(-l.D),width:d.Em(l.W),"margin-left":d.Em(-l.W)}})},updiagonalstrike:function(j,o,n,i,r,l){var q=n.H,h=n.D,k=n.W;var m=this.CHTMLsvg(j,n,r);this.CHTMLsvgElement(m.firstChild,"line",{x1:d.Px(r/2),y1:d.Px(q+h-r),x2:d.Px(k-r),y2:d.Px(r/2)})},downdiagonalstrike:function(j,o,n,i,r,l){var q=n.H,h=n.D,k=n.W;var m=this.CHTMLsvg(j,n,r);this.CHTMLsvgElement(m.firstChild,"line",{x1:d.Px(r/2),y1:d.Px(r/2),x2:d.Px(k-r),y2:d.Px(q+h-r)})},updiagonalarrow:function(i,q,o,h,w,k){var v=o.H+o.D-w,j=o.W-w/2;var u=Math.atan2(v,j)*(-180/Math.PI).toFixed(3);var l=Math.sqrt(v*v+j*j);var m=this.CHTMLsvg(i,o,w);var n=this.CHTMLsvgElement(m.firstChild,"g",{fill:"currentColor",transform:"translate("+this.CHTMLpx(w/2)+" "+this.CHTMLpx(v+w/2)+") rotate("+u+")"});var s=w*e,z=w*b,r=w*c;this.CHTMLsvgElement(n,"line",{x1:d.Px(w/2),y1:0,x2:d.Px(l-s),y2:0});this.CHTMLsvgElement(n,"path",{d:"M "+this.CHTMLpx(l-s)+",0 L "+this.CHTMLpx(l-s-z)+","+this.CHTMLpx(r)+"L "+this.CHTMLpx(l)+",0 L "+this.CHTMLpx(l-s-z)+","+this.CHTMLpx(-r),stroke:"none"})},phasorangle:function(j,q,o,i,s,l){var n=i,r=o.H,h=o.D;i=(r+h)/2;var k=o.W+i-n;o.W=k;o.L=i;j.style.margin="0 0 0 "+d.Em(i-n);var m=this.CHTMLsvg(j,o,s);this.CHTMLsvgElement(m.firstChild,"path",{d:"M "+this.CHTMLpx(i)+",1 L 1,"+this.CHTMLpx(r+h-s)+" L "+this.CHTMLpx(k)+","+this.CHTMLpx(r+h-s)})},longdiv:function(j,o,n,i,r,l){n.W+=1.5*i;n.L+=1.5*i;var q=n.H,h=n.D,k=n.W;j.style.margin="0 0 0 "+d.Em(1.5*i);var m=this.CHTMLsvg(j,n,r);this.CHTMLsvgElement(m.firstChild,"path",{d:"M "+this.CHTMLpx(k)+",1 L 1,1 a"+this.CHTMLpx(i)+","+this.CHTMLpx((q+h)/2-r/2)+" 0 0,1 1,"+this.CHTMLpx(q+h-1.5*r)})},radical:function(j,o,n,i,r,l){n.W+=1.5*i;n.L+=1.5*i;var q=n.H,h=n.D,k=n.W;j.style.margin="0 0 0 "+d.Em(1.5*i);var m=this.CHTMLsvg(j,n,r);this.CHTMLsvgElement(m.firstChild,"path",{d:"M 1,"+this.CHTMLpx(0.6*(q+h))+" L "+this.CHTMLpx(i)+","+this.CHTMLpx(q+h)+" L "+this.CHTMLpx(2*i)+",1 L "+this.CHTMLpx(k)+",1"})}},CHTMLpx:function(h){h*=d.em;if(Math.abs(h)<0.1){return"0"}return h.toFixed(1).replace(/\.0$/,"")},CHTMLsvg:function(j,k,i){if(!h){var h=document.createElementNS(f,"svg");if(h.style){h.style.width=d.Em(k.W);h.style.height=d.Em(k.H+k.D);h.style.verticalAlign=d.Em(-k.D);h.style.marginLeft=d.Em(-k.W)}this.CHTMLsvgElement(h,"g",{"stroke-width":d.Px(i)});j.parentNode.appendChild(h)}return h},CHTMLsvgElement:function(h,i,j){var k=document.createElementNS(f,i);k.isMathJax=true;if(j){for(var l in j){if(j.hasOwnProperty(l)){k.setAttributeNS(null,l,j[l].toString())}}}h.appendChild(k);return k}});if(!document.createElementNS){delete a.menclose.prototype.toCommonHTML}MathJax.Hub.Startup.signal.Post("CommonHTML menclose Ready");MathJax.Ajax.loadComplete(d.autoloadDir+"/menclose.js")}); diff --git a/ext/mathjax/jax/output/CommonHTML/autoload/mglyph.js b/ext/mathjax/jax/output/CommonHTML/autoload/mglyph.js new file mode 100644 index 000000000..04affc078 --- /dev/null +++ b/ext/mathjax/jax/output/CommonHTML/autoload/mglyph.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/CommonHTML/autoload/mglyph.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.Hub.Register.StartupHook("CommonHTML Jax Ready",function(){var c="2.7.5";var a=MathJax.ElementJax.mml,b=MathJax.OutputJax.CommonHTML,d=MathJax.Localization;a.mglyph.Augment({toCommonHTML:function(f,r){var o=this.getValues("src","width","height","valign","alt");f=this.CHTMLcreateNode(f);this.CHTMLhandleStyle(f);this.CHTMLhandleScale(f);if(o.src===""){var k=this.Get("index");this.CHTMLgetVariant();if(k&&this.CHTMLvariant.style){this.CHTMLhandleText(f,String.fromCharCode(k),this.CHTMLvariant)}}else{var p=this.CHTML;if(!p.img){p.img=a.mglyph.GLYPH[o.src]}if(!p.img){p.img=a.mglyph.GLYPH[o.src]={img:new Image(),status:"pending"};p.img.img.onload=MathJax.Callback(["CHTMLimgLoaded",this]);p.img.img.onerror=MathJax.Callback(["CHTMLimgError",this]);p.img.img.src=o.src;MathJax.Hub.RestartAfter(p.img.img.onload)}if(p.img.status!=="OK"){var g=a.Error(d._(["MathML","BadMglyph"],"Bad mglyph: %1",o.src));g.data[0].data[0].mathsize="75%";this.Append(g);g.toCommonHTML(f);this.data.pop();p.combine(g.CHTML,0,0,1)}else{var i=b.addElement(f,"img",{isMathJax:true,src:o.src,alt:o.alt,title:o.alt});var m=o.width,j=o.height;var e=p.img.img.width/b.em,n=p.img.img.height/b.em;var q=e,l=n;if(m!==""){e=this.CHTMLlength2em(m,q);n=(q?e/q*l:0)}if(j!==""){n=this.CHTMLlength2em(j,l);if(m===""){e=(l?n/l*q:0)}}i.style.width=b.Em(e);p.w=p.r=e;i.style.height=b.Em(n);p.h=p.t=n;if(o.valign){p.d=p.b=-this.CHTMLlength2em(o.valign,l);i.style.verticalAlign=b.Em(-p.d);p.h-=p.d;p.t=p.h}}}this.CHTMLhandleSpace(f);this.CHTMLhandleBBox(f);this.CHTMLhandleColor(f);return f},CHTMLimgLoaded:function(f,e){if(typeof(f)==="string"){e=f}this.CHTML.img.status=(e||"OK")},CHTMLimgError:function(){this.CHTML.img.img.onload("error")}},{GLYPH:{}});MathJax.Hub.Startup.signal.Post("CommonHTML mglyph Ready");MathJax.Ajax.loadComplete(b.autoloadDir+"/mglyph.js")}); diff --git a/ext/mathjax/jax/output/CommonHTML/autoload/mmultiscripts.js b/ext/mathjax/jax/output/CommonHTML/autoload/mmultiscripts.js new file mode 100644 index 000000000..77022ceea --- /dev/null +++ b/ext/mathjax/jax/output/CommonHTML/autoload/mmultiscripts.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/CommonHTML/autoload/mmultiscripts.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.Hub.Register.StartupHook("CommonHTML Jax Ready",function(){var c="2.7.5";var a=MathJax.ElementJax.mml,b=MathJax.OutputJax.CommonHTML;a.mmultiscripts.Augment({toCommonHTML:function(K,k){var P=(k||{}).stretch;if(!P){K=this.CHTMLcreateNode(K);this.CHTMLhandleStyle(K);this.CHTMLgetVariant();this.CHTMLhandleScale(K)}b.BBOX.empty(this.CHTML);var m,e;if(P){m=b.getNode(K,"mjx-base")}else{this.CHTMLaddChild(K,0,{type:"mjx-base",noBBox:true,forceChild:true});m=K.firstChild}e=this.CHTMLbboxFor(0);if(e.ic){e.R-=e.ic;if(!P){m.style.marginRight=b.Em(-e.ic)}R=1.3*e.ic+0.05}var E={},n={};this.CHTMLgetScripts(E,n,P,K);var w=E.sub,f=E.sup,B=E.presub,l=E.presup;var H=n.sub,N=n.sup,j=n.presub,o=n.presup;if(!P){this.CHTMLaddBoxes(K,m,E)}var g=this.getValues("scriptlevel","scriptsizemultiplier");var i=(this.Get("scriptlevel")<3?g.scriptsizemultiplier:1);var O=b.TEX.x_height,F=b.TEX.scriptspace;var I=b.TEX.sup_drop*i,G=b.TEX.sub_drop*i;var C=e.h-I,A=e.d+G,R=0,J;var L=this.data[this.base];if(L&&(L.type==="mi"||L.type==="mo")){if(b.isChar(L.data.join(""))&&e.rscale===1&&!e.sH&&!L.Get("largeop")){C=A=0}}g=this.getValues("displaystyle","subscriptshift","superscriptshift","texprimestyle");g.subscriptshift=(g.subscriptshift===""?0:this.CHTMLlength2em(g.subscriptshift));g.superscriptshift=(g.superscriptshift===""?0:this.CHTMLlength2em(g.superscriptshift));var z=(B?F+j.w:l?F+o.w-R:0);this.CHTML.combine(e,z,0);var y=this.CHTML.w;if(!f&&!l){A=Math.max(A,b.TEX.sub1,g.subscriptshift);if(w){A=Math.max(A,H.h-(4/5)*O)}if(B){A=Math.max(A,j.h-(4/5)*O)}if(w){this.CHTMLplaceSubOnly(w,H,y,A,F)}if(B){this.CHTMLplacePresubOnly(B,j,A,F)}}else{if(!w&&!B){J=b.TEX[(g.displaystyle?"sup1":(g.texprimestyle?"sup3":"sup2"))];C=Math.max(C,J,g.superscriptshift);if(f){C=Math.max(C,N.d+(1/4)*O)}if(l){C=Math.max(C,o.d+(1/4)*O)}if(f){this.CHTMLplaceSupOnly(f,N,y,R,C,F)}if(l){this.CHTMLplacePresupOnly(l,o,R,C,F)}}else{A=Math.max(A,b.TEX.sub2);var D=b.TEX.rule_thickness;var M=(H||j).h,Q=(N||o).d;if(B){M=Math.max(M,j.h)}if(l){Q=Math.max(Q,o.d)}if((C-Q)-(M-A)<3*D){A=3*D-C+Q+M;I=(4/5)*O-(C-Q);if(I>0){C+=I;A-=I}}C=Math.max(C,g.superscriptshift);A=Math.max(A,g.subscriptshift);if(f){if(w){this.CHTMLplaceSubSup(w,H,f,N,y,R,C,A,F)}else{this.CHTMLplaceSupOnly(f,N,y,R,C,F)}}else{if(w){this.CHTMLplaceSubOnly(w,H,y,A,F)}}if(l){if(B){this.CHTMLplacePresubPresup(B,j,l,o,R,C,A,F)}else{this.CHTMLplacePresupOnly(l,o,R,C,F)}}else{if(B){this.CHTMLplacePresubOnly(B,j,A,F)}}}}this.CHTML.clean();this.CHTMLhandleSpace(K);this.CHTMLhandleBBox(K);this.CHTMLhandleColor(K);return K},CHTMLgetScripts:function(e,o,g,h){if(g){e.sub=b.getNode(h,"mjx-sub");e.sup=b.getNode(h,"mjx-sup");e.presub=b.getNode(h,"mjx-presub");e.presup=b.getNode(h,"mjx-presup");o.sub=this.CHTMLbbox.sub;o.sup=this.CHTMLbbox.sup;o.presub=this.CHTMLbbox.presub;o.presup=this.CHTMLbbox.presup;return}this.CHTMLbbox=o;var f={i:1,w:0,BOX:e,BBOX:o},i=this.data.length;var d="sub",j="sup";while(f.iw){w=p}}var u=B.data[p-A].CHTML;if(u.h>y[q]){y[q]=u.h}if(u.d>h[q]){h[q]=u.d}if(u.w>l[p]){l[p]=u.w}}}if(z.equalrows){k.HD=true;var x=Math.max.apply(Math,y);var o=Math.max.apply(Math,h);for(q=0,n=y.length;qt||m<=0){m=null}}else{w.align=this.defaults.align}var p=0,l=0,u=e.TEX.axis_height;if(w.fspace){p+=k.FSPACE[1]}if(w.frame){p+=2/e.em;l+=1/e.em}for(var q=0;q=m){l+=r+s+x[q]}}}if(!m){l=({top:p,bottom:0,center:p/2,baseline:p/2,axis:p/2-u})[w.align]}if(l){o.style.verticalAlign=e.Em(-l)}k.T=p;k.B=l},CHTMLcolumnWidths:function(l,r,A){var I=r.CWIDTH,K=r.CSPACE,u=r.J,F;var G=0,n=false,y=l.width.match(/%$/);var H,B,v;if(l.width!=="auto"&&!y){G=Math.max(0,this.CHTMLlength2em(l.width,r.R));n=true}if(l.equalcolumns){if(y){var z=e.Percent(1/(u+1));for(F=0;F<=u;F++){I[F]=z}}else{v=Math.max.apply(Math,r.W);if(l.width!=="auto"){var q=(l.fspace?r.FSPACE[0]+(l.frame?2/e.em:0):0);for(F=0;F<=u;F++){q+=K[F]}v=Math.max((G-q)/(u+1),v)}v=e.Em(v);for(F=0;F<=u;F++){I[F]=v}}n=true}var E=0;if(l.fspace){E=r.FSPACE[0]}var s=[],D=[],h=[],o=[];var t=r.rows[0];for(F=0;F<=u;F++){o[F]=r.W[F];if(I[F]==="auto"){s.push(F)}else{if(I[F]==="fit"){D.push(F)}else{if(I[F].match(/%$/)){h.push(F)}else{o[F]=this.CHTMLlength2em(I[F],o[F])}}}E+=o[F]+K[F];if(t[F]){t[F].style.width=e.Em(o[F])}}if(l.frame){E+=2/e.em}var C=(D.length>0);if(n){if(y){for(F=0;F<=u;F++){cell=t[F].style;if(I[F]==="auto"&&!C){cell.width=""}else{if(I[F]==="fit"){cell.width=""}else{if(I[F].match(/%$/)){cell.width=I[F]}else{cell.minWidth=cell.maxWidth=cell.width}}}}}else{if(G>E){var k=0;for(H=0,B=h.length;HE&&D.length){var x=(G-E)/D.length;for(H=0,B=D.length;Ht*z){z=t*p}z+=y;z*=t;D+=z}else{D+=p-t*z+n;z-=t*n;z*=-t}}var o=e.addElement(w,"mjx-box",{style:{width:"100%","text-align":q.indentalign}});o.appendChild(B);var C=e.Element("mjx-itable");B.style.display="inline-table";if(!B.style.width){B.style.width="auto"}C.style.verticalAlign="top";B.style.verticalAlign=e.Em(k.T-k.B-k.H[0]);w.style.verticalAlign="";if(z){if(q.indentalign===b.INDENTALIGN.CENTER){B.style.marginLeft=e.Em(z);B.style.marginRight=e.Em(-z)}else{var u="margin"+(q.indentalign===b.INDENTALIGN.RIGHT?"Right":"Left");B.style[u]=e.Em(z)}}if(k.CALIGN[c]==="left"){w.insertBefore(C,o);C.style.marginRight=e.Em(-k.W[c]-y);if(y){C.style.marginLeft=e.Em(y)}}else{w.appendChild(C);C.style.marginLeft=e.Em(-k.W[c]+y)}var l=k.labels,j=0;if(h.fspace){j=k.FSPACE[0]+(h.frame?1/e.em:0)}for(var x=0,v=l.length;x1){h.h*=k;h.d*=k}}}else{h.w=Math.max(h.w,this.CHTMLlength2em(j,h.w))}}}}return l}});MathJax.Hub.Startup.signal.Post("CommonHTML mtable Ready");MathJax.Ajax.loadComplete(e.autoloadDir+"/mtable.js")}); diff --git a/ext/mathjax/jax/output/CommonHTML/autoload/multiline.js b/ext/mathjax/jax/output/CommonHTML/autoload/multiline.js new file mode 100644 index 000000000..994d332b2 --- /dev/null +++ b/ext/mathjax/jax/output/CommonHTML/autoload/multiline.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/CommonHTML/autoload/multiline.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.Hub.Register.StartupHook("CommonHTML Jax Ready",function(){var e="2.7.5";var b=MathJax.ElementJax.mml,a=MathJax.Hub.config,c=MathJax.OutputJax.CommonHTML;var g=b.mo().With({CHTML:c.BBOX.empty()});var f={newline:0,nobreak:1000000,goodbreak:[-200],badbreak:[+200],auto:[0],maxwidth:1.33,toobig:800,nestfactor:400,spacefactor:-100,spaceoffset:2,spacelimit:1,fence:500,close:500};var d={linebreakstyle:"after"};b.mbase.Augment({CHTMLlinebreakPenalty:f,CHTMLmultiline:function(k){var q=this;while(q.inferred||(q.parent&&q.parent.type==="mrow"&&q.parent.isEmbellished())){q=q.parent}var o=((q.type==="math"&&q.Get("display")==="block")||q.type==="mtd");q.isMultiline=true;var r=this.getValues("linebreak","linebreakstyle","lineleading","linebreakmultchar","indentalign","indentshift","indentalignfirst","indentshiftfirst","indentalignlast","indentshiftlast");if(r.linebreakstyle===b.LINEBREAKSTYLE.INFIXLINEBREAKSTYLE){r.linebreakstyle=this.Get("infixlinebreakstyle")}r.lineleading=this.CHTMLlength2em(r.lineleading,0.5);c.BBOX.empty(this.CHTML);var p=c.addElement(k,"mjx-stack");var h={BBOX:this.CHTML,n:0,Y:0,scale:(this.CHTML.scale||1),isTop:o,values:{},VALUES:r},n=this.CHTMLgetAlign(h,{}),j=this.CHTMLgetShift(h,{},n),i=[],l={index:[],penalty:f.nobreak,w:0,W:j,shift:j,scanW:j,nest:0},m=false;while(this.CHTMLbetterBreak(l,h,true)&&(l.scanW>=c.linebreakWidth||l.penalty===f.newline)){this.CHTMLaddLine(p,i,l.index,h,l.values,m);i=l.index.slice(0);m=true;n=this.CHTMLgetAlign(h,l.values);j=this.CHTMLgetShift(h,l.values,n);l.W=l.shift=l.scanW=j;l.penalty=f.nobreak}h.isLast=true;this.CHTMLaddLine(p,i,[],h,d,m);k.style.width=p.style.width=this.CHTML.pwidth="100%";this.CHTML.mwidth=c.Em(this.CHTML.w);this.CHTML.isMultiline=q.CHTML.isMultiline=true;p.style.verticalAlign=c.Em(h.d-this.CHTML.d);return k},CHTMLbetterBreak:function(l,h,s){if(this.isToken){return false}if(this.isEmbellished()){l.embellished=this;return this.CoreMO().CHTMLbetterBreak(l,h)}if(this.linebreakContainer){return false}var r=l.index.slice(0),p=l.index.shift(),o=this.data.length,n,t,k,q=(l.index.length>0),j=false;if(p==null){p=-1}if(!q){p++;l.W+=l.w;l.w=0}k=l.scanW=l.W;l.nest++;while(p0){var p=c.FONTDATA.baselineskip;var l=(h.values.lineleading==null?h.VALUES:h.values).lineleading*h.scale;var i=h.Y;h.Y-=Math.max(p,h.d+u.h+l);m=i-h.Y-h.d-u.h}if(k){v.style.margin="0 "+c.Em(-k)+" 0 "+c.Em(k)}if(r!==b.INDENTALIGN.LEFT){n.style.textAlign=r}if(m){n.style.paddingTop=c.Em(m)}h.BBOX.combine(u,k,h.Y);h.d=h.bbox.d;h.values=t;h.n++},CHTMLgetAlign:function(k,h){var l=h,i=k.values,j=k.VALUES,m;if(k.n===0){m=l.indentalignfirst||i.indentalignfirst||j.indentalignfirst}else{if(k.isLast){m=i.indentalignlast||j.indentalignlast}else{m=i.indentalign||j.indentalign}}if(m===b.INDENTALIGN.INDENTALIGN){m=i.indentalign||j.indentalign}if(m===b.INDENTALIGN.AUTO){m=(k.isTop?a.displayAlign:b.INDENTALIGN.LEFT)}return m},CHTMLgetShift:function(h,p,n,l){var o=p,m=h.values,i=h.VALUES,j;if(h.n===0){j=o.indentshiftfirst||m.indentshiftfirst||i.indentshiftfirst}else{if(h.isLast){j=m.indentshiftlast||i.indentshiftlast}else{j=m.indentshift||i.indentshift}}if(j===b.INDENTSHIFT.INDENTSHIFT){j=m.indentshift||i.indentshift}if(j==="auto"||j===""){j="0"}j=this.CHTMLlength2em(j,c.cwidth);if(h.isTop&&a.displayIndent!=="0"){var k=this.CHTMLlength2em(a.displayIndent,c.cwidth);j+=(n===b.INDENTALIGN.RIGHT?-k:k)}return(n===b.INDENTALIGN.RIGHT&&!l?-j:j)},CHTMLmoveLine:function(q,h,o,p,k){var m=q[0],l=h[0];if(m==null){m=-1}if(l==null){l=this.data.length-1}if(m===l&&q.length>1){this.data[m].CHTMLmoveSlice(q.slice(1),h.slice(1),o,p,k,"marginLeft")}else{var n=p.last;p.last=false;while(m0),l=false;if(t==null){t=-1}if(!u){t++;n.W+=n.w;n.w=0}o=n.scanW=n.W;n.nest++;if(!this.dataI){this.dataI=[];if(this.data.open){this.dataI.push("open")}if(q){this.dataI.push(0)}for(var s=1;s1){this.data[this.dataI[q]].CHTMLmoveSlice(l.slice(1),o.slice(1),m,h,s,"marginLeft")}else{var r=h.last;h.last=false;var n=this.dataI[q];while(q0),j=false;if(!o){k.W+=k.w;k.w=0}l=k.scanW=k.W;if(n==null){this.CHTML.baseW=this.data[this.base].CHTML.w;this.CHTML.dw=this.CHTML.w-this.CHTML.baseW}if(this.data[this.base].CHTMLbetterBreak(k,h)){j=true;p=[this.base].concat(k.index);m=k.W;q=k.w;if(k.penalty===f.newline){j=o=true}}if(!o){this.CHTMLaddWidth(this.base,k,l)}k.scanW+=this.CHTML.dw;k.W=k.scanW;k.index=[];if(j){k.W=m;k.w=q;k.index=p}return j},CHTMLmoveLine:function(j,n,m,i,r){if(this.data[this.base]){var k=c.addElement(m,"mjx-base");if(j.length>1){this.data[this.base].CHTMLmoveSlice(j.slice(1),n.slice(1),k,i,r,"marginLeft")}else{if(n.length<=1){this.data[this.base].CHTMLmoveNode(k,i,r)}else{this.data[this.base].CHTMLmoveSlice([],n.slice(1),k,i,r,"marginRight")}}}if(n.length===0){var l=this.CHTMLnodeElement(),p=c.getNode(l,"mjx-stack"),o=c.getNode(l,"mjx-sup"),h=c.getNode(l,"mjx-sub");if(p){m.appendChild(p)}else{if(o){m.appendChild(o)}else{if(h){m.appendChild(h)}}}var q=i.bbox.w,s;if(o){s=this.data[this.sup].CHTML;i.bbox.combine(s,q,s.Y)}if(h){s=this.data[this.sub].CHTML;i.bbox.combine(s,q,s.Y)}}}});b.mmultiscripts.Augment({CHTMLbetterBreak:function(l,i){if(!this.data[this.base]){return false}var p=l.index.slice(0);l.index.shift();var n,q,m,o=(l.index.length>0),k=false;if(!o){l.W+=l.w;l.w=0}l.scanW=l.W;var r=this.CHTML,j=this.data[this.base].CHTML;var h=r.w-j.w-(r.X||0);l.scanW+=r.X||0;m=l.scanW;if(this.data[this.base].CHTMLbetterBreak(l,i)){k=true;p=[this.base].concat(l.index);n=l.W;q=l.w;if(l.penalty===f.newline){k=o=true}}if(!o){this.CHTMLaddWidth(this.base,l,m)}l.scanW+=h;l.W=l.scanW;l.index=[];if(k){l.W=n;l.w=q;l.index=p}return k},CHTMLmoveLine:function(m,p,o,j,v){var n,i=this.CHTMLbbox,u;if(m.length<1){n=this.CHTMLnodeElement();var r=c.getNode(n,"mjx-prestack"),s=c.getNode(n,"mjx-presup"),l=c.getNode(n,"mjx-presub");if(r){o.appendChild(r)}else{if(s){o.appendChild(s)}else{if(l){o.appendChild(l)}}}u=j.bbox.w;if(s){j.bbox.combine(i.presup,u+i.presup.X,i.presup.Y)}if(l){j.bbox.combine(i.presub,u+i.presub.X,i.presub.Y)}}if(this.data[this.base]){var k=c.addElement(o,"mjx-base");if(m.length>1){this.data[this.base].CHTMLmoveSlice(m.slice(1),p.slice(1),k,j,v,"marginLeft")}else{if(p.length<=1){this.data[this.base].CHTMLmoveNode(k,j,v)}else{this.data[this.base].CHTMLmoveSlice([],p.slice(1),k,j,v,"marginRight")}}}if(p.length===0){n=this.CHTMLnodeElement();var t=c.getNode(n,"mjx-stack"),q=c.getNode(n,"mjx-sup"),h=c.getNode(n,"mjx-sub");if(t){o.appendChild(t)}else{if(q){o.appendChild(q)}else{if(h){o.appendChild(h)}}}u=j.bbox.w;if(q){j.bbox.combine(i.sup,u,i.sup.Y)}if(h){j.bbox.combine(i.sub,u,i.sub.Y)}}}});b.mo.Augment({CHTMLbetterBreak:function(j,h){if(j.values&&j.values.id===this.CHTMLnodeID){return false}var p=this.getValues("linebreak","linebreakstyle","lineleading","linebreakmultchar","indentalign","indentshift","indentalignfirst","indentshiftfirst","indentalignlast","indentshiftlast","texClass","fence");if(p.linebreakstyle===b.LINEBREAKSTYLE.INFIXLINEBREAKSTYLE){p.linebreakstyle=this.Get("infixlinebreakstyle")}if(p.texClass===b.TEXCLASS.OPEN){j.nest++}if(p.texClass===b.TEXCLASS.CLOSE&&j.nest){j.nest--}var k=j.scanW;delete j.embellished;var o=this.CHTML.w+(this.CHTML.L||0)+(this.CHTML.R||0);if(p.linebreakstyle===b.LINEBREAKSTYLE.AFTER){k+=o;o=0}if(k-j.shift===0&&p.linebreak!==b.LINEBREAK.NEWLINE){return false}var l=c.linebreakWidth-k;if(h.n===0&&(p.indentshiftfirst!==h.VALUES.indentshiftfirst||p.indentalignfirst!==h.VALUES.indentalignfirst)){var m=this.CHTMLgetAlign(h,p),i=this.CHTMLgetShift(h,p,m);l+=(j.shift-i)}var n=Math.floor(l/c.linebreakWidth*1000);if(n<0){n=f.toobig-3*n}if(p.fence){n+=f.fence}if((p.linebreakstyle===b.LINEBREAKSTYLE.AFTER&&p.texClass===b.TEXCLASS.OPEN)||p.texClass===b.TEXCLASS.CLOSE){n+=f.close}n+=j.nest*f.nestfactor;var q=f[p.linebreak||b.LINEBREAK.AUTO]||0;if(!MathJax.Object.isArray(q)){if(q||l>=0){n=q*j.nest}}else{n=Math.max(1,n+q[0]*j.nest)}if(n>=j.penalty){return false}j.penalty=n;j.values=p;j.W=k;j.w=o;p.lineleading=this.CHTMLlength2em(p.lineleading,h.VALUES.lineleading);p.id=this.CHTMLnodeID;return true}});b.mspace.Augment({CHTMLbetterBreak:function(i,h){if(i.values&&i.values.id===this.CHTMLnodeID){return false}var o=this.getValues("linebreak");var l=o.linebreak;if(!l||this.hasDimAttr()){l=b.LINEBREAK.AUTO}var j=i.scanW,n=this.CHTML.w+(this.CHTML.L||0)+(this.CHTML.R||0);if(j-i.shift===0){return false}var k=c.linebreakWidth-j;var m=Math.floor(k/c.linebreakWidth*1000);if(m<0){m=f.toobig-3*m}m+=i.nest*f.nestfactor;var p=f[l]||0;if(l===b.LINEBREAK.AUTO&&n>=f.spacelimit&&!this.mathbackground&&!this.background){p=[(n+f.spaceoffset)*f.spacefactor]}if(!MathJax.Object.isArray(p)){if(p||k>=0){m=p*i.nest}}else{m=Math.max(1,m+p[0]*i.nest)}if(m>=i.penalty){return false}i.penalty=m;i.values=o;i.W=j;i.w=n;o.lineleading=h.VALUES.lineleading;o.linebreakstyle="before";o.id=this.CHTMLnodeID;return true}});MathJax.Hub.Register.StartupHook("TeX mathchoice Ready",function(){b.TeXmathchoice.Augment({CHTMLbetterBreak:function(i,h){return this.Core().CHTMLbetterBreak(i,h)},CHTMLmoveLine:function(l,h,j,k,i){return this.Core().CHTMLmoveSlice(l,h,j,k,i)}})});b.maction.Augment({CHTMLbetterBreak:function(i,h){return this.Core().CHTMLbetterBreak(i,h)},CHTMLmoveLine:function(l,h,j,k,i){return this.Core().CHTMLmoveSlice(l,h,j,k,i)}});b.semantics.Augment({CHTMLbetterBreak:function(i,h){return(this.data[0]?this.data[0].CHTMLbetterBreak(i,h):false)},CHTMLmoveLine:function(l,h,j,k,i){return(this.data[0]?this.data[0].CHTMLmoveSlice(l,h,j,k,i):null)}});MathJax.Hub.Startup.signal.Post("CommonHTML multiline Ready");MathJax.Ajax.loadComplete(c.autoloadDir+"/multiline.js")}); diff --git a/ext/mathjax/jax/output/CommonHTML/config.js b/ext/mathjax/jax/output/CommonHTML/config.js new file mode 100644 index 000000000..030b7d5fb --- /dev/null +++ b/ext/mathjax/jax/output/CommonHTML/config.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/CommonHTML/config.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.OutputJax.CommonHTML=MathJax.OutputJax({id:"CommonHTML",version:"2.7.5",directory:MathJax.OutputJax.directory+"/CommonHTML",extensionDir:MathJax.OutputJax.extensionDir+"/CommonHTML",autoloadDir:MathJax.OutputJax.directory+"/CommonHTML/autoload",fontDir:MathJax.OutputJax.directory+"/CommonHTML/fonts",webfontDir:MathJax.OutputJax.fontDir+"/HTML-CSS",config:{matchFontHeight:true,scale:100,minScaleAdjust:50,mtextFontInherit:false,undefinedFamily:"STIXGeneral,'Cambria Math','Arial Unicode MS',serif",EqnChunk:(MathJax.Hub.Browser.isMobile?20:100),EqnChunkFactor:1.5,EqnChunkDelay:100,linebreaks:{automatic:false,width:"container"}}});if(!MathJax.Hub.config.delayJaxRegistration){MathJax.OutputJax.CommonHTML.Register("jax/mml")}MathJax.OutputJax.CommonHTML.loadComplete("config.js"); diff --git a/ext/mathjax/jax/output/CommonHTML/fonts/TeX/AMS-Regular.js b/ext/mathjax/jax/output/CommonHTML/fonts/TeX/AMS-Regular.js new file mode 100644 index 000000000..f796ec71e --- /dev/null +++ b/ext/mathjax/jax/output/CommonHTML/fonts/TeX/AMS-Regular.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/CommonHTML/fonts/TeX/AMS-Regular.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function(b){var a="MathJax_AMS";b.FONTDATA.FONTS[a]={className:b.FONTDATA.familyName(a),centerline:270,ascent:1003,descent:463,32:[0,0,250,0,0],65:[701,1,722,17,703],66:[683,1,667,11,620],67:[702,19,722,39,684],68:[683,1,722,16,688],69:[683,1,667,12,640],70:[683,1,611,12,584],71:[702,19,778,39,749],72:[683,1,778,14,762],73:[683,1,389,20,369],74:[683,77,500,6,478],75:[683,1,778,22,768],76:[683,1,667,12,640],77:[683,1,944,17,926],78:[683,20,722,20,702],79:[701,19,778,34,742],80:[683,1,611,16,597],81:[701,181,778,34,742],82:[683,1,722,16,705],83:[702,12,556,28,528],84:[683,1,667,33,635],85:[683,19,722,16,709],86:[683,20,722,0,719],87:[683,19,1000,5,994],88:[683,1,722,16,705],89:[683,1,722,16,704],90:[683,1,667,29,635],107:[683,1,556,17,534],160:[0,0,250,0,0],165:[683,0,750,11,738],174:[709,175,947,32,915],240:[749,21,556,42,509],295:[695,13,540,42,562],710:[845,-561,2333,-14,2346],732:[899,-628,2333,1,2330],770:[845,-561,0,-2347,13],771:[899,-628,0,-2332,-3],989:[605,85,778,55,719],1008:[434,6,667,37,734],8245:[560,-43,275,12,244],8463:[695,13,540,42,562],8487:[684,22,722,44,675],8498:[695,1,556,55,497],8502:[763,21,667,-22,687],8503:[764,43,444,-22,421],8504:[764,43,667,54,640],8513:[705,23,639,37,577],8592:[437,-64,500,64,422],8594:[437,-64,500,58,417],8602:[437,-60,1000,56,942],8603:[437,-60,1000,54,942],8606:[417,-83,1000,56,944],8608:[417,-83,1000,55,943],8610:[417,-83,1111,56,1031],8611:[417,-83,1111,79,1054],8619:[575,41,1000,56,964],8620:[575,41,1000,35,943],8621:[417,-83,1389,57,1331],8622:[437,-60,1000,56,942],8624:[722,0,500,56,444],8625:[722,0,500,55,443],8630:[461,1,1000,17,950],8631:[460,1,1000,46,982],8634:[650,83,778,56,722],8635:[650,83,778,56,721],8638:[694,194,417,188,375],8639:[694,194,417,41,228],8642:[694,194,417,188,375],8643:[694,194,417,41,228],8644:[667,0,1000,55,944],8646:[667,0,1000,55,944],8647:[583,83,1000,55,944],8648:[694,193,833,83,749],8649:[583,83,1000,55,944],8650:[694,194,833,83,749],8651:[514,14,1000,55,944],8652:[514,14,1000,55,944],8653:[534,35,1000,54,942],8654:[534,37,1000,32,965],8655:[534,35,1000,55,943],8666:[611,111,1000,76,944],8667:[611,111,1000,55,923],8669:[417,-83,1000,56,943],8672:[437,-64,1334,64,1251],8674:[437,-64,1334,84,1251],8705:[846,21,500,56,444],8708:[860,166,556,55,497],8709:[587,3,778,54,720],8717:[440,1,429,102,456],8722:[270,-230,500,84,417],8724:[766,93,778,57,722],8726:[430,23,778,91,685],8733:[472,-28,778,56,722],8736:[694,0,722,55,666],8737:[714,20,722,55,666],8738:[551,51,722,55,666],8739:[430,23,222,91,131],8740:[750,252,278,-21,297],8741:[431,23,389,55,331],8742:[750,250,500,-20,518],8756:[471,82,667,24,643],8757:[471,82,667,23,643],8764:[365,-132,778,55,719],8765:[367,-133,778,56,722],8769:[467,-32,778,55,719],8770:[463,-34,778,55,720],8774:[652,155,778,54,720],8776:[481,-50,778,55,719],8778:[579,39,778,51,725],8782:[492,-8,778,56,722],8783:[492,-133,778,56,722],8785:[609,108,778,56,722],8786:[601,101,778,15,762],8787:[601,102,778,14,762],8790:[367,-133,778,56,722],8791:[721,-133,778,56,722],8796:[859,-133,778,56,723],8806:[753,175,778,83,694],8807:[753,175,778,83,694],8808:[752,286,778,82,693],8809:[752,286,778,82,693],8812:[750,250,500,74,425],8814:[708,209,778,82,693],8815:[708,209,778,82,693],8816:[801,303,778,82,694],8817:[801,303,778,82,694],8818:[732,228,778,56,722],8819:[732,228,778,56,722],8822:[681,253,778,44,734],8823:[681,253,778,83,694],8828:[580,153,778,83,694],8829:[580,154,778,82,694],8830:[732,228,778,56,722],8831:[732,228,778,56,722],8832:[705,208,778,82,693],8833:[705,208,778,82,693],8840:[801,303,778,83,693],8841:[801,303,778,82,691],8842:[635,241,778,84,693],8843:[635,241,778,82,691],8847:[539,41,778,83,694],8848:[539,41,778,64,714],8858:[582,82,778,57,721],8859:[582,82,778,57,721],8861:[582,82,778,57,721],8862:[689,0,778,55,722],8863:[689,0,778,55,722],8864:[689,0,778,55,722],8865:[689,0,778,55,722],8872:[694,0,611,55,555],8873:[694,0,722,55,666],8874:[694,0,889,55,833],8876:[695,1,611,-55,554],8877:[695,1,611,-55,554],8878:[695,1,722,-55,665],8879:[695,1,722,-55,665],8882:[539,41,778,83,694],8883:[539,41,778,83,694],8884:[636,138,778,83,694],8885:[636,138,778,83,694],8888:[408,-92,1111,55,1055],8890:[431,212,556,57,500],8891:[716,0,611,55,555],8892:[716,0,611,55,555],8901:[189,0,278,55,222],8903:[545,44,778,55,720],8905:[492,-8,778,146,628],8906:[492,-8,778,146,628],8907:[694,22,778,55,722],8908:[694,22,778,55,722],8909:[464,-36,778,56,722],8910:[578,21,760,83,676],8911:[578,22,760,83,676],8912:[540,40,778,84,694],8913:[540,40,778,83,693],8914:[598,22,667,55,611],8915:[598,22,667,55,611],8916:[736,22,667,56,611],8918:[541,41,778,82,693],8919:[541,41,778,82,693],8920:[568,67,1333,56,1277],8921:[568,67,1333,55,1277],8922:[886,386,778,83,674],8923:[886,386,778,83,674],8926:[734,0,778,83,694],8927:[734,0,778,82,694],8928:[801,303,778,82,693],8929:[801,303,778,82,694],8934:[730,359,778,55,719],8935:[730,359,778,55,719],8936:[730,359,778,55,719],8937:[730,359,778,55,719],8938:[706,208,778,82,693],8939:[706,208,778,82,693],8940:[802,303,778,82,693],8941:[801,303,778,82,693],8994:[378,-122,778,55,722],8995:[378,-143,778,55,722],9416:[709,175,902,8,894],9484:[694,-306,500,55,444],9488:[694,-306,500,55,444],9492:[366,22,500,55,444],9496:[366,22,500,55,444],9585:[694,195,889,0,860],9586:[694,195,889,0,860],9632:[689,0,778,55,722],9633:[689,0,778,55,722],9650:[575,20,722,84,637],9651:[575,20,722,84,637],9654:[539,41,778,83,694],9660:[576,19,722,84,637],9661:[576,19,722,84,637],9664:[539,41,778,83,694],9674:[716,132,667,56,611],9733:[694,111,944,49,895],10003:[706,34,833,84,749],10016:[716,22,833,48,786],10731:[716,132,667,56,611],10846:[813,97,611,55,555],10877:[636,138,778,83,694],10878:[636,138,778,83,694],10885:[762,290,778,55,722],10886:[762,290,778,55,722],10887:[635,241,778,82,693],10888:[635,241,778,82,693],10889:[761,387,778,57,718],10890:[761,387,778,57,718],10891:[1003,463,778,83,694],10892:[1003,463,778,83,694],10901:[636,138,778,83,694],10902:[636,138,778,83,694],10933:[752,286,778,82,693],10934:[752,286,778,82,693],10935:[761,294,778,57,717],10936:[761,294,778,57,717],10937:[761,337,778,57,718],10938:[761,337,778,57,718],10949:[753,215,778,84,694],10950:[753,215,778,83,694],10955:[783,385,778,82,693],10956:[783,385,778,82,693],57350:[430,23,222,-20,240],57351:[431,24,389,-20,407],57352:[605,85,778,55,719],57353:[434,6,667,37,734],57356:[752,284,778,82,693],57357:[752,284,778,82,693],57358:[919,421,778,82,694],57359:[801,303,778,82,694],57360:[801,303,778,82,694],57361:[919,421,778,82,694],57366:[828,330,778,82,694],57367:[752,332,778,82,694],57368:[828,330,778,82,694],57369:[752,333,778,82,693],57370:[634,255,778,84,693],57371:[634,254,778,82,691]};b.fontLoaded("TeX/"+a.substr(8))})(MathJax.OutputJax.CommonHTML); diff --git a/ext/mathjax/jax/output/CommonHTML/fonts/TeX/SansSerif-Regular.js b/ext/mathjax/jax/output/CommonHTML/fonts/TeX/SansSerif-Regular.js new file mode 100644 index 000000000..aab338789 --- /dev/null +++ b/ext/mathjax/jax/output/CommonHTML/fonts/TeX/SansSerif-Regular.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/CommonHTML/fonts/TeX/SansSerif-Regular.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function(b){var a="MathJax_SansSerif";b.FONTDATA.FONTS[a]={className:b.FONTDATA.familyName(a),centerline:250,ascent:750,descent:250,32:[0,0,250,0,0],33:[694,0,319,110,208],34:[694,-471,500,32,325],35:[694,194,833,56,777],36:[750,56,500,44,444],37:[750,56,833,56,776],38:[716,22,758,42,702],39:[694,-471,278,89,188],40:[750,250,389,74,333],41:[750,250,389,55,314],42:[750,-306,500,63,436],43:[583,82,778,56,722],44:[98,125,278,89,188],45:[259,-186,333,11,277],46:[98,0,278,90,188],47:[750,250,500,56,445],48:[678,22,500,39,460],49:[678,0,500,83,430],50:[677,0,500,42,449],51:[678,22,500,42,457],52:[656,0,500,28,471],53:[656,21,500,33,449],54:[677,22,500,42,457],55:[656,11,500,42,457],56:[678,22,500,43,456],57:[677,22,500,42,457],58:[444,0,278,90,188],59:[444,125,278,89,188],61:[370,-130,778,56,722],63:[704,0,472,55,416],64:[704,11,667,56,612],65:[694,0,667,28,638],66:[694,0,667,90,610],67:[705,11,639,59,587],68:[694,0,722,88,666],69:[691,0,597,86,554],70:[691,0,569,86,526],71:[704,11,667,59,599],72:[694,0,708,86,621],73:[694,0,278,87,191],74:[694,22,472,42,388],75:[694,0,694,88,651],76:[694,0,542,87,499],77:[694,0,875,92,782],78:[694,0,708,88,619],79:[715,22,736,55,680],80:[694,0,639,88,583],81:[715,125,736,55,680],82:[694,0,646,88,617],83:[716,22,556,44,500],84:[688,0,681,36,644],85:[694,22,688,87,600],86:[694,0,667,14,652],87:[694,0,944,14,929],88:[694,0,667,14,652],89:[694,0,667,3,663],90:[694,0,611,55,560],91:[750,250,289,94,266],93:[750,250,289,22,194],94:[694,-527,500,78,421],95:[-38,114,500,0,499],97:[460,10,481,38,407],98:[694,11,517,75,482],99:[460,10,444,34,415],100:[694,10,517,33,441],101:[461,10,444,28,415],102:[705,0,306,27,347],103:[455,206,500,28,485],104:[694,0,517,73,443],105:[680,0,239,67,171],106:[680,205,267,-59,192],107:[694,0,489,76,471],108:[694,0,239,74,164],109:[455,0,794,73,720],110:[455,0,517,73,443],111:[460,10,500,28,471],112:[455,194,517,75,483],113:[455,194,517,33,441],114:[455,0,342,74,327],115:[460,10,383,28,360],116:[571,10,361,18,333],117:[444,10,517,73,443],118:[444,0,461,14,446],119:[444,0,683,14,668],120:[444,0,461,0,460],121:[444,204,461,14,446],122:[444,0,435,28,402],126:[327,-193,500,83,416],160:[0,0,250,0,0],305:[444,0,239,74,164],567:[444,205,267,-59,192],768:[694,-527,0,-417,-199],769:[694,-527,0,-302,-84],770:[694,-527,0,-422,-79],771:[677,-543,0,-417,-84],772:[631,-552,0,-431,-70],774:[694,-508,0,-427,-74],775:[680,-576,0,-302,-198],776:[680,-582,0,-397,-104],778:[694,-527,0,-319,-99],779:[694,-527,0,-399,-84],780:[654,-487,0,-422,-79],915:[691,0,542,87,499],916:[694,0,833,42,790],920:[716,21,778,56,722],923:[694,0,611,28,582],926:[688,0,667,42,624],928:[691,0,708,86,621],931:[694,0,722,55,666],933:[716,0,778,55,722],934:[694,0,722,55,666],936:[694,0,778,55,722],937:[716,0,722,44,677],8211:[312,-236,500,0,499],8212:[312,-236,1000,0,999],8216:[694,-471,278,90,189],8217:[694,-471,278,89,188],8220:[694,-471,500,174,467],8221:[694,-471,500,32,325]};b.fontLoaded("TeX/"+a.substr(8))})(MathJax.OutputJax.CommonHTML); diff --git a/ext/mathjax/jax/output/CommonHTML/fonts/TeX/fontdata.js b/ext/mathjax/jax/output/CommonHTML/fonts/TeX/fontdata.js new file mode 100644 index 000000000..a357050c7 --- /dev/null +++ b/ext/mathjax/jax/output/CommonHTML/fonts/TeX/fontdata.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/CommonHTML/fonts/TeX/fontdata.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function(a,c,r){var q="2.7.5";var m="MathJax_Main",s="MathJax_Main-Bold",o="MathJax_Math-Italic",i="MathJax_AMS",h="MathJax_Size1",g="MathJax_Size2",f="MathJax_Size3",d="MathJax_Size4";var j="H",b="V",l={load:"extra",dir:j},e={load:"extra",dir:b};var k=[8722,m,0,0,0,-0.31,-0.31];var n=[61,m,0,0,0,0,0.1];var p=a.config.undefinedFamily;MathJax.Hub.Insert(a.config.styles,{".MJXc-TeX-unknown-R":{"font-family":p,"font-style":"normal","font-weight":"normal"},".MJXc-TeX-unknown-I":{"font-family":p,"font-style":"italic","font-weight":"normal"},".MJXc-TeX-unknown-B":{"font-family":p,"font-style":"normal","font-weight":"bold"},".MJXc-TeX-unknown-BI":{"font-family":p,"font-style":"italic","font-weight":"bold"}});a.TEX=a.TEXDEF;a.FONTDEF.TeX={version:q,baselineskip:1.2,lineH:0.8,lineD:0.2,FONTS:{MathJax_AMS:"TeX/AMS-Regular.js","MathJax_Caligraphic-Bold":"TeX/Caligraphic-Bold.js",MathJax_Fraktur:"TeX/Fraktur-Regular.js","MathJax_Fraktur-Bold":"TeX/Fraktur-Bold.js","MathJax_Math-BoldItalic":"TeX/Math-BoldItalic.js",MathJax_SansSerif:"TeX/SansSerif-Regular.js","MathJax_SansSerif-Bold":"TeX/SansSerif-Bold.js","MathJax_SansSerif-Italic":"TeX/SansSerif-Italic.js",MathJax_Script:"TeX/Script-Regular.js",MathJax_Typewriter:"TeX/Typewriter-Regular.js"},UNKNOWN:{R:{className:"MJXc-TeX-unknown-R"},I:{className:"MJXc-TeX-unknown-I"},B:{className:"MJXc-TeX-unknown-B"},BI:{className:"MJXc-TeX-unknown-BI"}},VARIANT:{normal:{fonts:[m,h,i],cache:{},offsetG:945,variantG:"italic",remap:{913:65,914:66,917:69,918:90,919:72,921:73,922:75,924:77,925:78,927:79,929:80,932:84,935:88,57696:[8594,"-TeX-vec"],8214:8741,8726:[8726,"-TeX-variant",true],8463:[8463,"-TeX-variant",true],8242:[39,"sans-serif-italic"],10744:[47,c.VARIANT.ITALIC]}},bold:{fonts:[s],bold:true,cache:{},chain:"normal",offsetG:945,variantG:"bold-italic",remap:{913:65,914:66,917:69,918:90,919:72,921:73,922:75,924:77,925:78,927:79,929:80,932:84,935:88,10744:[47,"bold-italic"],57696:[8594,"-TeX-vec-bold"],8214:8741,8602:"\u2190\u0338",8603:"\u2192\u0338",8622:"\u2194\u0338",8653:"\u21D0\u0338",8654:"\u21D4\u0338",8655:"\u21D2\u0338",8708:"\u2203\u0338",8740:"\u2223\u0338",8742:"\u2225\u0338",8769:"\u223C\u0338",8775:"\u2245\u0338",8814:"<\u0338",8815:">\u0338",8816:"\u2264\u0338",8817:"\u2265\u0338",8832:"\u227A\u0338",8833:"\u227B\u0338",8840:"\u2286\u0338",8841:"\u2287\u0338",8876:"\u22A2\u0338",8877:"\u22A8\u0338",8928:"\u227C\u0338",8929:"\u227D\u0338"}},italic:{fonts:[o,"MathJax_Main-Italic"],italic:true,cache:{},chain:"normal",remap:{913:65,914:66,917:69,918:90,919:72,921:73,922:75,924:77,925:78,927:79,929:80,932:84,935:88}},"bold-italic":{fonts:["MathJax_Math-BoldItalic"],bold:true,italic:true,cache:{},chain:"bold",remap:{913:65,914:66,917:69,918:90,919:72,921:73,922:75,924:77,925:78,927:79,929:80,932:84,935:88}},"double-struck":{fonts:[i,m,h],cache:{}},fraktur:{fonts:["MathJax_Fraktur"],cache:{},chain:"normal"},"bold-fraktur":{fonts:["MathJax_Fraktur-Bold"],bold:true,cache:{},chain:"bold"},script:{fonts:["MathJax_Script"],cache:{},chain:"normal"},"bold-script":{fonts:["MathJax_Script"],bold:true,cache:{},chain:"bold"},"sans-serif":{fonts:["MathJax_SansSerif"],cache:{},chain:"normal"},"bold-sans-serif":{fonts:["MathJax_SansSerif-Bold"],bold:true,cache:{},chain:"bold"},"sans-serif-italic":{fonts:["MathJax_SansSerif-Italic"],italic:true,cache:{},chain:"italic"},"sans-serif-bold-italic":{fonts:["MathJax_SansSerif-Italic"],bold:true,italic:true,cache:{},chain:"italic"},monospace:{fonts:["MathJax_Typewriter"],cache:{},chain:"normal"},"-tex-caligraphic":{fonts:["MathJax_Caligraphic"],offsetA:65,variantA:"italic",cache:{},chain:"normal"},"-tex-oldstyle":{fonts:["MathJax_Caligraphic"],cache:{},chain:"normal"},"-tex-mathit":{fonts:["MathJax_Main-Italic"],italic:true,noIC:true,cache:{},chain:"normal",remap:{913:65,914:66,917:69,918:90,919:72,921:73,922:75,924:77,925:78,927:79,929:80,932:84,935:88}},"-TeX-variant":{fonts:[i,m,h],cache:{},remap:{8808:57356,8809:57357,8816:57361,8817:57358,10887:57360,10888:57359,8740:57350,8742:57351,8840:57366,8841:57368,8842:57370,8843:57371,10955:57367,10956:57369,988:57352,1008:57353,8726:[8726,c.VARIANT.NORMAL,true],8463:[8463,c.VARIANT.NORMAL,true]}},"-TeX-vec":{fonts:["MathJax_Vector"],cache:{}},"-TeX-vec-bold":{fonts:["MathJax_Vector-Bold"],cache:{}},"-largeOp":{fonts:[g,h,m,i],cache:{}},"-smallOp":{fonts:[h,m,i],cache:{}},"-tex-caligraphic-bold":{fonts:["MathJax_Caligraphic-Bold","MathJax_Main-Bold"],bold:true,cache:{},chain:"normal",offsetA:65,variantA:"bold-italic"},"-tex-oldstyle-bold":{fonts:["MathJax_Caligraphic-Bold","MathJax_Main-Bold"],bold:true,cache:{},chain:"normal"}},RANGES:[{name:"alpha",low:97,high:122,offset:"A",add:32},{name:"number",low:48,high:57,offset:"N"},{name:"greek",low:945,high:1014,offset:"G"}],REMAP:{10:32,8254:713,65079:9182,65080:9183,183:8901,697:8242,978:933,8710:916,8213:8212,8215:95,8226:8729,8260:47,8965:8892,8966:10846,9642:9632,9652:9650,9653:9651,9656:9654,9662:9660,9663:9661,9666:9664,9001:10216,9002:10217,12296:10216,12297:10217,10072:8739,10799:215,9723:9633,9724:9632,8450:[67,c.VARIANT.DOUBLESTRUCK],8459:[72,c.VARIANT.SCRIPT],8460:[72,c.VARIANT.FRAKTUR],8461:[72,c.VARIANT.DOUBLESTRUCK],8462:[104,c.VARIANT.ITALIC],8464:[74,c.VARIANT.SCRIPT],8465:[73,c.VARIANT.FRAKTUR],8466:[76,c.VARIANT.SCRIPT],8469:[78,c.VARIANT.DOUBLESTRUCK],8473:[80,c.VARIANT.DOUBLESTRUCK],8474:[81,c.VARIANT.DOUBLESTRUCK],8475:[82,c.VARIANT.SCRIPT],8476:[82,c.VARIANT.FRAKTUR],8477:[82,c.VARIANT.DOUBLESTRUCK],8484:[90,c.VARIANT.DOUBLESTRUCK],8486:[937,c.VARIANT.NORMAL],8488:[90,c.VARIANT.FRAKTUR],8492:[66,c.VARIANT.SCRIPT],8493:[67,c.VARIANT.FRAKTUR],8496:[69,c.VARIANT.SCRIPT],8497:[70,c.VARIANT.SCRIPT],8499:[77,c.VARIANT.SCRIPT],8775:8774,8988:9484,8989:9488,8990:9492,8991:9496,8708:"\u2203\u0338",8716:"\u220B\u0338",8772:"\u2243\u0338",8777:"\u2248\u0338",8802:"\u2261\u0338",8813:"\u224D\u0338",8820:"\u2272\u0338",8821:"\u2273\u0338",8824:"\u2276\u0338",8825:"\u2277\u0338",8836:"\u2282\u0338",8837:"\u2283\u0338",8930:"\u2291\u0338",8931:"\u2292\u0338",10764:"\u222C\u222C",8243:"\u2032\u2032",8244:"\u2032\u2032\u2032",8246:"\u2035\u2035",8247:"\u2035\u2035\u2035",8279:"\u2032\u2032\u2032\u2032",},REMAPACCENT:{"\u0300":"\u02CB","\u0301":"\u02CA","\u0302":"\u02C6","\u0303":"\u02DC","\u0304":"\u02C9","\u0306":"\u02D8","\u0307":"\u02D9","\u0308":"\u00A8","\u030A":"\u02DA","\u030C":"\u02C7","\u20D7":"\uE160","\u2192":"\uE160","\u2032":"'","\u2035":"`","\u20D0":"\u21BC","\u20D1":"\u21C0","\u20D6":"\u2190","\u20E1":"\u2194","\u20F0":"*","\u20DB":"...","\u20DC":"...."},REMAPACCENTUNDER:{"\u20EC":"\u21C1","\u20ED":"\u21BD","\u20EE":"\u2190","\u20EF":"\u2192","\u20DB":"...","\u20DC":"...."},PLANE1MAP:[[119808,119833,65,c.VARIANT.BOLD],[119834,119859,97,c.VARIANT.BOLD],[119860,119885,65,c.VARIANT.ITALIC],[119886,119911,97,c.VARIANT.ITALIC],[119912,119937,65,c.VARIANT.BOLDITALIC],[119938,119963,97,c.VARIANT.BOLDITALIC],[119964,119989,65,c.VARIANT.SCRIPT],[120068,120093,65,c.VARIANT.FRAKTUR],[120094,120119,97,c.VARIANT.FRAKTUR],[120120,120145,65,c.VARIANT.DOUBLESTRUCK],[120172,120197,65,c.VARIANT.BOLDFRAKTUR],[120198,120223,97,c.VARIANT.BOLDFRAKTUR],[120224,120249,65,c.VARIANT.SANSSERIF],[120250,120275,97,c.VARIANT.SANSSERIF],[120276,120301,65,c.VARIANT.BOLDSANSSERIF],[120302,120327,97,c.VARIANT.BOLDSANSSERIF],[120328,120353,65,c.VARIANT.SANSSERIFITALIC],[120354,120379,97,c.VARIANT.SANSSERIFITALIC],[120432,120457,65,c.VARIANT.MONOSPACE],[120458,120483,97,c.VARIANT.MONOSPACE],[120488,120513,913,c.VARIANT.BOLD],[120546,120570,913,c.VARIANT.ITALIC],[120572,120603,945,c.VARIANT.ITALIC],[120604,120628,913,c.VARIANT.BOLDITALIC],[120630,120661,945,c.VARIANT.BOLDITALIC],[120662,120686,913,c.VARIANT.BOLDSANSSERIF],[120720,120744,913,c.VARIANT.SANSSERIFBOLDITALIC],[120782,120791,48,c.VARIANT.BOLD],[120802,120811,48,c.VARIANT.SANSSERIF],[120812,120821,48,c.VARIANT.BOLDSANSSERIF],[120822,120831,48,c.VARIANT.MONOSPACE]],REMAPGREEK:{913:65,914:66,917:69,918:90,919:72,921:73,922:75,924:77,925:78,927:79,929:80,930:920,932:84,935:88,938:8711,970:8706,971:1013,972:977,973:1008,974:981,975:1009,976:982},RemapPlane1:function(w,v){for(var u=0,t=this.PLANE1MAP.length;u *":{position:"absolute"},".MJXc-bevelled > *":{display:"inline-block"},".mjx-stack":{display:"inline-block"},".mjx-op":{display:"block"},".mjx-under":{display:"table-cell"},".mjx-over":{display:"block"},".mjx-over > *":{"padding-left":"0px!important","padding-right":"0px!important"},".mjx-under > *":{"padding-left":"0px!important","padding-right":"0px!important"},".mjx-stack > .mjx-sup":{display:"block"},".mjx-stack > .mjx-sub":{display:"block"},".mjx-prestack > .mjx-presup":{display:"block"},".mjx-prestack > .mjx-presub":{display:"block"},".mjx-delim-h > .mjx-char":{display:"inline-block"},".mjx-surd":{"vertical-align":"top"},".mjx-mphantom *":{visibility:"hidden"},".mjx-merror":{"background-color":"#FFFF88",color:"#CC0000",border:"1px solid #CC0000",padding:"2px 3px","font-style":"normal","font-size":"90%"},".mjx-annotation-xml":{"line-height":"normal"},".mjx-menclose > svg":{fill:"none",stroke:"currentColor"},".mjx-mtr":{display:"table-row"},".mjx-mlabeledtr":{display:"table-row"},".mjx-mtd":{display:"table-cell","text-align":"center"},".mjx-label":{display:"table-row"},".mjx-box":{display:"inline-block"},".mjx-block":{display:"block"},".mjx-span":{display:"inline"},".mjx-char":{display:"block","white-space":"pre"},".mjx-itable":{display:"inline-table",width:"auto"},".mjx-row":{display:"table-row"},".mjx-cell":{display:"table-cell"},".mjx-table":{display:"table",width:"100%"},".mjx-line":{display:"block",height:0},".mjx-strut":{width:0,"padding-top":k+"em"},".mjx-vsize":{width:0},".MJXc-space1":{"margin-left":".167em"},".MJXc-space2":{"margin-left":".222em"},".MJXc-space3":{"margin-left":".278em"},".mjx-chartest":{display:"block",visibility:"hidden",position:"absolute",top:0,"line-height":"normal","font-size":"500%"},".mjx-chartest .mjx-char":{display:"inline"},".mjx-chartest .mjx-box":{"padding-top":"1000px"},".MJXc-processing":{visibility:"hidden",position:"fixed",width:0,height:0,overflow:"hidden"},".MJXc-processed":{display:"none"},".mjx-test":{"font-style":"normal","font-weight":"normal","font-size":"100%","font-size-adjust":"none","text-indent":0,"text-transform":"none","letter-spacing":"normal","word-spacing":"normal",overflow:"hidden",height:"1px"},".mjx-test.mjx-test-display":{display:"table!important"},".mjx-test.mjx-test-inline":{display:"inline!important","margin-right":"-1px"},".mjx-test.mjx-test-default":{display:"block!important",clear:"both"},".mjx-ex-box":{display:"inline-block!important",position:"absolute",overflow:"hidden","min-height":0,"max-height":"none",padding:0,border:0,margin:0,width:"1px",height:"60ex"},".mjx-test-inline .mjx-left-box":{display:"inline-block",width:0,"float":"left"},".mjx-test-inline .mjx-right-box":{display:"inline-block",width:0,"float":"right"},".mjx-test-display .mjx-right-box":{display:"table-cell!important",width:"10000em!important","min-width":0,"max-width":"none",padding:0,border:0,margin:0},"#MathJax_CHTML_Tooltip":{"background-color":"InfoBackground",color:"InfoText",border:"1px solid black","box-shadow":"2px 2px 5px #AAAAAA","-webkit-box-shadow":"2px 2px 5px #AAAAAA","-moz-box-shadow":"2px 2px 5px #AAAAAA","-khtml-box-shadow":"2px 2px 5px #AAAAAA",padding:"3px 4px","z-index":401,position:"absolute",left:0,top:0,width:"auto",height:"auto",display:"none"}};var i=1000000;var n=5;var c={},r=MathJax.Hub.config;a.Augment({settings:f.config.menuSettings,config:{styles:p},Config:function(){if(!this.require){this.require=[]}this.SUPER(arguments).Config.call(this);var s=this.settings;if(s.scale){this.config.scale=s.scale}this.require.push(this.fontDir+"/TeX/fontdata.js");this.require.push(MathJax.OutputJax.extensionDir+"/MathEvents.js");c=this.config.linebreaks},Startup:function(){e=MathJax.Extension.MathEvents.Event;q=MathJax.Extension.MathEvents.Touch;h=MathJax.Extension.MathEvents.Hover;this.ContextMenu=e.ContextMenu;this.Mousedown=e.AltContextMenu;this.Mouseover=h.Mouseover;this.Mouseout=h.Mouseout;this.Mousemove=h.Mousemove;var s=a.addElement(document.body,"mjx-block",{style:{display:"block",width:"5in"}});this.pxPerInch=s.offsetWidth/5;s.parentNode.removeChild(s);this.TestSpan=a.Element("mjx-test",{style:{left:"1em"}},[["mjx-left-box"],["mjx-ex-box"],["mjx-right-box"]]);return o.Styles(this.config.styles,["InitializeCHTML",this])},InitializeCHTML:function(){this.getDefaultExEm();if(this.defaultEm){return}var s=MathJax.Callback();o.timer.start(o,function(t){if(t.time(s)){f.signal.Post(["CommonHTML Jax - no default em size"]);return}a.getDefaultExEm();if(a.defaultEm){s()}else{setTimeout(t,t.delay)}},this.defaultEmDelay,this.defaultEmTimeout);return s},defaultEmDelay:100,defaultEmTimeout:1000,getDefaultExEm:function(){var s=document.body.appendChild(this.TestSpan.cloneNode(true));s.className+=" mjx-test-inline mjx-test-default";this.defaultEm=this.getFontSize(s);this.defaultEx=s.childNodes[1].offsetHeight/60;this.defaultWidth=Math.max(0,s.lastChild.offsetLeft-s.firstChild.offsetLeft-2);document.body.removeChild(s)},getFontSize:(window.getComputedStyle?function(t){var s=window.getComputedStyle(t);return parseFloat(s.fontSize)}:function(s){return s.style.pixelLeft}),getMaxWidth:(window.getComputedStyle?function(t){var s=window.getComputedStyle(t);if(s.maxWidth!=="none"){return parseFloat(s.maxWidth)}return 0}:function(t){var s=t.currentStyle.maxWidth;if(s!=="none"){if(s.match(/\d*px/)){return parseFloat(s)}var u=t.style.left;t.style.left=s;s=t.style.pixelLeft;t.style.left=u;return s}return 0}),loadFont:function(s){f.RestartAfter(o.Require(this.fontDir+"/"+s))},fontLoaded:function(s){if(!s.match(/-|fontdata/)){s+="-Regular"}if(!s.match(/\.js$/)){s+=".js"}MathJax.Callback.Queue(["Post",f.Startup.signal,"CommonHTML - font data loaded for "+s],["loadComplete",o,this.fontDir+"/"+s])},Element:function(s,u,t){if(s.substr(0,4)==="mjx-"){if(!u){u={}}if(u.isMathJax==null){u.isMathJax=true}if(u.className){u.className=s+" "+u.className}else{u.className=s}s="span"}return this.HTMLElement(s,u,t)},addElement:function(u,s,v,t){return u.appendChild(this.Element(s,v,t))},HTMLElement:m.Element,ucMatch:m.ucMatch,setScript:m.setScript,getNode:function(x,w){var u=RegExp("\\b"+w+"\\b");var t=[];while(x){for(var v=0,s=x.childNodes.length;v=x.CHTMLlast+x.CHTMLchunk){this.postTranslate(x);x.CHTMLchunk=Math.floor(x.CHTMLchunk*this.config.EqnChunkFactor);x.CHTMLdelay=true}},initCHTML:function(t,s){},savePreview:function(s){var t=s.MathJax.preview;if(t&&t.parentNode){s.MathJax.tmpPreview=document.createElement("span");t.parentNode.replaceChild(s.MathJax.tmpPreview,t)}},restorePreview:function(s){var t=s.MathJax.tmpPreview;if(t){t.parentNode.replaceChild(s.MathJax.preview,t);delete s.MathJax.tmpPreview}},getMetrics:function(s){var t=s.CHTML;this.jax=s;this.em=t.em;this.outerEm=t.outerEm;this.scale=t.scale;this.cwidth=t.cwidth;this.linebreakWidth=t.lineWidth},postTranslate:function(x){var t=x.jax[this.id];for(var v=x.CHTMLlast,s=x.CHTMLeqn;vC.h){t.marginTop=a.Em(C.t-C.h)}if(C.b>C.d){t.marginBottom=a.Em(C.b-C.d)}if(C.l<0){t.paddingLeft=a.Em(-C.l)}if(C.r>C.w){t.marginRight=a.Em(C.r-C.w)}t.position="absolute";var z=v.offsetWidth,x=v.offsetHeight,D=A.firstChild.offsetHeight,w=A.firstChild.offsetWidth;v.style.position="";return{Y:-e.getBBox(B).h,mW:w,mH:D,zW:z,zH:x}},Remove:function(s){var t=document.getElementById(s.inputID+"-Frame");if(t&&s.CHTML.display){t=t.parentNode}if(t){t.parentNode.removeChild(t)}delete s.CHTML},ID:0,idPostfix:"",GetID:function(){this.ID++;return this.ID},MATHSPACE:{veryverythinmathspace:1/18,verythinmathspace:2/18,thinmathspace:3/18,mediummathspace:4/18,thickmathspace:5/18,verythickmathspace:6/18,veryverythickmathspace:7/18,negativeveryverythinmathspace:-1/18,negativeverythinmathspace:-2/18,negativethinmathspace:-3/18,negativemediummathspace:-4/18,negativethickmathspace:-5/18,negativeverythickmathspace:-6/18,negativeveryverythickmathspace:-7/18,thin:0.04,medium:0.06,thick:0.1,infinity:i},SPACECLASS:{thinmathspace:"MJXc-space1",mediummathspace:"MJXc-space2",thickmathspace:"MJXc-space3"},pxPerInch:96,em:16,maxStretchyParts:1000,FONTDEF:{},TEXDEF:{x_height:0.442,quad:1,num1:0.676508,num2:0.393732,num3:0.44373,denom1:0.685951,denom2:0.344841,sup1:0.412892,sup2:0.362892,sup3:0.288888,sub1:0.15,sub2:0.247217,sup_drop:0.386108,sub_drop:0.05,delim1:2.39,delim2:1,axis_height:0.25,rule_thickness:0.06,big_op_spacing1:0.111111,big_op_spacing2:0.166666,big_op_spacing3:0.2,big_op_spacing4:0.45,big_op_spacing5:0.1,surd_height:0.075,scriptspace:0.05,nulldelimiterspace:0.12,delimiterfactor:901,delimitershortfall:0.3,min_rule_thickness:1.25},isChar:function(s){if(s.length===1){return true}if(s.length!==2){return false}var t=s.charCodeAt(0);return(t>=55296&&t<56319)},unicodeChar:function(s){if(s<65535){return String.fromCharCode(s)}s-=65536;return String.fromCharCode((s>>10)+55296)+String.fromCharCode((s&1023)+56320)},getUnicode:function(s){var t=s.text.charCodeAt(s.i);s.i++;if(t>=55296&&t<56319){t=(((t-55296)<<10)+(s.text.charCodeAt(s.i)-56320))+65536;s.i++}return t},getCharList:function(w,v){var u,z,s=w.cache,B=v;if(s[v]){return s[v]}if(v>65535&&this.FONTDATA.RemapPlane1){var y=this.FONTDATA.RemapPlane1(v,w);v=y.n;w=y.variant}var t=this.FONTDATA.RANGES,A=this.FONTDATA.VARIANT;if(v>=t[0].low&&v<=t[t.length-1].high){for(u=0,z=t.length;u=t[u].low&&v<=t[u].high){if(t[u].remap&&t[u].remap[v]){v=x+t[u].remap[v]}else{v=v-t[u].low+x;if(t[u].add){v+=t[u].add}}if(w["variant"+t[u].offset]){w=A[w["variant"+t[u].offset]]}break}}}s[B]=this.remapChar(w,v,0);return s[B]},remapChar:function(t,y,w){var v=[],x=this.FONTDATA.VARIANT;if(t.remap&&t.remap[y]){y=t.remap[y];if(t.remap.variant){t=x[t.remap.variant]}}else{if(this.FONTDATA.REMAP[y]&&!t.noRemap){y=this.FONTDATA.REMAP[y]}}if(g(y)){if(y[2]){w=n}t=x[y[1]];y=y[0]}if(typeof(y)==="string"){var s={text:y,i:0,length:y.length};while(s.i(B.a||0)){B.a=u.a}u.className=w.className;var t=w[D.n];if(A){var v=w;if(g(A)){v=a.FONTDATA.FONTS[A[1]];A=A[0];if(typeof(v)==="string"){a.loadFont(v)}}if(v[D.n]){a.fixChar(v[D.n],D.n)}t=a.fixChar(v[A],A);u.className=v.className}u.text+=t.c;if(B.hB.w+t[3]){B.l=B.w+t[3]}if(B.rw.a){w.a=u.a}}s=this.flushText(s,u,t.style);if(v[2]<3){s.style.width=a.Em(v[2])}},flushText:function(t,u,s){t=a.addElement(t,"mjx-charbox",{className:u.className,style:s},[u.text]);if(u.a){t.style.paddingBottom=a.Em(u.a)}u.text="";u.className=null;u.a=0;u.flushed=true;return t}},handleText:function(u,x,t,w){if(u.childNodes.length===0){a.addElement(u,"mjx-char");w=a.BBOX.empty(w)}if(typeof(t)==="string"){t=this.FONTDATA.VARIANT[t]}if(!t){t=this.FONTDATA.VARIANT[d.VARIANT.NORMAL]}var s={text:x,i:0,length:x.length},v=[];if(t.style&&s.length){v.push(this.styledText(t,x))}else{while(s.i-w.b){u.firstChild.style.paddingBottom=this.EmRounded(w.d+w.b)}return w},createDelimiter:function(x,s,u,A,v){if(!s){var B=this.BBOX.zero();B.w=B.r=this.TEX.nulldelimiterspace;a.addElement(x,"mjx-box",{style:{width:B.w}});return B}if(!(u instanceof Array)){u=[u,u]}var z=u[1];u=u[0];var t={alias:s};while(t.alias){s=t.alias;t=this.FONTDATA.DELIMITERS[s];if(!t){t={HW:[0,this.FONTDATA.VARIANT[d.VARIANT.NORMAL]]}}}if(t.load){f.RestartAfter(o.Require(this.fontDir+"/TeX/fontdata-"+t.load+".js"))}for(var y=0,w=t.HW.length;y=u-0.01||(y==w-1&&!t.stretch)){if(t.HW[y][3]){s=t.HW[y][3]}B=this.createChar(x,[s,t.HW[y][1]],(t.HW[y][2]||1),v);B.offset=0.6*B.w;if(A){B.scale=A.scale;A.rscale=A.rscale}return B}}if(!t.stretch){return B}return this["extendDelimiter"+t.dir](x,z,t.stretch,A,v)},extendDelimiterV:function(E,x,P,w,C){E=a.addElement(E,"mjx-delim-v");var N=a.Element("span");var B,A,O,v,I,t,F,y,G=1,M;I=this.createChar(N,(P.top||P.ext),1,C);B=N.removeChild(N.firstChild);t=this.createChar(N,(P.bot||P.ext),1,C);A=N.removeChild(N.firstChild);F=y=a.BBOX.zero();var J=I.h+I.d+t.h+t.d-l;E.appendChild(B);if(P.mid){F=this.createChar(N,P.mid,1,C);O=N.removeChild(N.firstChild);J+=F.h+F.d;G=2}if(P.min&&xJ){y=this.createChar(N,P.ext,1,C);v=N.removeChild(N.firstChild);var L=y.h+y.d,u=L-l;var D=Math.min(Math.ceil((x-J)/(G*u)),this.maxStretchyParts);if(P.fullExtenders){x=D*G*u+J}else{u=(x-J)/(G*D)}M=y.d+y.a-L/2;v.style.margin=v.style.padding="";v.style.lineHeight=a.Em(u);v.style.marginBottom=a.Em(M-l/2/G);v.style.marginTop=a.Em(-M-l/2/G);var K=v.textContent,z="\n"+K;while(--D>0){K+=z}v.textContent=K;E.appendChild(v);if(P.mid){E.appendChild(O);E.appendChild(v.cloneNode(true))}}else{M=(x-J-l)/G;B.style.marginBottom=a.Em(M+parseFloat(B.style.marginBottom||"0"));if(P.mid){E.appendChild(O)}A.style.marginTop=a.Em(M+parseFloat(A.style.marginTop||"0"))}E.appendChild(A);var s=a.BBOX({w:Math.max(I.w,y.w,t.w,F.w),l:Math.min(I.l,y.l,t.l,F.l),r:Math.max(I.r,y.r,t.r,F.r),h:x-t.d,d:t.d,t:x-t.d,b:t.d});s.offset=0.5*s.w;if(w){s.scale=w.scale;s.rscale=w.rscale}return s},extendDelimiterH:function(F,s,P,v,D){F=a.addElement(F,"mjx-delim-h");var N=a.Element("span");var t,M,O,u,K,C,x,G,z,H=1;C=this.createChar(N,(P.left||P.rep),1,D);t=N.removeChild(N.firstChild);x=this.createChar(N,(P.right||P.rep),1,D);M=N.removeChild(N.firstChild);z=this.createChar(N,P.rep,1,D);u=N.removeChild(N.firstChild);t.style.marginLeft=a.Em(-C.l);M.style.marginRight=a.Em(x.r-x.w);F.appendChild(t);var Q=a.BBOX.zero();Q.h=Math.max(C.h,x.h,z.h);Q.d=Math.max(C.D||C.d,x.D||x.d,z.D||z.d);var y=(C.r-C.l)+(x.r-x.l)-l;if(P.mid){G=this.createChar(N,P.mid,1,D);O=N.removeChild(N.firstChild);O.style.marginleft=a.Em(-G.l);O.style.marginRight=a.Em(G.r-G.w);y+=G.r-G.l+l;H=2;if(G.h>Q.h){Q.h=G.h}if(G.d>Q.d){Q.d=G.d}}if(P.min&&sy){var B=z.r-z.l,J=B-l;var E=Math.min(Math.ceil((s-y)/(H*J)),this.maxStretchyParts);if(P.fullExtenders){s=E*H*J+y}else{J=(s-y)/(H*E)}var L=(B-J+l/H)/2;u.style.marginLeft=a.Em(-z.l-L);u.style.marginRight=a.Em(z.r-z.w+L);u.style.letterSpacing=a.Em(-(z.w-J));t.style.marginRight=a.Em(C.r-C.w);M.style.marginleft=a.Em(-x.l);var I=u.textContent,A=I;while(--E>0){I+=A}u.textContent=I;F.appendChild(u);if(P.mid){F.appendChild(O);K=F.appendChild(u.cloneNode(true))}}else{L=(s-y-l/H)/2;t.style.marginRight=a.Em(C.r-C.w+L);if(P.mid){F.appendChild(O)}M.style.marginLeft=a.Em(-x.l+L)}F.appendChild(M);this.adjustHeights([t,u,O,K,M],[C,z,G,z,x],Q);if(v){Q.scale=v.scale;Q.rscale=v.rscale}return Q},adjustHeights:function(t,w,x){var u=x.h,y=x.d;if(x.d<0){y=-x.d;x.D=x.d;x.d=0}for(var v=0,s=t.length;v0){delete this.D}},rescale:function(s){this.w*=s;this.h*=s;this.d*=s;this.l*=s;this.r*=s;this.t*=s;this.b*=s;if(this.L){this.L*=s}if(this.R){this.R*=s}if(this.D){this.D*=s}},combine:function(t,s,v){t.X=s;t.Y=v;var u=t.rscale;if(s+u*t.r>this.r){this.r=s+u*t.r}if(s+u*t.lthis.w){this.w=s+u*(t.w+(t.L||0)+(t.R||0))}if(v+u*t.h>this.h){this.h=v+u*t.h}if(t.D&&(this.D==null||u*t.D-v>this.D)&&u*t.D>this.d){this.D=u*t.D-v}else{if(t.D==null&&this.D){delete this.D}}if(u*t.d-v>this.d){this.d=u*t.d-v}if(v+u*t.t>this.t){this.t=v+u*t.t}if(u*t.b-v>this.b){this.b=u*t.b-v}},append:function(t){var u=t.rscale;var s=this.w;if(s+u*t.r>this.r){this.r=s+u*t.r}if(s+u*t.lthis.h){this.h=u*t.h}if(t.D&&(this.D==null||u*t.D>this.D)&&u*t.D>this.d){this.D=u*t.D}else{if(t.D==null&&this.D){delete this.D}}if(u*t.d>this.d){this.d=u*t.d}if(u*t.t>this.t){this.t=u*t.t}if(u*t.b>this.b){this.b=u*t.b}},updateFrom:function(s){this.h=s.h;this.d=s.d;this.w=s.w;this.r=s.r;this.l=s.l;this.t=s.t;this.b=s.b;if(s.pwidth){this.pwidth=s.pwidth}if(s.D){this.D=s.D}else{delete this.D}},adjust:function(t,s,v,u){this[s]+=a.length2em(t,1,this.scale);if(u==null){if(this[s]>this[v]){this[v]=this[s]}}else{if(this[v]z.r){z.r=z.w}if(t.h>z.h){z.h=t.h}if(t.d>z.d){z.d=t.d}if(t.t>z.t){z.t=t.t}if(t.b>z.b){z.b=t.b}}}},CHTMLstretchChildH:function(v,s,x){var y=this.data[v];if(y){var z=this.CHTML,u=y.CHTML;if(u.stretch||(u.stretch==null&&y.CHTMLcanStretch("Horizontal",s))){var t=u.w;u=y.CHTMLstretchH(this.CHTMLchildNode(x,v),s);z.w+=u.w-t;if(z.w>z.r){z.r=z.w}if(u.h>z.h){z.h=u.h}if(u.d>z.d){z.d=u.d}if(u.t>z.t){z.t=u.t}if(u.b>z.b){z.b=u.b}}}},CHTMLupdateFrom:function(s){this.CHTML.updateFrom(s);if(this.inferRow){this.data[0].CHTML.updateFrom(s)}},CHTMLcanStretch:function(w,u,v){var t=false;if(this.isEmbellished()){var s=this.Core();if(s&&s!==this){t=s.CHTMLcanStretch(w,u,v)}}this.CHTML.stretch=t;return t},CHTMLstretchV:function(s,t){this.CHTMLupdateFrom(this.Core().CHTMLstretchV(s,t));return this.CHTML},CHTMLstretchH:function(t,s){this.CHTMLupdateFrom(this.CHTMLstretchCoreH(t,s));return this.CHTML},CHTMLstretchCoreH:function(t,s){return this.Core().CHTMLstretchH(this.CHTMLcoreNode(t),s)},CHTMLcreateNode:function(s){if(!this.CHTML){this.CHTML={}}this.CHTML=a.BBOX.zero();if(this.href){s=a.addElement(s,"a",{href:this.href,isMathJax:true})}if(!this.CHTMLnodeID){this.CHTMLnodeID=a.GetID()}var t=(this.id||"MJXc-Node-"+this.CHTMLnodeID)+a.idPostfix;return this.CHTMLhandleAttributes(a.addElement(s,"mjx-"+this.type,{id:t}))},CHTMLnodeElement:function(){if(!this.CHTMLnodeID){return null}return document.getElementById((this.id||"MJXc-Node-"+this.CHTMLnodeID)+a.idPostfix)},CHTMLlength2em:function(t,s){return a.length2em(t,s,this.CHTML.scale)},CHTMLhandleAttributes:function(v){if(this["class"]){if(v.className){v.className+=" "+this["class"]}else{v.className=this["class"]}}if(this.attrNames){var z=this.attrNames,u=d.nocopyAttributes,y=f.config.ignoreMMLattributes;var w=(this.type==="mstyle"?d.math.prototype.defaults:this.defaults);for(var t=0,s=z.length;t2){s.scriptlevel=2}x=Math.pow(this.Get("scriptsizemultiplier"),s.scriptlevel);s.scriptminsize=a.length2em(this.Get("scriptminsize"),0.8,1);if(x600?"bold":"normal")}var t=s.mathvariant;if(this.variantForm){t="-TeX-variant"}if(s.family&&!s.hasVariant){if(!s.weight&&s.mathvariant.match(/bold/)){s.weight="bold"}if(!s.style&&s.mathvariant.match(/italic/)){s.style="italic"}this.CHTMLvariant={fonts:[],noRemap:true,cache:{},style:{"font-family":s.family,"font-weight":s.weight||"normal","font-style":s.style||"normal"}};return}if(s.weight==="bold"){t={normal:d.VARIANT.BOLD,italic:d.VARIANT.BOLDITALIC,fraktur:d.VARIANT.BOLDFRAKTUR,script:d.VARIANT.BOLDSCRIPT,"sans-serif":d.VARIANT.BOLDSANSSERIF,"sans-serif-italic":d.VARIANT.SANSSERIFBOLDITALIC}[t]||t}else{if(s.weight==="normal"){t={bold:d.VARIANT.normal,"bold-italic":d.VARIANT.ITALIC,"bold-fraktur":d.VARIANT.FRAKTUR,"bold-script":d.VARIANT.SCRIPT,"bold-sans-serif":d.VARIANT.SANSSERIF,"sans-serif-bold-italic":d.VARIANT.SANSSERIFITALIC}[t]||t}}if(s.style==="italic"){t={normal:d.VARIANT.ITALIC,bold:d.VARIANT.BOLDITALIC,"sans-serif":d.VARIANT.SANSSERIFITALIC,"bold-sans-serif":d.VARIANT.SANSSERIFBOLDITALIC}[t]||t}else{if(s.style==="normal"){t={italic:d.VARIANT.NORMAL,"bold-italic":d.VARIANT.BOLD,"sans-serif-italic":d.VARIANT.SANSSERIF,"sans-serif-bold-italic":d.VARIANT.BOLDSANSSERIF}[t]||t}}this.CHTMLvariant=a.FONTDATA.VARIANT[t]||a.FONTDATA.VARIANT[d.VARIANT.NORMAL]},CHTMLbboxFor:function(s){if(this.data[s]&&this.data[s].CHTML){return this.data[s].CHTML}return a.BBOX.zero()},CHTMLdrawBBox:function(t,u){if(!u){u=this.CHTML}var s=a.Element("mjx-box",{style:{opacity:0.25,"margin-left":a.Em(-(u.w+(u.R||0)))}},[["mjx-box",{style:{height:a.Em(u.h),width:a.Em(u.w),"background-color":"red"}}],["mjx-box",{style:{height:a.Em(u.d),width:a.Em(u.w),"margin-left":a.Em(-u.w),"vertical-align":a.Em(-u.d),"background-color":"green"}}]]);if(t.nextSibling){t.parentNode.insertBefore(s,t.nextSibling)}else{t.parentNode.appendChild(s)}},CHTMLnotEmpty:function(s){while(s&&s.data.length<2&&(s.type==="mrow"||s.type==="texatom")){s=s.data[0]}return !!s}},{CHTMLautoload:function(){this.constructor.Augment({toCommonHTML:d.mbase.CHTMLautoloadFail});var s=a.autoloadDir+"/"+this.type+".js";f.RestartAfter(o.Require(s))},CHTMLautoloadFail:function(){throw Error("CommonHTML can't autoload '"+this.type+"'")},CHTMLautoloadList:{},CHTMLautoloadFile:function(s){if(d.mbase.CHTMLautoloadList.hasOwnProperty(s)){throw Error("CommonHTML can't autoload file '"+s+"'")}d.mbase.CHTMLautoloadList[s]=true;var t=a.autoloadDir+"/"+s+".js";f.RestartAfter(o.Require(t))},CHTMLstretchV:function(s,t){this.Core().CHTMLstretchV(s,t);this.toCommonHTML(this.CHTMLnodeElement(),{stretch:true});return this.CHTML},CHTMLstretchH:function(t,s){this.CHTMLupdateFrom(this.CHTMLstretchCoreH(t,s));this.toCommonHTML(t,{stretch:true});return this.CHTML}});d.chars.Augment({toCommonHTML:function(t,s){this.CHTML=null;if(s==null){s={}}var u=this.toString();if(s.remap){u=s.remap(u,s.remapchars)}this.CHTMLhandleText(t,u,s.variant||this.parent.CHTMLvariant)}});d.entity.Augment({toCommonHTML:function(t,s){if(s==null){s={}}var u=this.toString();if(s.remapchars){u=s.remap(u,s.remapchars)}this.CHTMLhandleText(t,u,s.variant||this.parent.CHTMLvariant)}});d.math.Augment({toCommonHTML:function(x){x=this.CHTMLdefaultNode(x);if(this.CHTML.w<0){x.parentNode.style.width="0px";x.parentNode.style.marginRight=a.Em(this.CHTML.w)}var v=this.Get("alttext");if(v&&!x.getAttribute("aria-label")){x.setAttribute("aria-label",v)}if(this.CHTML.pwidth){x.parentNode.style.minWidth=this.CHTML.mwidth||a.Em(this.CHTML.w);x.parentNode.className="mjx-full-width "+x.parentNode.className;x.style.width=this.CHTML.pwidth}else{if(!this.isMultiline&&this.Get("display")==="block"){var u=this.getValues("indentalignfirst","indentshiftfirst","indentalign","indentshift");if(u.indentalignfirst!==d.INDENTALIGN.INDENTALIGN){u.indentalign=u.indentalignfirst}if(u.indentalign===d.INDENTALIGN.AUTO){u.indentalign=r.displayAlign}if(u.indentshiftfirst!==d.INDENTSHIFT.INDENTSHIFT){u.indentshift=u.indentshiftfirst}if(u.indentshift==="auto"){u.indentshift="0"}var t=this.CHTMLlength2em(u.indentshift,a.cwidth);if(r.displayIndent!=="0"){var s=this.CHTMLlength2em(r.displayIndent,a.cwidth);t+=(u.indentalign===d.INDENTALIGN.RIGHT?-s:s)}var w=x.parentNode.parentNode.style;x.parentNode.style.textAlign=w.textAlign=u.indentalign;if(t){t*=a.em/a.outerEm;f.Insert(w,({left:{marginLeft:a.Em(t)},right:{marginRight:a.Em(-t)},center:{marginLeft:a.Em(t),marginRight:a.Em(-t)}})[u.indentalign])}}}return x}});d.mi.Augment({toCommonHTML:function(s){s=this.CHTMLdefaultNode(s);var u=this.CHTML,t=this.data.join("");if(u.skew!=null&&!a.isChar(t)){delete u.skew}if(u.r>u.w&&a.isChar(t)&&!this.CHTMLvariant.noIC){u.ic=u.r-u.w;u.w=u.r;s.lastChild.style.paddingRight=a.Em(u.ic)}return s}});d.mn.Augment({CHTMLremapMinus:function(s){return s.replace(/^-/,"\u2212")},toCommonHTML:function(s){s=this.CHTMLdefaultNode(s,{childOptions:{remap:this.CHTMLremapMinus}});var u=this.CHTML,t=this.data.join("");if(u.skew!=null&&!a.isChar(t)){delete u.skew}if(u.r>u.w&&a.isChar(t)&&!this.CHTMLvariant.noIC){u.ic=u.r-u.w;u.w=u.r;s.lastChild.style.paddingRight=a.Em(u.ic)}return s}});d.mo.Augment({toCommonHTML:function(v){v=this.CHTMLcreateNode(v);this.CHTMLhandleStyle(v);this.CHTMLgetVariant();this.CHTMLhandleScale(v);a.BBOX.empty(this.CHTML);var t=this.getValues("displaystyle","largeop");t.variant=this.CHTMLvariant;t.text=this.data.join("");if(t.text==""){if(this.fence){v.style.width=a.Em(a.TEX.nulldelimiterspace)}}else{this.CHTMLadjustAccent(t);this.CHTMLadjustVariant(t);for(var u=0,s=this.data.length;u0){if(!this.hasValue("lspace")){t.lspace=0.15}if(!this.hasValue("rspace")){t.rspace=0.15}}var s=this,u=this.Parent();while(u&&u.isEmbellished()&&u.Core()===s){s=u;u=u.Parent();v=s.CHTMLnodeElement()}if(t.lspace){v.style.paddingLeft=a.Em(t.lspace)}if(t.rspace){v.style.paddingRight=a.Em(t.rspace)}this.CHTML.L=t.lspace;this.CHTML.R=t.rspace}else{this.SUPER(arguments).CHTMLhandleSpace.apply(this,arguments)}},CHTMLadjustAccent:function(u){var t=this.CoreParent();u.parent=t;if(a.isChar(u.text)&&t&&t.isa(d.munderover)){var v=t.data[t.over],s=t.data[t.under];if(v&&this===v.CoreMO()&&t.Get("accent")){u.remapchars=a.FONTDATA.REMAPACCENT}else{if(s&&this===s.CoreMO()&&t.Get("accentunder")){u.remapchars=a.FONTDATA.REMAPACCENTUNDER}}}},CHTMLadjustVariant:function(t){var s=t.parent,u=(s&&s.isa(d.msubsup)&&this!==s.data[s.base]);if(t.largeop){t.mathvariant=(t.displaystyle?"-largeOp":"-smallOp")}if(u){t.remapchars=this.remapChars;if(t.text.match(/['`"\u00B4\u2032-\u2037\u2057]/)){t.mathvariant="-TeX-variant"}}},CHTMLfixCombiningChar:function(s){s=s.firstChild;var t=a.Element("mjx-box",{style:{width:".25em","margin-left":"-.25em"}});s.insertBefore(t,s.firstChild)},CHTMLcenterOp:function(s){var u=this.CHTML;var t=(u.h-u.d)/2-a.TEX.axis_height;if(Math.abs(t)>0.001){s.style.verticalAlign=a.Em(-t)}u.h-=t;u.d+=t;if(u.r>u.w){u.ic=u.r-u.w;u.w=u.r;s.style.paddingRight=a.Em(u.ic)}},CHTMLcanStretch:function(w,u,v){if(!this.Get("stretchy")){return false}var x=this.data.join("");if(!a.isChar(x)){return false}var t={text:x};this.CHTMLadjustAccent(t);if(t.remapchars){x=t.remapchars[x]||x}x=a.FONTDATA.DELIMITERS[x.charCodeAt(0)];var s=(x&&x.dir===w.substr(0,1));if(s){s=(this.CHTML.h!==u||this.CHTML.d!==v||!!this.Get("minsize",true)||!!this.Get("maxsize",true));if(s){this.CHTML.stretch=true}}return s},CHTMLstretchV:function(v,y){var w=this.CHTMLnodeElement(),x=this.CHTML;var t=this.getValues("symmetric","maxsize","minsize");var u,s=a.TEX.axis_height;if(t.symmetric){u=2*Math.max(v-s,y+s)}else{u=v+y}t.maxsize=this.CHTMLlength2em(t.maxsize,x.h+x.d);t.minsize=this.CHTMLlength2em(t.minsize,x.h+x.d);u=Math.max(t.minsize,Math.min(t.maxsize,u));if(u!==x.sH){if(u!=t.minsize){u=[Math.max(u*a.TEX.delimiterfactor/1000,u-a.TEX.delimitershortfall),u]}while(w.firstChild){w.removeChild(w.firstChild)}this.CHTML=x=a.createDelimiter(w,this.data.join("").charCodeAt(0),u,x);x.sH=(u instanceof Array?u[1]:u);if(t.symmetric){u=(x.h+x.d)/2+s}else{u=(x.h+x.d)*v/(v+y)}u-=x.h;if(Math.abs(u)>0.05){w.style.verticalAlign=a.Em(u);x.h+=u;x.d-=u;x.t+=u;x.b-=u}}return this.CHTML},CHTMLstretchH:function(u,s){var v=this.CHTML;var t=this.getValues("maxsize","minsize","mathvariant","fontweight");if((t.fontweight==="bold"||(this.removedStyles||{}).fontWeight==="bold"||parseInt(t.fontweight)>=600)&&!this.Get("mathvariant",true)){t.mathvariant=d.VARIANT.BOLD}t.maxsize=this.CHTMLlength2em(t.maxsize,v.w);t.minsize=this.CHTMLlength2em(t.minsize,v.w);s=Math.max(t.minsize,Math.min(t.maxsize,s));if(s!==v.sW){while(u.firstChild){u.removeChild(u.firstChild)}this.CHTML=v=a.createDelimiter(u,this.data.join("").charCodeAt(0),s,v,t.mathvariant);v.sW=s}return this.CHTML}});d.mtext.Augment({CHTMLgetVariant:function(){if(a.config.mtextFontInherit||this.Parent().type==="merror"){var u=(a.config.scale/100)/a.scale;var t={cache:{},fonts:[],className:"MJXc-font-inherit",rscale:u,style:{"font-size":a.Percent(u)}};var s=this.Get("mathvariant");if(s.match(/bold/)){t.style["font-weight"]="bold"}if(s.match(/italic|-tex-mathit/)){t.style["font-style"]="italic"}if(s==="monospace"){t.className+=" MJXc-monospace-font"}if(s==="double-struck"){t.className+=" MJXc-double-struck-font"}if(s.match(/fraktur/)){t.className+=" MJXc-fraktur-font"}if(s.match(/sans-serif/)){t.className+=" MJXc-sans-serif-font"}if(s.match(/script/)){t.className+=" MJXc-script-font"}this.CHTMLvariant=t}else{this.SUPER(arguments).CHTMLgetVariant.call(this)}}});d.merror.Augment({toCommonHTML:function(s){s=this.CHTMLdefaultNode(s);var t=this.CHTML;t.rescale(0.9);t.h+=3/a.em;if(t.h>t.t){t.t=t.h}t.d+=3/a.em;if(t.d>t.b){t.b=t.d}t.w+=8/a.em;t.r=t.w;t.l=0;return s}});d.mspace.Augment({toCommonHTML:function(v){v=this.CHTMLcreateNode(v);this.CHTMLhandleStyle(v);this.CHTMLhandleScale(v);var t=this.getValues("height","depth","width");var s=this.CHTMLlength2em(t.width),u=this.CHTMLlength2em(t.height),y=this.CHTMLlength2em(t.depth);var x=this.CHTML;x.w=x.r=s;x.h=x.t=u;x.d=x.b=y;x.l=0;if(s<0){v.style.marginRight=a.Em(s);s=0}v.style.width=a.Em(s);v.style.height=a.Em(Math.max(0,u+y));if(y){v.style.verticalAlign=a.Em(-y)}this.CHTMLhandleBBox(v);this.CHTMLhandleColor(v);return v}});d.mpadded.Augment({toCommonHTML:function(t,F){var s;if(F&&F.stretch){t=t.firstChild;s=t.firstChild}else{t=this.CHTMLdefaultNode(t,{childNodes:"mjx-box",forceChild:true});s=t.firstChild;t=a.addElement(t,"mjx-block");t.appendChild(s);a.addElement(t,"mjx-strut")}var z=this.CHTMLbboxFor(0);var D=this.getValues("width","height","depth","lspace","voffset");var B=0,A=0,C=z.w,u=z.h,v=z.d;s.style.width=0;s.style.margin=a.Em(-u)+" 0 "+a.Em(-v);if(D.width!==""){C=this.CHTMLdimen(D.width,"w",C,0)}if(D.height!==""){u=this.CHTMLdimen(D.height,"h",u,0)}if(D.depth!==""){v=this.CHTMLdimen(D.depth,"d",v,0)}if(D.voffset!==""){A=this.CHTMLdimen(D.voffset);if(A){s.style.position="relative";s.style.top=a.Em(-A)}}if(D.lspace!==""){B=this.CHTMLdimen(D.lspace);if(B){s.style.position="relative";s.style.left=a.Em(B)}}t.style.width=0;t.style.marginTop=a.Em(u-k);t.style.padding="0 "+a.Em(C)+" "+a.Em(v)+" 0";var E=a.BBOX({w:C,h:u,d:v,l:0,r:C,t:u,b:v,scale:this.CHTML.scale,rscale:this.CHTML.rscale});E.combine(z,B,A);E.w=C;E.h=u;E.d=v;this.CHTML=E;return t.parentNode},CHTMLstretchV:d.mbase.CHTMLstretchV,CHTMLstretchH:d.mbase.CHTMLstretchH,CHTMLdimen:function(w,y,x,s){if(s==null){s=-i}w=String(w);var t=w.match(/width|height|depth/);var u=(t?this.CHTML[t[0].charAt(0)]:(y?this.CHTML[y]:0));var v=(this.CHTMLlength2em(w,u)||0);if(w.match(/^[-+]/)&&x!=null){v+=x}if(s!=null){v=Math.max(s,v)}return v}});d.munderover.Augment({toCommonHTML:function(w,G){var E=this.getValues("displaystyle","accent","accentunder","align");var u=this.data[this.base];if(!E.displaystyle&&u!=null&&(u.movablelimits||u.CoreMO().Get("movablelimits"))){return d.msubsup.prototype.toCommonHTML.call(this,w,t)}var B,z,s=[],t=false;if(G&&G.stretch){if(this.data[this.base]){u=a.getNode(w,"mjx-op")}if(this.data[this.under]){B=a.getNode(w,"mjx-under")}if(this.data[this.over]){z=a.getNode(w,"mjx-over")}s[0]=u;s[1]=B||z;s[2]=z;t=true}else{var y=["mjx-op","mjx-under","mjx-over"];if(this.over===1){y[1]=y[2]}w=this.CHTMLdefaultNode(w,{childNodes:y,noBBox:true,forceChild:true,minChildren:2});s[0]=u=w.removeChild(w.firstChild);s[1]=B=z=w.removeChild(w.firstChild);if(w.firstChild){s[2]=z=w.removeChild(w.firstChild)}}var x=[],v=this.CHTMLgetBBoxes(x,s,E);var F=x[this.base],C=this.CHTML;C.w=v;C.h=F.h;C.d=F.d;if(F.h<0.35){u.style.marginTop=a.Em(F.h-0.35)}if(E.accent&&F.hu){u=s}}if(u===-i){u=s}for(y=0;yD.w){D.skew+=(D.w-(A.x+u*A.w))/2}}}else{y=a.TEX.big_op_spacing1;x=a.TEX.big_op_spacing3;v=Math.max(y,x-Math.max(0,u*A.d))}A.x+=E/2;A.y=D.h+v+w+u*A.d;if(v){B.style.paddingBottom=a.Em(v/u)}if(w){B.style.paddingTop=a.Em(w/u)}return C},CHTMLaddUnderscript:function(B,z,E,D,t,A,s){var C=this.CHTML;var y,x,w=a.TEX.big_op_spacing5,v;var F=z[this.under],u=F.rscale;if(!s){a.addElement(t,"mjx-itable",{},[["mjx-row",{},[["mjx-cell"]]],["mjx-row"]]);t.firstChild.firstChild.firstChild.appendChild(A);t.firstChild.lastChild.appendChild(B)}if(F.D){F.d=F.D}if(F.d<0){B.firstChild.style.verticalAlign="top";t.firstChild.style.marginBottom=a.Em(F.d)}if(E.accentunder){v=2*a.TEX.rule_thickness;w=0}else{y=a.TEX.big_op_spacing2;x=a.TEX.big_op_spacing4;v=Math.max(y,x-u*F.h)}F.x=-D/2;F.y=-(C.d+v+w+u*F.h);if(v){B.style.paddingTop=a.Em(v/u)}if(w){B.style.paddingBottom=a.Em(w/u)}},CHTMLplaceBoxes:function(s,B,A,E,z){var t=this.CHTML.w,y,v=z.length,x;var D=a.BBOX.zero();D.scale=this.CHTML.scale;D.rscale=this.CHTML.rscale;z[this.base].x=z[this.base].y=0;var F=i;for(y=0;y0){L+=Q;J-=Q}}L=Math.max(L,A.superscriptshift);J=Math.max(J,A.subscriptshift);H.style.paddingRight=a.Em(N/B);z.style.paddingBottom=a.Em(L/w+J/B-W.d-P.h/B*w);z.style.paddingLeft=a.Em(Y/w);z.style.paddingRight=a.Em(N/w);E.style.verticalAlign=a.Em(-J);G.combine(W,I+Y,L);G.combine(P,I,-J)}}G.clean();return S},CHTMLstretchV:d.mbase.CHTMLstretchV,CHTMLstretchH:d.mbase.CHTMLstretchH,CHTMLchildNode:function(u,t){var s=["mjx-base","mjx-sub","mjx-sup"];if(this.over===1){s[1]=s[2]}return a.getNode(u,s[t])}});d.mfrac.Augment({toCommonHTML:function(N){N=this.CHTMLdefaultNode(N,{childNodes:["mjx-numerator","mjx-denominator"],childOptions:{autowidth:true},forceChild:true,noBBox:true,minChildren:2});var x=this.getValues("linethickness","displaystyle","numalign","denomalign","bevelled");var O=x.displaystyle;var D=N.firstChild,w=N.lastChild;var y=a.addElement(N,"mjx-box");y.appendChild(D);y.appendChild(w);N.appendChild(y);if(x.numalign!=="center"){D.style.textAlign=x.numalign}if(x.denomalign!=="center"){w.style.textAlign=x.denomalign}var P=this.CHTMLbboxFor(0),B=this.CHTMLbboxFor(1),C=a.BBOX.empty(this.CHTML),F=P.rscale,z=B.rscale;x.linethickness=Math.max(0,a.thickness2em(x.linethickness||"0",C.scale));var M=a.TEX.min_rule_thickness/a.em,T=a.TEX.axis_height;var J=x.linethickness,L,K,I,G;if(x.bevelled){y.className+=" MJXc-bevelled";var S=(O?0.4:0.15);var E=Math.max(F*(P.h+P.d),z*(B.h+B.d))+2*S;var R=a.Element("mjx-bevel");y.insertBefore(R,w);var s=a.createDelimiter(R,47,E);I=F*(P.d-P.h)/2+T+S;G=z*(B.d-B.h)/2+T-S;if(I){D.style.verticalAlign=a.Em(I/F)}if(G){w.style.verticalAlign=a.Em(G/z)}R.style.marginLeft=R.style.marginRight=a.Em(-S/2);C.combine(P,0,I);C.combine(s,F*P.w-S/2,0);C.combine(B,F*P.w+s.w-S,G);C.clean()}else{y.className+=" MJXc-stacked";if(O){I=a.TEX.num1;G=a.TEX.denom1}else{I=(J===0?a.TEX.num3:a.TEX.num2);G=a.TEX.denom2}if(J===0){L=Math.max((O?7:3)*a.TEX.rule_thickness,2*M);K=(I-P.d*F)-(B.h*z-G);if(KD){s=((A.h+A.d)-(D-G))/2}D=F.h+s+G;var B=this.CHTMLaddRoot(w,A,A.h+A.d-D);v.style.paddingTop=a.Em(s);v.style.borderTop=a.Px(y*F.scale,1)+" solid";E.style.paddingTop=a.Em(2*G-y);F.h+=s+2*G;C.combine(A,B,D-A.h);C.combine(F,B+A.w,0);C.clean();return w},CHTMLaddRoot:function(){return 0},CHTMLhandleBBox:function(s){var t=this.CHTMLbboxFor(0);delete t.pwidth;this.SUPER(arguments).CHTMLhandleBBox.apply(this,arguments)}});d.mroot.Augment({toCommonHTML:d.msqrt.prototype.toCommonHTML,CHTMLhandleBBox:d.msqrt.prototype.CHTMLhandleBBox,CHTMLaddRoot:function(A,u,v){if(!this.data[1]){return}var z=this.CHTML,B=this.data[1].CHTML,x=A.firstChild;var s=B.rscale;var t=this.CHTMLrootHeight(B,u,s)-v;var y=Math.min(B.w,B.r);var C=Math.max(y,u.offset/s);if(t){x.style.verticalAlign=a.Em(t/s)}if(C>y){x.firstChild.style.paddingLeft=a.Em(C-y)}C-=u.offset/s;x.style.width=a.Em(C);z.combine(B,0,t);return C*s},CHTMLrootHeight:function(u,s,t){return 0.45*(s.h+s.d-0.9)+s.offset+Math.max(0,u.d-0.075)}});d.mfenced.Augment({toCommonHTML:function(v){v=this.CHTMLcreateNode(v);this.CHTMLhandleStyle(v);this.CHTMLhandleScale(v);this.CHTMLaddChild(v,"open",{});for(var u=0,s=this.data.length;ua.linebreakWidth)||this.hasNewline()},CHTMLstretchV:function(s,t){this.CHTMLstretchChildV(this.CoreIndex(),s,t);return this.CHTML},CHTMLstretchH:function(t,s){this.CHTMLstretchChildH(this.CoreIndex(),s,t);return this.CHTML}});d.TeXAtom.Augment({toCommonHTML:function(x,w){if(!w||!w.stretch){x=this.CHTMLdefaultNode(x)}if(this.texClass===d.TEXCLASS.VCENTER){var s=a.TEX.axis_height,u=this.CHTML;var t=s-(u.h+u.d)/2+u.d;if(Math.abs(t)>0.001){x.style.verticalAlign=a.Em(t);u.h+=t;u.t+=t;u.d-=t;u.b-=t}}return x},CHTMLstretchV:function(s,t){this.CHTMLupdateFrom(this.Core().CHTMLstretchV(s,t));this.toCommonHTML(this.CHTMLnodeElement(),{stretch:true});return this.CHTML},CHTMLstretchH:function(t,s){this.CHTMLupdateFrom(this.CHTMLstretchCoreH(t,s));this.toCommonHTML(t,{stretch:true});return this.CHTML}});d.semantics.Augment({toCommonHTML:function(s){s=this.CHTMLcreateNode(s);if(this.data[0]){this.data[0].toCommonHTML(s);this.CHTMLupdateFrom(this.data[0].CHTML);this.CHTMLhandleBBox(s)}return s}});d.annotation.Augment({toCommonHTML:function(s){return this.CHTMLcreateNode(s)}});d["annotation-xml"].Augment({toCommonHTML:d.mbase.CHTMLautoload});d.ms.Augment({toCommonHTML:d.mbase.CHTMLautoload});d.mglyph.Augment({toCommonHTML:d.mbase.CHTMLautoload});d.menclose.Augment({toCommonHTML:d.mbase.CHTMLautoload});d.maction.Augment({toCommonHTML:d.mbase.CHTMLautoload});d.mmultiscripts.Augment({toCommonHTML:d.mbase.CHTMLautoload});d.mtable.Augment({toCommonHTML:d.mbase.CHTMLautoload});MathJax.Hub.Register.StartupHook("onLoad",function(){setTimeout(MathJax.Callback(["loadComplete",a,"jax.js"]),0)})});MathJax.Hub.Register.StartupHook("End Cookie",function(){if(f.config.menuSettings.zoom!=="None"){o.Require("[MathJax]/extensions/MathZoom.js")}})})(MathJax.Ajax,MathJax.Hub,MathJax.HTML,MathJax.OutputJax.CommonHTML); diff --git a/ext/mathjax/jax/output/PreviewHTML/config.js b/ext/mathjax/jax/output/PreviewHTML/config.js new file mode 100644 index 000000000..ae48c7087 --- /dev/null +++ b/ext/mathjax/jax/output/PreviewHTML/config.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/PreviewHTML/config.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +MathJax.OutputJax.PreviewHTML=MathJax.OutputJax({id:"PreviewHTML",version:"2.7.5",directory:MathJax.OutputJax.directory+"/PreviewHTML",extensionDir:MathJax.OutputJax.extensionDir+"/PreviewHTML",noFastPreview:true,config:{scale:100,minScaleAdjust:50,mtextFontInherit:false,linebreaks:{automatic:false,width:"container"}}});if(!MathJax.Hub.config.delayJaxRegistration){MathJax.OutputJax.PreviewHTML.Register("jax/mml")}MathJax.OutputJax.PreviewHTML.loadComplete("config.js"); diff --git a/ext/mathjax/jax/output/PreviewHTML/jax.js b/ext/mathjax/jax/output/PreviewHTML/jax.js new file mode 100644 index 000000000..b77dd051f --- /dev/null +++ b/ext/mathjax/jax/output/PreviewHTML/jax.js @@ -0,0 +1,19 @@ +/* + * /MathJax/jax/output/PreviewHTML/jax.js + * + * Copyright (c) 2009-2018 The MathJax Consortium + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function(i,b,e,g){var h;var j,a,d;var f="'Times New Roman',Times,STIXGeneral,serif";var m={".MJXp-script":{"font-size":".8em"},".MJXp-right":{"-webkit-transform-origin":"right","-moz-transform-origin":"right","-ms-transform-origin":"right","-o-transform-origin":"right","transform-origin":"right"},".MJXp-bold":{"font-weight":"bold"},".MJXp-italic":{"font-style":"italic"},".MJXp-scr":{"font-family":"MathJax_Script,"+f},".MJXp-frak":{"font-family":"MathJax_Fraktur,"+f},".MJXp-sf":{"font-family":"MathJax_SansSerif,"+f},".MJXp-cal":{"font-family":"MathJax_Caligraphic,"+f},".MJXp-mono":{"font-family":"MathJax_Typewriter,"+f},".MJXp-largeop":{"font-size":"150%"},".MJXp-largeop.MJXp-int":{"vertical-align":"-.2em"},".MJXp-math":{display:"inline-block","line-height":"1.2","text-indent":"0","font-family":f,"white-space":"nowrap","border-collapse":"collapse"},".MJXp-display":{display:"block","text-align":"center",margin:"1em 0"},".MJXp-math span":{display:"inline-block"},".MJXp-box":{display:"block!important","text-align":"center"},".MJXp-box:after":{content:'" "'},".MJXp-rule":{display:"block!important","margin-top":".1em"},".MJXp-char":{display:"block!important"},".MJXp-mo":{margin:"0 .15em"},".MJXp-mfrac":{margin:"0 .125em","vertical-align":".25em"},".MJXp-denom":{display:"inline-table!important",width:"100%"},".MJXp-denom > *":{display:"table-row!important"},".MJXp-surd":{"vertical-align":"top"},".MJXp-surd > *":{display:"block!important"},".MJXp-script-box > * ":{display:"table!important",height:"50%"},".MJXp-script-box > * > *":{display:"table-cell!important","vertical-align":"top"},".MJXp-script-box > *:last-child > *":{"vertical-align":"bottom"},".MJXp-script-box > * > * > *":{display:"block!important"},".MJXp-mphantom":{visibility:"hidden"},".MJXp-munderover, .MJXp-munder":{display:"inline-table!important"},".MJXp-over":{display:"inline-block!important","text-align":"center"},".MJXp-over > *":{display:"block!important"},".MJXp-munderover > *, .MJXp-munder > *":{display:"table-row!important"},".MJXp-mtable":{"vertical-align":".25em",margin:"0 .125em"},".MJXp-mtable > *":{display:"inline-table!important","vertical-align":"middle"},".MJXp-mtr":{display:"table-row!important"},".MJXp-mtd":{display:"table-cell!important","text-align":"center",padding:".5em 0 0 .5em"},".MJXp-mtr > .MJXp-mtd:first-child":{"padding-left":0},".MJXp-mtr:first-child > .MJXp-mtd":{"padding-top":0},".MJXp-mlabeledtr":{display:"table-row!important"},".MJXp-mlabeledtr > .MJXp-mtd:first-child":{"padding-left":0},".MJXp-mlabeledtr:first-child > .MJXp-mtd":{"padding-top":0},".MJXp-merror":{"background-color":"#FFFF88",color:"#CC0000",border:"1px solid #CC0000",padding:"1px 3px","font-style":"normal","font-size":"90%"}};(function(){for(var n=0;n<10;n++){var o="scaleX(."+n+")";m[".MJXp-scale"+n]={"-webkit-transform":o,"-moz-transform":o,"-ms-transform":o,"-o-transform":o,transform:o}}})();var k=1000000;var c="V",l="H";g.Augment({settings:b.config.menuSettings,config:{styles:m},hideProcessedMath:false,maxStretchyParts:1000,Config:function(){if(!this.require){this.require=[]}this.SUPER(arguments).Config.call(this);var n=this.settings;if(n.scale){this.config.scale=n.scale}this.require.push(MathJax.OutputJax.extensionDir+"/MathEvents.js")},Startup:function(){j=MathJax.Extension.MathEvents.Event;a=MathJax.Extension.MathEvents.Touch;d=MathJax.Extension.MathEvents.Hover;this.ContextMenu=j.ContextMenu;this.Mousedown=j.AltContextMenu;this.Mouseover=d.Mouseover;this.Mouseout=d.Mouseout;this.Mousemove=d.Mousemove;var n=e.addElement(document.body,"div",{style:{width:"5in"}});this.pxPerInch=n.offsetWidth/5;n.parentNode.removeChild(n);return i.Styles(this.config.styles,["InitializePHTML",this])},InitializePHTML:function(){},preTranslate:function(p){var s=p.jax[this.id],t,q=s.length,u,r,v,o,n;for(t=0;tthis.PHTML.h){this.PHTML.h=q.PHTML.h}if(q.PHTML.d>this.PHTML.d){this.PHTML.d=q.PHTML.d}if(q.PHTML.t>this.PHTML.t){this.PHTML.t=q.PHTML.t}if(q.PHTML.b>this.PHTML.b){this.PHTML.b=q.PHTML.b}}}else{if(n.forceChild){e.addElement(p,"span")}}},PHTMLstretchChild:function(q,p,s){var r=this.data[q];if(r&&r.PHTMLcanStretch("Vertical",p,s)){var t=this.PHTML,o=r.PHTML,n=o.w;r.PHTMLstretchV(p,s);t.w+=o.w-n;if(o.h>t.h){t.h=o.h}if(o.d>t.d){t.d=o.d}}},PHTMLcreateSpan:function(n){if(!this.PHTML){this.PHTML={}}this.PHTML={w:0,h:0,d:0,l:0,r:0,t:0,b:0};if(this.inferred){return n}if(this.type==="mo"&&this.data.join("")==="\u222B"){g.lastIsInt=true}else{if(this.type!=="mspace"||this.width!=="negativethinmathspace"){g.lastIsInt=false}}if(!this.PHTMLspanID){this.PHTMLspanID=g.GetID()}var o=(this.id||"MJXp-Span-"+this.PHTMLspanID);return e.addElement(n,"span",{className:"MJXp-"+this.type,id:o})},PHTMLspanElement:function(){if(!this.PHTMLspanID){return null}return document.getElementById(this.id||"MJXp-Span-"+this.PHTMLspanID)},PHTMLhandleToken:function(o){var n=this.getValues("mathvariant");if(n.mathvariant!==h.VARIANT.NORMAL){o.className+=" "+g.VARIANT[n.mathvariant]}},PHTMLhandleStyle:function(n){if(this.style){n.style.cssText=this.style}},PHTMLhandleColor:function(n){if(this.mathcolor){n.style.color=this.mathcolor}if(this.mathbackground){n.style.backgroundColor=this.mathbackground}},PHTMLhandleScriptlevel:function(n){var o=this.Get("scriptlevel");if(o){n.className+=" MJXp-script"}},PHTMLhandleText:function(y,A){var v,p;var z=0,o=0,q=0;for(var s=0,r=A.length;s=55296&&p<56319){s++;p=(((p-55296)<<10)+(A.charCodeAt(s)-56320))+65536}var t=0.7,u=0.22,x=0.5;if(p<127){if(v.match(/[A-Za-ehik-or-xz0-9]/)){u=0}if(v.match(/[A-HK-Z]/)){x=0.67}else{if(v.match(/[IJ]/)){x=0.36}}if(v.match(/[acegm-su-z]/)){t=0.45}else{if(v.match(/[ij]/)){t=0.75}}if(v.match(/[ijlt]/)){x=0.28}}if(g.DELIMITERS[v]){x=g.DELIMITERS[v].w||0.4}if(t>z){z=t}if(u>o){o=u}q+=x}if(!this.CHML){this.PHTML={}}this.PHTML={h:0.9,d:0.3,w:q,l:0,r:0,t:z,b:o};e.addText(y,A)},PHTMLbboxFor:function(o){if(this.data[o]&&this.data[o].PHTML){return this.data[o].PHTML}return{w:0,h:0,d:0,l:0,r:0,t:0,b:0}},PHTMLcanStretch:function(q,o,p){if(this.isEmbellished()){var n=this.Core();if(n&&n!==this){return n.PHTMLcanStretch(q,o,p)}}return false},PHTMLstretchV:function(n,o){},PHTMLstretchH:function(n){},CoreParent:function(){var n=this;while(n&&n.isEmbellished()&&n.CoreMO()===this&&!n.isa(h.math)){n=n.Parent()}return n},CoreText:function(n){if(!n){return""}if(n.isEmbellished()){return n.CoreMO().data.join("")}while((n.isa(h.mrow)||n.isa(h.TeXAtom)||n.isa(h.mstyle)||n.isa(h.mphantom))&&n.data.length===1&&n.data[0]){n=n.data[0]}if(!n.isToken){return""}else{return n.data.join("")}}});h.chars.Augment({toPreviewHTML:function(n){var o=this.toString().replace(/[\u2061-\u2064]/g,"");this.PHTMLhandleText(n,o)}});h.entity.Augment({toPreviewHTML:function(n){var o=this.toString().replace(/[\u2061-\u2064]/g,"");this.PHTMLhandleText(n,o)}});h.math.Augment({toPreviewHTML:function(n){n=this.PHTMLdefaultSpan(n);if(this.Get("display")==="block"){n.className+=" MJXp-display"}return n}});h.mo.Augment({toPreviewHTML:function(o){o=this.PHTMLdefaultSpan(o);this.PHTMLadjustAccent(o);var n=this.getValues("lspace","rspace","scriptlevel","displaystyle","largeop");if(n.scriptlevel===0){this.PHTML.l=g.length2em(n.lspace);this.PHTML.r=g.length2em(n.rspace);o.style.marginLeft=g.Em(this.PHTML.l);o.style.marginRight=g.Em(this.PHTML.r)}else{this.PHTML.l=0.15;this.PHTML.r=0.1}if(n.displaystyle&&n.largeop){var p=e.Element("span",{className:"MJXp-largeop"});p.appendChild(o.firstChild);o.appendChild(p);this.PHTML.h*=1.2;this.PHTML.d*=1.2;if(this.data.join("")==="\u222B"){p.className+=" MJXp-int"}}return o},PHTMLadjustAccent:function(p){var o=this.CoreParent();if(o&&o.isa(h.munderover)&&this.CoreText(o.data[o.base]).length===1){var q=o.data[o.over],n=o.data[o.under];var s=this.data.join(""),r;if(q&&this===q.CoreMO()&&o.Get("accent")){r=g.REMAPACCENT[s]}else{if(n&&this===n.CoreMO()&&o.Get("accentunder")){r=g.REMAPACCENTUNDER[s]}}if(r){s=p.innerHTML=r}if(s.match(/[\u02C6-\u02DC\u00A8]/)){this.PHTML.acc=-0.52}else{if(s==="\u2192"){this.PHTML.acc=-0.15;this.PHTML.vec=true}}}},PHTMLcanStretch:function(q,o,p){if(!this.Get("stretchy")){return false}var r=this.data.join("");if(r.length>1){return false}r=g.DELIMITERS[r];var n=(r&&r.dir===q.substr(0,1));if(n){n=(this.PHTML.h!==o||this.PHTML.d!==p||(this.Get("minsize",true)||this.Get("maxsize",true)))}return n},PHTMLstretchV:function(p,u){var o=this.PHTMLspanElement(),t=this.PHTML;var n=this.getValues("symmetric","maxsize","minsize");if(n.symmetric){l=2*Math.max(p-0.25,u+0.25)}else{l=p+u}n.maxsize=g.length2em(n.maxsize,t.h+t.d);n.minsize=g.length2em(n.minsize,t.h+t.d);l=Math.max(n.minsize,Math.min(n.maxsize,l));var s=l/(t.h+t.d-0.3);var q=e.Element("span",{style:{"font-size":g.Em(s)}});if(s>1.25){var r=Math.ceil(1.25/s*10);q.className="MJXp-right MJXp-scale"+r;q.style.marginLeft=g.Em(t.w*(r/10-1)+0.07);t.w*=s*r/10}q.appendChild(o.firstChild);o.appendChild(q);if(n.symmetric){o.style.verticalAlign=g.Em(0.25*(1-s))}}});h.mspace.Augment({toPreviewHTML:function(q){q=this.PHTMLdefaultSpan(q);var o=this.getValues("height","depth","width");var n=g.length2em(o.width),p=g.length2em(o.height),s=g.length2em(o.depth);var r=this.PHTML;r.w=n;r.h=p;r.d=s;if(n<0){if(!g.lastIsInt){q.style.marginLeft=g.Em(n)}n=0}q.style.width=g.Em(n);q.style.height=g.Em(p+s);if(s){q.style.verticalAlign=g.Em(-s)}return q}});h.mpadded.Augment({toPreviewHTML:function(u){u=this.PHTMLdefaultSpan(u,{childSpans:true,className:"MJXp-box",forceChild:true});var o=u.firstChild;var v=this.getValues("width","height","depth","lspace","voffset");var s=this.PHTMLdimen(v.lspace);var q=0,n=0,t=s.len,r=-s.len,p=0;if(v.width!==""){s=this.PHTMLdimen(v.width,"w",0);if(s.pm){r+=s.len}else{u.style.width=g.Em(s.len)}}if(v.height!==""){s=this.PHTMLdimen(v.height,"h",0);if(!s.pm){q+=-this.PHTMLbboxFor(0).h}q+=s.len}if(v.depth!==""){s=this.PHTMLdimen(v.depth,"d",0);if(!s.pm){n+=-this.PHTMLbboxFor(0).d;p+=-s.len}n+=s.len}if(v.voffset!==""){s=this.PHTMLdimen(v.voffset);q-=s.len;n+=s.len;p+=s.len}if(q){o.style.marginTop=g.Em(q)}if(n){o.style.marginBottom=g.Em(n)}if(t){o.style.marginLeft=g.Em(t)}if(r){o.style.marginRight=g.Em(r)}if(p){u.style.verticalAlign=g.Em(p)}return u},PHTMLdimen:function(q,r,n){if(n==null){n=-k}q=String(q);var o=q.match(/width|height|depth/);var p=(o?this.PHTML[o[0].charAt(0)]:(r?this.PHTML[r]:0));return{len:g.length2em(q,p)||0,pm:!!q.match(/^[-+]/)}}});h.munderover.Augment({toPreviewHTML:function(r){var t=this.getValues("displaystyle","accent","accentunder","align");var n=this.data[this.base];if(!t.displaystyle&&n!=null&&(n.movablelimits||n.CoreMO().Get("movablelimits"))){r=h.msubsup.prototype.toPreviewHTML.call(this,r);r.className=r.className.replace(/munderover/,"msubsup");return r}r=this.PHTMLdefaultSpan(r,{childSpans:true,className:"",noBBox:true});var p=this.PHTMLbboxFor(this.over),v=this.PHTMLbboxFor(this.under),u=this.PHTMLbboxFor(this.base),s=this.PHTML,o=p.acc;if(this.data[this.over]){if(r.lastChild.firstChild){r.lastChild.firstChild.style.marginLeft=p.l=r.lastChild.firstChild.style.marginRight=p.r=0}var q=e.Element("span",{},[["span",{className:"MJXp-over"}]]);q.firstChild.appendChild(r.lastChild);if(r.childNodes.length>(this.data[this.under]?1:0)){q.firstChild.appendChild(r.firstChild)}this.data[this.over].PHTMLhandleScriptlevel(q.firstChild.firstChild);if(o!=null){if(p.vec){q.firstChild.firstChild.firstChild.style.fontSize="60%";p.h*=0.6;p.d*=0.6;p.w*=0.6}o=o-p.d+0.1;if(u.t!=null){o+=u.t-u.h}q.firstChild.firstChild.style.marginBottom=g.Em(o)}if(r.firstChild){r.insertBefore(q,r.firstChild)}else{r.appendChild(q)}}if(this.data[this.under]){if(r.lastChild.firstChild){r.lastChild.firstChild.style.marginLeft=v.l=r.lastChild.firstChild.marginRight=v.r=0}this.data[this.under].PHTMLhandleScriptlevel(r.lastChild)}s.w=Math.max(0.8*p.w,0.8*v.w,u.w);s.h=0.8*(p.h+p.d+(o||0))+u.h;s.d=u.d+0.8*(v.h+v.d);return r}});h.msubsup.Augment({toPreviewHTML:function(q){q=this.PHTMLdefaultSpan(q,{noBBox:true});if(!this.data[this.base]){if(q.firstChild){q.insertBefore(e.Element("span"),q.firstChild)}else{q.appendChild(e.Element("span"))}}var s=this.data[this.base],p=this.data[this.sub],n=this.data[this.sup];if(!s){s={bbox:{h:0.8,d:0.2}}}q.firstChild.style.marginRight=".05em";var o=Math.max(0.4,s.PHTML.h-0.4),u=Math.max(0.2,s.PHTML.d+0.1);var t=this.PHTML;if(n&&p){var r=e.Element("span",{className:"MJXp-script-box",style:{height:g.Em(o+n.PHTML.h*0.8+u+p.PHTML.d*0.8),"vertical-align":g.Em(-u-p.PHTML.d*0.8)}},[["span",{},[["span",{},[["span",{style:{"margin-bottom":g.Em(-(n.PHTML.d-0.05))}}]]]]],["span",{},[["span",{},[["span",{style:{"margin-top":g.Em(-(n.PHTML.h-0.05))}}]]]]]]);p.PHTMLhandleScriptlevel(r.firstChild);n.PHTMLhandleScriptlevel(r.lastChild);r.firstChild.firstChild.firstChild.appendChild(q.lastChild);r.lastChild.firstChild.firstChild.appendChild(q.lastChild);q.appendChild(r);t.h=Math.max(s.PHTML.h,n.PHTML.h*0.8+o);t.d=Math.max(s.PHTML.d,p.PHTML.d*0.8+u);t.w=s.PHTML.w+Math.max(n.PHTML.w,p.PHTML.w)+0.07}else{if(n){q.lastChild.style.verticalAlign=g.Em(o);n.PHTMLhandleScriptlevel(q.lastChild);t.h=Math.max(s.PHTML.h,n.PHTML.h*0.8+o);t.d=Math.max(s.PHTML.d,n.PHTML.d*0.8-o);t.w=s.PHTML.w+n.PHTML.w+0.07}else{if(p){q.lastChild.style.verticalAlign=g.Em(-u);p.PHTMLhandleScriptlevel(q.lastChild);t.h=Math.max(s.PHTML.h,p.PHTML.h*0.8-u);t.d=Math.max(s.PHTML.d,p.PHTML.d*0.8+u);t.w=s.PHTML.w+p.PHTML.w+0.07}}}return q}});h.mfrac.Augment({toPreviewHTML:function(r){r=this.PHTMLdefaultSpan(r,{childSpans:true,className:"MJXp-box",forceChild:true,noBBox:true});var o=this.getValues("linethickness","displaystyle");if(!o.displaystyle){if(this.data[0]){this.data[0].PHTMLhandleScriptlevel(r.firstChild)}if(this.data[1]){this.data[1].PHTMLhandleScriptlevel(r.lastChild)}}var n=e.Element("span",{className:"MJXp-box"},[["span",{className:"MJXp-denom"},[["span",{},[["span",{className:"MJXp-rule",style:{height:"1em"}}]]],["span"]]]]);n.firstChild.lastChild.appendChild(r.lastChild);r.appendChild(n);var s=this.PHTMLbboxFor(0),p=this.PHTMLbboxFor(1),v=this.PHTML;v.w=Math.max(s.w,p.w)*0.8;v.h=s.h+s.d+0.1+0.25;v.d=p.h+p.d-0.25;v.l=v.r=0.125;o.linethickness=Math.max(0,g.length2em(o.linethickness||"0",0));if(o.linethickness){var u=n.firstChild.firstChild.firstChild;var q=g.Em(o.linethickness);u.style.borderTop="none";u.style.borderBottom=(o.linethickness<0.15?"1px":q)+" solid";u.style.margin=q+" 0";q=o.linethickness;n.style.marginTop=g.Em(3*q-1.2);r.style.verticalAlign=g.Em(1.5*q+0.1);v.h+=1.5*q-0.1;v.d+=1.5*q}else{n.style.marginTop="-.7em"}return r}});h.msqrt.Augment({toPreviewHTML:function(n){n=this.PHTMLdefaultSpan(n,{childSpans:true,className:"MJXp-box",forceChild:true,noBBox:true});this.PHTMLlayoutRoot(n,n.firstChild);return n},PHTMLlayoutRoot:function(u,n){var v=this.PHTMLbboxFor(0);var q=Math.ceil((v.h+v.d+0.14)*100),w=g.Em(14/q);var r=e.Element("span",{className:"MJXp-surd"},[["span",{style:{"font-size":q+"%","margin-top":w}},["\u221A"]]]);var s=e.Element("span",{className:"MJXp-root"},[["span",{className:"MJXp-rule",style:{"border-top":".08em solid"}}]]);var p=(1.2/2.2)*q/100;if(q>150){var o=Math.ceil(150/q*10);r.firstChild.className="MJXp-right MJXp-scale"+o;r.firstChild.style.marginLeft=g.Em(p*(o/10-1)/q*100);p=p*o/10;s.firstChild.style.borderTopWidth=g.Em(0.08/Math.sqrt(o/10))}s.appendChild(n);u.appendChild(r);u.appendChild(s);this.PHTML.h=v.h+0.18;this.PHTML.d=v.d;this.PHTML.w=v.w+p;return u}});h.mroot.Augment({toPreviewHTML:function(q){q=this.PHTMLdefaultSpan(q,{childSpans:true,className:"MJXp-box",forceChild:true,noBBox:true});var p=this.PHTMLbboxFor(1),n=q.removeChild(q.lastChild);var t=this.PHTMLlayoutRoot(e.Element("span"),q.firstChild);n.className="MJXp-script";var u=parseInt(t.firstChild.firstChild.style.fontSize);var o=0.55*(u/120)+p.d*0.8,s=-0.6*(u/120);if(u>150){s*=0.95*Math.ceil(150/u*10)/10}n.style.marginRight=g.Em(s);n.style.verticalAlign=g.Em(o);if(-s>p.w*0.8){n.style.marginLeft=g.Em(-s-p.w*0.8)}q.appendChild(n);q.appendChild(t);this.PHTML.w+=Math.max(0,p.w*0.8+s);this.PHTML.h=Math.max(this.PHTML.h,p.h*0.8+o);return q},PHTMLlayoutRoot:h.msqrt.prototype.PHTMLlayoutRoot});h.mfenced.Augment({toPreviewHTML:function(q){q=this.PHTMLcreateSpan(q);this.PHTMLhandleStyle(q);this.PHTMLhandleColor(q);this.addFakeNodes();this.PHTMLaddChild(q,"open",{});for(var p=0,n=this.data.length;ps){s=x.w}}}var o=this.PHTML;o.w=s;o.h=y/2+0.25;o.d=y/2-0.25;o.l=o.r=0.125;return E}});h.mlabeledtr.Augment({PHTMLdefaultSpan:function(q,o){if(!o){o={}}q=this.PHTMLcreateSpan(q);this.PHTMLhandleStyle(q);this.PHTMLhandleColor(q);if(this.isToken){this.PHTMLhandleToken(q)}for(var p=1,n=this.data.length;p hubfn.$methodArgsIndex ? + hubfn.$overloads[hubfn.$methodArgsIndex] : null) || + hubfn.$defaultOverload; + return fn.apply(this, arguments); + }; + hubfn.$overloads = overloads; + if ("$methodArgsIndex" in basefn) { + hubfn.$methodArgsIndex = basefn.$methodArgsIndex; + } + hubfn.$defaultOverload = defaultOverload; + hubfn.name = name; + object[name] = hubfn; + } + + /** + * class overloading, part 2 + */ + + function extendClass(subClass, baseClass) { + function extendGetterSetter(propertyName) { + defaultScope.defineProperty(subClass, propertyName, { + get: function() { + return baseClass[propertyName]; + }, + set: function(v) { + baseClass[propertyName]=v; + }, + enumerable: true + }); + } + + var properties = []; + for (var propertyName in baseClass) { + if (typeof baseClass[propertyName] === 'function') { + overloadBaseClassFunction(subClass, propertyName, baseClass[propertyName]); + } else if(propertyName.charAt(0) !== "$" && !(propertyName in subClass)) { + // Delaying the properties extension due to the IE9 bug (see #918). + properties.push(propertyName); + } + } + while (properties.length > 0) { + extendGetterSetter(properties.shift()); + } + + subClass.$super = baseClass; + } + + /** + * class overloading, part 3 + */ + defaultScope.extendClassChain = function(base) { + var path = [base]; + for (var self = base.$upcast; self; self = self.$upcast) { + extendClass(self, base); + path.push(self); + base = self; + } + while (path.length > 0) { + path.pop().$self=base; + } + }; + + // static + defaultScope.extendStaticMembers = function(derived, base) { + extendClass(derived, base); + }; + + // interface + defaultScope.extendInterfaceMembers = function(derived, base) { + extendClass(derived, base); + }; + + /** + * Java methods and JavaScript functions differ enough that + * we need a special function to make sure it all links up + * as classical hierarchical class chains. + */ + defaultScope.addMethod = function(object, name, fn, hasMethodArgs) { + var existingfn = object[name]; + if (existingfn || hasMethodArgs) { + var args = fn.length; + // builds the overload methods table + if ("$overloads" in existingfn) { + existingfn.$overloads[args] = fn; + } else { + var hubfn = function() { + var fn = hubfn.$overloads[arguments.length] || + ("$methodArgsIndex" in hubfn && arguments.length > hubfn.$methodArgsIndex ? + hubfn.$overloads[hubfn.$methodArgsIndex] : null) || + hubfn.$defaultOverload; + return fn.apply(this, arguments); + }; + var overloads = []; + if (existingfn) { + overloads[existingfn.length] = existingfn; + } + overloads[args] = fn; + hubfn.$overloads = overloads; + hubfn.$defaultOverload = existingfn || fn; + if (hasMethodArgs) { + hubfn.$methodArgsIndex = args; + } + hubfn.name = name; + object[name] = hubfn; + } + } else { + object[name] = fn; + } + }; + + // internal helper function + function isNumericalJavaType(type) { + if (typeof type !== "string") { + return false; + } + return ["byte", "int", "char", "color", "float", "long", "double"].indexOf(type) !== -1; + } + + /** + * Java's arrays are pre-filled when declared with + * an initial size, but no content. JS arrays are not. + */ + defaultScope.createJavaArray = function(type, bounds) { + var result = null, + defaultValue = null; + if (typeof type === "string") { + if (type === "boolean") { + defaultValue = false; + } else if (isNumericalJavaType(type)) { + defaultValue = 0; + } + } + if (typeof bounds[0] === 'number') { + var itemsCount = 0 | bounds[0]; + if (bounds.length <= 1) { + result = []; + result.length = itemsCount; + for (var i = 0; i < itemsCount; ++i) { + result[i] = defaultValue; + } + } else { + result = []; + var newBounds = bounds.slice(1); + for (var j = 0; j < itemsCount; ++j) { + result.push(defaultScope.createJavaArray(type, newBounds)); + } + } + } + return result; + }; + + // screenWidth and screenHeight are shared by all instances. + // and return the width/height of the browser's viewport. + defaultScope.defineProperty(defaultScope, 'screenWidth', + { get: function() { return window.innerWidth; } }); + + defaultScope.defineProperty(defaultScope, 'screenHeight', + { get: function() { return window.innerHeight; } }); + + return defaultScope; +}; + +},{}],6:[function(require,module,exports){ +/** + * Finalise the Processing.js object. + */ +module.exports = function finalizeProcessing(Processing, options) { + + // unpack options + var window = options.window, + document = options.document, + XMLHttpRequest = window.XMLHttpRequest, + noop = options.noop, + isDOMPresent = options.isDOMPresent, + version = options.version, + undef; + + // versioning + Processing.version = (version ? version : "@DEV-VERSION@"); + + // Share lib space + Processing.lib = {}; + + /** + * External libraries can be added to the global Processing + * objects with the `registerLibrary` function. + */ + Processing.registerLibrary = function(name, library) { + Processing.lib[name] = library; + if(library.hasOwnProperty("init")) { + library.init(defaultScope); + } + }; + + /** + * This is the object that acts as our version of PApplet. + * This can be called as Processing.Sketch() or as + * Processing.Sketch(function) in which case the function + * must be an already-compiled-to-JS sketch function. + */ + Processing.Sketch = function(attachFunction) { + this.attachFunction = attachFunction; + this.options = { + pauseOnBlur: false, + globalKeyEvents: false + }; + + /* Optional Sketch event hooks: + * onLoad - parsing/preloading is done, before sketch starts + * onSetup - setup() has been called, before first draw() + * onPause - noLoop() has been called, pausing draw loop + * onLoop - loop() has been called, resuming draw loop + * onFrameStart - draw() loop about to begin + * onFrameEnd - draw() loop finished + * onExit - exit() done being called + */ + this.onLoad = noop; + this.onSetup = noop; + this.onPause = noop; + this.onLoop = noop; + this.onFrameStart = noop; + this.onFrameEnd = noop; + this.onExit = noop; + + this.params = {}; + this.imageCache = { + pending: 0, + images: {}, + // Opera requires special administration for preloading + operaCache: {}, + // Specify an optional img arg if the image is already loaded in the DOM, + // otherwise href will get loaded. + add: function(href, img) { + // Prevent muliple loads for an image, in case it gets + // preloaded more than once, or is added via JS and then preloaded. + if (this.images[href]) { + return; + } + + if (!isDOMPresent) { + this.images[href] = null; + } + + // No image in the DOM, kick-off a background load + if (!img) { + img = new Image(); + img.onload = (function(owner) { + return function() { + owner.pending--; + }; + }(this)); + this.pending++; + img.src = href; + } + + this.images[href] = img; + + // Opera will not load images until they are inserted into the DOM. + if (window.opera) { + var div = document.createElement("div"); + div.appendChild(img); + // we can't use "display: none", since that makes it invisible, and thus not load + div.style.position = "absolute"; + div.style.opacity = 0; + div.style.width = "1px"; + div.style.height= "1px"; + if (!this.operaCache[href]) { + document.body.appendChild(div); + this.operaCache[href] = div; + } + } + } + }; + + this.sourceCode = undefined; + this.attach = function(processing) { + // either attachFunction or sourceCode must be present on attach + if(typeof this.attachFunction === "function") { + this.attachFunction(processing); + } else if(this.sourceCode) { + var func = ((new Function("return (" + this.sourceCode + ");"))()); + func(processing); + this.attachFunction = func; + } else { + throw "Unable to attach sketch to the processing instance"; + } + }; + + this.toString = function() { + var i; + var code = "((function(Sketch) {\n"; + code += "var sketch = new Sketch(\n" + this.sourceCode + ");\n"; + for(i in this.options) { + if(this.options.hasOwnProperty(i)) { + var value = this.options[i]; + code += "sketch.options." + i + " = " + + (typeof value === 'string' ? '\"' + value + '\"' : "" + value) + ";\n"; + } + } + for(i in this.imageCache) { + if(this.options.hasOwnProperty(i)) { + code += "sketch.imageCache.add(\"" + i + "\");\n"; + } + } + // TODO serialize fonts + code += "return sketch;\n})(Processing.Sketch))"; + return code; + }; + }; + + /** + * aggregate all source code into a single file, then rewrite that + * source and bind to canvas via new Processing(canvas, sourcestring). + * @param {CANVAS} canvas The html canvas element to bind to + * @param {String[]} source The array of files that must be loaded + */ + var loadSketchFromSources = Processing.loadSketchFromSources = function(canvas, sources) { + var code = [], errors = [], sourcesCount = sources.length, loaded = 0; + + function ajaxAsync(url, callback) { + var xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + var error; + if (xhr.status !== 200 && xhr.status !== 0) { + error = "Invalid XHR status " + xhr.status; + } else if (xhr.responseText === "") { + // Give a hint when loading fails due to same-origin issues on file:/// urls + if ( ("withCredentials" in new XMLHttpRequest()) && + (new XMLHttpRequest()).withCredentials === false && + window.location.protocol === "file:" ) { + error = "XMLHttpRequest failure, possibly due to a same-origin policy violation. You can try loading this page in another browser, or load it from http://localhost using a local webserver. See the Processing.js README for a more detailed explanation of this problem and solutions."; + } else { + error = "File is empty."; + } + } + + callback(xhr.responseText, error); + } + }; + xhr.open("GET", url, true); + if (xhr.overrideMimeType) { + xhr.overrideMimeType("application/json"); + } + xhr.setRequestHeader("If-Modified-Since", "Fri, 01 Jan 1960 00:00:00 GMT"); // no cache + xhr.send(null); + } + + function loadBlock(index, filename) { + function callback(block, error) { + code[index] = block; + ++loaded; + if (error) { + errors.push(filename + " ==> " + error); + } + if (loaded === sourcesCount) { + if (errors.length === 0) { + try { + return new Processing(canvas, code.join("\n")); + } catch(e) { + console.log("Processing.js: Unable to execute pjs sketch."); + throw e; + } + } else { + throw "Processing.js: Unable to load pjs sketch files: " + errors.join("\n"); + } + } + } + if (filename.charAt(0) === '#') { + // trying to get script from the element + var scriptElement = document.getElementById(filename.substring(1)); + if (scriptElement) { + callback(scriptElement.text || scriptElement.textContent); + } else { + callback("", "Unable to load pjs sketch: element with id \'" + filename.substring(1) + "\' was not found"); + } + return; + } + + ajaxAsync(filename, callback); + } + + for (var i = 0; i < sourcesCount; ++i) { + loadBlock(i, sources[i]); + } + }; + + /** + * Automatic initialization function. + */ + var init = function() { + document.removeEventListener('DOMContentLoaded', init, false); + + // before running through init, clear the instances list, to prevent + // sketch duplication when page content is dynamically swapped without + // swapping out processing.js + processingInstances = []; + Processing.instances = processingInstances; + + var canvas = document.getElementsByTagName('canvas'), + filenames; + + for (var i = 0, l = canvas.length; i < l; i++) { + // datasrc and data-src are deprecated. + var processingSources = canvas[i].getAttribute('data-processing-sources'); + if (processingSources === null) { + // Temporary fallback for datasrc and data-src + processingSources = canvas[i].getAttribute('data-src'); + if (processingSources === null) { + processingSources = canvas[i].getAttribute('datasrc'); + } + } + if (processingSources) { + filenames = processingSources.split(/\s+/g); + for (var j = 0; j < filenames.length;) { + if (filenames[j]) { + j++; + } else { + filenames.splice(j, 1); + } + } + loadSketchFromSources(canvas[i], filenames); + } + } + + // also process all + + + + + + +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/pemFioi/components/earth3d/earth3d.js b/pemFioi/components/earth3d/earth3d.js new file mode 100644 index 000000000..60fa8dc16 --- /dev/null +++ b/pemFioi/components/earth3d/earth3d.js @@ -0,0 +1,1202 @@ +function Earth3D(params) { + + // params and validation + + function validate(value, min, max) { + return value >= min && value <= max; + } + + function validateLatLng(point) { + return validate(point.lat, -90, 90) && validate(point.lng, -180, 180) + } + + var defaults = { + width: null, + height: null, + camera: { + lat: 0, + lng: 0 + }, + cursor: false, + labels: [], + grid: {}, + opacity: 1, + tesselation: 100, + textured: true, + distance: 1, + parent: document.body, + text: { + label: { + font: '24px Arial', + color: '#000000', + border: '#00FFFF', + background: '#FFFFFF99', + rounded: true, + hmargin: 5, + vmargin: 10 + }, + lat_coordinates: { + font: '12px Arial', + color: '#000000', + border: false, + background: '#00FF00', + rounded: true, + hmargin: 5, + vmargin: 2 + }, + lng_coordinates: { + font: '12px Arial', + color: '#000000', + border: false, + background: '#FFFF00', + rounded: true, + hmargin: 5, + vmargin: 2 + } + }, + colors: { + //pole: 0x000000, + earth: 0x1D3870, + lat: 0x00FF00, + lng: 0xFFFF00, + line: 0x0000FF, + point: 0xFF0000, + label: 0x00FFFF, + marker: 0xFF00FF, + path: 0x00FFFF + }, + events: {}, + orbit: { + rotate: true, + zoom: true, + pan: false + } + } + var params = Object.assign({}, defaults, params); + if(!Array.isArray(params.labels)) { + params.labels = []; + } + if(!validateLatLng(params.camera)) { + return console.error('Invalid camera position: ', params.camera); + } + if(params.cursor) { + if(!validateLatLng(params.cursor)) { + return console.error('Invalid cursor position: ', params.cursor); + } + } + if(!validate(params.opacity, 0, 1)) { + return console.error('Opacity is out of range: ', params.opacity); + } + if(!validate(params.tesselation, 10, 1000)) { + return console.error('Tesselation is out of range: ', params.tesselation); + } + for(var i=0; i 0) { + elements.grid.lat[l] = createParalles(l); + elements.grid.lat_coordinates[l] = createLatCoordinates(l); + } + if(params.grid.lng > 0) { + elements.grid.lng[l] = createMeridians(l); + elements.grid.lng_coordinates[l] = createLngCoordinates(l); + } + if(!params.grid.dynamic) { + break; + } + } + } + + + function getGridLevel() { + if(!params.grid.dynamic) { + return 0; + } + var level = 0; + var d = camera.position.getLength(); + for(var i=0; i < config.grid_distance_levels.length; i++) { + if(d >= config.grid_distance_levels[i]) { + level = i; + break; + } + } + + return level; + } + + + function getGridLevelBias(angle) { + angle = Math.abs(angle - Math.PI * 0.5); + var bias = config.grid_angle_levels.length - 1; + for(var i=0; i < config.grid_angle_levels.length; i++) { + if(angle >= config.grid_angle_levels[i]) { + bias = i; + break; + } + } + bias = config.grid_angle_levels.length - 1 - bias; + return bias; + } + + var grid_level_lat = null; + var grid_level_lng = null; + function refreshGrid(spherical) { + if(!params.grid) { + return; + } + var camera_distance = camera.position.getLength(); + + var level = getGridLevel(); + if(grid_level_lat !== level) { + if(grid_level_lat !== null && elements.grid.lat[grid_level_lat]) { + scene.remove(elements.grid.lat[grid_level_lat]); + scene.remove(elements.grid.lat_coordinates[grid_level_lat].group); + } + if(elements.grid.lat[level]) { + scene.add(elements.grid.lat[level]); + scene.add(elements.grid.lat_coordinates[level].group); + } + grid_level_lat = level; + } + + // update lat coordinates position + if(elements.grid.lat_coordinates[level]) { + var l = Math.min(1, (camera_distance - config.grid_coordinate_radius) * Math.tan(config.fov / 2)); + elements.grid.lat_coordinates[level].group.euler.y = spherical.theta - Math.asin(l) * 0.5; + } + + + var bias = getGridLevelBias(spherical.phi); + level = Math.max(0, level - bias); + if(grid_level_lng !== level) { + if(grid_level_lng !== null && elements.grid.lng[grid_level_lng]) { + scene.remove(elements.grid.lng[grid_level_lng]); + scene.remove(elements.grid.lng_coordinates[grid_level_lng].group); + } + if(elements.grid.lng[level]) { + scene.add(elements.grid.lng[level]); + scene.add(elements.grid.lng_coordinates[level].group); + } + grid_level_lng = level; + } + + // update lng coordinates position + var s2 = config.grid_coordinate_size * camera_distance; + if(elements.grid.lng_coordinates[level]) { + var group = elements.grid.lng_coordinates[level].group; + var a = Math.PI / 2 - spherical.phi; + var y = config.grid_coordinate_radius * Math.sin(a); + var m = config.grid_coordinate_radius - 0.01 * camera_distance / config.distance.max; + y = Math.min(y, m); + y = Math.max(y, -m); + var s1 = Math.sqrt(config.grid_coordinate_radius * config.grid_coordinate_radius - y * y); + group.position.y = y; + group.scale.x = s1; + group.scale.z = s1; + + var sprites = elements.grid.lng_coordinates[grid_level_lng].sprites; + var sx = s2 / s1; + for(var i=0; i + + + + zen3d - earth + + + + + + + + + + + +
+ +
+ + +
+ Initial camera position +
+ + +
+
+ + +
+
+
+ + + +
+
+ +
+ + +
+
+ + +
+ +
+ + +
+ + +
+
+ + +
+ +
+ + Orbit control options + + + + +
+
+ + +
+ +
+ +
+ + +
+ +
+ + Paths + + +
+ + mouseover coordinates + 
			
+		
		
+
+		mouseclick markers
+		
			
+		
				
+	

+
+	

+		Text styles JSON
+		
+		
		
+
+		Labels
+		
+		
+		
+
+	

+
+	
+	
	
+	
+
+	
+
+
\ No newline at end of file
diff --git a/pemFioi/components/earth3d/textures/1024.js b/pemFioi/components/earth3d/textures/1024.js
new file mode 100644
index 000000000..b21346bc5
--- /dev/null
+++ b/pemFioi/components/earth3d/textures/1024.js
@@ -0,0 +1 @@
+Earth3DTexture = 'data:image/jpeg;base64,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KKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAp6OVQqADn1FMopOKlowTsFFFFMAr0X4dWttJoN4HZAGgd5AJBlvmC49jjGB7+9edV3ttpraR4ctrq0YOt9CshkA+Yn0z2AJ6f7PNeDxFKP1VRfV/1c68HBym32Oe8U3jSaxOFYbF+RQuMbRwP5CsVmOCMD6HtUl8W8/wDebg5HzZ7GqxU7t+7gHmvifM627sVlXdgnnFNcbSQDz64pPMO4k0gkIG1Oh6561VriBYpWG4joOnehZNvBABpdxU8Hkc0BlY7nQe5HFACsc8/0p9razTj92h292PAH40JO0Y+VEC+hGc0GeRwA77V9BwKNguaNvp8e13+1xhQOWHNLlbWMeUwdm6tjAqopiGdm5lB4DHGatrcM6JEQrIo4XFZqTjLmQNl3TbyUWL20rGSOTqdx6elPn06ynLJCArqMsVbp+FR21k00IVEKAOME9xzn9T+taEMIt78iQtIXjHO3gD6+taxx2IoSvRk1102+ZMoKa1OfudMvInl228rpGNxYL/D6n8xVPB5yDx19q7JfMNyQkmN3r1+taFrHlJAy7hjBB6elfQUeJ58vv07/ADt+hl9S5tUzzyiuq1fwxK4+0aeihj1hzjPuP8K529srqycJdQNEx6A19Jg8woYuKdOWvbr9xy1KM6b1RXooortMwooooAKKKKACiiigAooooAKKKKACiiigArRt5t0CRRRheCHI9fUms6pIJWhlWROo7etefmeC+uUHBOzWqNKU+SVy+iTCdYZgxXO3OOc+lb3iLRraNJGt1WKMAErgg1DY/Z9QhiLKVB+6U6jttP8ASta7CG18uViioM7vavzmpBwm4S0aPXp8sonDXcMkWN6bcqMfSqwJUc12VzaC/tFg2AMxG1gOa5uS0aCQrLG2Sp2g8E/lVLUTg0UckDK9aimLZORx16VvaDbx3ErxyQf6td6v64P+GPyp15ohc+c5dSwyyqM46YxTSew/ZyaujW8KWscWlxSMG3gZGRwCwBz157flVLXNPvb/AFoiCGZovlUOI2KjjPYe/wDOr+l3RX/Qdw/dQIIywOepz/Oup8MzpDhZ2RgDkHPQV6GErywNX2iV21+Zr9XjWpqN+oaRYnT4giAnYFjzjPPHJ9+Afwq7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MemTXwWbRccZO59Zl0lPDRXYzbbG49RnqSe9XIZ0wQCG29KpPEROzRnaOpXtUsHA7Z659q896nWtCQyu1yGzhfT1q3KYpNpZQOnNZzEklh2OT708ScAg4phdlyTbsO3rjvTEjLckge47VXWVjlRmpbRy1x5SsAwGcHuKHeweppJlGUK/PqK6CxglayjkOckHdgZIHY1D4P0sanqiwvGPlXc2R1AravLeMX8unW4/dooJk688nGP89655M1bWyOVvo5obsojMYlGRgcn1qC6u45S8KsA4UEjPNWrp5PMYnqDyc8Ec/rWJfIGmGz5WGScfyqkrmck+hnzX1s1yiMpWX7u1h6Z/+vWT4l0+PUNOQ7k83OQUOQp/wrT8kG4MtxGGyCDkAio7vBkgG9UUqQiquOB6nrW9KpKlNTg7NHJVgpxcZbM8zuYJbeVopV2sDioq2/Fdu8dwkzAbWyBg/wCfWsSv0HA4h4mhGq92fL16fs6jj2CiiiuoyCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigDpPh9C76w8qxBwiYznBBPAx+teq+JZDJfrYwNmCytcsMhgG2jPQ44ycn1zXl/w3uZbTW1uE+4jozD1w2f8a9O8URw2fi6/kcMwkVXHONwbDdv84r43OW3ipPtb8j38ua9il6nNarJJeTBbm4P7vmIN0VPTjqaqyxbJYZWVVjkIVAxwPT8auyRLdXrPbogVDhRjg+n9K1QipHHFleEAPvXjNo7Wr6nNahBsn8x0Gei47/5FRi1VwrFcnq2K0dW2wyqJwfKfhZByFPofTPFQQEFyY/mjz19fpWLk7XMpWuRNhBwFAHY1mzx3csh2XKjAPCqSAO9aD/uo2MnA5OOprm9b1aWPNnatsGPnfPzD2z2rswGDni6vJH5swr1o0o3ZmancO8zw5XarHcR3NUqKK+/w9CGHpqnBaI8Gc3OTkwooorYkKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKtaXf3emX0V7ZTNFNGcgg9fY+oPpVWilKKkrPYE2ndHvega5Zy6WtzFHlZ4w3Unr1X2wcirZv4JYziIW5HT5s15Z4Au5ItOu43mVoRIh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RRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU5FVpFVm2qWG4+g702kPUc9DWOJTlSlFO19PvKh8R2XhuGB7ee5jjeMNzGJGPKqQuV9e+fx/Dage4CNMI90acMyrnA7ZNR6NYvFodrIiuI1iyRw3Jxkn+782eo6YqzZhZMRsTyeuOv418FVUYSstj6TDp8iKt5MRZT3Aj3GNC5UnGcc1iL4mtI7dyltOJnXAHAX88/0rY8Q3S2dnNIiqCq7Rk4DH+Z/+tXA3E8s5Qytu2LtXjoPT9a9bKMBTxMXOcdE97nHmFeVOXLF9CMkkknqaSiivrTxQooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACkkkUbd+ck4yBwOKWkdQ64PSscRGpKm/Zu0uhUGr+9sWri1lt4g7gEPkAggjg/Xj/AOvVantNM8EcMkpdI+FyOlMrLBRrqnfEP3mx1OW/ubBRRRXWQFFFFABRRViws7m/uVtrWLzJG6DIAH1J4A+tKUlFXk9ASbdkV6ntYLiVPOhRgqkjf0HHueK6jT/DdlaWEtzqxlkmTdhFBESAdSx6t64GO3JrD1e+t5YUtbLzFgU5O9QMn29B7V488bUxNZU8Lst3bT0On2KpxvU36IfFqaW+lCGNEaclhux90Ecn68msmiiu/C4Olhub2a+J3f8AXYwlNy3CiiiuokKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigArofh14eHifxXb6ZLeQ2UOGlkmkPQKM4AOMknAH1rnq9c/Z707Q7vxHA1/bC5xFK00cnRMLlGA/iOenfP0GeDMZNUtDfDpOZqa1oVvFpjTwxG13MdiTeducA8FWKlSCO27jPeufWGaOLAwHGea73xrLLJZJFj9zE5k+0uWHmZzhQehx7AfSvPdS1OGyiPmyiPglfm5b2r4qqpTq8kFqfQUpKNPmk9Dh9bsdQgkae9bzAzYD7s5/DtWZVrUb+6v5S9xJkZyFHAFVa+9w0akaSVW1/LY+cquDm3C9vMKKKK3MwooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKXtnP4UlFABRRRQAUUUUAHGO+aKKKACiiigAooooAKK0LBNHfTp/ts93FeiRfI8uMNGV53buQQemMZ71QOMnHTPFJSu2gsJRRRTAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK0NG1I6dcLJ5W4DOSp2tyMdfpn8z61n0c96xxGHhiIck9iozcXdG74g8SXerK0Z+SNjl84yxz3IArCoopYbC0sNDkpqyCdSU3eTCiiityQooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigArqPAGt3GkazZT2s5gdJcOSwAIbAz68DPPauXpyMyOHRirA5BHas61JVYOLKhJxd0enapqt1bpJaarK02xzIs2S42k4UZDN1AHUA/Wua8S2z3tkLiKJgIM5JPbuDUNp4oM0bQa9DLqELYyFk2E4GATgckep/8Ar1euNd8MRaekemafexSvHtlWScMF9hhQD+PXivm/7OrYWsq1JXafyt/Xc9F4mNan7OTscZRU928DzM0MZQemRUHHavpac3ON2mvU82Ss7XLFrJaoGE8DSE8ZDY2+4ply8Mkm6GDyU/u7i36moqKSpJT57v73b7tg5nawUUUVoIKKKKACiiigAoqzYXK2s297W3ukP3o5lJU/iCGH4EUy9e3lunktbdreFjlYzJv28cjOBkZ6f160X1AhooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAVlZW2sMGkoooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo4x70UAFKSWJZiSTySe9JRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRR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';
\ No newline at end of file
diff --git a/pemFioi/components/earth3d/textures/2048.js b/pemFioi/components/earth3d/textures/2048.js
new file mode 100644
index 000000000..53c639510
--- /dev/null
+++ b/pemFioi/components/earth3d/textures/2048.js
@@ -0,0 +1 @@
+Earth3DTexture = 'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTU4RTUwQzREMEQ3MTFFNTk0NjZDOTYyNTNCMTdDOEIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTU4RTUwQzVEMEQ3MTFFNTk0NjZDOTYyNTNCMTdDOEIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNThFNTBDMkQwRDcxMUU1OTQ2NkM5NjI1M0IxN0M4QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBNThFNTBDM0QwRDcxMUU1OTQ2NkM5NjI1M0IxN0M4QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAICAgICAgICAgIDAgICAwQDAgID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';
\ No newline at end of file
diff --git a/pemFioi/components/earth3d/textures/512.js b/pemFioi/components/earth3d/textures/512.js
new file mode 100644
index 000000000..9fc6d792d
--- /dev/null
+++ b/pemFioi/components/earth3d/textures/512.js
@@ -0,0 +1 @@
+Earth3DTexture = 'data:image/jpeg;base64,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';
\ No newline at end of file
diff --git a/pemFioi/components/gaps-table/component.js b/pemFioi/components/gaps-table/component.js
new file mode 100644
index 000000000..4cf8d1722
--- /dev/null
+++ b/pemFioi/components/gaps-table/component.js
@@ -0,0 +1,532 @@
+function GapsTable(params) {
+
+    var defaults = {
+        display_output_csv: false,
+        display_input_csv: false,
+        random: false,
+        header: true,
+        tables: [],
+        placeholder: '*',
+        cell_min_width: 100,
+        cell_min_width: 100,
+        table_min_size: {
+            rows: 2,
+            cols: 2
+        },
+        table_max_size: {
+            rows: 10,
+            cols: 10
+        },
+        csv_separator: ',',
+        labels: {},
+        answer: false
+    }
+    params = Object.assign({}, defaults, params);
+
+
+    var uid = Math.random().toString(36).substr(2, 12);
+    function shuffleArray(a) {
+        if(params.random === false) {
+            return a;
+        }
+        var j, x, i, r;
+        for(i = a.length - 1; i > 0; i--) {
+            r = 0.5 * (1 + Math.sin(i + params.random));
+            j = Math.floor(r * (i + 1));
+            x = a[i];
+            a[i] = a[j];
+            a[j] = x;
+        }
+        return a;
+    }
+
+    function iterateTableArray(arr, callback) {
+        for(var i=0; i');
+    params.parent.append(wrapper);
+
+    function addLabel(section) {
+        if(section in params.labels) {
+            var label = $('
');
+            label.html(params.labels[section]);
+            wrapper.append(label);
+        }
+    }
+
+
+
+
+
+    function Schema(data) {
+
+        if(Array.isArray(data)) {
+            data = alignTableArray(data, '')
+        }
+
+        return {
+            isStatic: function() {
+                return !!data;
+            },
+
+            isPlaceholder: function(row, col) {
+                return data ? data[row][col] === params.placeholder : true;
+            },
+
+            getContent: function(row, col) {
+                return data ? data[row][col] : '';
+            }
+        }
+    }
+
+
+
+    function formatCSV(data, mistakes) {
+        var lines = [];
+        for(var i=0; i';
+                }
+                cells.push(v);
+            }
+            lines[i] = cells.join(params.csv_separator);
+        }
+        return lines.join('
');
+    }
+
+
+
+
+
+    function Table(data) {
+
+        var answer;
+        var mistakes;
+        var cells = [];
+
+        if(params.display_output_csv) {
+            var input_display = $('
');
+            addLabel('input');
+            wrapper.append(input_display);
+            input_display.html(formatCSV(data.values));
+        }        
+        var table = $('');
+        var table_outline = $('
').append(table);
+        var table_container = $('
').append(table_outline);
+        addLabel('table');
+        wrapper.append(table_container);
+        var schema = Schema(data.schema);
+       
+
+        var display;
+        if(params.display_output_csv) {
+            addLabel('output');
+            display = $('
');
+            wrapper.append(display);
+        }
+        function updateCSV() {
+            if(!params.display_output_csv) {
+                return;
+            }
+            display.html(formatCSV(answer, mistakes));
+        }
+
+
+        function createCell(row, col) {
+            var is_header = row == 0 && params.header;
+            var cell = $(is_header ? '
');
+            for(var i=0; i rows) {
+                for(var i=rows; i cols) {
+                    // collapse width
+                    for(var j=cols; j= data.values.length || j > data.values[i].length) {
+                        valid = false;
+                    } else if(!schema.isPlaceholder(i, j)) {
+                        continue;
+                    } else {
+                        var v1 = data.values[i][j];
+                        var v2 = cells[i][j].text();
+                        valid = v1 !== '' && v1 === v2;
+                    }
+                    if(!silent) {
+                        cells[i][j].toggleClass('mistake', !valid);
+                    }
+                    mistakes[i][j] = !valid;
+                    res = res && valid;
+                }
+            }
+            updateCSV();
+            return res;
+        }        
+
+
+        function getValues() {
+            var res = [];
+            iterateTableArray(data.values, function(row, col, v) {
+                if(schema.isPlaceholder(row, col)) {
+                    res.push(v);
+                }
+            })
+            return res;
+        }
+
+
+        refreshAnswer();
+
+        return {
+            getAnswer: getAnswer,
+            setAnswer: setAnswer,
+            getValues: getValues,
+            validate: validate,
+            resetValues: resetValues,
+            resetMistakes: resetMistakes
+        }
+
+    }
+
+
+
+    // tables
+    var tables = [];
+    var values = [];
+    for(var i=0; i');
+    for(var i=0; i' + values[i] + ''));
+    }        
+    wrapper.prepend(toolbar);
+
+    toolbar.find('.value').each(function(i) {
+        var el = $(this), text = el.text();
+        el.draggable({
+            scope: uid,
+            revert: 'invalid',
+            revertDuration: 200,
+            zIndex: 100
+        });
+    });
+
+    toolbar.droppable({
+        scope: uid,
+        drop: function(event, ui) {
+            resetMistakes();
+            ui.draggable.detach().css({top: 0,left: 0}).appendTo(toolbar);
+        }
+    });        
+
+
+
+
+
+    function getAnswer() {
+        var res = [];
+        for(var i=0; i' + msg + '').insertAfter($('.taskContent'));
+            //$('#validate-btn').remove();
+            callback(score, msg, null);
+        };
+
+        task.reloadAnswerObject = function(answerObj) {
+            return window.gaps_table.setAnswer(answerObj);
+        }
+
+        task.getAnswerObject = function() {
+            return window.gaps_table.getAnswer();
+        }
+
+        task.getDefaultAnswerObject = function() {
+            return [];
+        }
+
+        var btn = $('');
+        btn.on('click', function() {
+            platform.validate('done');
+        });
+        btn.insertAfter($('.taskContent'));
+
+        success();
+    }
+
+
+    task.load = function(views, success) {
+        platform.getTaskParams(null, null, function(taskParams) {
+            var params = Object.assign(gaps_table_options, {
+                parent: $('.taskContent'),
+                labels: {
+                    output: 'Output CSV:',
+                    input: 'Input CSV:',
+                    table: 'Table:'
+                }
+            })
+            window.gaps_table = GapsTable(params);
+            setupTask(taskParams, success)
+        });
+    };
+
+
+    $(function() {
+        if(window.platform) {
+            platform.initWithTask(task);
+        }
+    })
+
+})();
\ No newline at end of file
diff --git a/pemFioi/components/gaps-table/task.js b/pemFioi/components/gaps-table/task.js
new file mode 100644
index 000000000..c0425ff5f
--- /dev/null
+++ b/pemFioi/components/gaps-table/task.js
@@ -0,0 +1,112 @@
+function setupGapsTableTask(gaps_table_options) {
+
+    function initTask(subTask) {
+
+        $("#gaps-table").empty();
+    
+        var state = {};
+        var level;
+        var answer = null;
+
+        var gaps_table;
+        var level_options;
+
+        
+        subTask.loadLevel = function(curLevel) {
+            displayHelper.avatarType = "none";
+            level = curLevel;
+            level_options = gaps_table_options[level];
+        };
+    
+        subTask.getStateObject = function() {
+            return state;
+        };
+    
+        subTask.reloadAnswerObject = function(answerObj) {
+            answer = answerObj;
+            if(!answer) {
+                return;
+            }
+        };
+    
+        subTask.resetDisplay = function() {
+            gaps_table && gaps_table.destroy();
+            initGapsTable(function() {
+                displayHelper.customValidate = checkResult;    
+            })
+        };
+    
+        subTask.getAnswerObject = function() {
+            return answer;
+        };
+    
+        subTask.getDefaultAnswerObject = function() {
+            var defaultAnswer = { 
+                data: []
+            };
+            
+            return defaultAnswer;
+        };
+    
+        subTask.unloadLevel = function(callback) {
+            gaps_table && gaps_table.destroy();
+            callback();
+        };
+    
+        subTask.getGrade = function(callback) {
+            checkResult(true, function(res) {
+                callback(res)
+            });      
+        };
+    
+    
+        function initGapsTable(callback) {
+            if(gaps_table) {
+                gaps_table.setAnswer(answer.data);
+                return callback();
+            } 
+
+            var options = Object.assign({}, level_options, {
+                parent: $('#gaps-table'),
+                labels: taskStrings.table_labels,
+                onChange: function(data) {
+                    answer.data = data;
+                },
+                answer: answer.data || []
+            })
+            gaps_table = GapsTable(options);       
+            callback();
+        };
+    
+    
+        function checkResult(noVisual, callback) {
+            initGapsTable(function() {
+                var valid = gaps_table.validate(noVisual);
+                if(!valid) {
+                    if(!noVisual){
+                        displayHelper.showPopupMessage(taskStrings.fail, "blanket");
+                    }
+                    callback && callback({ 
+                        successRate: 0, 
+                        message: taskStrings.fail
+                    });
+                    return;            
+                }
+                if(!noVisual){
+                    platform.validate("done");
+                }
+                callback && callback({ 
+                    successRate: 1, 
+                    message: taskStrings.success 
+                });            
+            })
+        };
+    
+    }
+
+    initWrapper(
+        initTask, 
+        Object.keys(gaps_table_options)
+    );
+    displayHelper.useFullWidth(); 
+}
\ No newline at end of file
diff --git a/pemFioi/components/gaps-table/tests/test-csv.html b/pemFioi/components/gaps-table/tests/test-csv.html
new file mode 100644
index 000000000..df13f236b
--- /dev/null
+++ b/pemFioi/components/gaps-table/tests/test-csv.html
@@ -0,0 +1,52 @@
+
+
+    
+        
+        
+        
+        Gaps table test - data in CSV format
+        
+        
+        
+        
+        
+        
+        
+    
+    
+        

+        

+        
+        

+
+        
+    
+
diff --git a/pemFioi/components/gaps-table/tests/test-static.html b/pemFioi/components/gaps-table/tests/test-static.html
new file mode 100644
index 000000000..8ae24216c
--- /dev/null
+++ b/pemFioi/components/gaps-table/tests/test-static.html
@@ -0,0 +1,70 @@
+
+
+    
+        
+        
+        
+        Gaps table test - static
+        
+        
+        
+        
+        
+        
+        
+    
+    
+        

+        

+        
+        

+
+        
+    
+
diff --git a/pemFioi/components/gaps-table/tests/test.html b/pemFioi/components/gaps-table/tests/test.html
new file mode 100644
index 000000000..2b9815c56
--- /dev/null
+++ b/pemFioi/components/gaps-table/tests/test.html
@@ -0,0 +1,57 @@
+
+
+    
+        
+        
+        
+        Gaps table test - prefilled
+        
+        
+        
+        
+        
+        
+        
+    
+    
+        

+        

+        
+        

+
+        
+    
+
diff --git a/pemFioi/components/geography/geography.js b/pemFioi/components/geography/geography.js
new file mode 100644
index 000000000..032918bdc
--- /dev/null
+++ b/pemFioi/components/geography/geography.js
@@ -0,0 +1,217 @@
+// Geography library
+
+var Geography = {};
+
+// distance calculator
+Geography.DistanceCalculator = function(unit) {
+
+    function getEarthRadius() {
+        var earthRadius = {
+            'yards': 6967410,
+            'km': 6371,
+            'miles': 3959,
+            'metres': 6371000,
+            'feet': 20902231
+        };
+        return earthRadius[unit] || earthRadius['km'];
+    }
+
+    var r = getEarthRadius(unit)
+
+    function deg2rad(deg) {
+        return deg * (Math.PI / 180)
+    }
+
+
+    this.getDistance = function(point1, point2) {
+        var dlat = deg2rad(point2.lat - point1.lat);
+        var dlon = deg2rad(point2.lng - point1.lng);
+        var a =
+            Math.sin(dlat / 2) * Math.sin(dlat / 2) +
+            Math.cos(deg2rad(point1.lat)) * Math.cos(deg2rad(point2.lat)) *
+            Math.sin(dlon / 2) * Math.sin(dlon / 2);
+        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+        return r * c;
+    }
+
+
+    this.getMidPoint = function(point1, point2) {
+        var lat1 = deg2rad(point1.lat);
+        var lng1 = deg2rad(point1.lng);
+        var lat2 = deg2rad(point2.lat);
+        var lng2 = deg2rad(point2.lng);
+        var dlng = lng2 - lng1;
+        var bx = Math.cos(lat2) * Math.cos(dlng);
+        var by = Math.cos(lat2) * Math.sin(dlng);
+        var lat = Math.atan2(
+            Math.sin(lat1) + Math.sin(lat2), 
+            Math.sqrt((Math.cos(lat1) + bx) * (Math.cos(lat1) + bx) + by * by)
+        );
+        var lng = lng1 + Math.atan2(by, Math.cos(lat1) + bx);
+
+        return {
+            lat: lat * 180 / Math.PI,
+            lng: lng * 180 / Math.PI
+        }
+    }
+
+}
+
+
+
+// map renderer 2D
+Geography.Renderer2D = function(options) {
+
+
+    function ImageLoader(src, onLoad) {
+        var loaded = false;
+        var img = new Image();
+        img.src = src;
+        img.onload = function() {
+            loaded = true;
+            onLoad && onLoad();
+        }
+        img.onerror = function() {
+            console.error('Error loading image: ' + src);
+        }
+        this.get = function() {
+            return loaded ? img : null;
+        }
+    }
+
+
+    // measure text size 
+    var span = document.createElement('span');
+    span.style.whiteSpace = 'nowrap';
+    span.style.display = 'inline';
+    span.style.visibility = 'hidden';
+    span.style.font = options.font;
+    if(options.display) {
+        document.body.append(span);
+    }
+    
+
+    function getTextSize(text) {
+        span.innerHTML = text;
+        return {
+            width: span.offsetWidth,
+            height: span.offsetHeight
+        }
+    }
+
+
+
+    function CoordinatesConverter() {
+        var map_lat_bottomRad = options.map_lat_bottom * Math.PI / 180;
+        var mapLngDelta = (options.map_lng_right - options.map_lng_left)
+        var worldMapWidth = ((options.width / mapLngDelta) * 360) / (2 * Math.PI)
+        var mapOffsetY = (worldMapWidth / 2 * Math.log((1 + Math.sin(map_lat_bottomRad)) / (1 - Math.sin(map_lat_bottomRad))))
+
+        this.x = function(lng) {
+            return (lng - options.map_lng_left) * (options.width / mapLngDelta);
+        }
+
+        this.y = function(lat) {
+            var latitudeRad = lat * Math.PI / 180;
+            return options.height - ((worldMapWidth / 2 * Math.log((1 + Math.sin(latitudeRad)) / (1 - Math.sin(latitudeRad)))) - mapOffsetY)
+        }
+    }
+
+
+    function rgba(colors, opacity) {
+        return 'rgba(' + colors.r + ',' + colors.g + ',' + colors.b + ',' + opacity + ')';
+    }
+
+
+    this.clear = function() {
+        var img = images.map.get();
+        if(img) {
+            context.drawImage(img, 0, 0, options.width, options.height)
+        } else {
+            context.fillStyle = rgba(options.background_color, 1);
+            context.fillRect(0, 0, options.width, options.height)
+        }
+    }
+
+
+    this.line = function(lng1, lat1, lng2, lat2, opacity) {
+        context.lineWidth = options.line_width;
+        context.strokeStyle = rgba(options.line_color, opacity);
+        context.beginPath();
+        context.moveTo(coordinates.x(lng1), coordinates.y(lat1));
+        context.lineTo(coordinates.x(lng2), coordinates.y(lat2));
+        context.stroke();
+    }
+
+
+    this.pin = function(lng, lat, label) {
+        var x = coordinates.x(lng);
+        var y = coordinates.y(lat);
+        var img = images.pin.get();
+
+        if(img) {
+            var w = options.pin_scale * img.width;
+            var h = options.pin_scale * img.height;            
+            context.drawImage(img, x - w * 0.5, y - h, w, h);
+        }        
+        context.textAlign = 'center';
+        context.font = options.font;
+        if(options.truncate_labels) {
+            label = label.substr(0, 2);
+            context.fillStyle = rgba(options.text_color, 1);
+            context.fillText(label, x, y - h * 0.6)            
+        } else {
+            var ts = getTextSize(label);
+            context.fillStyle = rgba(options.background_color, 1);
+            var tl = x - 0.5 * ts.width;
+            if(tl < 0) {
+                x -= tl;
+                tl = 0;
+            } else if(tl + ts.width > options.width) {
+                x = options.width - ts.width * 0.5;
+                tl = options.width - ts.width;
+            }
+            
+            context.fillRect(
+                tl,
+                y + 4,
+                ts.width,
+                ts.height
+            );
+            context.fillStyle = rgba(options.text_color, 1);
+            context.textBaseline = 'middle';
+            context.fillText(label, x, y + 4 + ts.height * 0.5);
+        }
+    }
+
+
+    this.addMistake = function(lng, lat) {
+        var x = coordinates.x(lng);
+        var y = coordinates.y(lat);
+        context.strokeStyle = '#FF0000';
+        context.lineWidth = options.line_width;
+        context.beginPath();
+        context.arc(x, y, 20, 20, 0, 2 * Math.PI);
+        context.stroke();
+    }
+
+
+    // init
+    var images = {
+        map: new ImageLoader(options.map_file, this.clear.bind(this)),
+        pin: new ImageLoader(options.pin_file)
+    }
+    var canvas = document.createElement('canvas');
+    canvas.width = options.width;
+    canvas.height = options.height;
+    if(options.display) {
+        options.parent.appendChild(canvas);
+    }
+    var context = canvas.getContext('2d');
+    var coordinates = new CoordinatesConverter();
+
+    this.destroy = function() {
+        options.parent.removeChild(canvas);
+        canvas = null;
+    }    
+}
\ No newline at end of file
diff --git a/pemFioi/components/json-text-editor/editor.js b/pemFioi/components/json-text-editor/editor.js
new file mode 100644
index 000000000..e40fb4b8c
--- /dev/null
+++ b/pemFioi/components/json-text-editor/editor.js
@@ -0,0 +1,108 @@
+function JSONTextEditor(params) {
+
+    var defaults = {
+        tab_size: 4,
+        font_size: 16,
+        validation_interval: 200
+    }
+    params = Object.assign({}, defaults, params);
+
+
+    var editor = ace.edit(params.parent);
+    editor.$blockScrolling = Infinity;
+    editor.setFontSize(params.font_size);
+    editor.getSession().setOptions({
+        mode: 'ace/mode/json',
+        tabSize: params.tab_size,
+        useSoftTabs: true,
+        useWorker: false
+    })
+    var Range = ace.require('ace/range').Range;
+    var mistake_marker;
+
+    var on_change_timeout;
+    editor.getSession().on('change', function(e) {
+        clearTimeout(on_change_timeout);
+        on_change_timeout = setTimeout(
+            handleOnChange, 
+            params.validation_interval
+        );
+    });
+
+
+    function handleOnChange() {
+        params.onChange && params.onChange(
+            getContent()
+        );
+    }    
+
+
+    // content
+    function getContent() {
+        return editor.getValue();
+    }
+
+
+    function setContent(content) {
+        editor.setValue(content);
+    }
+    if('content' in params) {
+        setContent(params.content);
+    }
+
+
+    function getSyntaxError(silent) {
+        if(mistake_marker) {
+            editor.getSession().removeMarker(mistake_marker);
+            mistake_marker = false;
+        }                
+        var content = getContent();
+        try {	
+            res = jsonlint.parse(content);        
+        } catch(e) {
+            if(!silent) {
+                var row = e.metadata.line;
+                editor.getSelection().setRange(new Range(0, 0, 0, 0)); // important string :)
+                var range = new Range(row, 0, row, 1);                
+                mistake_marker = editor.getSession().addMarker(range, 'mistake', 'fullLine');                            
+            }
+            return e.metadata;
+        }
+
+        return false;
+
+/*
+        if(mistake_marker) {
+            editor.getSession().removeMarker(mistake_marker);
+            mistake_marker = false;
+        }        
+        var annotations = editor.getSession().getAnnotations();
+        if(!annotations.length) {
+            return true;
+        }
+        var a = annotations[0];
+        if(!silent) {
+            editor.getSelection().setRange(new Range(0, 0, 0, 0)); // important string :)
+            var range = new Range(a.row, a.column, a.row, a.column + 1);                
+            mistake_marker = editor.getSession().addMarker(range, 'mistake', 'fullLine');            
+        }
+        return {
+            msg: a.text
+        }
+        */
+    }
+
+
+    // interface
+    return {
+        setContent: setContent,
+        getContent: getContent,
+        getSyntaxError: getSyntaxError,
+        destroy: function() {
+            clearTimeout(on_change_timeout);
+            editor.destroy();
+            editor = null;
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/pemFioi/components/json-text-editor/jsonlint.js b/pemFioi/components/json-text-editor/jsonlint.js
new file mode 100644
index 000000000..a13a5bf09
--- /dev/null
+++ b/pemFioi/components/json-text-editor/jsonlint.js
@@ -0,0 +1,635 @@
+/*
+  lib modified, ParserException added
+*/
+var jsonlint = (function () {
+
+    function ParserException(message, metadata) {
+        var error = new Error(message);
+        error.metadata = metadata;
+        return error;
+    }
+
+    var a = !0,
+      b = !1,
+      c = {},
+      d = (function () {
+        var a = {
+            trace: function () {},
+            yy: {},
+            symbols_: {
+              error: 2,
+              JSONString: 3,
+              STRING: 4,
+              JSONNumber: 5,
+              NUMBER: 6,
+              JSONNullLiteral: 7,
+              NULL: 8,
+              JSONBooleanLiteral: 9,
+              TRUE: 10,
+              FALSE: 11,
+              JSONText: 12,
+              JSONValue: 13,
+              EOF: 14,
+              JSONObject: 15,
+              JSONArray: 16,
+              "{": 17,
+              "}": 18,
+              JSONMemberList: 19,
+              JSONMember: 20,
+              ":": 21,
+              ",": 22,
+              "[": 23,
+              "]": 24,
+              JSONElementList: 25,
+              $accept: 0,
+              $end: 1,
+            },
+            terminals_: {
+              2: "error",
+              4: "STRING",
+              6: "NUMBER",
+              8: "NULL",
+              10: "TRUE",
+              11: "FALSE",
+              14: "EOF",
+              17: "{",
+              18: "}",
+              21: ":",
+              22: ",",
+              23: "[",
+              24: "]",
+            },
+            productions_: [
+              0,
+              [3, 1],
+              [5, 1],
+              [7, 1],
+              [9, 1],
+              [9, 1],
+              [12, 2],
+              [13, 1],
+              [13, 1],
+              [13, 1],
+              [13, 1],
+              [13, 1],
+              [13, 1],
+              [15, 2],
+              [15, 3],
+              [20, 3],
+              [19, 1],
+              [19, 3],
+              [16, 2],
+              [16, 3],
+              [25, 1],
+              [25, 3],
+            ],
+            performAction: function (b, c, d, e, f, g, h) {
+              var i = g.length - 1;
+              switch (f) {
+                case 1:
+                  this.$ = b
+                    .replace(/\\(\\|")/g, "$1")
+                    .replace(/\\n/g, "\n")
+                    .replace(/\\r/g, "\r")
+                    .replace(/\\t/g, "	")
+                    .replace(/\\v/g, "")
+                    .replace(/\\f/g, "\f")
+                    .replace(/\\b/g, "\b");
+                  break;
+                case 2:
+                  this.$ = Number(b);
+                  break;
+                case 3:
+                  this.$ = null;
+                  break;
+                case 4:
+                  this.$ = !0;
+                  break;
+                case 5:
+                  this.$ = !1;
+                  break;
+                case 6:
+                  return (this.$ = g[i - 1]);
+                case 13:
+                  this.$ = {};
+                  break;
+                case 14:
+                  this.$ = g[i - 1];
+                  break;
+                case 15:
+                  this.$ = [g[i - 2], g[i]];
+                  break;
+                case 16:
+                  (this.$ = {}), (this.$[g[i][0]] = g[i][1]);
+                  break;
+                case 17:
+                  (this.$ = g[i - 2]), (g[i - 2][g[i][0]] = g[i][1]);
+                  break;
+                case 18:
+                  this.$ = [];
+                  break;
+                case 19:
+                  this.$ = g[i - 1];
+                  break;
+                case 20:
+                  this.$ = [g[i]];
+                  break;
+                case 21:
+                  (this.$ = g[i - 2]), g[i - 2].push(g[i]);
+              }
+            },
+            table: [
+              {
+                3: 5,
+                4: [1, 12],
+                5: 6,
+                6: [1, 13],
+                7: 3,
+                8: [1, 9],
+                9: 4,
+                10: [1, 10],
+                11: [1, 11],
+                12: 1,
+                13: 2,
+                15: 7,
+                16: 8,
+                17: [1, 14],
+                23: [1, 15],
+              },
+              { 1: [3] },
+              { 14: [1, 16] },
+              { 14: [2, 7], 18: [2, 7], 22: [2, 7], 24: [2, 7] },
+              { 14: [2, 8], 18: [2, 8], 22: [2, 8], 24: [2, 8] },
+              { 14: [2, 9], 18: [2, 9], 22: [2, 9], 24: [2, 9] },
+              { 14: [2, 10], 18: [2, 10], 22: [2, 10], 24: [2, 10] },
+              { 14: [2, 11], 18: [2, 11], 22: [2, 11], 24: [2, 11] },
+              { 14: [2, 12], 18: [2, 12], 22: [2, 12], 24: [2, 12] },
+              { 14: [2, 3], 18: [2, 3], 22: [2, 3], 24: [2, 3] },
+              { 14: [2, 4], 18: [2, 4], 22: [2, 4], 24: [2, 4] },
+              { 14: [2, 5], 18: [2, 5], 22: [2, 5], 24: [2, 5] },
+              { 14: [2, 1], 18: [2, 1], 21: [2, 1], 22: [2, 1], 24: [2, 1] },
+              { 14: [2, 2], 18: [2, 2], 22: [2, 2], 24: [2, 2] },
+              { 3: 20, 4: [1, 12], 18: [1, 17], 19: 18, 20: 19 },
+              {
+                3: 5,
+                4: [1, 12],
+                5: 6,
+                6: [1, 13],
+                7: 3,
+                8: [1, 9],
+                9: 4,
+                10: [1, 10],
+                11: [1, 11],
+                13: 23,
+                15: 7,
+                16: 8,
+                17: [1, 14],
+                23: [1, 15],
+                24: [1, 21],
+                25: 22,
+              },
+              { 1: [2, 6] },
+              { 14: [2, 13], 18: [2, 13], 22: [2, 13], 24: [2, 13] },
+              { 18: [1, 24], 22: [1, 25] },
+              { 18: [2, 16], 22: [2, 16] },
+              { 21: [1, 26] },
+              { 14: [2, 18], 18: [2, 18], 22: [2, 18], 24: [2, 18] },
+              { 22: [1, 28], 24: [1, 27] },
+              { 22: [2, 20], 24: [2, 20] },
+              { 14: [2, 14], 18: [2, 14], 22: [2, 14], 24: [2, 14] },
+              { 3: 20, 4: [1, 12], 20: 29 },
+              {
+                3: 5,
+                4: [1, 12],
+                5: 6,
+                6: [1, 13],
+                7: 3,
+                8: [1, 9],
+                9: 4,
+                10: [1, 10],
+                11: [1, 11],
+                13: 30,
+                15: 7,
+                16: 8,
+                17: [1, 14],
+                23: [1, 15],
+              },
+              { 14: [2, 19], 18: [2, 19], 22: [2, 19], 24: [2, 19] },
+              {
+                3: 5,
+                4: [1, 12],
+                5: 6,
+                6: [1, 13],
+                7: 3,
+                8: [1, 9],
+                9: 4,
+                10: [1, 10],
+                11: [1, 11],
+                13: 31,
+                15: 7,
+                16: 8,
+                17: [1, 14],
+                23: [1, 15],
+              },
+              { 18: [2, 17], 22: [2, 17] },
+              { 18: [2, 15], 22: [2, 15] },
+              { 22: [2, 21], 24: [2, 21] },
+            ],
+            defaultActions: { 16: [2, 6] },
+            parseError: function (b, c) {
+                throw ParserException(b, c);
+              //throw new Error(b);
+            },
+            parse: function (b) {
+              function o(a) {
+                (d.length = d.length - 2 * a),
+                  (e.length = e.length - a),
+                  (f.length = f.length - a);
+              }
+              function p() {
+                var a;
+                return (
+                  (a = c.lexer.lex() || 1),
+                  typeof a != "number" && (a = c.symbols_[a] || a),
+                  a
+                );
+              }
+              var c = this,
+                d = [0],
+                e = [null],
+                f = [],
+                g = this.table,
+                h = "",
+                i = 0,
+                j = 0,
+                k = 0,
+                l = 2,
+                m = 1;
+              this.lexer.setInput(b),
+                (this.lexer.yy = this.yy),
+                (this.yy.lexer = this.lexer),
+                typeof this.lexer.yylloc == "undefined" &&
+                  (this.lexer.yylloc = {});
+              var n = this.lexer.yylloc;
+              f.push(n),
+                typeof this.yy.parseError == "function" &&
+                  (this.parseError = this.yy.parseError);
+              var q,
+                r,
+                s,
+                t,
+                u,
+                v,
+                w = {},
+                x,
+                y,
+                z,
+                A;
+              for (;;) {
+                (s = d[d.length - 1]),
+                  this.defaultActions[s]
+                    ? (t = this.defaultActions[s])
+                    : (q == null && (q = p()), (t = g[s] && g[s][q]));
+                if (typeof t == "undefined" || !t.length || !t[0]) {
+                  if (!k) {
+                    A = [];
+                    for (x in g[s])
+                      this.terminals_[x] &&
+                        x > 2 &&
+                        A.push("'" + this.terminals_[x] + "'");
+                    var B = "";
+                    this.lexer.showPosition
+                      ? (B =
+                          "Erreur de syntaxe ligne " +
+                          (i + 1) +
+                          ":\n" +
+                          this.lexer.showPosition() +
+                          "\nContenu attendu " +
+                          A.join(", ") +
+                          ", lu à la place : '" +
+                          this.terminals_[q] +
+                          "'")
+                      : (B =
+                          "Erreur de syntaxe ligne " +
+                          (i + 1) +
+                          " ; Contenu non attendu : " +
+                          (q == 1
+                            ? "fin de l'entrée"
+                            : "'" + (this.terminals_[q] || q) + "'")),
+                      this.parseError(B, {
+                        text: this.lexer.match,
+                        token: this.terminals_[q] || q,
+                        line: this.lexer.yylineno,
+                        loc: n,
+                        expected: A,
+                      });
+                  }
+                  if (k == 3) {
+                    if (q == m) throw new Error(B || "Analyse stoppée.");
+                    (j = this.lexer.yyleng),
+                      (h = this.lexer.yytext),
+                      (i = this.lexer.yylineno),
+                      (n = this.lexer.yylloc),
+                      (q = p());
+                  }
+                  for (;;) {
+                    if (l.toString() in g[s]) break;
+                    if (s == 0) throw new Error(B || "Analyse stoppée.");
+                    o(1), (s = d[d.length - 1]);
+                  }
+                  (r = q),
+                    (q = l),
+                    (s = d[d.length - 1]),
+                    (t = g[s] && g[s][l]),
+                    (k = 3);
+                }
+                if (t[0] instanceof Array && t.length > 1)
+                  throw new Error(
+                    "Erreur de syntaxe: plusieurs actions possible dans l'état : " +
+                      s +
+                      ", élément : " +
+                      q
+                  );
+                switch (t[0]) {
+                  case 1:
+                    d.push(q),
+                      e.push(this.lexer.yytext),
+                      f.push(this.lexer.yylloc),
+                      d.push(t[1]),
+                      (q = null),
+                      r
+                        ? ((q = r), (r = null))
+                        : ((j = this.lexer.yyleng),
+                          (h = this.lexer.yytext),
+                          (i = this.lexer.yylineno),
+                          (n = this.lexer.yylloc),
+                          k > 0 && k--);
+                    break;
+                  case 2:
+                    (y = this.productions_[t[1]][1]),
+                      (w.$ = e[e.length - y]),
+                      (w._$ = {
+                        first_line: f[f.length - (y || 1)].first_line,
+                        last_line: f[f.length - 1].last_line,
+                        first_column: f[f.length - (y || 1)].first_column,
+                        last_column: f[f.length - 1].last_column,
+                      }),
+                      (v = this.performAction.call(
+                        w,
+                        h,
+                        j,
+                        i,
+                        this.yy,
+                        t[1],
+                        e,
+                        f
+                      ));
+                    if (typeof v != "undefined") return v;
+                    y &&
+                      ((d = d.slice(0, -1 * y * 2)),
+                      (e = e.slice(0, -1 * y)),
+                      (f = f.slice(0, -1 * y))),
+                      d.push(this.productions_[t[1]][0]),
+                      e.push(w.$),
+                      f.push(w._$),
+                      (z = g[d[d.length - 2]][d[d.length - 1]]),
+                      d.push(z);
+                    break;
+                  case 3:
+                    return !0;
+                }
+              }
+              return !0;
+            },
+          },
+          b = (function () {
+            var a = {
+              EOF: 1,
+              parseError: function (b, c) {
+                if (!this.yy.parseError) throw new Error(b);
+                this.yy.parseError(b, c);
+              },
+              setInput: function (a) {
+                return (
+                  (this._input = a),
+                  (this._more = this._less = this.done = !1),
+                  (this.yylineno = this.yyleng = 0),
+                  (this.yytext = this.matched = this.match = ""),
+                  (this.conditionStack = ["INITIAL"]),
+                  (this.yylloc = {
+                    first_line: 1,
+                    first_column: 0,
+                    last_line: 1,
+                    last_column: 0,
+                  }),
+                  this
+                );
+              },
+              input: function () {
+                var a = this._input[0];
+                (this.yytext += a),
+                  this.yyleng++,
+                  (this.match += a),
+                  (this.matched += a);
+                var b = a.match(/\n/);
+                return (
+                  b && this.yylineno++, (this._input = this._input.slice(1)), a
+                );
+              },
+              unput: function (a) {
+                return (this._input = a + this._input), this;
+              },
+              more: function () {
+                return (this._more = !0), this;
+              },
+              less: function (a) {
+                this._input = this.match.slice(a) + this._input;
+              },
+              pastInput: function () {
+                var a = this.matched.substr(
+                  0,
+                  this.matched.length - this.match.length
+                );
+                return (
+                  (a.length > 20 ? "..." : "") + a.substr(-20).replace(/\n/g, "")
+                );
+              },
+              upcomingInput: function () {
+                var a = this.match;
+                return (
+                  a.length < 20 && (a += this._input.substr(0, 20 - a.length)),
+                  (a.substr(0, 20) + (a.length > 20 ? "..." : "")).replace(
+                    /\n/g,
+                    ""
+                  )
+                );
+              },
+              showPosition: function () {
+                var a = this.pastInput(),
+                  b = new Array(a.length + 1).join("-");
+                return a + this.upcomingInput() + "\n" + b + "^";
+              },
+              next: function () {
+                if (this.done) return this.EOF;
+                this._input || (this.done = !0);
+                var a, b, c, d, e, f;
+                this._more || ((this.yytext = ""), (this.match = ""));
+                var g = this._currentRules();
+                for (var h = 0; h < g.length; h++) {
+                  c = this._input.match(this.rules[g[h]]);
+                  if (c && (!b || c[0].length > b[0].length)) {
+                    (b = c), (d = h);
+                    if (!this.options.flex) break;
+                  }
+                }
+                if (b) {
+                  (f = b[0].match(/\n.*/g)),
+                    f && (this.yylineno += f.length),
+                    (this.yylloc = {
+                      first_line: this.yylloc.last_line,
+                      last_line: this.yylineno + 1,
+                      first_column: this.yylloc.last_column,
+                      last_column: f
+                        ? f[f.length - 1].length - 1
+                        : this.yylloc.last_column + b[0].length,
+                    }),
+                    (this.yytext += b[0]),
+                    (this.match += b[0]),
+                    (this.yyleng = this.yytext.length),
+                    (this._more = !1),
+                    (this._input = this._input.slice(b[0].length)),
+                    (this.matched += b[0]),
+                    (a = this.performAction.call(
+                      this,
+                      this.yy,
+                      this,
+                      g[d],
+                      this.conditionStack[this.conditionStack.length - 1]
+                    )),
+                    this.done && this._input && (this.done = !1);
+                  if (a) return a;
+                  return;
+                }
+                if (this._input === "") return this.EOF;
+                this.parseError(
+                  "Erreur lexicale ligne " +
+                    (this.yylineno + 1) +
+                    ". Texte non reconnu.\n" +
+                    this.showPosition(),
+                  { text: "", token: null, line: this.yylineno }
+                );
+              },
+              lex: function () {
+                var b = this.next();
+                return typeof b != "undefined" ? b : this.lex();
+              },
+              begin: function (b) {
+                this.conditionStack.push(b);
+              },
+              popState: function () {
+                return this.conditionStack.pop();
+              },
+              _currentRules: function () {
+                return this.conditions[
+                  this.conditionStack[this.conditionStack.length - 1]
+                ].rules;
+              },
+              topState: function () {
+                return this.conditionStack[this.conditionStack.length - 2];
+              },
+              pushState: function (b) {
+                this.begin(b);
+              },
+            };
+            return (
+              (a.options = {}),
+              (a.performAction = function (b, c, d, e) {
+                var f = e;
+                switch (d) {
+                  case 0:
+                    break;
+                  case 1:
+                    return 6;
+                  case 2:
+                    return (c.yytext = c.yytext.substr(1, c.yyleng - 2)), 4;
+                  case 3:
+                    return 17;
+                  case 4:
+                    return 18;
+                  case 5:
+                    return 23;
+                  case 6:
+                    return 24;
+                  case 7:
+                    return 22;
+                  case 8:
+                    return 21;
+                  case 9:
+                    return 10;
+                  case 10:
+                    return 11;
+                  case 11:
+                    return 8;
+                  case 12:
+                    return 14;
+                  case 13:
+                    return "INVALID";
+                }
+              }),
+              (a.rules = [
+                /^(?:\s+)/,
+                /^(?:(-?([0-9]|[1-9][0-9]+))(\.[0-9]+)?([eE][-+]?[0-9]+)?\b)/,
+                /^(?:"(?:\\[\\"bfnrt/]|\\u[a-fA-F0-9]{4}|[^\\\0-\x09\x0a-\x1f"])*")/,
+                /^(?:\{)/,
+                /^(?:\})/,
+                /^(?:\[)/,
+                /^(?:\])/,
+                /^(?:,)/,
+                /^(?::)/,
+                /^(?:true\b)/,
+                /^(?:false\b)/,
+                /^(?:null\b)/,
+                /^(?:$)/,
+                /^(?:.)/,
+              ]),
+              (a.conditions = {
+                INITIAL: {
+                  rules: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
+                  inclusive: !0,
+                },
+              }),
+              a
+            );
+          })();
+        return (a.lexer = b), a;
+      })();
+    return (
+      typeof a != "undefined" &&
+        typeof c != "undefined" &&
+        ((c.parser = d),
+        (c.parse = function () {
+          return d.parse.apply(d, arguments);
+        }),
+        (c.main = function (d) {
+          if (!d[1]) throw new Error("Utilisation : " + d[0] + " FILE");
+          if (typeof process != "undefined")
+            var e = a("fs").readFileSync(
+              a("path").join(process.cwd(), d[1]),
+              "utf8"
+            );
+          else
+            var f = a("file").path(a("file").cwd()),
+              e = f.join(d[1]).read({ charset: "utf-8" });
+          return c.parser.parse(e);
+        }),
+        typeof b != "undefined" &&
+          a.main === b &&
+          c.main(
+            typeof process != "undefined"
+              ? process.argv.slice(1)
+              : a("system").args
+          )),
+      c
+    );
+  })();
+  
\ No newline at end of file
diff --git a/pemFioi/components/json-text-editor/test.html b/pemFioi/components/json-text-editor/test.html
new file mode 100644
index 000000000..37690687c
--- /dev/null
+++ b/pemFioi/components/json-text-editor/test.html
@@ -0,0 +1,97 @@
+
+
+    
+        
+        
+        
+        JSON text editor test
+        
+        
+        
+        
+                
+    
+    
+        

+            

+        

+        

+                                    
+        

+        
+    
+
diff --git a/pemFioi/components/map2d/editor.html b/pemFioi/components/map2d/editor.html
new file mode 100644
index 000000000..fb845f067
--- /dev/null
+++ b/pemFioi/components/map2d/editor.html
@@ -0,0 +1,155 @@
+
+
+    
+        
+        map2d
+        
+        
+        
+        
+    
+    
+        

+        
+
+        
+    
+
\ No newline at end of file
diff --git a/pemFioi/components/map2d/map.jpg b/pemFioi/components/map2d/map.jpg
new file mode 100644
index 000000000..5e87152e7
Binary files /dev/null and b/pemFioi/components/map2d/map.jpg differ
diff --git a/pemFioi/components/map2d/map2d.js b/pemFioi/components/map2d/map2d.js
new file mode 100644
index 000000000..97cbd0bf5
--- /dev/null
+++ b/pemFioi/components/map2d/map2d.js
@@ -0,0 +1,1493 @@
+function Map2D(params) {
+
+    var defaults = {
+        width: false,
+        height: false,
+        zoom: 0,
+        max_zoom: 1,
+        min_zoom: -2,
+        simple_mode: false,
+        styles: {
+            point_radius: 6,
+            line_width: 3,
+            line_color: '#000000',
+            pin_color: '#FFFFFF',
+            area_color: '#FFFFFF66',
+            selection_color: '#CC3333',
+            text_color: '#FFFFFF',
+            text_outline: '#000000',
+            font: {
+                size: 14,
+                face: 'sans'
+            },
+            mistake: {
+                color: '#FF0000',
+                size: 30
+            },
+            marker: {
+                color: '#3366FF',
+                radius: 15,
+                line_width: 5
+            }
+        },
+        strings: {
+            point: 'Point',
+            line: 'Ligne',
+            area: 'Zone',
+            delete: 'Supprimer',
+            undo: 'Annuler',
+            redo: 'Refaire',
+            tag: 'Type',
+            name: 'Nom',
+            save: 'Enregistrer',
+            cancel: 'Annuler'
+        },
+        tags: ['']
+    }
+    params = Object.assign({}, defaults, params);
+    
+    if(params.figures && params.simple_mode) {
+        params.figures = Object.assign({}, params.figures);
+        params.figures = converter.expand(params.figures);
+        params.tags = [''];
+    }
+
+    // system
+    function createElement(tag, className, content) {
+        var el = document.createElement(tag);
+        if(typeof className === 'string') {
+            el.className = className;
+        }
+        if(typeof content === 'string') {
+            el.innerHTML = content;
+        } else if(Array.isArray(content)) {
+            for(var i=0; i 0,
+                    redo: pointer !== null && pointer < states.length - 1
+                }
+            }
+        }
+    }
+
+
+
+    // Drawing editor layer
+    function Editor(image) {
+
+        var canvas = createElement('canvas', 'editor');
+        wrapper.appendChild(canvas);
+        var context2d = canvas.getContext('2d');
+        var bounds;
+        
+        var state;
+        var data;
+
+
+        function resetState(figures) {
+            state = State({
+                pointer: null,
+                type: null,
+                figures: figures || params.figures || []
+            });
+            data = state.get();
+            params.onEdit && params.onEdit(data.figures);
+        }
+        resetState();
+
+
+        function saveState() {
+            state.push(data);
+            refreshToolbar();
+            params.onEdit && params.onEdit(data.figures);
+        }
+
+
+        function drawPoint(point) {
+            context2d.beginPath();
+            if(selection.data && isSamePoint(point, selection.data.point)) {
+                context2d.fillStyle = params.styles.selection_color;            
+            } else {
+                context2d.fillStyle = params.styles.pin_color;            
+            }
+            context2d.arc(point.x, point.y, params.styles.point_radius / bounds.scale, 0, 2 * Math.PI);
+            context2d.stroke();
+            context2d.fill();  
+        }
+
+
+        function drawFigureName(figure) {
+            var text_height = params.styles.font.size / bounds.scale;
+            var dx, dy;
+            if(figure.type == 'point' || figure.points.length < 2) {
+                dx = 0;
+                dy = text_height;
+                context2d.textAlign = 'center';
+                context2d.textBaseline = 'top';
+            } else {
+                if(figure.points[1].y > figure.points[0].y) {
+                    context2d.textBaseline = 'bottom';
+                    dy = -params.styles.line_width / bounds.scale;
+                } else {
+                    dy = params.styles.line_width / bounds.scale;
+                    context2d.textBaseline = 'top';
+                }
+                if(figure.points[1].x > figure.points[0].x) {
+                    context2d.textAlign = 'right';
+                    dx = -text_height;
+                } else {
+                    context2d.textAlign = 'left';
+                    dx = text_height;                    
+                }
+            }
+            context2d.strokeStyle = params.styles.text_outline;
+            context2d.strokeText(figure.name, figure.points[0].x + dx, figure.points[0].y + dy);
+            context2d.fillStyle = params.styles.text_color;
+            context2d.fillText(figure.name, figure.points[0].x + dx, figure.points[0].y + dy);            
+        }
+
+
+        var shapes = {
+
+            point: function(points) {
+                drawPoint(points[0]);
+            },
+
+            line: function(points) {
+                context2d.beginPath();
+                context2d.moveTo(points[0].x, points[0].y);
+                for(var i=1; i image.width || point.y < 0 || point.y > image.height) {
+                return;
+            }
+
+            var figure = findFigure(point);
+            if(figure) {
+                if(data.pointer) {
+                    var points = data.figures[data.pointer].points;
+                    if(isSamePoint(point, points[points.length - 1])) {
+                        closeFigure();
+                    }
+                }                
+                selection.set(figure);
+            } else {
+                if(data.type === null) {
+                    return;
+                }
+                if(data.pointer === null) {
+                    openFigure(point);
+                } else {
+                    modifyFigure(point);
+                }
+            }
+            draw();
+        }        
+
+
+        var drag;
+
+        function startDrag(point) {
+            if(params.simple_mode) {
+                return false;
+            }                        
+            mistake.set(false);
+            point = normalizePoint(point);
+            drag = {
+                figure: findFigure(point),
+                mouse: point
+            }
+            return !!drag.figure;
+        }
+
+        function handleDrag(point) {
+            selection.set(false);
+            point = normalizePoint(point);
+            data.figures[drag.figure.figure_idx].points[drag.figure.point_idx] = {
+                x: drag.figure.point.x - drag.mouse.x + point.x,
+                y: drag.figure.point.y - drag.mouse.y + point.y
+            }
+            draw();
+        }
+
+
+        function stopDrag() {
+            drag = false;
+            saveState();
+        }
+
+
+        var mistake = {
+            
+            data: null, // { point: ..., type: 'extra' || 'miss' }
+            silent: false,
+
+            set: function(data, silent) {
+                this.data = data;
+                this.silent = silent;
+                draw();
+            },
+
+            get: function() {
+                return this.data;
+            },
+
+            draw: function() {
+                if(!this.data || this.silent) {
+                    return;
+                }
+                context2d.strokeStyle = params.styles.mistake.color;
+                context2d.lineWidth = params.styles.line_width / bounds.scale;                
+                var s = 0.5 * params.styles.mistake.size / bounds.scale;                
+                context2d.beginPath();                
+                if(this.data.type == 'extra') {
+                    context2d.arc(this.data.point.x, this.data.point.y, s, 0, 2 * Math.PI);
+                } else if(this.data.type == 'miss') {
+                    context2d.rect(this.data.point.x - s, this.data.point.y - s, 2 * s, 2 * s);
+                }
+                context2d.closePath();
+                context2d.stroke();                
+            }
+        }
+
+
+        var markers = {
+
+            data: [],
+
+            renderMarker: function(data) {
+                context2d.strokeStyle = data.color || params.styles.marker.color;
+                context2d.lineWidth = (data.line_width || params.styles.marker.line_width) / bounds.scale;                
+                context2d.beginPath();                
+                context2d.arc(
+                    data.x, 
+                    data.y, 
+                    (data.radius || params.styles.marker.radius) / bounds.scale, 
+                    0, 
+                    2 * Math.PI
+                );
+                context2d.closePath();
+                context2d.stroke();                
+            },
+
+            draw: function() {
+                for(var i=0; i' + params.tags[i] + '';
+            }            
+            controls = {
+                name: createElement('input'),
+                tag: createElement('select', '', tag_options),
+                save: createElement('button', '', params.strings.save),
+                cancel:  createElement('button', '', params.strings.cancel),
+            }
+            controls.name.type = 'input';
+            
+            addEventListener(controls.save, 'click', save);
+            addEventListener(controls.cancel, 'click', function() {
+                hide();
+                editor.clearSelection();
+            });
+
+            holder = createElement('div', 'panel', [
+                createElement('label', false, params.strings.name),
+                controls.name,
+                createElement('label', false, params.strings.tag),
+                controls.tag,
+                controls.save,
+                controls.cancel
+            ]);
+            params.parent.appendChild(holder);
+        }
+
+
+        function hide() {
+            if(holder) {
+                holder.style.display = 'none';
+            }
+        }
+
+
+        function save() {
+            hide();
+            var attrs = {
+                name: controls.name.value,
+                tag: controls.tag.value,
+            }            
+            editor.updateFigure(figure_idx, attrs);
+            editor.clearSelection();
+        }
+
+
+        var figure_idx;
+
+        return {
+            open: function(selection) {
+                render();
+                controls.name.value = typeof selection.figure.name == 'string' ? selection.figure.name : '';
+                controls.tag.value = typeof selection.figure.tag == 'string' ? selection.figure.tag : '';
+                holder.style.display = '';
+                figure_idx = selection.figure_idx;
+            },
+
+            close: function() {
+                hide();
+            },
+
+            destroy: function() {
+                holder.parent.removeChild(holder);
+            }
+        }
+    }
+
+
+
+
+    function MouseEventsHandler() {
+
+        var mouse_moved = false;
+
+        function getRelativePoint(e) {
+            var rect = wrapper.getBoundingClientRect();            
+            return {
+                x: e.clientX - rect.x,
+                y: e.clientY - rect.y
+            }            
+        }
+
+        var drag_handler;
+
+        addEventListener(wrapper, 'mousedown', function(e) {
+            e.stopPropagation();
+            e.preventDefault();
+
+            var point = getRelativePoint(e);
+            if(editor.startDrag(point)) {
+                drag_handler = editor;
+            } else if(viewport.startDrag(point)) {
+                drag_handler = viewport;
+            }
+            mouse_moved = false;
+        });
+
+        addEventListener(wrapper, 'mousemove', function(e) {
+            mouse_moved = true;
+            if(drag_handler) {
+                var point = getRelativePoint(e);            
+                drag_handler.handleDrag(point);
+            }
+        });
+
+
+        addEventListener(wrapper, 'mouseup', function(e) {
+            if(mouse_moved && drag_handler) {
+                drag_handler.stopDrag();
+            }
+            drag_handler = false;
+        });
+
+        addEventListener(wrapper, 'mouseleave', function(e) {
+            if(mouse_moved && drag_handler) {
+                drag_handler.stopDrag();
+            }
+            drag_handler = false;
+        });        
+
+        addEventListener(wrapper, 'click', function(e) {
+            if(!mouse_moved) {
+                editor.handleClick(getRelativePoint(e));
+            }
+        });        
+    }
+
+
+    // comparator
+    function diff(image, target, silent) {
+        var editor_figures = editor.getFigures();
+        var canvas = createElement('canvas', 'editor');
+        canvas.width = image.width;
+        canvas.height = image.height;
+        var context2d = canvas.getContext('2d');
+        var color = '#FF0000';
+
+        function drawPoint(point, size) {
+            context2d.beginPath();                
+            context2d.arc(point.x, point.y, size, 0, 2 * Math.PI);
+            context2d.closePath();
+            context2d.fill();                            
+        }
+
+
+        var shapes = {
+
+            point: function(points, size) {
+                drawPoint(points[0], size);
+            },
+
+            line: function(points, size) {
+                context2d.beginPath();                
+                context2d.moveTo(points[0].x, points[0].y);
+                for(var i=1; i= editor_drawing.length) {
+                        continue;
+                    }
+                    if(editor_drawing[l] == target_drawing[j]) {
+                        fl = true;
+                        break bias_loops;
+                    }
+                }
+                if(!fl) {
+                    setPixelMistake(j, 'miss', layer);
+                    return false;
+                }
+            }
+            return true;
+        }
+
+
+
+        var layers = collectLayers(target.figures);
+        
+        // check extra names or tags
+        for(var i=0; i' + msg + '').insertAfter($('.taskContent'));
+            $('#validate-btn').remove();
+            callback(score, msg, null);
+        };
+
+        task.reloadAnswerObject = function(answerObj) {
+            return window.map2d.setAnswer(answerObj);
+        }
+
+        task.getAnswerObject = function() {
+            return window.map2d.getAnswer();
+        }
+
+        task.getDefaultAnswerObject = function() {
+            return [];
+        }
+
+        var btn = $('');
+        btn.on('click', function() {
+            platform.validate('done');
+        });
+        btn.insertAfter($('.taskContent'));
+
+        setTimeout(function() {
+//            platform.validate('done');
+        }, 100)
+
+        success();
+    }
+
+
+    task.load = function(views, success) {
+        platform.getTaskParams(null, null, function(taskParams) {
+            var params = Object.assign(map2d_options, {
+                parent: $('.taskContent')[0],
+                strings: lang.getStrings(),
+                onLoad: function() {
+                    setupTask(taskParams, success)
+                }
+            })
+            window.map2d = Map2D(params);
+        });
+    };
+
+
+    $(function() {
+        if(window.platform) {
+            platform.initWithTask(task);
+        }
+    })
+
+})();
\ No newline at end of file
diff --git a/pemFioi/conceptDisplay-1.0.js b/pemFioi/conceptDisplay-1.0.js
index 637dd5801..581a0de9c 100644
--- a/pemFioi/conceptDisplay-1.0.js
+++ b/pemFioi/conceptDisplay-1.0.js
@@ -18,12 +18,16 @@ function conceptDisplay() {
   $('body > div').hide();
   targetDiv.show();
   if(lang) {
-    var langDivs = targetDiv.find('[data-lang='+lang+']');
+    var allLangDivs = targetDiv.find('[data-lang]');
+    var langDivs = allLangDivs.filter(function(i, e) {
+      var langs = e.getAttribute('data-lang').split(' ');
+      return langs.indexOf(lang) != -1;
+      });
     if(langDivs.length) {
-      targetDiv.find('[data-lang]').hide();
+      allLangDivs.hide();
       langDivs.show();
     } else {
-      targetDiv.find('[data-lang]').show();
+      allLangDivs.show();
     }
   }
 }
diff --git a/pemFioi/conceptViewer-1.0-mobileFirst.css b/pemFioi/conceptViewer-1.0-mobileFirst.css
new file mode 100644
index 000000000..f6ea25def
--- /dev/null
+++ b/pemFioi/conceptViewer-1.0-mobileFirst.css
@@ -0,0 +1,228 @@
+#conceptViewer {
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background: rgba(241, 242, 247, .9);
+}
+#conceptViewer .content {
+    position: absolute;
+    top: calc(51% - (90vh / 2));
+    left: calc(50% - (90vw / 2));
+    width: 90vw;
+    height: 90vh;
+    background-color: #fff;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+}
+#conceptViewer .panel-heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+#conceptViewer .section-external-exit {
+    display: inline-flex;
+}
+#conceptViewer .exit {
+    cursor: pointer;
+    margin: 0 3px 0 16px;
+}
+#conceptViewer .exit .icon {
+    font-size: 18px;
+    color: #4a90e2;
+}
+#conceptViewer .panel-body {
+    display: flex;
+    justify-content: stretch;
+    height: 100%;
+    min-height: 0;
+}
+@media screen and (min-width: 481px){
+    #conceptViewer .navigationContent {
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: 100%;
+    }
+}
+#conceptViewer .navigation {
+    border-right: 1px solid rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+#conceptViewer .navigationLanguage {
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    padding: 10px;
+}
+#conceptViewer .navigationLanguage {
+    position: relative;
+}
+#conceptViewer .showNavigationLanguage {
+    display: block;
+    background-color: #4a90e2;
+    color: #fff;
+    line-height: 20px;
+    padding: 5px 20px;
+    border-radius: 50px;
+    position: relative;
+    margin-left: 50px;
+}
+#conceptViewer .showNavigationLanguage::before {
+    content: "\f121";
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    font-size: 20px;
+    margin: 0 15px;
+    color: #4a90e2;
+    position: absolute;
+    left: -55px;
+}
+@media screen and (orientation: landscape) and (max-width: 768px) {
+    #conceptViewer .showNavigationLanguage {
+        margin-left: 0;
+    }
+    #conceptViewer .showNavigationLanguage::before {
+        content: normal;
+    }
+}
+#conceptViewer .showNavigationLanguage::after {
+    content: "\f107";
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    position: absolute;
+    right: 10px;
+}
+#conceptViewer .navigationLanguage ul {
+    position: absolute;
+    width: calc(100% - 4px);
+    list-style-type: none;
+    background-color: #fff;
+    margin: 0;
+    padding: 0;
+    left: 2px;
+    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity linear 150ms 25ms;
+    z-index: 1;
+}
+#conceptViewer #showNavigationLanguage:checked + ul {
+    visibility: visible;
+    opacity: 1;
+}
+#conceptViewer .navigationLanguage ul li {
+    line-height: 2em;
+    padding: 0 20px;
+    display: block;
+    cursor: pointer;
+}
+#conceptViewer .navigationLanguage ul li.selected {
+    background-color: #4a90e2;
+    color: #fff;
+}
+#conceptViewer .navigationContent ul {
+    list-style-type: none;
+    margin: 1em 0 0;
+    padding: 0;
+}
+#conceptViewer .navigationContent ul li {
+    line-height: 3em;
+    padding: 0 20px;
+    cursor: pointer;
+}
+#conceptViewer .navigationContent ul li.selected {
+    background-color: #4a90e2;
+    color: #fff;
+}
+#conceptViewer #showNavigationLanguage,
+#conceptViewer .showNavigationContent,
+#conceptViewer #showNavigationContent {
+    display: none;
+}
+@media screen and (max-width: 480px) and (orientation: portrait) {
+    #conceptViewer .panel-body {
+        flex-direction: column;
+    }
+    #conceptViewer .navigation {
+        border: none;
+    }
+    #conceptViewer .navigationContent {
+        border-bottom: 1px solid rgba(0,0,0,0.1);
+        padding: 10px;
+    }
+    #conceptViewer .navigationContent {
+        position: relative;
+    }
+    #conceptViewer .showNavigationContent {
+        display: block;
+        background-color: #4a90e2;
+        color: #fff;
+        line-height: 20px;
+        padding: 5px 20px;
+        border-radius: 50px;
+        position: relative;
+        margin-left: 50px;
+    }
+    #conceptViewer .showNavigationContent::before {
+        content: "\f03a";
+        font-family: "Font Awesome 5 Free";
+        font-weight: 900;
+        font-size: 20px;
+        margin: 0 15px;
+        color: #4a90e2;
+        position: absolute;
+        left: -55px;
+    }
+    #conceptViewer .showNavigationContent::after {
+        content: "\f107";
+        font-family: "Font Awesome 5 Free";
+        font-weight: 900;
+        position: absolute;
+        right: 10px;
+    }
+    #conceptViewer .navigationContent ul {
+        position: absolute;
+        width: calc(100% - 4px);
+        list-style-type: none;
+        background-color: #fff;
+        margin: 0;
+        padding: 0;
+        left: 2px;
+        box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+        visibility: hidden;
+        opacity: 0;
+        transition: opacity linear 150ms 25ms;
+    }
+    #conceptViewer #showNavigationContent:checked + ul {
+        visibility: visible;
+        opacity: 1;
+    }
+    #conceptViewer .navigationContent ul li {
+        line-height: 2em;
+    }
+}
+#conceptViewer .viewer {
+    flex-grow: 1;
+}
+#conceptViewer .viewerContent { /* iframe */
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+#conceptViewer.conceptViewer-fullscreen .content {
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+#conceptViewer.conceptViewer-fullscreen .section-external-exit {
+    display: none;
+}
diff --git a/pemFioi/conceptViewer-1.0-mobileFirst.js b/pemFioi/conceptViewer-1.0-mobileFirst.js
new file mode 100644
index 000000000..f489bee9b
--- /dev/null
+++ b/pemFioi/conceptViewer-1.0-mobileFirst.js
@@ -0,0 +1,566 @@
+var conceptViewerStrings = {
+  fr: {
+    viewerTitle: "Aide",
+    selectLanguage: "Sélectionnez un langage…",
+    selectTopic: "Sélectionnez une rubrique…",
+    reloadFromTask: "Merci d'ouvrir cette documentation directement depuis l'exercice. Vous pouvez fermer cette fenêtre.",
+    concepts: {
+      "taskplatform": 'Résolution des exercices',
+      "language": "Création d'un programme",
+      "blockly_text_print": 'Afficher du texte',
+      "blockly_text_print_noend": 'Afficher consécutivement du texte',
+      "blockly_controls_repeat": 'Boucles de répétition',
+      "blockly_controls_if": 'Conditions si',
+      "blockly_controls_if_else": 'Conditions si/sinon',
+      "blockly_controls_whileUntil": 'Boucles tant que ou jusqu\'à',
+      "blockly_controls_infiniteloop": 'Boucle infinie',
+      "blockly_logic_operation": 'Opérateurs logiques',
+      "extra_nested_repeat": 'Boucles imbriquées',
+      "extra_variable": 'Variables',
+      "extra_list": 'Listes',
+      "extra_function": 'Fonctions',
+      "robot_commands": 'Commandes du robot',
+      "arguments": 'Fonctions avec arguments',
+    }
+  },
+  en: {
+    viewerTitle: "Help",
+    selectLanguage: "Select a language…",
+    selectTopic: "Select a topic…",
+    reloadFromTask: "Please open this documentation from your exercise. You can close this window.", // TODO :: verify
+    concepts: {
+      "taskplatform": 'Solving exercises',
+      "language": "Program creation",
+      "blockly_text_print": 'Afficher du texte',
+      "blockly_text_print_noend": 'Afficher consécutivement du texte',
+      "blockly_controls_repeat": 'Loops: repeat',
+      "blockly_controls_if": 'if conditions',
+      "blockly_controls_if_else": 'if/else conditions',
+      "blockly_controls_whileUntil": 'Loops: while/until',
+      "blockly_controls_infiniteloop": 'Infinite loop',
+      "blockly_logic_operation": 'Logic operators',
+      "extra_nested_repeat": 'Nested loops',
+      "extra_variable": 'Variables',
+      "extra_list": 'Lists',
+      "extra_function": 'Functions',
+      "robot_commands": 'Robot commands',
+      "arguments": 'Functions with arguments',
+    }
+  },
+  es: {
+    viewerTitle: "Ayuda",
+    selectLanguage: "Seleccione un lenguaje…",
+    selectTopic: "Seleccione un tema…",
+    reloadFromTask: "Please open this documentation from your exercise. You can close this window.", // TODO :: Translate
+    concepts: {
+      "taskplatform": 'Resolución de ejercicios',
+      "language": "Creación de un programa",
+      "blockly_text_print": 'Impresión de texto',
+      "blockly_text_print_noend": 'Impresión consecutiva de texto',
+      "blockly_controls_repeat": 'Bucles de repetición',
+      "blockly_controls_if": 'Condiciones si',
+      "blockly_controls_if_else": 'Condiciones si/sino',
+      "blockly_controls_whileUntil": 'Bucles mientras y hasta que',
+      "blockly_controls_infiniteloop": 'Repetir indefinidamente',
+      "blockly_logic_operation": 'Operadores lógicos',
+      "extra_nested_repeat": 'Bucles anidados',
+      "extra_variable": 'Variables',
+      "extra_list": 'Listas',
+      "extra_function": 'Funciones',
+      "robot_commands": 'Comandos del robot',
+      "arguments": 'Funciones con argumentos',
+    }
+  },
+  it: {
+    viewerTitle: "Aiuto online",
+    selectLanguage: "Seleziona una lingua…",
+    selectTopic: "Seleziona un argomento…",
+    reloadFromTask: "Please open this documentation from your exercise. You can close this window.", // TODO :: Translate
+    concepts: {
+      "taskplatform": 'Solving exercises',
+      "language": "Programmazione",
+      "blockly_text_print": 'Visualizzazione del testo',
+      "blockly_text_print_noend": 'Visualizzazione del testo sequenziale',
+      "blockly_controls_repeat": 'Ciclo di ripetizione',
+      "blockly_controls_if": 'Istruzione if',
+      "blockly_controls_if_else": 'Istruzione if / else',
+      "blockly_controls_whileUntil": 'Ripetere fino a quando',
+      "blockly_controls_infiniteloop": 'Loop infinito',
+      "blockly_logic_operation": 'Operatori logici (booleani)',
+      "extra_nested_repeat": 'Loop nidificati',
+      "extra_variable": 'Variabili',
+      "extra_list": 'Elenchi',
+      "extra_function": 'Funzioni',
+      "robot_commands": 'Robot commands',
+      "arguments": 'Funzioni conargomenti',
+    }
+  }
+};
+
+window.stringsLanguage = window.stringsLanguage || "fr";
+
+var conceptViewer = {
+  concepts: {},
+  loaded: false,
+  shownConcept: null,
+  selectedLanguage: null,
+  fullScreen: false,
+  contextTitle: undefined,
+  allLangs: [
+    {id: 'blockly', lbl: 'Blockly'},
+    {id: 'scratch', lbl: 'Scratch'},
+    {id: 'python', lbl: 'Python'}
+    ],
+
+  load: function (fullscreenLoad) {
+    if (!this.fullScreen)
+      this.fullScreen = fullscreenLoad;
+    // Load the conceptViewer into the DOM
+    if(this.loaded) { return; }
+
+    this.strings = conceptViewerStrings[window.stringsLanguage] || conceptViewerStrings.fr;
+
+    // TODO :: allow changing list of languages
+    var navLanguage = '\
+      \
+      \
+      
    ';
+    var curLangLbl = null;
+    for(var i=0; i';
+      navLanguage += '';
+    }
+    navLanguage += '
';
+
+    $('body').append(''
+        + '
'
+        + '  
'
+        + '   
'
+        + '     
'
+        +         (this.fullScreen ? (this.contextTitle ? this.contextTitle + " – " : "") : "") + this.strings.viewerTitle
+        + '     
'
+        + '     
'
+        + '       
'
+        + '       
'
+        + '     
'
+        + '   
'
+        + '   
'
+        + '     
'
+        + '      
'
+        + navLanguage
+        + '      
'
+        + '      
'
+        + '    
'
+        + '    
'
+        + '      '
+        + '    
'
+        + '   
'
+        + '  
'
+        + '
');
+    if (!this.fullScreen) {
+      $('#conceptViewer').hide();
+    } else {
+      $('#conceptViewer').addClass('conceptViewer-fullscreen');
+    }
+
+    if(curLangLbl) {
+       $('#showNavigationLanguageLabel').text(curLangLbl);
+    }
+
+    var that = this;
+
+    if (!conceptViewer.fullScreen) {
+      $('#conceptViewer').on('click', function (event) {
+        if (!$(event.target).closest('#conceptViewer .content').length) {
+          that.hide();
+        }
+      });
+    }
+    this.loaded = true;
+
+    $('#conceptViewer .navigationLanguage ul li').click(function(){
+      conceptViewer.selectedLanguage = $(this).data('id');
+      $('#conceptViewer .navigationLanguage ul li').removeClass('selected');
+      $(this).addClass('selected');
+      conceptViewer.languageChanged();
+    });
+    this.loadNavigation();
+  },
+
+  loadNavigation: function () {
+
+    var navContent = "\
+      \
+      \
+      
    ";
+    var defaultUrl = null;
+    for (var i=0; i'
+                  + curConcept.name
+                  + '  ';
+    }
+    navContent += "
";
+    $('#conceptViewer .navigationContent').html(navContent);
+
+    // Try first to show again the concept we were viewing
+    if(this.shownConcept && this.showConcept(this.shownConcept, false)) {
+      return;
+    } else if (defaultUrl) {
+      // else show the default concept
+      this.loadUrl(defaultUrl);
+    } else {
+      // else show nothing
+      this.loadUrl('');
+      this.shownConcept = null;
+    }
+  },
+
+  loadConcepts: function (newConcepts) {
+    // Load new concept information
+    this.concepts = newConcepts;
+    if(this.loaded) {
+      this.loadNavigation();
+    }
+  },
+
+  selectLanguage: function(lang) {
+    this.selectedLanguage = lang;
+  },
+
+  show: function (initConcept) {
+    // Display the conceptViewer
+    this.load();
+    $('#conceptViewer').fadeIn(500);
+
+    if (this.shownConcept && (initConcept || typeof initConcept == 'undefined')) {
+      this.showConcept(this.shownConcept);
+    }
+  },
+
+  hide: function () {
+    // Hide the conceptViewer
+    this.load();
+    $('#conceptViewer').fadeOut(500);
+    this.loadUrl('');
+  },
+
+  openInNewWidget: function() {
+    // we use the function to get the base url in order to support http and https.
+    var url = getConceptViewerBaseUrl() + "display-documentation.html";
+
+    // we put the language so we can do some operations faster and not depending on the jschannel
+    var fullscreenWindow = window.open(url + "?lang=" + window.stringsLanguage);
+    var channel = Channel.build({window: fullscreenWindow, origin: '*', scope: 'test'});
+
+    var that = this;
+
+    // The object sent from this page to the fullscreen concept viewer in order to get all the options.
+    var conceptViewerConfigs = {
+      concepts: that.concepts,
+      selectedLang: that.selectedLanguage,
+      shownConcept: that.shownConcept,
+      contextTitle: that.contextTitle
+    };
+
+    channel.bind('getConceptViewerConfigs', function() {
+      return conceptViewerConfigs;
+    });
+
+  },
+
+  showConcept: function (concept, show) {
+    // Show a specific concept
+    // Either a concept object can be given, either a concept ID can be given
+    // directly
+    var conceptUrl = null;
+    var conceptId = null;
+    var conceptName = null;
+    if (concept.url) {
+      conceptUrl = concept.url;
+      conceptId = concept.id;
+      conceptName = concept.name;
+    } else {
+      conceptId = concept.id ? concept.id : concept;
+      for (var i=0; i -1) {
+        return this.concepts[i].id;
+      }
+    }
+    return false;
+  },
+
+  languageChanged: function () {
+    $('#showNavigationLanguage').prop('checked', false);
+    for(var i=0; i -1
+        || window.location.hostname == 'concours2.castor-informatique.fr')
+       ? window.location.host : 'static4.castor-informatique.fr');
+    baseUrl += '/help/';
+    return baseUrl;
+}
+
+
+function getConceptViewerBaseConcepts() {
+    // Get base concepts in the default help
+    var baseUrl = getConceptViewerBaseUrl();
+    if(window.stringsLanguage == 'es' || window.stringsLanguage == 'it') {
+        baseUrl += 'index_' + window.stringsLanguage + '.html';
+    } else {
+        baseUrl += 'index.html';
+    }
+    var baseConcepts = [
+        {id: 'taskplatform', name: 'Résolution des exercices', url: baseUrl+'#taskplatform', language: 'all'},
+        {id: 'language', name: "Création d'un programme", url: baseUrl+'#language'},
+        {id: 'blockly_controls_repeat', name: 'Boucles de répétition', url: baseUrl+'#blockly_controls_repeat'},
+        {id: 'blockly_controls_if', name: 'Conditions si', url: baseUrl+'#blockly_controls_if'},
+        {id: 'blockly_controls_if_else', name: 'Conditions si/sinon', url: baseUrl+'#blockly_controls_if_else'},
+        {id: 'blockly_controls_whileUntil', name: 'Boucles tant que ou jusqu\'à', url: baseUrl+'#blockly_controls_whileUntil'},
+        {id: 'blockly_controls_infiniteloop', name: 'Boucle infinie', url: baseUrl+'#blockly_controls_infiniteloop'},
+        {id: 'blockly_logic_operation', name: 'Opérateurs logiques', url: baseUrl+'#blockly_logic_operation'},
+        {id: 'extra_nested_repeat', name: 'Boucles imbriquées', url: baseUrl+'#extra_nested_repeat'},
+        {id: 'extra_variable', name: 'Variables', url: baseUrl+'#extra_variable'},
+        {id: 'extra_list', name: 'Listes', url: baseUrl+'#extra_list'},
+        {id: 'extra_function', name: 'Fonctions', url: baseUrl+'#extra_function'},
+        {id: 'robot_commands', name: 'Commandes du robot', url: baseUrl+'#robot_commands'},
+        {id: 'arguments', name: 'Fonctions avec arguments', url: baseUrl+'#arguments'},
+        {id: 'blockly_text_print', name: 'Afficher du texte', url: baseUrl+'#blockly_text_print'},
+        {id: 'blockly_text_print_noend', name: 'Afficher consécutivement du texte', url: baseUrl+'#blockly_text_print_noend'},
+        {id: 'blockly_text_length', name: 'Longueur d\'une chaîne', url: baseUrl+'#blockly_text_length'},
+        {id: 'blockly_text_join', name: 'Concaténer des chaînes', url: baseUrl+'#blockly_text_join'},
+        {id: 'blockly_text_charAt', name: 'Obtenir un caractère d\'une chaîne', url: baseUrl+'#blockly_text_charAt'}
+        ];
+    for (var iConcept = 0; iConcept < baseConcepts.length; iConcept++) {
+       baseConcepts[iConcept].order = 100 + iConcept;
+    }
+    return baseConcepts;
+}
+
+
+function conceptsFill(baseConcepts, allConcepts) {
+  var conceptNames = (conceptViewerStrings[window.stringsLanguage] || conceptViewerStrings.fr)[
+  "concepts"] || conceptViewerStrings.fr.concepts;
+  var concepts = [];
+  var baseConceptsById = {};
+  for(var b=0; b';
+    }
+
     $('body').append(''
       + '
' : '');
+            cell.css({
+                'min-width': params.cell_min_width + 'px',
+            });
+            if(schema.isPlaceholder(row, col)) {
+                cell.addClass('placeholder');
+                cell.droppable({
+                    scope: uid,
+                    hoverClass: 'placeholder-hover',
+                    drop: function(event, ui) {
+                        resetMistakes();
+                        toolbar.append(cell.find('.value').first());
+                        ui.draggable.detach().css({top: 0,left: 0}).appendTo(cell);
+                        refreshAnswer();
+                    }
+                });
+            } else {
+                cell.html(schema.getContent(row, col));
+            }
+            return cell;
+        }
+
+        function createRow(row, length) {
+            cells[row] = [];
+            var tr = $('
';
+
+        var reference_rows = reference_table ? reference_table.params().records : null;
+        var reference_types = reference_table ? reference_table.params().columnTypes : [];
+        var valid_value = true;
+        var valid_all = true;
+        var types = table.params().columnTypes;
+        for(var i=0, row; row = rows[i]; i++) {
+            html += '';
+            for(var j=0; j' +
+                    this.formatValue(value, types[j]) +
+                    '';
+
+            }
+            html += '';
+        }
+
+        html += '
' +
+            table.params().columnNames.join('') +
+            '
';
+        if(display) {
+            container.html(html);
+            container.show();
+        }
+        return valid_all;
+    }
+
+    this.destroy = function() {
+        container.remove();
+    }
+}
+
+
+
+
+function TableRendererMap(options) {
+
+    var container = $('
');
+    container.hide();
+    options.parent.append(container);
+
+    this.clear = function() {
+        renderer.clear();
+    }
+    this.hide = function() {
+        container.hide();
+    }
+
+    function Renderer2D() {
+
+        var size = {
+            width: options.width || 400,
+            height: options.height || 400
+        }
+
+        function ImageLoader(src, onLoad) {
+            var loaded = false;
+            var img;
+            this.get = function() {
+                return loaded ? img : null;
+            }            
+            if(src) {
+                var img = new Image();
+                img.src = src;
+                img.onload = function() {
+                    loaded = true;
+                    onLoad && onLoad();
+                }
+                img.onerror = function() {
+                    console.error('Error loading image: ' + src);
+                }
+            } else {
+                onLoad && onLoad();   
+            }
+        }
+
+
+        function CoordinatesConverter() {
+            var map_lat_bottomRad = options.map_lat_bottom.toRad()
+            var mapLngDelta = (options.map_lng_right - options.map_lng_left)
+            var worldMapWidth = ((size.width / mapLngDelta) * 360) / (2 * Math.PI)
+            var mapOffsetY = (worldMapWidth / 2 * Math.log((1 + Math.sin(map_lat_bottomRad)) / (1 - Math.sin(map_lat_bottomRad))))
+
+            this.x = function(lng) {
+                return (parseFloat(lng) - options.map_lng_left) * (size.width / mapLngDelta);
+            }
+
+            this.y = function(lat) {
+                var latitudeRad = parseFloat(lat).toRad()
+                return size.height - ((worldMapWidth / 2 * Math.log((1 + Math.sin(latitudeRad)) / (1 - Math.sin(latitudeRad)))) - mapOffsetY)
+            }
+        }
+
+
+        function rgba(colors, opacity) {
+            return 'rgba(' + colors.r + ',' + colors.g + ',' + colors.b + ',' + opacity + ')';
+        }
+
+
+        this.clear = function() {
+            if(images) {
+                var img = images.map.get();
+                img && context2d.drawImage(img, 0, 0, size.width, size.height)
+            } else if(context2d) {
+                context2d.fillStyle = rgba(options.background_color, 1);
+                context2d.fillRect(0, 0, size.width, size.height)
+            }
+        }
+
+
+        this.pin = function(lng, lat, label, valid) {
+            var x = coordinates.x(lng);
+            var y = coordinates.y(lat);
+
+            var img = valid ? images.pin.get() : images.pin_mistake.get();
+            var w = options.pin_scale * img.width;
+            var h = options.pin_scale * img.height;
+            if(img) {
+                context2d.drawImage(img, x - w * 0.5, y - h, w, h);
+            }
+
+            var tw = context2d.measureText(label).width + 2;
+            context2d.fillStyle = rgba(options.background_color, 1);
+            context2d.fillRect(
+                x - 0.5 * tw,
+                y,
+                tw,
+                options.font_size + 2
+            );
+            context2d.fillStyle = rgba(valid ? options.text_color : options.mistake_color, 1);
+            context2d.fillText(label, x, y + 10)
+        }
+
+        this.destroy = function() {
+            $(canvas).remove();
+        }        
+
+        this.resize = function() {}        
+
+        // init
+        var images = {
+            map: new ImageLoader(options.map_file, this.clear.bind(this)),
+            pin: new ImageLoader(options.pin_file),
+            pin_mistake: new ImageLoader(options.pin_file_mistake)
+        }
+        var coordinates = new CoordinatesConverter();
+
+        var canvas = document.createElement('canvas');
+        canvas.width = size.width;
+        canvas.height = size.height;
+
+        container.append($(canvas));
+        var context2d = canvas.getContext('2d');
+
+        context2d.textAlign = 'center';
+        context2d.font = options.font_size + 'px sans-serif';
+    }
+
+
+
+    function Renderer3D() {
+        var earth_options = Object.assign({}, options, {
+            parent: container[0]
+        });
+        var earth = new Earth3D(earth_options);
+
+
+        this.clear = function() {
+            earth.clearPaths();	
+            earth.clearLabels();	
+        }
+
+        this.line = function(lng1, lat1, lng2, lat2, opacity) {
+            var p1 = {
+                lat: lat1,
+                lng: lng1
+            }
+            var p2 = {
+                lat: lat2,
+                lng: lng2
+            }            
+            earth.addPath(p1, p2);
+        }
+
+        this.pin = function(lng, lat, label) {
+            var p = {
+                lat: lat,
+                lng: lng,
+                text: label
+            }
+            earth.addLabel(p);
+        }
+
+        this.destroy = function() {
+            earth.destroy();
+        }
+
+        this.resize = function() {
+            earth.resize();
+        }
+    }
+
+
+    function validateLng(lng) {
+        if(isNaN(lng)) {
+            throw new Error('Longitude is not a number')
+        }
+        if(lng < options.map_lng_left || lng > options.map_lng_right) {
+            throw new Error('Longitude is outside of the map')
+        }
+    }
+
+    function validateLat(lat) {
+        if(isNaN(lat)) {
+            throw new Error('Latitude is not a number')
+        }
+        if(lat > options.map_lat_top || lat < options.map_lat_bottom) {
+            throw new Error('Latitude is outside of the map')
+        }
+    }
+
+    // interface
+    this.displayTable = function(table, reference_table, display) {
+        if(reference_table) {
+            // reorder reference_table columns
+            reference_table = reference_table.selectColumns(['name', 'lng', 'lat']);
+        }
+        if(display) {
+            renderer.clear();
+        }
+        var rows = table.params().records;
+
+        var valid_value = true;
+        var valid_all = true;
+
+        var reference_rows = reference_table ? reference_table.params().records : null;
+        for(var i=0, row; row=rows[i]; i++) {
+            if(reference_rows) {
+                valid_value = reference_rows[i] && reference_rows[i].join('-') == row.join('-');
+            }
+            valid_all = valid_all && valid_value;
+            validateLng(row[1]);
+            validateLat(row[2]);
+            if(display) {
+                renderer.pin(row[1], row[2], row[0], valid_value);
+            }
+        }
+        if(display) {
+            container.show();
+            renderer.resize();
+        }
+        return valid_all;
+    }
+
+    this.destroy = function() {
+        container.remove();
+        renderer.destroy();
+    }
+
+    // init
+    if(options.map3d) {
+        var renderer = new Renderer3D();
+    } else {
+        var renderer = new Renderer2D();
+    }
+}
+
+function TableRendererGraph(options) {
+
+    var container = $('
');
+    container.hide();
+    options.parent.append(container);
+    this.clear = function() {
+        renderer.clear("");
+    }
+    this.hide = function() {
+        container.hide();
+    }
+
+    function Renderer() {
+
+        function rgba(colors, opacity) {
+            return 'rgba(' + colors.r + ',' + colors.g + ',' + colors.b + ',' + opacity + ')';
+        }
+        this.clear = function() {
+            context2d.fillStyle = rgba(options.background_color, 1);
+            context2d.fillRect(0, 0, options.width, options.height)
+        };
+        this.init = function(yName,yMin,yMax) {
+            context2d.beginPath();
+            context2d.moveTo(options.margin_x,0);
+            context2d.lineTo(options.margin_x,options.graph_height);
+            context2d.lineTo(options.margin_x+options.graph_width,options.graph_height);
+
+            context2d.save();
+            context2d.translate(0, 0);
+            context2d.rotate(-Math.PI/2);
+            context2d.strokeText(yName, -options.graph_height/2, options.margin_x-15);
+            context2d.restore();
+            context2d.strokeText("index", options.margin_x+options.graph_width/2, options.graph_height+15);
+
+            context2d.strokeText(yMax, 15, options.graph_height*0.06 + options.font_size/2);
+            context2d.moveTo(options.margin_x-5,options.graph_height*0.06);
+            context2d.lineTo(options.margin_x+5,options.graph_height*0.06);
+            context2d.strokeText(yMin, 15, options.graph_height*0.94 + options.font_size/2);
+            context2d.moveTo(options.margin_x-5,options.graph_height*0.94);
+            context2d.lineTo(options.margin_x+5,options.graph_height*0.94);
+
+            context2d.stroke();
+            context2d.beginPath();
+            context2d.moveTo(options.margin_x,options.graph_height);
+        };
+        this.line_to = function(x,xMax,y,yMin,yMax) {
+            context2d.lineTo(options.margin_x+(options.graph_width * x / xMax),options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)));
+        };
+        this.plot = function(x,xMax,y,yMin,yMax,valid) {
+            context2d.strokeStyle = valid?"#000000":"#900000";
+            context2d.moveTo(options.margin_x+(options.graph_width * x / xMax - 3),options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)));
+            context2d.lineTo(options.margin_x+(options.graph_width * x / xMax + 3),options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)));
+            context2d.moveTo(options.margin_x+(options.graph_width * x / xMax),options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)) - 3);
+            context2d.lineTo(options.margin_x+(options.graph_width * x / xMax),options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)) + 3);
+            context2d.stroke();
+            context2d.beginPath();
+            context2d.strokeStyle = "#000000";
+        };
+        this.bar = function(x,xMax,y,yMin,yMax,valid) {
+            context2d.fillStyle = valid?"#D0D0D0":"#d0b0b0";
+            context2d.strokeRect(options.margin_x+(options.graph_width * (x+0.1) / xMax),options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)),options.graph_width * 0.8 / xMax,((y-yMin)*(options.graph_height)/(yMax-yMin)));
+            context2d.fillRect(options.margin_x+(options.graph_width * (x+0.1) / xMax),options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)),options.graph_width * 0.8 / xMax,((y-yMin)*(options.graph_height)/(yMax-yMin)));
+            context2d.stroke();
+            context2d.beginPath();
+        };
+        this.show = function() {context2d.stroke();};
+
+        var canvas = document.createElement('canvas');
+        canvas.width = options.width;
+        canvas.height = options.height;
+
+        container.append($(canvas));
+        var context2d = canvas.getContext('2d');
+
+        context2d.textAlign = 'center';
+        context2d.font = options.font_size + 'px sans-serif';
+    }
+
+    // interface
+    this.displayTable = function(table, type, reference_table, display) {
+        if(display) {
+            renderer.clear();
+        }
+        var rows = table.params().records;
+
+        var valid_value = true;
+        var valid_all = true;
+
+        var reference_rows = reference_table ? reference_table.params().records : null;
+
+        params=table.params();
+        var yMin = rows[0][0];
+        var yMax = rows[0][0];
+        for(var i=0, row; row=rows[i]; i++) {
+            if (yMax < row[0]) {yMax = row[0];}
+            if (yMin > row[0]) {yMin = row[0];}
+        }
+        if (yMax === yMin){yMax++;yMin--;}
+        if (params.minY && params.maxY) {yMin = params.minY;yMax = params.maxY;}
+        var marginY = Math.ceil((yMax-yMin)*0.05);
+
+        columnNames = table.params().columnNames;
+        renderer.init(columnNames[0],yMin,yMax);
+        yMin = Number(yMin) - marginY;
+        yMax = Number(yMax) + marginY;
+        switch (type) {
+            case 'bar':
+                for(i=0; row=rows[i]; i++) {
+                    if(reference_rows) {
+                        valid_value = reference_rows[i] && reference_rows[i].join('-') == row.join('-');
+                    }
+                    valid_all = valid_all && valid_value;
+                    if(display) {
+                        renderer.bar(i,rows.length,row[0],yMin,yMax,valid_value);
+                    }
+                }
+                break;
+            case 'plot':
+                for(i=0; row=rows[i]; i++) {
+                    if(reference_rows) {
+                        valid_value = reference_rows[i] && reference_rows[i].join('-') == row.join('-');
+                    }
+                    valid_all = valid_all && valid_value;
+                    if(display) {
+                        renderer.plot(i+0.5,rows.length,row[0],yMin,yMax,valid_value);
+                    }
+                }
+                break;
+            default: //case 'line'
+                for(i=0; row=rows[i]; i++) {
+                    if(reference_rows) {
+                        valid_value = reference_rows[i] && reference_rows[i].join('-') == row.join('-');
+                    }
+                    valid_all = valid_all && valid_value;
+                    if(display) {
+                        renderer.line_to(i,rows.length-1,row[0],yMin,yMax);
+                    }
+                }
+        }
+        if(display) {
+            renderer.show();
+            container.show();
+        }
+
+        return valid_all;
+    }
+
+    this.destroy = function() {
+        container.remove();
+    }
+
+    // init
+    var renderer = new Renderer();
+}
+
+function TableRendererGraphDouble(options) {
+
+    var container = $('
');
+    container.hide();
+    options.parent.append(container);
+    this.clear = function() {
+        renderer.clear("");
+    }
+    this.hide = function() {
+        container.hide();
+    }
+
+    function Renderer() {
+
+        function rgba(colors, opacity) {
+            return 'rgba(' + colors.r + ',' + colors.g + ',' + colors.b + ',' + opacity + ')';
+        }
+        this.clear = function() {
+            context2d.fillStyle = rgba(options.background_color,1);
+            context2d.fillRect(0, 0, options.width, options.height);
+            context2d.stroke();
+            context2d.beginPath();
+        };
+        this.init = function(xName,xMin,xMax,yName,yMin,yMax) {
+            context2d.beginPath();
+            context2d.moveTo(options.margin_x,0);
+            context2d.lineTo(options.margin_x,options.graph_height);
+            context2d.lineTo(options.margin_x+options.graph_width,options.graph_height);
+
+            context2d.save();
+            context2d.translate(0, 0);
+            context2d.rotate(-Math.PI/2);
+            context2d.strokeText(yName, -options.graph_height/2, options.margin_x-15);
+            context2d.restore();
+            context2d.strokeText(xName, options.margin_x+options.graph_width/2, options.graph_height+15);
+
+            context2d.strokeText(yMax, 15, options.graph_height*0.09 + options.font_size/2);
+            context2d.moveTo(options.margin_x-5,options.graph_height*0.09);
+            context2d.lineTo(options.margin_x+5,options.graph_height*0.09);
+            context2d.strokeText(yMin, 15, options.graph_height*0.91 + options.font_size/2);
+            context2d.moveTo(options.margin_x-5,options.graph_height*0.91);
+            context2d.lineTo(options.margin_x+5,options.graph_height*0.91);
+
+            context2d.strokeText(xMin, options.margin_x+options.graph_width*0.09, options.graph_height + 10 + options.font_size/2);
+            context2d.moveTo(options.margin_x+options.graph_width*0.09,options.graph_height-5);
+            context2d.lineTo(options.margin_x+options.graph_width*0.09,options.graph_height+5);
+            context2d.strokeText(xMax, options.margin_x+options.graph_width*0.91, options.graph_height + 10 + options.font_size/2);
+            context2d.moveTo(options.margin_x+options.graph_width*0.91,options.graph_height-5);
+            context2d.lineTo(options.margin_x+options.graph_width*0.91,options.graph_height+5);
+
+            context2d.stroke();
+            context2d.beginPath();
+            context2d.moveTo(options.margin_x,options.graph_height);
+        };
+
+        this.plot = function(x,xMin,xMax,y,yMin,yMax,valid) {
+            context2d.strokeStyle = valid?"#000000":"#900000";
+            context2d.moveTo(options.margin_x+((x-xMin)*(options.graph_width)/(xMax-xMin)) - 3,options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)));
+            context2d.lineTo(options.margin_x+((x-xMin)*(options.graph_width)/(xMax-xMin)) + 3,options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)));
+            context2d.moveTo(options.margin_x+((x-xMin)*(options.graph_width)/(xMax-xMin)),options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)) - 3);
+            context2d.lineTo(options.margin_x+((x-xMin)*(options.graph_width)/(xMax-xMin)),options.graph_height-((y-yMin)*(options.graph_height)/(yMax-yMin)) + 3);
+            context2d.stroke();
+            context2d.beginPath();
+            context2d.strokeStyle = "#000000";
+        };
+        this.show = function() {context2d.stroke();};
+
+        var canvas = document.createElement('canvas');
+        canvas.width = options.width;
+        canvas.height = options.height;
+
+        container.append($(canvas));
+        var context2d = canvas.getContext('2d');
+
+        context2d.textAlign = 'center';
+        context2d.font = options.font_size + 'px sans-serif';
+    }
+
+    // interface
+    this.displayTable = function(table, reference_table) {
+        renderer.clear();
+        var rows = table.params().records;
+
+        var valid_value = true;
+        var valid_all = true;
+
+        var reference_rows = reference_table ? reference_table.params().records : null;
+
+        params=table.params();
+        var xMin = rows[0][0];
+        var xMax = rows[0][0];
+        var yMin = rows[0][1];
+        var yMax = rows[0][1];
+        for(var i=0, row; row=rows[i]; i++) {
+            if (xMax < row[0]) {xMax = row[0];}
+            if (xMin > row[0]) {xMin = row[0];}
+            if (yMax < row[1]) {yMax = row[1];}
+            if (yMin > row[1]) {yMin = row[1];}
+        }
+        if (xMax === xMin){xMax++;xMin--;}
+        if (yMax === yMin){yMax++;yMin--;}
+        if (params.minX && params.maxX) {xMin = params.minX;xMax = params.maxX;}
+        if (params.minY && params.maxY) {yMin = params.minY;yMax = params.maxY;}
+        var marginX = (xMax-xMin)*0.11;
+        var marginY = (yMax-yMin)*0.11;
+
+        columnNames = table.params().columnNames;
+        renderer.init(columnNames[0],xMin,xMax,columnNames[1],yMin,yMax);
+        yMin = Number(yMin) - marginY;
+        yMax = Number(yMax) + marginY;
+        xMin = Number(xMin) - marginX;
+        xMax = Number(xMax) + marginX;
+        for(i=0; row=rows[i]; i++) {
+            if(reference_rows) {
+                valid_value = reference_rows[i] && reference_rows[i].join('-') == row.join('-');
+            }
+            valid_all = valid_all && valid_value;
+            renderer.plot(row[0],xMin,xMax,row[1],yMin,yMax,valid_value);
+        }
+        renderer.show();
+        container.show();
+
+        return valid_all;
+    }
+
+    this.destroy = function() {
+        container.remove();
+    }
+
+    // init
+    var renderer = new Renderer();
+}
+
+function ConsoleRenderer(options) {
+
+    var container = $('
');
+    container.hide();
+    options.parent.append(container);
+    this.clear = function() {
+        container.html("");
+    };
+    this.hide = function() {
+        container.hide();
+    };
+
+    this.print = function(variable, display) {
+        if(!display) return;
+        nd = new Date();
+        var html = "
["+("0"+nd.getHours()).slice(-2)+":"+("0"+nd.getMinutes()).slice(-2)+"]
"+variable+"
";
+        container.append(html);
+        container.show();
+    }
+
+    this.destroy = function() {
+        container.remove();
+    }
+
+}
+
+
+function HistogramRenderer(options) {
+
+    var max = 0;
+
+    var container = $('
');
+    container.hide();
+    options.parent.append(container);
+
+    var chart;
+
+    function initChart() {
+        var canvas = $('');
+        canvas.width('100%');
+        canvas.height(options.histogram_height);
+        container.append(canvas);    
+
+        var chart_initial_data = {
+            labels: [],
+            datasets: [
+                {
+                    fillColor: "#79D1CF",
+                    strokeColor: "#79D1CF",
+                    data: []
+                }
+            ]
+        };
+
+
+        var animationHandler = function() {
+            var ctx = this.chart.ctx;
+            ctx.font = Chart.helpers.fontString(
+                Chart.defaults.global.defaultFontFamily, 
+                'normal', 
+                Chart.defaults.global.defaultFontFamily
+            );
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'bottom';
+
+
+            this.data.datasets.forEach(function (dataset) {
+                var key = Object.keys(dataset._meta)[0];
+                var meta_data = dataset._meta[key].data;                            
+                for (var i = 0; i
");
+      for(var iWord = 0; iWord < this.words.length; iWord++){
+         this.stock.append(""+this.words[iWord]+"");
+      }
+      $("#"+this.divID).empty();
+      $("#"+this.divID).append(this.stock,this.html);
+   };
+   
+   this.getWordDim = function() {
+      $("#stock span").css({
+         padding: (this.margin/2)+"px "+(this.margin)+"px",
+         border: "1px solid black",
+         "border-radius": "5px",
+         "background-color": "white",
+         "text-align": "center",
+         cursor: "pointer"
+      });
+
+      $("#stock span").each(function(){
+         if($(this).outerWidth() > self.gapWidth){
+            self.gapWidth = $(this).outerWidth();
+         }
+         if($(this).outerHeight() > self.gapHeight){
+            self.gapHeight = $(this).outerHeight();
+         }
+      });
+      $("#stock span").each(function(){
+         self.wordDim[$(this).attr("id")] = {
+            w: self.gapWidth,
+            h: self.gapHeight
+         };
+      });
+      
+   };
+
+   this.styleGaps = function() {    
+      $("#"+this.divID+" span[id^=gap_]").css({
+         display: "inline-block",
+         width: this.gapWidth,
+         height: this.gapHeight,
+         "background-color": "lightgrey"
+      })
+   };
+
+   this.getWordsPos = function() {
+      $("#"+this.divID).css("position","relative");
+      var stockDim = this.getStockDim();
+      $("#stock").css({
+         height: stockDim.h+"px"
+      });
+      var leftBorder = 0;
+      for(var iWord = 0; iWord < this.words.length; iWord++){
+         var line = Math.floor(iWord/stockDim.nbWordsPerLine);
+         if(line + 1 < stockDim.nbLines){
+            var nbWordsInLine = stockDim.nbWordsPerLine;
+         }else{
+            var nbWordsInLine = this.words.length%stockDim.nbWordsPerLine;
+         }
+         var margin = ((stockDim.w - (nbWordsInLine*(this.gapWidth)))/(nbWordsInLine+1));
+ 
+         var top = this.margin + line*(this.gapHeight + this.margin);
+         var left = margin + leftBorder;
+         var id = "word_"+iWord;
+         var gapID = "gap_"+iWord;
+         $("#"+id).css({
+            position: "absolute",
+            top: top+"px",
+            left: left+"px",
+            width: this.gapWidth,
+            padding: (this.margin/2)+"px 0"
+         });
+         this.wordOriginPos[id] = {
+            x: left,
+            y: top
+         };
+         this.wordCurrentPos[id] = {
+            x: left,
+            y: top
+         };
+         if((iWord + 1)%stockDim.nbWordsPerLine == 0){
+            leftBorder = 0;
+         }else{
+            leftBorder += margin + this.wordDim[id].w;
+         }
+         this.gapPos[gapID] = {
+            x: $("#"+gapID).position().left,
+            y: $("#"+gapID).position().top
+         };
+      }
+   };
+
+   this.getStockDim = function() {
+      var parentWidth = $("#"+this.divID).width();
+      var nbWordsPerLine = Math.floor(parentWidth/(this.gapWidth + this.margin));
+      var nbLines = Math.ceil(this.words.length/nbWordsPerLine);
+      var stockHeight = nbLines*(this.gapHeight + this.margin) + this.margin;
+      return {w: parentWidth, h: stockHeight, nbLines: nbLines, nbWordsPerLine: nbWordsPerLine};
+   };
+
+   this.initHandlers = function() {
+      $("#stock span").off("mousedown");
+      $("#stock span").mousedown(this.dragStart);
+      $(document).off("mousemove");
+      $(document).mousemove(this.dragMove);
+      $(document).off("mouseup");
+      $(document).mouseup(this.dragEnd);
+   };
+
+   this.dragStart = function(event) {
+      self.mouseStartPos = {
+         x: event.pageX,
+         y: event.pageY
+      };
+      self.isDragging = true;
+      var id = $(this).attr("id");
+      self.wordBeingDragged = id;
+      $(this).insertAfter($(this).siblings().last()); // to top
+      for(var gap in self.gapContent){
+         if(self.gapContent[gap] == id.substr(5)){
+            self.gapContent[gap] = null;
+            if(self.answer)
+               self.saveAnswer();
+         }
+      }
+      self.dragCallback();
+   };
+
+   this.dragMove = function(event) {
+      if(self.isDragging){
+         var id = self.wordBeingDragged;
+         var dx = event.pageX - self.mouseStartPos.x;
+         var dy = event.pageY - self.mouseStartPos.y;
+         var x = self.wordCurrentPos[id].x + dx;
+         var y = self.wordCurrentPos[id].y + dy;
+         $("#"+self.wordBeingDragged).css({
+            left: x+"px",
+            top: y+"px"
+         });
+         var gap = self.isGoodPosition(x,y,id);
+         if(gap){
+            self.highlightGap(gap);
+         }else{
+            self.removeHighlight();
+         }
+      }
+   };
+
+   this.dragEnd = function(event) {
+      if(self.isDragging){
+         var id = self.wordBeingDragged;
+         var x = $("#"+id).position().left;
+         var y = $("#"+id).position().top;
+         var gap = self.isGoodPosition(x,y,id);
+         if(gap){
+            if(self.gapContent[gap]){
+               var prevID = "word_"+self.gapContent[gap];
+               // self.resizeWord(prevID,false);
+               self.toPos(prevID,self.wordOriginPos[prevID].x,self.wordOriginPos[prevID].y);
+               self.removeHighlight();
+            }
+            // self.resizeWord(id,true);
+            var newX = self.gapPos[gap].x;
+            var newY = self.gapPos[gap].y;
+            self.toPos(id,newX,newY);
+            self.gapContent[gap] = id.substr(5);
+            if(self.answer)
+               self.saveAnswer();
+         }else{
+            // self.resizeWord(id,false);
+            self.toPos(id,self.wordOriginPos[id].x,self.wordOriginPos[id].y);   
+         }
+         self.isDragging = false;
+      }
+   };
+
+   this.isGoodPosition = function(x,y,id) {
+      var xc = x + this.wordDim[id].w/2;
+      var yc = y + this.wordDim[id].h/2;
+
+      for(var gap in this.gapPos){
+         var gapX = this.gapPos[gap].x + this.gapWidth/2;
+         var gapY = this.gapPos[gap].y + this.gapHeight/2;
+         if(Math.abs(xc - gapX) < this.gapWidth/2 && Math.abs(yc - gapY) < this.gapHeight/2){
+            return gap;
+         }
+      }
+      return false;
+   };
+
+   this.toPos = function(id,x,y) {
+      $("#"+id).css({
+         left: x+"px",
+         top: y+"px"
+      });
+      self.wordCurrentPos[id] = {
+         x: x,
+         y: y
+      }
+   };
+
+   this.highlightGap = function(gap) {
+      $("#"+gap).css({"background-color": "grey"});
+      if(this.gapContent[gap]){
+         $("#word_"+this.gapContent[gap]).css({"background-color": "grey"});
+      }
+   };
+
+   this.removeHighlight = function() {
+      for(var gap in this.gapPos){
+         $("#"+gap).css({"background-color": "lightgrey"});
+      }
+      for(var word in this.wordCurrentPos){
+         $("#"+word).css({"background-color": "white"});
+      }
+   };
+
+   // this.resizeWord = function(id,inGap) {
+   //    if(inGap){
+   //       $("#"+id).outerWidth(this.gapWidth);
+   //    }else{
+   //       $("#"+id).outerWidth(this.wordDim[id].w);
+   //    }
+   // };
+
+   this.saveAnswer = function() {
+      answer.gapContent = this.gapContent;
+   };
+
+   this.validation = function(mode) {
+      for(var gapID in this.gapPos){
+         if(!this.gapContent[gapID]){
+            return "Please fill-in all the gaps";
+         }
+      }
+      if(mode == 2){
+         var nbErrors = 0;
+      }
+      for(var iWord = 0; iWord < this.words.length; iWord++){
+         if(!this.validEntry[iWord].includes(parseInt(this.gapContent["gap_"+iWord]))){
+            switch(mode){
+               case 1:
+                  return "There is at least one error";
+               case 2:
+                  nbErrors++;
+                  break;
+               case 3:
+                  return "Error in entry "+(iWord + 1);
+            }
+         }
+      }
+      if(mode == 2 && nbErrors > 0){
+         if(nbErrors > 1){
+            return "There are "+nbErrors+" errors";
+         }else{
+            return "There is "+nbErrors+" error";
+         }
+      }
+   };
+
+   this.initDiv();
+   this.getWordDim();
+   this.styleGaps();
+   this.getWordsPos();
+   this.initHandlers();
+};
\ No newline at end of file
diff --git a/pemFioi/fioi-skill-tools.js b/pemFioi/fioi-skill-tools.js
new file mode 100644
index 000000000..14bbceda9
--- /dev/null
+++ b/pemFioi/fioi-skill-tools.js
@@ -0,0 +1,15 @@
+(function () {
+'use strict';
+
+$("body").prepend("
" + $("title").text() + "
");
+$("#skillSummary").prepend("
Summary
");
+$("#resources").prepend("
Resources
");
+$("body").append("
Prerequisites
    ");
+$.each(PEMTaskMetaData.prerequisites, function(index, prerequisite) {
+   $("body").append("
  • " + prerequisite + "
    • ");
+});
+$("body").append("
    Difficulty: " + PEMTaskMetaData.difficulty + "
    ");
+$("body").append("
    License: " + PEMTaskMetaData.license + "
    ");
+
+
+})();
diff --git a/pemFioi/fioi-task-tools.js b/pemFioi/fioi-task-tools.js
index 30ac56551..56575207d 100644
--- a/pemFioi/fioi-task-tools.js
+++ b/pemFioi/fioi-task-tools.js
@@ -16,6 +16,7 @@
  */
 
 var extensionToLanguage = {
+   adb:  'ada',
    cpp:  'cpp',
    c:    'c',
    pas:  'pascal',
@@ -241,6 +242,7 @@ function fillResources(FIOITaskMetaData, PEMInstallationAPIObject, callback, url
                };
                var filelist = [
                   "sources/" + groupName + "-" + fileName,
+                  "sources/" + fileName,
                   groupName + "-" + fileName,
                   fileName
                   ];
@@ -382,6 +384,7 @@ function includeSingleSources(resources, currentLang, urlMode) {
 }
 
 var langToPrint = {
+   'ada': 'ADA',
    'cpp': 'C++',
    'c':   'C',
    'python': 'Python',
diff --git a/pemFioi/fontsLoader-1.0.js b/pemFioi/fontsLoader-1.0.js
new file mode 100644
index 000000000..1d9bb33b4
--- /dev/null
+++ b/pemFioi/fontsLoader-1.0.js
@@ -0,0 +1,82 @@
+(function () {
+var importableFonts = function () {
+    var mp = window.modulesPath ? window.modulesPath : '../../modules';
+    return {
+        'fontawesome': {
+             check: '900 12px "Font Awesome 5 Free"',
+             src: mp+"/fonts/fontAwesome/css/all.css",
+             embed: mp+"/fonts/embed-fontawesome.css",
+             cdn: "https://static4.castor-informatique.fr/modules/fonts/fontAwesome/css/all.css"
+        },
+        'titillium-web': {
+             check: '12px "Titillium Web"',
+             src: mp+"/fonts/titilliumweb.css",
+             embed: mp+"/fonts/embed-titilliumweb.css",
+             cdn: "https://static4.castor-informatique.fr/modules/fonts/titilliumweb.css"
+        }
+    };
+}
+
+var iOSDetected = (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) || (navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform));
+
+var fontsToLoad = [];
+var fontsLoaded = {};
+
+function appendFont(path) {
+    $('head').append('');
+}
+
+function checkFontLoaded(fontName) {
+    // iOS will always return true to document.fonts.check
+    if(typeof importableFonts == 'function') {
+        importableFonts = importableFonts();
+    };
+    var fontData = importableFonts[fontName];
+    if(typeof fontsLoaded[fontName] == 'undefined') {
+        fontsLoaded[fontName] = {};
+    }
+    var fontLoaded = fontsLoaded[fontName];
+    if(iOSDetected || !document.fonts || !document.fonts.check || !document.fonts.check(fontData.check)) {
+        if(!iOSDetected && window.modulesPath && fontData.embed && !fontLoaded.embed) {
+            appendFont(fontData.embed);
+            fontLoaded.embed = true;
+        } else if(fontData.cdn && !fontLoaded.cdn) {
+            appendFont(fontData.cdn);
+            fontLoaded.cdn = true;
+        }
+    }
+}
+
+function checkFonts(force) {
+    if(!force && document.fonts && document.fonts.ready) {
+        document.fonts.ready.then(function() { checkFonts(true); });
+    } else {
+        for(var i=0 ; i < fontsToLoad.length; i++) {
+            checkFontLoaded(fontsToLoad[i]);
+        }
+    }
+}
+
+function loadFonts(fontList) {
+    if(typeof importableFonts == 'function') {
+        importableFonts = importableFonts();
+    };
+    for(var i=0; i < fontList.length; i++) {
+        var fontName = fontList[i];
+        if(fontsToLoad.indexOf(fontName) != -1) { continue; }
+        if(!importableFonts[fontName]) {
+            console.error('Font "' + fontName + '" unknown.');
+            continue;
+        }
+        fontsToLoad.push(fontName);
+        if(importableFonts[fontName].src) {
+            appendFont(importableFonts[fontName].src);
+        }
+    }
+}
+
+window.FontsLoader = {
+    checkFonts: checkFonts,
+    loadFonts: loadFonts
+}
+})();
diff --git a/pemFioi/gps-1.0.js b/pemFioi/gps-1.0.js
new file mode 100644
index 000000000..9b8c1fe55
--- /dev/null
+++ b/pemFioi/gps-1.0.js
@@ -0,0 +1,273 @@
+function GPS(settings) {
+   self = this;
+   var paper = settings.paper;
+   var paperID = settings.paperID;
+   var attr = settings.attr;
+   var x0 = settings.x0;
+   var y0 = settings.y0;
+   var w = settings.w;
+   var h = settings.h;
+   var scale = settings.scale;
+   var unit = settings.unit;
+   var fixed = settings.fixed;
+   var create = settings.create;
+   var hideTowerLabel = settings.hideTowerLabel;
+
+   this.timeShiftEnabled = settings.timeShiftEnabled;
+   this.timeShift = 0;
+   var firstTowersPos = settings.towerPos;
+   var towerR = settings.towerR;
+   var towerH = settings.towerH;
+   var towerW = settings.towerW;
+   var callback = settings.callback;
+   var addTowerCallback = settings.addTowerCallback;
+   var dragEndCallback = settings.dragEndCallback;
+   var dragMargin = 10;
+   var minR = towerR + dragMargin;
+
+   this.landscape;
+   this.overlay;
+   this.towers = {};
+   this.towerID = [];
+   this.distInfo = {};
+   var draggedData;
+
+   this.setTimeShift = function(val) {
+      this.timeShift = val;
+      this.updateShiftCircles();
+   };
+
+   this.init = function() {
+      paper.rect(x0,y0,w,h).attr(attr.frame);
+      if(firstTowersPos){
+         for(var pos of firstTowersPos){
+            this.addTower(pos);
+         }
+      }
+      this.overlay = paper.rect(x0,y0,w,h).attr(attr.overlay);
+
+      this.initHandlers();
+   };
+
+   this.initHandlers = function() {
+      Beav.dragWithTouch(this.overlay, onMove, onStart, onEnd);
+      this.overlay.mousemove(self.mousemove);
+   };
+
+   this.addTower = function(pos) {
+      if(pos.id && this.towerID.includes(pos.id)){
+         console.log(pos.id+" already exists")
+         return
+      }
+      var x = x0 + pos.x;
+      var y = y0 + pos.y;
+      var circle = paper.circle(x,y,towerR).attr(attr.tower);
+      if(!pos.id){
+         var id = 1;
+         while(this.towerID.includes(id)){
+            id++;
+         };
+         pos.id = id;
+      }
+      var label = paper.text(x,y,pos.id).attr(attr.towerLabel);
+      if(hideTowerLabel){
+         label.hide();
+      }
+      var circleR = pos.r || minR;
+      var outCircle = paper.circle(x,y,circleR).attr(attr.circle).attr("clip-rect",x0+","+y0+","+w+","+h);
+      if(this.timeShiftEnabled){
+         var shiftedCircle = paper.circle(x,y,circleR + this.timeShift).attr(attr.shiftedCircle).attr("clip-rect",x0+","+y0+","+w+","+h);
+         var raphObj = paper.set(circle,label,outCircle,shiftedCircle);
+      }else{
+         var raphObj = paper.set(circle,label,outCircle);
+      }
+      var maxR = Math.max(Math.abs(pos.x),Math.abs(pos.x - w),Math.abs(pos.y),Math.abs(pos.y - h));
+      this.towers[pos.id] = { x: pos.x, y: pos.y, raphObj: raphObj, r: circleR, maxR: maxR };
+      this.towerID.push(pos.id);
+      this.updateDistInfo(pos.id);
+      if(this.overlay){
+         this.overlay.toFront();
+      }
+      if(addTowerCallback){
+         addTowerCallback();
+      }
+      return pos.id;
+   };
+
+   this.mousemove = function(ev) {
+      var xMouse = ev.pageX - $("#"+paperID).offset().left - x0;
+      var yMouse = ev.pageY - $("#"+paperID).offset().top - y0;
+      var cursor = "auto";
+      for(var id of self.towerID){
+         var r = self.towers[id].r;
+         var x = self.towers[id].x;
+         var y = self.towers[id].y;
+         var d = Beav.Geometry.distance(x,y,xMouse,yMouse);
+         if(d > r - 10 && d < r + 10){
+            cursor = "grab";
+            break;
+         }
+      }
+      self.overlay.attr("cursor",cursor);
+   };
+
+   var onStart = function(x,y,ev) {
+      var xMouseGps = x - $("#"+paperID).offset().left - x0;
+      var yMouseGps = y - $("#"+paperID).offset().top - y0;
+      var minDist = Infinity;
+      draggedData = null;
+      for(var id of self.towerID){
+         var towerData = self.towers[id];
+         var distFromCenter = Beav.Geometry.distance(xMouseGps,yMouseGps,towerData.x,towerData.y);
+
+         if(!fixed && distFromCenter <= towerR){
+            /* drag center */
+            minDist = 0;
+            draggedData = { id: id, type: 0};
+            break;
+         }
+         var distFromCircle = Math.abs(distFromCenter - towerData.r);
+         if(distFromCircle < minDist){
+            minDist = distFromCircle;
+            draggedData = { id: id, type: 1, r0: distFromCenter, ri: towerData.r };
+         }
+      }
+      if(minDist > dragMargin){
+         draggedData = (!create) ? null : { x: xMouseGps, y: yMouseGps, create: true };
+         if(draggedData){
+            // console.log(draggedData)
+         }
+      }
+      if(callback){
+         callback();
+      }
+   };
+   var onMove = function(dx,dy,x,y,ev) {
+      if(!draggedData){
+         return
+      }
+      var xMouseGps = x - $("#"+paperID).offset().left - x0;
+      var yMouseGps = y - $("#"+paperID).offset().top - y0;
+      if(draggedData.create){
+         if(Beav.Geometry.distance(xMouseGps,yMouseGps,draggedData.x,draggedData.y) < minR){
+            return
+         }
+         var id = self.addTower(draggedData);
+         draggedData = {
+            id: id,
+            type: 1,
+            r0: minR,
+            ri: minR
+         }
+      }else{
+         var id = draggedData.id;
+      }
+      var ri = draggedData.ri;
+      var towerData = self.towers[id];
+
+      if(draggedData.type == 1){
+         /* drag circle */
+         var r0 = draggedData.r0;
+         var dR = Beav.Geometry.distance(xMouseGps,yMouseGps,towerData.x,towerData.y) - r0;
+         var maxR = Math.max(Math.abs(towerData.x),Math.abs(towerData.x - w),Math.abs(towerData.y),Math.abs(towerData.y - h));
+         var newR = Math.min(maxR,Math.max(minR,ri + dR));
+         self.towers[id].raphObj[2].attr("r",newR);
+         towerData.r = newR;
+         self.updateDistInfo(id);
+      }else{
+         /* drag center */
+         var newX = towerData.x + dx + x0;
+         var newY = towerData.y + dy + y0;
+         self.towers[id].raphObj.attr({ x: newX, y: newY, cx: newX, cy: newY });
+         self.distInfo[id].line.transform("t"+dx+" "+dy);
+         self.distInfo[id].val.transform("t"+dx+" "+dy);
+      }
+      if(self.timeShiftEnabled){
+         self.updateShiftCircle(id);
+      }
+   };
+   var onEnd = function(ev) {
+      if(!draggedData){
+         return
+      }
+      if(draggedData.type == 0){
+         var id = draggedData.id;
+         var towerData = self.towers[id];
+         var x = self.towers[id].raphObj[0].attr("cx");
+         var y = self.towers[id].raphObj[0].attr("cy");
+         if(x < x0 || x > x0 + w || y < y0 || y > y0 + h){
+            self.deleteTower(id);
+            return
+         }
+         towerData.x = x - x0;
+         towerData.y = y - y0;
+         var maxR = Math.max(Math.abs(towerData.x),Math.abs(towerData.x - w),Math.abs(towerData.y),Math.abs(towerData.y - h));
+         towerData.maxR = maxR;
+         self.distInfo[id].line.remove();
+         self.distInfo[id].val.remove();
+         self.distInfo[id] = null;
+         self.updateDistInfo(id);
+      }
+      if(dragEndCallback){
+         dragEndCallback();
+      }
+   };
+
+   this.deleteTower = function(id) {
+      this.towers[id].raphObj.remove();
+      delete this.towers[id];
+      this.distInfo[id].line.remove();
+      this.distInfo[id].val.remove();
+      delete this.distInfo[id];
+      var index = this.towerID.indexOf(id);
+      this.towerID.splice(index,1);
+   };
+
+   this.updateDistInfo = function(id) {
+      if(this.distInfo[id]){
+         this.distInfo[id].line.remove();
+      }
+      var data = this.towers[id];
+      var cx = data.x;
+      var cy = data.y;
+      var r = data.r;
+      var side = (cx > w/2) ? 0 : 1;
+
+      var x1 = (side) ? x0 + cx + towerR : x0 + cx - towerR;
+      var x2 = (side) ? x0 + cx + data.r : x0 + cx - data.r;
+      var line = paper.path("M"+x1+" "+(cy + y0)+",H"+x2).attr(attr.distLine);
+
+      var xVal = (x2 + x1)/2;
+      var yVal = y0 + cy - 15;
+      if(r < minR + 20){
+         yVal -= 20;
+      }
+      var valText = Math.round(data.r*scale)+" "+unit;
+      if(this.distInfo[id]){
+         this.distInfo[id].line = line;   
+         this.distInfo[id].val.attr({
+            text: valText,
+            x: xVal,
+            y: yVal
+         });   
+      }else{
+         var val = paper.text(xVal,yVal,valText).attr(attr.distVal);
+         this.distInfo[id] = { line: line, val: val };
+      }
+   };
+
+   this.updateShiftCircles = function() {
+      for(var id of this.towerID){
+         this.updateShiftCircle(id);
+      }
+   };
+
+   this.updateShiftCircle = function(id) {
+      var data = this.towers[id];
+      if(data.raphObj[3]){
+         data.raphObj[3].attr("r", Math.max(towerR,data.r + this.timeShift));
+      }
+   };
+   
+   this.init();
+};
\ No newline at end of file
diff --git a/pemFioi/graph-mouse-1.0.js b/pemFioi/graph-mouse-1.0.js
index d90dd694a..210669cf1 100755
--- a/pemFioi/graph-mouse-1.0.js
+++ b/pemFioi/graph-mouse-1.0.js
@@ -157,7 +157,7 @@ function GraphMouse(graphMouseID, graph, visualGraph) {
    };
 
    this.destroy = function() {
-      this.graph.removeListener(graphMouseID);
+      this.graph.removePostListener(graphMouseID);
       this.removeAll();
    };
 
@@ -506,12 +506,14 @@ function EdgeCreator(id, paperElementID, paper, graph, visualGraph, graphMouse,
          }
       }
       else if(id == self.parent) {
+         edgeCreator(self.parent, id);
          self.parent = null;
          if(vertexSelector) {
             vertexSelector(id, false);
          }
       }
       else {
+         // edgeCreator(self.parent, id);
          if(vertexSelector) {
             vertexSelector(self.parent, false);
          }
diff --git a/pemFioi/graph-mouse-1.1.js b/pemFioi/graph-mouse-1.1.js
new file mode 100644
index 000000000..0aff5c1c1
--- /dev/null
+++ b/pemFioi/graph-mouse-1.1.js
@@ -0,0 +1,2958 @@
+function GraphMouse(graphMouseID, graph, visualGraph) {
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.priority = 2000;
+
+   /* ID -> {elementID: ID of vertex or edge,
+   *         eventType: a mouse event type string,
+    *        callbacks: list of functions to call,
+    *        raphaels: list of Raphael objects
+    *        }
+    */
+   this.specificListeners = {};
+
+   /* ID -> {eventType: a mouse event type string,
+    *        callbacks: list of functions to call,
+    *        handleGetter: getter of Raphaels
+    *        }
+    */
+   this.globalVertexListeners = {};
+   this.globalEdgeListeners = {};
+
+   // Vertex or edge ID -> {Specific listener ID 1, Specific listener ID 2, ...}
+   this.elementListeners = {};
+   var self = this;
+
+   this.addEvent = function(listenerID, eventType, elementType, elementID, callbacks, handleGetter) {
+      if(this.globalVertexListeners[listenerID] || this.globalEdgeListeners[listenerID] || this.specificListeners[listenerID]) {
+         return;
+      }
+      if(elementID !== undefined && elementID !== null) {
+         var raphaels = this._addElementEvent(eventType, elementType, elementID, callbacks, handleGetter);
+         this.specificListeners[listenerID] = {
+            elementID: elementID,
+            eventType: eventType,
+            raphaels: raphaels,
+            callbacks: callbacks
+         };
+         if(!this.elementListeners[elementID]) {
+            this.elementListeners[elementID] = {};
+         }
+         this.elementListeners[elementID][listenerID] = true;
+      } else {
+         var listenerInfo = {
+            eventType: eventType,
+            callbacks: callbacks,
+            handleGetter: handleGetter
+         };
+
+         var elementIDs;
+         if(elementType == "vertex") {
+            elementIDs = this.graph.getAllVertices();
+            this.globalVertexListeners[listenerID] = listenerInfo;
+         }
+         else {
+            elementIDs = this.graph.getAllEdges();
+            this.globalEdgeListeners[listenerID] = listenerInfo;
+         }
+         for(var iElementID in elementIDs) {
+            var id = elementIDs[iElementID];
+            this._addElementEvent(eventType, elementType, id, callbacks, handleGetter);
+         }
+      }
+   };
+
+   this._addElementEvent = function(eventType, elementType, elementID, callbacks, handleGetter) {
+      var raphaels = this._getRaphaels(elementType, elementID, handleGetter);
+      for(var iElement in raphaels) {
+         var element = raphaels[iElement];
+         if(Beav.Navigator.isIE8()){
+            switch(eventType){
+               case "click":
+                  element[eventType].apply(element, [function(ev,x,y){
+                     callbacks[0](elementID);
+                  }]);
+                  break;
+               case "drag":
+               default:
+                  element[eventType].apply(element, callbacks);
+            }
+         }else{
+            element[eventType].apply(element, callbacks);
+         }
+      }
+      return raphaels;
+   };
+
+   this.removeEvent = function(listenerID) {
+      if(this.globalVertexListeners[listenerID]) {
+         this._removeGlobalEvent("vertex", listenerID);
+      }
+      else if(this.globalEdgeListeners[listenerID]) {
+         this._removeGlobalEvent("edge", listenerID);
+      }
+      else if(this.specificListeners[listenerID]){
+         this._removeSpecificEvent(listenerID);
+      }
+   };
+
+   this._removeGlobalEvent = function(elementType, listenerID) {
+      var listenerInfo;
+      var elementIDs;
+      if(elementType == "vertex") {
+         listenerInfo = this.globalVertexListeners[listenerID];
+         delete this.globalVertexListeners[listenerID];
+         elementIDs = this.graph.getAllVertices();
+      }
+      else {
+         listenerInfo = this.globalEdgeListeners[listenerID];
+         delete this.globalEdgeListeners[listenerID];
+         elementIDs = this.graph.getAllEdges();
+      }
+      for(var iElementID in elementIDs) {
+         var elementID = elementIDs[iElementID];
+         var raphaels = this._getRaphaels(elementType, elementID, listenerInfo.handleGetter);
+         this._removeElementsEvent(raphaels, listenerInfo.eventType, listenerInfo.callbacks);
+      }
+   };
+
+   this._removeSpecificEvent = function(listenerID) {
+      var elementID = this.specificListeners[listenerID].elementID;
+      var eventType = this.specificListeners[listenerID].eventType;
+      var raphaels = this.specificListeners[listenerID].raphaels;
+      var callbacks = this.specificListeners[listenerID].callbacks;
+      this._removeElementsEvent(raphaels, eventType, callbacks);
+      delete this.specificListeners[listenerID];
+      delete this.elementListeners[elementID][listenerID];
+   };
+
+   this._getRaphaels = function(elementType, elementID, handleGetter) {
+      if(handleGetter) {
+         return handleGetter(elementID);
+      }
+      return this.visualGraph.getRaphaelsFromID(elementID);
+   };
+
+   this._removeElementsEvent = function(elements, eventType, callbacks) {
+      for(var iElement in elements) {
+         var element = elements[iElement];
+         element["un" + eventType].apply(element, callbacks);
+      }
+   };
+
+   this._removeElement = function(id) {
+      if(this.elementListeners[id] === undefined || this.elementListeners[id] === null) {
+         return;
+      }
+      for(var iListenerID in this.elementListeners[id]) {
+         delete this.specificListeners[this.elementListeners[id][iListenerID]];
+      }
+      delete this.elementListeners[id];
+   };
+
+   this.removeAll = function() {
+      var listenerIDs = [];
+      var listenerID;
+      for(listenerID in this.globalVertexListeners) {
+         listenerIDs.push(listenerID);
+      }
+      for(listenerID in this.globalEdgeListeners) {
+         listenerIDs.push(listenerID);
+      }
+      for(listenerID in this.specificListeners) {
+         listenerIDs.push(listenerID);
+      }
+      for(var iListener in listenerID) {
+         this.removeEvent(listenerID[iListener]);
+      }
+   };
+
+   this.destroy = function() {
+      this.graph.removePostListener(graphMouseID);
+      this.removeAll();
+   };
+
+   this.graphListener = {
+      addVertex: function(id) {
+         for(var listenerID in self.globalVertexListeners) {
+            var listenerInfo = self.globalVertexListeners[listenerID];
+            self._addElementEvent(listenerInfo.eventType, "vertex", id, listenerInfo.callbacks, listenerInfo.handleGetter);
+         }
+         return true;
+      },
+      addEdge: function(id) {
+         for(var listenerID in self.globalEdgeListeners) {
+            var listenerInfo = self.globalEdgeListeners[listenerID];
+            self._addElementEvent(listenerInfo.eventType, "edge", id, listenerInfo.callbacks, listenerInfo.handleGetter);
+         }
+         return true;
+      },
+      removeVertex: function(id) {
+         self._removeElement(id);
+         return true;
+      },
+      removeEdge: function(id) {
+         self._removeElement(id);
+         return true;
+      }
+   };
+
+   this.graph.addPostListener(graphMouseID, this.graphListener, this.priority);
+}
+
+function VertexToggler(id, graph, visualGraph, graphMouse, vertexCallback, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.graphMouse = graphMouse;
+   this.enabled = false;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         graphMouse.addEvent(id, "click", "vertex", null, [this.eventHandler]);
+      }
+      else {
+         graphMouse.removeEvent(id);
+      }
+   };
+
+   this.eventHandler = function(elementID) { // param only for IE8
+      var id = (Beav.Navigator.isIE8()) ? elementID : this.data("id");
+      var info = self.graph.getVertexInfo(id);
+      // console.log(id)
+      info.selected = !info.selected;
+      vertexCallback(id, info.selected);
+   };
+
+   this._unselectAll = function() {
+      var elementIDs = graph.getAllVertices();
+      for(var iElementID in elementIDs) {
+         var elementID = elementIDs[iElementID];
+         var info = this.graph.getVertexInfo(elementID);
+         info.selected = false;
+      }
+   };
+
+   this._unselectAll();
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+}
+
+function VertexClicker(id, graph, visualGraph, graphMouse, vertexCallback, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.graphMouse = graphMouse;
+   this.enabled = false;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         graphMouse.addEvent(id, "click", "vertex", null, [this.eventHandler]);
+      }
+      else {
+         graphMouse.removeEvent(id);
+      }
+   };
+
+   this.eventHandler = function() {
+      var id = this.data("id");
+      var info = self.graph.getVertexInfo(id);
+      vertexCallback(id, info);
+   };
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+}
+
+function PaperMouseEvent(paperElementID, paper, jqEvent, callback, enabled,id) {
+   var self = this;
+   this.paper = paper;
+   this.enabled = false;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         $("#" + paperElementID).off(jqEvent);
+         $("#" + paperElementID)[jqEvent](this.clickHandler);
+      }
+      else {
+         $("#" + paperElementID).unbind(jqEvent, this.clickHandler);
+         $("#" + paperElementID).off(jqEvent);
+      }
+   };
+
+   this.clickHandler = function(event) {
+      // var offset = $(self.paper.canvas).offset();
+      var offset = $("#"+paperElementID).offset();
+      var xPos = event.pageX - offset.left;
+      var yPos = event.pageY - offset.top;
+      callback(xPos, yPos, event);
+   };
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+};
+
+function VertexDragger(settings) {
+   var self = this;
+   this.gridEnabled = false;
+   this.gridX = null;
+   this.gridY = null;
+   this.enabled = false;
+   this.occupiedSnapPositions = {};
+   this.vertexToSnapPosition = {};
+   this.stillVertices = settings.stillVertices || [];
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         settings.graphMouse.addEvent(settings.id, "drag", "vertex", null, [this.moveHandler, this.startHandler, this.endHandler], settings.handleGetter);
+      }
+      else {
+         settings.graphMouse.removeEvent(settings.id);
+      }
+   };
+
+   this.setGridEnabled = function(enabled, gridX, gridY) {
+      this.gridEnabled = enabled;
+      if(enabled) {
+         this.gridX = gridX;
+         this.gridY = gridY;
+      }
+   };
+
+   this.startHandler = function(x, y, event) {
+      if(settings.ie8compat) { // Temporary?
+         // Determine which element is being clicked, from the event
+         for(var rid in settings.visualGraph.vertexRaphaels) {
+            var vrs = settings.visualGraph.vertexRaphaels[rid];
+            for(var i = 0; i < vrs.length; i++) {
+               if(vrs[i].node === (event.target || event.srcElement)
+                   || vrs[i].node === (event.target.parentElement || event.target.parentNode || event.srcElement.parentElement || event.srcElement.parentNode)
+               ) {
+                  self.elementID = rid;
+               }
+            }
+         }
+      } else {
+         self.elementID = this.data("id");
+      }
+      if(Beav.Array.has(self.stillVertices,self.elementID)){
+         return
+      }
+      self.originalPosition = settings.visualGraph.graphDrawer.getVertexPosition(self.elementID);
+      settings.visualGraph.elementToFront(self.elementID);
+      if(settings.startCallback) {
+         settings.startCallback(self.elementID);
+      }
+   };
+
+   this.endHandler = function(event) {
+      if(Beav.Array.has(self.stillVertices,self.elementID)){
+         return
+      }
+      if(settings.snapPositions) {
+         self.updateOccupiedSnap();
+      }
+      if (settings.minDistanceBetweenVertices && settings.dragLimits) {
+         self.checkOverlap(self.elementID);
+      }
+      if(settings.callback) {
+         settings.callback(self.elementID);
+      }
+   };
+
+   this.moveHandler = function(dx, dy, x, y, event) {
+      if(Beav.Array.has(self.stillVertices,self.elementID)){
+         return
+      }
+      var newX = self.originalPosition.x + dx;
+      var newY = self.originalPosition.y + dy;
+      if(self.gridEnabled) {
+         newX -= (newX % self.gridX);
+         newY -= (newY % self.gridY);
+      }
+      if(settings.snapPositions) {
+         var position = self.getSnapPosition(newX, newY);
+         if(position !== null) {
+            newX = position.x;
+            newY = position.y;
+         }
+         else {
+            self.freeSnapFromVertex(self.elementID);
+         }
+      }
+      if(settings.dragLimits) {
+         var raphObj = settings.visualGraph.getRaphaelsFromID(self.elementID);
+         var strW = raphObj[0].attr("stroke-width");
+         newX = Math.max(settings.dragLimits.minX + strW/2, Math.min(settings.dragLimits.maxX - strW/2, newX));
+         newY = Math.max(settings.dragLimits.minY + strW/2, Math.min(settings.dragLimits.maxY - strW/2, newY));
+      }
+      settings.visualGraph.graphDrawer.moveVertex(self.elementID, newX, newY);
+   };
+
+   self.freeSnapFromVertex = function(id) {
+      var iPosition = self.vertexToSnapPosition[id];
+      if(iPosition !== null && iPosition !== undefined) {
+         delete self.occupiedSnapPositions[iPosition];
+         delete self.vertexToSnapPosition[id];
+      }
+   };
+
+   self.getSnapPosition = function(x, y) {
+      for(var iPosition in settings.snapPositions) {
+         if(self.occupiedSnapPositions[iPosition]) {
+            continue;
+         }
+         var position = settings.snapPositions[iPosition];
+         if((x - position.x) * (x - position.x) + (y - position.y) * (y - position.y) <= settings.snapThreshold * settings.snapThreshold) {
+            return position;
+         }
+      }
+      return null;
+   };
+
+   self.updateOccupiedSnap = function() {
+      self.occupiedSnapPositions = {};
+      var vertices = settings.visualGraph.graph.getAllVertices();
+      for(var iPosition in settings.snapPositions) {
+         var snapPosition = settings.snapPositions[iPosition];
+         for(var iVertex in vertices) {
+            var vertexPosition = settings.visualGraph.graphDrawer.getVertexPosition(vertices[iVertex]);
+            if(snapPosition.x === vertexPosition.x && snapPosition.y === vertexPosition.y) {
+               self.occupiedSnapPositions[iPosition] = true;
+               self.vertexToSnapPosition[vertices[iVertex]] = iPosition;
+               break;
+            }
+         }
+      }
+   };
+
+   self.checkOverlap = function (id) {
+      var pos = settings.visualGraph.getVertexVisualInfo(id);
+      if(self.overlapOtherVertex(pos.x,pos.y,id)){
+         self.findEmptySpace(id);
+      }
+   };
+
+   self.overlapOtherVertex = function (x,y,id) {
+      var vertices = settings.visualGraph.graph.getAllVertices();
+      for(var iVert = 0; iVert < vertices.length; iVert++) {
+         var vertex = vertices[iVert];
+         if(vertex !== id){
+            var pos = settings.visualGraph.getVertexVisualInfo(vertex);
+            if(Beav.Geometry.distance(x,y,pos.x,pos.y) < settings.minDistanceBetweenVertices){
+               return true;
+            }
+         }
+      }
+      return false;
+   };
+
+   self.findEmptySpace = function (id) {
+      var d = settings.dragLimits.maxX + settings.dragLimits.maxY;
+      var pos = settings.visualGraph.getVertexVisualInfo(id);
+      var newX = 0;
+      var newY = 0;
+      for (var x = settings.dragLimits.minX; x < settings.dragLimits.maxX; x += settings.vertexRadius){
+         for (var y = settings.dragLimits.minY; y < settings.dragLimits.maxY; y += settings.vertexRadius){
+            if (!self.overlapOtherVertex(x,y,id)){
+               var newD = Beav.Geometry.distance(pos.x,pos.y,x,y);
+               if(newD < d){
+                  d = newD;
+                  newX = x;
+                  newY = y;
+               }
+            }
+         }
+      }
+
+      settings.visualGraph.graphDrawer.moveVertex(id, newX, newY);
+   };
+
+   if(settings.enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+   if(settings.snapPositions) {
+      self.updateOccupiedSnap();
+   }
+}
+
+function ElementRemover(id, graph, visualGraph, graphMouse, callback, forVertices, forEdges, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.graphMouse = graphMouse;
+   this.enabled = false;
+   this.forVertices = forVertices;
+   this.forEdges = forEdges;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         if(this.forVertices) {
+            graphMouse.addEvent(id + "$$$vertex", "click", "vertex", null, [this.deleteVertex]);
+         }
+         if(this.forEdges) {
+            graphMouse.addEvent(id + "$$$edge", "click", "edge", null, [this.deleteEdge]);
+         }
+      }
+      else {
+         if(this.forVertices) {
+            graphMouse.removeEvent(id + "$$$vertex");
+         }
+         if(this.forEdges) {
+            graphMouse.removeEvent(id + "$$$edge");
+         }
+      }
+   };
+
+   this.deleteVertex = function() {
+      var id = this.data("id");
+      self.graph.removeVertex(id);
+      if(callback) {
+         callback("vertex", id);
+      }
+   };
+   this.deleteEdge = function() {
+      var id = this.data("id");
+      self.graph.removeEdge(id);
+      if(callback) {
+         callback("edge", id);
+      }
+   };
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+};
+
+function EdgeCreator(id, paperElementID, paper, graph, visualGraph, graphMouse, vertexSelector, edgeCreator, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.graphMouse = graphMouse;
+   this.paperMouse = new PaperMouseEvent(paperElementID, paper, "click", paperEventHandler, enabled);
+   this.enabled = false;
+   this.parent = null;
+   this.selectedNow = false;
+
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         graphMouse.addEvent(id, "click", "vertex", null, [vertexEventHandler]);
+      }
+      else {
+         graphMouse.removeEvent(id);
+      }
+      this.paperMouse.setEnabled(enabled);
+   };
+
+   function vertexEventHandler() {
+      var id = this.data("id");
+      if(self.parent === null) {
+         self.parent = id;
+         if(vertexSelector) {
+            vertexSelector(id, true);
+            self.selectedNow = true;
+         }
+      }
+      else if(id == self.parent) {
+         edgeCreator(self.parent, id);
+         self.parent = null;
+         if(vertexSelector) {
+            vertexSelector(id, false);
+         }
+      }
+      else {
+         // edgeCreator(self.parent, id);
+         if(vertexSelector) {
+            vertexSelector(self.parent, false);
+         }
+         edgeCreator(self.parent, id);
+         self.parent = null;
+      }
+   }
+
+   function paperEventHandler(xPos, yPos, event) {
+      // We are relying on the fact that vertex event happens before the paper event, which seems to be the behavior of all browsers.
+      // Otherwise the vertex would be selected by the first and immediately deselected by the second.
+      if(self.selectedNow || self.parent == null) {
+         self.selectedNow = false;
+         return;
+      }
+      if(vertexSelector) {
+         vertexSelector(self.parent, false);
+      }
+      self.parent = null;
+   }
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+}
+
+function FuzzyClicker(id, paperElementID, paper, graph, visualGraph, callback, forVertices, forEdges, forBackground, vertexThreshold, edgeThreshold, enabled, event) {
+   if(!event){
+      event = "click";
+   }
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.paperMouse = new PaperMouseEvent(paperElementID, paper, event, eventHandler, enabled,id);
+   this.callback = callback;
+   this.enabled = false;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      this.paperMouse.setEnabled(enabled);
+   };
+
+   this.setCallback = function(fct) {
+      this.callback = fct;
+   };
+
+   function eventHandler(xPos, yPos, event) {
+      // console.log(id+" forBG:"+forBackground);
+      // Check if vertex was clicked
+      var vertex = self.getFuzzyVertex(xPos, yPos);
+      if(vertex !== null) {
+         if(forVertices) {
+            self.callback("vertex", vertex, xPos, yPos, event);
+         }
+         // Clicking a vertex cancels any other type, regardless of forVertices flag.
+         return;
+      }
+
+      // Check if edge was clicked.
+      var edge = self.getFuzzyEdge(xPos, yPos);
+      // console.log(id+" forEdges:"+forEdges+" edge:"+edge);
+      if(edge !== null) {
+         if(forEdges) {
+            self.callback("edge", edge, xPos, yPos, event);
+         }
+         // Clicking an edge cancels the click on the background, regardless of forEdges.
+         return;
+      }
+
+      var edge2 = self.getFuzzyEdgeLabel(xPos, yPos);
+      // console.log(id+" forEdges:"+forEdges+" edgeLabel:"+edge2);
+      if(edge2 !== null) {
+         if(forEdges) {
+            self.callback("edgeLabel", edge2, xPos, yPos, event);
+         }
+         // Clicking an edge cancels the click on the background, regardless of forEdges.
+         return;
+      }
+
+      // console.log(id+" forBackground:"+forBackground);
+      // Background was clicked.
+      if(forBackground) {
+         self.callback(null, null, xPos, yPos, event);
+      }
+   }
+   
+   this.getFuzzyVertex = function(xPos, yPos) {
+      // Look for closest vertex.
+      // console.log(self.id);
+      var vertex = null;
+      var minDistance = Infinity;
+      this.graph.forEachVertex(function(id) {
+         var distance = visualGraph.graphDrawer.getDistanceFromVertex(id, xPos, yPos);
+         // console.log(distance+" "+id)
+         if(distance <= vertexThreshold && distance < minDistance) {
+            vertex = id;
+            minDistance = distance;
+            // console.log(id);
+         }
+      });
+      return vertex;
+   };
+   
+   this.getFuzzyEdge = function(xPos, yPos) {
+      // Look for closest edge.
+      var edge = null;
+      var minDistance = Infinity;
+      this.graph.forEachEdge(function(id) {
+         var distance = visualGraph.graphDrawer.getDistanceFromEdge(id, xPos, yPos);
+         if(distance <= edgeThreshold && distance < minDistance) {
+            edge = id;
+            minDistance = distance;
+         }
+      });
+      return edge;
+   };
+
+   this.getFuzzyEdgeLabel = function(xPos, yPos) {
+      // Look for closest edge.
+      var edge = null;
+      this.graph.forEachEdge(function(id) {
+         var onLabel = visualGraph.graphDrawer.isOnEdgeLabel(id,xPos,yPos);
+         if(onLabel) {
+            edge = id;
+         }
+      });
+      return edge;
+   };
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+}
+
+function FuzzyRemover(id, paperElementID, paper, graph, visualGraph, callback, forVertices, forEdges, vertexThreshold, edgeThreshold, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.enabled = false;
+   this.fuzzyClicker = new FuzzyClicker(id + "$$$fuzzyclicker", paperElementID, paper, graph, visualGraph, deleteElement, forVertices, forEdges, false, vertexThreshold, edgeThreshold, enabled);
+   this.forVertices = forVertices;
+   this.forEdges = forEdges;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      this.fuzzyClicker.setEnabled(enabled);
+   };
+
+   function deleteElement(elementType, id, xPos, yPos) {
+      if(elementType == "vertex") {
+         self.graph.removeVertex(id);
+      }
+      else {
+         self.graph.removeEdge(id);
+      }
+      if(callback) {
+         callback(elementType, id, xPos, yPos);
+      }
+   }
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+};
+
+function VertexCreator(settings) {
+   var self = this;
+   this.id = settings.id || "VertexCreator";
+   this.paperElementID = settings.paperElementID;
+   this.paper = settings.paper;
+   this.graph = settings.graph;
+   this.visualGraph = settings.visualGraph;
+   this.createVertex = settings.createVertex;
+   this.forVertices = true;
+   this.forEdges = true;
+   this.vertexThreshold = settings.vertexThreshold || 0;
+   this.edgeThreshold = settings.edgeThreshold || 10;
+   this.enabled = false;
+
+   this.fuzzyDblClicker = new FuzzyClicker(this.id + "_fuzzyDblClicker", this.paperElementID, this.paper, this.graph, this.visualGraph, eventHandler, 
+      this.forVertices, this.forEdges, true, this.vertexThreshold, this.edgeThreshold, false, "dblclick")
+
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+
+      this.fuzzyDblClicker.setEnabled(enabled);
+   };
+
+   this.setCreateVertex = function(fct) {
+      this.createVertex = fct;
+   }; 
+
+   function eventHandler(elementType,elementID,x,y) {
+      if(elementType === null){
+         self.createVertex(x,y);
+      }
+   };
+
+
+   if(settings.enabled) {
+      this.setEnabled(true);
+   } else {
+      this.enabled = false;
+   }
+};
+
+function VertexDragAndConnect(settings) {
+   var self = this;
+   var id = settings.id || "VertexDragAndConnect";
+   var paper = settings.paper;
+   var graph = settings.graph;
+   this.visualGraph = settings.visualGraph;
+   var graphMouse = settings.graphMouse;
+   this.dragThreshold = settings.dragThreshold || 0;
+   this.vertexThreshold = settings.vertexThreshold || 0;
+   this.dragLimits = settings.dragLimits;
+   this.onVertexSelect = settings.onVertexSelect;
+   this.onPairSelect = settings.onPairSelect;
+   this.onEdgeSelect = settings.onEdgeSelect;
+   this.onDragEnd = settings.onDragEnd;
+   this.unselectAllEdges;
+   this.startDragCallback = settings.startDragCallback;
+   this.moveDragCallback = settings.moveDragCallback;
+   this.clickHandlerCallback = settings.clickHandlerCallback;
+   this.fuzzyClickCallback = settings.fuzzyClickCallback;
+
+   this.gridEnabled = false;
+   this.gridX = null;
+   this.gridY = null;
+   
+   this.enabled = false;
+   this.dragEnabled = false;
+   this.vertexSelectEnabled = false;
+   this.allowDeselection = true;   // to deal with graph editorcontent validation
+   this.clickThroughDrag = settings.clickThroughDrag;
+
+   this.occupiedSnapPositions = {};
+   this.vertexToSnapPosition = {};
+   this.isGoodPosition = settings.isGoodPosition;
+   this.snapToLastGoodPosition = settings.snapToLastGoodPosition;
+
+   this.enabled = false;
+   this.selectionParent = null;
+   if(Beav.Navigator.isIE8()){
+      this.fuzzyClicker = new FuzzyClicker(id + "$$$fuzzyclicker", settings.paperElementID, paper, graph, this.visualGraph, onFuzzyClick, true, true, true, 
+      this.vertexThreshold, settings.edgeThreshold, false);
+   }else{
+      this.fuzzyClicker = new FuzzyClicker(id + "$$$fuzzyclicker", settings.paperElementID, paper, graph, this.visualGraph, onFuzzyClick, true, true, true, 
+      this.vertexThreshold, settings.edgeThreshold, false);
+   }
+   
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+
+      this.setDragEnabled(enabled);
+      this.fuzzyClicker.setEnabled(enabled);
+      this.setVertexSelectEnabled(enabled);
+   };
+
+   this.setGridEnabled = function(enabled, gridX, gridY) {
+      this.gridEnabled = enabled;
+      if(enabled) {
+         this.gridX = gridX;
+         this.gridY = gridY;
+      }
+   };
+
+   this.setDragEnabled = function(enabled) {
+      if(enabled){
+         this.enableDrag();
+      }else{
+         this.disableDrag();
+      }
+      this.dragEnabled = enabled;
+   };
+
+   this.setVertexSelectEnabled = function(enabled) {
+      this.vertexSelectEnabled = enabled;
+   };
+
+   this.disableDrag = function() {
+      graphMouse.removeEvent(id + "$$$dragAndConnect");
+      self.isDragging = false;
+   };
+
+   this.enableDrag = function() {
+      graphMouse.addEvent(id + "$$$dragAndConnect", "drag", "vertex", null, [self.moveHandler, self.startHandler, self.endHandler]);
+   };
+
+   this.enableVertexDrag = function(vertexId) {
+      graphMouse.removeEvent(id + "_" + vertexId + "$$$dragAndConnect");
+      graphMouse.addEvent(id + "_" + vertexId + "$$$dragAndConnect", "drag", "vertex", vertexId, [self.moveHandler, self.startHandler, self.endHandler]);
+   };
+
+   this.disableVertexDrag = function(vertexId) {
+      graphMouse.removeEvent(id + "_" + vertexId + "$$$dragAndConnect");
+   };
+
+   function onFuzzyClick(elementType, id) {
+      // console.log("onFuzzyClick",elementType,id)
+      if(elementType === "edge") {
+         if(self.selectionParent !== null) {
+            self.onVertexSelect(self.selectionParent, false);
+         }
+         self.selectionParent = null;
+         if(self.onEdgeSelect) {
+            self.onEdgeSelect(id);
+         }
+      }else if(elementType === "edgeLabel"){
+         return;
+      }else{
+         self.clickHandler(id);
+      }
+      if(self.fuzzyClickCallback){
+         // console.log("fuzzyClickCB")
+         self.fuzzyClickCallback();
+      }
+   }
+
+   this.startHandler = function(x, y, event) { 
+      if(self.unselectAllEdges){
+         self.unselectAllEdges();
+      }
+      self.elementID = this.data("id");
+      self.originalPosition = self.visualGraph.graphDrawer.getVertexPosition(self.elementID);
+      self.lastGoodPosition = self.visualGraph.graphDrawer.getVertexPosition(self.elementID);
+      self.isDragging = false;
+      self.visualGraph.elementToFront(self.elementID);
+      if(self.startDragCallback){
+         // console.log("startDragCallback")
+         self.startDragCallback(self.elementID,x,y);
+      }
+   };
+
+   this.endHandler = function(event) {
+      if(self.isDragging) {
+         var isSnappedToGoodPosition = false;
+
+         if(self.snapToLastGoodPosition) {
+            var position = self.visualGraph.graphDrawer.getVertexPosition(self.elementID);
+            if(!self.isGoodPosition(self.elementID, position)) {
+               self.visualGraph.graphDrawer.moveVertex(self.elementID, self.lastGoodPosition.x, self.lastGoodPosition.y);
+               isSnappedToGoodPosition = true;
+            }
+         }
+         if(self.onDragEnd) {
+            self.onDragEnd(self.elementID, isSnappedToGoodPosition);
+         }
+         // self.isDragging = false;
+         return;
+      }
+      if(self.clickThroughDrag){
+         self.clickHandler(self.elementID,event.pageX,event.pageY);
+      }
+   };
+
+   this.moveHandler = function(dx, dy, x, y, event) {
+      if(dx * dx + dy * dy <= self.dragThreshold * self.dragThreshold){
+         return;
+      }
+      if(self.selectionParent !== null && self.allowDeselection) {
+         self.onVertexSelect(self.selectionParent, false);
+      }
+      self.selectionParent = null;
+      if(!self.isDragging) {
+         self.isDragging = true;
+      }
+      if(!self.isDragging) {
+         return;
+      }
+      if(!self.dragEnabled)
+         return;
+
+      var newX = self.originalPosition.x + dx;
+      var newY = self.originalPosition.y + dy;
+      if(self.gridEnabled) {
+         newX -= (newX % self.gridX);
+         newY -= (newY % self.gridY);
+      }
+      if(self.dragLimits) {
+         newX = Math.min(self.dragLimits.maxX, Math.max(newX, self.dragLimits.minX));
+         newY = Math.min(self.dragLimits.maxY, Math.max(newY, self.dragLimits.minY));
+      }
+      if(self.snapToLastGoodPosition) {
+         var position = {
+            x: newX,
+            y: newY
+         };
+         if(self.isGoodPosition(self.elementID, position)) {
+            self.lastGoodPosition = position;
+         }
+      }
+
+      self.visualGraph.graphDrawer.moveVertex(self.elementID, newX, newY);
+
+      if(self.moveDragCallback){
+         self.moveDragCallback(self.elementID);
+      }
+   };
+
+   this.clickHandler = function(id,x,y) {
+      if(self.unselectAllEdges){
+         self.unselectAllEdges();
+      }
+      if(self.isDragging){
+         self.isDragging = false;
+         return
+      }
+      if(self.vertexSelectEnabled && self.allowDeselection) {
+         // Click on background or on the selected vertex -  deselect it.
+         if(id === null || id === self.selectionParent){
+            if(self.selectionParent !== null && self.onVertexSelect) {
+               self.onVertexSelect(self.selectionParent, false,x,y);
+            }
+            self.selectionParent = null;
+            return;
+         }
+         
+         // Start a new pair.
+         if(self.selectionParent === null && self.onVertexSelect) {
+            self.selectionParent = id;
+            self.onVertexSelect(id, true,x,y);
+            return;
+         }
+         
+         // Finish a new pair.
+         if(self.onPairSelect) {
+            self.onPairSelect(self.selectionParent, id, x, y);
+         }
+         if(self.onVertexSelect){
+            self.onVertexSelect(self.selectionParent, false, x,y);
+         }
+         self.selectionParent = null;
+         if(self.clickHandlerCallback){
+            self.clickHandlerCallback(id,x,y);
+         }
+      }
+   };
+
+   this.setOnVertexSelect = function(fct) {
+      this.onVertexSelect = fct;
+   };
+   this.setOnPairSelect = function(fct) {
+      this.onPairSelect = fct;
+   };
+   this.setOnEdgeSelect = function(fct) {
+      this.onEdgeSelect = fct;
+   };
+   this.setUnselectAllEdges = function(fct) {
+      this.unselectAllEdges = fct;
+   };
+   this.setStartDragCallback = function(fct) {
+      this.startDragCallback = fct;
+   };
+   this.setClickHandlerCallback = function(fct) {
+      this.clickHandlerCallback = fct;
+   };
+   this.setIsGoodPosition = function(fct) {
+      this.isGoodPosition = fct;
+   };
+
+   if(settings.enabled) {
+      this.setEnabled(true);
+   } else {
+      this.enabled = false;
+   }
+};
+
+function ArcDragger(settings) {
+   var self = this;
+   this.id = settings.id || "ArcDragger";
+   this.paper = settings.paper;
+   this.paperElementID = settings.paperElementID;
+   this.graph = settings.graph;
+   this.visualGraph = settings.visualGraph;
+   this.graphMouse = settings.graphMouse;
+   this.onEdgeSelect = settings.onEdgeSelect;
+   this.editEdgeLabel = settings.editEdgeLabel;
+   this.elementID = null;
+   this.startAngle = 0;
+   this.loop = false;
+   this.originalPosition = null;
+   this.edgeVertices = [];
+   this.edgeVerticesPos = [];
+   this.distance = null;
+   this.callback = settings.callback;
+   this.startDragCallback = settings.startDragCallback;
+   this.isDragging = false;
+   this.isOnLabel = false;
+   this.vertexThreshold = settings.vertexThreshold || 0;
+   this.edgeThreshold = settings.edgeThreshold || 10;
+
+   this.enabled = false;
+   this.dragEnabled = false;
+   this.unselectAll;
+
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         this.enableEdgesDrag();
+      }
+      else {
+         this.disableEdgesDrag();
+      }
+   };
+
+   this.setOnEdgeSelect = function(fct) {
+      this.onEdgeSelect = fct;
+   };
+   this.setEditEdgeLabel = function(fct) {
+      this.editEdgeLabel= fct;
+   };
+   this.setUnselectAll = function(fct) {
+      this.unselectAll= fct;
+   };
+
+   this.enableEdgesDrag = function() {
+      this.graphMouse.addEvent(this.id, "drag", "edge", null, [this.moveHandler, this.startHandler, this.endHandler]);
+      this.dragEnabled = true;
+   };
+
+   this.disableEdgesDrag = function() {
+      this.graphMouse.removeEvent(this.id);
+      this.dragEnabled = false;
+   };
+
+   this.startHandler = function(x, y, event) {
+      self.isDragging = false;
+      if(self.elementID !== this.data("id")){
+         self.unselectAll();
+         self.elementID = this.data("id");
+      }
+
+      self.startAngle = self.visualGraph.getEdgeVisualInfo(self.elementID).angle || 0;
+
+      self.edgeVertices = self.graph.getEdgeVertices(self.elementID);
+      for(var iVertex = 0; iVertex < self.edgeVertices.length; iVertex++){
+         self.edgeVerticesPos[iVertex] = self.visualGraph.getVertexVisualInfo(self.edgeVertices[iVertex]);         
+      }
+      self.loop = (self.edgeVertices[0] === self.edgeVertices[1]) ? true : false;
+
+      var paperPos = $(self.paper.canvas).offset();
+      
+      self.originalPosition = {x: (x - paperPos.left), y: (y - paperPos.top)};
+      self.isOnLabel = self.visualGraph.graphDrawer.isOnEdgeLabel(this.data("id"),self.originalPosition.x,self.originalPosition.y);
+      self.distance = Math.sqrt(Math.pow((self.edgeVerticesPos[0].x - self.edgeVerticesPos[1].x),2) + Math.pow((self.edgeVerticesPos[0].y - self.edgeVerticesPos[1].y),2));
+      if(self.startDragCallback){
+         self.startDragCallback(self.elementID);
+      }
+   };
+
+   this.endHandler = function(event) {
+      if(self.isDragging) {
+         self.isDragging = false;
+         if(settings.callback) {
+            settings.callback();
+         }
+         return;
+      }
+      var paperPos = $("#"+self.paperElementID).position();
+      var xMouse = event.pageX - paperPos.left;
+      var yMouse = event.pageY - paperPos.top;
+      if(self.isOnLabel){
+         if(self.editEdgeLabel){
+            self.editEdgeLabel(self.elementID,"edge");
+         }     
+         self.isOnLabel = false;
+      }else if(self.onEdgeSelect){
+
+         var info = self.graph.getEdgeInfo(self.elementID);
+         info.selected = !info.selected;
+         self.onEdgeSelect(self.elementID,info.selected);
+         if(!info.selected){
+            self.elementID = null;
+         }
+      }
+   };
+
+   this.moveHandler = function(dx, dy, x, y, event) {
+      if(!self.dragEnabled || self.isOnLabel || (dx == 0 && dy == 0)){
+         return;
+      }
+      self.isDragging = true;
+      var x0 = self.originalPosition.x;
+      var y0 = self.originalPosition.y;
+      var xMouse = x0 + dx;
+      var yMouse = y0 + dy;
+      var vInfo = self.visualGraph.getEdgeVisualInfo(self.elementID);
+      if(self.loop){
+         vInfo["radius-ratio"] = 1.5;
+         if(x0 === self.edgeVerticesPos[0].x){
+            var angle1 = (y0 < self.edgeVerticesPos[0].y) ? -90 : 90;
+         }else if(x0 > self.edgeVerticesPos[0].x){
+            var angle1 = Math.atan((y0 - self.edgeVerticesPos[0].y)/(x0 - self.edgeVerticesPos[0].x))*180/Math.PI;
+         }else{
+            var angle1 = Math.atan((y0 - self.edgeVerticesPos[0].y)/(x0 - self.edgeVerticesPos[0].x))*180/Math.PI + 180;
+         }
+         if(xMouse === self.edgeVerticesPos[0].x){
+            var angle2 = (yMouse < self.edgeVerticesPos[0].y) ? -90 : 90;
+         }else if(xMouse > self.edgeVerticesPos[0].x){
+            var angle2 = Math.atan((yMouse - self.edgeVerticesPos[0].y)/(xMouse - self.edgeVerticesPos[0].x))*180/Math.PI;
+         }else{
+            var angle2 = Math.atan((yMouse - self.edgeVerticesPos[0].y)/(xMouse - self.edgeVerticesPos[0].x))*180/Math.PI + 180;
+         }
+
+         var deltaAngle = (angle2 - angle1);
+         vInfo["angle"] = (self.startAngle - deltaAngle)%360;
+      }else{
+         var circleParameters = self.getCircleParameters(self.edgeVerticesPos[0].x,self.edgeVerticesPos[0].y,self.edgeVerticesPos[1].x,self.edgeVerticesPos[1].y,xMouse,yMouse);
+         if(circleParameters){
+            var radius = circleParameters.r;
+            var radiusRatio = radius /self.distance; 
+            vInfo["sweep"] = self.getSide(xMouse,yMouse,self.edgeVerticesPos);
+            if(self.getSide(circleParameters.xc,circleParameters.yc,self.edgeVerticesPos)){
+               vInfo["large-arc"] = (vInfo["sweep"]) ? 1 : 0;
+            }else{
+               vInfo["large-arc"] = (vInfo["sweep"]) ? 0 : 1;
+            }
+            if(radiusRatio > 5 && !vInfo["large-arc"])
+                  radiusRatio = 0;
+            vInfo["radius-ratio"] = Math.round(radiusRatio*100)/100;
+            if(vInfo["radius-ratio"] == 0){
+               delete vInfo["radius-ratio"];
+               delete vInfo["sweep"];
+               delete vInfo["large-arc"];
+            }
+         }
+      }
+      self.visualGraph.setEdgeVisualInfo(vInfo);
+      self.visualGraph.graphDrawer.refreshEdgePosition(self.edgeVertices[0],self.edgeVertices[1]);
+      if(self.unselectAll){
+         self.unselectAll();
+      }
+   };
+
+   this.getCircleParameters = function(x1,y1,x2,y2,x3,y3) {
+      if(y1 !== y3 && y2 !== y3){
+         var a1 = (x3 - x1)/(y1 - y3);
+         var a2 = (x3 - x2)/(y2 - y3);
+         if(a1 == a2)
+            return {r:0,xc:0,yc:0};
+         var b1 = (y1 + y3 - a1*(x1 + x3))/2;
+         var b2 = (y2 + y3 - a2*(x2 + x3))/2;
+         var xc = (b2 - b1)/(a1 - a2);
+         var yc = a1*xc + b1;
+
+         var r = Math.sqrt(Math.pow((xc - x1),2) + Math.pow((yc - y1),2));
+         return {r:r,xc:xc,yc:yc};
+      }
+   };
+
+   this.getSide = function(xMouse,yMouse,vertexPos) {
+      var x1 = vertexPos[0].x;
+      var x2 = vertexPos[1].x;
+      var y1 = vertexPos[0].y;
+      var y2 = vertexPos[1].y;
+      var side = (x1 < x2) ? 1 : 0;
+      if(x1 === x2) {
+         if(xMouse > x1){
+            side = (y1 > y2) ? 0 : 1;
+         }else{
+            side = (y1 > y2) ? 1 : 0;
+         }
+      }else if(y1 === y2){
+         if(yMouse > y1){
+            side = (x1 < x2) ? 0 : 1;
+         }else{
+            side = (x1 < x2) ? 1 : 0;
+         }
+      }else{
+         var a = (y2 - y1)/(x2 - x1);
+         var b = (y1 + y2 - a*(x1 + x2))/2;
+         if(yMouse > (a*xMouse + b)){
+            side = (x1 < x2) ? 0 : 1;
+         }
+      }
+      return side;
+   };
+
+   this.setStartDragCallback = function(fct) {
+      this.startDragCallback = fct;
+   };
+
+   if(settings.enabled) {
+      this.setEnabled(true);
+   }
+};
+
+function GraphDragger(settings) {
+   var self = this;
+   this.id = settings.id || "GraphDragger";
+   this.paper = settings.paper;
+   this.paperElementID = settings.paperElementID;
+   this.graph = settings.graph;
+   this.visualGraph = settings.visualGraph;
+
+   this.enabled = false;
+   this.dragEnabled = false;
+   this.scaleEnabled = false;
+   this.gridEnabled = false;
+
+   this.gridX = null;
+   this.gridY = null;
+   this.gridAlignment = {};
+   this.gridAlignmentRefIndex = null;
+
+   this.mouseInitPos = null;
+   this.vertInitPos = null;
+   this.isShiftPressed = false;
+   this.callback = settings.callback;
+   this.moveDragCallback = null;
+   this.unselectAllEdges = null;
+
+   this.dragMove = new PaperMouseEvent(this.paperElementID, this.paper, "mousemove", onDragMove, false);
+   this.dragEnd = new PaperMouseEvent(this.paperElementID, this.paper, "mouseup", onDragEnd, false);
+   this.fuzzyClicker = new FuzzyClicker(this.id + "$$$fuzzyclicker", this.paperElementID, this.paper, this.graph, this.visualGraph, 
+      onFuzzyClick, false, false, true, 0, settings.edgeThreshold, false, "mousedown");
+
+   this.setEnabled = function(enabled){
+      if(enabled == this.enabled) {
+         return;
+      }
+      if(enabled){
+         $(window).keydown(function(event){
+            if(event.which == 16){
+               if(!self.isShiftPressed){
+                  self.isShiftPressed = true;
+               }
+            }
+         });
+         $(window).keyup(function(event){
+            if(event.which == 16){
+               if(self.isShiftPressed){
+                  self.isShiftPressed = false;
+               }
+            }
+         });
+      }else{
+         $(window).off("keydown");
+         $(window).off("keyup");
+      }
+      this.dragEnabled = enabled;
+      this.scaleEnabled = enabled;
+      this.enabled = enabled;
+      this.fuzzyClicker.setEnabled(enabled);
+   };
+
+   this.setGridEnabled = function(enabled, gridX, gridY) {
+      this.gridEnabled = enabled;
+      if(enabled) {
+         this.gridX = gridX;
+         this.gridY = gridY;
+      }
+   };
+
+   this.setMoveDragCallback = function(fct) {
+      this.moveDragCallback = fct;
+   };
+   this.setUnselectAllEdges = function(fct) {
+      this.unselectAllEdges = fct;
+   };
+
+   function onFuzzyClick(elementType, id, x, y, event){
+      if(self.unselectAllEdges){
+         self.unselectAllEdges();
+      }
+      self.onDragStart(x,y,event);
+   }
+   this.onDragStart = function(x,y,event){
+      self.mouseInitPos = {x:x,y:y};
+      self.dragMove.setEnabled(true);
+      self.dragEnd.setEnabled(true);
+      var vertices = self.graph.getAllVertices();
+      self.vertInitPos = $.map(vertices, function(id) {
+         return {
+            id: id,
+            position: self.visualGraph.graphDrawer.getVertexPosition(id)
+         };
+      });
+      if(self.gridEnabled){
+         for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+            var vertex = vertices[iVertex];
+            var pos = self.visualGraph.graphDrawer.getVertexPosition(vertex);
+            var index = pos.x % self.gridX + ";" + pos.y % self.gridY;
+            var maxLength = 0;
+            if(!self.gridAlignment[index]){
+               self.gridAlignment[index] = [vertex];
+            }else{
+               self.gridAlignment[index].push(vertex);
+            }
+            if(self.gridAlignment[index].length > maxLength){
+               maxLength = self.gridAlignment[index].length;
+               self.gridAlignmentRefIndex = index;
+            }
+         }
+      }
+   };
+   function onDragMove(x,y,event){
+      if(self.isShiftPressed && self.scaleEnabled){
+         var ratioX = x / self.mouseInitPos.x;
+         var ratioY = y / self.mouseInitPos.y;
+         $.each(self.vertInitPos, function(index, element) {
+            self.visualGraph.graphDrawer.moveVertex(element.id, Math.round(element.position.x*ratioX), Math.round(element.position.y*ratioY));
+         });
+      }else if(self.dragEnabled){
+         var dx = x - self.mouseInitPos.x;
+         var dy = y - self.mouseInitPos.y;
+         if(self.gridEnabled){
+            for(var iVert = 0; iVert < self.vertInitPos.length; iVert++){
+               var vertPos = self.vertInitPos[iVert];
+               if($.inArray(vertPos.id,self.gridAlignment[self.gridAlignmentRefIndex]) >= 0){
+                  var newX = (vertPos.position.x + dx) - (vertPos.position.x + dx) % self.gridX;
+                  var newY = (vertPos.position.y + dy) - (vertPos.position.y + dy) % self.gridY;
+                  dx = newX - vertPos.position.x;
+                  dy = newY - vertPos.position.y;
+               }
+            }
+         }
+         $.each(self.vertInitPos, function(index, element) {
+            self.visualGraph.graphDrawer.moveVertex(element.id, element.position.x + dx, element.position.y + dy);
+         });
+
+         if(self.moveDragCallback){
+            self.moveDragCallback();
+         }
+      }
+   }
+   function onDragEnd(x,y,event){
+      self.dragMove.setEnabled(false);
+      self.dragEnd.setEnabled(false);
+      self.gridAlignment = {};
+      self.gridAlignmentRefIndex = null;
+      if(self.callback && x != self.mouseInitPos.x && y != self.mouseInitPos.y){
+         self.callback();
+      }
+   };
+   
+   if(settings.enabled) {
+      this.setEnabled(true);
+   }
+};
+
+function GraphEditor(settings) {
+   var self = this;
+   var paper = settings.paper;
+   var paperId = settings.paperElementID;
+   var graph = settings.graph;
+   var visualGraph = settings.visualGraph;
+   var onVertexSelect = settings.onVertexSelect;   // optional
+   var onEdgeSelect = settings.onEdgeSelect;    // optional
+   this.createVertex = settings.createVertex;   // optional
+   var startDragCallbackCallback = settings.startDragCallbackCallback; // optional
+   
+   var callback = settings.callback;
+   var selectVertexCallback = settings.selectVertexCallback;
+   this.contentValidation = settings.contentValidation;
+   this.vertexLabelValidation = settings.vertexLabelValidation;
+   this.writeContentCallback = settings.writeContentCallback;
+   this.resizeTableVertexCallback = settings.resizeTableVertexCallback;
+   // this.updateHandlersCallback = settings.updateHandlersCallback;
+
+   var defaultSelectedVertexAttr = {
+      "stroke": "blue",
+      "stroke-width": 4
+   };
+   var defaultSelectedEdgeAttr = {
+      "stroke": "blue",
+      "stroke-width": 6
+   };
+   var defaultVertexlabelAttr = {
+      "font-size": 15,
+      "font-family": "sans-serif"
+   };
+   var iconAttr = {
+      "stroke": "none",
+      "fill": "blue"
+   };
+   var overlayAttr = {
+      opacity: 0,
+      fill: "red",
+      "cursor": "pointer"
+   };
+   var vertexLabelAttr = settings.vertexLabelAttr || defaultVertexlabelAttr;
+   var edgeLabelAttr = settings.edgeLabelAttr || visualGraph.graphDrawer.edgeLabelAttr;
+   var selectedVertexAttr = settings.selectedVertexAttr || defaultSelectedVertexAttr;
+   var selectedEdgeAttr = settings.selectedEdgeAttr || defaultSelectedEdgeAttr;
+   this.alphabet = settings.alphabet;
+   if(!settings.vertexLabelPrefix && settings.vertexLabelPrefix != ""){
+      this.vertexLabelPrefix = "v_";
+   }else{
+      this.vertexLabelPrefix = settings.vertexLabelPrefix;
+   }
+   this.loopIcon = null;
+   this.cross = null;
+   this.edgeCross = null;
+   this.terminalIcon = null;
+   this.initialIcon = null;
+
+   this.textEditor = null;
+   this.editInfo = {};
+   this.edited = false; // true when label or content has just been modified
+   this.selectedEdges = [];
+   this.maxEdgeLabelLength = settings.maxEdgeLabelLength;
+
+   this.vertexDragAndConnect = new VertexDragAndConnect(settings);
+   this.arcDragger = new ArcDragger({
+      paper: settings.paper,
+      paperElementID: settings.paperElementID,
+      graph: graph,
+      visualGraph: visualGraph,  
+      graphMouse: settings.graphMouse,
+      onEdgeSelect: onEdgeSelect,
+      callback: settings.callback,
+      enabled: false
+   });
+   this.vertexCreator = new VertexCreator({
+      paper: settings.paper,
+      paperElementID: settings.paperElementID,
+      graph: graph,
+      visualGraph: visualGraph,  
+      createVertex: this.createVertex,
+      edgeThreshold: settings.edgeThreshold,
+      enabled: false
+   });
+   this.graphDragger = new GraphDragger({
+      paper: settings.paper,
+      paperElementID: settings.paperElementID,
+      graph: graph,
+      visualGraph: visualGraph,  
+      edgeThreshold: settings.edgeThreshold,
+      callback: settings.callback,
+      enabled: false
+   });
+
+   this.tableMode = false;
+   this.localTableMode = false;
+   this.gridEnabled = false;
+   this.removeVertexEnabled = false;
+   this.createEdgeEnabled = false;
+   this.removeEdgeEnabled = false;
+   this.vertexDragEnabled = false;
+   this.edgeDragEnabled = false;
+   this.graphDragEnabled = false;
+   this.multipleEdgesEnabled = false;
+   this.backwardEdgesEnabled = false;
+   this.loopEnabled = false;
+   this.editVertexLabelEnabled = false;
+   this.editVertexContentEnabled = false;
+   this.editEdgeLabelEnabled = false;
+   this.vertexSelectEnabled = false;
+   this.terminalEnabled = false;
+   this.initialEnabled = false;
+   this.defaultVertexLabelEnabled = false;
+   this.defaultEdgeLabelEnabled = false;
+   this.allowMutlipleTerminal = true;
+   this.allowMutlipleInitial = true;
+   this.allowSimultaneousInitialAndTerminal = true;
+   this.enabled = false;
+
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      self.vertexDragAndConnect.setEnabled(enabled);
+      self.arcDragger.setEnabled(enabled);
+      self.graphDragger.setEnabled(enabled);
+
+      this.setGraphDragEnabled(enabled);
+      this.setCreateVertexEnabled(enabled);
+      this.setCreateEdgeEnabled(enabled);
+      this.setVertexDragEnabled(enabled);
+      this.setEdgeDragEnabled(enabled);
+      this.setMultipleEdgesEnabled(enabled);
+      this.setBackwardEdgesEnabled(enabled);
+      this.setEditVertexLabelEnabled(enabled);
+      this.setEditVertexContentEnabled(enabled);
+      this.setEditEdgeLabelEnabled(enabled);
+      this.setLoopEnabled(enabled);
+      this.setVertexSelectEnabled(enabled);
+      this.setTerminalEnabled(enabled);
+      this.setInitialEnabled(enabled);
+      this.setDefaultVertexLabelEnabled(enabled);  
+      this.setDefaultEdgeLabelEnabled(enabled);     
+   };
+
+   this.setCreateVertexEnabled = function(enabled) {
+      this.vertexCreator.setEnabled(enabled);
+      this.removeVertexEnabled = enabled;
+      this.checkVertexSelect();
+   };
+   this.setCreateEdgeEnabled = function(enabled) {
+      this.createEdgeEnabled = enabled;
+      this.removeEdgeEnabled = enabled;
+      this.checkVertexSelect();
+   };
+   this.setVertexDragEnabled = function(enabled) {
+      this.vertexDragAndConnect.dragEnabled = enabled;
+      this.vertexDragEnabled = enabled;
+   };
+   this.setEdgeDragEnabled = function(enabled) {
+      this.edgeDragEnabled = enabled;
+      this.arcDragger.dragEnabled = enabled;
+   };
+   this.setGraphDragEnabled = function(enabled) {
+      this.graphDragEnabled = enabled;
+      this.graphDragger.dragEnabled = enabled;
+      this.checkGraphDrag();
+   };
+   this.setScaleGraphEnabled = function(enabled) {
+      this.graphDragger.scaleEnabled = enabled;
+      this.checkGraphDrag();
+   };
+   this.setMultipleEdgesEnabled = function(enabled) {
+      this.multipleEdgesEnabled = enabled;
+   };
+   this.setBackwardEdgesEnabled = function(enabled) {
+      this.backwardEdgesEnabled = enabled;
+   };
+   this.setLoopEnabled = function(enabled) {
+      this.loopEnabled = enabled;
+   };
+   this.setEditVertexLabelEnabled = function(enabled) {
+      this.editVertexLabelEnabled = enabled;
+   };
+   this.setEditVertexContentEnabled = function(enabled) {
+      this.editVertexContentEnabled = enabled;
+   };
+   this.setEditEdgeLabelEnabled = function(enabled) {
+      this.editEdgeLabelEnabled = enabled;
+   };
+   this.setGridEnabled = function(enabled,gridX,gridY) {
+      this.gridEnabled = {snapToGrid:enabled,gridX:gridX,gridY:gridY};
+      this.vertexDragAndConnect.setGridEnabled(enabled,gridX,gridY);
+      this.graphDragger.setGridEnabled(enabled,gridX,gridY);
+   };
+   this.setTerminalEnabled = function(enabled) {
+      this.terminalEnabled = enabled;
+      this.checkVertexSelect();
+   };
+   this.setInitialEnabled = function(enabled) {
+      this.initialEnabled = enabled;
+      this.checkVertexSelect();
+   };
+   this.setVertexSelectEnabled = function(enabled) {
+      this.vertexSelectEnabled = enabled;
+      this.vertexDragAndConnect.setVertexSelectEnabled(enabled);
+   };
+   this.setDefaultVertexLabelEnabled = function(enabled) {
+      this.defaultVertexLabelEnabled = enabled;
+   };
+   this.setDefaultEdgeLabelEnabled = function(enabled) {
+      this.defaultEdgeLabelEnabled = enabled;
+   };
+   this.setTableMode = function(enabled) {
+      this.tableMode = enabled;
+      var vertices = graph.getAllVertices();
+      for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+         var vertex = vertices[iVertex];
+         var vInfo = visualGraph.getVertexVisualInfo(vertex);
+         if(enabled){
+            vInfo.tableMode = enabled;
+         }else{
+            delete vInfo.tableMode;
+         }
+      }
+      visualGraph.redraw();
+      this.updateHandlers();
+   };
+   this.setLocalTableMode = function(enabled) {
+      this.localTableMode = enabled;
+   };
+   this.setIconAttr = function(attr){
+      iconAttr = attr;
+   };
+   this.setAllowMultipleTerminal = function(enabled) {
+      this.allowMutlipleTerminal = enabled;
+   };
+   this.setAllowMultipleInitial = function(enabled) {
+      this.allowMutlipleInitial = enabled;
+   };
+   this.setAllowSimultaneousInitialAndTerminal = function(enabled) {
+      this.allowSimultaneousInitialAndTerminal = enabled;
+   };
+
+
+   this.checkVertexSelect = function() {
+      if(!this.terminalEnabled && !this.initialEnabled && !this.removeVertexEnabled && !this.createEdgeEnabled && !this.vertexSelectEnabled){
+         this.setVertexSelectEnabled(false);
+      }else{
+         this.setVertexSelectEnabled(true);
+      }
+   };
+   this.checkGraphDrag = function() {
+      if(!this.graphDragger.dragEnabled && !this.graphDragger.scaleEnabled){
+         this.graphDragger.setEnabled(false);
+      }else{
+         this.graphDragger.setEnabled(true);
+      }
+   };
+
+   this.defaultOnVertexSelect = function(vertexId,selected,x,y) {
+      var attr;
+      // console.log(vertexId+" select "+selected);
+      if(selected) {
+         self.edited = false;
+         attr = selectedVertexAttr;
+         self.addIcons(vertexId);
+         var vInfo = visualGraph.getVertexVisualInfo(vertexId);
+         if(!vInfo.tableMode){
+            self.editLabel(vertexId,"vertex");
+         }else{
+            /* table mode */
+            var offset = $(paper.canvas).offset();
+            var xPos = x - offset.left;
+            var yPos = y - offset.top;
+            var info = graph.getVertexInfo(vertexId);
+            var content = (info.content) ? info.content : "";
+            var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+            if(yPos < (vInfo.y - boxSize.h/2 + 2*visualGraph.graphDrawer.vertexLabelAttr["font-size"])){
+               self.editLabel(vertexId,"vertex");
+            }else{
+               self.editContent(vertexId);
+            }
+         }
+      }else{
+         attr = visualGraph.graphDrawer.circleAttr;
+         self.removeIcons(vertexId);
+      }
+      if(visualGraph.getRaphaelsFromID(vertexId)[0]){
+         visualGraph.getRaphaelsFromID(vertexId)[0].attr(attr);
+      }   
+      if(selectVertexCallback){
+         selectVertexCallback(vertexId,selected);
+      }
+   };
+
+   this.defaultOnPairSelect = function(id1,id2,x,y) {
+      // console.log("pair "+id1+" "+id2);
+      if(!self.createEdgeEnabled){
+         return
+      }
+      self.startDragCallback(id1);
+      if(self.edited)
+         return;
+      
+      if(!self.multipleEdgesEnabled){
+         if(!self.backwardEdgesEnabled){
+            var previousEdges = graph.getEdgesBetween(id1,id2);
+         }else{
+            var previousEdges = graph.getEdgesFrom(id1,id2);
+         }
+         if(previousEdges.length > 1){
+            return;
+         }else if(previousEdges.length == 1){
+            return;
+         }
+      }
+      
+      var edgeGuid = 0;
+      while(graph.isEdge("e_" + edgeGuid)) {
+         edgeGuid++;
+      }
+      var edgeID = "e_" + edgeGuid;
+      var edgeLabel = (self.alphabet) ? self.alphabet[0] : edgeID;
+      if(self.defaultEdgeLabelEnabled){
+         graph.addEdge(edgeID, id1, id2,{label:edgeLabel});
+      }else{
+         graph.addEdge(edgeID, id1, id2);
+      }
+      self.setNewEdgeVisualInfo(edgeID,id1,id2);
+      if(callback){
+         callback();
+      }
+   };
+
+   this.clickHandlerCallback = function(id,x,y) {
+      if(!self.createEdgeEnabled){
+         /* if edge creation is disabled, change selected vertex in a single click */ 
+         self.vertexDragAndConnect.onVertexSelect(id,true,x,y);
+         self.vertexDragAndConnect.selectionParent = id;
+      }
+   };
+
+   this.defaultOnEdgeSelect = function(edgeID,selected) {
+      var edge = visualGraph.getRaphaelsFromID(edgeID);
+      if(!self.removeEdgeEnabled){
+         if(!selected){
+            $(document).off("keydown");
+            edge[0].attr(visualGraph.graphDrawer.lineAttr);
+            if(self.edgeCross)
+               self.edgeCross.remove();
+         }
+         return;
+      }
+
+      if(selected){
+         self.selectedEdges.push(edgeID);
+         edge[0].attr(selectedEdgeAttr);
+
+         self.addEdgeCross(edgeID);
+         var info = graph.getEdgeInfo(edgeID);
+         if(!info.label || info.label.length == 0){
+            self.editLabel(edgeID,"edge");
+         }
+         $(document).keydown(function(event){
+            if(event.which == 46){  // if press delete
+               if(self.textEditor){
+                  self.textEditor.remove();
+                  self.editInfo = {};
+               }
+               graph.removeEdge(edgeID);
+               if(callback){
+                  callback();
+               }
+            }
+         });
+      }else{
+         self.selectedEdges = [];
+         $(document).off("keydown");
+         edge[0].attr(visualGraph.graphDrawer.lineAttr);
+         if(self.edgeCross)
+            self.edgeCross.remove();
+      }
+   };
+
+   this.unselectAllEdges = function() {
+      for(var iEdge = 0; iEdge < self.selectedEdges.length; iEdge++){
+         var edge = self.selectedEdges[iEdge];
+         if(!graph.isEdge(edge)){
+            continue
+         }
+         var info = graph.getEdgeInfo(edge);
+         if(info.selected){
+            info.selected = false;
+         }
+         self.arcDragger.onEdgeSelect(edge,false);
+      }
+   };
+
+   this.defaultCreateVertex = function(x,y) {
+      var vertexGuid = 0;
+      while(graph.isVertex("v_" + vertexGuid)) {
+         vertexGuid++;
+      }
+      var vertexId = "v_" + vertexGuid;
+      var vData = {x: Math.round(x), y: Math.round(y)};
+      if(self.localTableMode || self.tableMode){
+         /* don't show table mode if false */
+         vData.tableMode = true;
+      }
+      visualGraph.setVertexVisualInfo(vertexId, vData);
+      if(self.defaultVertexLabelEnabled){
+         var label = self.getDefaultLabel();
+         graph.addVertex(vertexId,{label:label});
+      }else{
+         graph.addVertex(vertexId);
+      }
+      if(callback){
+         callback();
+      }
+   };
+
+   this.getDefaultLabel = function() {
+      var vertices = graph.getAllVertices();
+      var index = 0;
+      do{
+         var alreadyExist = false;
+         for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+            var vertex = vertices[iVertex];
+            var info = graph.getVertexInfo(vertex);
+            var label = this.vertexLabelPrefix + index;
+            if(info.label == label){
+               alreadyExist = true;
+               index++;
+               break;
+            }
+         }
+      }while(alreadyExist)
+      return label;
+   };
+
+   this.setNewEdgeVisualInfo = function(edgeID,id1,id2) {
+      var edges = graph.getEdgesBetween(id1,id2);
+      // console.log(edges)
+      if(id1 === id2){
+         if(edges.length <= 1)
+            return;
+         var angle = 0;
+         var validAngle;
+         var increment = 20;
+         var nTry = 0;
+         do{
+            validAngle = true;
+            if(nTry >= 360/increment){
+               increment /= 2;
+               nTry = 0;
+            }
+            for(var iEdge = 0; iEdge < edges.length; iEdge++){
+               if(edges[iEdge] !== edgeID){
+                  var vInfo = visualGraph.getEdgeVisualInfo(edges[iEdge]);
+                  if(vInfo.angle < angle + increment/2 && vInfo.angle > angle - increment/2){
+                     angle = (angle + increment)%360;
+                     validAngle = false;
+                     nTry++;
+                     break;
+                  }
+               }
+            }
+         }while(!validAngle);
+         visualGraph.setEdgeVisualInfo(edgeID,{angle:angle});
+      }else{
+         var edgesFrom = graph.getEdgesFrom(id1,id2);
+         var validParameters;
+         var parameterSet = [
+            {"sweep":0,"large-arc":0,"radius-ratio":0},
+            {"sweep":0,"large-arc":0,"radius-ratio":1},
+            {"sweep":1,"large-arc":0,"radius-ratio":1},
+            {"sweep":0,"large-arc":0,"radius-ratio":0.75},
+            {"sweep":1,"large-arc":0,"radius-ratio":0.75},
+            {"sweep":0,"large-arc":0,"radius-ratio":0.6},
+            {"sweep":1,"large-arc":0,"radius-ratio":0.6},
+            {"sweep":0,"large-arc":0,"radius-ratio":0.55},
+            {"sweep":1,"large-arc":0,"radius-ratio":0.55},
+            {"sweep":0,"large-arc":0,"radius-ratio":0.51},
+            {"sweep":1,"large-arc":0,"radius-ratio":0.51},
+            {"sweep":0,"large-arc":1,"radius-ratio":0.51},
+            {"sweep":1,"large-arc":1,"radius-ratio":0.51},
+            {"sweep":0,"large-arc":1,"radius-ratio":0.55},
+            {"sweep":1,"large-arc":1,"radius-ratio":0.55},
+            {"sweep":0,"large-arc":1,"radius-ratio":0.6},
+            {"sweep":1,"large-arc":1,"radius-ratio":0.6},
+            {"sweep":0,"large-arc":1,"radius-ratio":0.75},
+            {"sweep":1,"large-arc":1,"radius-ratio":0.75},
+            {"sweep":0,"large-arc":1,"radius-ratio":1},
+            {"sweep":1,"large-arc":1,"radius-ratio":1}
+         ];
+         var nTry = 0;
+         do{
+            validParameters = true;
+            if(nTry === parameterSet.length - 1){
+               nTry = 0;
+               break;
+            }
+            for(var iEdge = 0; iEdge < edges.length; iEdge++){
+               if(edges[iEdge] !== edgeID){
+                  var isFrom = edgesFrom.includes(edges[iEdge]);
+                  var vInfo = visualGraph.getEdgeVisualInfo(edges[iEdge]);
+                  if(!vInfo["radius-ratio"]){
+                     vInfo["radius-ratio"] = 0;
+                     vInfo["sweep"] = (isFrom) ? 0 : 1;
+                     vInfo["large-arc"] = 0;
+                  }
+                  if(vInfo["radius-ratio"] === parameterSet[nTry]["radius-ratio"] && 
+                     (vInfo["sweep"] === parameterSet[nTry]["sweep"] && isFrom || vInfo["sweep"] !== parameterSet[nTry]["sweep"] && !isFrom) && 
+                     vInfo["large-arc"] === parameterSet[nTry]["large-arc"]){
+                     validParameters = false;
+                     nTry++;
+                     break;
+                  }
+               }
+            }
+            if(nTry == 0){
+               var neighbors1 = graph.getNeighbors(id1);
+               var neighbors2 = graph.getNeighbors(id2);
+               var neighbors = neighbors1.concat(neighbors2);
+               for(var neighbor of neighbors){
+                  if(neighbor != id1 && neighbor != id2 && areAligned(id1,id2,neighbor)){
+                     var edges1 = graph.getEdgesBetween(id1,neighbor);
+                     var edges2 = graph.getEdgesBetween(id2,neighbor);
+                     var edges3 = edges1.concat(edges2);
+                     for(var iEdge = 0; iEdge < edges3.length; iEdge++){
+                        var edge = edges3[iEdge];
+                        var vInfo = visualGraph.getEdgeVisualInfo(edge);
+                        if(!vInfo["radius-ratio"]){
+                           validParameters = false;
+                           nTry++;
+                        }
+                     }
+                  }
+               }
+            }
+         }while(!validParameters);
+         // console.log(parameterSet[nTry])
+         visualGraph.setEdgeVisualInfo(edgeID,parameterSet[nTry]);
+      }
+      for(var edge of edges){
+         var vInfo = visualGraph.getEdgeVisualInfo(edge);
+         if(!vInfo["radius-ratio"]){
+            vInfo = {};
+            visualGraph.setEdgeVisualInfo(edge,vInfo);
+         }
+      }
+      visualGraph.graphDrawer.refreshEdgePosition(id1,id2);
+   };
+
+   function areAligned(id1,id2,id3){
+      var vInfo1 = visualGraph.getVertexVisualInfo(id1); 
+      var vInfo2 = visualGraph.getVertexVisualInfo(id2); 
+      var vInfo3 = visualGraph.getVertexVisualInfo(id3);
+      if(vInfo1.x != vInfo2.x){
+         var a = (vInfo2.y - vInfo1.y)/(vInfo2.x - vInfo1.x);
+         var b = vInfo1.y - a*vInfo1.x;     
+         if(vInfo3.y < (a * vInfo3.x + b + 5) && vInfo3.y > (a * vInfo3.x + b - 5)){
+            return true;
+         }else{
+            return false;
+         }
+      }else{
+         if(vInfo3.x < (vInfo1.x + 5) && vInfo3.x > (vInfo1.x - 5)){
+            return true;
+         }else{
+            return false;
+         }
+      }
+   };
+
+   /* ICONS  */
+
+   this.addIcons = function(vertexId) {
+      if(this.createEdgeEnabled && this.loopEnabled)
+         this.addLoopIcon(vertexId);
+      if(this.removeVertexEnabled)
+         this.addCross(vertexId);
+      if(this.terminalEnabled){
+         if(this.allowMutlipleTerminal){
+            this.addTerminalIcon(vertexId);
+         }else{
+            var terminal = this.getInitialOrTerminal(vertexId,"terminal");
+            if(terminal == null || terminal == vertexId){
+               if(this.allowSimultaneousInitialAndTerminal){
+                  this.addTerminalIcon(vertexId);
+               }else{
+                  var info = graph.getVertexInfo(vertexId);
+                  if(!info.initial){
+                     this.addTerminalIcon(vertexId);
+                  }
+               }
+            }
+         }
+      }
+      if(this.initialEnabled){
+         // if(this.allowMutlipleInitial){
+         //    this.addInitialIcon(vertexId);
+         // }else{
+         //    var initial = this.getInitialOrTerminal(vertexId,"initial");
+         //    if(initial == null || initial == vertexId){
+               if(this.allowSimultaneousInitialAndTerminal){
+                  this.addInitialIcon(vertexId);
+               }else{
+                  var info = graph.getVertexInfo(vertexId);
+                  if(!info.terminal){
+                     this.addInitialIcon(vertexId);
+                  }
+               }
+            // }
+         // }
+      }
+   };
+   this.removeIcons = function(id) {
+      // console.log("removeIcons")
+      var raphObj = visualGraph.getRaphaelsFromID(id);
+      if(self.loopIcon){
+         // console.log("remove loop");
+         self.loopIcon.remove();
+         self.loopIcon = null;
+         raphObj.pop();
+      }
+      if(self.cross){
+         // console.log("remove cross "+id);
+         self.cross.remove();
+         self.cross = null;
+         raphObj.pop();
+      }
+      if(self.terminalIcon){
+         // console.log("remove terminal "+id);
+         self.terminalIcon.remove();
+         self.terminalIcon = null;
+         raphObj.pop();
+      }
+      if(self.initialIcon){
+         // console.log("remove initial");
+         self.initialIcon.remove();
+         self.initialIcon = null;
+         raphObj.pop();
+      }
+   };
+
+   this.getInitialOrTerminal = function(vID,state) {
+      var vertices = graph.getAllVertices();
+      var isState = null;
+      for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+         var vertex = vertices[iVertex];
+         var info = graph.getVertexInfo(vertex);
+         if(info[state]){
+            isState = vertex;
+            break;
+         }
+      }
+      return isState;
+   };
+
+   this.addLoopIcon = function(vertexId) {
+      var vertexPos = visualGraph.getVertexVisualInfo(vertexId);
+      var vertexRadius = visualGraph.graphDrawer.circleAttr.r;
+      var size = 20;
+
+      if(!vertexPos.tableMode){
+         var X = vertexPos.x - vertexRadius - size;
+         var Y = vertexPos.y - vertexRadius - 3*size/4;
+      }else{
+         var info = graph.getVertexInfo(vertexId);
+         var content = (info.content) ? info.content : "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+         var X = vertexPos.x - boxSize.w/2 - size;
+         var Y = vertexPos.y - boxSize.h/2 - 3*size/4;
+      }
+      
+      if(self.loopIcon){
+         self.loopIcon.remove();
+      }
+      self.loopIcon = self.drawLoopIcon(X,Y,size);
+      visualGraph.pushVertexRaphael(vertexId,self.loopIcon);
+      
+      self.loopIcon.mousedown(function(){
+         self.vertexDragAndConnect.onPairSelect(vertexId,vertexId);
+      });
+   };
+
+   this.drawLoopIcon = function(x,y,size) {
+      var qSize = size/4;
+      var icon = paper.path(
+         "M" + (x + 2*qSize) + "," + y +
+         "A" + size/2 + "," + size/2 + "," + 0 + "," + 1 + "," + 0 + "," + (x + 2*qSize + 0.1) + "," + (y)
+         ).attr({"stroke":iconAttr.fill,"stroke-width":size/5,"arrow-end":"classic-medium-short"});
+      var overlay = paper.rect(x,y,size,size).attr(overlayAttr);
+      return paper.set(icon,overlay);
+   };
+
+   this.addCross = function(vertexId) {
+      var vertexPos = visualGraph.getVertexVisualInfo(vertexId);
+      var vertexRadius = visualGraph.graphDrawer.circleAttr.r;
+      var crossSize = 20;
+      if(!vertexPos.tableMode){
+         var crossX = vertexPos.x + vertexRadius;
+         var crossY = vertexPos.y - vertexRadius - 3*crossSize/4;
+      }else{
+         var info = graph.getVertexInfo(vertexId);
+         var content = (info.content) ? info.content : "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+         var crossX = vertexPos.x + boxSize.w/2;
+         var crossY = vertexPos.y - boxSize.h/2 - 3*crossSize/4;
+      }
+      if(self.cross){
+         self.cross.remove();
+      }
+      self.cross = self.drawCross(crossX,crossY,crossSize);
+      visualGraph.pushVertexRaphael(vertexId,self.cross);
+      
+      self.cross.mousedown(function(){
+         self.removeIcons(vertexId);
+         if(self.vertexDragAndConnect){
+            self.vertexDragAndConnect.selectionParent = null;
+         }
+         graph.removeVertex(vertexId);
+         if(self.textEditor){
+            self.textEditor.remove();
+            self.editInfo = {};
+         }
+         if(callback){
+            callback();
+         }
+      });
+   };
+
+   this.addEdgeCross = function(edgeID) {
+      var crossSize = 20;
+      var crossPos = self.getCrossPosition(edgeID,crossSize);
+      var crossX = crossPos.x;
+      var crossY = crossPos.y;
+      if(self.edgeCross){
+         self.edgeCross.remove();
+      }
+      self.edgeCross = self.drawCross(crossX,crossY,crossSize);
+      visualGraph.pushEdgeRaphael(edgeID,self.edgeCross);
+      
+      self.edgeCross.click(function(){
+         graph.removeEdge(edgeID);
+         if(callback){
+            callback();
+         }
+      });
+   };
+
+   this.drawCross = function(x,y,size) {
+      var qSize = size/4;
+      var icon = paper.path(
+         "M" + (x + qSize) + "," + y +
+         "L" + (x + size/2) + "," + (y + qSize) +
+         "L" + (x + 3*qSize) + "," + y +
+         "L" + (x + size) + "," + (y + qSize) + 
+         "L" + (x + 3*qSize) + "," + (y + size/2) +
+         "L" + (x + size) + "," + (y + 3*qSize) +
+         "L" + (x + 3*qSize) + "," + (y + size) +
+         "L" + (x + size/2) + "," + (y + 3*qSize) +
+         "L" + (x + qSize) + "," + (y + size) +
+         "L" + x + "," + (y + 3*qSize) +
+         "L" + (x + qSize) + "," + (y + size/2) +
+         "L" + x + "," + (y + qSize) + 
+         "Z" 
+         ).attr(iconAttr);
+      var overlay = paper.rect(x,y,size,size).attr(overlayAttr);
+      return paper.set(icon,overlay);
+   };
+
+   this.addTerminalIcon = function(vertexId) {
+      // console.log("add Terminal")
+      var vertexPos = visualGraph.getVertexVisualInfo(vertexId);
+      var vertexRadius = visualGraph.graphDrawer.circleAttr.r;
+      var size = 20;
+
+      if(!vertexPos.tableMode){
+         var X = vertexPos.x + vertexRadius;
+         var Y = vertexPos.y + vertexRadius;
+      }else{
+         var info = graph.getVertexInfo(vertexId);
+         var content = (info.content) ? info.content : "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+         var X = vertexPos.x + boxSize.w/2;
+         var Y = vertexPos.y + boxSize.h/2;
+      }
+      
+      if(self.terminalIcon){
+         self.terminalIcon.remove();
+      }
+      self.terminalIcon = self.drawTerminalIcon(X,Y,size);
+      visualGraph.pushVertexRaphael(vertexId,self.terminalIcon);
+      
+      self.terminalIcon.mousedown(function() {
+         self.removeIcons(vertexId);
+         self.setTerminal(vertexId);
+      });
+   };
+
+   this.setTerminal = function(vID) {
+      var info = graph.getVertexInfo(vID);
+      info.terminal = !info.terminal;
+      
+      graph.setVertexInfo(vID,info);
+      visualGraph.redraw();
+      self.updateHandlers();
+      
+      if(callback){
+         callback();
+      }
+   };
+
+   this.drawTerminalIcon = function(x,y,size) {
+      var qSize = size/4;
+      var attr = {
+         fill: "none",
+         stroke: iconAttr.fill,
+         "stroke-width": size/6
+      }
+      var circle1 = paper.circle(x + size/2,y + size/2,size/4).attr(attr);
+      var circle2 = paper.circle(x + size/2,y + size/2,size/2).attr(attr);
+
+      var overlay = paper.rect(x,y,size,size).attr(overlayAttr);
+      return paper.set(circle1,circle2,overlay);
+   };
+
+   this.addInitialIcon = function(vertexId) {
+      var vertexPos = visualGraph.getVertexVisualInfo(vertexId);
+      var vertexRadius = visualGraph.graphDrawer.circleAttr.r;
+      var size = 20;
+
+      if(!vertexPos.tableMode){
+         var X = vertexPos.x - vertexRadius - size;
+         var Y = vertexPos.y + vertexRadius;
+      }else{
+         var info = graph.getVertexInfo(vertexId);
+         var content = (info.content) ? info.content : "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+         var X = vertexPos.x - boxSize.w/2 - size;
+         var Y = vertexPos.y + boxSize.h/2;
+      }
+
+      
+      if(self.initialIcon){
+         self.initialIcon.remove();
+      }
+      self.initialIcon = self.drawInitialIcon(X,Y,size);
+      visualGraph.pushVertexRaphael(vertexId,self.initialIcon);
+      
+      self.initialIcon.mousedown(function(){
+         self.removeIcons(vertexId);
+         self.setInitial(vertexId);
+      });
+   };
+
+   this.setInitial = function(vID) {
+      var info = graph.getVertexInfo(vID);
+      info.initial = !info.initial;      
+      graph.setVertexInfo(vID,info);
+
+      if(!self.allowMutlipleInitial){
+         var vertices = graph.getAllVertices();
+         for(var vertex of vertices){
+            if(vertex != vID){
+               var currInfo = graph.getVertexInfo(vertex);
+               if(currInfo.initial){
+                  currInfo.initial = false;      
+                  graph.setVertexInfo(vertex,currInfo);
+               }
+            }
+         }
+      }
+      visualGraph.redraw();
+      self.updateHandlers();
+      
+      if(callback){
+         callback();
+      }
+   };
+
+   this.drawInitialIcon = function(x,y,size) {
+      var qSize = size/4;
+      var icon = paper.path(
+         "M" + (x + size) + "," + y +
+         "V" + (y + size/2) +
+         "L" + (x + 7*qSize/2) + "," + (y + 3*qSize/2) +
+         "L" + (x + qSize) + "," + (y + size) +
+         "L" + x + "," + (y + 3*qSize) + 
+         "L" + (x + 5*qSize/2) + "," + (y + qSize/2) + 
+         "L" + (x + size/2) + "," + y + 
+         "Z"
+         ).attr(iconAttr);
+      var overlay = paper.rect(x,y,size,size).attr(overlayAttr);
+      return paper.set(icon,overlay);
+   };
+
+   this.getCrossPosition = function(edgeID,crossSize) {
+      var edgeVertices = graph.getEdgeVertices(edgeID);
+      vertex1 = edgeVertices[0];
+      vertex2 = edgeVertices[1];
+      var info = graph.getEdgeInfo(edgeID);
+      var vInfo = visualGraph.getEdgeVisualInfo(edgeID);
+      var vertex1Pos = visualGraph.getVertexVisualInfo(vertex1);
+      var vertex2Pos = visualGraph.getVertexVisualInfo(vertex2);
+      var x1 = vertex1Pos.x;
+      var y1 = vertex1Pos.y;
+      var x2 = vertex2Pos.x;
+      var y2 = vertex2Pos.y;
+
+      var margin = 10;
+      var angle;
+      if(x1 === x2){
+         if(y1 > y2){
+            angle = Math.PI/2;
+         }else{
+            angle = -Math.PI/2;
+         }
+      }else{
+         angle = Math.atan((y2 - y1)/(x2 - x1));
+      }
+      if(vInfo["radius-ratio"] || vertex1 ===  vertex2){ // if curved edge
+         if(!vertex2Pos.tableMode){
+            if(vertex1 === vertex2){
+               angle = vInfo.angle*Math.PI/180 || 0;
+               var R = visualGraph.graphDrawer.circleAttr.r*vInfo["radius-ratio"];
+               var xm = x1 + 2*R*Math.cos(angle);
+               var ym = y1 - 2*R*Math.sin(angle);
+               var x = xm + (crossSize)*Math.sin(angle - Math.PI/2) - crossSize/2;
+               var y = ym - (crossSize)*Math.cos(angle + Math.PI/2) - crossSize/2;
+            }else{
+               var D = Math.sqrt(Math.pow((x2-x1),2) + Math.pow((y2-y1),2));
+               var R = D*vInfo["radius-ratio"];
+               var s = vInfo["sweep"] || 0;
+               var l = vInfo["large-arc"] || 0;
+               var cPos = visualGraph.graphDrawer.getCenterPosition(R,s,l,vertex1Pos,vertex2Pos);
+               if(x2 > x1){
+                  var xm = (s) ? cPos.x + R*Math.sin(angle) : cPos.x - R*Math.sin(angle);
+                  var ym = (s) ? cPos.y - R*Math.cos(angle) : cPos.y + R*Math.cos(angle);
+               }else{
+                  var xm = (s) ? cPos.x - R*Math.sin(angle) : cPos.x + R*Math.sin(angle);
+                  var ym = (s) ? cPos.y + R*Math.cos(angle) : cPos.y - R*Math.cos(angle);
+               }
+               
+               if(x1 < x2){
+                  var x = (s) ? xm - (crossSize/2)*Math.sin(angle) - crossSize/2 : xm + (crossSize/2)*Math.sin(angle) - crossSize/2;
+                  var y = (s) ? ym + (crossSize/2 + margin)*Math.cos(angle) - crossSize/2 : ym - (crossSize/2 + margin)*Math.cos(angle) - crossSize/2;
+               }else{
+                  var x = (s) ? xm + (crossSize/2)*Math.sin(angle) - crossSize/2 : xm - (crossSize/2)*Math.sin(angle) - crossSize/2;
+                  var y = (s) ? ym - (crossSize/2 + margin)*Math.cos(angle) - crossSize/2 : ym + (crossSize/2 + margin)*Math.cos(angle) - crossSize/2;
+               }
+            }
+         }else{
+            /* table mode */
+            var info1 = graph.getVertexInfo(vertex1);
+            var content = (info1.content) ? info1.content : "";
+            var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+            
+            if(vertex1 === vertex2){
+               /* loop */
+               angle = vInfo.angle*Math.PI/180 || 0;
+               angle = visualGraph.graphDrawer.bindAngle(angle);
+               var R = visualGraph.graphDrawer.circleAttr.r*vInfo["radius-ratio"];
+               
+               var beta = Math.atan(boxSize.h/boxSize.w);   // angle between center of vertex and corner of box
+               var surfPos = visualGraph.graphDrawer.getSurfacePointFromAngle(vertex1Pos.x,vertex1Pos.y,boxSize.w,boxSize.h,Math.PI - angle);
+               if(angle <= beta && angle > -beta){
+                  /* right side */
+                  var xm = surfPos.x + R*3/2;
+                  var ym = surfPos.y;
+                  var x = xm - crossSize*1.2;
+                  var y = ym - crossSize/2;
+               }else if(angle <= Math.PI + beta && angle > Math.PI - beta){
+                  /* left side */
+                  var xm = surfPos.x - R*3/2;
+                  var ym = surfPos.y;
+                  var x = xm + crossSize/2;
+                  var y = ym - crossSize/2;
+               }else if(angle > beta && angle <= Math.PI - beta){
+                  /* top */
+                  var xm = surfPos.x;
+                  var ym = surfPos.y - R*3/2;
+                  var x = xm - crossSize/2;
+                  var y = ym + crossSize/2;
+               }else if(angle > Math.PI + beta || angle <= - beta){
+                  /* bottom */
+                  var xm = surfPos.x;
+                  var ym = surfPos.y + R*3/2;
+                  var x = xm - crossSize/2;
+                  var y = ym - crossSize*1.2;
+               }
+            }else{
+               var angle = visualGraph.graphDrawer.getAngleBetween(x1,y1,x2,y2);
+               var s = vInfo["sweep"] || 0;
+               var l = vInfo["large-arc"] || 0;
+               var D = Math.sqrt(Math.pow((x2-x1),2) + Math.pow((y2-y1),2));
+               var R = D*vInfo["radius-ratio"];
+               if(vertex2Pos.tableMode){
+                  var info = graph.getVertexInfo(vertex2);
+                  var content = (info.content) ? info.content : "";
+                  var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+                  
+                  var alpha = (l) ? (Math.asin(D/(2*R)) + Math.PI) : Math.asin(D/(2*R));  
+                  var angle2 = angle;
+                  
+                  if(vertex1Pos.tableMode){
+                     if(s){
+                        var alpha1 = (l) ? -angle2 - alpha : alpha - angle2;
+                     }else{
+                        var alpha1 = (l) ? alpha - angle2 : -angle2 - alpha;
+                     }
+                     var info1 = graph.getVertexInfo(vertex1);
+                     var content1 = (info1.content) ? info1.content : "";
+                     var boxSize1 = visualGraph.graphDrawer.getBoxSize(content1);
+                     var delta = Math.PI - alpha1;
+                     var pos1 = visualGraph.graphDrawer.getSurfacePointFromAngle(x1,y1,boxSize1.w,boxSize1.h,delta);
+                  }else{
+                     var pos1 = { x: x1, y: y1 };
+                  }
+                  if(s){
+                     angle2 = (l) ? angle2 - alpha : angle2 + alpha;
+                  }else{
+                     angle2 = (l) ? angle2 + alpha : angle2 - alpha;
+                  }
+
+                  var pos2 = visualGraph.graphDrawer.getSurfacePointFromAngle(x2,y2,boxSize.w,boxSize.h,angle2);
+
+                  var D2 = Math.sqrt(Math.pow((pos2.x-pos1.x),2) + Math.pow((pos2.y-pos1.y),2));
+                  var R = D2*vInfo["radius-ratio"];
+                  var cPos = visualGraph.graphDrawer.getCenterPosition(R,s,l,pos1,pos2);
+               }else{
+                  var cPos = visualGraph.graphDrawer.getCenterPosition(R,s,l,vertex1Pos,vertex2Pos);
+               }
+               if(vInfo["radius-ratio"] == 0.5){
+                  R += 10;
+               }
+               var xm = (s) ? cPos.x + R*Math.sin(angle) : cPos.x - R*Math.sin(angle);
+               var ym = (s) ? cPos.y - R*Math.cos(angle) : cPos.y + R*Math.cos(angle);
+               
+               var x = (s) ? xm - (crossSize/2)*Math.sin(angle) - crossSize/2 : xm + (crossSize/2)*Math.sin(angle) - crossSize/2;
+               var y = (s) ? ym + (crossSize/2 + margin)*Math.cos(angle) - crossSize/2 : ym - (crossSize/2 + margin)*Math.cos(angle) - crossSize/2;
+            }
+         }
+      }else{
+         var xm = (x2 + x1)/2;
+         var ym = (y2 + y1)/2;
+         var x = xm - crossSize/2;
+         var y = ym - crossSize/2;
+         if(x1 < x2){
+            var x = xm - (crossSize/2)*Math.sin(angle) - crossSize/2;
+            var y = ym + (crossSize/2)*Math.cos(angle) - crossSize/2;
+         }else{
+            var x = xm + (crossSize/2)*Math.sin(angle) - crossSize/2;
+            var y = ym - (crossSize/2)*Math.cos(angle) - crossSize/2;
+         }
+      }
+      return {x:x,y:y};
+   };
+
+   this.updateHandlers = function() {
+      this.vertexDragAndConnect.setEnabled(false);
+      this.arcDragger.setEnabled(false);
+      settings.graphMouse = new GraphMouse("mouse", graph, visualGraph);
+      this.vertexDragAndConnect = new VertexDragAndConnect(settings);
+      this.vertexDragAndConnect.setEnabled(true);
+      this.arcDragger = new ArcDragger({
+         paper: paper,
+         paperElementID: settings.paperElementID,
+         graph: graph,
+         visualGraph: visualGraph,  
+         graphMouse: settings.graphMouse,
+         onEdgeSelect: onEdgeSelect,
+         callback: settings.callback,
+         enabled: true
+      });
+      this.setVertexDragEnabled(this.vertexDragEnabled);
+      this.setVertexSelectEnabled(this.vertexSelectEnabled);
+      this.setEdgeDragEnabled(this.edgeDragEnabled);
+      if(this.gridEnabled)
+         this.setGridEnabled(this.gridEnabled.snapToGrid,this.gridEnabled.gridX,this.gridEnabled.gridY);
+      this.setDefaultSettings();
+      // if(this.updateHandlersCallback){
+      //    this.updateHandlersCallback();
+      // }
+   };
+
+   this.editLabel = function(id,type) {
+      if(type === "vertex" && this.editVertexLabelEnabled){
+         var info = graph.getVertexInfo(id);
+         var attr = visualGraph.graphDrawer.vertexLabelAttr;
+         var labelPos = visualGraph.getVertexVisualInfo(id);
+         if(labelPos.tableMode){
+            var content = (info.content) ? info.content : "";
+            var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+            var labelHeight = 2*attr["font-size"];
+         }
+         var maxLength = self.maxVertexLabelLength || 100;
+      }else if(type === "edge" && self.editEdgeLabelEnabled){
+         $(document).off("keydown");
+         var info = graph.getEdgeInfo(id);
+         var attr = visualGraph.graphDrawer.edgeLabelAttr;
+         var labelPos = visualGraph.graphDrawer.getLabelPos(id);
+         var maxLength = self.maxEdgeLabelLength || 100;
+      }else{
+         return
+      }
+      var fontSize = attr["font-size"] || 15;
+      var label = info.label || "";
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      raphElement[1].hide();
+      self.textEditor = $("");
+      self.editInfo = {id: id, type: type, field: "label"};
+      $("#"+paperId).css("position","relative");
+
+      self.textEditor.css({
+         position: "absolute",
+         left: labelPos.x,
+         top: (labelPos.tableMode) ? labelPos.y - boxSize.h/2 + labelHeight/2 : labelPos.y,
+         width: label.toString().length * fontSize,
+         transform: "translate(-50%,-50%)",
+         "text-align": "center",
+         background: "none",
+         border: "none",
+         color: attr.fill || "black"
+      });
+      self.textEditor.css(attr);
+      $("#"+paperId).append(self.textEditor);
+      self.textEditor.focus();
+      self.textEditor.keydown(function(){ // resize input when text length changes
+         var text = $(this).val();
+         if(text.length > 0){
+            $(this).css("width",text.length * fontSize);
+         }
+      });
+      self.textEditor.focusout(function(){
+         self.writeLabel(id,type);
+      });
+      self.textEditor.keypress(function(event){ // write when return is pressed
+         if(event.which == 13){
+            self.writeLabel(id,type);
+         }
+      });
+   };
+
+   this.writeLabel = function(id,type) {
+      // console.log("writeLabel")
+      if(type === "vertex"){
+         var info = graph.getVertexInfo(id);
+      }else if(type === "edge"){
+         var info = graph.getEdgeInfo(id);
+      }else{
+         console.log("type error");
+         return;
+      }
+      var oldLabel = info.label || "";
+      var newLabel = (self.textEditor) ? self.textEditor.val().trim() : "";
+
+      if(self.alphabet){
+         for(var iLetter = 0; iLetter < newLabel.length; iLetter++){
+            var letter = newLabel.charAt(iLetter);
+            if(letter != " " && !self.alphabet.includes(letter)){
+               newLabel = oldLabel;
+               break;
+            }
+         }
+      }
+      if(type == "vertex" && self.vertexLabelValidation){
+         if(!self.vertexLabelValidation(id,newLabel)){
+            newLabel = oldLabel;
+         }
+      }
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      if(oldLabel !== newLabel){
+         if(newLabel != ""){
+            info.label = newLabel;
+         }else{
+            delete info.label;
+         }
+         self.edited = true;
+         if(type === "vertex"){
+            graph.setVertexInfo(id,info);
+            raphElement[1].attr("text",newLabel);
+         }else{
+            graph.setEdgeInfo(id,info);
+            var labelPos = visualGraph.graphDrawer.getLabelPos(id);
+            raphElement[1].attr({
+               text:newLabel,
+               x: labelPos.x,
+               y: labelPos.y
+            });
+         }
+      }
+      if(self.textEditor){
+         self.textEditor.remove();
+         self.editInfo = {};
+      }
+      raphElement[1].show();
+      if(callback){
+         callback();
+      }
+   };
+
+   this.editContent = function(id) {
+      if(!self.editVertexContentEnabled){
+         return;
+      }
+      var info = graph.getVertexInfo(id);
+      var attr = visualGraph.graphDrawer.vertexContentAttr;
+      var fontSize = attr["font-size"] || 15;
+      var vertexPos = visualGraph.getVertexVisualInfo(id);
+      var content = (info.content) ? info.content : "";
+      var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+      var labelHeight = 2*visualGraph.graphDrawer.vertexLabelAttr["font-size"];
+      
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      raphElement[3].hide();
+      self.textEditor = $("");
+      self.editInfo = {id: id, type: "vertex", field: "content"};
+      $("#"+paperId).css("position","relative");
+
+      var textAlign = attr["text-anchor"] || "middle";
+      switch(textAlign){
+         case "middle":
+            var editorAlign = "center";
+            break;
+         case "start":
+            var editorAlign = "left";
+            break;
+         case "end":
+            var editorAlign = "right";
+            break;
+      }
+      self.textEditor.css({
+         position: "absolute",
+         left: vertexPos.x - boxSize.w/2,
+         top: vertexPos.y - boxSize.h/2 + labelHeight,
+         width: boxSize.w - 20,
+         height: boxSize.h - labelHeight,
+         "text-align": editorAlign,
+         "padding": "0 10px",
+         background: "none",
+         border: "none",
+         color: attr.fill || "black",
+         "font-family": "Arial, sans-serif"
+      });
+      self.textEditor.css(attr);
+      $("#"+paperId).append(self.textEditor);
+      self.textEditor.focus();
+
+      self.textEditor.keyup(function(){ // resize vertex & textarea when text length changes
+         var text = $(this).val();
+         self.resizeTableVertex(id,text);
+      });
+
+      self.textEditor.focusout(function(ev){
+         if(self.contentValidation){
+            var text = $(this).val();
+            self.editInfo.validContent = self.contentValidation(text,id);
+         }else{
+            self.editInfo.validContent = true;
+         }
+         if(self.editInfo.validContent){
+            self.vertexDragAndConnect.allowDeselection = true;
+            self.vertexDragAndConnect.dragEnabled = self.vertexDragEnabled;
+            self.graphDragger.dragEnabled = self.graphDragEnabled;
+            self.writeContent(id);
+         }else{
+            $(this).focus();
+            self.vertexDragAndConnect.allowDeselection = false;
+            self.vertexDragAndConnect.dragEnabled = false;
+            self.graphDragger.dragEnabled = false;
+         }
+      });
+   };
+
+   this.writeContent = function(id) {
+      // console.log(id);
+      var info = graph.getVertexInfo(id);
+      var oldContent = info.content || "";
+      var newContent = (self.textEditor) ? self.textEditor.val().trim() : "";
+
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      if(oldContent !== newContent){
+         info.content = newContent;
+         graph.setVertexInfo(id,info);
+         self.edited = true;
+      }
+ 
+      if(self.textEditor){
+         self.textEditor.remove();
+         if(!self.editInfo.clickedVertex)
+            self.editInfo = {};
+      }
+
+      if(self.edited){
+         visualGraph.redraw();
+         self.updateHandlers();
+      }else{
+         raphElement[3].show();
+      }
+      if(self.editInfo.clickedVertex && self.edited){
+         self.vertexDragAndConnect.selectionParent = null;
+         var clickedVertex = self.editInfo.clickedVertex;
+         var x = self.editInfo.x;
+         var y = self.editInfo.y;
+         // self.editInfo = {};
+         self.vertexDragAndConnect.clickHandler(clickedVertex,x,y);
+      }
+      if(self.writeContentCallback){
+         self.writeContentCallback(id,self.edited);
+      }
+      if(callback){
+         callback();
+      }
+   };
+
+   this.resizeTableVertex = function(id,text) {
+      // console.log("resizeTableVertex")
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      var newBoxSize = visualGraph.graphDrawer.getBoxSize(text);
+      var info = graph.getVertexInfo(id);
+      var vertexPos = visualGraph.getVertexVisualInfo(id);
+      var labelHeight = 2*visualGraph.graphDrawer.vertexLabelAttr["font-size"];
+      raphElement[0].transform(""); // box
+      raphElement[0].attr({   
+         x: vertexPos.x - newBoxSize.w/2,
+         y: vertexPos.y - newBoxSize.h/2,
+         height: newBoxSize.h,
+         width: newBoxSize.w
+      });
+      raphElement[1].transform(""); // label
+      raphElement[1].attr({   
+         x: vertexPos.x,
+         y: vertexPos.y - newBoxSize.h/2 +labelHeight/2
+      });
+      raphElement[2].transform(""); // line
+      raphElement[2].attr("path","M"+(vertexPos.x - newBoxSize.w/2)+","+(vertexPos.y - newBoxSize.h/2 + labelHeight)+"H"+(vertexPos.x + newBoxSize.w/2));
+      if(info.initial && !info.terminal){
+
+      }else if(!info.initial && info.terminal){
+         raphElement[4].transform(""); 
+         raphElement[4].attr({
+            x: vertexPos.x - newBoxSize.w/2 - 5,
+            y: vertexPos.y - newBoxSize.h/2 - 5,
+            height: newBoxSize.h + 10,
+            width: newBoxSize.w + 10
+         });
+      }else if(info.initial && info.terminal){
+
+      }
+      if(self.textEditor){
+         self.textEditor.css({
+            left: vertexPos.x - newBoxSize.w/2,
+            top: vertexPos.y - newBoxSize.h/2 + labelHeight,
+            width: newBoxSize.w - 20,
+            height: newBoxSize.h - labelHeight
+         });
+      }
+      // var oldContent = info.content;
+      self.removeIcons(id);
+      // info.content = text;
+      // self.addIcons(id);
+      // info.content = oldContent;
+      if(self.resizeTableVertexCallback){
+         self.resizeTableVertexCallback(id,vertexPos,newBoxSize);
+      }
+   };
+
+   this.startDragCallback = function(ID,x,y) {
+      // console.log("start drag callback "+ID);
+      if(self.textEditor){
+         self.editInfo.clickedVertex = ID;
+         self.editInfo.x = x;
+         self.editInfo.y = y;
+         self.textEditor.focusout();
+         return
+      }
+      if(self.textEditor && !(self.editInfo.field == "content" && self.editInfo.validContent == false)){
+         // console.log(self.editInfo)
+         var vertices = graph.getAllVertices();
+         for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+            var vertexRaph = visualGraph.getRaphaelsFromID(vertices[iVertex]);
+
+               if(self.editInfo.id == vertices[iVertex]){
+                  if(self.editInfo.field == "label"){
+                     self.writeLabel(self.editInfo.id,self.editInfo.type);
+                  }else{
+                     // console.log("startDragCallback write"+self.editInfo.id)
+                     self.writeContent(self.editInfo.id);
+                  }
+               }
+               self.textEditor.remove();
+            
+            if(vertexRaph[1])
+               vertexRaph[1].show();
+            if(vertexRaph[3])
+               vertexRaph[3].show();
+         }
+      }
+      var edges = graph.getAllEdges();
+      for(var iEdge = 0; iEdge < edges.length; iEdge++){
+         var edgeRaph = visualGraph.getRaphaelsFromID(edges[iEdge]);
+         if(self.edgeTextEditor)
+            self.edgeTextEditor.remove();
+         edgeRaph[1].show();
+         }
+      self.arcDragger.unselectAll();
+
+      if(startDragCallbackCallback){
+         startDragCallbackCallback(ID);
+      }
+   };
+
+   this.isGoodPosition = function(vID,position) {
+      var vertices = graph.getAllVertices();
+      var vInfo = visualGraph.getVertexVisualInfo(vID);
+      if(vInfo.tableMode){
+         var info = graph.getVertexInfo(vID);
+         var content = info.content || "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+      }
+      for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+         var vertex = vertices[iVertex];
+         if(vertex != vID){
+            var vInfo2 = visualGraph.getVertexVisualInfo(vertex);
+            if(vInfo2.tableMode){
+               var info2 = graph.getVertexInfo(vID);
+               var content2 = info2.content || "";
+               var boxSize2 = visualGraph.graphDrawer.getBoxSize(content2);
+               if(vInfo.tableMode){
+                  if(Math.abs(vInfo.x - vInfo2.x) < (boxSize.w/2 + boxSize2.w/2) && Math.abs(vInfo.y - vInfo2.y) < (boxSize.h/2 + boxSize2.h/2)){
+                     return false;
+                  }
+               }else{
+                  if(Math.abs(vInfo.x - vInfo2.x) < (visualGraph.graphDrawer.circleAttr.r + boxSize2.w/2) && Math.abs(vInfo.y - vInfo2.y) < (visualGraph.graphDrawer.circleAttr.r + boxSize2.h/2)){
+                     return false;
+                  }
+               }
+            }else{
+               if(vInfo.tableMode){
+                  if(Math.abs(vInfo.x - vInfo2.x) < (boxSize.w/2 + visualGraph.graphDrawer.circleAttr.r) && Math.abs(vInfo.y - vInfo2.y) < (boxSize.h/2 + visualGraph.graphDrawer.circleAttr.r)){
+                     return false;
+                  }
+               }else{
+                  if(Math.abs(vInfo.x - vInfo2.x) < 2*visualGraph.graphDrawer.circleAttr.r && Math.abs(vInfo.y - vInfo2.y) < 2*visualGraph.graphDrawer.circleAttr.r ){
+                     return false;
+                  }
+               }
+            }
+         }
+      }
+      return true;
+   };
+   
+
+   this.setDefaultSettings = function() {
+      if(!settings.onVertexSelect){
+         this.vertexDragAndConnect.setOnVertexSelect(this.defaultOnVertexSelect);
+      }
+      if(!settings.onPairSelect){
+         this.vertexDragAndConnect.setOnPairSelect(this.defaultOnPairSelect);
+      }
+      if(!settings.onEdgeSelect){
+         this.arcDragger.setOnEdgeSelect(this.defaultOnEdgeSelect);
+      }
+      if(!settings.createVertex){
+         this.vertexCreator.setCreateVertex(this.defaultCreateVertex);
+      }
+      this.vertexDragAndConnect.setUnselectAllEdges(this.unselectAllEdges);
+      this.vertexDragAndConnect.setStartDragCallback(this.startDragCallback);
+      this.vertexDragAndConnect.setIsGoodPosition(this.isGoodPosition);
+      this.vertexDragAndConnect.setClickHandlerCallback(this.clickHandlerCallback);
+      this.vertexDragAndConnect.snapToLastGoodPosition = true;
+      this.arcDragger.setStartDragCallback(this.startDragCallback);
+      this.arcDragger.setEditEdgeLabel(this.editLabel);
+      this.arcDragger.setUnselectAll(this.unselectAllEdges);
+      this.graphDragger.setUnselectAllEdges(this.unselectAllEdges);
+   };
+   
+   this.setDefaultSettings();
+   
+   if(settings.enabled) {
+      this.setEnabled(true);
+   }
+};
diff --git a/pemFioi/graph-mouse-1.2.js b/pemFioi/graph-mouse-1.2.js
new file mode 100644
index 000000000..c8adb710f
--- /dev/null
+++ b/pemFioi/graph-mouse-1.2.js
@@ -0,0 +1,2956 @@
+function GraphMouse(graphMouseID, graph, visualGraph) {
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.priority = 2000;
+
+   /* ID -> {elementID: ID of vertex or edge,
+   *         eventType: a mouse event type string,
+    *        callbacks: list of functions to call,
+    *        raphaels: list of Raphael objects
+    *        }
+    */
+   this.specificListeners = {};
+
+   /* ID -> {eventType: a mouse event type string,
+    *        callbacks: list of functions to call,
+    *        handleGetter: getter of Raphaels
+    *        }
+    */
+   this.globalVertexListeners = {};
+   this.globalEdgeListeners = {};
+
+   // Vertex or edge ID -> {Specific listener ID 1, Specific listener ID 2, ...}
+   this.elementListeners = {};
+   var self = this;
+
+   this.addEvent = function(listenerID, eventType, elementType, elementID, callbacks, handleGetter) {
+      if(this.globalVertexListeners[listenerID] || this.globalEdgeListeners[listenerID] || this.specificListeners[listenerID]) {
+         return;
+      }
+      if(elementID !== undefined && elementID !== null) {
+         var raphaels = this._addElementEvent(eventType, elementType, elementID, callbacks, handleGetter);
+         this.specificListeners[listenerID] = {
+            elementID: elementID,
+            eventType: eventType,
+            raphaels: raphaels,
+            callbacks: callbacks
+         };
+         if(!this.elementListeners[elementID]) {
+            this.elementListeners[elementID] = {};
+         }
+         this.elementListeners[elementID][listenerID] = true;
+      } else {
+         var listenerInfo = {
+            eventType: eventType,
+            callbacks: callbacks,
+            handleGetter: handleGetter
+         };
+
+         var elementIDs;
+         if(elementType == "vertex") {
+            elementIDs = this.graph.getAllVertices();
+            this.globalVertexListeners[listenerID] = listenerInfo;
+         }
+         else {
+            elementIDs = this.graph.getAllEdges();
+            this.globalEdgeListeners[listenerID] = listenerInfo;
+         }
+         for(var iElementID in elementIDs) {
+            var id = elementIDs[iElementID];
+            this._addElementEvent(eventType, elementType, id, callbacks, handleGetter);
+         }
+      }
+   };
+
+   this._addElementEvent = function(eventType, elementType, elementID, callbacks, handleGetter) {
+      var raphaels = this._getRaphaels(elementType, elementID, handleGetter);
+      for(var iElement in raphaels) {
+         var element = raphaels[iElement];
+         if(Beav.Navigator.isIE8()){
+            switch(eventType){
+               case "click":
+                  element[eventType].apply(element, [function(ev,x,y){
+                     callbacks[0](elementID);
+                  }]);
+                  break;
+               case "drag":
+               default:
+                  element[eventType].apply(element, callbacks);
+            }
+         }else{
+            element[eventType].apply(element, callbacks);
+         }
+      }
+      return raphaels;
+   };
+
+   this.removeEvent = function(listenerID) {
+      if(this.globalVertexListeners[listenerID]) {
+         this._removeGlobalEvent("vertex", listenerID);
+      }
+      else if(this.globalEdgeListeners[listenerID]) {
+         this._removeGlobalEvent("edge", listenerID);
+      }
+      else if(this.specificListeners[listenerID]){
+         this._removeSpecificEvent(listenerID);
+      }
+   };
+
+   this._removeGlobalEvent = function(elementType, listenerID) {
+      var listenerInfo;
+      var elementIDs;
+      if(elementType == "vertex") {
+         listenerInfo = this.globalVertexListeners[listenerID];
+         delete this.globalVertexListeners[listenerID];
+         elementIDs = this.graph.getAllVertices();
+      }
+      else {
+         listenerInfo = this.globalEdgeListeners[listenerID];
+         delete this.globalEdgeListeners[listenerID];
+         elementIDs = this.graph.getAllEdges();
+      }
+      for(var iElementID in elementIDs) {
+         var elementID = elementIDs[iElementID];
+         var raphaels = this._getRaphaels(elementType, elementID, listenerInfo.handleGetter);
+         this._removeElementsEvent(raphaels, listenerInfo.eventType, listenerInfo.callbacks);
+      }
+   };
+
+   this._removeSpecificEvent = function(listenerID) {
+      var elementID = this.specificListeners[listenerID].elementID;
+      var eventType = this.specificListeners[listenerID].eventType;
+      var raphaels = this.specificListeners[listenerID].raphaels;
+      var callbacks = this.specificListeners[listenerID].callbacks;
+      this._removeElementsEvent(raphaels, eventType, callbacks);
+      delete this.specificListeners[listenerID];
+      delete this.elementListeners[elementID][listenerID];
+   };
+
+   this._getRaphaels = function(elementType, elementID, handleGetter) {
+      if(handleGetter) {
+         return handleGetter(elementID);
+      }
+      return this.visualGraph.getRaphaelsFromID(elementID);
+   };
+
+   this._removeElementsEvent = function(elements, eventType, callbacks) {
+      for(var iElement in elements) {
+         var element = elements[iElement];
+         element["un" + eventType].apply(element, callbacks);
+      }
+   };
+
+   this._removeElement = function(id) {
+      if(this.elementListeners[id] === undefined || this.elementListeners[id] === null) {
+         return;
+      }
+      for(var iListenerID in this.elementListeners[id]) {
+         delete this.specificListeners[this.elementListeners[id][iListenerID]];
+      }
+      delete this.elementListeners[id];
+   };
+
+   this.removeAll = function() {
+      var listenerIDs = [];
+      var listenerID;
+      for(listenerID in this.globalVertexListeners) {
+         listenerIDs.push(listenerID);
+      }
+      for(listenerID in this.globalEdgeListeners) {
+         listenerIDs.push(listenerID);
+      }
+      for(listenerID in this.specificListeners) {
+         listenerIDs.push(listenerID);
+      }
+      for(var iListener in listenerID) {
+         this.removeEvent(listenerID[iListener]);
+      }
+   };
+
+   this.destroy = function() {
+      this.graph.removePostListener(graphMouseID);
+      this.removeAll();
+   };
+
+   this.graphListener = {
+      addVertex: function(id) {
+         for(var listenerID in self.globalVertexListeners) {
+            var listenerInfo = self.globalVertexListeners[listenerID];
+            self._addElementEvent(listenerInfo.eventType, "vertex", id, listenerInfo.callbacks, listenerInfo.handleGetter);
+         }
+         return true;
+      },
+      addEdge: function(id) {
+         for(var listenerID in self.globalEdgeListeners) {
+            var listenerInfo = self.globalEdgeListeners[listenerID];
+            self._addElementEvent(listenerInfo.eventType, "edge", id, listenerInfo.callbacks, listenerInfo.handleGetter);
+         }
+         return true;
+      },
+      removeVertex: function(id) {
+         self._removeElement(id);
+         return true;
+      },
+      removeEdge: function(id) {
+         self._removeElement(id);
+         return true;
+      }
+   };
+
+   this.graph.addPostListener(graphMouseID, this.graphListener, this.priority);
+}
+
+function VertexToggler(id, graph, visualGraph, graphMouse, vertexCallback, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.graphMouse = graphMouse;
+   this.enabled = false;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         graphMouse.addEvent(id, "click", "vertex", null, [this.eventHandler]);
+      }
+      else {
+         graphMouse.removeEvent(id);
+      }
+   };
+
+   this.eventHandler = function(elementID) { // param only for IE8
+      var id = (Beav.Navigator.isIE8()) ? elementID : this.data("id");
+      var info = self.graph.getVertexInfo(id);
+      // console.log(id)
+      info.selected = !info.selected;
+      vertexCallback(id, info.selected);
+   };
+
+   this._unselectAll = function() {
+      var elementIDs = graph.getAllVertices();
+      for(var iElementID in elementIDs) {
+         var elementID = elementIDs[iElementID];
+         var info = this.graph.getVertexInfo(elementID);
+         info.selected = false;
+      }
+   };
+
+   this._unselectAll();
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+}
+
+function VertexClicker(id, graph, visualGraph, graphMouse, vertexCallback, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.graphMouse = graphMouse;
+   this.enabled = false;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         graphMouse.addEvent(id, "click", "vertex", null, [this.eventHandler]);
+      }
+      else {
+         graphMouse.removeEvent(id);
+      }
+   };
+
+   this.eventHandler = function() {
+      var id = this.data("id");
+      var info = self.graph.getVertexInfo(id);
+      vertexCallback(id, info);
+   };
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+}
+
+function PaperMouseEvent(paperElementID, paper, jqEvent, callback, enabled,id) {
+   var self = this;
+   this.paper = paper;
+   this.enabled = false;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         // $("#" + paperElementID).off(jqEvent);
+         $("#" + paperElementID).unbind(jqEvent, this.clickHandler);
+         $("#" + paperElementID)[jqEvent](this.clickHandler);
+      }
+      else {
+         $("#" + paperElementID).unbind(jqEvent, this.clickHandler);
+         // $("#" + paperElementID).off(jqEvent);
+      }
+   };
+
+   this.clickHandler = function(event) {
+      // var offset = $(self.paper.canvas).offset();
+      var offset = $("#"+paperElementID).offset();
+      var xPos = event.pageX - offset.left;
+      var yPos = event.pageY - offset.top;
+      callback(xPos, yPos, event);
+   };
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+};
+
+function VertexDragger(settings) {
+   var self = this;
+   this.gridEnabled = false;
+   this.gridX = null;
+   this.gridY = null;
+   this.enabled = false;
+   this.occupiedSnapPositions = {};
+   this.vertexToSnapPosition = {};
+   this.stillVertices = settings.stillVertices || [];
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         settings.graphMouse.addEvent(settings.id, "drag", "vertex", null, [this.moveHandler, this.startHandler, this.endHandler], settings.handleGetter);
+      }
+      else {
+         settings.graphMouse.removeEvent(settings.id);
+      }
+   };
+
+   this.setGridEnabled = function(enabled, gridX, gridY) {
+      this.gridEnabled = enabled;
+      if(enabled) {
+         this.gridX = gridX;
+         this.gridY = gridY;
+      }
+   };
+
+   this.startHandler = function(x, y, event) {
+      if(settings.ie8compat) { // Temporary?
+         // Determine which element is being clicked, from the event
+         for(var rid in settings.visualGraph.vertexRaphaels) {
+            var vrs = settings.visualGraph.vertexRaphaels[rid];
+            for(var i = 0; i < vrs.length; i++) {
+               if(vrs[i].node === (event.target || event.srcElement)
+                   || vrs[i].node === (event.target.parentElement || event.target.parentNode || event.srcElement.parentElement || event.srcElement.parentNode)
+               ) {
+                  self.elementID = rid;
+               }
+            }
+         }
+      } else {
+         self.elementID = this.data("id");
+      }
+      if(Beav.Array.has(self.stillVertices,self.elementID)){
+         return
+      }
+      self.originalPosition = settings.visualGraph.graphDrawer.getVertexPosition(self.elementID);
+      settings.visualGraph.elementToFront(self.elementID);
+      if(settings.startCallback) {
+         settings.startCallback(self.elementID);
+      }
+   };
+
+   this.endHandler = function(event) {
+      if(Beav.Array.has(self.stillVertices,self.elementID)){
+         return
+      }
+      if(settings.snapPositions) {
+         self.updateOccupiedSnap();
+      }
+      if (settings.minDistanceBetweenVertices && settings.dragLimits) {
+         self.checkOverlap(self.elementID);
+      }
+      if(settings.callback) {
+         settings.callback(self.elementID);
+      }
+   };
+
+   this.moveHandler = function(dx, dy, x, y, event) {
+      if(Beav.Array.has(self.stillVertices,self.elementID)){
+         return
+      }
+      var newX = self.originalPosition.x + dx;
+      var newY = self.originalPosition.y + dy;
+      if(self.gridEnabled) {
+         newX -= (newX % self.gridX);
+         newY -= (newY % self.gridY);
+      }
+      if(settings.snapPositions) {
+         var position = self.getSnapPosition(newX, newY);
+         if(position !== null) {
+            newX = position.x;
+            newY = position.y;
+         }
+         else {
+            self.freeSnapFromVertex(self.elementID);
+         }
+      }
+      if(settings.dragLimits) {
+         var raphObj = settings.visualGraph.getRaphaelsFromID(self.elementID);
+         var strW = raphObj[0].attr("stroke-width");
+         newX = Math.max(settings.dragLimits.minX + strW/2, Math.min(settings.dragLimits.maxX - strW/2, newX));
+         newY = Math.max(settings.dragLimits.minY + strW/2, Math.min(settings.dragLimits.maxY - strW/2, newY));
+      }
+      settings.visualGraph.graphDrawer.moveVertex(self.elementID, newX, newY);
+   };
+
+   self.freeSnapFromVertex = function(id) {
+      var iPosition = self.vertexToSnapPosition[id];
+      if(iPosition !== null && iPosition !== undefined) {
+         delete self.occupiedSnapPositions[iPosition];
+         delete self.vertexToSnapPosition[id];
+      }
+   };
+
+   self.getSnapPosition = function(x, y) {
+      for(var iPosition in settings.snapPositions) {
+         if(self.occupiedSnapPositions[iPosition]) {
+            continue;
+         }
+         var position = settings.snapPositions[iPosition];
+         if((x - position.x) * (x - position.x) + (y - position.y) * (y - position.y) <= settings.snapThreshold * settings.snapThreshold) {
+            return position;
+         }
+      }
+      return null;
+   };
+
+   self.updateOccupiedSnap = function() {
+      self.occupiedSnapPositions = {};
+      var vertices = settings.visualGraph.graph.getAllVertices();
+      for(var iPosition in settings.snapPositions) {
+         var snapPosition = settings.snapPositions[iPosition];
+         for(var iVertex in vertices) {
+            var vertexPosition = settings.visualGraph.graphDrawer.getVertexPosition(vertices[iVertex]);
+            if(snapPosition.x === vertexPosition.x && snapPosition.y === vertexPosition.y) {
+               self.occupiedSnapPositions[iPosition] = true;
+               self.vertexToSnapPosition[vertices[iVertex]] = iPosition;
+               break;
+            }
+         }
+      }
+   };
+
+   self.checkOverlap = function (id) {
+      var pos = settings.visualGraph.getVertexVisualInfo(id);
+      if(self.overlapOtherVertex(pos.x,pos.y,id)){
+         self.findEmptySpace(id);
+      }
+   };
+
+   self.overlapOtherVertex = function (x,y,id) {
+      var vertices = settings.visualGraph.graph.getAllVertices();
+      for(var iVert = 0; iVert < vertices.length; iVert++) {
+         var vertex = vertices[iVert];
+         if(vertex !== id){
+            var pos = settings.visualGraph.getVertexVisualInfo(vertex);
+            if(Beav.Geometry.distance(x,y,pos.x,pos.y) < settings.minDistanceBetweenVertices){
+               return true;
+            }
+         }
+      }
+      return false;
+   };
+
+   self.findEmptySpace = function (id) {
+      var d = settings.dragLimits.maxX + settings.dragLimits.maxY;
+      var pos = settings.visualGraph.getVertexVisualInfo(id);
+      var newX = 0;
+      var newY = 0;
+      for (var x = settings.dragLimits.minX; x < settings.dragLimits.maxX; x += settings.vertexRadius){
+         for (var y = settings.dragLimits.minY; y < settings.dragLimits.maxY; y += settings.vertexRadius){
+            if (!self.overlapOtherVertex(x,y,id)){
+               var newD = Beav.Geometry.distance(pos.x,pos.y,x,y);
+               if(newD < d){
+                  d = newD;
+                  newX = x;
+                  newY = y;
+               }
+            }
+         }
+      }
+
+      settings.visualGraph.graphDrawer.moveVertex(id, newX, newY);
+   };
+
+   if(settings.enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+   if(settings.snapPositions) {
+      self.updateOccupiedSnap();
+   }
+}
+
+function ElementRemover(id, graph, visualGraph, graphMouse, callback, forVertices, forEdges, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.graphMouse = graphMouse;
+   this.enabled = false;
+   this.forVertices = forVertices;
+   this.forEdges = forEdges;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         if(this.forVertices) {
+            graphMouse.addEvent(id + "$$$vertex", "click", "vertex", null, [this.deleteVertex]);
+         }
+         if(this.forEdges) {
+            graphMouse.addEvent(id + "$$$edge", "click", "edge", null, [this.deleteEdge]);
+         }
+      }
+      else {
+         if(this.forVertices) {
+            graphMouse.removeEvent(id + "$$$vertex");
+         }
+         if(this.forEdges) {
+            graphMouse.removeEvent(id + "$$$edge");
+         }
+      }
+   };
+
+   this.deleteVertex = function() {
+      var id = this.data("id");
+      self.graph.removeVertex(id);
+      if(callback) {
+         callback("vertex", id);
+      }
+   };
+   this.deleteEdge = function() {
+      var id = this.data("id");
+      self.graph.removeEdge(id);
+      if(callback) {
+         callback("edge", id);
+      }
+   };
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+};
+
+function EdgeCreator(id, paperElementID, paper, graph, visualGraph, graphMouse, vertexSelector, edgeCreator, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.graphMouse = graphMouse;
+   this.paperMouse = new PaperMouseEvent(paperElementID, paper, "click", paperEventHandler, enabled);
+   this.enabled = false;
+   this.parent = null;
+   this.selectedNow = false;
+
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         graphMouse.addEvent(id, "click", "vertex", null, [vertexEventHandler]);
+      }
+      else {
+         graphMouse.removeEvent(id);
+      }
+      this.paperMouse.setEnabled(enabled);
+   };
+
+   function vertexEventHandler() {
+      var id = this.data("id");
+      if(self.parent === null) {
+         self.parent = id;
+         if(vertexSelector) {
+            vertexSelector(id, true);
+            self.selectedNow = true;
+         }
+      }
+      else if(id == self.parent) {
+         edgeCreator(self.parent, id);
+         self.parent = null;
+         if(vertexSelector) {
+            vertexSelector(id, false);
+         }
+      }
+      else {
+         // edgeCreator(self.parent, id);
+         if(vertexSelector) {
+            vertexSelector(self.parent, false);
+         }
+         edgeCreator(self.parent, id);
+         self.parent = null;
+      }
+   }
+
+   function paperEventHandler(xPos, yPos, event) {
+      // We are relying on the fact that vertex event happens before the paper event, which seems to be the behavior of all browsers.
+      // Otherwise the vertex would be selected by the first and immediately deselected by the second.
+      if(self.selectedNow || self.parent == null) {
+         self.selectedNow = false;
+         return;
+      }
+      if(vertexSelector) {
+         vertexSelector(self.parent, false);
+      }
+      self.parent = null;
+   }
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+}
+
+function FuzzyClicker(id, paperElementID, paper, graph, visualGraph, callback, forVertices, forEdges, forBackground, vertexThreshold, edgeThreshold, enabled, event) {
+   if(!event){
+      event = "click";
+   }
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.paperMouse = new PaperMouseEvent(paperElementID, paper, event, eventHandler, enabled,id);
+   this.callback = callback;
+   this.enabled = false;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      this.paperMouse.setEnabled(enabled);
+   };
+
+   this.setCallback = function(fct) {
+      this.callback = fct;
+   };
+
+   function eventHandler(xPos, yPos, event) {
+      // console.log(id+" forBG:"+forBackground);
+      // Check if vertex was clicked
+      var vertex = self.getFuzzyVertex(xPos, yPos);
+      if(vertex !== null) {
+         if(forVertices) {
+            self.callback("vertex", vertex, xPos, yPos, event);
+         }
+         // Clicking a vertex cancels any other type, regardless of forVertices flag.
+         return;
+      }
+
+      // Check if edge was clicked.
+      var edge = self.getFuzzyEdge(xPos, yPos);
+      // console.log(id+" forEdges:"+forEdges+" edge:"+edge);
+      if(edge !== null) {
+         if(forEdges) {
+            self.callback("edge", edge, xPos, yPos, event);
+         }
+         // Clicking an edge cancels the click on the background, regardless of forEdges.
+         return;
+      }
+
+      var edge2 = self.getFuzzyEdgeLabel(xPos, yPos);
+      // console.log(id+" forEdges:"+forEdges+" edgeLabel:"+edge2);
+      if(edge2 !== null) {
+         if(forEdges) {
+            self.callback("edgeLabel", edge2, xPos, yPos, event);
+         }
+         // Clicking an edge cancels the click on the background, regardless of forEdges.
+         return;
+      }
+
+      // console.log(id+" forBackground:"+forBackground);
+      // Background was clicked.
+      if(forBackground) {
+         self.callback(null, null, xPos, yPos, event);
+      }
+   }
+   
+   this.getFuzzyVertex = function(xPos, yPos) {
+      // Look for closest vertex.
+      // console.log(self.id);
+      var vertex = null;
+      var minDistance = Infinity;
+      this.graph.forEachVertex(function(id) {
+         var distance = visualGraph.graphDrawer.getDistanceFromVertex(id, xPos, yPos);
+         // console.log(distance+" "+id)
+         if(distance <= vertexThreshold && distance < minDistance) {
+            vertex = id;
+            minDistance = distance;
+            // console.log(id);
+         }
+      });
+      return vertex;
+   };
+   
+   this.getFuzzyEdge = function(xPos, yPos) {
+      // Look for closest edge.
+      var edge = null;
+      var minDistance = Infinity;
+      this.graph.forEachEdge(function(id) {
+         var distance = visualGraph.graphDrawer.getDistanceFromEdge(id, xPos, yPos);
+         if(distance <= edgeThreshold && distance < minDistance) {
+            edge = id;
+            minDistance = distance;
+         }
+      });
+      return edge;
+   };
+
+   this.getFuzzyEdgeLabel = function(xPos, yPos) {
+      // Look for closest edge.
+      var edge = null;
+      this.graph.forEachEdge(function(id) {
+         var onLabel = visualGraph.graphDrawer.isOnEdgeLabel(id,xPos,yPos);
+         if(onLabel) {
+            edge = id;
+         }
+      });
+      return edge;
+   };
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+}
+
+function FuzzyRemover(id, paperElementID, paper, graph, visualGraph, callback, forVertices, forEdges, vertexThreshold, edgeThreshold, enabled) {
+   var self = this;
+   this.id = id;
+   this.graph = graph;
+   this.visualGraph = visualGraph;
+   this.enabled = false;
+   this.fuzzyClicker = new FuzzyClicker(id + "$$$fuzzyclicker", paperElementID, paper, graph, visualGraph, deleteElement, forVertices, forEdges, false, vertexThreshold, edgeThreshold, enabled);
+   this.forVertices = forVertices;
+   this.forEdges = forEdges;
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      this.fuzzyClicker.setEnabled(enabled);
+   };
+
+   function deleteElement(elementType, id, xPos, yPos) {
+      if(elementType == "vertex") {
+         self.graph.removeVertex(id);
+      }
+      else {
+         self.graph.removeEdge(id);
+      }
+      if(callback) {
+         callback(elementType, id, xPos, yPos);
+      }
+   }
+
+   if(enabled) {
+      this.setEnabled(true);
+   }
+   else {
+      this.enabled = false;
+   }
+};
+
+function VertexCreator(settings) {
+   var self = this;
+   this.id = settings.id || "VertexCreator";
+   this.paperElementID = settings.paperElementID;
+   this.paper = settings.paper;
+   this.graph = settings.graph;
+   this.visualGraph = settings.visualGraph;
+   this.createVertex = settings.createVertex;
+   this.forVertices = true;
+   this.forEdges = true;
+   this.vertexThreshold = settings.vertexThreshold || 0;
+   this.edgeThreshold = settings.edgeThreshold || 10;
+   this.enabled = false;
+
+   this.fuzzyDblClicker = new FuzzyClicker(this.id + "_fuzzyDblClicker", this.paperElementID, this.paper, this.graph, this.visualGraph, eventHandler, 
+      this.forVertices, this.forEdges, true, this.vertexThreshold, this.edgeThreshold, false, "dblclick")
+
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+
+      this.fuzzyDblClicker.setEnabled(enabled);
+   };
+
+   this.setCreateVertex = function(fct) {
+      this.createVertex = fct;
+   }; 
+
+   function eventHandler(elementType,elementID,x,y) {
+      if(elementType === null){
+         self.createVertex(x,y);
+      }
+   };
+
+
+   if(settings.enabled) {
+      this.setEnabled(true);
+   } else {
+      this.enabled = false;
+   }
+};
+
+function VertexDragAndConnect(settings) {
+   var self = this;
+   var id = settings.id || "VertexDragAndConnect";
+   var paper = settings.paper;
+   var graph = settings.graph;
+   this.visualGraph = settings.visualGraph;
+   var graphMouse = settings.graphMouse;
+   this.dragThreshold = settings.dragThreshold || 0;
+   this.vertexThreshold = settings.vertexThreshold || 0;
+   this.dragLimits = settings.dragLimits;
+   this.onVertexSelect = settings.onVertexSelect;
+   this.onPairSelect = settings.onPairSelect;
+   this.onEdgeSelect = settings.onEdgeSelect;
+   this.onDragEnd = settings.onDragEnd;
+   this.unselectAllEdges;
+   this.startDragCallback = settings.startDragCallback;
+   this.moveDragCallback = settings.moveDragCallback;
+   this.clickHandlerCallback = settings.clickHandlerCallback;
+   this.fuzzyClickCallback = settings.fuzzyClickCallback;
+
+   this.gridEnabled = false;
+   this.gridX = null;
+   this.gridY = null;
+   
+   this.enabled = false;
+   this.dragEnabled = false;
+   this.vertexSelectEnabled = false;
+   this.allowDeselection = true;   // to deal with graph editorcontent validation
+
+   this.occupiedSnapPositions = {};
+   this.vertexToSnapPosition = {};
+   this.isGoodPosition = settings.isGoodPosition;
+   this.snapToLastGoodPosition = settings.snapToLastGoodPosition;
+
+   this.enabled = false;
+   this.selectionParent = null;
+   if(Beav.Navigator.isIE8()){
+      this.fuzzyClicker = new FuzzyClicker(id + "$$$fuzzyclicker", settings.paperElementID, paper, graph, this.visualGraph, onFuzzyClick, true, true, true, 
+      this.vertexThreshold, settings.edgeThreshold, false);
+   }else{
+      this.fuzzyClicker = new FuzzyClicker(id + "$$$fuzzyclicker", settings.paperElementID, paper, graph, this.visualGraph, onFuzzyClick, false, true, true, 
+      this.vertexThreshold, settings.edgeThreshold, false);
+   }
+   
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+
+      this.setDragEnabled(enabled);
+      this.fuzzyClicker.setEnabled(enabled);
+      this.setVertexSelectEnabled(enabled);
+   };
+
+   this.setGridEnabled = function(enabled, gridX, gridY) {
+      this.gridEnabled = enabled;
+      if(enabled) {
+         this.gridX = gridX;
+         this.gridY = gridY;
+      }
+   };
+
+   this.setDragEnabled = function(enabled) {
+      if(enabled){
+         this.enableDrag();
+      }else{
+         this.disableDrag();
+      }
+      this.dragEnabled = enabled;
+   };
+
+   this.setVertexSelectEnabled = function(enabled) {
+      this.vertexSelectEnabled = enabled;
+   };
+
+   this.disableDrag = function() {
+      graphMouse.removeEvent(id + "$$$dragAndConnect");
+      self.isDragging = false;
+   };
+
+   this.enableDrag = function() {
+      graphMouse.addEvent(id + "$$$dragAndConnect", "drag", "vertex", null, [self.moveHandler, self.startHandler, self.endHandler]);
+   };
+
+   this.enableVertexDrag = function(vertexId) {
+      graphMouse.removeEvent(id + "_" + vertexId + "$$$dragAndConnect");
+      graphMouse.addEvent(id + "_" + vertexId + "$$$dragAndConnect", "drag", "vertex", vertexId, [self.moveHandler, self.startHandler, self.endHandler]);
+   };
+
+   this.disableVertexDrag = function(vertexId) {
+      graphMouse.removeEvent(id + "_" + vertexId + "$$$dragAndConnect");
+   };
+
+   function onFuzzyClick(elementType, id) {
+      // console.log("onFuzzyClick",elementType,id)
+      if(elementType === "edge") {
+         if(self.selectionParent !== null) {
+            self.onVertexSelect(self.selectionParent, false);
+         }
+         self.selectionParent = null;
+         if(self.onEdgeSelect) {
+            self.onEdgeSelect(id);
+         }
+      }else if(elementType === "edgeLabel"){
+         return;
+      }else{
+         self.clickHandler(id);
+      }
+      if(self.fuzzyClickCallback){
+         // console.log("fuzzyClickCB")
+         self.fuzzyClickCallback();
+      }
+   }
+
+   this.startHandler = function(x, y, event) { 
+      if(self.unselectAllEdges){
+         self.unselectAllEdges();
+      }
+      self.elementID = this.data("id");
+      self.originalPosition = self.visualGraph.graphDrawer.getVertexPosition(self.elementID);
+      self.lastGoodPosition = self.visualGraph.graphDrawer.getVertexPosition(self.elementID);
+      self.isDragging = false;
+      self.visualGraph.elementToFront(self.elementID);
+      if(self.startDragCallback){
+         // console.log("startDragCallback")
+         self.startDragCallback(self.elementID,x,y);
+      }
+   };
+
+   this.endHandler = function(event) {
+      if(self.isDragging) {
+         var isSnappedToGoodPosition = false;
+
+         if(self.snapToLastGoodPosition) {
+            var position = self.visualGraph.graphDrawer.getVertexPosition(self.elementID);
+            if(!self.isGoodPosition(self.elementID, position)) {
+               self.visualGraph.graphDrawer.moveVertex(self.elementID, self.lastGoodPosition.x, self.lastGoodPosition.y);
+               isSnappedToGoodPosition = true;
+            }
+         }
+         if(self.onDragEnd) {
+            self.onDragEnd(self.elementID, isSnappedToGoodPosition);
+         }
+         // self.isDragging = false;
+         return;
+      }
+      self.clickHandler(self.elementID,event.pageX,event.pageY);  // because drag event interferes with click event on chrome
+   };
+
+   this.moveHandler = function(dx, dy, x, y, event) {
+      if(dx * dx + dy * dy <= self.dragThreshold * self.dragThreshold){
+         return;
+      }
+      if(self.selectionParent !== null && self.allowDeselection) {
+         self.onVertexSelect(self.selectionParent, false);
+      }
+      self.selectionParent = null;
+      if(!self.isDragging) {
+         self.isDragging = true;
+      }
+      if(!self.isDragging) {
+         return;
+      }
+      if(!self.dragEnabled)
+         return;
+
+      var newX = self.originalPosition.x + dx;
+      var newY = self.originalPosition.y + dy;
+      if(self.gridEnabled) {
+         newX -= (newX % self.gridX);
+         newY -= (newY % self.gridY);
+      }
+      if(self.dragLimits) {
+         newX = Math.min(self.dragLimits.maxX, Math.max(newX, self.dragLimits.minX));
+         newY = Math.min(self.dragLimits.maxY, Math.max(newY, self.dragLimits.minY));
+      }
+      if(self.snapToLastGoodPosition) {
+         var position = {
+            x: newX,
+            y: newY
+         };
+         if(self.isGoodPosition(self.elementID, position)) {
+            self.lastGoodPosition = position;
+         }
+      }
+
+      self.visualGraph.graphDrawer.moveVertex(self.elementID, newX, newY);
+
+      if(self.moveDragCallback){
+         self.moveDragCallback(self.elementID);
+      }
+   };
+
+   this.clickHandler = function(id,x,y) {
+      if(self.unselectAllEdges){
+         self.unselectAllEdges();
+      }
+      if(self.isDragging){
+         self.isDragging = false;
+         return
+      }
+      if(self.vertexSelectEnabled && self.allowDeselection) {
+         // Click on background or on the selected vertex -  deselect it.
+         if(id === null || id === self.selectionParent){
+            if(self.selectionParent !== null && self.onVertexSelect) {
+               self.onVertexSelect(self.selectionParent, false,x,y);
+            }
+            self.selectionParent = null;
+            return;
+         }
+         
+         // Start a new pair.
+         if(self.selectionParent === null && self.onVertexSelect) {
+            self.selectionParent = id;
+            self.onVertexSelect(id, true,x,y);
+            return;
+         }
+         
+         // Finish a new pair.
+         if(self.onPairSelect) {
+            self.onPairSelect(self.selectionParent, id, x, y);
+         }
+         if(self.onVertexSelect){
+            self.onVertexSelect(self.selectionParent, false, x,y);
+         }
+         self.selectionParent = null;
+         if(self.clickHandlerCallback){
+            self.clickHandlerCallback(id,x,y);
+         }
+      }
+   };
+
+   this.setOnVertexSelect = function(fct) {
+      this.onVertexSelect = fct;
+   };
+   this.setOnPairSelect = function(fct) {
+      this.onPairSelect = fct;
+   };
+   this.setOnEdgeSelect = function(fct) {
+      this.onEdgeSelect = fct;
+   };
+   this.setUnselectAllEdges = function(fct) {
+      this.unselectAllEdges = fct;
+   };
+   this.setStartDragCallback = function(fct) {
+      this.startDragCallback = fct;
+   };
+   this.setClickHandlerCallback = function(fct) {
+      this.clickHandlerCallback = fct;
+   };
+   this.setIsGoodPosition = function(fct) {
+      this.isGoodPosition = fct;
+   };
+
+   if(settings.enabled) {
+      this.setEnabled(true);
+   } else {
+      this.enabled = false;
+   }
+};
+
+function ArcDragger(settings) {
+   var self = this;
+   this.id = settings.id || "ArcDragger";
+   this.paper = settings.paper;
+   this.paperElementID = settings.paperElementID;
+   this.graph = settings.graph;
+   this.visualGraph = settings.visualGraph;
+   this.graphMouse = settings.graphMouse;
+   this.onEdgeSelect = settings.onEdgeSelect;
+   this.editEdgeLabel = settings.editEdgeLabel;
+   this.elementID = null;
+   this.startAngle = 0;
+   this.loop = false;
+   this.originalPosition = null;
+   this.edgeVertices = [];
+   this.edgeVerticesPos = [];
+   this.distance = null;
+   this.callback = settings.callback;
+   this.startDragCallback = settings.startDragCallback;
+   this.isDragging = false;
+   this.isOnLabel = false;
+   this.vertexThreshold = settings.vertexThreshold || 0;
+   this.edgeThreshold = settings.edgeThreshold || 10;
+
+   this.enabled = false;
+   this.dragEnabled = false;
+   this.unselectAll;
+
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      if(enabled) {
+         this.enableEdgesDrag();
+      }
+      else {
+         this.disableEdgesDrag();
+      }
+   };
+
+   this.setOnEdgeSelect = function(fct) {
+      this.onEdgeSelect = fct;
+   };
+   this.setEditEdgeLabel = function(fct) {
+      this.editEdgeLabel= fct;
+   };
+   this.setUnselectAll = function(fct) {
+      this.unselectAll= fct;
+   };
+
+   this.enableEdgesDrag = function() {
+      this.graphMouse.addEvent(this.id, "drag", "edge", null, [this.moveHandler, this.startHandler, this.endHandler]);
+      this.dragEnabled = true;
+   };
+
+   this.disableEdgesDrag = function() {
+      this.graphMouse.removeEvent(this.id);
+      this.dragEnabled = false;
+   };
+
+   this.startHandler = function(x, y, event) {
+      self.isDragging = false;
+      if(self.elementID !== this.data("id")){
+         self.unselectAll();
+         self.elementID = this.data("id");
+      }
+
+      self.startAngle = self.visualGraph.getEdgeVisualInfo(self.elementID).angle || 0;
+
+      self.edgeVertices = self.graph.getEdgeVertices(self.elementID);
+      for(var iVertex = 0; iVertex < self.edgeVertices.length; iVertex++){
+         self.edgeVerticesPos[iVertex] = self.visualGraph.getVertexVisualInfo(self.edgeVertices[iVertex]);         
+      }
+      self.loop = (self.edgeVertices[0] === self.edgeVertices[1]) ? true : false;
+
+      var paperPos = $(self.paper.canvas).offset();
+      
+      self.originalPosition = {x: (x - paperPos.left), y: (y - paperPos.top)};
+      self.isOnLabel = self.visualGraph.graphDrawer.isOnEdgeLabel(this.data("id"),self.originalPosition.x,self.originalPosition.y);
+      self.distance = Math.sqrt(Math.pow((self.edgeVerticesPos[0].x - self.edgeVerticesPos[1].x),2) + Math.pow((self.edgeVerticesPos[0].y - self.edgeVerticesPos[1].y),2));
+      if(self.startDragCallback){
+         self.startDragCallback(self.elementID);
+      }
+   };
+
+   this.endHandler = function(event) {
+      if(self.isDragging) {
+         self.isDragging = false;
+         if(settings.callback) {
+            settings.callback();
+         }
+         return;
+      }
+      var paperPos = $("#"+self.paperElementID).position();
+      var xMouse = event.pageX - paperPos.left;
+      var yMouse = event.pageY - paperPos.top;
+      if(self.isOnLabel){
+         if(self.editEdgeLabel){
+            self.editEdgeLabel(self.elementID,"edge");
+         }     
+         self.isOnLabel = false;
+      }else if(self.onEdgeSelect){
+
+         var info = self.graph.getEdgeInfo(self.elementID);
+         info.selected = !info.selected;
+         self.onEdgeSelect(self.elementID,info.selected);
+         if(!info.selected){
+            self.elementID = null;
+         }
+      }
+   };
+
+   this.moveHandler = function(dx, dy, x, y, event) {
+      if(!self.dragEnabled || self.isOnLabel || (dx == 0 && dy == 0)){
+         return;
+      }
+      self.isDragging = true;
+      var x0 = self.originalPosition.x;
+      var y0 = self.originalPosition.y;
+      var xMouse = x0 + dx;
+      var yMouse = y0 + dy;
+      var vInfo = self.visualGraph.getEdgeVisualInfo(self.elementID);
+      if(self.loop){
+         vInfo["radius-ratio"] = 1.5;
+         if(x0 === self.edgeVerticesPos[0].x){
+            var angle1 = (y0 < self.edgeVerticesPos[0].y) ? -90 : 90;
+         }else if(x0 > self.edgeVerticesPos[0].x){
+            var angle1 = Math.atan((y0 - self.edgeVerticesPos[0].y)/(x0 - self.edgeVerticesPos[0].x))*180/Math.PI;
+         }else{
+            var angle1 = Math.atan((y0 - self.edgeVerticesPos[0].y)/(x0 - self.edgeVerticesPos[0].x))*180/Math.PI + 180;
+         }
+         if(xMouse === self.edgeVerticesPos[0].x){
+            var angle2 = (yMouse < self.edgeVerticesPos[0].y) ? -90 : 90;
+         }else if(xMouse > self.edgeVerticesPos[0].x){
+            var angle2 = Math.atan((yMouse - self.edgeVerticesPos[0].y)/(xMouse - self.edgeVerticesPos[0].x))*180/Math.PI;
+         }else{
+            var angle2 = Math.atan((yMouse - self.edgeVerticesPos[0].y)/(xMouse - self.edgeVerticesPos[0].x))*180/Math.PI + 180;
+         }
+
+         var deltaAngle = (angle2 - angle1);
+         vInfo["angle"] = (self.startAngle - deltaAngle)%360;
+      }else{
+         var circleParameters = self.getCircleParameters(self.edgeVerticesPos[0].x,self.edgeVerticesPos[0].y,self.edgeVerticesPos[1].x,self.edgeVerticesPos[1].y,xMouse,yMouse);
+         if(circleParameters){
+            var radius = circleParameters.r;
+            var radiusRatio = radius /self.distance; 
+            vInfo["sweep"] = self.getSide(xMouse,yMouse,self.edgeVerticesPos);
+            if(self.getSide(circleParameters.xc,circleParameters.yc,self.edgeVerticesPos)){
+               vInfo["large-arc"] = (vInfo["sweep"]) ? 1 : 0;
+            }else{
+               vInfo["large-arc"] = (vInfo["sweep"]) ? 0 : 1;
+            }
+            if(radiusRatio > 5 && !vInfo["large-arc"])
+                  radiusRatio = 0;
+            vInfo["radius-ratio"] = Math.round(radiusRatio*100)/100;
+            if(vInfo["radius-ratio"] == 0){
+               delete vInfo["radius-ratio"];
+               delete vInfo["sweep"];
+               delete vInfo["large-arc"];
+            }
+         }
+      }
+      self.visualGraph.setEdgeVisualInfo(vInfo);
+      self.visualGraph.graphDrawer.refreshEdgePosition(self.edgeVertices[0],self.edgeVertices[1]);
+      if(self.unselectAll){
+         self.unselectAll();
+      }
+   };
+
+   this.getCircleParameters = function(x1,y1,x2,y2,x3,y3) {
+      if(y1 !== y3 && y2 !== y3){
+         var a1 = (x3 - x1)/(y1 - y3);
+         var a2 = (x3 - x2)/(y2 - y3);
+         if(a1 == a2)
+            return {r:0,xc:0,yc:0};
+         var b1 = (y1 + y3 - a1*(x1 + x3))/2;
+         var b2 = (y2 + y3 - a2*(x2 + x3))/2;
+         var xc = (b2 - b1)/(a1 - a2);
+         var yc = a1*xc + b1;
+
+         var r = Math.sqrt(Math.pow((xc - x1),2) + Math.pow((yc - y1),2));
+         return {r:r,xc:xc,yc:yc};
+      }
+   };
+
+   this.getSide = function(xMouse,yMouse,vertexPos) {
+      var x1 = vertexPos[0].x;
+      var x2 = vertexPos[1].x;
+      var y1 = vertexPos[0].y;
+      var y2 = vertexPos[1].y;
+      var side = (x1 < x2) ? 1 : 0;
+      if(x1 === x2) {
+         if(xMouse > x1){
+            side = (y1 > y2) ? 0 : 1;
+         }else{
+            side = (y1 > y2) ? 1 : 0;
+         }
+      }else if(y1 === y2){
+         if(yMouse > y1){
+            side = (x1 < x2) ? 0 : 1;
+         }else{
+            side = (x1 < x2) ? 1 : 0;
+         }
+      }else{
+         var a = (y2 - y1)/(x2 - x1);
+         var b = (y1 + y2 - a*(x1 + x2))/2;
+         if(yMouse > (a*xMouse + b)){
+            side = (x1 < x2) ? 0 : 1;
+         }
+      }
+      return side;
+   };
+
+   this.setStartDragCallback = function(fct) {
+      this.startDragCallback = fct;
+   };
+
+   if(settings.enabled) {
+      this.setEnabled(true);
+   }
+};
+
+function GraphDragger(settings) {
+   var self = this;
+   this.id = settings.id || "GraphDragger";
+   this.paper = settings.paper;
+   this.paperElementID = settings.paperElementID;
+   this.graph = settings.graph;
+   this.visualGraph = settings.visualGraph;
+
+   this.enabled = false;
+   this.dragEnabled = false;
+   this.scaleEnabled = false;
+   this.gridEnabled = false;
+
+   this.gridX = null;
+   this.gridY = null;
+   this.gridAlignment = {};
+   this.gridAlignmentRefIndex = null;
+
+   this.mouseInitPos = null;
+   this.vertInitPos = null;
+   this.isShiftPressed = false;
+   this.callback = settings.callback;
+   this.moveDragCallback = null;
+   this.unselectAllEdges = null;
+
+   this.dragMove = new PaperMouseEvent(this.paperElementID, this.paper, "mousemove", onDragMove, false);
+   this.dragEnd = new PaperMouseEvent(this.paperElementID, this.paper, "mouseup", onDragEnd, false);
+   this.fuzzyClicker = new FuzzyClicker(this.id + "$$$fuzzyclicker", this.paperElementID, this.paper, this.graph, this.visualGraph, 
+      onFuzzyClick, false, false, true, 0, settings.edgeThreshold, false, "mousedown");
+
+   this.setEnabled = function(enabled){
+      if(enabled == this.enabled) {
+         return;
+      }
+      if(enabled){
+         $(window).keydown(function(event){
+            if(event.which == 16){
+               if(!self.isShiftPressed){
+                  self.isShiftPressed = true;
+               }
+            }
+         });
+         $(window).keyup(function(event){
+            if(event.which == 16){
+               if(self.isShiftPressed){
+                  self.isShiftPressed = false;
+               }
+            }
+         });
+      }else{
+         $(window).off("keydown");
+         $(window).off("keyup");
+      }
+      this.dragEnabled = enabled;
+      this.scaleEnabled = enabled;
+      this.enabled = enabled;
+      this.fuzzyClicker.setEnabled(enabled);
+   };
+
+   this.setGridEnabled = function(enabled, gridX, gridY) {
+      this.gridEnabled = enabled;
+      if(enabled) {
+         this.gridX = gridX;
+         this.gridY = gridY;
+      }
+   };
+
+   this.setMoveDragCallback = function(fct) {
+      this.moveDragCallback = fct;
+   };
+   this.setUnselectAllEdges = function(fct) {
+      this.unselectAllEdges = fct;
+   };
+
+   function onFuzzyClick(elementType, id, x, y, event){
+      if(self.unselectAllEdges){
+         self.unselectAllEdges();
+      }
+      self.onDragStart(x,y,event);
+   }
+   this.onDragStart = function(x,y,event){
+      self.mouseInitPos = {x:x,y:y};
+      self.dragMove.setEnabled(true);
+      self.dragEnd.setEnabled(true);
+      var vertices = self.graph.getAllVertices();
+      self.vertInitPos = $.map(vertices, function(id) {
+         return {
+            id: id,
+            position: self.visualGraph.graphDrawer.getVertexPosition(id)
+         };
+      });
+      if(self.gridEnabled){
+         for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+            var vertex = vertices[iVertex];
+            var pos = self.visualGraph.graphDrawer.getVertexPosition(vertex);
+            var index = pos.x % self.gridX + ";" + pos.y % self.gridY;
+            var maxLength = 0;
+            if(!self.gridAlignment[index]){
+               self.gridAlignment[index] = [vertex];
+            }else{
+               self.gridAlignment[index].push(vertex);
+            }
+            if(self.gridAlignment[index].length > maxLength){
+               maxLength = self.gridAlignment[index].length;
+               self.gridAlignmentRefIndex = index;
+            }
+         }
+      }
+   };
+   function onDragMove(x,y,event){
+      if(self.isShiftPressed && self.scaleEnabled){
+         var ratioX = x / self.mouseInitPos.x;
+         var ratioY = y / self.mouseInitPos.y;
+         $.each(self.vertInitPos, function(index, element) {
+            self.visualGraph.graphDrawer.moveVertex(element.id, Math.round(element.position.x*ratioX), Math.round(element.position.y*ratioY));
+         });
+      }else if(self.dragEnabled){
+         var dx = x - self.mouseInitPos.x;
+         var dy = y - self.mouseInitPos.y;
+         if(self.gridEnabled){
+            for(var iVert = 0; iVert < self.vertInitPos.length; iVert++){
+               var vertPos = self.vertInitPos[iVert];
+               if($.inArray(vertPos.id,self.gridAlignment[self.gridAlignmentRefIndex]) >= 0){
+                  var newX = (vertPos.position.x + dx) - (vertPos.position.x + dx) % self.gridX;
+                  var newY = (vertPos.position.y + dy) - (vertPos.position.y + dy) % self.gridY;
+                  dx = newX - vertPos.position.x;
+                  dy = newY - vertPos.position.y;
+               }
+            }
+         }
+         $.each(self.vertInitPos, function(index, element) {
+            self.visualGraph.graphDrawer.moveVertex(element.id, element.position.x + dx, element.position.y + dy);
+         });
+
+         if(self.moveDragCallback){
+            self.moveDragCallback();
+         }
+      }
+   }
+   function onDragEnd(x,y,event){
+      self.dragMove.setEnabled(false);
+      self.dragEnd.setEnabled(false);
+      self.gridAlignment = {};
+      self.gridAlignmentRefIndex = null;
+      if(self.callback && x != self.mouseInitPos.x && y != self.mouseInitPos.y){
+         self.callback();
+      }
+   };
+   
+   if(settings.enabled) {
+      this.setEnabled(true);
+   }
+};
+
+function GraphEditor(settings) {
+   var self = this;
+   var paper = settings.paper;
+   var paperId = settings.paperElementID;
+   var graph = settings.graph;
+   var visualGraph = settings.visualGraph;
+   var onVertexSelect = settings.onVertexSelect;   // optional
+   var onEdgeSelect = settings.onEdgeSelect;    // optional
+   this.createVertex = settings.createVertex;   // optional
+   var startDragCallbackCallback = settings.startDragCallbackCallback; // optional
+   
+   var callback = settings.callback;
+   var selectVertexCallback = settings.selectVertexCallback;
+   this.contentValidation = settings.contentValidation;
+   this.vertexLabelValidation = settings.vertexLabelValidation;
+   this.writeContentCallback = settings.writeContentCallback;
+   this.resizeTableVertexCallback = settings.resizeTableVertexCallback;
+   // this.updateHandlersCallback = settings.updateHandlersCallback;
+
+   var defaultSelectedVertexAttr = {
+      "stroke": "blue",
+      "stroke-width": 4
+   };
+   var defaultSelectedEdgeAttr = {
+      "stroke": "blue",
+      "stroke-width": 6
+   };
+   var defaultVertexlabelAttr = {
+      "font-size": 15,
+      "font-family": "sans-serif"
+   };
+   var iconAttr = {
+      "stroke": "none",
+      "fill": "blue"
+   };
+   var overlayAttr = {
+      opacity: 0,
+      fill: "red",
+      "cursor": "pointer"
+   };
+   var vertexLabelAttr = settings.vertexLabelAttr || defaultVertexlabelAttr;
+   var edgeLabelAttr = settings.edgeLabelAttr || visualGraph.graphDrawer.edgeLabelAttr;
+   var selectedVertexAttr = settings.selectedVertexAttr || defaultSelectedVertexAttr;
+   var selectedEdgeAttr = settings.selectedEdgeAttr || defaultSelectedEdgeAttr;
+   this.alphabet = settings.alphabet;
+   if(!settings.vertexLabelPrefix && settings.vertexLabelPrefix != ""){
+      this.vertexLabelPrefix = "v_";
+   }else{
+      this.vertexLabelPrefix = settings.vertexLabelPrefix;
+   }
+   this.loopIcon = null;
+   this.cross = null;
+   this.edgeCross = null;
+   this.terminalIcon = null;
+   this.initialIcon = null;
+
+   this.textEditor = null;
+   this.editInfo = {};
+   this.edited = false; // true when label or content has just been modified
+   this.selectedEdges = [];
+   this.maxEdgeLabelLength = settings.maxEdgeLabelLength;
+
+   this.vertexDragAndConnect = new VertexDragAndConnect(settings);
+   this.arcDragger = new ArcDragger({
+      paper: settings.paper,
+      paperElementID: settings.paperElementID,
+      graph: graph,
+      visualGraph: visualGraph,  
+      graphMouse: settings.graphMouse,
+      onEdgeSelect: onEdgeSelect,
+      callback: settings.callback,
+      enabled: false
+   });
+   this.vertexCreator = new VertexCreator({
+      paper: settings.paper,
+      paperElementID: settings.paperElementID,
+      graph: graph,
+      visualGraph: visualGraph,  
+      createVertex: this.createVertex,
+      edgeThreshold: settings.edgeThreshold,
+      enabled: false
+   });
+   this.graphDragger = new GraphDragger({
+      paper: settings.paper,
+      paperElementID: settings.paperElementID,
+      graph: graph,
+      visualGraph: visualGraph,  
+      edgeThreshold: settings.edgeThreshold,
+      callback: settings.callback,
+      enabled: false
+   });
+
+   this.tableMode = false;
+   this.localTableMode = false;
+   this.gridEnabled = false;
+   this.removeVertexEnabled = false;
+   this.createEdgeEnabled = false;
+   this.removeEdgeEnabled = false;
+   this.vertexDragEnabled = false;
+   this.edgeDragEnabled = false;
+   this.graphDragEnabled = false;
+   this.multipleEdgesEnabled = false;
+   this.backwardEdgesEnabled = false;
+   this.loopEnabled = false;
+   this.editVertexLabelEnabled = false;
+   this.editVertexContentEnabled = false;
+   this.editEdgeLabelEnabled = false;
+   this.vertexSelectEnabled = false;
+   this.terminalEnabled = false;
+   this.initialEnabled = false;
+   this.defaultVertexLabelEnabled = false;
+   this.defaultEdgeLabelEnabled = false;
+   this.allowMutlipleTerminal = true;
+   this.allowMutlipleInitial = true;
+   this.allowSimultaneousInitialAndTerminal = true;
+   this.enabled = false;
+
+   this.setEnabled = function(enabled) {
+      if(enabled == this.enabled) {
+         return;
+      }
+      this.enabled = enabled;
+      self.vertexDragAndConnect.setEnabled(enabled);
+      self.arcDragger.setEnabled(enabled);
+      self.graphDragger.setEnabled(enabled);
+
+      this.setGraphDragEnabled(enabled);
+      this.setCreateVertexEnabled(enabled);
+      this.setCreateEdgeEnabled(enabled);
+      this.setVertexDragEnabled(enabled);
+      this.setEdgeDragEnabled(enabled);
+      this.setMultipleEdgesEnabled(enabled);
+      this.setBackwardEdgesEnabled(enabled);
+      this.setEditVertexLabelEnabled(enabled);
+      this.setEditVertexContentEnabled(enabled);
+      this.setEditEdgeLabelEnabled(enabled);
+      this.setLoopEnabled(enabled);
+      this.setVertexSelectEnabled(enabled);
+      this.setTerminalEnabled(enabled);
+      this.setInitialEnabled(enabled);
+      this.setDefaultVertexLabelEnabled(enabled);  
+      this.setDefaultEdgeLabelEnabled(enabled);     
+   };
+
+   this.setCreateVertexEnabled = function(enabled) {
+      this.vertexCreator.setEnabled(enabled);
+      this.removeVertexEnabled = enabled;
+      this.checkVertexSelect();
+   };
+   this.setCreateEdgeEnabled = function(enabled) {
+      this.createEdgeEnabled = enabled;
+      this.removeEdgeEnabled = enabled;
+      this.checkVertexSelect();
+   };
+   this.setVertexDragEnabled = function(enabled) {
+      this.vertexDragAndConnect.dragEnabled = enabled;
+      this.vertexDragEnabled = enabled;
+   };
+   this.setEdgeDragEnabled = function(enabled) {
+      this.edgeDragEnabled = enabled;
+      this.arcDragger.dragEnabled = enabled;
+   };
+   this.setGraphDragEnabled = function(enabled) {
+      this.graphDragEnabled = enabled;
+      this.graphDragger.dragEnabled = enabled;
+      this.checkGraphDrag();
+   };
+   this.setScaleGraphEnabled = function(enabled) {
+      this.graphDragger.scaleEnabled = enabled;
+      this.checkGraphDrag();
+   };
+   this.setMultipleEdgesEnabled = function(enabled) {
+      this.multipleEdgesEnabled = enabled;
+   };
+   this.setBackwardEdgesEnabled = function(enabled) {
+      this.backwardEdgesEnabled = enabled;
+   };
+   this.setLoopEnabled = function(enabled) {
+      this.loopEnabled = enabled;
+   };
+   this.setEditVertexLabelEnabled = function(enabled) {
+      this.editVertexLabelEnabled = enabled;
+   };
+   this.setEditVertexContentEnabled = function(enabled) {
+      this.editVertexContentEnabled = enabled;
+   };
+   this.setEditEdgeLabelEnabled = function(enabled) {
+      this.editEdgeLabelEnabled = enabled;
+   };
+   this.setGridEnabled = function(enabled,gridX,gridY) {
+      this.gridEnabled = {snapToGrid:enabled,gridX:gridX,gridY:gridY};
+      this.vertexDragAndConnect.setGridEnabled(enabled,gridX,gridY);
+      this.graphDragger.setGridEnabled(enabled,gridX,gridY);
+   };
+   this.setTerminalEnabled = function(enabled) {
+      this.terminalEnabled = enabled;
+      this.checkVertexSelect();
+   };
+   this.setInitialEnabled = function(enabled) {
+      this.initialEnabled = enabled;
+      this.checkVertexSelect();
+   };
+   this.setVertexSelectEnabled = function(enabled) {
+      this.vertexSelectEnabled = enabled;
+      this.vertexDragAndConnect.setVertexSelectEnabled(enabled);
+   };
+   this.setDefaultVertexLabelEnabled = function(enabled) {
+      this.defaultVertexLabelEnabled = enabled;
+   };
+   this.setDefaultEdgeLabelEnabled = function(enabled) {
+      this.defaultEdgeLabelEnabled = enabled;
+   };
+   this.setTableMode = function(enabled) {
+      this.tableMode = enabled;
+      var vertices = graph.getAllVertices();
+      for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+         var vertex = vertices[iVertex];
+         var vInfo = visualGraph.getVertexVisualInfo(vertex);
+         if(enabled){
+            vInfo.tableMode = enabled;
+         }else{
+            delete vInfo.tableMode;
+         }
+      }
+      visualGraph.redraw();
+      this.updateHandlers();
+   };
+   this.setLocalTableMode = function(enabled) {
+      this.localTableMode = enabled;
+   };
+   this.setIconAttr = function(attr){
+      iconAttr = attr;
+   };
+   this.setAllowMultipleTerminal = function(enabled) {
+      this.allowMutlipleTerminal = enabled;
+   };
+   this.setAllowMultipleInitial = function(enabled) {
+      this.allowMutlipleInitial = enabled;
+   };
+   this.setAllowSimultaneousInitialAndTerminal = function(enabled) {
+      this.allowSimultaneousInitialAndTerminal = enabled;
+   };
+
+
+   this.checkVertexSelect = function() {
+      if(!this.terminalEnabled && !this.initialEnabled && !this.removeVertexEnabled && !this.createEdgeEnabled && !this.vertexSelectEnabled){
+         this.setVertexSelectEnabled(false);
+      }else{
+         this.setVertexSelectEnabled(true);
+      }
+   };
+   this.checkGraphDrag = function() {
+      if(!this.graphDragger.dragEnabled && !this.graphDragger.scaleEnabled){
+         this.graphDragger.setEnabled(false);
+      }else{
+         this.graphDragger.setEnabled(true);
+      }
+   };
+
+   this.defaultOnVertexSelect = function(vertexId,selected,x,y) {
+      var attr;
+      // console.log(vertexId+" select "+selected);
+      if(selected) {
+         self.edited = false;
+         attr = selectedVertexAttr;
+         self.addIcons(vertexId);
+         var vInfo = visualGraph.getVertexVisualInfo(vertexId);
+         if(!vInfo.tableMode){
+            self.editLabel(vertexId,"vertex");
+         }else{
+            /* table mode */
+            var offset = $(paper.canvas).offset();
+            var xPos = x - offset.left;
+            var yPos = y - offset.top;
+            var info = graph.getVertexInfo(vertexId);
+            var content = (info.content) ? info.content : "";
+            var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+            if(yPos < (vInfo.y - boxSize.h/2 + 2*visualGraph.graphDrawer.vertexLabelAttr["font-size"])){
+               self.editLabel(vertexId,"vertex");
+            }else{
+               self.editContent(vertexId);
+            }
+         }
+      }else{
+         attr = visualGraph.graphDrawer.circleAttr;
+         self.removeIcons(vertexId);
+      }
+      if(visualGraph.getRaphaelsFromID(vertexId)[0]){
+         visualGraph.getRaphaelsFromID(vertexId)[0].attr(attr);
+      }   
+      if(selectVertexCallback){
+         selectVertexCallback(vertexId,selected);
+      }
+   };
+
+   this.defaultOnPairSelect = function(id1,id2,x,y) {
+      // console.log("pair "+id1+" "+id2);
+      if(!self.createEdgeEnabled){
+         return
+      }
+      self.startDragCallback(id1);
+      if(self.edited)
+         return;
+      
+      if(!self.multipleEdgesEnabled){
+         if(!self.backwardEdgesEnabled){
+            var previousEdges = graph.getEdgesBetween(id1,id2);
+         }else{
+            var previousEdges = graph.getEdgesFrom(id1,id2);
+         }
+         if(previousEdges.length > 1){
+            return;
+         }else if(previousEdges.length == 1){
+            return;
+         }
+      }
+      
+      var edgeGuid = 0;
+      while(graph.isEdge("e_" + edgeGuid)) {
+         edgeGuid++;
+      }
+      var edgeID = "e_" + edgeGuid;
+      var edgeLabel = (self.alphabet) ? self.alphabet[0] : edgeID;
+      if(self.defaultEdgeLabelEnabled){
+         graph.addEdge(edgeID, id1, id2,{label:edgeLabel});
+      }else{
+         graph.addEdge(edgeID, id1, id2);
+      }
+      self.setNewEdgeVisualInfo(edgeID,id1,id2);
+      if(callback){
+         callback();
+      }
+   };
+
+   this.clickHandlerCallback = function(id,x,y) {
+      if(!self.createEdgeEnabled){
+         /* if edge creation is disabled, change selected vertex in a single click */ 
+         self.vertexDragAndConnect.onVertexSelect(id,true,x,y);
+         self.vertexDragAndConnect.selectionParent = id;
+      }
+   };
+
+   this.defaultOnEdgeSelect = function(edgeID,selected) {
+      var edge = visualGraph.getRaphaelsFromID(edgeID);
+      if(!self.removeEdgeEnabled){
+         if(!selected){
+            $(document).off("keydown");
+            edge[0].attr(visualGraph.graphDrawer.lineAttr);
+            if(self.edgeCross)
+               self.edgeCross.remove();
+         }
+         return;
+      }
+
+      if(selected){
+         self.selectedEdges.push(edgeID);
+         edge[0].attr(selectedEdgeAttr);
+
+         self.addEdgeCross(edgeID);
+         var info = graph.getEdgeInfo(edgeID);
+         if(!info.label || info.label.length == 0){
+            self.editLabel(edgeID,"edge");
+         }
+         $(document).keydown(function(event){
+            if(event.which == 46){  // if press delete
+               if(self.textEditor){
+                  self.textEditor.remove();
+                  self.editInfo = {};
+               }
+               graph.removeEdge(edgeID);
+               if(callback){
+                  callback();
+               }
+            }
+         });
+      }else{
+         self.selectedEdges = [];
+         $(document).off("keydown");
+         edge[0].attr(visualGraph.graphDrawer.lineAttr);
+         if(self.edgeCross)
+            self.edgeCross.remove();
+      }
+   };
+
+   this.unselectAllEdges = function() {
+      for(var iEdge = 0; iEdge < self.selectedEdges.length; iEdge++){
+         var edge = self.selectedEdges[iEdge];
+         if(!graph.isEdge(edge)){
+            continue
+         }
+         var info = graph.getEdgeInfo(edge);
+         if(info.selected){
+            info.selected = false;
+         }
+         self.arcDragger.onEdgeSelect(edge,false);
+      }
+   };
+
+   this.defaultCreateVertex = function(x,y) {
+      var vertexGuid = 0;
+      while(graph.isVertex("v_" + vertexGuid)) {
+         vertexGuid++;
+      }
+      var vertexId = "v_" + vertexGuid;
+      var vData = {x: Math.round(x), y: Math.round(y)};
+      if(self.localTableMode || self.tableMode){
+         /* don't show table mode if false */
+         vData.tableMode = true;
+      }
+      visualGraph.setVertexVisualInfo(vertexId, vData);
+      if(self.defaultVertexLabelEnabled){
+         var label = self.getDefaultLabel();
+         graph.addVertex(vertexId,{label:label});
+      }else{
+         graph.addVertex(vertexId);
+      }
+      if(callback){
+         callback();
+      }
+   };
+
+   this.getDefaultLabel = function() {
+      var vertices = graph.getAllVertices();
+      var index = 0;
+      do{
+         var alreadyExist = false;
+         for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+            var vertex = vertices[iVertex];
+            var info = graph.getVertexInfo(vertex);
+            var label = this.vertexLabelPrefix + index;
+            if(info.label == label){
+               alreadyExist = true;
+               index++;
+               break;
+            }
+         }
+      }while(alreadyExist)
+      return label;
+   };
+
+   this.setNewEdgeVisualInfo = function(edgeID,id1,id2) {
+      var edges = graph.getEdgesBetween(id1,id2);
+      // console.log(edges)
+      if(id1 === id2){
+         if(edges.length <= 1)
+            return;
+         var angle = 0;
+         var validAngle;
+         var increment = 20;
+         var nTry = 0;
+         do{
+            validAngle = true;
+            if(nTry >= 360/increment){
+               increment /= 2;
+               nTry = 0;
+            }
+            for(var iEdge = 0; iEdge < edges.length; iEdge++){
+               if(edges[iEdge] !== edgeID){
+                  var vInfo = visualGraph.getEdgeVisualInfo(edges[iEdge]);
+                  if(vInfo.angle < angle + increment/2 && vInfo.angle > angle - increment/2){
+                     angle = (angle + increment)%360;
+                     validAngle = false;
+                     nTry++;
+                     break;
+                  }
+               }
+            }
+         }while(!validAngle);
+         visualGraph.setEdgeVisualInfo(edgeID,{angle:angle});
+      }else{
+         var edgesFrom = graph.getEdgesFrom(id1,id2);
+         var validParameters;
+         var parameterSet = [
+            {"sweep":0,"large-arc":0,"radius-ratio":0},
+            {"sweep":0,"large-arc":0,"radius-ratio":1},
+            {"sweep":1,"large-arc":0,"radius-ratio":1},
+            {"sweep":0,"large-arc":0,"radius-ratio":0.75},
+            {"sweep":1,"large-arc":0,"radius-ratio":0.75},
+            {"sweep":0,"large-arc":0,"radius-ratio":0.6},
+            {"sweep":1,"large-arc":0,"radius-ratio":0.6},
+            {"sweep":0,"large-arc":0,"radius-ratio":0.55},
+            {"sweep":1,"large-arc":0,"radius-ratio":0.55},
+            {"sweep":0,"large-arc":0,"radius-ratio":0.51},
+            {"sweep":1,"large-arc":0,"radius-ratio":0.51},
+            {"sweep":0,"large-arc":1,"radius-ratio":0.51},
+            {"sweep":1,"large-arc":1,"radius-ratio":0.51},
+            {"sweep":0,"large-arc":1,"radius-ratio":0.55},
+            {"sweep":1,"large-arc":1,"radius-ratio":0.55},
+            {"sweep":0,"large-arc":1,"radius-ratio":0.6},
+            {"sweep":1,"large-arc":1,"radius-ratio":0.6},
+            {"sweep":0,"large-arc":1,"radius-ratio":0.75},
+            {"sweep":1,"large-arc":1,"radius-ratio":0.75},
+            {"sweep":0,"large-arc":1,"radius-ratio":1},
+            {"sweep":1,"large-arc":1,"radius-ratio":1}
+         ];
+         var nTry = 0;
+         do{
+            validParameters = true;
+            if(nTry === parameterSet.length - 1){
+               nTry = 0;
+               break;
+            }
+            for(var iEdge = 0; iEdge < edges.length; iEdge++){
+               if(edges[iEdge] !== edgeID){
+                  var isFrom = edgesFrom.includes(edges[iEdge]);
+                  var vInfo = visualGraph.getEdgeVisualInfo(edges[iEdge]);
+                  if(!vInfo["radius-ratio"]){
+                     vInfo["radius-ratio"] = 0;
+                     vInfo["sweep"] = (isFrom) ? 0 : 1;
+                     vInfo["large-arc"] = 0;
+                  }
+                  if(vInfo["radius-ratio"] === parameterSet[nTry]["radius-ratio"] && 
+                     (vInfo["sweep"] === parameterSet[nTry]["sweep"] && isFrom || vInfo["sweep"] !== parameterSet[nTry]["sweep"] && !isFrom) && 
+                     vInfo["large-arc"] === parameterSet[nTry]["large-arc"]){
+                     validParameters = false;
+                     nTry++;
+                     break;
+                  }
+               }
+            }
+            if(nTry == 0){
+               var neighbors1 = graph.getNeighbors(id1);
+               var neighbors2 = graph.getNeighbors(id2);
+               var neighbors = neighbors1.concat(neighbors2);
+               for(var neighbor of neighbors){
+                  if(neighbor != id1 && neighbor != id2 && areAligned(id1,id2,neighbor)){
+                     var edges1 = graph.getEdgesBetween(id1,neighbor);
+                     var edges2 = graph.getEdgesBetween(id2,neighbor);
+                     var edges3 = edges1.concat(edges2);
+                     for(var iEdge = 0; iEdge < edges3.length; iEdge++){
+                        var edge = edges3[iEdge];
+                        var vInfo = visualGraph.getEdgeVisualInfo(edge);
+                        if(!vInfo["radius-ratio"]){
+                           validParameters = false;
+                           nTry++;
+                        }
+                     }
+                  }
+               }
+            }
+         }while(!validParameters);
+         // console.log(parameterSet[nTry])
+         visualGraph.setEdgeVisualInfo(edgeID,parameterSet[nTry]);
+      }
+      for(var edge of edges){
+         var vInfo = visualGraph.getEdgeVisualInfo(edge);
+         if(!vInfo["radius-ratio"]){
+            vInfo = {};
+            visualGraph.setEdgeVisualInfo(edge,vInfo);
+         }
+      }
+      visualGraph.graphDrawer.refreshEdgePosition(id1,id2);
+   };
+
+   function areAligned(id1,id2,id3){
+      var vInfo1 = visualGraph.getVertexVisualInfo(id1); 
+      var vInfo2 = visualGraph.getVertexVisualInfo(id2); 
+      var vInfo3 = visualGraph.getVertexVisualInfo(id3);
+      if(vInfo1.x != vInfo2.x){
+         var a = (vInfo2.y - vInfo1.y)/(vInfo2.x - vInfo1.x);
+         var b = vInfo1.y - a*vInfo1.x;     
+         if(vInfo3.y < (a * vInfo3.x + b + 5) && vInfo3.y > (a * vInfo3.x + b - 5)){
+            return true;
+         }else{
+            return false;
+         }
+      }else{
+         if(vInfo3.x < (vInfo1.x + 5) && vInfo3.x > (vInfo1.x - 5)){
+            return true;
+         }else{
+            return false;
+         }
+      }
+   };
+
+   /* ICONS  */
+
+   this.addIcons = function(vertexId) {
+      if(this.createEdgeEnabled && this.loopEnabled)
+         this.addLoopIcon(vertexId);
+      if(this.removeVertexEnabled)
+         this.addCross(vertexId);
+      if(this.terminalEnabled){
+         if(this.allowMutlipleTerminal){
+            this.addTerminalIcon(vertexId);
+         }else{
+            var terminal = this.getInitialOrTerminal(vertexId,"terminal");
+            if(terminal == null || terminal == vertexId){
+               if(this.allowSimultaneousInitialAndTerminal){
+                  this.addTerminalIcon(vertexId);
+               }else{
+                  var info = graph.getVertexInfo(vertexId);
+                  if(!info.initial){
+                     this.addTerminalIcon(vertexId);
+                  }
+               }
+            }
+         }
+      }
+      if(this.initialEnabled){
+         // if(this.allowMutlipleInitial){
+         //    this.addInitialIcon(vertexId);
+         // }else{
+         //    var initial = this.getInitialOrTerminal(vertexId,"initial");
+         //    if(initial == null || initial == vertexId){
+               if(this.allowSimultaneousInitialAndTerminal){
+                  this.addInitialIcon(vertexId);
+               }else{
+                  var info = graph.getVertexInfo(vertexId);
+                  if(!info.terminal){
+                     this.addInitialIcon(vertexId);
+                  }
+               }
+            // }
+         // }
+      }
+   };
+   this.removeIcons = function(id) {
+      // console.log("removeIcons")
+      var raphObj = visualGraph.getRaphaelsFromID(id);
+      if(self.loopIcon){
+         // console.log("remove loop");
+         self.loopIcon.remove();
+         self.loopIcon = null;
+         raphObj.pop();
+      }
+      if(self.cross){
+         // console.log("remove cross "+id);
+         self.cross.remove();
+         self.cross = null;
+         raphObj.pop();
+      }
+      if(self.terminalIcon){
+         // console.log("remove terminal "+id);
+         self.terminalIcon.remove();
+         self.terminalIcon = null;
+         raphObj.pop();
+      }
+      if(self.initialIcon){
+         // console.log("remove initial");
+         self.initialIcon.remove();
+         self.initialIcon = null;
+         raphObj.pop();
+      }
+   };
+
+   this.getInitialOrTerminal = function(vID,state) {
+      var vertices = graph.getAllVertices();
+      var isState = null;
+      for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+         var vertex = vertices[iVertex];
+         var info = graph.getVertexInfo(vertex);
+         if(info[state]){
+            isState = vertex;
+            break;
+         }
+      }
+      return isState;
+   };
+
+   this.addLoopIcon = function(vertexId) {
+      var vertexPos = visualGraph.getVertexVisualInfo(vertexId);
+      var vertexRadius = visualGraph.graphDrawer.circleAttr.r;
+      var size = 20;
+
+      if(!vertexPos.tableMode){
+         var X = vertexPos.x - vertexRadius - size;
+         var Y = vertexPos.y - vertexRadius - 3*size/4;
+      }else{
+         var info = graph.getVertexInfo(vertexId);
+         var content = (info.content) ? info.content : "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+         var X = vertexPos.x - boxSize.w/2 - size;
+         var Y = vertexPos.y - boxSize.h/2 - 3*size/4;
+      }
+      
+      if(self.loopIcon){
+         self.loopIcon.remove();
+      }
+      self.loopIcon = self.drawLoopIcon(X,Y,size);
+      visualGraph.pushVertexRaphael(vertexId,self.loopIcon);
+      
+      self.loopIcon.mousedown(function(){
+         self.vertexDragAndConnect.onPairSelect(vertexId,vertexId);
+      });
+   };
+
+   this.drawLoopIcon = function(x,y,size) {
+      var qSize = size/4;
+      var icon = paper.path(
+         "M" + (x + 2*qSize) + "," + y +
+         "A" + size/2 + "," + size/2 + "," + 0 + "," + 1 + "," + 0 + "," + (x + 2*qSize + 0.1) + "," + (y)
+         ).attr({"stroke":iconAttr.fill,"stroke-width":size/5,"arrow-end":"classic-medium-short"});
+      var overlay = paper.rect(x,y,size,size).attr(overlayAttr);
+      return paper.set(icon,overlay);
+   };
+
+   this.addCross = function(vertexId) {
+      var vertexPos = visualGraph.getVertexVisualInfo(vertexId);
+      var vertexRadius = visualGraph.graphDrawer.circleAttr.r;
+      var crossSize = 20;
+      if(!vertexPos.tableMode){
+         var crossX = vertexPos.x + vertexRadius;
+         var crossY = vertexPos.y - vertexRadius - 3*crossSize/4;
+      }else{
+         var info = graph.getVertexInfo(vertexId);
+         var content = (info.content) ? info.content : "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+         var crossX = vertexPos.x + boxSize.w/2;
+         var crossY = vertexPos.y - boxSize.h/2 - 3*crossSize/4;
+      }
+      if(self.cross){
+         self.cross.remove();
+      }
+      self.cross = self.drawCross(crossX,crossY,crossSize);
+      visualGraph.pushVertexRaphael(vertexId,self.cross);
+      
+      self.cross.mousedown(function(){
+         self.removeIcons(vertexId);
+         if(self.vertexDragAndConnect){
+            self.vertexDragAndConnect.selectionParent = null;
+         }
+         graph.removeVertex(vertexId);
+         if(self.textEditor){
+            self.textEditor.remove();
+            self.editInfo = {};
+         }
+         if(callback){
+            callback();
+         }
+      });
+   };
+
+   this.addEdgeCross = function(edgeID) {
+      var crossSize = 20;
+      var crossPos = self.getCrossPosition(edgeID,crossSize);
+      var crossX = crossPos.x;
+      var crossY = crossPos.y;
+      if(self.edgeCross){
+         self.edgeCross.remove();
+      }
+      self.edgeCross = self.drawCross(crossX,crossY,crossSize);
+      visualGraph.pushEdgeRaphael(edgeID,self.edgeCross);
+      
+      self.edgeCross.click(function(){
+         graph.removeEdge(edgeID);
+         if(callback){
+            callback();
+         }
+      });
+   };
+
+   this.drawCross = function(x,y,size) {
+      var qSize = size/4;
+      var icon = paper.path(
+         "M" + (x + qSize) + "," + y +
+         "L" + (x + size/2) + "," + (y + qSize) +
+         "L" + (x + 3*qSize) + "," + y +
+         "L" + (x + size) + "," + (y + qSize) + 
+         "L" + (x + 3*qSize) + "," + (y + size/2) +
+         "L" + (x + size) + "," + (y + 3*qSize) +
+         "L" + (x + 3*qSize) + "," + (y + size) +
+         "L" + (x + size/2) + "," + (y + 3*qSize) +
+         "L" + (x + qSize) + "," + (y + size) +
+         "L" + x + "," + (y + 3*qSize) +
+         "L" + (x + qSize) + "," + (y + size/2) +
+         "L" + x + "," + (y + qSize) + 
+         "Z" 
+         ).attr(iconAttr);
+      var overlay = paper.rect(x,y,size,size).attr(overlayAttr);
+      return paper.set(icon,overlay);
+   };
+
+   this.addTerminalIcon = function(vertexId) {
+      // console.log("add Terminal")
+      var vertexPos = visualGraph.getVertexVisualInfo(vertexId);
+      var vertexRadius = visualGraph.graphDrawer.circleAttr.r;
+      var size = 20;
+
+      if(!vertexPos.tableMode){
+         var X = vertexPos.x + vertexRadius;
+         var Y = vertexPos.y + vertexRadius;
+      }else{
+         var info = graph.getVertexInfo(vertexId);
+         var content = (info.content) ? info.content : "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+         var X = vertexPos.x + boxSize.w/2;
+         var Y = vertexPos.y + boxSize.h/2;
+      }
+      
+      if(self.terminalIcon){
+         self.terminalIcon.remove();
+      }
+      self.terminalIcon = self.drawTerminalIcon(X,Y,size);
+      visualGraph.pushVertexRaphael(vertexId,self.terminalIcon);
+      
+      self.terminalIcon.mousedown(function() {
+         self.removeIcons(vertexId);
+         self.setTerminal(vertexId);
+      });
+   };
+
+   this.setTerminal = function(vID) {
+      var info = graph.getVertexInfo(vID);
+      info.terminal = !info.terminal;
+      
+      graph.setVertexInfo(vID,info);
+      visualGraph.redraw();
+      self.updateHandlers();
+      
+      if(callback){
+         callback();
+      }
+   };
+
+   this.drawTerminalIcon = function(x,y,size) {
+      var qSize = size/4;
+      var attr = {
+         fill: "none",
+         stroke: iconAttr.fill,
+         "stroke-width": size/6
+      }
+      var circle1 = paper.circle(x + size/2,y + size/2,size/4).attr(attr);
+      var circle2 = paper.circle(x + size/2,y + size/2,size/2).attr(attr);
+
+      var overlay = paper.rect(x,y,size,size).attr(overlayAttr);
+      return paper.set(circle1,circle2,overlay);
+   };
+
+   this.addInitialIcon = function(vertexId) {
+      var vertexPos = visualGraph.getVertexVisualInfo(vertexId);
+      var vertexRadius = visualGraph.graphDrawer.circleAttr.r;
+      var size = 20;
+
+      if(!vertexPos.tableMode){
+         var X = vertexPos.x - vertexRadius - size;
+         var Y = vertexPos.y + vertexRadius;
+      }else{
+         var info = graph.getVertexInfo(vertexId);
+         var content = (info.content) ? info.content : "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+         var X = vertexPos.x - boxSize.w/2 - size;
+         var Y = vertexPos.y + boxSize.h/2;
+      }
+
+      
+      if(self.initialIcon){
+         self.initialIcon.remove();
+      }
+      self.initialIcon = self.drawInitialIcon(X,Y,size);
+      visualGraph.pushVertexRaphael(vertexId,self.initialIcon);
+      
+      self.initialIcon.mousedown(function(){
+         self.removeIcons(vertexId);
+         self.setInitial(vertexId);
+      });
+   };
+
+   this.setInitial = function(vID) {
+      var info = graph.getVertexInfo(vID);
+      info.initial = !info.initial;      
+      graph.setVertexInfo(vID,info);
+
+      if(!self.allowMutlipleInitial){
+         var vertices = graph.getAllVertices();
+         for(var vertex of vertices){
+            if(vertex != vID){
+               var currInfo = graph.getVertexInfo(vertex);
+               if(currInfo.initial){
+                  currInfo.initial = false;      
+                  graph.setVertexInfo(vertex,currInfo);
+               }
+            }
+         }
+      }
+      visualGraph.redraw();
+      self.updateHandlers();
+      
+      if(callback){
+         callback();
+      }
+   };
+
+   this.drawInitialIcon = function(x,y,size) {
+      var qSize = size/4;
+      var icon = paper.path(
+         "M" + (x + size) + "," + y +
+         "V" + (y + size/2) +
+         "L" + (x + 7*qSize/2) + "," + (y + 3*qSize/2) +
+         "L" + (x + qSize) + "," + (y + size) +
+         "L" + x + "," + (y + 3*qSize) + 
+         "L" + (x + 5*qSize/2) + "," + (y + qSize/2) + 
+         "L" + (x + size/2) + "," + y + 
+         "Z"
+         ).attr(iconAttr);
+      var overlay = paper.rect(x,y,size,size).attr(overlayAttr);
+      return paper.set(icon,overlay);
+   };
+
+   this.getCrossPosition = function(edgeID,crossSize) {
+      var edgeVertices = graph.getEdgeVertices(edgeID);
+      vertex1 = edgeVertices[0];
+      vertex2 = edgeVertices[1];
+      var info = graph.getEdgeInfo(edgeID);
+      var vInfo = visualGraph.getEdgeVisualInfo(edgeID);
+      var vertex1Pos = visualGraph.getVertexVisualInfo(vertex1);
+      var vertex2Pos = visualGraph.getVertexVisualInfo(vertex2);
+      var x1 = vertex1Pos.x;
+      var y1 = vertex1Pos.y;
+      var x2 = vertex2Pos.x;
+      var y2 = vertex2Pos.y;
+
+      var margin = 10;
+      var angle;
+      if(x1 === x2){
+         if(y1 > y2){
+            angle = Math.PI/2;
+         }else{
+            angle = -Math.PI/2;
+         }
+      }else{
+         angle = Math.atan((y2 - y1)/(x2 - x1));
+      }
+      if(vInfo["radius-ratio"] || vertex1 ===  vertex2){ // if curved edge
+         if(!vertex2Pos.tableMode){
+            if(vertex1 === vertex2){
+               angle = vInfo.angle*Math.PI/180 || 0;
+               var R = visualGraph.graphDrawer.circleAttr.r*vInfo["radius-ratio"];
+               var xm = x1 + 2*R*Math.cos(angle);
+               var ym = y1 - 2*R*Math.sin(angle);
+               var x = xm + (crossSize)*Math.sin(angle - Math.PI/2) - crossSize/2;
+               var y = ym - (crossSize)*Math.cos(angle + Math.PI/2) - crossSize/2;
+            }else{
+               var D = Math.sqrt(Math.pow((x2-x1),2) + Math.pow((y2-y1),2));
+               var R = D*vInfo["radius-ratio"];
+               var s = vInfo["sweep"] || 0;
+               var l = vInfo["large-arc"] || 0;
+               var cPos = visualGraph.graphDrawer.getCenterPosition(R,s,l,vertex1Pos,vertex2Pos);
+               if(x2 > x1){
+                  var xm = (s) ? cPos.x + R*Math.sin(angle) : cPos.x - R*Math.sin(angle);
+                  var ym = (s) ? cPos.y - R*Math.cos(angle) : cPos.y + R*Math.cos(angle);
+               }else{
+                  var xm = (s) ? cPos.x - R*Math.sin(angle) : cPos.x + R*Math.sin(angle);
+                  var ym = (s) ? cPos.y + R*Math.cos(angle) : cPos.y - R*Math.cos(angle);
+               }
+               
+               if(x1 < x2){
+                  var x = (s) ? xm - (crossSize/2)*Math.sin(angle) - crossSize/2 : xm + (crossSize/2)*Math.sin(angle) - crossSize/2;
+                  var y = (s) ? ym + (crossSize/2 + margin)*Math.cos(angle) - crossSize/2 : ym - (crossSize/2 + margin)*Math.cos(angle) - crossSize/2;
+               }else{
+                  var x = (s) ? xm + (crossSize/2)*Math.sin(angle) - crossSize/2 : xm - (crossSize/2)*Math.sin(angle) - crossSize/2;
+                  var y = (s) ? ym - (crossSize/2 + margin)*Math.cos(angle) - crossSize/2 : ym + (crossSize/2 + margin)*Math.cos(angle) - crossSize/2;
+               }
+            }
+         }else{
+            /* table mode */
+            var info1 = graph.getVertexInfo(vertex1);
+            var content = (info1.content) ? info1.content : "";
+            var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+            
+            if(vertex1 === vertex2){
+               /* loop */
+               angle = vInfo.angle*Math.PI/180 || 0;
+               angle = visualGraph.graphDrawer.bindAngle(angle);
+               var R = visualGraph.graphDrawer.circleAttr.r*vInfo["radius-ratio"];
+               
+               var beta = Math.atan(boxSize.h/boxSize.w);   // angle between center of vertex and corner of box
+               var surfPos = visualGraph.graphDrawer.getSurfacePointFromAngle(vertex1Pos.x,vertex1Pos.y,boxSize.w,boxSize.h,Math.PI - angle);
+               if(angle <= beta && angle > -beta){
+                  /* right side */
+                  var xm = surfPos.x + R*3/2;
+                  var ym = surfPos.y;
+                  var x = xm - crossSize*1.2;
+                  var y = ym - crossSize/2;
+               }else if(angle <= Math.PI + beta && angle > Math.PI - beta){
+                  /* left side */
+                  var xm = surfPos.x - R*3/2;
+                  var ym = surfPos.y;
+                  var x = xm + crossSize/2;
+                  var y = ym - crossSize/2;
+               }else if(angle > beta && angle <= Math.PI - beta){
+                  /* top */
+                  var xm = surfPos.x;
+                  var ym = surfPos.y - R*3/2;
+                  var x = xm - crossSize/2;
+                  var y = ym + crossSize/2;
+               }else if(angle > Math.PI + beta || angle <= - beta){
+                  /* bottom */
+                  var xm = surfPos.x;
+                  var ym = surfPos.y + R*3/2;
+                  var x = xm - crossSize/2;
+                  var y = ym - crossSize*1.2;
+               }
+            }else{
+               var angle = visualGraph.graphDrawer.getAngleBetween(x1,y1,x2,y2);
+               var s = vInfo["sweep"] || 0;
+               var l = vInfo["large-arc"] || 0;
+               var D = Math.sqrt(Math.pow((x2-x1),2) + Math.pow((y2-y1),2));
+               var R = D*vInfo["radius-ratio"];
+               if(vertex2Pos.tableMode){
+                  var info = graph.getVertexInfo(vertex2);
+                  var content = (info.content) ? info.content : "";
+                  var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+                  
+                  var alpha = (l) ? (Math.asin(D/(2*R)) + Math.PI) : Math.asin(D/(2*R));  
+                  var angle2 = angle;
+                  
+                  if(vertex1Pos.tableMode){
+                     if(s){
+                        var alpha1 = (l) ? -angle2 - alpha : alpha - angle2;
+                     }else{
+                        var alpha1 = (l) ? alpha - angle2 : -angle2 - alpha;
+                     }
+                     var info1 = graph.getVertexInfo(vertex1);
+                     var content1 = (info1.content) ? info1.content : "";
+                     var boxSize1 = visualGraph.graphDrawer.getBoxSize(content1);
+                     var delta = Math.PI - alpha1;
+                     var pos1 = visualGraph.graphDrawer.getSurfacePointFromAngle(x1,y1,boxSize1.w,boxSize1.h,delta);
+                  }else{
+                     var pos1 = { x: x1, y: y1 };
+                  }
+                  if(s){
+                     angle2 = (l) ? angle2 - alpha : angle2 + alpha;
+                  }else{
+                     angle2 = (l) ? angle2 + alpha : angle2 - alpha;
+                  }
+
+                  var pos2 = visualGraph.graphDrawer.getSurfacePointFromAngle(x2,y2,boxSize.w,boxSize.h,angle2);
+
+                  var D2 = Math.sqrt(Math.pow((pos2.x-pos1.x),2) + Math.pow((pos2.y-pos1.y),2));
+                  var R = D2*vInfo["radius-ratio"];
+                  var cPos = visualGraph.graphDrawer.getCenterPosition(R,s,l,pos1,pos2);
+               }else{
+                  var cPos = visualGraph.graphDrawer.getCenterPosition(R,s,l,vertex1Pos,vertex2Pos);
+               }
+               if(vInfo["radius-ratio"] == 0.5){
+                  R += 10;
+               }
+               var xm = (s) ? cPos.x + R*Math.sin(angle) : cPos.x - R*Math.sin(angle);
+               var ym = (s) ? cPos.y - R*Math.cos(angle) : cPos.y + R*Math.cos(angle);
+               
+               var x = (s) ? xm - (crossSize/2)*Math.sin(angle) - crossSize/2 : xm + (crossSize/2)*Math.sin(angle) - crossSize/2;
+               var y = (s) ? ym + (crossSize/2 + margin)*Math.cos(angle) - crossSize/2 : ym - (crossSize/2 + margin)*Math.cos(angle) - crossSize/2;
+            }
+         }
+      }else{
+         var xm = (x2 + x1)/2;
+         var ym = (y2 + y1)/2;
+         var x = xm - crossSize/2;
+         var y = ym - crossSize/2;
+         if(x1 < x2){
+            var x = xm - (crossSize/2)*Math.sin(angle) - crossSize/2;
+            var y = ym + (crossSize/2)*Math.cos(angle) - crossSize/2;
+         }else{
+            var x = xm + (crossSize/2)*Math.sin(angle) - crossSize/2;
+            var y = ym - (crossSize/2)*Math.cos(angle) - crossSize/2;
+         }
+      }
+      return {x:x,y:y};
+   };
+
+   this.updateHandlers = function() {
+      this.vertexDragAndConnect.setEnabled(false);
+      this.arcDragger.setEnabled(false);
+      settings.graphMouse = new GraphMouse("mouse", graph, visualGraph);
+      this.vertexDragAndConnect = new VertexDragAndConnect(settings);
+      this.vertexDragAndConnect.setEnabled(true);
+      this.arcDragger = new ArcDragger({
+         paper: paper,
+         paperElementID: settings.paperElementID,
+         graph: graph,
+         visualGraph: visualGraph,  
+         graphMouse: settings.graphMouse,
+         onEdgeSelect: onEdgeSelect,
+         callback: settings.callback,
+         enabled: true
+      });
+      this.setVertexDragEnabled(this.vertexDragEnabled);
+      this.setVertexSelectEnabled(this.vertexSelectEnabled);
+      this.setEdgeDragEnabled(this.edgeDragEnabled);
+      if(this.gridEnabled)
+         this.setGridEnabled(this.gridEnabled.snapToGrid,this.gridEnabled.gridX,this.gridEnabled.gridY);
+      this.setDefaultSettings();
+      // if(this.updateHandlersCallback){
+      //    this.updateHandlersCallback();
+      // }
+   };
+
+   this.editLabel = function(id,type) {
+      if(type === "vertex" && this.editVertexLabelEnabled){
+         var info = graph.getVertexInfo(id);
+         var attr = visualGraph.graphDrawer.vertexLabelAttr;
+         var labelPos = visualGraph.getVertexVisualInfo(id);
+         if(labelPos.tableMode){
+            var content = (info.content) ? info.content : "";
+            var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+            var labelHeight = 2*attr["font-size"];
+         }
+         var maxLength = self.maxVertexLabelLength || 100;
+      }else if(type === "edge" && self.editEdgeLabelEnabled){
+         $(document).off("keydown");
+         var info = graph.getEdgeInfo(id);
+         var attr = visualGraph.graphDrawer.edgeLabelAttr;
+         var labelPos = visualGraph.graphDrawer.getLabelPos(id);
+         var maxLength = self.maxEdgeLabelLength || 100;
+      }else{
+         return
+      }
+      var fontSize = attr["font-size"] || 15;
+      var label = info.label || "";
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      raphElement[1].hide();
+      self.textEditor = $("");
+      self.editInfo = {id: id, type: type, field: "label"};
+      $("#"+paperId).css("position","relative");
+
+      self.textEditor.css({
+         position: "absolute",
+         left: labelPos.x,
+         top: (labelPos.tableMode) ? labelPos.y - boxSize.h/2 + labelHeight/2 : labelPos.y,
+         width: label.toString().length * fontSize,
+         transform: "translate(-50%,-50%)",
+         "text-align": "center",
+         background: "none",
+         border: "none",
+         color: attr.fill || "black"
+      });
+      self.textEditor.css(attr);
+      $("#"+paperId).append(self.textEditor);
+      self.textEditor.focus();
+      self.textEditor.keydown(function(){ // resize input when text length changes
+         var text = $(this).val();
+         if(text.length > 0){
+            $(this).css("width",text.length * fontSize);
+         }
+      });
+      self.textEditor.focusout(function(){
+         self.writeLabel(id,type);
+      });
+      self.textEditor.keypress(function(event){ // write when return is pressed
+         if(event.which == 13){
+            self.writeLabel(id,type);
+         }
+      });
+   };
+
+   this.writeLabel = function(id,type) {
+      // console.log("writeLabel")
+      if(type === "vertex"){
+         var info = graph.getVertexInfo(id);
+      }else if(type === "edge"){
+         var info = graph.getEdgeInfo(id);
+      }else{
+         console.log("type error");
+         return;
+      }
+      var oldLabel = info.label || "";
+      var newLabel = (self.textEditor) ? self.textEditor.val().trim() : "";
+
+      if(self.alphabet){
+         for(var iLetter = 0; iLetter < newLabel.length; iLetter++){
+            var letter = newLabel.charAt(iLetter);
+            if(letter != " " && !self.alphabet.includes(letter)){
+               newLabel = oldLabel;
+               break;
+            }
+         }
+      }
+      if(type == "vertex" && self.vertexLabelValidation){
+         if(!self.vertexLabelValidation(id,newLabel)){
+            newLabel = oldLabel;
+         }
+      }
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      if(oldLabel !== newLabel){
+         if(newLabel != ""){
+            info.label = newLabel;
+         }else{
+            delete info.label;
+         }
+         self.edited = true;
+         if(type === "vertex"){
+            graph.setVertexInfo(id,info);
+            raphElement[1].attr("text",newLabel);
+         }else{
+            graph.setEdgeInfo(id,info);
+            var labelPos = visualGraph.graphDrawer.getLabelPos(id);
+            raphElement[1].attr({
+               text:newLabel,
+               x: labelPos.x,
+               y: labelPos.y
+            });
+         }
+      }
+      if(self.textEditor){
+         self.textEditor.remove();
+         self.editInfo = {};
+      }
+      raphElement[1].show();
+      if(callback){
+         callback();
+      }
+   };
+
+   this.editContent = function(id) {
+      if(!self.editVertexContentEnabled){
+         return;
+      }
+      var info = graph.getVertexInfo(id);
+      var attr = visualGraph.graphDrawer.vertexContentAttr;
+      var fontSize = attr["font-size"] || 15;
+      var vertexPos = visualGraph.getVertexVisualInfo(id);
+      var content = (info.content) ? info.content : "";
+      var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+      var labelHeight = 2*visualGraph.graphDrawer.vertexLabelAttr["font-size"];
+      
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      raphElement[3].hide();
+      self.textEditor = $("");
+      self.editInfo = {id: id, type: "vertex", field: "content"};
+      $("#"+paperId).css("position","relative");
+
+      var textAlign = attr["text-anchor"] || "middle";
+      switch(textAlign){
+         case "middle":
+            var editorAlign = "center";
+            break;
+         case "start":
+            var editorAlign = "left";
+            break;
+         case "end":
+            var editorAlign = "right";
+            break;
+      }
+      self.textEditor.css({
+         position: "absolute",
+         left: vertexPos.x - boxSize.w/2,
+         top: vertexPos.y - boxSize.h/2 + labelHeight,
+         width: boxSize.w - 20,
+         height: boxSize.h - labelHeight,
+         "text-align": editorAlign,
+         "padding": "0 10px",
+         background: "none",
+         border: "none",
+         color: attr.fill || "black",
+         "font-family": "Arial, sans-serif"
+      });
+      self.textEditor.css(attr);
+      $("#"+paperId).append(self.textEditor);
+      self.textEditor.focus();
+
+      self.textEditor.keyup(function(){ // resize vertex & textarea when text length changes
+         var text = $(this).val();
+         self.resizeTableVertex(id,text);
+      });
+
+      self.textEditor.focusout(function(ev){
+         if(self.contentValidation){
+            var text = $(this).val();
+            self.editInfo.validContent = self.contentValidation(text,id);
+         }else{
+            self.editInfo.validContent = true;
+         }
+         if(self.editInfo.validContent){
+            self.vertexDragAndConnect.allowDeselection = true;
+            self.vertexDragAndConnect.dragEnabled = self.vertexDragEnabled;
+            self.graphDragger.dragEnabled = self.graphDragEnabled;
+            self.writeContent(id);
+         }else{
+            $(this).focus();
+            self.vertexDragAndConnect.allowDeselection = false;
+            self.vertexDragAndConnect.dragEnabled = false;
+            self.graphDragger.dragEnabled = false;
+         }
+      });
+   };
+
+   this.writeContent = function(id) {
+      // console.log(id);
+      var info = graph.getVertexInfo(id);
+      var oldContent = info.content || "";
+      var newContent = (self.textEditor) ? self.textEditor.val().trim() : "";
+
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      if(oldContent !== newContent){
+         info.content = newContent;
+         graph.setVertexInfo(id,info);
+         self.edited = true;
+      }
+ 
+      if(self.textEditor){
+         self.textEditor.remove();
+         if(!self.editInfo.clickedVertex)
+            self.editInfo = {};
+      }
+
+      if(self.edited){
+         visualGraph.redraw();
+         self.updateHandlers();
+      }else{
+         raphElement[3].show();
+      }
+      if(self.editInfo.clickedVertex && self.edited){
+         self.vertexDragAndConnect.selectionParent = null;
+         var clickedVertex = self.editInfo.clickedVertex;
+         var x = self.editInfo.x;
+         var y = self.editInfo.y;
+         // self.editInfo = {};
+         self.vertexDragAndConnect.clickHandler(clickedVertex,x,y);
+      }
+      if(self.writeContentCallback){
+         self.writeContentCallback(id,self.edited);
+      }
+      if(callback){
+         callback();
+      }
+   };
+
+   this.resizeTableVertex = function(id,text) {
+      // console.log("resizeTableVertex")
+      var raphElement = visualGraph.getRaphaelsFromID(id);
+      var newBoxSize = visualGraph.graphDrawer.getBoxSize(text);
+      var info = graph.getVertexInfo(id);
+      var vertexPos = visualGraph.getVertexVisualInfo(id);
+      var labelHeight = 2*visualGraph.graphDrawer.vertexLabelAttr["font-size"];
+      raphElement[0].transform(""); // box
+      raphElement[0].attr({   
+         x: vertexPos.x - newBoxSize.w/2,
+         y: vertexPos.y - newBoxSize.h/2,
+         height: newBoxSize.h,
+         width: newBoxSize.w
+      });
+      raphElement[1].transform(""); // label
+      raphElement[1].attr({   
+         x: vertexPos.x,
+         y: vertexPos.y - newBoxSize.h/2 +labelHeight/2
+      });
+      raphElement[2].transform(""); // line
+      raphElement[2].attr("path","M"+(vertexPos.x - newBoxSize.w/2)+","+(vertexPos.y - newBoxSize.h/2 + labelHeight)+"H"+(vertexPos.x + newBoxSize.w/2));
+      if(info.initial && !info.terminal){
+
+      }else if(!info.initial && info.terminal){
+         raphElement[4].transform(""); 
+         raphElement[4].attr({
+            x: vertexPos.x - newBoxSize.w/2 - 5,
+            y: vertexPos.y - newBoxSize.h/2 - 5,
+            height: newBoxSize.h + 10,
+            width: newBoxSize.w + 10
+         });
+      }else if(info.initial && info.terminal){
+
+      }
+      if(self.textEditor){
+         self.textEditor.css({
+            left: vertexPos.x - newBoxSize.w/2,
+            top: vertexPos.y - newBoxSize.h/2 + labelHeight,
+            width: newBoxSize.w - 20,
+            height: newBoxSize.h - labelHeight
+         });
+      }
+      // var oldContent = info.content;
+      self.removeIcons(id);
+      // info.content = text;
+      // self.addIcons(id);
+      // info.content = oldContent;
+      if(self.resizeTableVertexCallback){
+         self.resizeTableVertexCallback(id,vertexPos,newBoxSize);
+      }
+   };
+
+   this.startDragCallback = function(ID,x,y) {
+      // console.log("start drag callback "+ID);
+      if(self.textEditor){
+         self.editInfo.clickedVertex = ID;
+         self.editInfo.x = x;
+         self.editInfo.y = y;
+         self.textEditor.focusout();
+         return
+      }
+      if(self.textEditor && !(self.editInfo.field == "content" && self.editInfo.validContent == false)){
+         // console.log(self.editInfo)
+         var vertices = graph.getAllVertices();
+         for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+            var vertexRaph = visualGraph.getRaphaelsFromID(vertices[iVertex]);
+
+               if(self.editInfo.id == vertices[iVertex]){
+                  if(self.editInfo.field == "label"){
+                     self.writeLabel(self.editInfo.id,self.editInfo.type);
+                  }else{
+                     // console.log("startDragCallback write"+self.editInfo.id)
+                     self.writeContent(self.editInfo.id);
+                  }
+               }
+               self.textEditor.remove();
+            
+            if(vertexRaph[1])
+               vertexRaph[1].show();
+            if(vertexRaph[3])
+               vertexRaph[3].show();
+         }
+      }
+      var edges = graph.getAllEdges();
+      for(var iEdge = 0; iEdge < edges.length; iEdge++){
+         var edgeRaph = visualGraph.getRaphaelsFromID(edges[iEdge]);
+         if(self.edgeTextEditor)
+            self.edgeTextEditor.remove();
+         edgeRaph[1].show();
+         }
+      self.arcDragger.unselectAll();
+
+      if(startDragCallbackCallback){
+         startDragCallbackCallback(ID);
+      }
+   };
+
+   this.isGoodPosition = function(vID,position) {
+      var vertices = graph.getAllVertices();
+      var vInfo = visualGraph.getVertexVisualInfo(vID);
+      if(vInfo.tableMode){
+         var info = graph.getVertexInfo(vID);
+         var content = info.content || "";
+         var boxSize = visualGraph.graphDrawer.getBoxSize(content);
+      }
+      for(var iVertex = 0; iVertex < vertices.length; iVertex++){
+         var vertex = vertices[iVertex];
+         if(vertex != vID){
+            var vInfo2 = visualGraph.getVertexVisualInfo(vertex);
+            if(vInfo2.tableMode){
+               var info2 = graph.getVertexInfo(vID);
+               var content2 = info2.content || "";
+               var boxSize2 = visualGraph.graphDrawer.getBoxSize(content2);
+               if(vInfo.tableMode){
+                  if(Math.abs(vInfo.x - vInfo2.x) < (boxSize.w/2 + boxSize2.w/2) && Math.abs(vInfo.y - vInfo2.y) < (boxSize.h/2 + boxSize2.h/2)){
+                     return false;
+                  }
+               }else{
+                  if(Math.abs(vInfo.x - vInfo2.x) < (visualGraph.graphDrawer.circleAttr.r + boxSize2.w/2) && Math.abs(vInfo.y - vInfo2.y) < (visualGraph.graphDrawer.circleAttr.r + boxSize2.h/2)){
+                     return false;
+                  }
+               }
+            }else{
+               if(vInfo.tableMode){
+                  if(Math.abs(vInfo.x - vInfo2.x) < (boxSize.w/2 + visualGraph.graphDrawer.circleAttr.r) && Math.abs(vInfo.y - vInfo2.y) < (boxSize.h/2 + visualGraph.graphDrawer.circleAttr.r)){
+                     return false;
+                  }
+               }else{
+                  if(Math.abs(vInfo.x - vInfo2.x) < 2*visualGraph.graphDrawer.circleAttr.r && Math.abs(vInfo.y - vInfo2.y) < 2*visualGraph.graphDrawer.circleAttr.r ){
+                     return false;
+                  }
+               }
+            }
+         }
+      }
+      return true;
+   };
+   
+
+   this.setDefaultSettings = function() {
+      if(!settings.onVertexSelect){
+         this.vertexDragAndConnect.setOnVertexSelect(this.defaultOnVertexSelect);
+      }
+      if(!settings.onPairSelect){
+         this.vertexDragAndConnect.setOnPairSelect(this.defaultOnPairSelect);
+      }
+      if(!settings.onEdgeSelect){
+         this.arcDragger.setOnEdgeSelect(this.defaultOnEdgeSelect);
+      }
+      if(!settings.createVertex){
+         this.vertexCreator.setCreateVertex(this.defaultCreateVertex);
+      }
+      this.vertexDragAndConnect.setUnselectAllEdges(this.unselectAllEdges);
+      this.vertexDragAndConnect.setStartDragCallback(this.startDragCallback);
+      this.vertexDragAndConnect.setIsGoodPosition(this.isGoodPosition);
+      this.vertexDragAndConnect.setClickHandlerCallback(this.clickHandlerCallback);
+      this.vertexDragAndConnect.snapToLastGoodPosition = true;
+      this.arcDragger.setStartDragCallback(this.startDragCallback);
+      this.arcDragger.setEditEdgeLabel(this.editLabel);
+      this.arcDragger.setUnselectAll(this.unselectAllEdges);
+      this.graphDragger.setUnselectAllEdges(this.unselectAllEdges);
+   };
+   
+   this.setDefaultSettings();
+   
+   if(settings.enabled) {
+      this.setEnabled(true);
+   }
+};
diff --git a/pemFioi/grid-1.0.js b/pemFioi/grid-1.0.js
index 8c590dd8c..b2dfec038 100644
--- a/pemFioi/grid-1.0.js
+++ b/pemFioi/grid-1.0.js
@@ -1,4 +1,5 @@
 function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gridTop, defaultLineAttr) {
+   var self = this;
    this.raphaelID = raphaelID;
    this.paper = paper;
    this.rows = rows;
@@ -60,7 +61,10 @@ function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gri
       this.gridHeight = this.gridBottom - this.gridTop;
    };
 
+
+
    this.initTable = function() {
+
       this.table = [];
       for (var iRow = 0; iRow < this.rows; iRow++) {
          this.table.push([]);
@@ -111,6 +115,7 @@ function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gri
 
    this.unclickCell = function() {
       this.element.unbind("click", internalClickHandler);
+      this.element.off("click");
    };
 
    var internalClickHandler = function(event) {
@@ -134,7 +139,7 @@ function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gri
    };
 
    this.getPaperMouse = function(event) {
-      var offset = $(this.paper.canvas).offset();
+      var offset = $(self.paper.canvas).offset();
       return {
          left: event.pageX - offset.left,
          top: event.pageY - offset.top
@@ -335,7 +340,6 @@ function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gri
    };
 
    this.highlightCell = function(row, col, attr, xPad, yPad) {
-      this.unhighlightCell(row, col);
       var cellPos = this.getCellPos(row, col);
       var cellSize = this.getCellSize(row, col);
 
@@ -374,14 +378,20 @@ function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gri
       }
 
       var id = this._cellToHighlightID(row, col);
-      this.cellHighlights[id] = paper.rect(cellPos.x + xPad, cellPos.y + yPad).attr(attr);
+      if(this.cellHighlights[id]) {
+         attr.x = cellPos.x + xPad;
+         attr.y = cellPos.y + yPad;
+         this.cellHighlights[id].attr(attr);
+         this.cellHighlights[id].show();
+      } else {
+         this.cellHighlights[id] = paper.rect(cellPos.x + xPad, cellPos.y + yPad).attr(attr);
+      }
    };
 
    this.unhighlightCell = function(row, col) {
       var id = this._cellToHighlightID(row, col);
       if(this.cellHighlights[id]) {
-         this.cellHighlights[id].remove();
-         delete this.cellHighlights[id];
+         this.cellHighlights[id].hide();
       }
    };
 
@@ -395,6 +405,16 @@ function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gri
       return !!this.cellHighlights[id];
    };
 
+   this.unhighlightAllCells = function() {
+      for(var iRow = 0; iRow < this.rows; iRow++){
+         for(var iCol = 0; iCol < this.cols; iCol++){
+            if(this.isCellHighlighted(iRow,iCol)){
+               this.unhighlightCell(iRow,iCol);
+            }
+         }
+      }
+   };
+
    this._cellToHighlightID = function(row, col) {
       return row + "," + col;
    };
@@ -509,6 +529,14 @@ function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gri
          this.verticalLines[iCol].toBack();
       }
    };
+   this.linesToFront = function() {
+      for (var iRow = 0; iRow <= this.rows; iRow++) {
+         this.horizontalLines[iRow].toFront();
+      }
+      for (var iCol = 0; iCol <= this.cols; iCol++) {
+         this.verticalLines[iCol].toFront();
+      }
+   };
 
    this.getLeftX = function() {
       return this.gridLeft;
@@ -558,6 +586,45 @@ function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gri
       this.unclickCell();
    };
 
+   this.getRaphaelSet = function() {
+      var set = this.paper.set();
+      var iRow, iCol;
+      for (iRow = 0; iRow < this.rows; iRow++) {
+         for (iCol = 0; iCol < this.cols; iCol++) {
+            var cell = this.table[iRow][iCol];
+            for (var iContent = 0; iContent < cell.length; iContent++) {
+               set.push(cell[iContent]);
+            }
+         }
+      }
+      for (iRow = 0; iRow <= this.rows; iRow++) {
+         set.push(this.horizontalLines[iRow]);
+      }
+      for (iCol = 0; iCol <= this.cols; iCol++) {
+         set.push(this.verticalLines[iCol].show());
+      }
+      for(var iCell in this.cellHighlights) {
+         set.push(this.cellHighlights[iCell].show());
+      }
+      return set
+   };
+
+   this.display = function(show) {
+      var raph = this.getRaphaelSet();
+      if(show){
+         raph.show();
+      }else{
+         raph.hide();
+      }
+   };
+
+   this.hide = function() {
+      this.display(0);
+   };
+   this.show = function() {
+      this.display(1);
+   };
+
    function getVectorLength(x, y) {
       return Math.sqrt(x * x + y * y);
    }
diff --git a/pemFioi/grid-1.1.js b/pemFioi/grid-1.1.js
new file mode 100644
index 000000000..8070440af
--- /dev/null
+++ b/pemFioi/grid-1.1.js
@@ -0,0 +1,673 @@
+function Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gridTop, defaultLineAttr) {
+   var self = this;
+   this.raphaelID = raphaelID;
+   this.paper = paper;
+   this.rows = rows;
+   this.cols = cols;
+   this.cellWidth = cellWidth;
+   this.cellHeight = cellHeight;
+   this.gridLeft = gridLeft;
+   this.gridTop = gridTop;
+   this.defaultLineAttr = defaultLineAttr;
+   this.cellHighlights = {};
+
+   // TODO: declare this.table here.
+
+   this.element = $("#" + raphaelID);
+
+   this.init = function() {
+      this.initCoordinates();
+      this.initTable();
+      this.initLines();
+   };
+
+   this.initCoordinates = function() {
+      this.constWidth = $.isNumeric(this.cellWidth);
+      this.constHeight = $.isNumeric(this.cellHeight);
+
+      this.rowY = [this.gridTop];
+      for(var row = 1; row < this.rows; row++) {
+         if(this.constHeight) {
+            this.rowY.push(this.rowY[row - 1] + this.cellHeight);
+         }
+         else {
+            this.rowY.push(this.rowY[row - 1] + this.cellHeight[row - 1]);
+         }
+      }
+      if(this.constHeight) {
+         this.gridBottom = this.rowY[this.rows - 1] + this.cellHeight;
+      }
+      else {
+         this.gridBottom = this.rowY[this.rows - 1] + this.cellHeight[this.rows - 1];
+      }
+
+      this.colX = [this.gridLeft];
+      for(var col = 1; col < this.cols; col++) {
+         if(this.constWidth) {
+            this.colX.push(this.colX[col - 1] + this.cellWidth);
+         }
+         else {
+            this.colX.push(this.colX[col - 1] + this.cellWidth[col - 1]);
+         }
+      }
+      if(this.constWidth) {
+         this.gridRight = this.colX[this.cols - 1] + this.cellWidth;
+      }
+      else {
+         this.gridRight = this.colX[this.cols - 1] + this.cellWidth[this.cols - 1];
+      }
+
+      this.gridWidth = this.gridRight - this.gridLeft;
+      this.gridHeight = this.gridBottom - this.gridTop;
+   };
+
+
+
+   this.initTable = function() {
+
+      this.table = [];
+      for (var iRow = 0; iRow < this.rows; iRow++) {
+         this.table.push([]);
+         for (var iCol = 0; iCol < this.cols; iCol++) {
+            this.table[iRow].push([]);
+         }
+      }
+   };
+
+   this.initLines = function() {
+      var line;
+      this.horizontalLines = [];
+      for (var iRow = 0; iRow <= this.rows; iRow++) {
+         var rowY;
+         if(iRow < this.rows) {
+            rowY = this.rowY[iRow];
+         }
+         else {
+            rowY = this.gridBottom;
+         }
+         line = this.paper.path(["M", this.gridLeft, rowY, "H", this.gridRight]);
+         line.attr(this.defaultLineAttr);
+         this.horizontalLines.push(line);
+      }
+
+      this.verticalLines = [];
+      for (var iCol = 0; iCol <= this.cols; iCol++) {
+         var colX;
+         if(iCol < this.cols) {
+            colX = this.colX[iCol];
+         }
+         else {
+            colX = this.gridRight;
+         }
+         line = this.paper.path(["M", colX, this.gridTop, "V", this.gridBottom]);
+         line.attr(this.defaultLineAttr);
+         this.verticalLines.push(line);
+      }
+   };
+
+   this.clickCell = function(clickHandler) {
+      this.unclickCell();
+      this.clickHandler = clickHandler;
+      this.element.click({
+         thisGrid: this
+      }, internalClickHandler);
+   };
+
+   this.unclickCell = function() {
+      this.element.unbind("click", internalClickHandler);
+   };
+
+   var internalClickHandler = function(event) {
+      var that = event.data.thisGrid;
+      var paperPosition = that.getPaperMouse(event);
+      
+      if(!that.isPaperPosOnGrid(paperPosition)) {
+         return;
+      }
+
+      var gridPos = that.paperPosToGridPos(paperPosition);
+      event.data.row = gridPos.row;
+      event.data.col = gridPos.col;
+
+      if(!that.table[gridPos.row]) {
+         throw "Grid bad cell. Row=" + gridPos.row + " Col=" + gridPos.col;
+      }
+
+      event.data.cell = that.table[gridPos.row][gridPos.col];
+      that.clickHandler(event);
+   };
+
+   this.getPaperMouse = function(event) {
+      var offset = $(self.paper.canvas).offset();
+      return {
+         left: event.pageX - offset.left,
+         top: event.pageY - offset.top
+      };
+   };
+
+   var getIEVersion = function() {
+      var myNav = navigator.userAgent.toLowerCase();
+      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
+   };
+
+   this.getCell = function(row, col) {
+      return this.table[row][col];
+   };
+
+   this.getCellSize = function(row, col) {
+      var result = {};
+      if(this.constWidth) {
+         result.width = this.cellWidth;
+      }
+      else {
+         result.width = this.cellWidth[col];
+      }
+      if(this.constHeight) {
+         result.height = this.cellHeight;
+      }
+      else {
+         result.height = this.cellHeight[row];
+      }
+      return result;
+   };
+
+   this.getCellPos = function(row, col) {
+      var result = {};
+      if(row < 0) {
+         result.y = this.gridTop;
+      }
+      else if(row >= this.rows) {
+         result.y = this.gridBottom;
+      }
+      else {
+         result.y = this.rowY[row];
+      }
+      if(col < 0) {
+         result.x = this.gridLeft;
+      }
+      else if(col >= this.cols) {
+         result.x = this.gridRight;
+      }
+      else {
+         result.x = this.colX[col];
+      }
+      return result;
+   };
+
+   this.isPaperPosOnGrid = function(paperPosition) {
+      if (paperPosition.left < this.gridLeft || paperPosition.left >= this.gridRight) {
+         return false;
+      }
+      if (paperPosition.top < this.gridTop || paperPosition.top >= this.gridBottom) {
+         return false;
+      }
+      return true;
+   };
+   
+   this.paperPosToGridPos = function(paperPosition) {
+      var result = {};
+      if(this.constWidth) {
+         result.col = Math.floor((paperPosition.left - this.gridLeft) / this.cellWidth);
+      }
+      else {
+         result.col = this._binarySearchPos(this.colX, paperPosition.left, this.gridLeft, this.gridRight);
+      }
+      if(this.constHeight) {
+         result.row = Math.floor((paperPosition.top - this.gridTop) / this.cellHeight);
+      }
+      else {
+         result.row = this._binarySearchPos(this.rowY, paperPosition.top, this.gridTop, this.gridBottom);
+      }
+      return result;
+   };
+
+   this._binarySearchPos = function(array, value, min, max) {
+      if(value < min) {
+         return -1;
+      }
+      if(value >= max) {
+         return array.length;
+      }
+      var low = 0, high = array.length;
+      while(low < high - 1) {
+         var mid = Math.floor((low + high) / 2);
+         if(value < array[mid]) {
+            high = mid;
+         }
+         else if(value == array[mid]) {
+            return mid;
+         }
+         else {
+            low = mid;
+         }
+      }
+      return low;
+   };
+
+   this.getCellCenter = function(row, col) {
+      var pos = this.getCellPos(row, col);
+      if(this.constWidth) {
+         pos.x += this.cellWidth / 2;
+      }
+      else {
+         pos.x += this.cellWidth[col] / 2;
+      }
+      if(this.constHeight) {
+         pos.y += this.cellHeight / 2;
+      }
+      else {
+         pos.y += this.cellHeight[row] / 2;
+      }
+      return pos;
+   };
+
+   this.addToCell = function(cellFiller, data) {
+      // TODO: xPos and yPos should be renamed cellX and cellY
+      var row = data.row;
+      var col = data.col;
+      var pos = this.getCellPos(row, col);
+      data.xPos = pos.x;
+      data.yPos = pos.y;
+      
+      if(this.constWidth) {
+         data.cellWidth = this.cellWidth;
+      }
+      else {
+         data.cellWidth = this.cellWidth[col];
+      }
+      if(this.constHeight) {
+         data.cellHeight = this.cellHeight;
+      }
+      else {
+         data.cellHeight = this.cellHeight[row];
+      }
+      var contents = cellFiller(data, this.paper);
+
+      if (!contents) {
+         return;
+      }
+
+      var cell = this.table[row][col];
+      for (var iContent = 0; iContent < contents.length; iContent++) {
+         cell.push(contents[iContent]);
+      }
+
+      if(this.overlay) {
+         this.overlay.toFront();
+      }
+   };
+
+   this.setAllCells = function(cellFiller, data) {
+      if(!data) {
+         data = {};
+      }
+      for(var row = 0; row < rows; row++) {
+         for(var col = 0; col < cols; col++) {
+            data.row = row;
+            data.col = col;
+            this.setCell(cellFiller, data);
+         }
+      }
+   };
+
+   this.setCell = function(cellFiller, data) {
+      this.clearCell(data.row, data.col);
+      this.addToCell(cellFiller, data);
+   };
+
+   this.popFromCell = function(row, col) {
+      var cell = this.table[row][col];
+      if(!cell || cell.length === 0) {
+         return;
+      }
+      var element = cell.pop();
+      if(element) {
+         element.remove();
+      }
+   };
+
+   this.clearCell = function(row, col) {
+      var cell = this.table[row][col];
+      for (var iContent = 0; iContent < cell.length; iContent++) {
+         cell[iContent].remove();
+      }
+      this.table[row][col] = [];
+   };
+
+   this.getPaper = function() {
+      return this.paper;
+   };
+
+   this.highlightCell = function(row, col, attr, xPad, yPad) {
+      var cellPos = this.getCellPos(row, col);
+      var cellSize = this.getCellSize(row, col);
+
+      if(attr === null || attr === undefined) {
+         attr = {};
+      }
+      if(attr["stroke-width"] === null || attr["stroke-width"] === undefined) {
+         attr["stroke-width"] = 3;
+      }
+      if(attr.stroke === null || attr.stroke === undefined) {
+         attr.stroke = "red";
+      }
+      if(xPad === null || xPad === undefined) {
+         xPad = attr["stroke-width"] / 2;
+         if(this.verticalLines[col].attrs["stroke-width"] !== undefined) {
+            xPad += this.verticalLines[col].attrs["stroke-width"] / 2;
+         }
+         else {
+            xPad += 0.5;
+         }
+      }
+      if(yPad === null || yPad === undefined) {
+         yPad = attr["stroke-width"] / 2;
+         if(this.horizontalLines[row].attrs["stroke-width"] !== undefined) {
+            yPad += this.horizontalLines[row].attrs["stroke-width"] / 2;
+         }
+         else {
+            yPad += 0.5;
+         }
+      }
+      if(attr.width === null || attr.width === undefined) {
+         attr.width = cellSize.width - 2 * xPad;
+      }
+      if(attr.height === null || attr.height === undefined) {
+         attr.height = cellSize.height - 2 * yPad;
+      }
+
+      var id = this._cellToHighlightID(row, col);
+      if(this.cellHighlights[id]) {
+         attr.x = cellPos.x + xPad;
+         attr.y = cellPos.y + yPad;
+         this.cellHighlights[id].attr(attr);
+         this.cellHighlights[id].show();
+      } else {
+         this.cellHighlights[id] = paper.rect(cellPos.x + xPad, cellPos.y + yPad).attr(attr);
+      }
+   };
+
+   this.unhighlightCell = function(row, col) {
+      var id = this._cellToHighlightID(row, col);
+      if(this.cellHighlights[id]) {
+         this.cellHighlights[id].hide();
+      }
+   };
+
+   this.getCellHighlight = function(row, col) {
+      var id = this._cellToHighlightID(row, col);
+      return this.cellHighlights[id];
+   };
+
+   this.isCellHighlighted = function(row, col) {
+      var id = this._cellToHighlightID(row, col);
+      return !!this.cellHighlights[id];
+   };
+
+   this.unhighlightAllCells = function() {
+      for(var iRow = 0; iRow < this.rows; iRow++){
+         for(var iCol = 0; iCol < this.cols; iCol++){
+            if(this.isCellHighlighted(iRow,iCol)){
+               this.unhighlightCell(iRow,iCol);
+            }
+         }
+      }
+   };
+
+   this._cellToHighlightID = function(row, col) {
+      return row + "," + col;
+   };
+   
+   this.enableDragSelection = function(onStart, onMove, onUp, onSelectionChange, selectionBoxAttr, selectionMargins, dragThreshold) {
+      if(this.overlay) {
+         return;
+      }
+      var self = this;
+      var anchorGridPos;
+      var anchorPaperPos;
+      var currentPaperPos;
+      var currentGridPos;
+      var usingThreshold = (dragThreshold !== null && dragThreshold !== undefined);
+
+      function dragStart(x, y, event) {
+         // Dirty IE6 workaround to get the pageX,pageY properties.
+         // They appear to be missing from the original mouse event.
+         if(event.pageX === undefined) {
+            event.pageX = x;
+            event.pageY = y;
+         }
+         anchorPaperPos = self.getPaperMouse(event);
+         currentPaperPos = self.getPaperMouse(event);
+         anchorGridPos = self.paperPosToGridPos(anchorPaperPos);
+         if(self.dragSelection){ // bug fix
+            self.dragSelection.remove();
+         }
+         self.dragSelection = paper.rect().attr(selectionBoxAttr);
+         if(onStart) {
+            onStart(x, y, event, anchorPaperPos, anchorGridPos);
+         }
+         if(usingThreshold) {
+            currentGridPos = null;
+         }
+         else {
+            currentGridPos = self.paperPosToGridPos(anchorPaperPos);
+         }
+         if(onSelectionChange) {
+            onSelectionChange(0, 0, x, y, event, anchorPaperPos, anchorGridPos, currentPaperPos, currentGridPos);
+         }
+      }
+      function dragEnd(event) {
+         if (self.dragSelection != null) {
+            self.dragSelection.remove();
+         }
+         self.dragSelection = null;
+         if(onUp) {
+            onUp(event, anchorPaperPos, anchorGridPos, currentPaperPos, currentGridPos);
+         }
+      }
+      function dragMove(dx, dy, x, y, event) {
+         currentPaperPos.left = anchorPaperPos.left + dx;
+         currentPaperPos.top = anchorPaperPos.top + dy;
+
+         // Keep drag within grid bounds
+         if(currentPaperPos.left < self.gridLeft) {
+            dx = self.gridLeft - anchorPaperPos.left;
+            currentPaperPos.left = self.gridLeft;
+         } else if(currentPaperPos.left > self.gridRight) {
+            dx = self.gridRight - anchorPaperPos.left;
+            currentPaperPos.left = self.gridRight;
+         }
+
+         if(currentPaperPos.top < self.gridTop) {
+            dy = self.gridTop - anchorPaperPos.top;
+            currentPaperPos.top = self.gridTop;
+         } else if(currentPaperPos.top > self.gridBottom) {
+            dy = self.gridBottom - anchorPaperPos.top;
+            currentPaperPos.top = self.gridBottom;
+         }
+
+         var oldGridPos = currentGridPos;
+         var newGridPos = self.paperPosToGridPos(currentPaperPos);
+         if(self.dragSelection){ // bug fix
+            self.dragSelection.attr({
+               x: Math.min(anchorPaperPos.left, currentPaperPos.left),
+               y: Math.min(anchorPaperPos.top, currentPaperPos.top),
+               width: Math.abs(anchorPaperPos.left - currentPaperPos.left),
+               height: Math.abs(anchorPaperPos.top - currentPaperPos.top)
+            });
+         }
+
+         // Below threshold.
+         if(usingThreshold && getVectorLength(dx, dy) < dragThreshold) {
+            currentGridPos = null;
+            if(onMove) {
+               onMove(dx, dy, x, y, event, anchorPaperPos, anchorGridPos, currentPaperPos, currentGridPos);
+            }
+            if(oldGridPos != null) {
+               onSelectionChange(dx, dy, x, y, event, anchorPaperPos, anchorGridPos, currentPaperPos, currentGridPos);
+            }
+         }
+         else {
+            currentGridPos = newGridPos;
+            if(onMove) {
+               onMove(dx, dy, x, y, event, anchorPaperPos, anchorGridPos, currentPaperPos, currentGridPos);
+            }
+            if(oldGridPos == null || oldGridPos.row !== currentGridPos.row || oldGridPos.col !== currentGridPos.col) {
+               onSelectionChange(dx, dy, x, y, event, anchorPaperPos, anchorGridPos, currentPaperPos, currentGridPos);
+            }
+         }
+      }
+      
+      var left = this.gridLeft - selectionMargins.left;
+      var width = this.gridRight - this.gridLeft + selectionMargins.left + selectionMargins.right;
+      var top = this.gridTop - selectionMargins.top;
+      var height = this.gridBottom - this.gridTop + selectionMargins.top + selectionMargins.bottom;
+      
+      this.overlay = this.paper.rect(left, top, width, height).attr({
+         fill: "green",
+         opacity: 0
+      });
+      // this.overlay.drag(dragMove, dragStart, dragEnd);
+      Beav.dragWithTouch(this.overlay, dragMove, dragStart, dragEnd)
+   };
+
+   this.disableDragSelection = function() {
+      if(this.overlay) {
+         this.overlay.undrag();
+         this.overlay.remove();
+         this.overlay = null;
+      }
+      if(this.dragSelection) {
+         this.dragSelection.remove();
+         this.dragSelection = null;
+      }
+   };
+
+   this.linesToBack = function() {
+      for (var iRow = 0; iRow <= this.rows; iRow++) {
+         this.horizontalLines[iRow].toBack();
+      }
+      for (var iCol = 0; iCol <= this.cols; iCol++) {
+         this.verticalLines[iCol].toBack();
+      }
+   };
+   this.linesToFront = function() {
+      for (var iRow = 0; iRow <= this.rows; iRow++) {
+         this.horizontalLines[iRow].toFront();
+      }
+      for (var iCol = 0; iCol <= this.cols; iCol++) {
+         this.verticalLines[iCol].toFront();
+      }
+   };
+
+   this.getLeftX = function() {
+      return this.gridLeft;
+   };
+
+   this.getRightX = function() {
+      return this.gridRight;
+   };
+
+   this.getTopY = function() {
+      return this.gridTop;
+   };
+
+   this.getBottomY = function() {
+      return this.gridBottom;
+   };
+
+   this.getWidth = function() {
+      return this.gridWidth;
+   };
+
+   this.getHeight = function() {
+      return this.gridHeight;
+   };
+
+   this.remove = function() {
+      var iRow, iCol;
+      for (iRow = 0; iRow < this.rows; iRow++) {
+         for (iCol = 0; iCol < this.cols; iCol++) {
+            this.clearCell(iRow, iCol);
+         }
+      }
+
+      for (iRow = 0; iRow <= this.rows; iRow++) {
+         this.horizontalLines[iRow].remove();
+      }
+
+      for (iCol = 0; iCol <= this.cols; iCol++) {
+         this.verticalLines[iCol].remove();
+      }
+
+      for(var iCell in this.cellHighlights) {
+         this.cellHighlights[iCell].remove();
+      }
+
+      this.disableDragSelection();
+      this.unclickCell();
+   };
+
+   this.getRaphaelSet = function() {
+      var set = this.paper.set();
+      var iRow, iCol;
+      for (iRow = 0; iRow < this.rows; iRow++) {
+         for (iCol = 0; iCol < this.cols; iCol++) {
+            var cell = this.table[iRow][iCol];
+            for (var iContent = 0; iContent < cell.length; iContent++) {
+               set.push(cell[iContent]);
+            }
+         }
+      }
+      for (iRow = 0; iRow <= this.rows; iRow++) {
+         set.push(this.horizontalLines[iRow]);
+      }
+      for (iCol = 0; iCol <= this.cols; iCol++) {
+         set.push(this.verticalLines[iCol].show());
+      }
+      for(var iCell in this.cellHighlights) {
+         set.push(this.cellHighlights[iCell].show());
+      }
+      return set
+   };
+
+   this.display = function(show) {
+      var raph = this.getRaphaelSet();
+      if(show){
+         raph.show();
+      }else{
+         raph.hide();
+      }
+   };
+
+   this.hide = function() {
+      this.display(0);
+   };
+   this.show = function() {
+      this.display(1);
+   };
+
+   function getVectorLength(x, y) {
+      return Math.sqrt(x * x + y * y);
+   }
+
+   this.init();
+}
+
+Grid.fromArray = function(raphaelID, paper, array, cellFiller, cellWidth, cellHeight, gridLeft, gridTop, defaultLineAttr) {
+   var rows = array.length;
+   var cols = array[0].length;
+   var grid = new Grid(raphaelID, paper, rows, cols, cellWidth, cellHeight, gridLeft, gridTop, defaultLineAttr);
+
+   for (var iRow = 0; iRow < rows; iRow++) {
+      for (var iCol = 0; iCol < cols; iCol++) {
+         grid.addToCell(cellFiller, {
+            row: iRow,
+            col: iCol,
+            entry: array[iRow][iCol]
+         });
+      }
+   }
+
+   return grid;
+};
diff --git a/pemFioi/importModules-1.0.js b/pemFioi/importModules-1.0.js
index deb240db2..a07ffe0ca 100644
--- a/pemFioi/importModules-1.0.js
+++ b/pemFioi/importModules-1.0.js
@@ -18,15 +18,21 @@ var importableModules = function () {
       'beav-1.0': {src: modulesPath+"/pemFioi/beav-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/beav-1.0.js"},
       'installationAPI.01': {class: "remove", src: modulesPath+"/integrationAPI.01/installationAPI.01/pemFioi/installation.js"},
       'miniPlatform': {class: "remove", src: modulesPath+"/integrationAPI.01/official/miniPlatform.js"},
+      'static-task': {src: modulesPath+"/pemFioi/static-task.js"},
       'acorn': {src: modulesPath+"/ext/js-interpreter/acorn.js", id: "acorn"},
+      'acorn-walk': {src: modulesPath+"/ext/acorn/walk.js", id: "acorn-walk"},
       'interpreter': {src: modulesPath+"/ext/js-interpreter/interpreter.js", id: "interpreter"},
       'ace': {src: modulesPath+"/ext/ace/ace.js", id: "ace"},
       'ace_python': {src: modulesPath+"/ext/ace/mode-python.js", id: "ace_python"},
+      'ace_language_tools': {src: modulesPath+"/ext/ace/ext-language_tools.js", id: "ace_language_tools"},
+      'save-svg-as-png': {src: modulesPath+"/ext/save-svg-as-png/saveSvgAsPng.js", id: "save-svg-as-png"},
+      'fonts-loader-1.0': {src: modulesPath+"/pemFioi/fontsLoader-1.0.js", id: "fonts-loader"},
 
       'taskStyles-0.1': {type: "stylesheet", src: modulesPath+"/pemFioi/taskStyles-0.1.css", id: "http://www.france-ioi.org/modules/pemFioi/taskStyles-0.1.css"},
 
       'conceptDisplay-1.0': {src: modulesPath+"/pemFioi/conceptDisplay-1.0.js", id: "concept_display"},
       'conceptViewer-1.0': {src: modulesPath+"/pemFioi/conceptViewer-1.0.js", id: "concept_viewer"},
+      'conceptViewer_css-1.0': {type: "stylesheet", src: modulesPath+"/pemFioi/conceptViewer-1.0.css", id: "concept_viewer_css"},
 
       'blockly': {src: modulesPath+"/ext/blockly/blockly_compressed.js", id: "blockly"},
       'blockly_blocks': {src: modulesPath+"/ext/blockly/blocks_compressed.js", id: "blockly_blocks"},
@@ -36,6 +42,7 @@ var importableModules = function () {
       'blockly_en': {src: modulesPath+"/ext/blockly/en.js", id: "blockly_en"},
       'blockly_de': {src: modulesPath+"/ext/blockly/de.js", id: "blockly_de"},
       'blockly_es': {src: modulesPath+"/ext/blockly/es.js", id: "blockly_es"},
+      'blockly_sl': {src: modulesPath+"/ext/blockly/sl.js", id: "blockly_sl"},
       'blockly_fioi': {src: modulesPath+"/ext/blockly-fioi/fioi-blockly.min.js", id: "blockly_fioi"},
 
       'blocklyRobot_lib': {src: modulesPath+"/pemFioi/blocklyRobot_lib-0.9.1.js", id: "blocklyRobot_lib"},
@@ -44,6 +51,10 @@ var importableModules = function () {
       'blockly-turtle': {src: modulesPath+"/pemFioi/blocklyTurtle_lib.js", id: "blocklyTurtle_lib"},
       'jwinf_css': {type: "stylesheet", src: modulesPath+"/pemFioi/jwinf.css", id: "jwinf_css"}, // for BWINF
 
+      'blockly-isndraw': {src: modulesPath+"/pemFioi/blocklyIsnDraw_lib.js", id: "blocklyIsnDraw_lib"},
+      'blockly-maths': {src: modulesPath+"/pemFioi/blocklyMaths_lib.js", id: "blocklyMaths_lib"},
+      'blockly-printer-2.0': {src: modulesPath+"/pemFioi/blocklyPrinter_lib-2.0.js", id: "blocklyPrinter_lib-2.0"},
+
       'quickAlgo_utils': {src: modulesPath+"/pemFioi/quickAlgo/utils.js", id: "quickAlgo_utils"},
       'quickAlgo_i18n': {src: modulesPath+"/pemFioi/quickAlgo/i18n.js", id: "quickAlgo_i18n"},
       'quickAlgo_interface': {src: modulesPath+"/pemFioi/quickAlgo/interface.js", id: "quickAlgo_interface"},
@@ -65,7 +76,16 @@ var importableModules = function () {
       'python_count': {src: modulesPath+"/pemFioi/pythonCount-1.0.js", id: "python_count"},
       'skulpt_quickAlgo': {src: modulesPath+"ext/skulpt/skulpt.quickAlgo.min.js", id: "skulpt_quickAlgo"},
       'skulpt_stdlib': {src: modulesPath+"ext/skulpt/skulpt-stdlib.js", id: "skulpt_stdlib"},
-      'skulpt_debugger': {src: modulesPath+"ext/skulpt/debugger.js", id: "skulpt_debugger"}
+      'skulpt_debugger': {src: modulesPath+"ext/skulpt/debugger.js", id: "skulpt_debugger"},
+
+      // Bundles
+      'bebras-base': {src: modulesPath+"bundles/bebras-base.js", id: "bundle-bebras-base"},
+      'bebras-interface': {src: modulesPath+"bundles/bebras-interface.js", id: "bundle-bebras-interface"},
+      'js-interpreter': {src: modulesPath+"bundles/js-interpreter.js", id: "bundle-js-interpreter"},
+      'blockly-base': {src: modulesPath+"bundles/blockly-base.js", id: "bundle-blockly-base"},
+      'scratch-base': {src: modulesPath+"bundles/scratch-base.js", id: "bundle-scratch-base"},
+      'quickAlgo-all-blockly': {src: modulesPath+"bundles/quickAlgo-all-blockly.js", id: "bundle-quickAlgo-all-blockly"},
+      'quickAlgo-all-python': {src: modulesPath+"bundles/quickAlgo-all-python.js", id: "bundle-quickAlgo-all-python"}
    }
 }
 
@@ -74,6 +94,7 @@ var languageScripts = function () {
    return {
       blockly: [
          'acorn',
+         'acorn-walk',
          'interpreter',
          'blockly',
          'blockly_blocks',
@@ -94,6 +115,7 @@ var languageScripts = function () {
       ],
       scratch: [
          'acorn',
+         'acorn-walk',
          'interpreter',
          'scratch',
          'scratch_blocks_common',
@@ -119,6 +141,7 @@ var languageScripts = function () {
          'python_count',
          'ace',
          'ace_python',
+         'ace_language_tools',
          'skulpt_quickAlgo',
          'skulpt_stdlib',
          'skulpt_debugger',
@@ -135,6 +158,20 @@ var languageScripts = function () {
    }
 }
 
+var bundledModules = function () {
+   // List of bundles and which modules they include
+   // How to import the bundles is defined in importableModules
+   return [
+      {name: 'bebras-base', included: ['jquery-1.7.1', 'JSON-js', 'raphael-2.2.1', 'beaver-task-2.0', 'jschannel', 'raphaelFactory-1.0', 'delayFactory-1.0', 'simulationFactory-1.0']},
+      {name: 'bebras-interface', included: ['platform-pr', 'buttonsAndMessages', 'beav-1.0', 'installationAPI.01', 'miniPlatform']},
+      {name: 'js-interpreter', included: ['acorn', 'acorn-walk', 'interpreter']},
+      {name: 'blockly-base', included: ['blockly', 'blockly_blocks', 'blockly_javascript', 'blockly_python']},
+      {name: 'scratch-base', included: ['scratch', 'scratch_blocks_common', 'scratch_blocks', 'blockly_javascript', 'blockly_python']},
+      {name: 'quickAlgo-all-blockly', included: ['quickAlgo_utils', 'quickAlgo_i18n', 'quickAlgo_interface', 'quickAlgo_blockly_blocks','quickAlgo_blockly_interface', 'quickAlgo_blockly_runner', 'quickAlgo_subtask', 'quickAlgo_context']},
+      {name: 'quickAlgo-all-python', included: ['python_count', 'ace', 'ace_python', 'skulpt_quickAlgo', 'skulpt_stdlib', 'skulpt_debugger', 'quickAlgo_utils', 'quickAlgo_i18n', 'quickAlgo_interface', 'quickAlgo_python_interface', 'quickAlgo_python_runner', 'quickAlgo_subtask', 'quickAlgo_context']}
+   ];
+};
+
 
 // from http://stackoverflow.com/questions/979975/
 var QueryString = function () {
@@ -161,10 +198,47 @@ var QueryString = function () {
 }();
 
 
+function getBundles(modulesList) {
+   // Check modulesList for modules which are already bundled together
+
+   // For now, only do it if useBundles is true
+   if(!window.useBundles) { return modulesList; }
+
+   if(typeof bundledModules == 'function') {
+      bundledModules = bundledModules();
+   }
+   for(var iBundle in bundledModules) {
+      var bundleIncludes = bundledModules[iBundle].included;
+      var newModulesList = modulesList.slice();
+      var isFirst = true;
+      var ok = true;
+      for(var iMod in bundleIncludes) {
+         var idx = newModulesList.indexOf(bundleIncludes[iMod]);
+         if(idx == -1) {
+            ok = false;
+            break;
+         }
+         if(isFirst) {
+            // Include the name of the bundle to include instead
+            newModulesList.splice(idx, 1, bundledModules[iBundle].name);
+            isFirst = false;
+         } else {
+            newModulesList.splice(idx, 1);
+         }
+      }
+      if(ok) {
+         modulesList = newModulesList;
+      }
+   }
+   return modulesList;
+}
+
+
 function importModules(modulesList) {
    if(typeof importableModules == 'function') {
       importableModules = importableModules();
    };
+   modulesList = getBundles(modulesList);
    var modulesStr = '';
    for(var iMod in modulesList) {
       var moduleName = modulesList[iMod];
@@ -179,6 +253,10 @@ function importModules(modulesList) {
 
          var modClass = curModule.class ? curModule.class : 'module';
          var modSrc = curModule.src;
+         if(QueryString.v) {
+            // Add v= parameters to the URLs
+            modSrc += (modSrc.indexOf('?') > -1 ? '&' : '?') + 'v=' + QueryString.v;
+         }
          var modId = curModule.id ? curModule.id : moduleName;
          if(curModule.type == 'stylesheet') {
             modulesStr += '';
diff --git a/pemFioi/importModules-1.1.js b/pemFioi/importModules-1.1.js
index a5686fac1..6bd7abbe2 100644
--- a/pemFioi/importModules-1.1.js
+++ b/pemFioi/importModules-1.1.js
@@ -26,22 +26,32 @@ var importableModules = function () {
       'drag_lib-2.0': {src: modulesPath+"/pemFioi/drag_lib-2.0.js", id: "http://www.france-ioi.org/modules/pemFioi/drag_lib-2.0.js"},
       'randomGenerator-1.0': {src: modulesPath+"/pemFioi/randomGenerator-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/randomGenerator-1.0.js"},
       'simpleKeyboard-1.0': {src: modulesPath+"/pemFioi/simpleKeyboard-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/simpleKeyboard-1.0.js"},
+      'save-svg-as-png': {src: modulesPath+"/ext/save-svg-as-png/saveSvgAsPng.js", id: "save-svg-as-png"},
 
       'platform-pr': {classStr: "proxy module", src: modulesPath+"/integrationAPI.01/official/platform-pr.js", id: "http://www.france-ioi.org/modules/integrationAPI.01/official/platform-pr.js"},
       'buttonsAndMessages': {classStr: "stdButtonsAndMessages module", src: modulesPath+"/integrationAPI.01/installationAPI.01/pemFioi/buttonsAndMessages.js",  id: "http://www.france-ioi.org/modules/integrationAPI.01/installationAPI.01/pemFioi/buttonsAndMessages.js"},
       'installationAPI.01': {classStr: "remove", src: modulesPath+"/integrationAPI.01/installationAPI.01/pemFioi/installation.js"},
       'miniPlatform': {classStr: "remove", src: modulesPath+"/integrationAPI.01/official/miniPlatform.js"},
+      'static-task': {src: modulesPath+"/pemFioi/static-task.js"},
+      'fonts-loader-1.0': {src: modulesPath+"/pemFioi/fontsLoader-1.0.js", id: "fonts-loader"},
 
       'acorn': {src: modulesPath+"/ext/js-interpreter/acorn.js", id: "acorn"},
+      'acorn-walk': {src: modulesPath+"/ext/acorn/walk.js", id: "acorn-walk"},
       'interpreter': {src: modulesPath+"/ext/js-interpreter/interpreter.js", id: "interpreter"},
       'ace': {src: modulesPath+"/ext/ace/ace.js", id: "ace"},
       'ace_python': {src: modulesPath+"/ext/ace/mode-python.js", id: "ace_python"},
+      'ace_language_tools': {src: modulesPath+"/ext/ace/ext-language_tools.js", id: "ace_language_tools"},
       'processing-1.4.8': {src: modulesPath+"/ext/processing/1.4.8/processing.min.js", id: "https://raw.github.com/processing-js/processing-js/v1.4.8/processing.min.js"},
+      'zen3d': { src: modulesPath + "/ext/zen3d/zen3d.min.js", id: "zen3d" },
+      'zen3d_OrbitControls': { src: modulesPath + "/ext/zen3d/controls/OrbitControls.js", id: "zen3d_OrbitControls" },
+      'zen3d_Sprite': { src: modulesPath + "/ext/zen3d/objects/Sprite.js", id: "zen3d_Sprite" },
+      
 
       'taskStyles-0.1': {type: "stylesheet", src: modulesPath+"/pemFioi/taskStyles-0.1.css", id: "http://www.france-ioi.org/modules/pemFioi/taskStyles-0.1.css"},
 
       'conceptDisplay-1.0': {src: modulesPath+"/pemFioi/conceptDisplay-1.0.js", id: "concept_display"},
       'conceptViewer-1.0': {src: modulesPath+"/pemFioi/conceptViewer-1.0.js", id: "concept_viewer"},
+      'conceptViewer_css-1.0': {type: "stylesheet", src: modulesPath+"/pemFioi/conceptViewer-1.0.css", id: "concept_viewer_css"},
 
       'blockly': {src: modulesPath+"/ext/blockly/blockly_compressed.js", id: "blockly"},
       'blockly_blocks': {src: modulesPath+"/ext/blockly/blocks_compressed.js", id: "blockly_blocks"},
@@ -51,16 +61,23 @@ var importableModules = function () {
       'blockly_en': {src: modulesPath+"/ext/blockly/en.js", id: "blockly_en"},
       'blockly_de': {src: modulesPath+"/ext/blockly/de.js", id: "blockly_de"},
       'blockly_es': {src: modulesPath+"/ext/blockly/es.js", id: "blockly_es"},
+      'blockly_sl': {src: modulesPath+"/ext/blockly/sl.js", id: "blockly_sl"},
       'blockly_fioi': {src: modulesPath+"/ext/blockly-fioi/fioi-blockly.min.js", id: "blockly_fioi"},
 
       'blocklyRobot_lib': {src: modulesPath+"/pemFioi/blocklyRobot_lib-0.9.1.js", id: "blocklyRobot_lib"},
       'blockly-robot': {src: modulesPath+"/pemFioi/blocklyRobot_lib-0.9.1.js", id: "blocklyRobot_lib"}, // for BWINF legacy
       'blockly-printer': {src: modulesPath+"/pemFioi/blocklyPrinter_lib.js", id: "blocklyPrinter_lib"},
+      'blockly-printer2': {src: modulesPath+"/pemFioi/blocklyPrinter_lib-2.1.js", id: "blocklyPrinter_lib"},
       'blockly-turtle': {src: modulesPath+"/pemFioi/blocklyTurtle_lib.js", id: "blocklyTurtle_lib"},
       'blockly-processing': {src: modulesPath+"/pemFioi/blocklyProcessing_lib.js", id: "blocklyProcessing_lib"},
-      'blockly-example': {src: modulesPath+"/pemFioi/blocklyExample_lib.js", id: "blocklyExample_lib"},
+      'blockly-processing-v2': {src: modulesPath+"/pemFioi/blocklyProcessing_lib_v2.js", id: "blocklyProcessing_lib_v2"},
+      'blockly-template': {src: modulesPath+"/pemFioi/blocklyTemplate_lib.js", id: "blocklyTemplate_lib"},
       'jwinf_css': {type: "stylesheet", src: modulesPath+"/pemFioi/jwinf.css", id: "jwinf_css"}, // for BWINF
 
+      'blockly-isndraw': {src: modulesPath+"/pemFioi/blocklyIsnDraw_lib.js", id: "blocklyIsnDraw_lib"},
+      'blockly-maths': {src: modulesPath+"/pemFioi/blocklyMaths_lib.js", id: "blocklyMaths_lib"},
+      'blockly-printer-2.0': {src: modulesPath+"/pemFioi/blocklyPrinter_lib-2.0.js", id: "blocklyPrinter_lib-2.0"},
+
       'quickAlgo_utils': {src: modulesPath+"/pemFioi/quickAlgo/utils.js", id: "quickAlgo_utils"},
       'quickAlgo_i18n': {src: modulesPath+"/pemFioi/quickAlgo/i18n.js", id: "quickAlgo_i18n"},
       'quickAlgo_interface': {src: modulesPath+"/pemFioi/quickAlgo/interface.js", id: "quickAlgo_interface"},
@@ -82,7 +99,50 @@ var importableModules = function () {
       'python_count': {src: modulesPath+"/pemFioi/pythonCount-1.0.js", id: "python_count"},
       'skulpt_quickAlgo': {src: modulesPath+"ext/skulpt/skulpt.quickAlgo.min.js", id: "skulpt_quickAlgo"},
       'skulpt_stdlib': {src: modulesPath+"ext/skulpt/skulpt-stdlib.js", id: "skulpt_stdlib"},
-      'skulpt_debugger': {src: modulesPath+"ext/skulpt/debugger.js", id: "skulpt_debugger"}
+      'skulpt_debugger': {src: modulesPath+"ext/skulpt/debugger.js", id: "skulpt_debugger"},
+
+      'simple_draw': {src: modulesPath+"/pemFioi/javascool/simple_draw.js", id: "simple_draw"},
+      'blockly_simple_draw': {src: modulesPath+"/pemFioi/javascool/blockly_simple_draw.js", id: "blockly_simple_draw"},
+
+      'p5': {src: modulesPath+"/pemFioi/p5/p5.js", id: "p5"},
+      'p5.sound': {src: modulesPath+"/pemFioi/p5/p5.sound.js", id: "p5.sound"},
+      'player_p5': {src: modulesPath+"/pemFioi/p5/player_p5.js", id: "player_p5"},
+      'blockly_p5': {src: modulesPath+"/pemFioi/p5/blockly_p5.js", id: "blockly_p5"},
+
+      'geography': {src: modulesPath+"/pemFioi/components/geography/geography.js", id: "geography"},
+
+      'blockly_map': {src: modulesPath+"/pemFioi/map/blockly_map.js", id: "blockly_map"},
+      'map': {src: modulesPath+"/pemFioi/map/map.js", id: "map"},
+
+      'blockly_map_v2': {src: modulesPath+"/pemFioi/map_v2/blockly_map.js", id: "blockly_map_v2"},
+      'map_v2': {src: modulesPath+"/pemFioi/map_v2/map.js", id: "map_v2"},            
+
+      'blockly_database': {src: modulesPath+"/pemFioi/database/blockly_database.js", id: "blockly_database"},
+      'database': {src: modulesPath+"/pemFioi/database/database.js", id: "database"},
+      'database_css': {type: "stylesheet", src: modulesPath+"/pemFioi/database/styles.css", id: "database_css"},
+
+      'files_repository': {src: modulesPath+"/pemFioi/shared/files_repository.js", id: "files_repository"},
+      'blocks_helper': {src: modulesPath+"/pemFioi/shared/blocks_helper.js", id: "blocks_helper"},
+      'logger': {src: modulesPath+"/pemFioi/shared/logger.js", id: "logger"},
+
+      'taskVideo': {src: modulesPath+"/pemFioi/taskVideo/taskVideo.js", id: "taskVideo"},
+      'taskVideoPlayer': {src: modulesPath+"/pemFioi/taskVideo/player.js", id: "taskVideoPlayer"},
+      'taskVideo_css': {type: "stylesheet", src: modulesPath+"/pemFioi/taskVideo/player.css", id: "taskVideo_css"},
+
+      // earth3d and earth textures
+      'earth3d': {src: modulesPath+"/pemFioi/components/earth3d/earth3d.js", id: "earth3d"},
+      'earth3d_512': {src: modulesPath+"/pemFioi/components/earth3d/textures/512.js", id: "earth3d_512"},
+      'earth3d_1024': {src: modulesPath+"/pemFioi/components/earth3d/textures/1024.js", id: "earth3d_1024"},
+      'earth3d_2048': {src: modulesPath+"/pemFioi/components/earth3d/textures/2048.js", id: "earth3d_2048"},
+
+      // Bundles
+      'bebras-base': {src: modulesPath+"bundles/bebras-base.js", id: "bundle-bebras-base"},
+      'bebras-interface': {src: modulesPath+"bundles/bebras-interface.js", id: "bundle-bebras-interface"},
+      'js-interpreter': {src: modulesPath+"bundles/js-interpreter.js", id: "bundle-js-interpreter"},
+      'blockly-base': {src: modulesPath+"bundles/blockly-base.js", id: "bundle-blockly-base"},
+      'scratch-base': {src: modulesPath+"bundles/scratch-base.js", id: "bundle-scratch-base"},
+      'quickAlgo-all-blockly': {src: modulesPath+"bundles/quickAlgo-all-blockly.js", id: "bundle-quickAlgo-all-blockly"},
+      'quickAlgo-all-python': {src: modulesPath+"bundles/quickAlgo-all-python.js", id: "bundle-quickAlgo-all-python"}
    }
 }
 
@@ -91,6 +151,7 @@ var languageScripts = function () {
    return {
       blockly: [
          'acorn',
+         'acorn-walk',
          'interpreter',
          'blockly',
          'blockly_blocks',
@@ -110,6 +171,7 @@ var languageScripts = function () {
       ],
       scratch: [
          'acorn',
+         'acorn-walk',
          'interpreter',
          'scratch',
          'scratch_blocks_common',
@@ -134,6 +196,7 @@ var languageScripts = function () {
          'python_count',
          'ace',
          'ace_python',
+         'ace_language_tools',
          'skulpt_quickAlgo',
          'skulpt_stdlib',
          'skulpt_debugger',
@@ -149,10 +212,23 @@ var languageScripts = function () {
    }
 }
 
+var bundledModules = function () {
+   // List of bundles and which modules they include
+   // How to import the bundles is defined in importableModules
+   return [
+      {name: 'bebras-base', included: ['jquery-1.7.1', 'JSON-js', 'raphael-2.2.1', 'beaver-task-2.0', 'jschannel', 'raphaelFactory-1.0', 'delayFactory-1.0', 'simulationFactory-1.0']},
+      {name: 'bebras-interface', included: ['platform-pr', 'buttonsAndMessages', 'beav-1.0', 'installationAPI.01', 'miniPlatform']},
+      {name: 'js-interpreter', included: ['acorn', 'acorn-walk', 'interpreter']},
+      {name: 'blockly-base', included: ['blockly', 'blockly_blocks', 'blockly_javascript', 'blockly_python']},
+      {name: 'scratch-base', included: ['scratch', 'scratch_blocks_common', 'scratch_blocks', 'blockly_javascript', 'blockly_python']},
+      {name: 'quickAlgo-all-blockly', included: ['quickAlgo_utils', 'quickAlgo_i18n', 'quickAlgo_interface', 'quickAlgo_blockly_blocks','quickAlgo_blockly_interface', 'quickAlgo_blockly_runner', 'quickAlgo_subtask', 'quickAlgo_context']},
+      {name: 'quickAlgo-all-python', included: ['python_count', 'ace', 'ace_python', 'skulpt_quickAlgo', 'skulpt_stdlib', 'skulpt_debugger', 'quickAlgo_utils', 'quickAlgo_i18n', 'quickAlgo_interface', 'quickAlgo_python_interface', 'quickAlgo_python_runner', 'quickAlgo_subtask', 'quickAlgo_context']}
+   ];
+};
 
 // from http://stackoverflow.com/questions/979975/
 var QueryString = function () {
-  // This function is anonymous, is executed immediately and 
+  // This function is anonymous, is executed immediately and
   // the return value is assigned to QueryString!
   var query_string = {};
   var query = window.location.search.substring(1);
@@ -170,15 +246,52 @@ var QueryString = function () {
     } else {
       query_string[pair[0]].push(decodeURIComponent(pair[1]));
     }
-  } 
+  }
   return query_string;
 }();
 
 
+function getBundles(modulesList) {
+   // Check modulesList for modules which are already bundled together
+
+   // For now, only do it if useBundles is true
+   if(!window.useBundles) { return modulesList; }
+
+   if(typeof bundledModules == 'function') {
+      bundledModules = bundledModules();
+   }
+   for(var iBundle in bundledModules) {
+      var bundleIncludes = bundledModules[iBundle].included;
+      var newModulesList = modulesList.slice();
+      var isFirst = true;
+      var ok = true;
+      for(var iMod in bundleIncludes) {
+         var idx = newModulesList.indexOf(bundleIncludes[iMod]);
+         if(idx == -1) {
+            ok = false;
+            break;
+         }
+         if(isFirst) {
+            // Include the name of the bundle to include instead
+            newModulesList.splice(idx, 1, bundledModules[iBundle].name);
+            isFirst = false;
+         } else {
+            newModulesList.splice(idx, 1);
+         }
+      }
+      if(ok) {
+         modulesList = newModulesList;
+      }
+   }
+   return modulesList;
+}
+
+
 function importModules(modulesList) {
    if(typeof importableModules == 'function') {
       importableModules = importableModules();
    };
+   modulesList = getBundles(modulesList);
    var modulesStr = '';
    for(var iMod in modulesList) {
       var moduleName = modulesList[iMod];
@@ -193,6 +306,10 @@ function importModules(modulesList) {
 
          var modClass = curModule.classStr ? curModule.classStr : 'module';
          var modSrc = curModule.src;
+         if(QueryString.v) {
+            // Add v= parameters to the URLs
+            modSrc += (modSrc.indexOf('?') > -1 ? '&' : '?') + 'v=' + QueryString.v;
+         }
          var modId = curModule.id ? curModule.id : moduleName;
          if(curModule.type == 'stylesheet') {
             modulesStr += '';
diff --git a/pemFioi/importModules-1.1_M.js b/pemFioi/importModules-1.1_M.js
new file mode 100644
index 000000000..8788a2d4c
--- /dev/null
+++ b/pemFioi/importModules-1.1_M.js
@@ -0,0 +1,397 @@
+(function () {
+
+var importedModules = {};
+
+var importableModules = function () {
+   // Wait to have modulesPath defined before executing the function
+   return {
+      'jquery-1.7.1': {src: modulesPath+"/ext/jquery/1.7/jquery.min.js", id: "http://code.jquery.com/jquery-1.7.1.min.js"},
+      'jquery-ui.touch-punch': {src: modulesPath+"/ext/jquery-ui/jquery.ui.touch-punch.min.js", id: "jquery.ui.touch-punch.min.js"},
+      'jquery-ui-1.10.3': {src: modulesPath+"/ext/jquery-ui/1.10/jquery-ui-1.10.3.custom.min.js", id: "https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"},
+      'jquery-ui-1.10.3-styles': {type: "stylesheet", src: modulesPath+"/ext/jquery-ui/1.10/jquery-ui.css", id: "https://code.jquery.com/ui/1.10/jquery-ui.css"},      
+      'JSON-js': {src: modulesPath+"/ext/json/json2.min.js", id: "https://github.com/douglascrockford/JSON-js"},
+      'raphael-2.2.1': {src: modulesPath+"/ext/raphael/2.2.1/raphael.min.js", id: "http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.1/raphael.min.js"},
+      'beaver-task-2.0': {src: modulesPath+"/pemFioi/beaver-task-2.0.js", id: "http://www.france-ioi.org/modules/pemFioi/beaver-task-2.0.js"},
+      'jschannel': {src: modulesPath+"/ext/jschannel/jschannel.js", id: "http://www.france-ioi.org/modules/ext/jschannel/jschannel.js"},
+      'raphaelFactory-1.0': {src: modulesPath+"/pemFioi/raphaelFactory-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/raphaelFactory-1.0.js"},
+      'delayFactory-1.0': {src: modulesPath+"/pemFioi/delayFactory-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/delayFactory-1.0.js"},
+      'simulationFactory-1.0': {src: modulesPath+"/pemFioi/simulationFactory-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/simulationFactory-1.0.js"},
+      'beav-1.0': {src: modulesPath+"/pemFioi/beav-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/beav-1.0.js"},
+      'raphael-2.1': {src: modulesPath+"/ext/raphael/2.1/raphael-min.js", id: "http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"},
+      'simulation-2.0': {src: modulesPath+"/pemFioi/simulation-2.0.js", id: "http://www.france-ioi.org/modules/pemFioi/simulation-2.0.js"},
+      'raphaelButton-1.0': {src: modulesPath+"/pemFioi/raphaelButton-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/raphaelButton-1.0.js"},
+      'graph-1.0': {src: modulesPath+"/pemFioi/graph-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/graph-1.0.js"},
+      'visual-graph-1.0': {src: modulesPath+"/pemFioi/visual-graph-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/visual-graph-1.0.js"},
+      'visual-graph-1.1': {src: modulesPath+"/pemFioi/visual-graph-1.1.js", id: "http://www.france-ioi.org/modules/pemFioi/visual-graph-1.1.js"},
+      'graph-mouse-1.0': {src: modulesPath+"/pemFioi/graph-mouse-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/graph-mouse-1.0.js"},
+      'graph-mouse-1.1': {src: modulesPath+"/pemFioi/graph-mouse-1.1.js", id: "http://www.france-ioi.org/modules/pemFioi/graph-mouse-1.1.js"},
+      'graph-mouse-1.2': {src: modulesPath+"/pemFioi/graph-mouse-1.2.js", id: "http://www.france-ioi.org/modules/pemFioi/graph-mouse-1.2.js"},
+      'crane-1.0': {src: modulesPath+"/pemFioi/crane-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/crane-1.0.js"},
+      'grid-1.0': {src: modulesPath+"/pemFioi/grid-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/grid-1.0.js"},
+      'grid-1.1': {src: modulesPath+"/pemFioi/grid-1.1.js", id: "http://www.france-ioi.org/modules/pemFioi/grid-1.1.js"},
+      'drag_lib-2.0': {src: modulesPath+"/pemFioi/drag_lib-2.0.js", id: "http://www.france-ioi.org/modules/pemFioi/drag_lib-2.0.js"},
+      'randomGenerator-1.0': {src: modulesPath+"/pemFioi/randomGenerator-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/randomGenerator-1.0.js"},
+      'simpleKeyboard-1.0': {src: modulesPath+"/pemFioi/simpleKeyboard-1.0.js", id: "http://www.france-ioi.org/modules/pemFioi/simpleKeyboard-1.0.js"},
+      'save-svg-as-png': {src: modulesPath+"/ext/save-svg-as-png/saveSvgAsPng.js", id: "save-svg-as-png"},
+      'shape-paths': {src: modulesPath+"/pemFioi/shape-paths.js", id: "shape-paths"},
+
+      'platform-pr': {classStr: "proxy module", src: modulesPath+"/integrationAPI.01/official/platform-pr.js", id: "http://www.france-ioi.org/modules/integrationAPI.01/official/platform-pr.js"},
+      'buttonsAndMessages': {classStr: "stdButtonsAndMessages module", src: modulesPath+"/integrationAPI.01/installationAPI.01/pemFioi/buttonsAndMessages.js",  id: "http://www.france-ioi.org/modules/integrationAPI.01/installationAPI.01/pemFioi/buttonsAndMessages.js"},
+      'buttonsAndMessages_resp': {classStr: "stdButtonsAndMessages module", src: modulesPath+"/integrationAPI.01/installationAPI.01/pemFioi/buttonsAndMessages_resp.js",  id: "http://www.france-ioi.org/modules/integrationAPI.01/installationAPI.01/pemFioi/buttonsAndMessages.js"},
+      'installationAPI.01': {classStr: "remove", src: modulesPath+"/integrationAPI.01/installationAPI.01/pemFioi/installation.js"},
+      'miniPlatform': {classStr: "remove", src: modulesPath+"/integrationAPI.01/official/miniPlatform_M.js"},
+      'static-task': {src: modulesPath+"/pemFioi/static-task.js"},
+      'fonts-loader-1.0': {src: modulesPath+"/pemFioi/fontsLoader-1.0.js", id: "fonts-loader"},
+
+      'acorn': {src: modulesPath+"/ext/js-interpreter/acorn.js", id: "acorn"},
+      'acorn-walk': {src: modulesPath+"/ext/acorn/walk.js", id: "acorn-walk"},
+      'interpreter': {src: modulesPath+"/ext/js-interpreter/interpreter.js", id: "interpreter"},
+      'ace': {src: modulesPath+"/ext/ace/ace.js", id: "ace"},
+      'ace_python': {src: modulesPath+"/ext/ace/mode-python.js", id: "ace_python"},
+      'ace_language_tools': {src: modulesPath+"/ext/ace/ext-language_tools.js", id: "ace_language_tools"},
+      'processing-1.4.8': {src: modulesPath+"/ext/processing/1.4.8/processing.min.js", id: "https://raw.github.com/processing-js/processing-js/v1.4.8/processing.min.js"},
+
+      'taskStyles-0.1': {type: "stylesheet", src: modulesPath+"/pemFioi/taskStyles-0.1_M.css", id: "http://www.france-ioi.org/modules/pemFioi/taskStyles-0.1_M.css"},
+      'taskStyles-0.2': {type: "stylesheet", src: modulesPath+"/pemFioi/taskStyles-0.2_M.css", id: "http://www.france-ioi.org/modules/pemFioi/taskStyles-0.2_M.css"},
+      'taskStyles-0.3': {type: "stylesheet", src: modulesPath+"/pemFioi/taskStyles-0.3.css", id: "http://www.france-ioi.org/modules/pemFioi/taskStyles-0.3.css"},
+      'taskStyles-0.3_M': {type: "stylesheet", src: modulesPath+"/pemFioi/taskStyles-0.3_M.css", id: "http://www.france-ioi.org/modules/pemFioi/taskStyles-0.3_M.css"},
+      'taskStyles-mobileFirst': {type: "stylesheet", src: modulesPath+"/pemFioi/taskStyles-mobileFirst.css", id: "http://www.france-ioi.org/modules/pemFioi/taskStyles-mobileFirst.css"},
+
+      'conceptDisplay-1.0': {src: modulesPath+"/pemFioi/conceptDisplay-1.0.js", id: "concept_display"},
+      'conceptViewer-1.0': {src: modulesPath+"/pemFioi/conceptViewer-1.0.js", id: "concept_viewer"},
+      'conceptViewer_css-1.0': {type: "stylesheet", src: modulesPath+"/pemFioi/conceptViewer-1.0.css", id: "concept_viewer_css"},
+
+      'blockly': {src: modulesPath+"/ext/blockly/blockly_compressed.js", id: "blockly"},
+      'blockly_blocks': {src: modulesPath+"/ext/blockly/blocks_compressed.js", id: "blockly_blocks"},
+      'blockly_javascript': {src: modulesPath+"/ext/blockly/javascript_compressed.js", id: "blockly_javascript"},
+      'blockly_python': {src: modulesPath+"/ext/blockly/python_compressed.js", id: "blockly_python"},
+      'blockly_fr': {src: modulesPath+"/ext/blockly/fr.js", id: "blockly_fr"},
+      'blockly_en': {src: modulesPath+"/ext/blockly/en.js", id: "blockly_en"},
+      'blockly_de': {src: modulesPath+"/ext/blockly/de.js", id: "blockly_de"},
+      'blockly_es': {src: modulesPath+"/ext/blockly/es.js", id: "blockly_es"},
+      'blockly_sl': {src: modulesPath+"/ext/blockly/sl.js", id: "blockly_sl"},
+      'blockly_fioi': {src: modulesPath+"/ext/blockly-fioi/fioi-blockly.min.js", id: "blockly_fioi"},
+
+      'blocklyRobot_lib': {src: modulesPath+"/pemFioi/blocklyRobot_lib-0.9.1.js", id: "blocklyRobot_lib"},
+      'blockly-robot': {src: modulesPath+"/pemFioi/blocklyRobot_lib-0.9.1.js", id: "blocklyRobot_lib"}, // for BWINF legacy
+      'blockly-printer': {src: modulesPath+"/pemFioi/blocklyPrinter_lib.js", id: "blocklyPrinter_lib"},
+      'blockly-printer2': {src: modulesPath+"/pemFioi/blocklyPrinter_lib-2.1.js", id: "blocklyPrinter_lib"},
+      'blockly-turtle': {src: modulesPath+"/pemFioi/blocklyTurtle_lib.js", id: "blocklyTurtle_lib"},
+      'blockly-processing': {src: modulesPath+"/pemFioi/blocklyProcessing_lib.js", id: "blocklyProcessing_lib"},
+      'blockly-template': {src: modulesPath+"/pemFioi/blocklyTemplate_lib.js", id: "blocklyTemplate_lib"},
+      'jwinf_css': {type: "stylesheet", src: modulesPath+"/pemFioi/jwinf.css", id: "jwinf_css"}, // for BWINF
+
+      'blockly-isndraw': {src: modulesPath+"/pemFioi/blocklyIsnDraw_lib.js", id: "blocklyIsnDraw_lib"},
+      'blockly-maths': {src: modulesPath+"/pemFioi/blocklyMaths_lib.js", id: "blocklyMaths_lib"},
+      'blockly-printer-2.0': {src: modulesPath+"/pemFioi/blocklyPrinter_lib-2.0.js", id: "blocklyPrinter_lib-2.0"},
+
+      'quickAlgo_utils': {src: modulesPath+"/pemFioi/quickAlgo/utils.js", id: "quickAlgo_utils"},
+      'quickAlgo_i18n': {src: modulesPath+"/pemFioi/quickAlgo/i18n.js", id: "quickAlgo_i18n"},
+      'quickAlgo_interface': {src: modulesPath+"/pemFioi/quickAlgo/interface.js", id: "quickAlgo_interface"},
+      'quickAlgo_blockly_blocks': {src: modulesPath+"/pemFioi/quickAlgo/blockly_blocks.js", id: "quickAlgo_blockly_blocks"},
+      'quickAlgo_blockly_interface': {src: modulesPath+"/pemFioi/quickAlgo/blockly_interface.js", id: "quickAlgo_blockly_interface"},
+      'quickAlgo_blockly_runner': {src: modulesPath+"/pemFioi/quickAlgo/blockly_runner.js", id: "quickAlgo_blockly_runner"},
+      'quickAlgo_python_interface': {src: modulesPath+"/pemFioi/quickAlgo/python_interface.js", id: "quickAlgo_python_interface"},
+      'quickAlgo_python_runner': {src: modulesPath+"/pemFioi/quickAlgo/python_runner.js", id: "quickAlgo_python_runner"},
+      'quickAlgo_subtask': {src: modulesPath+"/pemFioi/quickAlgo/subtask.js", id: "quickAlgo_subtask"},
+      'quickAlgo_context': {src: modulesPath+"/pemFioi/quickAlgo/context.js", id: "quickAlgo_context"},
+      'quickAlgo_css': {type: "stylesheet", src: modulesPath+"/pemFioi/quickAlgo/quickAlgo.css", id: "quickAlgo_css"},
+
+      'scratch': {src: modulesPath+"/ext/scratch/blockly_compressed_vertical.js", id: "scratch"},
+      'scratch_blocks_common': {src: modulesPath+"/ext/scratch/blocks_compressed.js", id: "scratch_blocks_common"},
+      'scratch_blocks': {src: modulesPath+"/ext/scratch/blocks_compressed_vertical.js", id: "scratch_blocks"},
+      'scratch_fixes': {src: modulesPath+"/ext/scratch/fixes.js", id: "scratch_fixes"},
+      'scratch_procedures': {src: modulesPath+"/ext/scratch/procedures.js", id: "scratch_procedures"},
+
+      'python_count': {src: modulesPath+"/pemFioi/pythonCount-1.0.js", id: "python_count"},
+      'skulpt_quickAlgo': {src: modulesPath+"ext/skulpt/skulpt.quickAlgo.min.js", id: "skulpt_quickAlgo"},
+      'skulpt_stdlib': {src: modulesPath+"ext/skulpt/skulpt-stdlib.js", id: "skulpt_stdlib"},
+      'skulpt_debugger': {src: modulesPath+"ext/skulpt/debugger.js", id: "skulpt_debugger"},
+
+      'simple_draw': {src: modulesPath+"/pemFioi/javascool/simple_draw.js", id: "simple_draw"},
+      'blockly_simple_draw': {src: modulesPath+"/pemFioi/javascool/blockly_simple_draw.js", id: "blockly_simple_draw"},
+
+      'p5': {src: modulesPath+"/pemFioi/p5/p5.js", id: "p5"},
+      'p5.sound': {src: modulesPath+"/pemFioi/p5/p5.sound.js", id: "p5.sound"},
+      'player_p5': {src: modulesPath+"/pemFioi/p5/player_p5.js", id: "player_p5"},
+      'blockly_p5': {src: modulesPath+"/pemFioi/p5/blockly_p5.js", id: "blockly_p5"},
+
+      'blockly_map': {src: modulesPath+"/pemFioi/map/blockly_map.js", id: "blockly_map"},
+      'map': {src: modulesPath+"/pemFioi/map/map.js", id: "map"},
+
+      'blockly_database': {src: modulesPath+"/pemFioi/database/blockly_database.js", id: "blockly_database"},
+      'database': {src: modulesPath+"/pemFioi/database/database.js", id: "database"},
+      'database_css': {type: "stylesheet", src: modulesPath+"/pemFioi/database/styles.css", id: "database_css"},
+
+      'files_repository': {src: modulesPath+"/pemFioi/shared/files_repository.js", id: "files_repository"},
+      'blocks_helper': {src: modulesPath+"/pemFioi/shared/blocks_helper.js", id: "blocks_helper"},
+
+      'taskVideo': {src: modulesPath+"/pemFioi/taskVideo/taskVideo.js", id: "taskVideo"},
+      'taskVideoPlayer': {src: modulesPath+"/pemFioi/taskVideo/player.js", id: "taskVideoPlayer"},
+      'taskVideo_css': {type: "stylesheet", src: modulesPath+"/pemFioi/taskVideo/player.css", id: "taskVideo_css"},
+
+      // map2d
+      'map2d': {src: modulesPath+"/pemFioi/components/map2d/map2d.js", id: "map2d"},
+      'map2d_styles': {type: "stylesheet", src: modulesPath+"/pemFioi/components/map2d/styles.css", id: "map2d_styles"},
+      'openstreetmap_task': {src: modulesPath+"/pemFioi/components/map2d/task.js", id: "openstreetmap_task"},
+
+      // gaps table
+      'gaps_table': {src: modulesPath+"/pemFioi/components/gaps-table/component.js", id: "gaps_table"},
+      'gaps_table_styles': {type: "stylesheet", src: modulesPath+"/pemFioi/components/gaps-table/styles.css", id: "gaps_table_styles"},
+      'gaps_table_task': {src: modulesPath+"/pemFioi/components/gaps-table/task.js", id: "gaps_table_task"},         
+
+      // csv editor
+      'csv_editor': {src: modulesPath+"/pemFioi/components/csv-text-editor/editor.js", id: "csv_editor"},
+      'csv_editor_styles': {type: "stylesheet", src: modulesPath+"/pemFioi/components/csv-text-editor/styles.css", id: "csv_editor_styles"},
+      'csv_editor_task': {src: modulesPath+"/pemFioi/components/csv-text-editor/task.js", id: "csv_editor_task"},      
+
+      // Language theory
+      'automata-1.0': {src: modulesPath+"/pemFioi/automata-1.0.js", id: "automata-1.0"},
+      'lr_parser-1.0': {src: modulesPath+"/pemFioi/LR_parser-1.0.js", id: "lr_parser-1.0"},
+      // 'lr_parser-1.0-css': {type: "stylesheet", src: modulesPath+"/pemFioi/LR_parser-1.0.css", id: "lr_parser-1.0-css"},
+      'machines-grammar': {src: modulesPath+"/ext/machines/js/grammar.js", id: "machines-grammar"},
+      'machines-lrclosuretable': {src: modulesPath+"/ext/machines/js/lrclosuretable.js", id: "machines-lrclosuretable"},
+      'machines-lrtable': {src: modulesPath+"/ext/machines/js/lrtable.js", id: "machines-lrtable"},
+      'machines-tools-alt': {src: modulesPath+"/ext/machines/js/tools-alt.js", id: "machines-tools-alt"},
+      'machines-slritem': {src: modulesPath+"/ext/machines/js/slritem.js", id: "machines-slritem"},
+      'machines-underscore': {src: modulesPath+"/ext/machines/js/underscore.js", id: "machines-underscore"},
+
+      // Bundles
+      'bebras-base': {src: modulesPath+"bundles/bebras-base.js", id: "bundle-bebras-base"},
+      'bebras-interface': {src: modulesPath+"bundles/bebras-interface.js", id: "bundle-bebras-interface"},
+      'js-interpreter': {src: modulesPath+"bundles/js-interpreter.js", id: "bundle-js-interpreter"},
+      'blockly-base': {src: modulesPath+"bundles/blockly-base.js", id: "bundle-blockly-base"},
+      'scratch-base': {src: modulesPath+"bundles/scratch-base.js", id: "bundle-scratch-base"},
+      'quickAlgo-all-blockly': {src: modulesPath+"bundles/quickAlgo-all-blockly.js", id: "bundle-quickAlgo-all-blockly"},
+      'quickAlgo-all-python': {src: modulesPath+"bundles/quickAlgo-all-python.js", id: "bundle-quickAlgo-all-python"}
+   }
+}
+
+var languageScripts = function () {
+   var strLang = window.stringsLanguage ? window.stringsLanguage : 'fr';
+   return {
+      blockly: [
+         'acorn',
+         'acorn-walk',
+         'interpreter',
+         'blockly',
+         'blockly_blocks',
+         'blockly_javascript',
+         'blockly_python',
+         'blockly_' + strLang,
+         'blockly_fioi',
+         'quickAlgo_utils',
+         'quickAlgo_i18n',
+         'quickAlgo_interface',
+         'quickAlgo_blockly_blocks',
+         'quickAlgo_blockly_interface',
+         'quickAlgo_blockly_runner',
+         'quickAlgo_subtask',
+         'quickAlgo_context',
+         'quickAlgo_css'
+      ],
+      scratch: [
+         'acorn',
+         'acorn-walk',
+         'interpreter',
+         'scratch',
+         'scratch_blocks_common',
+         'scratch_blocks',
+         'blockly_javascript',
+         'blockly_python',
+         'blockly_' + strLang,
+         'blockly_fioi',
+         'scratch_fixes',
+         'scratch_procedures',
+         'quickAlgo_utils',
+         'quickAlgo_i18n',
+         'quickAlgo_interface',
+         'quickAlgo_blockly_blocks',
+         'quickAlgo_blockly_interface',
+         'quickAlgo_blockly_runner',
+         'quickAlgo_subtask',
+         'quickAlgo_context',
+         'quickAlgo_css'
+      ],
+      python: [
+         'python_count',
+         'ace',
+         'ace_python',
+         'ace_language_tools',
+         'skulpt_quickAlgo',
+         'skulpt_stdlib',
+         'skulpt_debugger',
+         'quickAlgo_utils',
+         'quickAlgo_i18n',
+         'quickAlgo_interface',
+         'quickAlgo_python_interface',
+         'quickAlgo_python_runner',
+         'quickAlgo_subtask',
+         'quickAlgo_context',
+         'quickAlgo_css'
+      ]
+   }
+}
+
+var bundledModules = function () {
+   // List of bundles and which modules they include
+   // How to import the bundles is defined in importableModules
+   return [
+      {name: 'bebras-base', included: ['jquery-1.7.1', 'JSON-js', 'raphael-2.2.1', 'beaver-task-2.0', 'jschannel', 'raphaelFactory-1.0', 'delayFactory-1.0', 'simulationFactory-1.0']},
+      {name: 'bebras-interface', included: ['platform-pr', 'buttonsAndMessages', 'beav-1.0', 'installationAPI.01', 'miniPlatform']},
+      {name: 'js-interpreter', included: ['acorn', 'acorn-walk', 'interpreter']},
+      {name: 'blockly-base', included: ['blockly', 'blockly_blocks', 'blockly_javascript', 'blockly_python']},
+      {name: 'scratch-base', included: ['scratch', 'scratch_blocks_common', 'scratch_blocks', 'blockly_javascript', 'blockly_python']},
+      {name: 'quickAlgo-all-blockly', included: ['quickAlgo_utils', 'quickAlgo_i18n', 'quickAlgo_interface', 'quickAlgo_blockly_blocks','quickAlgo_blockly_interface', 'quickAlgo_blockly_runner', 'quickAlgo_subtask', 'quickAlgo_context']},
+      {name: 'quickAlgo-all-python', included: ['python_count', 'ace', 'ace_python', 'skulpt_quickAlgo', 'skulpt_stdlib', 'skulpt_debugger', 'quickAlgo_utils', 'quickAlgo_i18n', 'quickAlgo_interface', 'quickAlgo_python_interface', 'quickAlgo_python_runner', 'quickAlgo_subtask', 'quickAlgo_context']}
+   ];
+};
+
+
+// from http://stackoverflow.com/questions/979975/
+var QueryString = function () {
+  // This function is anonymous, is executed immediately and
+  // the return value is assigned to QueryString!
+  var query_string = {};
+  var query = window.location.search.substring(1);
+  var vars = query.split("&");
+  for (var i=0;i -1 ? '&' : '?') + 'v=' + QueryString.v;
+         }
+         var modId = curModule.id ? curModule.id : moduleName;
+         if(curModule.type == 'stylesheet') {
+            modulesStr += '';
+         } else {
+            modulesStr += '';
+         }
+      } else {
+         console.error("Module '"+moduleName+"' unknown.");
+      }
+   }
+   document.write(modulesStr);
+}
+
+
+function conditionalLanguageElements(lang) {
+   var elemList = document.querySelectorAll('[data-lang]');
+
+   for(var iElem=0; iElem< elemList.length; iElem++) {
+      elem = elemList[iElem];
+      var elemLangs = elem.getAttribute('data-lang').split(' ');
+      var elemOk = false;
+      for (var i=0; i -1 ? '&' : '?') + 'v=' + QueryString.v;
+         }
+         var modId = curModule.id ? curModule.id : moduleName;
+         if(curModule.type == 'stylesheet') {
+            modulesStr += '';
+         } else {
+            modulesStr += '';
+         }
+      } else {
+         console.error("Module '"+moduleName+"' unknown.");
+      }
+   }
+   document.write(modulesStr);
+}
+
+
+function conditionalLanguageElements(lang) {
+   var elemList = document.querySelectorAll('[data-lang]');
+
+   for(var iElem=0; iElem< elemList.length; iElem++) {
+      elem = elemList[iElem];
+      var elemLangs = elem.getAttribute('data-lang').split(' ');
+      var elemOk = false;
+      for (var i=0; i -1 ? '&' : '?') + 'v=' + QueryString.v;
+            }
+            var modId = curModule.id ? curModule.id : moduleName;
+            if(curModule.type == 'stylesheet') {
+               modulesStr += '';
+            } else {
+               modulesStr += '';
+            }
+         } else {
+            console.error("Module '"+moduleName+"' unknown.");
+         }
+      }
+      document.write(modulesStr);
+   }
+
+
+   function conditionalLanguageElements(lang) {
+      var elemList = document.querySelectorAll('[data-lang]');
+
+      for(var iElem=0; iElem< elemList.length; iElem++) {
+         elem = elemList[iElem];
+         var elemLangs = elem.getAttribute('data-lang').split(' ');
+         var elemOk = false;
+         for (var i=0; i -1 ? '&' : '?') + 'v=' + QueryString.v;
+      }
+
+      var modId = module.id ? module.id : name;
+      if (module.type === 'stylesheet') {
+         return '';
+      } else {
+         return '';
+      }
+   }
+
+   function importModules(modulesList) {
+      if(typeof importableModules == 'function') {
+         importableModules = importableModules();
+      }
+      if(typeof bundledModules == 'function') {
+         bundledModules = bundledModules();
+      }
+
+      var bundlesByName = {};
+      for(var iBundle in bundledModules) {
+         var curBundle = bundledModules[iBundle];
+         bundlesByName[curBundle.name] = curBundle;
+      }
+
+      // If useBundles is True, we'll try to use bundles instead of the
+      // corresponding modules. Otherwise, we do the opposite and translate
+      // bundles into a list of modules.
+      if(window.useBundles) {
+         modulesList = modulesToBundles(modulesList);
+      } else {
+         modulesList = bundlesToModules(modulesList);
+      }
+
+      var modulesStr = '';
+      for(var iMod in modulesList) {
+         var moduleName = modulesList[iMod];
+         var curModule = importableModules[moduleName];
+         if(curModule) {
+            // Avoid importing the same module twice
+            if(importedModules[moduleName] === true) {
+               continue;
+            } else {
+               importedModules[moduleName] = true;
+            }
+
+            modulesStr += getModuleLoadHtml(moduleName, curModule);
+
+            /**
+             * If this is a bundle and if there are any CSS modules inside,
+             * load them separately as they cannot be in the bundle JS file.
+             */
+            var bundle = bundlesByName[moduleName];
+            if (bundle) {
+               var includedModules = bundle.included;
+               for (var iModule in includedModules) {
+                  var moduleName = includedModules[iModule];
+                  var curModule = importableModules[moduleName];
+
+                  if (curModule.type === 'stylesheet') {
+                     modulesStr += getModuleLoadHtml(moduleName, curModule);
+                  }
+               }
+            }
+         } else {
+            console.error("Module '"+moduleName+"' unknown.");
+         }
+      }
+      document.write(modulesStr);
+   }
+
+
+   function conditionalLanguageElements(lang) {
+      var elemList = document.querySelectorAll('[data-lang]');
+
+      for(var iElem=0; iElem< elemList.length; iElem++) {
+         elem = elemList[iElem];
+         var elemLangs = elem.getAttribute('data-lang').split(' ');
+         var elemOk = false;
+         for (var i=0; i';
+                    var blockArgs = block.blocklyJson.args0;
+                    for (var iParam = 0; iParam < block.params.length; iParam++) {
+                        params[iParam] = block.params[iParam];
+                        var paramData = typeData[params[iParam]] || { bType: 'input_value' };
+                        blockArgs[iParam] = { type: paramData.bType, name: "PARAM_" + iParam }
+                        block.blocklyXml +=
+                            '' +
+                            '' + paramData.defVal + '' +
+                            '';
+                    }
+                    block.blocklyXml += '';
+                }
+
+                context.javascool[block.name] = function() {
+                    var callback = arguments[arguments.length - 1];
+                    if(draw) {
+                        if(block.hasHandler) {
+                            // This function knows how to take care of the callback
+                            draw[block.name].apply(draw, arguments);
+                        } else {
+                            context.waitDelay(callback, draw[block.name].apply(draw, arguments))
+                        }
+                    } else {
+                        callback();
+                    }
+                }
+
+           })();
+        }
+     }
+
+
+    return context;
+}
+
+if(window.quickAlgoLibraries) {
+   quickAlgoLibraries.register('draw', getContext);
+} else {
+   if(!window.quickAlgoLibrariesList) { window.quickAlgoLibrariesList = []; }
+   window.quickAlgoLibrariesList.push(['draw', getContext]);
+}
diff --git a/pemFioi/javascool/example.html b/pemFioi/javascool/example.html
new file mode 100644
index 000000000..f84553854
--- /dev/null
+++ b/pemFioi/javascool/example.html
@@ -0,0 +1,22 @@
+
+
+    
+        
+        
+        
+    
+    
+        
    
+        
    
+        
+    
+
\ No newline at end of file
diff --git a/pemFioi/javascool/simple_draw.js b/pemFioi/javascool/simple_draw.js
new file mode 100644
index 000000000..9effbb118
--- /dev/null
+++ b/pemFioi/javascool/simple_draw.js
@@ -0,0 +1,201 @@
+function SimpleDraw(options) {
+
+    var defaults = {
+        context: null,
+        parent: document.body,
+        width: 400,
+        height: 400,
+        scale_x: 1,
+        scale_y: 1,
+        font: '14px sans-serif',
+        colors: {
+            background: '#333333',
+            axis: '#666666'
+        },
+        palette: [
+            '#000000', //0=black
+            '#f4a460', //1=brown
+            '#ff0000', //2=red
+            '#ffa500', //3=orange
+            '#ffff00', //4=yellow
+            '#00ff00', //5=green
+            '#0000ff', //6=blue
+            '#8a2be2', //7=violet
+            '#999999', //8= gray,
+            '#ffffff', //9= white
+        ]
+    }
+
+    var options = (function() {
+        var res = {}
+        for(var k in defaults) {
+            res[k] = k in options ? options[k] : defaults[k]
+        }
+        return res
+    })()
+
+
+    var canvas = document.createElement('canvas')
+    canvas.width = options.width
+    canvas.height = options.height
+    options.parent.appendChild(canvas)
+
+    var canvasContext = canvas.getContext('2d')
+    canvasContext.font = options.font
+    clear()
+
+
+    // private
+
+    function clear() {
+        canvasContext.fillStyle = options.colors.background
+        canvasContext.fillRect(0, 0, options.width, options.height)
+        canvasContext.strokeStyle = options.colors.axis
+        var ch = Math.round(0.5 * options.height)
+        canvasContext.beginPath()
+        canvasContext.moveTo(0, ch)
+        canvasContext.lineTo(options.width, ch)
+        canvasContext.stroke()
+        var cw = Math.round(0.5 * options.width)
+        canvasContext.beginPath()
+        canvasContext.moveTo(cw, 0)
+        canvasContext.lineTo(cw, options.height)
+        canvasContext.stroke()
+    }
+
+
+    function tx(x) {
+        // Translate x in -1..1 to a coordinate on the canvas
+        var r = 0.5 * options.width
+        return Math.round(r * (1 + x / options.scale_x))
+    }
+
+    function itx(x) {
+        // Translate x in 0..width to a -1..1
+        return (x / (0.5 * options.width) - 1) * options.scale_x;
+    }
+
+
+    function ty(y) {
+        // Translate y in -1..1 to a coordinate on the canvas
+        var r = 0.5 * options.height
+        return Math.round(r * (1 - y / options.scale_y))
+    }
+
+    function ity(y) {
+        // Translate y in 0..height to a -1..1
+        return (- 1 - y / (0.5 * options.height)) * options.scale_y;
+    }
+
+    function tr(r) {
+        var hr = 0.25 * (options.width + options.height)
+        var s = 0.5 * (options.scale_x + options.scale_y)
+        return Math.round(hr * r / s)
+    }
+
+    function color(idx) {
+        var c = options.palette[idx] ? options.palette[idx] : options.palette[0]
+        canvasContext.fillStyle = c
+        canvasContext.strokeStyle = c
+    }
+
+    // drawing
+
+    var prev_point = null;
+
+    this.setPoint = function(x, y, c) {
+        color(c)
+        if(prev_point) {
+            this.addLine(prev_point.x, prev_point.y, x, y, c)
+        }
+        prev_point = { x: x, y: y }
+    }
+
+
+    this.addString = function(x, y, s, c) {
+        color(c)
+        canvasContext.fillText(s, tx(x), ty(y))
+    }
+
+
+    this.addLine = function(x1, y1, x2, y2, c) {
+        color(c)
+        canvasContext.beginPath()
+        canvasContext.moveTo(tx(x1), ty(y1))
+        canvasContext.lineTo(tx(x2), ty(y2))
+        canvasContext.stroke()
+    }
+
+
+    this.addCircle = function(x, y, r, c) {
+        color(c)
+        canvasContext.beginPath()
+        canvasContext.arc(tx(x), tx(y), tr(r), 0, 2 * Math.PI)
+        canvasContext.stroke()
+    }
+
+
+    this.resetSize = function(scale_x, scale_y) {
+        clear()
+        options.scale_x = scale_x
+        options.scale_y = scale_y
+    }
+
+
+    this.reset = function() {
+        clear()
+        options.scale_x = defaults.scale_x
+        options.scale_y = defaults.scale_y
+    }
+
+
+
+    // mouse
+
+    var click_coordinates = {
+        x: 0,
+        y: 0
+    }
+    var waiting_for_click = null;
+
+    this.waitForClick = function(callback) {
+        if(options.context.display) {
+            if(window.quickAlgoInterface) {
+                window.quickAlgoInterface.displayError(options.context.strings.messages.clickCanvas);
+            } else {
+                $("#errors").html(options.context.strings.messages.clickCanvas);
+            }
+
+            options.context.runner.waitEvent(callback, canvas, 'click', function(e) {
+                var rect = canvas.getBoundingClientRect();
+                click_coordinates.x = itx(e.clientX - rect.left);
+                click_coordinates.y = ity(rect.top - e.clientY);
+            });
+        } else {
+            // Assume all clicks are in the center
+            click_coordinates.x = 0;
+            click_coordinates.y = 0;
+            options.context.runner.noDelay(callback);
+        }
+    }
+
+
+    this.getX = function() {
+        return click_coordinates.x
+    }
+
+
+    this.getY = function() {
+        return click_coordinates.y
+    }
+
+
+
+    // may be required in future
+
+    this.destroy = function() {
+        options.parent.removeChild(canvas)
+        canvasContext = null
+        canvas = null
+    }
+}
diff --git a/pemFioi/jwinf.css b/pemFioi/jwinf.css
index bcc58bb6e..9bd10e11e 100644
--- a/pemFioi/jwinf.css
+++ b/pemFioi/jwinf.css
@@ -2,13 +2,63 @@
 
 #tabsMenu .li {
     background: rgba(155, 177, 27, 0.47);
+    /*background: #f5fbe8;*/
 }
 
+#introGrid .playerControls span {
+background-color: #8ca405 !important;
+}
 
 #taskIntro {
     font-weight:normal;
+    color: #333 !important;
+}
+
+body {
+    color: #333 !important;
+    background: #f5fbe8;
 }
 
+
 img.beaver {
-    content:url("../img/jwinf-fox.jpg");
+  display:none;
+}
+
+#popupMessage .message::before {
+content: url("../../img/jwinf-fox.png"); " "
+}
+
+
+img.messageArrow { 
+  display:none;
+}
+
+* {
+  -moz-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+  user-select: auto;
 }
+
+
+code {
+  border: 1px solid black;
+  white-space: nowrap;
+  padding: 0px 2px;
+  margin: 0px 2px;
+}
+
+
+samp::before { 
+    content: "„";
+}
+
+samp::after { 
+    content: "“";
+}
+
+
+/*#tabsMenu {
+    margin-top: 0px;
+}*/
+
diff --git a/pemFioi/language-theory-1.0.js b/pemFioi/language-theory-1.0.js
new file mode 100644
index 000000000..c20dd9128
--- /dev/null
+++ b/pemFioi/language-theory-1.0.js
@@ -0,0 +1,369 @@
+function LanguageTheory(rng){
+   var self = this;
+   this.rng = rng;
+
+   this.setRNG = function(fct) {
+      this.rng = fct;
+   };
+
+   this.getWordList = function(minLength,maxLength) {
+      /* return an array of words from sentences_wordList.js */
+      var wordList = [];
+      var array = [];
+      var minLength = minLength || 0;
+      var maxLength = maxLength || Infinity;
+      for(var nounType of nounTypes){
+         if(nounType != "city"){
+            array = array.concat(nouns[nounType]["M"]).concat(nouns[nounType]["F"]);
+         }else{
+            array = array.concat(nouns[nounType]);
+         }
+      }
+      array = array.concat(adjectives["before"]).concat(adjectives["after"]);
+
+      for(var word of array){
+         if(word[0].length >= minLength && word[0].length <= maxLength && !word[0].includes(" ") && !word[0].includes("-")){
+            wordList.push(word[0]);
+         }
+      }
+
+      return wordList;
+   };
+   
+   this.getRandomWord = function(minLength,maxLength) {
+      var wordList = this.getWordList(minLength,maxLength);
+      var index = (this.rng.nextInt(0,10000) + Math.floor(Math.random()*10000))%(wordList.length-1);
+      var word = this.formatWord(wordList[index]);
+      return word;
+   };
+
+   this.formatWord = function(word) {
+      word = word.toLowerCase().trim();
+      word = word.replace(/[èéêë]/g,"e");
+      word = word.replace(/[ôö]/g,"o");
+      word = word.replace(/[âà]/g,"a");
+      word = word.replace(/[îï]/g,"i");
+      word = word.replace(/[û]/g,"u");
+      word = word.toUpperCase();
+      return word;
+   };
+
+   this.getWords = function(minLength,maxLength,nbWords) {
+      var wordList = this.getWordList(minLength,maxLength);
+      // this.rng.shuffle(wordList);
+      Beav.Array.shuffle(wordList,this.rng.nextInt(0,10000) + Math.floor(Math.random()*10000));
+      var words = [];
+      for(var iWord = 0; iWord < nbWords; iWord++){
+         words.push(this.formatWord(wordList[iWord]));
+      }
+      return words;
+   };
+
+   this.getRole = function(word,role) {
+      switch(role) {
+         case "prefix":
+            return word.slice(0,this.rng.nextInt(2,word.length - 1));
+         case "suffix":
+            return word.slice(-this.rng.nextInt(2,word.length - 1));
+         case "factor":
+            return this.getFactor(word);
+         case "subsequence":
+            return this.getSubsequence(word);
+         case "none":
+         default:
+            do{ 
+               var shuffledWord = Array.prototype.slice.call(word);
+               this.rng.shuffle(shuffledWord);
+               var stringArray = shuffledWord.slice(0,this.rng.nextInt(2,word.length - 1));
+               var string = stringArray.toString();
+               string = string.replace(/,/gi,"");
+            }while(this.isSubsequence("subsequence",string,word));
+            return string;
+      }
+   };
+
+   this.getFactor = function(word) {
+      /* return a random factor of word */
+      var startIndex = this.rng.nextInt(1,word.length - 3);
+      var endIndex = this.rng.nextInt(startIndex + 2, word.length - 1);
+      return word.slice(startIndex,endIndex);
+   };
+
+   this.getSubsequence = function(word) {
+      /* return a random subsequence of word */
+      do{
+         var startIndex = this.rng.nextInt(0,word.length - 3);
+         var endIndex = this.rng.nextInt(startIndex + 1,word.length);
+         var string = word.charAt(startIndex);
+         for(var iLetter = startIndex + 1 ; iLetter < endIndex; iLetter++){
+            if(this.rng.nextBit()){
+               string += word.charAt(iLetter);
+            }
+         }
+         string += word.charAt(endIndex);
+      }while(this.isSubsequence("factor",string,word));
+      return string;
+   };
+
+   this.isSubsequence = function(type,string,word) {
+      switch(type){
+         case "prefix":
+            var regex = new RegExp('^'+string);
+            break;
+         case "suffix":
+            var regex = new RegExp(string+'$');
+            break;
+         case "factor":
+            var regex = new RegExp('.*'+string+'.*');
+            break;
+         case "subsequence":
+            var regexStr = "";
+            for(var iLetter = 0; iLetter < string.length; iLetter++){
+               regexStr += ".*"+string.charAt(iLetter);
+            }
+            regexStr += ".*";
+            var regex = new RegExp(regexStr);
+      }
+      
+      if(regex.test(word)){
+         return true;
+      }else{
+         return false;
+      }
+   };
+
+   this.isPrimitive = function(string) {
+      for(var iLetter = 1; iLetter <= string.length/2; iLetter++){
+         var substr = string.substring(0,iLetter);
+         var regex = new RegExp('^('+substr+'){2,}$');
+         if(regex.test(string)){
+            return false;
+         }
+      }
+      return true;
+   };
+
+   this.getLengthOfLongestSubsequence = function(word,type,whichIs) {
+      switch(whichIs){
+         case "primitive":
+            var whichIsFct = this.isPrimitive;
+            break;
+         case "palindrome":
+            var whichIsFct = this.isPalindrome;
+            break;
+         default:
+            var whichIsFct = function(str){return true};
+      }
+      switch(type){
+         case "prefix":
+            for(var endIndex = word.length - 1; endIndex > 0; endIndex--){
+               var substr = word.substring(0,endIndex);
+               if(whichIsFct(substr)){
+                  return substr.length;
+               }
+            }
+         case "suffix":
+            for(var startIndex = 1; startIndex < word.length; startIndex++){
+               var substr = word.substring(startIndex,word.length);
+               if(whichIsFct(substr)){
+                  return substr.length;
+               }
+            }
+         case "factor":
+            var length = 0;
+            for(var startIndex = 1; startIndex < word.length - 1; startIndex++){
+               for(var endIndex = word.length - 1; endIndex > 1; endIndex--){
+                  var substr = word.substring(startIndex,endIndex);
+                  if(whichIsFct(substr) && !this.isSubsequence("prefix",substr,word) && !this.isSubsequence("suffix",substr,word) && substr.length > length){
+                     length = substr.length;
+                  }
+               }
+            }
+            return length;
+         case "subsequence":
+            var length = 0;
+            for(var iLetter = 0; iLetter < word.length; iLetter++){
+               var substr = word.substr(0,iLetter)+word.substring(iLetter+1);
+               if(whichIsFct(substr) && !this.isSubsequence("factor",substr,word) && substr.length > length){
+                  // console.log(substr);
+                  length = substr.length;
+               }else if(substr.length > 1){
+                  length = Math.max(this.getLengthOfLongestSubsequence(substr,"subsequence",whichIs),length);
+               }
+            }
+            return length;
+      }
+   };
+
+   this.isConjugate = function(word1,word2) {
+      // console.log(word1+" "+word2);
+      if(word1.length != word2.length){
+         return false;
+      }else{
+         for(var iLetter = 1; iLetter < word1.length; iLetter++){
+            var prefix1 = word1.substring(0,iLetter);
+            var suffix1 = word1.substring(iLetter);
+            var prefix2 = word2.slice(0,-iLetter);
+            var suffix2 = word2.slice(-iLetter);
+            // console.log(prefix1+" "+suffix1+" "+prefix2+" "+suffix2);
+            if(prefix1 == suffix2 && prefix2 == suffix1){
+               return true;
+            }
+         }
+         return false;
+      }
+   };
+
+   this.isMirror = function(word1,word2) {
+      if(word1.length != word2.length){
+         return false;
+      }else{
+         for(var iLetter = 0; iLetter < word1.length; iLetter++){
+            if(word1.charAt(iLetter) != word2.charAt(word2.length - 1 - iLetter)){
+               return false;
+            }
+         }
+         return true;
+      }
+   };
+
+   this.isPalindrome = function(word) {
+      return self.isMirror(word,word);
+   };
+
+   this.getMirror = function(string) {
+      var mirror = "";
+      for(var iLetter = 1; iLetter <= string.length; iLetter++){
+         mirror += string.charAt(string.length - iLetter);
+      }
+      return mirror;
+   };
+
+   this.validation = function(data) {
+      var error = null;
+      var answer = data.answer;
+      var word = data.word;
+      var words = data.words;
+      switch(data.mode){
+         case 1:  // find_factor
+            var length = data.factorLength;
+            for(var type in answer){
+               if(type != "seed"){
+                  if(answer[type].length == 0){
+                     return "The "+taskStrings[type]+" input is empty";
+                  }else if(answer[type].length < length){
+                     return "The "+taskStrings[type]+" input is shorter than "+length;
+                  }else if(answer[type].length > length){
+                     return "The "+taskStrings[type]+" input is longer than "+length;
+                  }
+                  if(!this.isSubsequence(type,answer[type],word)){
+                     return answer[type]+" is not a "+type+" of "+word;
+                  }
+                  if(type == "factor" || type == "subsequence"){
+                     if(this.isSubsequence("prefix",answer[type],word)){
+                        return "Please enter a "+type+" which is not a prefix";
+                     }else if(this.isSubsequence("suffix",answer[type],word)){
+                        return "Please enter a "+type+" which is not a suffix";
+                     }
+                  }
+                  if(type == "subsequence" && this.isSubsequence("factor",answer[type],word)){
+                     return "Please enter a "+type+" which is not a factor";
+                  }
+               }
+            }
+            break;
+         case 2: // longest primitive
+         case 9: // longest palindrome
+            if(data.mode == 2){
+               var whichIs = "primitive";
+               var whichIsAdj = whichIs;
+               var whichIsFct = this.isPrimitive;
+            }else{
+               var whichIs = "palindrome";
+               var whichIsAdj = "palindromic";
+               var whichIsFct = this.isPalindrome;
+            }
+            for(var type in answer){
+               if(type != "seed"){
+                  var length = this.getLengthOfLongestSubsequence(word,type,whichIs);
+                  if(answer[type].length == 0){
+                     return "The "+taskStrings[type]+" input is empty";
+                  }
+                  if(!whichIsFct(answer[type])){
+                     return "The "+taskStrings[type]+" input is not "+whichIsAdj;
+                  }
+                  if(!this.isSubsequence(type,answer[type],word)){
+                     return answer[type]+" is not a "+type+" of "+word;
+                  }
+                  if(type == "factor" || type == "subsequence"){
+                     if(this.isSubsequence("prefix",answer[type],word)){
+                        return "Please enter a "+type+" which is not a prefix";
+                     }else if(this.isSubsequence("suffix",answer[type],word)){
+                        return "Please enter a "+type+" which is not a suffix";
+                     }
+                  }
+                  if(type == "subsequence" && this.isSubsequence("factor",answer[type],word)){
+                     return "Please enter a "+type+" which is not a factor";
+                  }
+                  if(answer[type].length < length){
+                     return answer[type]+" is not the longest possible "+whichIsAdj+" "+type+" for the word "+word;
+                  }
+               }
+            }
+            break;
+         case 3: // conjugate
+            for(var iPair = 0; iPair < answer.pairs.length; iPair++){
+               for(var iWord = 0; iWord < 2; iWord++){
+                  if(answer.pairs[iPair][iWord] == null){
+                     return "One of the pairs is not complete";
+                  }
+               }
+            }
+            for(var iPair = 0; iPair < answer.pairs.length; iPair++){
+               if(!this.isConjugate(words[answer.pairs[iPair][0]],words[answer.pairs[iPair][1]])){
+                  return "Error in pair "+iPair;
+               }
+            }
+            break;
+         case 4: // mirrors
+            for(var iWord = 0; iWord < words.length; iWord++){
+               if(!answer.mirrors[iWord]){
+                  return "Entry "+(iWord+1)+" is empty";
+               }
+            }
+            for(var iWord = 0; iWord < words.length; iWord++){
+               if(!this.isMirror(answer.mirrors[iWord],words[iWord])){
+                  return "Error at line "+(iWord+1);
+               }
+            }
+            break;
+         case 5: // mirror factor
+         case 6: // mirror prefix
+         case 7: // mirror suffix
+         case 8: // mirror subsequence
+            var type = (data.mode == 8) ? "subsequence" : "factor"; 
+            var mirrorTypes = {5:"factor",6:"prefix",7:"suffix",8:"subsequence"};
+            var mirrorType = mirrorTypes[data.mode];
+            var length = data.length;
+            for(var iWord = 0; iWord < words.length; iWord++){
+               if(!answer.factors[iWord]){
+                  return "Entry "+(iWord+1)+" is empty";
+               }
+            }
+            for(var iWord = 0; iWord < words.length; iWord++){
+               if(answer.factors[iWord].length < length){
+                  return answer.factors[iWord]+" is shorter than "+length;
+               }
+               if(!this.isSubsequence(type,answer.factors[iWord],words[iWord])){
+                  return answer.factors[iWord]+" is not a "+type+" of "+words[iWord];
+               }
+               if(!this.isSubsequence(mirrorType,this.getMirror(answer.factors[iWord]),words[iWord])){
+                  return "The mirror of "+answer.factors[iWord]+" is not a "+mirrorType+" of "+words[iWord];
+               }
+            }
+            break;
+      }
+      
+   };
+
+};
diff --git a/pemFioi/map/blockly_map.js b/pemFioi/map/blockly_map.js
new file mode 100644
index 000000000..df1f6a8fa
--- /dev/null
+++ b/pemFioi/map/blockly_map.js
@@ -0,0 +1,194 @@
+var getContext = function(display, infos) {
+
+    var map_strings = {
+        en: {
+            categories: {
+                map: 'Carte'
+            },
+            label: {
+                clearMap: 'clearMap()',
+                addLocation: 'addLocation(%1, %2, %3)',
+                addRoad: 'addRoad(%1, %2, %3, %4, %5)',
+                geoDistance: 'geoDistance(%1, %2, %3, %4)',
+                getLatitude: 'getLatitude(%1)',
+                getLongitude: 'getLongitude(%1)',
+                getNeighbors: 'getNeighbors(%1)',
+                shortestPath: 'shortestPath(%1, %2)',
+                echo: 'afficher(%1)'
+            },
+            code: {
+                clearMap: 'clearMap',
+                addLocation: 'addLocation',
+                addRoad: 'addRoad',
+                geoDistance: 'geoDistance',
+                getLatitude: 'getLatitude',
+                getLongitude: 'getLongitude',
+                getNeighbors: 'getNeighbors',
+                shortestPath: 'shortestPath',
+                echo: 'afficher'
+            },
+            description: {
+                clearMap: 'Delete everything from the map (roads and locations)',
+                addLocation: 'Draw a pin with a 1 or 2 letter label at the given coordinates',
+                addRoad: 'Draw a road (a straight line) between the two locations, with given opacity (between 0 and 1)',
+                geoDistance: 'returns the geo distance between the two locations, in km.',
+                getLatitude: 'Returns the latitude of the city',
+                getLongitude: 'Returns the longitude of the city',
+                getNeighbors: 'Returns the list of neighbors of the city',
+                shortestPath: 'Returns the shortest path between the two cities, using geoDistance',
+                echo: 'Afficher'
+            },
+            startingBlockName: "Program",
+            constantLabel: {
+            },
+            messages: {
+            }
+        }
+    }
+
+
+
+
+
+    var context = quickAlgoContext(display, infos)
+    var strings = context.setLocalLanguageStrings(map_strings)
+    var map;
+    var logger;
+
+    var conceptBaseUrl = (window.location.protocol == 'https' ? 'https' : 'http') + '//'
+        + 'static4.castor-informatique.fr/help/map.html';
+    context.conceptList = [
+        {id: 'map_introduction', name: 'La proglet googleMaps', url: conceptBaseUrl+'#map_introduction'},
+        {id: 'map_clearMap', name: 'Effacer la carte', url: conceptBaseUrl+'#map_mapDisplay'},
+        {id: 'map_addLocation', name: 'Mettre en évidence un point de la carte', url: conceptBaseUrl+'#map_mapDisplay'},
+        {id: 'map_addRoad', name: 'Tracer une ligne droite', url: conceptBaseUrl+'#map_mapDisplay'},
+        {id: 'map_getLatitude', name: 'Table des latitudes', url: conceptBaseUrl+'#map_geoData'},
+        {id: 'map_getLongitude', name: 'Table des longitudes', url: conceptBaseUrl+'#map_geoData'},
+        {id: 'map_getNeighbors', name: 'Table des voisins', url: conceptBaseUrl+'#map_geoData'},
+        {id: 'map_geoDistance', name: 'Distance entre deux points', url: conceptBaseUrl+'#map_geoComputing'},
+        {id: 'map_shortestPath', name: 'Chemin entre deux villes', url: conceptBaseUrl+'#map_geoComputing'}
+        ];
+
+
+    context.reset = function(taskInfos) {
+        if(!context.display) return
+        if(!map) {
+            var options = $.extend({ parent: $('#grid')[0] }, infos.mapConfig);
+            map = new Map(options);
+            logger = new Logger({
+                parent: $('#gridContainer')
+            });
+        }
+        map.clearMap();
+    }
+
+
+    context.setScale = function(scale) {}
+    context.updateScale = function() {}
+    context.resetDisplay = function() {}
+    context.unload = function() {}
+    context.onExecutionEnd = function() {}
+
+
+
+    var typeData = {
+        'Number': { bType: 'input_value', vType: 'math_number', fName: 'NUM', defVal: 0 },
+        'String': { bType: 'input_value', vType: 'text', fName: 'TEXT', defVal: '' },
+    }
+
+    context.customBlocks = {
+        map: {
+            map: [
+                { name: 'clearMap' },
+                { name: 'addLocation',
+                    params: ['Number', 'Number', 'String'],
+                    params_names: ['longitude', 'latitude', 'label']
+                },
+                { name: 'addRoad',
+                    params: ['Number', 'Number', 'Number', 'Number', 'Number'],
+                    params_names: ['longitude1', 'latitude1', 'longitude2', 'latitude2', 'opacity']
+                },
+                { name: 'geoDistance',
+                    yieldsValue: true,
+                    params: ['Number', 'Number', 'Number', 'Number'],
+                    params_names: ['longitude1', 'latitude1', 'longitude2', 'latitude2']
+                },
+                { name: 'getLatitude',
+                    yieldsValue: true,
+                    params: ['String'],
+                    params_names: ['cityName']
+                },
+                { name: 'getLongitude',
+                  yieldsValue: true,
+                    params: ['String'],
+                    params_names: ['cityName']
+                },
+                { name: 'getNeighbors',
+                    yieldsValue: true,
+                    params: ['String'],
+                    params_names: ['cityName']
+                },
+                { name: 'shortestPath',
+                    yieldsValue: true,
+                    params: ['String', 'String'],
+                    params_names: ['cityName1', 'cityName2']
+                },
+                { name: 'echo',
+                    params: ['String'],
+                    params_names: ['value']
+                }
+            ]
+        }
+    }
+
+
+    context.map = {
+        echo: function(msg, callback) {
+            logger.put(msg);
+            callback();
+        }
+    }
+
+
+    for (var category in context.customBlocks.map) {
+        for (var iBlock = 0; iBlock < context.customBlocks.map[category].length; iBlock++) {
+            (function() {
+                var block = context.customBlocks.map[category][iBlock];
+                if (block.params) {
+                    block.blocklyJson = { inputsInline: true, args0: {} }
+                    var blockArgs = block.blocklyJson.args0;
+                    block.blocklyXml = '';
+                    for (var iParam = 0; iParam < block.params.length; iParam++) {
+                        var paramData = typeData[block.params[iParam]] || { bType: 'input_value' };
+                        blockArgs[iParam] = { type: paramData.bType, name: "PARAM_" + iParam }
+                        block.blocklyXml +=
+                            '' +
+                            '' + paramData.defVal + '' +
+                            '';
+                    }
+                    block.blocklyXml += '';
+                }
+                if(context.map[block.name]) {
+                    return;
+                }
+                context.map[block.name] = function() {
+                    var callback = arguments[arguments.length - 1];
+                    if(map) {
+                        context.waitDelay(callback, map[block.name].apply(map, arguments))
+                    } else {
+                        callback();
+                    }
+                }
+           })();
+        }
+    }
+
+    return context;
+}
+
+if(window.quickAlgoLibraries) {
+    quickAlgoLibraries.register('map', getContext);
+ } else {
+    if(!window.quickAlgoLibrariesList) { window.quickAlgoLibrariesList = []; }
+    window.quickAlgoLibrariesList.push(['map', getContext]);
+ }
diff --git a/pemFioi/map/map.js b/pemFioi/map/map.js
new file mode 100644
index 000000000..61613bb85
--- /dev/null
+++ b/pemFioi/map/map.js
@@ -0,0 +1,549 @@
+if(typeof(Number.prototype.toRad) === "undefined") {
+    Number.prototype.toRad = function() {
+        return this * Math.PI / 180;
+    }
+}
+
+function Map(options) {
+
+
+    var defaults = {
+        parent: document.body,
+        width: 400,
+        height: 400,
+        map_lng_left: 0,
+        map_lng_right: 0,
+        map_lat_top: 0,
+        map_lat_bottom: 0,
+        unit: 'km',
+
+        // map2d options
+        line_color: {r: 64, g: 64, b: 64},
+        line_width: 4,
+        background_color: {r: 255, g: 255, b: 255},
+        text_color: {r: 255, g: 255, b: 255},
+        pin_file: null,
+        pin_scale: 0.385,
+        map_file: null
+    }
+
+    options = Object.assign({}, defaults, options);
+
+
+/*
+    var options = (function() {
+        var res = {}
+        for(var k in defaults) {
+            res[k] = k in options ? options[k] : defaults[k]
+        }
+        return res
+    })()
+*/
+
+
+    // map renderer
+
+    function Renderer2D() {
+
+
+        function ImageLoader(src, onLoad) {
+            var loaded = false;
+            var img = new Image();
+            img.src = src;
+            img.onload = function() {
+                loaded = true;
+                onLoad && onLoad();
+            }
+            img.onerror = function() {
+                console.error('Error loading image: ' + src);
+            }
+            this.get = function() {
+                return loaded ? img : null;
+            }
+        }
+
+
+        function CoordinatesConverter() {
+            var map_lat_bottomRad = options.map_lat_bottom.toRad()
+            var mapLngDelta = (options.map_lng_right - options.map_lng_left)
+            var worldMapWidth = ((options.width / mapLngDelta) * 360) / (2 * Math.PI)
+            var mapOffsetY = (worldMapWidth / 2 * Math.log((1 + Math.sin(map_lat_bottomRad)) / (1 - Math.sin(map_lat_bottomRad))))
+
+            this.x = function(lng) {
+                return (lng - options.map_lng_left) * (options.width / mapLngDelta);
+            }
+
+            this.y = function(lat) {
+                var latitudeRad = lat.toRad()
+                return options.height - ((worldMapWidth / 2 * Math.log((1 + Math.sin(latitudeRad)) / (1 - Math.sin(latitudeRad)))) - mapOffsetY)
+            }
+        }
+
+
+        function rgba(colors, opacity) {
+            return 'rgba(' + colors.r + ',' + colors.g + ',' + colors.b + ',' + opacity + ')';
+        }
+
+
+        this.clear = function() {
+            var img = images.map.get();
+            if(img) {
+                context.drawImage(img, 0, 0, options.width, options.height)
+            } else {
+                context.fillStyle = rgba(options.background_color, 1);
+                context.fillRect(0, 0, options.width, options.height)
+            }
+        }
+
+
+        this.line = function(lng1, lat1, lng2, lat2, opacity) {
+            context.lineWidth = options.line_width;
+            context.strokeStyle = rgba(options.line_color, opacity);
+            context.beginPath();
+            context.moveTo(coordinates.x(lng1), coordinates.y(lat1));
+            context.lineTo(coordinates.x(lng2), coordinates.y(lat2));
+            context.stroke();
+        }
+
+
+        this.pin = function(lng, lat, label) {
+            label = label.substr(0, 2);
+            var x = coordinates.x(lng);
+            var y = coordinates.y(lat);
+
+            var img = images.pin.get();
+            var w = options.pin_scale * img.width;
+            var h = options.pin_scale * img.height;
+            if(img) {
+                context.drawImage(img, x - w * 0.5, y - h, w, h);
+            }
+            context.fillStyle = rgba(options.text_color, 1);
+            context.textAlign = 'center';
+            context.fillText(label, x, y - h * 0.6)
+        }
+
+
+        // init
+        var images = {
+            map: new ImageLoader(options.map_file, this.clear.bind(this)),
+            pin: new ImageLoader(options.pin_file)
+        }
+        var canvas = document.createElement('canvas');
+        canvas.width = options.width;
+        canvas.height = options.height;
+        options.parent.appendChild(canvas);
+        var context = canvas.getContext('2d');
+        var coordinates = new CoordinatesConverter();
+    }
+
+
+
+    function Renderer3D() {
+        var earth = new Earth3D(options);
+
+
+        this.clear = function() {
+            earth.clearPaths();	
+            earth.clearLabels();	
+        }
+
+        this.line = function(lng1, lat1, lng2, lat2, opacity) {
+            var p1 = {
+                lat: lat1,
+                lng: lng1
+            }
+            var p2 = {
+                lat: lat2,
+                lng: lng2
+            }            
+            earth.addPath(p1, p2);
+        }
+
+        this.pin = function(lng, lat, label) {
+            var p = {
+                lat: lat,
+                lng: lng,
+                text: label
+            }
+            earth.addLabel(p);
+        }
+    }
+
+
+
+    // distance calculator
+    function GeoDistance(unit) {
+
+        function getEarthRadius() {
+            var earthRadius = {
+                'yards': 6967410,
+                'km': 6371,
+                'miles': 3959,
+                'metres': 6371000,
+                'feet': 20902231
+            };
+            return earthRadius[unit] || earthRadius['km'];
+        }
+
+        var r = getEarthRadius(unit)
+
+        function deg2rad(deg) {
+            return deg * (Math.PI / 180)
+        }
+
+        // haversine formula
+        this.getDistance = function(lng1, lat1, lng2, lat2) {
+            var dLat = deg2rad(lat2 - lat1);
+            var dLon = deg2rad(lng2 - lng1);
+            var a =
+                Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+                Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
+                Math.sin(dLon / 2) * Math.sin(dLon / 2);
+            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+            return r * c;
+        }
+    }
+
+
+
+
+    // graph for pathfinding
+    // https://github.com/mburst/dijkstras-algorithm/blob/master/dijkstras.js
+
+    function PriorityQueue () {
+        this._nodes = [];
+
+        this.enqueue = function (priority, key) {
+            this._nodes.push({key: key, priority: priority });
+            this.sort();
+        };
+
+        this.dequeue = function () {
+            return this._nodes.shift().key;
+        };
+
+        this.sort = function () {
+            this._nodes.sort(function (a, b) {
+            return a.priority - b.priority;
+            });
+        };
+
+        this.isEmpty = function () {
+            return !this._nodes.length;
+        };
+    }
+
+    /**
+     * Pathfinding starts here
+     */
+    function Graph() {
+        var INFINITY = 1/0;
+        this.vertices = {};
+
+        this.addVertex = function(name, edges){
+            this.vertices[name] = edges;
+        };
+
+        this.shortestPath = function (start, finish) {
+            var nodes = new PriorityQueue(),
+                distances = {},
+                previous = {},
+                path = [],
+                smallest, vertex, neighbor, alt;
+
+            for(vertex in this.vertices) {
+                if(vertex === start) {
+                    distances[vertex] = 0;
+                    nodes.enqueue(0, vertex);
+                } else {
+                    distances[vertex] = INFINITY;
+                    nodes.enqueue(INFINITY, vertex);
+                }
+                previous[vertex] = null;
+            }
+
+            while(!nodes.isEmpty()) {
+                smallest = nodes.dequeue();
+                if(smallest === finish) {
+                    path = [];
+                    while(previous[smallest]) {
+                        path.push(smallest);
+                        smallest = previous[smallest];
+                    }
+                    break;
+                }
+                if(!smallest || distances[smallest] === INFINITY){
+                    continue;
+                }
+                for(neighbor in this.vertices[smallest]) {
+                    alt = distances[smallest] + this.vertices[smallest][neighbor];
+                    if(alt < distances[neighbor]) {
+                        distances[neighbor] = alt;
+                        previous[neighbor] = smallest;
+                        nodes.enqueue(alt, neighbor);
+                    }
+                }
+            }
+
+            return path;
+        };
+    }
+
+
+
+    // data search
+
+    this.findCity = function(name) {
+        for(var i=0,city; city=this.cities[i]; i++) {
+            if(city.name == name) return city;
+        }
+        throw new Error('City not found');
+    }
+
+    this.findNeighbors = function(name) {
+        for(var i=0,row,res=[]; row=this.neighbors[i]; i++) {
+            if(row[0] == name) res.push(this.findCity(row[1]));
+            if(row[1] == name) res.push(this.findCity(row[0]));
+        }
+        return res;
+    }
+
+
+
+    // validation
+
+    function validateLng(lng) {
+        if(isNaN(lng)) {
+            throw new Error('Longitude is not a number')
+        }
+        if(lng < options.map_lng_left || lng > options.map_lng_right) {
+            throw new Error('Longitude is outside of the map')
+        }
+    }
+
+    function validateLat(lat) {
+        if(isNaN(lat)) {
+            throw new Error('Latitude is not a number')
+        }
+        if(lat > options.map_lat_top || lat < options.map_lat_bottom) {
+            throw new Error('Latitude is outside of the map')
+        }
+    }        
+
+
+    // interface
+
+    this.clearMap = function() {
+        renderer.clear();
+    }
+
+
+    this.addLocation = function(longitude, latitude, label) {
+        validateLng(longitude);
+        validateLat(latitude);
+        renderer.pin(longitude, latitude, label);
+    }
+
+
+    this.addRoad = function(longitude1, latitude1, longitude2, latitude2, opacity) {
+        validateLng(longitude1);
+        validateLat(latitude1);
+        validateLng(longitude2);
+        validateLat(latitude2);
+        opacity = opacity || 1;
+        renderer.line(longitude1, latitude1, longitude2, latitude2, opacity);
+    }
+
+
+    this.geoDistance = function(longitude1, latitude1, longitude2, latitude2) {
+        validateLng(longitude1);
+        validateLat(latitude1);
+        validateLng(longitude2);
+        validateLat(latitude2);
+        return geo.getDistance(longitude1, latitude1, longitude2, latitude2);
+    }
+
+
+    this.getLatitude = function(cityName) {
+        return this.findCity(cityName).lat;
+    }
+
+
+    this.getLongitude = function(cityName) {
+        return this.findCity(cityName).lng;
+    }
+
+
+    this.getNeighbors = function(cityName) {
+        return this.findNeighbors(cityName);
+    }
+
+
+    this.shortestPath = function(cityName1, cityName2) {
+        return graph.shortestPath(cityName1, cityName2).concat(cityName1).reverse();
+    }
+
+
+
+
+
+    // init
+
+    if(options.map3d) {
+        var renderer = new Renderer3D();
+    } else {
+        var renderer = new Renderer2D();
+    }
+    
+
+
+    var geo = new GeoDistance(options.unit);
+    var graph = new Graph();
+
+    for(var i=0,city1; city1=this.cities[i]; i++) {
+        var neighbors = this.findNeighbors(city1.name);
+        if(!neighbors.length) {
+            console.error(city1.name + ' has no neighbors')
+        }
+        var edges = {};
+        for(var j=0,city2; city2=neighbors[j]; j++) {
+            edges[city2.name] = geo.getDistance(city1.lng, city1.lat, city2.lng, city2.lat);
+        }
+        graph.addVertex(city1.name, edges);
+    }
+
+}
+
+
+// data
+
+Map.prototype.cities = [
+    { name: "Dunkerque", lat: 51.069360, lng: 2.376571 },
+    { name: "Calais", lat: 50.979622, lng: 1.855583 },
+    { name: "Lille", lat: 50.650582, lng: 3.056121 },
+    { name: "Béthune", lat: 50.545887, lng: 2.648391 },
+    { name: "Lens", lat: 50.381367, lng: 3.056121 },
+    { name: "Valenciennes", lat: 50.366410, lng: 3.531806 },
+    { name: "Amiens", lat: 49.887806, lng: 2.308616 },
+    { name: "Le Havre", lat: 49.483984, lng: 0.134056 },
+    { name: "Rouen", lat: 49.439114, lng: 1.108078 },
+    { name: "Reims", lat: 49.259638, lng: 4.007492 },
+    { name: "Thionville", lat: 49.364333, lng: 6.182052 },
+    { name: "Metz", lat: 49.110074, lng: 6.182052 },
+    { name: "Strasbourg", lat: 48.586601, lng: 7.745017 },
+    { name: "Nancy", lat: 48.691295, lng: 6.204704 },
+    { name: "Paris", lat: 48.855815, lng: 2.353920 },
+    { name: "Caen", lat: 49.169900, lng: -0.386932 },
+    { name: "Troyes", lat: 48.287473, lng: 4.052795 },
+    { name: "Brest", lat: 48.392168, lng: -4.486885 },
+    { name: "Lorient", lat: 47.749043, lng: -3.376953 },
+    { name: "Rennes", lat: 48.107996, lng: -1.678077 },
+    { name: "Le Mans", lat: 48.003301, lng: 0.202011 },
+    { name: "Orléans", lat: 47.913563, lng: 1.900886 },
+    { name: "Tours", lat: 47.405046, lng: 0.700347 },
+    { name: "Angers", lat: 47.479828, lng: -0.568145 },
+    { name: "Nantes", lat: 47.240526, lng: -1.564819 },
+    { name: "Saint-Nazaire", lat: 47.285395, lng: -2.199066 },
+    { name: "Dijon", lat: 47.330264, lng: 5.049469 },
+    { name: "Mulhouse", lat: 47.763999, lng: 7.337287 },
+    { name: "Montbéliard", lat: 47.509741, lng: 6.793647 },
+    { name: "Besançon", lat: 47.270439, lng: 6.023490 },
+    { name: "Annemasse", lat: 46.268361, lng: 6.227355 },
+    { name: "Annecy", lat: 45.969233, lng: 6.159400 },
+    { name: "Chambéry", lat: 45.670105, lng: 5.932884 },
+    { name: "Grenoble", lat: 45.296196, lng: 5.706367 },
+    { name: "Lyon", lat: 45.834626, lng: 4.800300 },
+    { name: "Saint-Etienne", lat: 45.550454, lng: 4.369918 },
+    { name: "Valence", lat: 45.071850, lng: 4.890907 },
+    { name: "Nice", lat: 43.950121, lng: 7.269332 },
+    { name: "Toulon", lat: 43.426648, lng: 5.932884 },
+    { name: "Marseille", lat: 43.591168, lng: 5.343940 },
+    { name: "Avigon", lat: 44.174467, lng: 4.822952 },
+    { name: "Nîmes", lat: 44.084729, lng: 4.347267 },
+    { name: "Montpellier", lat: 43.860383, lng: 3.871582 },
+    { name: "Perpignan", lat: 43.037782, lng: 2.874908 },
+    { name: "Toulouse", lat: 43.860383, lng: 1.425201 },
+    { name: "Pau", lat: 43.591168, lng: -0.364280 },
+    { name: "Bayonne", lat: 43.755688, lng: -1.496864 },
+// real lat:
+//    { name: "Bayonne", lat: 43.499387, lng: -1.496864 },
+    { name: "Bordeaux", lat: 44.997068, lng: -0.593449 },
+    { name: "Clermont-Ferrand", lat: 45.879495, lng: 3.078773 },
+    { name: "Limoges", lat: 45.909408, lng: 1.243988 },
+    { name: "Angoulême", lat: 45.744887, lng: 0.156707 },
+    { name: "La Rochelle", lat: 46.238448, lng: -1.157089 },
+    { name: "Poitiers", lat: 46.627314, lng: 0.315269 }
+];
+
+
+Map.prototype.neighbors = [
+    ["Brest", "Lorient"],
+    ["Brest", "Rennes"],
+    ["Lorient", "Rennes"],
+    ["Rennes", "Nantes"],
+    ["Nantes", "Saint-Nazaire"],
+    ["Rennes", "Le Mans"],
+    ["Le Mans", "Paris"],
+    ["Paris", "Orléans"],
+    ["Le Mans", "Tours"],
+    ["Orléans", "Limoges"],
+    ["Le Mans", "Angers"],
+    ["Nantes", "La Rochelle"],
+    ["La Rochelle", "Angoulême"],
+    ["Nantes", "Angoulême"],
+    ["Angers", "Nantes"],
+    ["Poitiers", "Angoulême"],
+    ["Tours", "Poitiers"],
+    ["Angoulême", "Bordeaux"],
+    ["Bordeaux", "Bayonne"],
+    ["Bayonne", "Pau"],
+    ["Pau", "Toulouse"],
+    ["Bordeaux", "Toulouse"],
+    ["Toulouse", "Perpignan"],
+    ["Toulouse", "Montpellier"],
+    ["Montpellier", "Nîmes"],
+    ["Nîmes", "Avigon"],
+    ["Avigon", "Marseille"],
+    ["Marseille", "Toulon"],
+    ["Toulon", "Nice"],
+    ["Avigon", "Valence"],
+    ["Valence", "Grenoble"],
+    ["Grenoble", "Chambéry"],
+    ["Chambéry", "Annecy"],
+    ["Annecy", "Annemasse"],
+    ["Valence", "Saint-Etienne"],
+    ["Lyon", "Saint-Etienne"],
+    ["Lyon", "Grenoble"],
+    ["Clermont-Ferrand", "Saint-Etienne"],
+    ["Clermont-Ferrand", "Limoges"],
+    ["Limoges", "Angoulême"],
+    ["Paris", "Troyes"],
+    ["Troyes", "Dijon"],
+    ["Dijon", "Besançon"],
+    ["Dijon", "Lyon"],
+    ["Besançon", "Montbéliard"],
+    ["Montbéliard", "Mulhouse"],
+    ["Mulhouse", "Strasbourg"],
+    ["Strasbourg", "Nancy"],
+    ["Nancy", "Paris"],
+    ["Troyes", "Nancy"],
+    ["Nancy", "Metz"],
+    ["Metz", "Thionville"],
+    ["Metz", "Reims"],
+    ["Reims", "Paris"],
+    ["Paris", "Rouen"],
+    ["Rouen", "Le Havre"],
+    ["Caen", "Rennes"],
+    ["Rouen", "Caen"],
+    ["Calais", "Dunkerque"],
+    ["Dunkerque", "Béthune"],
+    ["Lille", "Béthune"],
+    ["Béthune", "Lens"],
+    ["Lens", "Valenciennes"],
+    ["Lens", "Lille"],
+    ["Lens", "Paris"],
+    ["Amiens", "Paris"],
+    ["Amiens", "Lens"],
+    ["Reims", "Lens"],
+    ["Lens", "Lille"]
+];
\ No newline at end of file
diff --git a/pemFioi/map_v2/blockly_map.js b/pemFioi/map_v2/blockly_map.js
new file mode 100644
index 000000000..452c796d6
--- /dev/null
+++ b/pemFioi/map_v2/blockly_map.js
@@ -0,0 +1,230 @@
+var getContext = function(display, infos) {
+
+    var map_strings = {
+        en: {
+            categories: {
+                map: 'Map'
+            },
+            label: {
+                addCity: 'addCity(%1, %2, %3)',
+                getNbCities: 'getNbCities()',
+                addRoad: 'addRoad(%1, %2)',
+                getNbRoads: 'getNbRoads(%1)',
+                getCityRoads: 'getCityRoads(%1)',
+                getCityLongitude: 'getCityLongitude(%1)',
+                getCityLatitude: 'getCityLatitude(%1)',
+                getRoadLength: 'getRoadLength(%1)',
+                highlightRoad: 'highlightRoad(%1)',
+                getDestinationCity: 'getDestinationCity(%1, %2)',
+                echo: 'afficher(%1)'
+            },
+            code: {
+                addCity: 'addCity',
+                getNbCities: 'getNbCities',
+                addRoad: 'addRoad',
+                getNbRoads: 'getNbRoads',
+                getCityRoads: 'getCityRoads',
+                getCityLongitude: 'getCityLongitude',
+                getCityLatitude: 'getCityLatitude',
+                getRoadLength: 'getRoadLength',
+                highlightRoad: 'highlightRoad',
+                getDestinationCity: 'getDestinationCity',
+                echo: 'afficher'
+            },
+            description: {
+                addCity: 'Add city',
+                getNbCities: 'Return amount of cities',
+                addRoad: 'Add road between the two cities',
+                getNbRoads: 'Returns the amount of roads to the city',
+                getCityRoads: 'Returns the list of roads to the city',
+                getCityLongitude: 'Returns the longitude of the city',
+                getCityLatitude: 'Returns the latitude of the city',
+                getRoadLength: 'Return the road length',
+                highlightRoad: 'Highlight the toad',
+                getDestinationCity: 'Return destination city',
+                echo: 'Afficher'
+            },
+            startingBlockName: "Program",
+            constantLabel: {
+            },
+            messages: {
+            },
+            map: {
+                lng_not_number: 'Longitude is not a number',
+                lng_out_of_range: 'Longitude is outside of the map',
+                lat_not_number: 'Latitude is not a number',
+                lat_out_of_range: 'Latitude is outside of the map',
+                city_not_found: 'City not found',
+                road_not_found: 'Road not found',
+                road_end_error: 'The road must connect different cities',
+                road_exists: 'The road already exists',
+                mistake_cities_amount: 'Wrong amount of cities',
+                mistake_city_missed: 'The city is missed',
+                mistake_roads_amount: 'Wrong amount of roads',
+                mistake_road: 'The road is missed or highlighting error',
+                success: 'Success'
+            }
+        }
+    }
+
+
+
+
+
+    var context = quickAlgoContext(display, infos)
+    var strings = context.setLocalLanguageStrings(map_strings)
+    var map;
+    var logger;
+
+
+
+    context.reset = function() {
+        if(!map) {
+            var options = Object.assign({ 
+                parent: $('#grid')[0],
+                strings: strings.map,
+                display: display
+            }, infos.mapConfig);
+            
+            map = new Map(options);
+        }
+        if(!logger) {
+            logger = new Logger({
+                parent: $('#gridContainer'),
+                display: display
+            });
+        }
+        if(context.display) {
+            map.clearMap();            
+        }
+    }
+
+    infos.checkEndCondition = function(context, lastTurn) {
+        var res = map.validate(infos.mapValidData);
+        context.success = res.success;
+        throw(res.message);
+    }
+
+
+    context.setScale = function(scale) {}
+    context.updateScale = function() {}
+    context.resetDisplay = function() {}
+    context.unload = function() {}
+    context.onExecutionEnd = function() {}
+
+
+
+    var typeData = {
+        'Number': { bType: 'input_value', vType: 'math_number', fName: 'NUM', defVal: 0 },
+        'String': { bType: 'input_value', vType: 'text', fName: 'TEXT', defVal: '' },
+    }
+
+    context.customBlocks = {
+        map: {
+            map: [
+                { name: 'addCity',
+                    params: ['Number', 'Number', 'String'],
+                    params_names: ['longitude', 'latitude', 'name']
+                },
+                { name: 'getNbCities',
+                    yieldsValue: true,
+                    params: [],
+                    params_names: []
+                },
+                { name: 'addRoad',
+                    params: ['Number', 'Number'],
+                    params_names: ['city_idx_1', 'city_idx_2']
+                },
+                { name: 'getNbRoads',
+                    yieldsValue: true,
+                    params: ['Number'],
+                    params_names: ['city_idx']
+                },
+                { name: 'getCityRoads',
+                    yieldsValue: true,
+                    params: ['Number'],
+                    params_names: ['city_idx']
+                },
+                { name: 'getCityLongitude',
+                    yieldsValue: true,
+                    params: ['Number'],
+                    params_names: ['city_idx']
+                },
+                { name: 'getCityLatitude',
+                    yieldsValue: true,
+                    params: ['Number'],
+                    params_names: ['city_idx']
+                },
+                { name: 'getRoadLength',
+                    yieldsValue: true,
+                    params: ['Number'],
+                    params_names: ['road_idx']
+                },
+                { name: 'highlightRoad',
+                    params: ['Number'],
+                    params_names: ['road_idx']
+                },
+                { name: 'getDestinationCity',
+                    yieldsValue: true,
+                    params: ['Number', 'Number'],
+                    params_names: ['city_idx', 'road_idx']                    
+                },
+                { name: 'echo',
+                    params: ['String'],
+                    params_names: ['value']
+                }
+            ]
+        }
+    }
+
+
+    context.map = {
+        echo: function(msg, callback) {
+            logger && logger.put(msg);
+            callback();
+        }
+    }
+
+
+    for (var category in context.customBlocks.map) {
+        for (var iBlock = 0; iBlock < context.customBlocks.map[category].length; iBlock++) {
+            (function() {
+                var block = context.customBlocks.map[category][iBlock];
+                if (block.params) {
+                    block.blocklyJson = { inputsInline: true, args0: {} }
+                    var blockArgs = block.blocklyJson.args0;
+                    block.blocklyXml = '';
+                    for (var iParam = 0; iParam < block.params.length; iParam++) {
+                        var paramData = typeData[block.params[iParam]] || { bType: 'input_value' };
+                        blockArgs[iParam] = { type: paramData.bType, name: "PARAM_" + iParam }
+                        block.blocklyXml +=
+                            '' +
+                            '' + paramData.defVal + '' +
+                            '';
+                    }
+                    block.blocklyXml += '';
+                }
+                if(context.map[block.name]) {
+                    return;
+                }
+                context.map[block.name] = function() {
+                    var callback = arguments[arguments.length - 1];
+                    if(map) {
+                        context.waitDelay(callback, map[block.name].apply(map, arguments))
+                    } else {
+                        callback();
+                    }
+                }
+           })();
+        }
+    }
+
+    return context;
+}
+
+if(window.quickAlgoLibraries) {
+    quickAlgoLibraries.register('map', getContext);
+ } else {
+    if(!window.quickAlgoLibrariesList) { window.quickAlgoLibrariesList = []; }
+    window.quickAlgoLibrariesList.push(['map', getContext]);
+ }
diff --git a/pemFioi/map_v2/map.js b/pemFioi/map_v2/map.js
new file mode 100644
index 000000000..8638c5096
--- /dev/null
+++ b/pemFioi/map_v2/map.js
@@ -0,0 +1,267 @@
+function Map(options) {
+    
+    var defaults = {
+        parent: document.body,
+        width: 400,
+        height: 400,
+        strings: {},
+        map_lng_left: 0,
+        map_lng_right: 0,
+        map_lat_top: 0,
+        map_lat_bottom: 0,
+        unit: 'km',
+
+        // map2d options
+        line_color: {r: 0, g: 0, b: 0},
+        line_width: 4,
+        background_color: {r: 255, g: 255, b: 255},
+        text_color: {r: 0, g: 0, b: 0},
+        font: '14px sans',
+        pin_file: null,
+        pin_scale: 0.385,
+        map_file: null,
+        
+    }
+
+    options = Object.assign({}, defaults, options);
+
+    var renderer = new Geography.Renderer2D(options);
+    var calc = new Geography.DistanceCalculator(options.unit);    
+
+
+    function trans(key) {
+        return key in options.strings ? options.strings[key] : key;
+    }
+    
+
+    // validation
+
+    function validateLng(lng) {
+        if(isNaN(lng)) {
+            throw new Error(trans('lng_not_number'))
+        }
+        if(lng < options.map_lng_left || lng > options.map_lng_right) {
+            throw new Error(trans('lng_out_of_range'))
+        }
+    }
+
+    function validateLat(lat) {
+        if(isNaN(lat)) {
+            throw new Error(trans('lat_not_number'))
+        }
+        if(lat > options.map_lat_top || lat < options.map_lat_bottom) {
+            throw new Error(trans('lat_out_of_range'))
+        }
+    }        
+
+
+    var db = {
+        cities: [],
+        roads: [],
+
+        getCity: function(idx) {
+            if(this.cities[idx]) {
+                return this.cities[idx];
+            }
+            throw new Error(trans('city_not_found'));
+        },
+
+        getRoad: function(idx) {
+            if(this.roads[idx]) {
+                return this.roads[idx];
+            }
+            throw new Error(trans('road_not_found'));
+        },
+
+        clear: function() {
+            this.cities = [];
+            this.roads = [];
+        }
+    }
+
+
+
+    // interface
+
+    this.addCity = function(lng, lat, name) {
+        validateLng(lng);
+        validateLat(lat);
+        db.cities.push({
+            lng: lng,
+            lat: lat,
+            name: name
+        });
+        renderer.pin(lng, lat, name);        
+    }
+
+
+    this.getNbCities = function() {
+        return db.cities.length;
+    }
+    
+
+    this.addRoad = function(city_idx_1, city_idx_2) {
+        if(city_idx_1 == city_idx_2) {
+            throw new Error(trans('road_end_error'));
+        }
+        for(var i=0; i city_idx_2) to DB
+
+getNbRoads(city_idx)
+    return: amount of roads where city_idx_1 == city_idx or city_idx_2 == city_idx
+
+getCityRoads(city_idx)
+    return: roads where city_idx_1 == city_idx or city_idx_2 == city_idx
+
+getCityLongitude(city_idx)    
+    return: city lng
+
+getCityLatitude(city_idx)    
+    return: city lat
+
+getRoadLength(road_idx)
+    return: distance between cities linked by given road
+
+highlightRoad(road_idx)
+    - draw line between cities (color2)
+    
+getDestinationCity(city_idx, road_idx)
+    return: find all roads where city_idx_1 == city_idx or city_idx_2 == city_idx, take road with index = road_idx, return another city idx from road link
\ No newline at end of file
diff --git a/pemFioi/moocBlockchain/common.js b/pemFioi/moocBlockchain/common.js
new file mode 100644
index 000000000..588541b84
--- /dev/null
+++ b/pemFioi/moocBlockchain/common.js
@@ -0,0 +1,89 @@
+var crossSize = 28;
+
+var timeOut;
+var errorTriangle;
+
+var colors = {
+   black: "#30242B",
+   darkGrey: "#666666",
+   grey: "#848484",
+   lightGrey: "#f7f8fb",
+   shadowGrey: "#dddee1",
+   unselectedRectGrey: "#cecece",
+   orange: "#e05d13",
+   blue: "#bedbdb",
+   darkBlue: "#424c4c",
+   shadowBlue: "#a1baba",
+   red: "#fb0048",
+   yellow: "#ffb90e",
+   green: "#085b5c"
+};
+var selectedTabCss = {
+   "background-color": "white",
+   "border-top": "3px solid "+colors.orange
+};
+var unselectedTabCss = {
+   "background-color": colors.grey,
+   "border-top": "3px solid "+colors.grey
+};
+var crossAttr = {
+   circle: {
+      stroke: colors.red,
+      "stroke-width":4,
+      fill: "white"
+   },
+   cross: {
+      stroke: colors.red,
+      "stroke-width": 4
+   }
+};
+var errorTriangleAttr = {
+   stroke: "none",
+   fill: colors.red
+};
+
+function updateTabs(currentTab) {
+   var selectedTab = (currentTab) ? 2 : 1;
+   var unselectedTab = (currentTab) ? 1 : 2;
+   $("#tab_"+selectedTab).css(selectedTabCss);
+   $("#tab_"+selectedTab+" i").css({color:colors.orange});
+   $("#tab_"+unselectedTab).css(unselectedTabCss);
+   $("#tab_"+unselectedTab+" i").css({color:colors.darkGrey});
+   if(currentTab){
+      $("#instructions").hide();
+      $("#resolution").show();
+   }else{
+      $("#instructions").show();
+      $("#resolution").hide();
+   }
+};
+
+function drawCross(paper,x,y,simpleCross) {
+   var attr = crossAttr;
+   var r = crossSize/2;
+   var x1 = x - r*0.4;
+   var y1 = y - r*0.4;
+   var x2 = x + r*0.4;
+   var y2 = y + r*0.4;
+   var cross = paper.path("M"+x1+" "+y1+",L"+x2+" "+y2+",M"+x1+" "+y2+",L"+x2+" "+y1).attr(attr.cross);
+   if(!simpleCross){
+      var circle = paper.circle(x,y,r).attr(attr.circle);
+      return paper.set(circle,cross);
+   }else{
+      return cross;
+   }
+};
+
+function generateHash(rng,hashLength) {
+   var hash = "";
+   do{
+      var nextType = rng.nextBit();
+      if(nextType){
+         var nextChar = String.fromCharCode(rng.nextInt(65,90));
+      }else{
+         var nextChar = rng.nextInt(0,9);
+      }
+      hash += nextChar;
+   }while(hash.length < hashLength);
+   return hash;
+};
\ No newline at end of file
diff --git a/pemFioi/moocBlockchain/common_2.1.js b/pemFioi/moocBlockchain/common_2.1.js
new file mode 100644
index 000000000..09edccc72
--- /dev/null
+++ b/pemFioi/moocBlockchain/common_2.1.js
@@ -0,0 +1,290 @@
+var taskStrings = {
+   success: "Bravo, vous avez formé la chaîne la plus longue possible !",
+   remainingBlocks: "BLOCS RESTANTS",
+   chainBlocks: "BLOCS DE LA CHAÎNE",
+   validate: "VALIDER",
+   hash: "HASH",
+   prev: "PREV",
+   errorNoChain: "Votre réponse ne contient pas de chaîne.",
+   errorMultipleChains: "Votre réponse contient plusieurs morceaux de chaîne non reliés entre eux.",
+   errorTooShort: "Votre chaîne est valide mais n’est pas la plus longue possible.",
+   errorNoGenesis: "Votre chaîne ne commence pas par le block genesis (prev = 000...000).",
+   errorLateralChain: "Plusieurs blocs de votre réponse sont reliés au même bloc, vous devez choisir une unique chaîne."
+};
+
+var paperHeight = 660;
+var marginX = 10;
+var marginY = 10;
+var headerH = 60;
+var leftSideH = paperHeight - 8*marginY;
+var leftTabW = 35;
+var leftTabH = 70;
+var validateButtonW = 200;
+var validateButtonH = 50;
+var blockW = 170;
+var blockH = 50;
+
+var attractionRadius = 20;
+var nbBlocks;
+// var timeOut;
+
+
+var leftSideAttr = {
+   stroke: "none",
+   fill: colors.lightGrey
+};
+var shadowAttr = {
+   stroke: "none",
+   fill: colors.shadowGrey
+};
+var titleAttr = {
+   "font-size": 20,
+   "font-weight": "bold",
+   fill: colors.darkGrey
+};
+var lineAttr = {
+   stroke: "none",
+   fill: colors.shadowGrey,
+   opacity: 0.5
+};
+var tabArrowAttr = {
+   stroke: colors.darkGrey,
+   "stroke-width": 3,
+   "stroke-linecap": "round",
+   "stroke-linejoin": "round"
+};
+var validateButtonAttr = {
+   rect: {
+      stroke: "none",
+      fill: colors.orange
+   },
+   text: {
+      "font-size": 16,
+      "font-weight": "bold",
+      fill: "white"
+   }
+};
+var blockAttr = {
+   unselected: {
+      rect: {
+         stroke: colors.unselectedRectGrey,
+         "stroke-linejoin": "round",
+         fill: colors.unselectedRectGrey
+      },
+      shadow: {
+         stroke: colors.grey,
+         "stroke-linejoin": "round",
+         fill: colors.grey
+      },
+      circle: {
+         stroke: "none",
+         fill: colors.grey,
+         r: 2,
+         opacity: 0.5
+      },
+      text: {
+         "font-size": 12,
+         "font-weight": "bold",
+         "text-anchor": "start",
+         fill: colors.darkGrey
+      },
+      line: {
+         stroke: colors.darkGrey
+      }
+   },
+   selected: {
+      rect: {
+         stroke: colors.blue,
+         "stroke-linejoin": "round",
+         fill: colors.blue
+      },
+      shadow: {
+         stroke: colors.shadowBlue,
+         "stroke-linejoin": "round",
+         fill: colors.shadowBlue
+      },
+      circle: {
+         stroke: "none",
+         fill: colors.shadowBlue,
+         r: 2,
+         opacity: 1
+      },
+      text: {
+         "font-size": 12,
+         "font-weight": "bold",
+         "text-anchor": "start",
+         fill: colors.darkBlue
+      },
+      line: {
+         stroke: colors.darkBlue
+      }
+   }
+};
+var arrowAttr = {
+   stroke: colors.orange,
+   "stroke-width": 3,
+   "arrow-end": "block-wide-midium"
+};
+
+function addCross(paper,id,answer) {
+   var pos = answer.blockPos[id];
+   var x = pos.x + blockW/2;
+   var y = pos.y + blockH + 10;
+   return drawCross(paper,x,y);
+};
+
+function drawArrow(paper,pos,lateral) {
+   var r = 20;
+   var x1 = pos.x + 10;
+   var y2 = pos.y + blockH + 2 + r;
+   if(lateral){
+      var y1 = pos.y + blockH;
+      var x2 = x1 - 20;
+      var arrow = paper.path("M"+x1+" "+y1+",A "+r+" "+r+" 0 0 1 "+x2+" "+y2).attr(arrowAttr);
+   }else{
+      var y1 = pos.y + blockH + 2 - r;
+      var x2 = x1;
+      var arrow = paper.path("M"+x1+" "+y1+",A "+r+" "+r+" 0 1 0 "+x2+" "+y2).attr(arrowAttr);
+   }
+   return arrow;
+};
+
+function drawBlock(paper,id,answer,arrowRaph) {
+   var pos = answer.blockPos[id];
+   var x = pos.x;
+   var y = pos.y;
+   var data = answer.blockData[id];
+   var notchW = 18;
+   var notchH = 7;
+   var notchX = 10;
+   var attr = (answer.chain[id] != null || answer.chain.includes(id) || (answer.lateralChain && answer.lateralChain[id] != null)) ? blockAttr.selected : blockAttr.unselected;
+
+   paper.setStart();
+   var shadowPath = getBlockPath(x,y + 2, notchW,notchH,notchX);
+   var path = getBlockPath(x,y,notchW,notchH,notchX);
+   paper.path(shadowPath).attr(attr.shadow);
+   paper.path(path).attr(attr.rect);
+   
+   var xCircle = x + notchX + notchW/2;
+   for(var iCircle = 0; iCircle < 3; iCircle++){
+      var yCircle = y + blockH/2 - 8 + iCircle*8;
+      paper.circle(xCircle,yCircle).attr(attr.circle);
+   }
+
+   var xLabel = x + notchX + notchW + marginX;
+   var xHash = xLabel + 50;
+   var yLine = y + blockH/2;
+   var yLabel1 = yLine - 12;
+   var yLabel2 = yLine + 12;
+   paper.text(xLabel,yLabel1,taskStrings.hash).attr(attr.text);
+   paper.text(xLabel,yLabel2,taskStrings.prev).attr(attr.text);
+   paper.text(xHash,yLabel1,data.hash).attr(attr.text);
+   paper.text(xHash,yLabel2,data.prev).attr(attr.text);
+   paper.path("M"+xLabel+" "+yLine+",H"+(x + blockW - marginX)).attr(attr.line);
+
+   if(arrowRaph[id]){
+      arrowRaph[id].toFront();
+   }
+
+   return paper.setFinish();
+};
+
+function getBlockPath(x,y,notchW,notchH,notchX) {
+   var x1 = x;
+   var y1 = y;
+   var x2 = x + notchX;
+   var y3 = y + notchH;
+   var x4 = x2 + notchW;
+   var x5 = x1 + blockW;
+   var y6 = y1 + blockH;
+   var x7 = x4 - 3;
+   var y8 = y6 + notchH;
+   var x9 = x2 + 3;
+   var path = "M"+x1+" "+y1+",H"+x2+",V"+y3+",H"+x4+",V"+y1+",H"+x5+",V"+y6+",H"+x7+",V"+y8+",H"+x9+",V"+y6+",H"+x1+"Z";
+   return path;
+};
+
+function applyStyle(block,selected) {
+   var attr = (selected) ? blockAttr.selected : blockAttr.unselected;
+   block[0].attr(attr.shadow);
+   block[1].attr(attr.rect);
+   for(var iCircle = 0; iCircle < 3; iCircle++){
+      block[2 + iCircle].attr(attr.circle);
+   }
+   for(var iText = 0; iText < 4; iText++){
+      block[5 + iText].attr(attr.text);
+   }
+   block[9].attr(attr.line);
+};
+
+function getRightSideBlocks(answer,nbBlocks) {
+   var windowW = $("#resolution").width();
+   var xRight = windowW*0.53;
+   var rightSideBlocks = []
+   for(var iBlock = 0; iBlock < nbBlocks; iBlock++){
+      var pos = answer.blockPos[iBlock];
+      if(pos.x >= xRight){
+         rightSideBlocks.push(iBlock);
+      }
+   }
+   return rightSideBlocks;
+};
+
+function checkSnap(id,answer,side) {
+   var pos = answer.blockPos[id];
+   var prev = answer.blockData[id].prev;
+   var hash = answer.blockData[id].hash;
+   for(var iBlock = 0; iBlock < nbBlocks; iBlock++){
+      if(iBlock != id){
+         var otherPos = answer.blockPos[iBlock];
+         switch(side){
+            case "bottom":
+               var d = Beav.Geometry.distance(pos.x,pos.y + blockH,otherPos.x,otherPos.y);
+               break;
+            case "top":
+               var d = Beav.Geometry.distance(pos.x,pos.y,otherPos.x,otherPos.y + blockH);
+               break;
+            case "left":
+               var d = Beav.Geometry.distance(pos.x - blockW,pos.y + blockH,otherPos.x,otherPos.y);
+               break;
+            case "right":
+               var d = Beav.Geometry.distance(pos.x + blockW,pos.y + blockH,otherPos.x,otherPos.y);
+               break;
+         }
+         if(d < attractionRadius){
+            var otherPrev = answer.blockData[iBlock].prev;
+            var otherHash = answer.blockData[iBlock].hash;
+            if((side == "bottom" && prev == otherHash) || 
+               (side == "top" && otherPrev == hash) || 
+               ((side == "left" || side == "right") && prev == otherHash && answer.chain.includes(iBlock))){
+               return { id: iBlock, chain: true };
+            }else{
+               return { id: iBlock, chain: false };
+            }
+         }
+      }
+   }
+   return false;
+};
+
+function displayError(paper,msg) {
+   if(errorTriangle){
+      errorTriangle.remove();
+   }
+   if(msg){
+      $("#error").show();
+      $("#error").html(""+msg);
+      var windowW = $("#resolution").width();
+      $("#error").css({
+         top: paperHeight - 4*marginY - validateButtonH,
+         right: 0.22*windowW + validateButtonW/2 + 2*marginX
+      });
+      var rTr = 10;
+      var xTr = 0.78*windowW - validateButtonW/2 - 2*marginX + rTr/2;
+      var yTr = paperHeight - 4*marginY - validateButtonH/2;
+      errorTriangle = getShape(paper,"triangle",xTr,yTr,rTr).attr(errorTriangleAttr);
+      errorTriangle.rotate(90);
+   }else{
+      $("#error").hide();
+   }
+};
\ No newline at end of file
diff --git a/pemFioi/moocBlockchain/common_2.3.js b/pemFioi/moocBlockchain/common_2.3.js
new file mode 100644
index 000000000..23f32e75a
--- /dev/null
+++ b/pemFioi/moocBlockchain/common_2.3.js
@@ -0,0 +1,138 @@
+var marginY = 20;
+var marginX = 20;
+var headerH = 40;
+var hashMachineH = 450;
+var hashButtonH = 30;
+var hashMachineCellH = (hashMachineH - headerH - hashButtonH - marginY)/2;
+var validateButtonH = 40;
+var circleR = 20;
+
+var graph;
+var vGraph;
+var graphDrawer;
+var graphMouse;
+var dragLimits = {};
+var hashButton;
+var validateButton;
+var hashMachineData = [null,null];
+var dataRaph = [];
+var dataPos = [];
+// var timeOut;
+
+var taskStrings = {
+   success: "Bravo, vous avez réussi!",
+   hashMachine: "Machine à hasher",
+   data: "Donnée",
+   generate: "GÉNÉRER LE HASH",
+   check: "VÉRIFIER LE HASH",
+   cancel: "ANNULER UNE ÉTAPE",
+   validate: "VALIDER",
+   retry: "RECOMMENCER",
+   errorDataAlreadyUsed: "Une même donnée ne peut pas être utilisée pour deux hash différents.",
+   errorMissingTransaction: "Votre arbre de Merkle ne contient pas toutes les transactions.",
+   errorUnusedVertices: "Votre arbre de Merkle contient des noeuds inutiles.",
+   errorNoSelection: "Aucune donnée n'est sélectionnée",
+   errorSelectedData: "Impossible de générer un hash à partir des données sélectionnées.",
+   errorDepth: function(diff) {
+      var comp = (diff > 0) ? "plus" : "moins";
+      return "Votre arbre de merkle n’est pas équilibré. La transaction encerclée de rouge est à une profondeur de "+Math.abs(diff)+" de "+comp+" que la transaction encerclée de orange."
+   },
+   errorSelection: "Les noeuds sélectionnés ne permettent pas de vérifier un hash.",
+   errorMissingCheck: "Vous n’avez pas effectué toutes les vérifications nécessaires.",
+   counter: function(n) {
+      return "Noeuds lus: "+n;
+   },
+   alreadyChecked: "Ce hash a déjà été vérifié.",
+   tooManyRead: function(n) {
+      return "Vous avez vérifié la transaction en lisant le contenu de "+n+" noeuds de l’arbre, il est possible de faire moins."
+   }
+};
+
+var hashMachineAttr = {
+   title: {
+      "font-size": 14,
+      "font-weight": "bold",
+      fill: colors.black,
+      opacity: 0.8
+   },
+   frame: {
+      stroke: "none",
+      fill: colors.unselectedRectGrey,
+      height: hashMachineH,
+      r: 5
+   },
+   line: {
+      stroke: "none",
+      fill: colors.grey,
+      opacity: 0.5
+   },
+   data: {
+      "font-size": 14,
+      "font-weight": "bold",
+      fill: colors.darkGrey
+   },
+   hashButtonRect: {
+      stroke: "none",
+      fill: colors.orange,
+      height: hashButtonH,
+      r: hashButtonH/2
+   },
+   hashButtonText: {
+      "font-size": 14,
+      "font-weight": "bold",
+      fill: "white"
+   }
+};
+
+var validateButtonAttr = {
+   rect: {
+      stroke: "none",
+      fill: colors.orange,
+      height: validateButtonH,
+      r: validateButtonH/2
+   },
+   text: {
+      "font-size": 16,
+      "font-weight": "bold",
+      fill: "white"
+   }
+};
+
+var circleAttr = {
+   stroke: "none",
+   fill: colors.unselectedRectGrey,
+   r: circleR
+};
+var rectAttr = {
+   stroke: "none",
+   fill: colors.unselectedRectGrey,
+   r: 10
+};
+var boxLineAttr = {
+   stroke: colors.grey,
+   "stroke-width": 1,
+   opacity: 0.5
+};
+var vertexContentAttr = {
+   "font-size": 14,
+   "font-weight": "bold",
+   fill: colors.orange
+};
+var lineAttr = {
+   stroke: colors.grey,
+   "stroke-width": 3
+};
+var vertexLabelAttr = {
+   "font-size": 14,
+   "font-weight": "bold",
+   fill: colors.black,
+   opacity: 0.8
+};
+var selectedAttr = {
+   stroke: "none",
+   fill: colors.blue
+};
+var selectedLabelAttr = {
+   fill: colors.darkBlue
+};
+
diff --git a/pemFioi/moocBlockchain/example.png b/pemFioi/moocBlockchain/example.png
new file mode 100644
index 000000000..eab85c9f9
Binary files /dev/null and b/pemFioi/moocBlockchain/example.png differ
diff --git a/pemFioi/moocBlockchain/style.css b/pemFioi/moocBlockchain/style.css
new file mode 100644
index 000000000..4fdebf43e
--- /dev/null
+++ b/pemFioi/moocBlockchain/style.css
@@ -0,0 +1,106 @@
+@import url('../_common/modules/fonts/fontAwesome/css/all.css');
+body {
+   font-size: 16px;
+   color: #666666;
+}
+body * {
+   box-sizing: border-box;
+}
+
+#task {
+   width: 100%;
+   /*max-width: 1024px;*/
+   min-width: 750px;
+}
+
+/*** TABS ***/
+#tabs {
+   height: 60px;
+   background-color: #666666;
+   position: relative;
+   padding-top: 1px;
+}
+#tabs div[id^=tab_] {
+   width: 200px;
+   height: 49px;
+   margin: 10px;
+   margin-bottom: 0;
+   font-weight: bold;
+   display: inline-block;
+   padding-top: 1em;
+   padding-left: 1em;
+   cursor: pointer;
+}
+#tabs i {
+   margin: 0 1em;
+}
+#restartButton {
+   float: right;
+   color: white;
+   border: 1px solid white;
+   width: 230px;
+   height: 40px;
+   border-radius: 20px;
+   text-align: center;
+   margin: 10px 20px 0 0;
+   font-weight: bold;
+   padding: 10px;
+   cursor: pointer;
+}
+
+/*** instructions ***/
+#instructions {
+   margin: auto;
+   margin-top: 2em;
+   text-align: justify;
+   min-width: 400px;
+   max-width: 700px;
+   padding: 1px;
+}
+hr {
+   border-top: #666666;
+   opacity: 0.5;
+   margin-bottom: 2em;
+}
+h2 {
+   text-align: center;
+}
+#instructions img {
+   display: block;
+   margin: auto;
+   margin-bottom: 1em;
+}
+#startButton {
+   margin: auto;
+   background-color: #e05d13;
+   width: 200px;
+   text-align: center;
+   color: white;
+   font-weight: bold;
+   height: 50px;
+   border-radius: 25px;
+   padding: 1em;
+}
+
+/*** resolution ***/
+#resolution {
+   position: relative;
+   /*touch-action: none;*/
+}
+
+/*** error ***/
+#error {
+   background-color: #fb0048;
+   border-radius: 2em;
+   color: white;
+   position: absolute;
+/*   top: 0px;
+   right: 40%;*/
+   padding: 1em;
+   text-align: center;
+   max-width: 90%;
+   z-index: 2;
+}
+#error i {
+   margin-right: 1em;
+}
\ No newline at end of file
diff --git a/pemFioi/network/scanip/context.js b/pemFioi/network/scanip/context.js
new file mode 100644
index 000000000..492e94979
--- /dev/null
+++ b/pemFioi/network/scanip/context.js
@@ -0,0 +1,568 @@
+var getContext = function (display, infos, curLevel) {
+
+    var config = {
+        max_port: 100
+    }
+
+    infos.checkEndEveryTurn = false;
+
+    var config = {
+        mistake_background_color: 'lightpink',
+        placeholder: '?',
+        latency: {
+            min: 0.1,
+            max: 1
+        },
+        input_prefix: '>'
+    }
+
+    var localLanguageStrings = {
+        en: {
+            categories: {
+                scanip: 'Scan IP'
+            },            
+            label: {
+                // Labels for the blocks
+                sendPacket: "send packet to IP",
+                scanPort: "scan port",
+                print: "print string",
+                getArgument: "get argument",
+                getArgumentsLength: "get amount of arguments"
+            },
+            code: {
+                // Names of the functions in Python, or Blockly translated in JavaScript
+                sendPacket: "sendPacket",
+                scanPort: 'scanPort',
+                print: "print",
+                getArgument: "getArgument",
+                getArgumentsLength: "getArgumentsLength"                
+            },
+            description: {
+                // Descriptions of the functions in Python (optional)
+                sendPacket: "sendPacket() Send packet to IP",
+                scanPort: "scanPort() Scan port",
+                print: "print() Print string",
+                getArgument: "getArgument() Get argument",
+                getArgumentsLength: "getArgumentsLength() Get total amount of arguments"                
+            },
+            constant: {},
+            startingBlockName: "Program", // Name for the starting block
+            messages: {
+                success: 'Success!',
+                online: 'The device is online',
+                offline: 'The device is not connected',
+                no_device: 'No device at this IP',
+                lines_count_mistake: 'Output contain extra lines or some lines missed',
+                line_mistake: 'Lines with mistake marked with red color',
+                open: 'Open',
+                closed: 'Closed'
+            }
+        }
+    }
+
+    var context = quickAlgoContext(display, infos);
+    var strings = context.setLocalLanguageStrings(localLanguageStrings);
+    if (window.quickAlgoInterface) {
+        window.quickAlgoInterface.stepDelayMax = 500;
+    }
+
+
+    var random = {
+
+        counter: 0,
+        step: 10,
+
+        reset: function() {
+            this.counter = Math.random() * 100;
+        },
+
+
+        get: function() {
+            var range = config.latency.max - config.latency.min;
+            var res = config.latency.min + range * Math.abs(Math.sin(this.counter));
+            res = res.toFixed(2);
+            res = parseFloat(res);
+            this.counter += this.step;
+            return res;
+        }
+    }
+
+
+
+    var input = {
+
+        cmd: '',
+        data: [],
+
+        set: function(cmd) {
+            this.cmd = cmd;
+            this.data = cmd.split(' ');
+        },
+
+        get: function() {
+            return this.cmd;
+        },
+
+        getArgumentsLength: function() {
+            return this.data.length;
+        },
+
+        getArgument: function(n) {
+            return this.data[n];
+        },
+
+        getArguments: function() {
+            return this.data;
+        }
+
+    }
+
+
+
+    var log = {
+
+        lines_max: 30,
+
+        add: function(str) {
+            if(!context.display) {
+                return
+            }
+            var log = $('#log');
+            var line = $('
    ');
+            line.html(str);
+            log.append(line);            
+
+            var lines = log.find('div');
+            if(lines.length > this.lines_max) {
+                lines[0].remove();
+            }
+
+            line = line[0];
+            if('scrollIntoView' in line) {
+                line.scrollIntoView();
+            }
+        },
+
+
+        clear: function() {
+            $('#log').empty();
+        }
+    }
+
+
+    var network = {
+        data: {},
+
+
+        getRandomLatency: function() {
+            var range = config.latency.max - config.latency.min;
+            var res = config.latency.min + range * Math.random();
+            res = res.toFixed(2);
+            res = parseFloat(res);
+            return res;
+        },
+
+        setData: function(data) {
+            for(var i=0; i>>24) + '.' + (n>>16 & 255) + '.' + (n>>8 & 255) + '.' + (n & 255);
+        },
+
+        ip2int: function(ip) {
+            var parts = ip.split('.');
+            var n = 0;
+            for(var i=0; i');
+                el.html(str);
+                $('#print').append(el);
+            }
+        },
+
+        get: function() {
+            return this.lines;
+        },
+
+        markMistakeLine: function(line_idx) {
+            if(context.display) {
+                $('#print > div:nth-child(' + (1 + line_idx) + ')').css('background', config.mistake_background_color);
+            }
+        }
+    }
+
+
+
+    context.validator = {
+
+
+        validateUserOutput: function(expected_output) {
+            var user_output = output.get();
+
+            if(user_output.length != expected_output.length) {
+                context.success = false;
+                throw(strings.messages.lines_count_mistake);
+            }
+    
+            context.success = true;
+            for(var i=0; i
    
+            
    
+        `);
+        // Ask the parent to update sizes
+        context.blocklyHelper.updateSize();
+        context.updateScale();
+    };
+
+
+
+
+    context.updateScale = function () {};
+
+
+    // When the context is unloaded, this function is called to clean up
+    // anything the context may have created
+    context.unload = function () {
+        // Do something here
+        if (context.display) {
+            // Do something here
+        }
+    };
+
+
+
+    
+
+
+
+    context.scanip = {
+
+        getArgument: function(n, callback) {
+            var res = input.getArgument(n);
+            context.runner.noDelay(callback, res);
+        },
+
+        getArgumentsLength: function(callback) {
+            var res = input.getArgumentsLength();
+            context.runner.noDelay(callback, res);
+        },        
+
+        sendPacket: function(ip, callback) {
+            var res = network.sendPacket(ip);
+            context.runner.noDelay(callback, res);
+        },
+
+        scanPort: function(ip, port, callback) {
+            var res = network.scanPort(ip, port);
+            context.runner.noDelay(callback, res);
+        },
+
+        print: function(str, callback) {
+            output.print(str);
+            context.runner.noDelay(callback);
+        }
+    }
+   
+
+
+    context.customBlocks = {
+        scanip: {
+            scanip: [
+                {
+                    name: 'sendPacket',
+                    params: ['String'],
+                    yieldsValue: true
+                },
+                {
+                    name: 'scanPort',
+                    params: ['String', 'Number'],
+                    yieldsValue: true
+                },                
+                {
+                    name: 'print',
+                    params: ['String']
+                },
+                {
+                    name: 'getArgumentsLength',
+                    params: [],
+                    yieldsValue: true
+                },
+                {
+                    name: 'getArgument',
+                    params: ['Number'],
+                    yieldsValue: true
+                }
+            ]
+        }
+    };
+
+
+    // Color indexes of block categories (as a hue in the range 0–420)
+    context.provideBlocklyColours = function () {
+        return {
+            categories: {
+                network: 0,
+                sys: 40
+            }
+        };
+    };
+
+
+    return context;
+}
+
+
+
+// Register the library; change "template" by the name of your library in lowercase
+if (window.quickAlgoLibraries) {
+    quickAlgoLibraries.register('scanip', getContext);
+} else {
+    if (!window.quickAlgoLibrariesList) {
+        window.quickAlgoLibrariesList = [];
+    }
+    window.quickAlgoLibrariesList.push(['scanip', getContext]);
+}
\ No newline at end of file
diff --git a/pemFioi/network/traceroute/context.js b/pemFioi/network/traceroute/context.js
new file mode 100644
index 000000000..c9e8a2051
--- /dev/null
+++ b/pemFioi/network/traceroute/context.js
@@ -0,0 +1,594 @@
+var getContext = function (display, infos, curLevel) {
+
+    var config = {
+        vertex_radius: 50,
+        vertex_distance: 200,
+        circle_radius: 10,
+        circle_color: 'lightblue',
+        mistake_background_color: 'lightpink'
+    }
+
+    var localLanguageStrings = {
+        en: {
+            categories: {
+                traceroute: 'Traceroute'
+            },
+            label: {
+                // Labels for the blocks
+                parseArgument: "get domain argument",
+                getAddrInfo: "get domain IP",
+                sendPacket: "send packet to IP",
+                print: "print string"
+            },
+            code: {
+                // Names of the functions in Python, or Blockly translated in JavaScript
+                parseArgument: "parseArgument",
+                getAddrInfo: "getAddrInfo",
+                sendPacket: "sendPacket",
+                print: "print"
+            },
+            description: {
+                // Descriptions of the functions in Python (optional)
+                parseArgument: "parseArgument() get domain argument",
+                getAddrInfo: "getAddrInfo() Get domain IP",
+                sendPacket: "sendPacket() Send packet to IP",
+                print: "print() Print string"
+            },
+            constant: {},
+            startingBlockName: "Program", // Name for the starting block
+            messages: {
+                success: 'Success!',
+                domain_not_found: ': unknown domain',
+                ip_unreachable: ': IP unreachable',
+                ttl_incorrect: 'Incorrect TTL parameter value',
+                lines_count_mistake: 'Output contain extra lines or some lines missed',
+                line_mistake: 'Lines with mistake marked with red color'
+            }
+        }
+    }
+
+    var context = quickAlgoContext(display, infos);
+    var strings = context.setLocalLanguageStrings(localLanguageStrings);
+    if (window.quickAlgoInterface) {
+        window.quickAlgoInterface.stepDelayMax = 500;
+    }
+
+    var paper;
+
+    var network = {
+        data: [],
+
+
+        setData: function(data) {
+            this.data = JSON.parse(JSON.stringify(data));
+            for(var i=0; i');
+                el.html(str);
+                $('#print').append(el);
+            }
+        },
+
+        get: function() {
+            return this.lines;
+        },
+
+        markMistakeLine: function(line_idx) {
+            if(context.display) {
+                $('#print > div:nth-child(' + (1 + line_idx) + ')').css('background', config.mistake_background_color);
+            }
+        }
+    }
+
+
+
+    infos.checkEndEveryTurn = false;
+    infos.checkEndCondition = function (context, lastTurn) {
+        if(!lastTurn) {
+            return;
+        }
+
+        // generate valid output
+        var domain = network.parseArgument();
+        var ip = network.getAddrInfo(domain);
+        var max_ttl = network.maxTTL();
+        var expected_output = [];
+        for(var ttl=1; ttl<=max_ttl; ttl++) {
+            var res = network.sendPacket(ip, ttl);
+            expected_output.push(ttl + ' ' + res.domain + ' ' + res.ip + ' ' + res.rtt + 'ms');
+            if(res.ip == ip) {
+                break;
+            }
+        }
+
+        // compare valid output with user output
+        var user_output = output.get();
+        if(user_output.length != expected_output.length) {
+            context.success = false;
+            throw(strings.messages.lines_count_mistake);
+        }
+
+        context.success = true;
+        for(var i=0; i

+            

+        `);
+
+
+        // init graph
+        var graph_data = network.getGraphData();
+        context.Graph = Graph.fromJSON(JSON.stringify(graph_data.minGraph));
+
+        var graphW = $('#graph').width();
+        var graphH = $('#graph').height();
+  
+        this.raphaelFactory.destroyAll();
+        paper = this.raphaelFactory.create(
+            "paperMain",
+            "graph",
+            graphW,
+            graphH
+        );
+  
+
+        var vertexAttr = {
+            r: config.vertex_radius,
+            stroke: "none",
+            fill: "lightgray"
+        };
+        var edgeAttr = {
+            stroke: 'yellowgreen',
+            "stroke-width": 5
+        };
+        var graphDrawer = new SimpleGraphDrawer(vertexAttr, edgeAttr);
+        context.vGraph = new VisualGraph(
+            "vGraph", 
+            paper, 
+            context.Graph, 
+            graphDrawer, 
+            true, 
+            graph_data.vertexVisualInfo, 
+            graph_data.edgeVisualInfo
+        );
+  
+        //this.graphMouse = new GraphMouse("GraphMouse", context.Graph, context.vGraph);
+  
+        // graph scale
+        var vertices = context.Graph.getAllVertices();
+        context.graphOriginalW = 0;
+        context.graphOriginalH = 0;
+        $.each(vertices, function (index) {
+            var id = vertices[index];
+            var vertexObject = context.vGraph.getRaphaelsFromID(id)[0];
+            var r = vertexObject.attrs['r'];
+            var x = vertexObject.attrs['cx'] + r;
+            var y = vertexObject.attrs['cy'] + r;
+
+            if (x > context.graphOriginalW)
+                context.graphOriginalW = x;
+
+            if (y > context.graphOriginalH)
+                context.graphOriginalH = y;
+        });
+        var scaleFactorW = graphW / context.graphOriginalW;
+        var scaleFactorH = graphH / context.graphOriginalH;
+        paper.setViewBox(0, 0, graphW / scaleFactorW, graphH / scaleFactorH);
+        context.vGraph.redraw();
+
+
+        // Ask the parent to update sizes
+        context.blocklyHelper.updateSize();
+        context.updateScale();
+    };
+
+
+
+    // Update the context's display to the new scale (after a window resize for instance)
+    context.oldwidth = null;
+    context.oldheight = null;
+
+    context.updateScale = function () {
+        if(!context.display || !paper) {
+            return;
+        }
+
+        var width = $('#graph').width();
+        var height = $('#graph').height();
+
+        if(!context.oldwidth ||
+            !context.oldheight ||
+            context.oldwidth !== width ||
+            context.oldheight !== height) {
+
+            context.oldwidth = width;
+            context.oldheight = height;
+            var scaleFactorW = width / context.graphOriginalW;
+            var scaleFactorH = height / context.graphOriginalH;
+            paper.setViewBox(0, 0, width / scaleFactorW, height / scaleFactorH);
+            paper.setSize(width, height);
+        }
+    };
+
+
+    // When the context is unloaded, this function is called to clean up
+    // anything the context may have created
+    context.unload = function () {
+        // Do something here
+        if (context.display) {
+            // Do something here
+        }
+    };
+
+
+
+    function animateHop(from, to, callback) {
+        var fromVertice = 'v_' + from;
+        var toVertice = 'v_' + to;
+
+        var fromPos = context.vGraph.graphDrawer.getVertexPosition(fromVertice);
+        var edges = context.Graph.getEdgesBetween(fromVertice, toVertice);
+
+        if(!edges.length) {
+            return callback();
+        }
+        var verticesOrder = context.Graph.getEdgeVertices(edges[0]);
+        var edgePath = context.vGraph.getRaphaelsFromID(edges[0])[0];
+
+        var circle = paper.circle(fromPos.x, fromPos.y, config.circle_radius);
+        circle.attr("fill", config.circle_color);
+
+        var path = edgePath.attrs["path"];
+        var s = path.toString();
+
+        var pathLen = edgePath.getTotalLength();
+        var startAt = 1 - ((pathLen - config.vertex_radius) / (pathLen));
+
+
+        var fromPercentage = 1;
+        var toPercentage = startAt;
+        if (verticesOrder[0] == fromVertice) {
+        fromPercentage = startAt;
+        toPercentage = 1;
+        }
+        var anim_params = {
+            path: s,
+            rotate: false,
+            duration: context.infos.actionDelay,
+            easing: 'linear',
+            debug: false,
+            fromPercentage: fromPercentage,
+            toPercentage: toPercentage,
+        }
+        circle.animateAlong(anim_params, {}, function() {
+            circle.remove();
+            callback();
+        });
+    }
+
+
+    function animateCircle(ttl, callback) {
+        var pos = 0;
+        var direction = 1;
+        function requestHopAnimation() {
+            if(pos == ttl) {
+                direction = -1;
+            }
+            if(pos == 0 && direction == -1) {
+                return callback();
+            }
+            pos += direction;
+            animateHop(pos - direction, pos, requestHopAnimation);
+        }
+        requestHopAnimation();
+    }
+
+
+
+    context.traceroute = {
+        parseArgument: function(callback) {
+            context.runner.noDelay(callback, network.parseArgument());
+        },
+
+        getAddrInfo: function(domain, callback) {
+            var ip = network.getAddrInfo(domain);
+            if(ip === false) {
+                throw(strings.messages.domain_not_found + domain);
+            }
+            context.runner.noDelay(callback, ip);
+        },
+
+
+        sendPacket: function(ip, ttl, callback) {
+            var ttl = parseInt(ttl, 10);
+            if(!ttl) {
+                throw(strings.messages.ttl_incorrect);
+            }
+            if(!network.pingIP(ip)) {
+                throw(ip + strings.messages.ip_unreachable);
+            }
+            var res = network.sendPacket(ip, ttl);            
+            if(context.display) {
+                var ready = context.runner.allowSwitch(callback);
+                function animate(cb) {
+                    animateCircle(ttl, function() {
+                        context.runner.waitDelay(cb, res);
+                    })
+                }
+                ready(animate);
+            } else {
+                context.runner.noDelay(callback, res);
+            }
+        },
+
+
+        print: function(str, callback) {
+            output.print(str);
+            context.runner.noDelay(callback);
+        }
+    }
+   
+
+
+    context.customBlocks = {
+        traceroute: {
+            traceroute: [
+                {
+                    name: 'parseArgument',
+                    yieldsValue: true
+                },
+                {
+                    name: 'getAddrInfo',
+                    params: ['String'],
+                    yieldsValue: true
+                },
+                {
+                    name: 'sendPacket',
+                    params: ['String', 'Number'],
+                    yieldsValue: true
+                },
+                {
+                    name: 'print',
+                    params: ['String']
+                }
+            ]
+        }
+    };
+
+
+    // Color indexes of block categories (as a hue in the range 0–420)
+    context.provideBlocklyColours = function () {
+        return {
+            categories: {
+                traceroute: 0
+            }
+        };
+    };
+
+    // Constants available in Python
+    context.customConstants = {
+        traceroute: []
+    };
+
+    return context;
+}
+
+
+Raphael.el.animateAlong = function (params, props, callback) {
+    var element = this,
+        paper = element.paper,
+        path = params.path,
+        rotate = params.rotate,
+        duration = params.duration,
+        easing = params.easing,
+        debug = params.debug,
+        fromPercentage = params.fromPercentage,
+        toPercentage = params.toPercentage,
+        isElem = typeof path !== 'string';
+
+    element.path =
+        isElem ?
+            path :
+            paper.path(path);
+    element.pathLen = element.path.getTotalLength();
+    element.rotateWith = rotate;
+
+    element.path.attr({
+        stroke: debug ? 'red' : isElem ? path.attr('stroke') : 'rgba(0,0,0,0)',
+        'stroke-width': debug ? 2 : isElem ? path.attr('stroke-width') : 0
+    });
+
+    paper.customAttributes.along = function (v) {
+        var point = this.path.getPointAtLength(v * this.pathLen),
+            attrs = {
+                cx: point.x,
+                cy: point.y
+            };
+        this.rotateWith && (attrs.transform = 'r' + point.alpha);
+        // TODO: rotate along a path while also not messing
+        //       up existing transformations
+
+        return attrs;
+    };
+
+    if (props instanceof Function) {
+        callback = props;
+        props = null;
+    }
+    if (!props) {
+        props = {
+            along: toPercentage
+        };
+    } else {
+        props.along = toPercentage;
+    }
+
+    var startAlong = element.attr('along') || fromPercentage;
+
+    element.attr({
+        along: startAlong
+    }).animate(props, duration, easing, function () {
+        !isElem && element.path.remove();
+
+        callback && callback.call(element);
+    });
+};
+
+// Register the library; change "template" by the name of your library in lowercase
+if (window.quickAlgoLibraries) {
+    quickAlgoLibraries.register('traceroute', getContext);
+} else {
+    if (!window.quickAlgoLibrariesList) {
+        window.quickAlgoLibrariesList = [];
+    }
+    window.quickAlgoLibrariesList.push(['traceroute', getContext]);
+}
\ No newline at end of file
diff --git a/pemFioi/p5/blockly_p5.js b/pemFioi/p5/blockly_p5.js
new file mode 100644
index 000000000..c54ecab0e
--- /dev/null
+++ b/pemFioi/p5/blockly_p5.js
@@ -0,0 +1,341 @@
+var getContext = function(display, infos, curLevel) {
+
+
+    var p5_strings = {
+        en: {
+            categories: {
+                sound: 'Sound',
+                control: 'Controls'
+            },
+            label: {
+                playSignal: 'playSignal(%1, %2, %3, %4)',
+                playRecord: 'playRecord(%1, %2)',
+                playStop: 'playStop()',
+                sleep: 'sleep(%1)',
+                echo: 'echo(%1)'
+            },
+            code: {
+                playSignal: 'playSignal',
+                playRecord: 'playRecord',
+                sleep: 'sleep',
+                playStop: 'playStop',
+                echo: 'echo'
+            },
+            description: {
+                playSignal: 'playSignal(canal, type, frequency, amplitude) \n' +
+                    'Canal: 1, 2, or 3 (up to 3 signals can be played simultaneously)\n' +
+                    'Type: “sinus” - sine wave, “carré” - square wave, “scie” - sawtooth wave, “bruit”: white noise\n' +
+                    'Frequency: in Hz, from 100 to 8000\n' +
+                    'Amplitude: from 0 (silent) to 1 (100% volume)',
+                playRecord: 'playRecord(url, frequency) Url : a string: the url of the sound to play\n' +
+                    'Frequency : frequency to be used for a low pass filter (frequencies above should be removed)',
+                playStop: 'playStop()',
+                sleep: 'sleep(time) Time: time in ms during which the program should wait, but still play the sounds',
+                echo: 'echo(value) : print value'
+            },
+            startingBlockName: "Program",
+            constantLabel: {
+                'sine': 'sinus',
+                'triangle': 'triangle',
+                'sawtooth': 'scie',
+                'square': 'carré',
+                'noise': 'bruit'
+            },
+            messages: {
+                'loading': 'Loading file...',
+                'load_error': 'Error occurred during loading file.'
+            },
+            ui: {
+                'mic': 'Enable microphone',
+                'btn_files_repository': 'Add audio files...',
+                'files_repository': {
+                    'caption': 'Audio files list',
+                    'hint': 'Use file number as param for playRecord function',
+                    'add': 'Add',
+                    'incompatible_browser': 'Incompatible browser',
+                    'confirm_overwrite': 'Overwrite files?',
+                    'file_not_found': 'File not found: ',
+                    'copy_to_clipboard': 'Copy name to clipboard'
+                }
+            }
+        },
+        fr: {
+            categories: {
+                sound: 'Son',
+                control: 'Contrôle'
+            },
+            label: {
+                playSignal: 'playSignal(%1, %2, %3, %4)',
+                playRecord: 'playRecord(%1, %2)',
+                playStop: 'playStop()',
+                sleep: 'sleep(%1)',
+                echo: 'echo(%1)'
+            },
+            code: {
+                playSignal: 'playSignal',
+                playRecord: 'playRecord',
+                sleep: 'sleep',
+                playStop: 'playStop',
+                echo: 'echo'
+            },
+            description: {
+                playSignal : 'playSignal(canal, type, frequence, amplitude)\n' +
+                    'Canal : 1, 2 ou 3 (jusqu\'à 3 signaux peuvent être joués simultanément)\n' +
+                    'Type : "sinus" - onde sinusoïdale, "carré" - onde carrée, "scie"- onde en dents de scie, "bruit": bruit blanc\n' +
+                    'Frequence: en Hertz, de 100 à 8000\n' +
+                    'Amplitude : de 0 (silence) à 1 (volume maximal)',
+                playRecord: 'playRecord(url, frequence) Url : une chaîne, l\'url du son à jouer\n' +
+                    'Frequency : fréquence à utiliser pour un filtre passe bas (les fréquences plus élevées seront retirées)',
+                playStop: 'playStop()',
+                sleep: 'sleep( duree ) : Duree : durée en ms pendant laquelle le programme doit attendre, tout en continuant à jouer les sons',
+                echo: 'echo(value) : affiche la valeur'
+            },
+            startingBlockName: "Programme",
+            constantLabel: {
+                'sine': 'sinus',
+                'triangle': 'triangle',
+                'sawtooth': 'scie',
+                'square': 'carré',
+                'noise': 'bruit'
+            },
+            messages: {
+                'loading': 'Chargement du fichier',
+                'load_error': 'Une erreur s\'est produite lors du chargement du fichier.'
+            },
+            ui: {
+                'mic': 'Activer le micro',
+                'btn_files_repository': 'Ajouter des fichiers audio...',
+                'files_repository': {
+                    'caption': 'Liste des fichiers audio',
+                    'hint': 'Utilisez le numéro de fichier comme paramètre de la fonction playRecord',
+                    'add': 'Ajouter',
+                    'incompatible_browser': 'Navigateur incompatible',
+                    'confirm_overwrite': 'Overwrite files?',
+                    'file_not_found': 'File not found: ',
+                    'copy_to_clipboard': 'Copy name to clipboard'
+                }
+            }
+        }
+    }
+
+
+
+
+
+
+    function delayToRate(delay) {
+        if(delay >= 200) {
+            return 1;
+        } else if(delay >= 50) {
+            return 2;
+        } else if(delay >= 5) {
+            return 4;
+        }
+        return 0;
+    }
+
+
+    var context = quickAlgoContext(display, infos)
+    var strings = context.setLocalLanguageStrings(p5_strings)
+    var player;
+    var delay = infos.actionDelay;
+    var rate = delayToRate(delay);
+    var files;
+    var logger;
+
+    var conceptBaseUrl = (window.location.protocol == 'https' ? 'https' : 'http') + '//'
+        + 'static4.castor-informatique.fr/help/p5.html';
+
+    context.conceptList = [
+        {id: 'p5_introduction', name: 'La proglet exploSonore', url: conceptBaseUrl+'#p5_introduction'},
+        {id: 'p5_playSignal', name: 'Lancer un signal prédéfini', url: conceptBaseUrl+'#p5_playSignal'},
+        {id: 'p5_playRecord', name: 'Lancer un signal enregistré', url: conceptBaseUrl+'#p5_playRecord'},
+        {id: 'p5_playStop', name: 'Arrêter une émission sonore', url: conceptBaseUrl+'#p5_playStop'}
+    ];
+
+
+    context.reset = function(taskInfos) {
+        if(!context.display) return
+
+        if(player) {
+            player.resetChannels();
+            return;
+        }
+
+        task_files.initLevel({
+            strings: strings.ui.files_repository,
+            level: curLevel
+        });
+
+        player = new PlayerP5({
+            parent: $('#grid')[0],
+            filesRepository: task_files
+        });
+
+        logger = new Logger({
+            parent: $('#gridContainer')
+        });
+
+        if(!$('#p5_message')[0]) {
+            $('
').insertAfter($('#grid'));
+        }
+        if(!$('#p5_controls')[0]) {
+            var html =
+                '
' +
+                    '' +
+                    '' +
+                '
';
+            $('#testSelector').prepend($(html))
+            $('#p5_microphone').click(function() {
+                player.toggleMicrophone($(this).prop('checked'));
+            })
+            $('#p5_files').click(function() {
+                task_files.open();
+            })
+        }
+        player.toggleMicrophone($('#p5_microphone').prop('checked'));
+    }
+
+
+
+
+    context.setScale = function(scale) {}
+    context.updateScale = function() {}
+    context.resetDisplay = function() {}
+    context.unload = function() {}
+    context.changeDelay = function(actionDelay) {
+        delay = actionDelay;
+        rate = delayToRate(delay);
+        player && player.setRate(rate)
+    }
+    context.onExecutionEnd = function() {
+        player.resetChannels();
+    }
+
+
+    context.p5 = {
+
+        playSignal: function(channel, type, frequency, amplitude, callback) {
+            context.waitDelay(
+                callback,
+                player.initSignal(channel, type, frequency, amplitude)
+            );
+        },
+
+        playRecord: function(url, frequency, callback) {
+            var onLoadProgress = function(progress) {
+                $('#p5_message').text(strings.messages.loading);
+            }
+
+            var cb = context.runner.waitCallback(callback);
+            var onLoadEnd = function() {
+                $('#p5_message').text('');
+                cb();
+            }
+            var onLoadError = function() {
+                $('#p5_message').text('');
+                if(window.quickAlgoInterface) {
+                    window.quickAlgoInterface.displayError(strings.messages.load_error);
+                } else {
+                    $("#errors").html(strings.messages.load_error);
+                }
+            }
+            player.initRecord(url, frequency, onLoadEnd, onLoadError, onLoadProgress);
+        },
+
+
+        sleep: function(ms, callback) {
+            if(!rate) {
+                player.pause();
+                context.waitDelay(callback);
+                return;
+                //return callback();
+            }
+            var ms = Math.min(10000, parseInt(ms, 10) || 0) * (delay / 200);
+            if(!ms) {
+                context.waitDelay(callback);
+                return;
+                //return callback();
+            }
+            player.setRate(rate);
+            player.play();
+            context.runner.waitDelay(function() {
+                if(context.runner && context.runner.stepMode) {
+                    player.pause();
+                }
+                context.callCallback(callback);
+            }, undefined, ms)
+        },
+
+        playStop: function(callback) {
+            context.waitDelay(
+                callback,
+                player.resetChannels()
+            );
+        },
+
+        echo: function(msg, callback) {
+            context.waitDelay(
+                callback,
+                logger.put(msg)
+            );
+        }
+    }
+
+
+    context.customBlocks = {
+        p5: {
+            sound: [
+                { name: 'playSignal',
+                    params: ['Number', 'WaveType', 'Number', 'Number'],
+                    params_names: ['canal', 'type', 'frequency', 'amplitude']
+                },
+                { name: 'playRecord',
+                    params: ['String', 'Number'],
+                    params_names: ['url', 'frequency']
+                }
+            ],
+            control: [
+                { name: 'sleep',
+                    params: ['Number'],
+                    params_names: ['time']
+                },
+                { name: 'playStop' },
+                { name: 'echo',
+                    params: ['String'],
+                    params_names: ['msg']
+                },
+            ]
+        }
+    }
+
+
+    var typeData = {
+        'Number': { bType: 'input_value', vType: 'math_number', fName: 'NUM', defVal: 0 },
+        'String': { bType: 'input_value', vType: 'text', fName: 'TEXT', defVal: '' },
+        'WaveType': { bType: 'field_dropdown', defVal: 'sine', options: [
+            [ strings.constantLabel.sine, 'sine'],
+            [ strings.constantLabel.triangle, 'triangle'],
+            [ strings.constantLabel.sawtooth, 'sawtooth'],
+            [ strings.constantLabel.square, 'square'],
+            [ strings.constantLabel.noise, 'noise']
+        ]}
+    }
+
+    BlocksHelper.convertBlocks(context, 'p5', typeData);
+
+    return context;
+}
+
+if(window.quickAlgoLibraries) {
+   quickAlgoLibraries.register('p5', getContext);
+} else {
+   if(!window.quickAlgoLibrariesList) { window.quickAlgoLibrariesList = []; }
+   window.quickAlgoLibrariesList.push(['p5', getContext]);
+}
+
+
+window.task_files = new FilesRepository({
+    reader: 'text',
+    extensions: '.mp3'
+});
diff --git a/pemFioi/p5/p5.js b/pemFioi/p5/p5.js
new file mode 100644
index 000000000..4e99e1b24
--- /dev/null
+++ b/pemFioi/p5/p5.js
@@ -0,0 +1,74451 @@
+/*! p5.js v0.6.0 January 19, 2018 */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.p5 = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;oEach color stores the color mode and level maxes that applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when saturation() is requested.
\n
Internally we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.
\n
We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.
\n"
+            },
+            "Setting": {
+                "name": "Setting",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Color",
+                "namespace": "",
+                "file": "src/color/setting.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "constants"
+                ]
+            },
+            "Shape": {
+                "name": "Shape",
+                "submodules": {
+                    "2D Primitives": 1,
+                    "Curves": 1,
+                    "Vertex": 1,
+                    "3D Models": 1,
+                    "3D Primitives": 1
+                },
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {}
+            },
+            "2D Primitives": {
+                "name": "2D Primitives",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Shape",
+                "namespace": "",
+                "file": "src/core/2d_primitives.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "constants"
+                ]
+            },
+            "Attributes": {
+                "name": "Attributes",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Typography",
+                "namespace": "",
+                "file": "src/core/attributes.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "constants"
+                ]
+            },
+            "Constants": {
+                "name": "Constants",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "module": "Constants",
+                "file": "src/core/constants.js",
+                "line": 1
+            },
+            "Structure": {
+                "name": "Structure",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "module": "IO",
+                "file": "src/core/core.js",
+                "line": 1,
+                "requires": [
+                    "constants"
+                ]
+            },
+            "Curves": {
+                "name": "Curves",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Shape",
+                "namespace": "",
+                "file": "src/core/curves.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Environment": {
+                "name": "Environment",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "module": "Environment",
+                "file": "src/core/environment.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "constants"
+                ]
+            },
+            "DOM": {
+                "name": "DOM",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5.Element": 1
+                },
+                "fors": {
+                    "p5.Element": 1
+                },
+                "namespaces": {},
+                "module": "DOM",
+                "file": "src/core/p5.Element.js",
+                "line": 11,
+                "description": "
Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. Methods in blue are\nincluded in the core functionality, methods in brown are added\nwith the p5.dom\nlibrary.\nIt is not called directly, but p5.Element\nobjects are created by calling createCanvas, createGraphics,\nor in the p5.dom library, createDiv, createImg, createInput, etc.
\n"
+            },
+            "Rendering": {
+                "name": "Rendering",
+                "submodules": {
+                    "undefined": 1
+                },
+                "elements": {},
+                "classes": {
+                    "p5.RendererGL": 1,
+                    "p5.Graphics": 1,
+                    "p5.Renderer": 1
+                },
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "module": "Rendering",
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 438,
+                "description": "
Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5.
\n"
+            },
+            "Transform": {
+                "name": "Transform",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "module": "Transform",
+                "file": "src/core/transform.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "constants"
+                ]
+            },
+            "Vertex": {
+                "name": "Vertex",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Shape",
+                "namespace": "",
+                "file": "src/core/vertex.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "constants"
+                ]
+            },
+            "Data": {
+                "name": "Data",
+                "submodules": {
+                    "Dictionary": 1,
+                    "Array Functions": 1,
+                    "String Functions": 1
+                },
+                "elements": {},
+                "classes": {
+                    "p5.TypedDict": 1,
+                    "p5.StringDict": 1,
+                    "p5.NumberDict": 1
+                },
+                "fors": {
+                    "p5.TypedDict": 1,
+                    "p5": 1
+                },
+                "namespaces": {},
+                "file": "src/data/p5.TypedDict.js",
+                "line": 397
+            },
+            "Dictionary": {
+                "name": "Dictionary",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5.TypedDict": 1,
+                    "p5.StringDict": 1,
+                    "p5.NumberDict": 1
+                },
+                "fors": {
+                    "p5.TypedDict": 1,
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Data",
+                "namespace": "",
+                "file": "src/data/p5.TypedDict.js",
+                "line": 397,
+                "requires": [
+                    "core\n\nThis module defines the p5 methods for the p5 Dictionary classes\nthese classes StringDict and NumberDict are for storing and working\nwith key",
+                    "value pairs"
+                ],
+                "description": "
Base class for all p5.Dictionary types. More specifically\n typed Dictionary objects inherit from this
\n"
+            },
+            "Events": {
+                "name": "Events",
+                "submodules": {
+                    "Acceleration": 1,
+                    "Keyboard": 1,
+                    "Mouse": 1,
+                    "Touch": 1
+                },
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {}
+            },
+            "Acceleration": {
+                "name": "Acceleration",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Events",
+                "namespace": "",
+                "file": "src/events/acceleration.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Keyboard": {
+                "name": "Keyboard",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Events",
+                "namespace": "",
+                "file": "src/events/keyboard.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Mouse": {
+                "name": "Mouse",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Events",
+                "namespace": "",
+                "file": "src/events/mouse.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "constants"
+                ]
+            },
+            "Touch": {
+                "name": "Touch",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Events",
+                "namespace": "",
+                "file": "src/events/touch.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Image": {
+                "name": "Image",
+                "submodules": {
+                    "Pixels": 1
+                },
+                "elements": {},
+                "classes": {
+                    "p5.Image": 1
+                },
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "module": "Image",
+                "file": "src/image/p5.Image.js",
+                "line": 23,
+                "requires": [
+                    "core"
+                ],
+                "description": "
Creates a new p5.Image. A p5.Image is a canvas backed representation of an\nimage.\n

\np5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\nloadImage() function. The p5.Image class contains fields for the width and\nheight of the image, as well as an array called pixels[] that contains the\nvalues for every pixel in the image.\n

\nThe methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.\n

\nBefore using the pixels[] array, be sure to use the loadPixels() method on\nthe image to make sure that the pixel data is properly loaded.
\n"
+            },
+            "Loading & Displaying": {
+                "name": "Loading & Displaying",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Typography",
+                "namespace": "",
+                "file": "src/image/loading_displaying.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Pixels": {
+                "name": "Pixels",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Image",
+                "namespace": "",
+                "file": "src/image/pixels.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "IO": {
+                "name": "IO",
+                "submodules": {
+                    "Structure": 1,
+                    "Input": 1,
+                    "Output": 1,
+                    "Table": 1,
+                    "XML": 1,
+                    "Time & Date": 1
+                },
+                "elements": {},
+                "classes": {
+                    "p5": 1,
+                    "p5.PrintWriter": 1,
+                    "p5.Table": 1,
+                    "p5.TableRow": 1,
+                    "p5.XML": 1
+                },
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "file": "src/io/p5.XML.js",
+                "line": 11
+            },
+            "Input": {
+                "name": "Input",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "IO",
+                "namespace": "",
+                "file": "src/io/files.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Output": {
+                "name": "Output",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5": 1,
+                    "p5.PrintWriter": 1
+                },
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "IO",
+                "namespace": "",
+                "file": "src/io/files.js",
+                "line": 1102,
+                "description": "
This is the p5 instance constructor.
\n
A p5 instance holds all the properties and methods related to\na p5 sketch.  It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node.  The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload(), setup(), and/or\ndraw() properties on it for running a sketch.
\n
A p5 sketch can run in "global" or "instance" mode:\n"global"   - all properties and methods are attached to the window\n"instance" - all properties and methods are bound to this p5 object
\n"
+            },
+            "Table": {
+                "name": "Table",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5.Table": 1,
+                    "p5.TableRow": 1
+                },
+                "fors": {},
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "IO",
+                "namespace": "",
+                "file": "src/io/p5.TableRow.js",
+                "line": 11,
+                "requires": [
+                    "core"
+                ],
+                "description": "
Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.
\n"
+            },
+            "XML": {
+                "name": "XML",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5.XML": 1
+                },
+                "fors": {},
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "IO",
+                "namespace": "",
+                "file": "src/io/p5.XML.js",
+                "line": 11,
+                "requires": [
+                    "core"
+                ],
+                "description": "
XML is a representation of an XML object, able to parse XML code. Use\nloadXML() to load external XML files and create XML objects.
\n"
+            },
+            "Math": {
+                "name": "Math",
+                "submodules": {
+                    "Calculation": 1,
+                    "Noise": 1,
+                    "Random": 1,
+                    "Trigonometry": 1
+                },
+                "elements": {},
+                "classes": {
+                    "p5.Vector": 1
+                },
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "module": "Math",
+                "file": "src/math/p5.Vector.js",
+                "line": 13,
+                "requires": [
+                    "core"
+                ],
+                "description": "
A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods mag() and heading().\n

\nIn many of the p5.js examples, you will see p5.Vector used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).\n

\nSince vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n"vector" math, which is made easy by the methods inside the p5.Vector class.
\n"
+            },
+            "Calculation": {
+                "name": "Calculation",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Math",
+                "namespace": "",
+                "file": "src/math/calculation.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Noise": {
+                "name": "Noise",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Math",
+                "namespace": "",
+                "file": "src/math/noise.js",
+                "line": 14,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Random": {
+                "name": "Random",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Math",
+                "namespace": "",
+                "file": "src/math/random.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Trigonometry": {
+                "name": "Trigonometry",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Math",
+                "namespace": "",
+                "file": "src/math/trigonometry.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "polargeometry",
+                    "constants"
+                ]
+            },
+            "Typography": {
+                "name": "Typography",
+                "submodules": {
+                    "Attributes": 1,
+                    "Loading & Displaying": 1,
+                    "Font": 1
+                },
+                "elements": {},
+                "classes": {
+                    "p5.Font": 1
+                },
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "file": "src/typography/p5.Font.js",
+                "line": 21
+            },
+            "Font": {
+                "name": "Font",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5.Font": 1
+                },
+                "fors": {},
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Typography",
+                "namespace": "",
+                "file": "src/typography/p5.Font.js",
+                "line": 21,
+                "description": "
This module defines the p5.Font class and functions for\ndrawing text to the display canvas.
\n",
+                "requires": [
+                    "core",
+                    "constants"
+                ]
+            },
+            "Array Functions": {
+                "name": "Array Functions",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Data",
+                "namespace": "",
+                "file": "src/utilities/array_functions.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "String Functions": {
+                "name": "String Functions",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Data",
+                "namespace": "",
+                "file": "src/utilities/string_functions.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Time & Date": {
+                "name": "Time & Date",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "IO",
+                "namespace": "",
+                "file": "src/utilities/time_date.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Lights, Camera": {
+                "name": "Lights, Camera",
+                "submodules": {
+                    "Camera": 1,
+                    "Lights": 1,
+                    "Material": 1,
+                    "Shaders": 1
+                },
+                "elements": {},
+                "classes": {
+                    "p5.Geometry": 1,
+                    "p5.Matrix": 1,
+                    "p5.Shader": 1,
+                    "p5.Texture": 1
+                },
+                "fors": {
+                    "p5": 1
+                },
+                "namespaces": {},
+                "file": "src/webgl/p5.Texture.js",
+                "line": 13
+            },
+            "Camera": {
+                "name": "Camera",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Lights, Camera",
+                "namespace": "",
+                "file": "src/webgl/camera.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "Lights": {
+                "name": "Lights",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Lights, Camera",
+                "namespace": "",
+                "file": "src/webgl/light.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ]
+            },
+            "3D Models": {
+                "name": "3D Models",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Shape",
+                "namespace": "",
+                "file": "src/webgl/loading.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "p5.Geometry"
+                ]
+            },
+            "Material": {
+                "name": "Material",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5.Texture": 1
+                },
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Lights, Camera",
+                "namespace": "",
+                "file": "src/webgl/p5.Texture.js",
+                "line": 13,
+                "requires": [
+                    "core"
+                ],
+                "description": "
This module defines the p5.Texture class
\n"
+            },
+            "Shaders": {
+                "name": "Shaders",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5.Shader": 1
+                },
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Lights, Camera",
+                "namespace": "",
+                "file": "src/webgl/p5.Shader.js",
+                "line": 13,
+                "description": "
This module defines the p5.Shader class
\n",
+                "requires": [
+                    "core"
+                ]
+            },
+            "3D Primitives": {
+                "name": "3D Primitives",
+                "submodules": {},
+                "elements": {},
+                "classes": {},
+                "fors": {
+                    "p5": 1
+                },
+                "is_submodule": 1,
+                "namespaces": {},
+                "module": "Shape",
+                "namespace": "",
+                "file": "src/webgl/primitives.js",
+                "line": 1,
+                "requires": [
+                    "core",
+                    "p5.Geometry"
+                ]
+            },
+            "p5.dom": {
+                "name": "p5.dom",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5.dom": 1,
+                    "p5.MediaElement": 1,
+                    "p5.File": 1
+                },
+                "fors": {
+                    "p5.dom": 1,
+                    "p5.Element": 1
+                },
+                "namespaces": {},
+                "module": "p5.dom",
+                "file": "lib/addons/p5.dom.js",
+                "line": 2876,
+                "description": "
The web is much more than just canvas and p5.dom makes it easy to interact\nwith other HTML5 objects, including text, hyperlink, image, input, video,\naudio, and webcam.
\n
There is a set of creation methods, DOM manipulation methods, and\nan extended p5.Element that supports a range of HTML elements. See the\n\nbeyond the canvas tutorial for a full overview of how this addon works.
\n
Methods and properties shown in black are part of the p5.js core, items in\nblue are part of the p5.dom library. You will need to include an extra file\nin order to access the blue functions. See the\nusing a library\nsection for information on how to include this library. p5.dom comes with\np5 complete or you can download the single file\n\nhere.
\n
See tutorial: beyond the canvas\nfor more info on how to use this libary.
\n",
+                "tag": "main",
+                "itemtype": "main"
+            },
+            "p5.sound": {
+                "name": "p5.sound",
+                "submodules": {},
+                "elements": {},
+                "classes": {
+                    "p5.sound": 1,
+                    "p5.SoundFile": 1,
+                    "p5.Amplitude": 1,
+                    "p5.FFT": 1,
+                    "p5.Signal": 1,
+                    "p5.Oscillator": 1,
+                    "p5.SinOsc": 1,
+                    "p5.TriOsc": 1,
+                    "p5.SawOsc": 1,
+                    "p5.SqrOsc": 1,
+                    "p5.Env": 1,
+                    "p5.Pulse": 1,
+                    "p5.Noise": 1,
+                    "p5.AudioIn": 1,
+                    "p5.Effect": 1,
+                    "p5.Filter": 1,
+                    "p5.LowPass": 1,
+                    "p5.HighPass": 1,
+                    "p5.BandPass": 1,
+                    "p5.EQ": 1,
+                    "p5.Panner3D": 1,
+                    "p5.Delay": 1,
+                    "p5.Reverb": 1,
+                    "p5.Convolver": 1,
+                    "p5.Phrase": 1,
+                    "p5.Part": 1,
+                    "p5.Score": 1,
+                    "p5.SoundLoop": 1,
+                    "p5.Compressor": 1,
+                    "p5.SoundRecorder": 1,
+                    "p5.PeakDetect": 1,
+                    "p5.Gain": 1,
+                    "p5.AudioVoice": 1,
+                    "p5.MonoSynth": 1,
+                    "p5.PolySynth": 1,
+                    "p5.Distortion": 1
+                },
+                "fors": {
+                    "p5.sound": 1,
+                    "p5": 1
+                },
+                "namespaces": {},
+                "module": "p5.sound",
+                "file": "lib/addons/p5.sound.js",
+                "line": 12243,
+                "description": "
p5.sound extends p5 with Web Audio functionality including audio input,\nplayback, analysis and synthesis.\n

\np5.SoundFile: Load and play sound files.
\np5.Amplitude: Get the current volume of a sound.
\np5.AudioIn: Get sound from an input source, typically\n  a computer microphone.
\np5.FFT: Analyze the frequency of sound. Returns\n  results from the frequency spectrum or time domain (waveform).
\np5.Oscillator: Generate Sine,\n  Triangle, Square and Sawtooth waveforms. Base class of\n  p5.Noise and p5.Pulse.\n  
\np5.Env: An Envelope is a series\n  of fades over time. Often used to control an object's\n  output gain level as an "ADSR Envelope" (Attack, Decay,\n  Sustain, Release). Can also modulate other parameters.
\np5.Delay: A delay effect with\n  parameters for feedback, delayTime, and lowpass filter.
\np5.Filter: Filter the frequency range of a\n  sound.\n
\np5.Reverb: Add reverb to a sound by specifying\n  duration and decay. 
\np5.Convolver: Extends\np5.Reverb to simulate the sound of real\n  physical spaces through convolution.
\np5.SoundRecorder: Record sound for playback\n  / save the .wav file.\np5.Phrase, p5.Part and\np5.Score: Compose musical sequences.\n

\np5.sound is on GitHub.\nDownload the latest version\nhere.
\n",
+                "tag": "main",
+                "itemtype": "main"
+            }
+        },
+        "classes": {
+            "p5": {
+                "name": "p5",
+                "shortname": "p5",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "IO",
+                "submodule": "Output",
+                "namespace": "",
+                "file": "src/core/core.js",
+                "line": 15,
+                "description": "
This is the p5 instance constructor.
\n
A p5 instance holds all the properties and methods related to\na p5 sketch.  It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node.  The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload(), setup(), and/or\ndraw() properties on it for running a sketch.
\n
A p5 sketch can run in "global" or "instance" mode:\n"global"   - all properties and methods are attached to the window\n"instance" - all properties and methods are bound to this p5 object
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "sketch",
+                        "description": "
a closure that can set optional preload(),\n                             setup(), and/or draw() properties on the\n                             given p5 instance
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "node",
+                        "description": "
element to attach canvas to, if a\n                                     boolean is passed in use it as sync
\n",
+                        "type": "HTMLElement|Boolean",
+                        "optional": true
+                    },
+                    {
+                        "name": "sync",
+                        "description": "
start synchronously (optional)
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "a p5 instance",
+                    "type": "P5"
+                }
+            },
+            "p5.Color": {
+                "name": "p5.Color",
+                "shortname": "p5.Color",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Color",
+                "submodule": "Creating & Reading",
+                "namespace": "",
+                "file": "src/color/p5.Color.js",
+                "line": 16,
+                "description": "
Each color stores the color mode and level maxes that applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when saturation() is requested.
\n
Internally we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.
\n
We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.
\n",
+                "is_constructor": 1
+            },
+            "p5.Element": {
+                "name": "p5.Element",
+                "shortname": "p5.Element",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "DOM",
+                "submodule": "DOM",
+                "namespace": "",
+                "file": "src/core/p5.Element.js",
+                "line": 11,
+                "description": "
Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. Methods in blue are\nincluded in the core functionality, methods in brown are added\nwith the p5.dom\nlibrary.\nIt is not called directly, but p5.Element\nobjects are created by calling createCanvas, createGraphics,\nor in the p5.dom library, createDiv, createImg, createInput, etc.
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "elt",
+                        "description": "
DOM node that is wrapped
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "pInst",
+                        "description": "
pointer to p5 instance
\n",
+                        "type": "P5",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.Graphics": {
+                "name": "p5.Graphics",
+                "shortname": "p5.Graphics",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Rendering",
+                "submodule": "Rendering",
+                "namespace": "",
+                "file": "src/core/p5.Graphics.js",
+                "line": 12,
+                "description": "
Thin wrapper around a renderer, to be used for creating a\ngraphics buffer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels. The fields and methods for this class are\nextensive, but mirror the normal drawing API for p5.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Element",
+                "params": [
+                    {
+                        "name": "w",
+                        "description": "
width
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "renderer",
+                        "description": "
the renderer to use, either P2D or WEBGL
\n",
+                        "type": "Constant"
+                    },
+                    {
+                        "name": "pInst",
+                        "description": "
pointer to p5 instance
\n",
+                        "type": "P5",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.Renderer": {
+                "name": "p5.Renderer",
+                "shortname": "p5.Renderer",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Rendering",
+                "submodule": "Rendering",
+                "namespace": "",
+                "file": "src/core/p5.Renderer.js",
+                "line": 12,
+                "description": "
Main graphics and rendering context, as well as the base API\nimplementation for p5.js "core". To be used as the superclass for\nRenderer2D and Renderer3D classes, respecitvely.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Element",
+                "params": [
+                    {
+                        "name": "elt",
+                        "description": "
DOM node that is wrapped
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "pInst",
+                        "description": "
pointer to p5 instance
\n",
+                        "type": "P5",
+                        "optional": true
+                    },
+                    {
+                        "name": "isMainCanvas",
+                        "description": "
whether we're using it as main canvas
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.TypedDict": {
+                "name": "p5.TypedDict",
+                "shortname": "p5.TypedDict",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Data",
+                "submodule": "Dictionary",
+                "namespace": "",
+                "file": "src/data/p5.TypedDict.js",
+                "line": 66,
+                "description": "
Base class for all p5.Dictionary types. More specifically\n typed Dictionary objects inherit from this
\n",
+                "is_constructor": 1
+            },
+            "p5.StringDict": {
+                "name": "p5.StringDict",
+                "shortname": "p5.StringDict",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Data",
+                "submodule": "Dictionary",
+                "namespace": "",
+                "file": "src/data/p5.TypedDict.js",
+                "line": 376,
+                "description": "
A  Dictionary class for Strings.
\n",
+                "is_constructor": 1,
+                "extends": "p5.TypedDict"
+            },
+            "p5.NumberDict": {
+                "name": "p5.NumberDict",
+                "shortname": "p5.NumberDict",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Data",
+                "submodule": "Dictionary",
+                "namespace": "",
+                "file": "src/data/p5.TypedDict.js",
+                "line": 397,
+                "description": "
A simple Dictionary class for Numbers.
\n",
+                "is_constructor": 1,
+                "extends": "p5.TypedDict"
+            },
+            "p5.Image": {
+                "name": "p5.Image",
+                "shortname": "p5.Image",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Image",
+                "submodule": "Image",
+                "namespace": "",
+                "file": "src/image/p5.Image.js",
+                "line": 23,
+                "description": "
Creates a new p5.Image. A p5.Image is a canvas backed representation of an\nimage.\n

\np5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\nloadImage() function. The p5.Image class contains fields for the width and\nheight of the image, as well as an array called pixels[] that contains the\nvalues for every pixel in the image.\n

\nThe methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.\n

\nBefore using the pixels[] array, be sure to use the loadPixels() method on\nthe image to make sure that the pixel data is properly loaded.
\n",
+                "example": [
+                    "\n
\nfunction setup() {\n  var img = createImage(100, 100); // same as new p5.Image(100, 100);\n  img.loadPixels();\n  createCanvas(100, 100);\n  background(0);\n\n  // helper for writing color to array\n  function writeColor(image, x, y, red, green, blue, alpha) {\n    var index = (x + y * width) * 4;\n    image.pixels[index] = red;\n    image.pixels[index + 1] = green;\n    image.pixels[index + 2] = blue;\n    image.pixels[index + 3] = alpha;\n  }\n\n  var x, y;\n  // fill with random colors\n  for (y = 0; y < img.height; y++) {\n    for (x = 0; x < img.width; x++) {\n      var red = random(255);\n      var green = random(255);\n      var blue = random(255);\n      var alpha = 255;\n      writeColor(img, x, y, red, green, blue, alpha);\n    }\n  }\n\n  // draw a red line\n  y = 0;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 255, 0, 0, 255);\n  }\n\n  // draw a green line\n  y = img.height - 1;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 0, 255, 0, 255);\n  }\n\n  img.updatePixels();\n  image(img, 0, 0);\n}\n
"
+                ],
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "width",
+                        "description": "",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "height",
+                        "description": "",
+                        "type": "Number"
+                    }
+                ]
+            },
+            "p5.PrintWriter": {
+                "name": "p5.PrintWriter",
+                "shortname": "p5.PrintWriter",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "IO",
+                "submodule": "Output",
+                "namespace": "",
+                "file": "src/io/files.js",
+                "line": 1102,
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "filename",
+                        "description": "",
+                        "type": "String"
+                    },
+                    {
+                        "name": "extension",
+                        "description": "",
+                        "type": "String",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.Table": {
+                "name": "p5.Table",
+                "shortname": "p5.Table",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "IO",
+                "submodule": "Table",
+                "namespace": "",
+                "file": "src/io/p5.Table.js",
+                "line": 35,
+                "description": "
Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "rows",
+                        "description": "
An array of p5.TableRow objects
\n",
+                        "type": "p5.TableRow[]",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.TableRow": {
+                "name": "p5.TableRow",
+                "shortname": "p5.TableRow",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "IO",
+                "submodule": "Table",
+                "namespace": "",
+                "file": "src/io/p5.TableRow.js",
+                "line": 11,
+                "description": "
A TableRow object represents a single row of data values,\nstored in columns, from a table.
\n
A Table Row contains both an ordered array, and an unordered\nJSON object.
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "str",
+                        "description": "
optional: populate the row with a\n                            string of values, separated by the\n                            separator
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "separator",
+                        "description": "
comma separated values (csv) by default
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.XML": {
+                "name": "p5.XML",
+                "shortname": "p5.XML",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "IO",
+                "submodule": "XML",
+                "namespace": "",
+                "file": "src/io/p5.XML.js",
+                "line": 11,
+                "description": "
XML is a representation of an XML object, able to parse XML code. Use\nloadXML() to load external XML files and create XML objects.
\n",
+                "is_constructor": 1,
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var children = xml.getChildren('animal');\n\n  for (var i = 0; i < children.length; i++) {\n    var id = children[i].getNum('id');\n    var coloring = children[i].getString('species');\n    var name = children[i].getContent();\n    print(id + ', ' + coloring + ', ' + name);\n  }\n}\n\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n
"
+                ],
+                "alt": "no image displayed"
+            },
+            "p5.Vector": {
+                "name": "p5.Vector",
+                "shortname": "p5.Vector",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Math",
+                "submodule": "Math",
+                "namespace": "",
+                "file": "src/math/p5.Vector.js",
+                "line": 13,
+                "description": "
A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods mag() and heading().\n

\nIn many of the p5.js examples, you will see p5.Vector used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).\n

\nSince vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n"vector" math, which is made easy by the methods inside the p5.Vector class.
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x component of the vector
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y component of the vector
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "z",
+                        "description": "
z component of the vector
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar v1 = createVector(40, 50);\nvar v2 = createVector(40, 50);\n\nellipse(v1.x, v1.y, 50, 50);\nellipse(v2.x, v2.y, 50, 50);\nv1.add(v2);\nellipse(v1.x, v1.y, 50, 50);\n\n
"
+                ],
+                "alt": "2 white ellipses. One center-left the other bottom right and off canvas"
+            },
+            "p5.Font": {
+                "name": "p5.Font",
+                "shortname": "p5.Font",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Typography",
+                "submodule": "Font",
+                "namespace": "",
+                "file": "src/typography/p5.Font.js",
+                "line": 21,
+                "description": "
Base class for font handling
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "pInst",
+                        "description": "
pointer to p5 instance
\n",
+                        "type": "P5",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.Geometry": {
+                "name": "p5.Geometry",
+                "shortname": "p5.Geometry",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Lights, Camera",
+                "namespace": "",
+                "file": "src/webgl/p5.Geometry.js",
+                "line": 6,
+                "description": "
p5 Geometry class
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "vertData",
+                        "description": "
callback function or Object\n                    containing routine(s) for vertex data generation
\n",
+                        "type": "Function | Object"
+                    },
+                    {
+                        "name": "detailX",
+                        "description": "
number of vertices on horizontal surface
\n",
+                        "type": "Integer",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailY",
+                        "description": "
number of vertices on horizontal surface
\n",
+                        "type": "Integer",
+                        "optional": true
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to call upon object instantiation.
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.RendererGL": {
+                "name": "fill",
+                "shortname": "p5.RendererGL",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Rendering",
+                "namespace": "",
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 438,
+                "description": "
Basic fill material for geometry with a given color
\n",
+                "is_constructor": 1,
+                "extends": "p5.Renderer",
+                "todo": [
+                    "extend class to include public method for offscreen\nrendering (FBO)."
+                ],
+                "submodule": "Rendering",
+                "itemtype": "method",
+                "params": [
+                    {
+                        "name": "v1",
+                        "description": "
gray value,\nred or hue value (depending on the current color mode),\nor color Array, or CSS color string
\n",
+                        "type": "Number|Number[]|String|p5.Color"
+                    },
+                    {
+                        "name": "v2",
+                        "description": "
green or saturation value
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "v3",
+                        "description": "
blue or brightness value
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "a",
+                        "description": "
opacity
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(200, 200, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noStroke();\n  fill(100, 100, 240);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(75, 75, 75);\n}\n\n
"
+                ],
+                "alt": "black canvas with purple cube spinning"
+            },
+            "p5.Shader": {
+                "name": "p5.Shader",
+                "shortname": "p5.Shader",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Lights, Camera",
+                "submodule": "Shaders",
+                "namespace": "",
+                "file": "src/webgl/p5.Shader.js",
+                "line": 13,
+                "description": "
Shader class for WEBGL Mode
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "renderer",
+                        "description": "
an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader
\n",
+                        "type": "p5.RendererGL"
+                    },
+                    {
+                        "name": "vertSrc",
+                        "description": "
source code for the vertex shader (as a string)
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "fragSrc",
+                        "description": "
source code for the fragment shader (as a string)
\n",
+                        "type": "String"
+                    }
+                ]
+            },
+            "p5.Texture": {
+                "name": "p5.Texture",
+                "shortname": "p5.Texture",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "Lights, Camera",
+                "submodule": "Material",
+                "namespace": "",
+                "file": "src/webgl/p5.Texture.js",
+                "line": 13,
+                "description": "
Texture class for WEBGL Mode
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "renderer",
+                        "description": "
an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Texture
\n",
+                        "type": "p5.RendererGL"
+                    },
+                    {
+                        "name": "obj",
+                        "description": "
the\nobject containing the image data to store in the texture.
\n",
+                        "type": "p5.Image|p5.Graphics|p5.Element|p5.MediaElement",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.dom": {
+                "name": "p5.dom",
+                "shortname": "p5.dom",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.dom",
+                "submodule": "p5.dom",
+                "namespace": ""
+            },
+            "p5.MediaElement": {
+                "name": "p5.MediaElement",
+                "shortname": "p5.MediaElement",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.dom",
+                "submodule": "p5.dom",
+                "namespace": "",
+                "file": "lib/addons/p5.dom.js",
+                "line": 1820,
+                "description": "
Extends p5.Element to handle audio and video. In addition to the methods\nof p5.Element, it also contains methods for controlling media. It is not\ncalled directly, but p5.MediaElements are created by calling createVideo,\ncreateAudio, and createCapture.
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "elt",
+                        "description": "
DOM node that is wrapped
\n",
+                        "type": "String"
+                    }
+                ]
+            },
+            "p5.File": {
+                "name": "p5.File",
+                "shortname": "p5.File",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.dom",
+                "submodule": "p5.dom",
+                "namespace": "",
+                "file": "lib/addons/p5.dom.js",
+                "line": 2876,
+                "description": "
Base class for a file\nUsing this for createFileInput
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "file",
+                        "description": "
File that is wrapped
\n",
+                        "type": "File"
+                    }
+                ]
+            },
+            "p5.sound": {
+                "name": "p5.sound",
+                "shortname": "p5.sound",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": ""
+            },
+            "p5.SoundFile": {
+                "name": "p5.SoundFile",
+                "shortname": "p5.SoundFile",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 740,
+                "description": "
SoundFile object with a path to a file.
\n\n
The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.
\n\n
To do something with the sound as soon as it loads\npass the name of a function as the second parameter.
\n\n
Only one file path is required. However, audio file formats\n(i.e. mp3, ogg, wav and m4a/aac) are not supported by all\nweb browsers. If you want to ensure compatability, instead of a single\nfile path, you may include an Array of filepaths, and the browser will\nchoose a format that works.
",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
path to a sound file (String). Optionally,\n                             you may include multiple file formats in\n                             an array. Alternately, accepts an object\n                             from the HTML5 File API, or a p5.File.
\n",
+                        "type": "String|Array"
+                    },
+                    {
+                        "name": "successCallback",
+                        "description": "
Name of a function to call once file loads
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
Name of a function to call if file fails to\n                                    load. This function will receive an error or\n                                   XMLHttpRequest object with information\n                                   about what went wrong.
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "whileLoadingCallback",
+                        "description": "
Name of a function to call while file\n                                           is loading. That function will\n                                           receive progress of the request to\n                                           load the sound file\n                                           (between 0 and 1) as its first\n                                           parameter. This progress\n                                           does not account for the additional\n                                           time needed to decode the audio data.
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction preload() {\n  soundFormats('mp3', 'ogg');\n  mySound = loadSound('assets/doorbell.mp3');\n}\n\nfunction setup() {\n  mySound.setVolume(0.1);\n  mySound.play();\n}\n\n 
"
+                ]
+            },
+            "p5.Amplitude": {
+                "name": "p5.Amplitude",
+                "shortname": "p5.Amplitude",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 2154,
+                "description": "
Amplitude measures volume between 0.0 and 1.0.\nListens to all p5sound by default, or use setInput()\nto listen to a specific sound source. Accepts an optional\nsmoothing value, which defaults to 0.
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "smoothing",
+                        "description": "
between 0.0 and .999 to smooth\n                           amplitude readings (defaults to 0)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar sound, amplitude, cnv;\n\nfunction preload(){\n  sound = loadSound('assets/beat.mp3');\n}\nfunction setup() {\n  cnv = createCanvas(100,100);\n  amplitude = new p5.Amplitude();\n\n  // start / stop the sound when canvas is clicked\n  cnv.mouseClicked(function() {\n    if (sound.isPlaying() ){\n      sound.stop();\n    } else {\n      sound.play();\n    }\n  });\n}\nfunction draw() {\n  background(0);\n  fill(255);\n  var level = amplitude.getLevel();\n  var size = map(level, 0, 1, 0, 200);\n  ellipse(width/2, height/2, size, size);\n}\n\n
"
+                ]
+            },
+            "p5.FFT": {
+                "name": "p5.FFT",
+                "shortname": "p5.FFT",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 2426,
+                "description": "
FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n\naudio frequencies within a waveform.
\n\n
Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses: 
 • FFT.waveform() computes\namplitude values along the time domain. The array indices correspond\nto samples across a brief moment in time. Each value represents\namplitude of the waveform at that sample of time.
\n• FFT.analyze()  computes amplitude values along the\nfrequency domain. The array indices correspond to frequencies (i.e.\npitches), from the lowest to the highest that humans can hear. Each\nvalue represents amplitude at that slice of the frequency spectrum.\nUse with getEnergy() to measure amplitude at specific\nfrequencies, or within a range of frequencies. 
\n\n
FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as bins. The array is 1024 bins long by default.\nYou can change the bin array length, but it must be a power of 2\nbetween 16 and 1024 in order for the FFT algorithm to function\ncorrectly. The actual size of the FFT buffer is twice the\nnumber of bins, so given a standard sample rate, the buffer is\n2048/44100 seconds long.
",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "smoothing",
+                        "description": "
Smooth results of Freq Spectrum.\n                              0.0 < smoothing < 1.0.\n                              Defaults to 0.8.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "bins",
+                        "description": "
Length of resulting array.\n                          Must be a power of two between\n                          16 and 1024. Defaults to 1024.
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nfunction preload(){\n  sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup(){\n  var cnv = createCanvas(100,100);\n  cnv.mouseClicked(togglePlay);\n  fft = new p5.FFT();\n  sound.amp(0.2);\n}\n\nfunction draw(){\n  background(0);\n\n  var spectrum = fft.analyze();\n  noStroke();\n  fill(0,255,0); // spectrum is green\n  for (var i = 0; i< spectrum.length; i++){\n    var x = map(i, 0, spectrum.length, 0, width);\n    var h = -height + map(spectrum[i], 0, 255, height, 0);\n    rect(x, height, width / spectrum.length, h )\n  }\n\n  var waveform = fft.waveform();\n  noFill();\n  beginShape();\n  stroke(255,0,0); // waveform is red\n  strokeWeight(1);\n  for (var i = 0; i< waveform.length; i++){\n    var x = map(i, 0, waveform.length, 0, width);\n    var y = map( waveform[i], -1, 1, 0, height);\n    vertex(x,y);\n  }\n  endShape();\n\n  text('click to play/pause', 4, 10);\n}\n\n// fade sound if mouse is over canvas\nfunction togglePlay() {\n  if (sound.isPlaying()) {\n    sound.pause();\n  } else {\n    sound.loop();\n  }\n}\n
"
+                ]
+            },
+            "p5.Signal": {
+                "name": "p5.Signal",
+                "shortname": "p5.Signal",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 4828,
+                "description": "
p5.Signal is a constant audio-rate signal used by p5.Oscillator\nand p5.Envelope for modulation math.
\n\n
This is necessary because Web Audio is processed on a seprate clock.\nFor example, the p5 draw loop runs about 60 times per second. But\nthe audio clock must process samples 44100 times per second. If we\nwant to add a value to each of those samples, we can't do it in the\ndraw loop, but we can do it by adding a constant-rate audio signal.This class mostly functions behind the scenes in p5.sound, and returns\na Tone.Signal from the Tone.js library by Yotam Mann.\nIf you want to work directly with audio signals for modular\nsynthesis, check out\ntone.js.
",
+                "is_constructor": 1,
+                "return": {
+                    "description": "A Signal object from the Tone.js library",
+                    "type": "Tone.Signal"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  carrier = new p5.Oscillator('sine');\n  carrier.amp(1); // set amplitude\n  carrier.freq(220); // set frequency\n  carrier.start(); // start oscillating\n\n  modulator = new p5.Oscillator('sawtooth');\n  modulator.disconnect();\n  modulator.amp(1);\n  modulator.freq(4);\n  modulator.start();\n\n  // Modulator's default amplitude range is -1 to 1.\n  // Multiply it by -200, so the range is -200 to 200\n  // then add 220 so the range is 20 to 420\n  carrier.freq( modulator.mult(-200).add(220) );\n}\n
"
+                ]
+            },
+            "p5.Oscillator": {
+                "name": "p5.Oscillator",
+                "shortname": "p5.Oscillator",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 4974,
+                "description": "
Creates a signal that oscillates between -1.0 and 1.0.\nBy default, the oscillation takes the form of a sinusoidal\nshape ('sine'). Additional types include 'triangle',\n'sawtooth' and 'square'. The frequency defaults to\n440 oscillations per second (440Hz, equal to the pitch of an\n'A' note).
\n\n
Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: p5.SinOsc, p5.TriOsc, p5.SqrOsc, or p5.SawOsc.\n
",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "freq",
+                        "description": "
frequency defaults to 440Hz
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "type",
+                        "description": "
type of oscillator. Options:\n                       'sine' (default), 'triangle',\n                       'sawtooth', 'square'
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar osc;\nvar playing = false;\n\nfunction setup() {\n  backgroundColor = color(255,0,255);\n  textAlign(CENTER);\n\n  osc = new p5.Oscillator();\n  osc.setType('sine');\n  osc.freq(240);\n  osc.amp(0);\n  osc.start();\n}\n\nfunction draw() {\n  background(backgroundColor)\n  text('click to play', width/2, height/2);\n}\n\nfunction mouseClicked() {\n  if (mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0) {\n    if (!playing) {\n      // ramp amplitude to 0.5 over 0.05 seconds\n      osc.amp(0.5, 0.05);\n      playing = true;\n      backgroundColor = color(0,255,255);\n    } else {\n      // ramp amplitude to 0 over 0.5 seconds\n      osc.amp(0, 0.5);\n      playing = false;\n      backgroundColor = color(255,0,255);\n    }\n  }\n}\n 
"
+                ]
+            },
+            "p5.SinOsc": {
+                "name": "p5.SinOsc",
+                "shortname": "p5.SinOsc",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 5409,
+                "description": "
Constructor: new p5.SinOsc().\nThis creates a Sine Wave Oscillator and is\nequivalent to  new p5.Oscillator('sine')\n or creating a p5.Oscillator and then calling\nits method setType('sine').\nSee p5.Oscillator for methods.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Oscillator",
+                "params": [
+                    {
+                        "name": "freq",
+                        "description": "
Set the frequency
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.TriOsc": {
+                "name": "p5.TriOsc",
+                "shortname": "p5.TriOsc",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 5426,
+                "description": "
Constructor: new p5.TriOsc().\nThis creates a Triangle Wave Oscillator and is\nequivalent to new p5.Oscillator('triangle')\n or creating a p5.Oscillator and then calling\nits method setType('triangle').\nSee p5.Oscillator for methods.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Oscillator",
+                "params": [
+                    {
+                        "name": "freq",
+                        "description": "
Set the frequency
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.SawOsc": {
+                "name": "p5.SawOsc",
+                "shortname": "p5.SawOsc",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 5443,
+                "description": "
Constructor: new p5.SawOsc().\nThis creates a SawTooth Wave Oscillator and is\nequivalent to  new p5.Oscillator('sawtooth')\n or creating a p5.Oscillator and then calling\nits method setType('sawtooth').\nSee p5.Oscillator for methods.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Oscillator",
+                "params": [
+                    {
+                        "name": "freq",
+                        "description": "
Set the frequency
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.SqrOsc": {
+                "name": "p5.SqrOsc",
+                "shortname": "p5.SqrOsc",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 5460,
+                "description": "
Constructor: new p5.SqrOsc().\nThis creates a Square Wave Oscillator and is\nequivalent to  new p5.Oscillator('square')\n or creating a p5.Oscillator and then calling\nits method setType('square').\nSee p5.Oscillator for methods.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Oscillator",
+                "params": [
+                    {
+                        "name": "freq",
+                        "description": "
Set the frequency
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.Env": {
+                "name": "p5.Env",
+                "shortname": "p5.Env",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 5917,
+                "description": "
Envelopes are pre-defined amplitude distribution over time.\nTypically, envelopes are used to control the output volume\nof an object, a series of fades referred to as Attack, Decay,\nSustain and Release (\nADSR\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Env can\ncontrol an Oscillator's frequency like this: osc.freq(env).
\n
Use setRange to change the attack/release level.\nUse setADSR to change attackTime, decayTime, sustainPercent and releaseTime.
\n
Use the play method to play the entire envelope,\nthe ramp method for a pingable trigger,\nor triggerAttack/\ntriggerRelease to trigger noteOn/noteOff.
",
+                "is_constructor": 1,
+                "example": [
+                    "\n
\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.2;\nvar susPercent = 0.2;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n  var cnv = createCanvas(100, 100);\n\n  textAlign(CENTER);\n  text('click to play', width/2, height/2);\n\n  env = new p5.Env();\n  env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n  env.setRange(attackLevel, releaseLevel);\n\n  triOsc = new p5.Oscillator('triangle');\n  triOsc.amp(env);\n  triOsc.start();\n  triOsc.freq(220);\n\n  cnv.mousePressed(playEnv);\n}\n\nfunction playEnv(){\n  env.play();\n}\n
"
+                ]
+            },
+            "p5.Pulse": {
+                "name": "p5.Pulse",
+                "shortname": "p5.Pulse",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 6709,
+                "description": "
Creates a Pulse object, an oscillator that implements\nPulse Width Modulation.\nThe pulse is created with two oscillators.\nAccepts a parameter for frequency, and to set the\nwidth between the pulses. See \np5.Oscillator for a full list of methods.
\n",
+                "extends": "p5.Oscillator",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "freq",
+                        "description": "
Frequency in oscillations per second (Hz)
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "w",
+                        "description": "
Width between the pulses (0 to 1.0,\n                       defaults to 0)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar pulse;\nfunction setup() {\n  background(0);\n\n  // Create and start the pulse wave oscillator\n  pulse = new p5.Pulse();\n  pulse.amp(0.5);\n  pulse.freq(220);\n  pulse.start();\n}\n\nfunction draw() {\n  var w = map(mouseX, 0, width, 0, 1);\n  w = constrain(w, 0, 1);\n  pulse.width(w)\n}\n
"
+                ]
+            },
+            "p5.Noise": {
+                "name": "p5.Noise",
+                "shortname": "p5.Noise",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 6886,
+                "description": "
Noise is a type of oscillator that generates a buffer with random values.
\n",
+                "extends": "p5.Oscillator",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "type",
+                        "description": "
Type of noise can be 'white' (default),\n                     'brown' or 'pink'.
\n",
+                        "type": "String"
+                    }
+                ]
+            },
+            "p5.AudioIn": {
+                "name": "p5.AudioIn",
+                "shortname": "p5.AudioIn",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 7075,
+                "description": "
Get audio from an input, i.e. your computer's microphone.
\n\n
Turn the mic on/off with the start() and stop() methods. When the mic\nis on, its volume can be measured with getLevel or by connecting an\nFFT object.
\n\n
If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.
\n\n
Note: This uses the getUserMedia/\nStream API, which is not supported by certain browsers. Access in Chrome browser\nis limited to localhost and https, but access over http may be limited.
",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "errorCallback",
+                        "description": "
A function to call if there is an error\n                                  accessing the AudioIn. For example,\n                                  Safari and iOS devices do not\n                                  currently allow microphone access.
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar mic;\nfunction setup(){\n  mic = new p5.AudioIn()\n  mic.start();\n}\nfunction draw(){\n  background(0);\n  micLevel = mic.getLevel();\n  ellipse(width/2, constrain(height-micLevel*height*5, 0, height), 10, 10);\n}\n
"
+                ]
+            },
+            "p5.Effect": {
+                "name": "p5.Effect",
+                "shortname": "p5.Effect",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 7970,
+                "description": "
Effect is a base class for audio effects in p5. 
\nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.
\n
This class is extended by p5.Distortion,\np5.Compressor,\np5.Delay,\np5.Filter,\np5.Reverb.
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "ac",
+                        "description": "
Reference to the audio context of the p5 object
\n",
+                        "type": "Object",
+                        "optional": true
+                    },
+                    {
+                        "name": "input",
+                        "description": "
Gain Node effect wrapper
\n",
+                        "type": "AudioNode",
+                        "optional": true
+                    },
+                    {
+                        "name": "output",
+                        "description": "
Gain Node effect wrapper
\n",
+                        "type": "AudioNode",
+                        "optional": true
+                    },
+                    {
+                        "name": "_drywet",
+                        "description": "
Tone.JS CrossFade node (defaults to value: 1)
\n",
+                        "type": "Object",
+                        "optional": true
+                    },
+                    {
+                        "name": "wet",
+                        "description": "
Effects that extend this class should connect\n                             to the wet signal to this gain node, so that dry and wet\n                             signals are mixed properly.
\n",
+                        "type": "AudioNode",
+                        "optional": true
+                    }
+                ]
+            },
+            "p5.Filter": {
+                "name": "p5.Filter",
+                "shortname": "p5.Filter",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 8102,
+                "description": "
A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:
\n
    \n
  • p5.LowPass:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.
    • \n
  • p5.HighPass:\nThe opposite of a lowpass filter. 
    • \n
  • p5.BandPass:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.
    • \n
\n
The .res() method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.
\n
This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.
\n",
+                "extends": "p5.Effect",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "type",
+                        "description": "
'lowpass' (default), 'highpass', 'bandpass'
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar fft, noise, filter;\n\nfunction setup() {\n  fill(255, 40, 255);\n\n  filter = new p5.BandPass();\n\n  noise = new p5.Noise();\n  // disconnect unfiltered noise,\n  // and connect to filter\n  noise.disconnect();\n  noise.connect(filter);\n  noise.start();\n\n  fft = new p5.FFT();\n}\n\nfunction draw() {\n  background(30);\n\n  // set the BandPass frequency based on mouseX\n  var freq = map(mouseX, 0, width, 20, 10000);\n  filter.freq(freq);\n  // give the filter a narrow band (lower res = wider bandpass)\n  filter.res(50);\n\n  // draw filtered spectrum\n  var spectrum = fft.analyze();\n  noStroke();\n  for (var i = 0; i < spectrum.length; i++) {\n    var x = map(i, 0, spectrum.length, 0, width);\n    var h = -height + map(spectrum[i], 0, 255, height, 0);\n    rect(x, height, width/spectrum.length, h);\n  }\n\n  isMouseOverCanvas();\n}\n\nfunction isMouseOverCanvas() {\n  var mX = mouseX, mY = mouseY;\n  if (mX > 0 && mX < width && mY < height && mY > 0) {\n    noise.amp(0.5, 0.2);\n  } else {\n    noise.amp(0, 0.2);\n  }\n}\n
"
+                ]
+            },
+            "p5.LowPass": {
+                "name": "p5.LowPass",
+                "shortname": "p5.LowPass",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 8332,
+                "description": "
Constructor: new p5.LowPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('lowpass').\nSee p5.Filter for methods.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Filter"
+            },
+            "p5.HighPass": {
+                "name": "p5.HighPass",
+                "shortname": "p5.HighPass",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 8346,
+                "description": "
Constructor: new p5.HighPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('highpass').\nSee p5.Filter for methods.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Filter"
+            },
+            "p5.BandPass": {
+                "name": "p5.BandPass",
+                "shortname": "p5.BandPass",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 8360,
+                "description": "
Constructor: new p5.BandPass() Filter.\nThis is the same as creating a p5.Filter and then calling\nits method setType('bandpass').\nSee p5.Filter for methods.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Filter"
+            },
+            "p5.EQ": {
+                "name": "p5.EQ",
+                "shortname": "p5.EQ",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 8429,
+                "description": "
p5.EQ is an audio effect that performs the function of a multiband\naudio equalizer. Equalization is used to adjust the balance of\nfrequency compoenents of an audio signal. This process is commonly used\nin sound production and recording to change the waveform before it reaches\na sound output device. EQ can also be used as an audio effect to create\ninteresting distortions by filtering out parts of the spectrum. p5.EQ is\nbuilt using a chain of Web Audio Biquad Filter Nodes and can be\ninstantiated with 3 or 8 bands. Bands can be added or removed from\nthe EQ by directly modifying p5.EQ.bands (the array that stores filters).
\n
This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Effect",
+                "params": [
+                    {
+                        "name": "_eqsize",
+                        "description": "
Constructor will accept 3 or 8, defaults to 3
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "p5.EQ object",
+                    "type": "Object"
+                },
+                "example": [
+                    "\n
\nvar eq;\nvar band_names;\nvar band_index;\n\nvar soundFile, play;\n\nfunction preload() {\n  soundFormats('mp3', 'ogg');\n  soundFile = loadSound('assets/beat');\n}\n\nfunction setup() {\n  eq = new p5.EQ(3);\n  soundFile.disconnect();\n  eq.process(soundFile);\n\n  band_names = ['lows','mids','highs'];\n  band_index = 0;\n  play = false;\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(30);\n  noStroke();\n  fill(255);\n  text('click to kill',50,25);\n\n  fill(255, 40, 255);\n  textSize(26);\n  text(band_names[band_index],50,55);\n\n  fill(255);\n  textSize(9);\n  text('space = play/pause',50,80);\n}\n\n//If mouse is over canvas, cycle to the next band and kill the frequency\nfunction mouseClicked() {\n  for (var i = 0; i < eq.bands.length; i++) {\n    eq.bands[i].gain(0);\n  }\n  eq.bands[band_index].gain(-40);\n  if (mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0) {\n    band_index === 2 ? band_index = 0 : band_index++;\n  }\n}\n\n//use space bar to trigger play / pause\nfunction keyPressed() {\n  if (key===' ') {\n    play = !play\n    play ? soundFile.loop() : soundFile.pause();\n  }\n}\n
"
+                ]
+            },
+            "p5.Panner3D": {
+                "name": "p5.Panner3D",
+                "shortname": "p5.Panner3D",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 8619,
+                "description": "
Panner3D is based on the \nWeb Audio Spatial Panner Node.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.
\n
The position is relative to an \nAudio Context Listener, which can be accessed\nby p5.soundOut.audiocontext.listener
\n",
+                "is_constructor": 1
+            },
+            "p5.Delay": {
+                "name": "p5.Delay",
+                "shortname": "p5.Delay",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 9068,
+                "description": "
Delay is an echo effect. It processes an existing sound source,\nand outputs a delayed version of that sound. The p5.Delay can\nproduce different effects depending on the delayTime, feedback,\nfilter, and type. In the example below, a feedback of 0.5 (the\ndefaul value) will produce a looping delay that decreases in\nvolume by 50% each repeat. A filter will cut out the high\nfrequencies so that the delay does not sound as piercing as the\noriginal source.
\n
This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.
\n",
+                "extends": "p5.Effect",
+                "is_constructor": 1,
+                "example": [
+                    "\n
\nvar noise, env, delay;\n\nfunction setup() {\n  background(0);\n  noStroke();\n  fill(255);\n  textAlign(CENTER);\n  text('click to play', width/2, height/2);\n\n  noise = new p5.Noise('brown');\n  noise.amp(0);\n  noise.start();\n\n  delay = new p5.Delay();\n\n  // delay.process() accepts 4 parameters:\n  // source, delayTime, feedback, filter frequency\n  // play with these numbers!!\n  delay.process(noise, .12, .7, 2300);\n\n  // play the noise with an envelope,\n  // a series of fades ( time / value pairs )\n  env = new p5.Env(.01, 0.2, .2, .1);\n}\n\n// mouseClick triggers envelope\nfunction mouseClicked() {\n  // is mouse over canvas?\n  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n    env.play(noise);\n  }\n}\n
"
+                ]
+            },
+            "p5.Reverb": {
+                "name": "p5.Reverb",
+                "shortname": "p5.Reverb",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 9345,
+                "description": "
Reverb adds depth to a sound through a large number of decaying\nechoes. It creates the perception that sound is occurring in a\nphysical space. The p5.Reverb has paramters for Time (how long does the\nreverb last) and decayRate (how much the sound decays with each echo)\nthat can be set with the .set() or .process() methods. The p5.Convolver\nextends p5.Reverb allowing you to recreate the sound of actual physical\nspaces through convolution.
\n
This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.
\n",
+                "extends": "p5.Effect",
+                "is_constructor": 1,
+                "example": [
+                    "\n
\nvar soundFile, reverb;\nfunction preload() {\n  soundFile = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n  reverb = new p5.Reverb();\n  soundFile.disconnect(); // so we'll only hear reverb...\n\n  // connect soundFile to reverb, process w/\n  // 3 second reverbTime, decayRate of 2%\n  reverb.process(soundFile, 3, 2);\n  soundFile.play();\n}\n
"
+                ]
+            },
+            "p5.Convolver": {
+                "name": "p5.Convolver",
+                "shortname": "p5.Convolver",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 9505,
+                "description": "
p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called \nconvolution.
\n\n
Convolution multiplies any audio input by an "impulse response"\nto simulate the dispersion of sound over time. The impulse response is\ngenerated from an audio file that you provide. One way to\ngenerate an impulse response is to pop a balloon in a reverberant space\nand record the echo. Convolution can also be used to experiment with\nsound.
\n\n
Use the method createConvolution(path) to instantiate a\np5.Convolver with a path to your impulse response audio file.
",
+                "extends": "p5.Effect",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
path to a sound file
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to call when loading succeeds
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
function to call if loading fails.\n                                   This function will receive an error or\n                                   XMLHttpRequest object with information\n                                   about what went wrong.
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar cVerb, sound;\nfunction preload() {\n  // We have both MP3 and OGG versions of all sound assets\n  soundFormats('ogg', 'mp3');\n\n  // Try replacing 'bx-spring' with other soundfiles like\n  // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n  cVerb = createConvolver('assets/bx-spring.mp3');\n\n  // Try replacing 'Damscray_DancingTiger' with\n  // 'beat', 'doorbell', lucky_dragons'\n  sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n  // disconnect from master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n\n  sound.play();\n}\n
"
+                ]
+            },
+            "p5.Phrase": {
+                "name": "p5.Phrase",
+                "shortname": "p5.Phrase",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 10057,
+                "description": "
A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.
\n\n
Phrases must be added to a p5.Part for playback, and\neach part can play multiple phrases at the same time.\nFor example, one Phrase might be a kick drum, another\ncould be a snare, and another could be the bassline.
\n\n
The first parameter is a name so that the phrase can be\nmodified or deleted later. The callback is a a function that\nthis phrase will call at every step—for example it might be\ncalled playNote(value){}. The array determines\nwhich value is passed into the callback at each step of the\nphrase. It can be numbers, an object with multiple numbers,\nor a zero (0) indicates a rest so the callback won't be called).
",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
Name so that you can access the Phrase.
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
The name of a function that this phrase\n                           will call. Typically it will play a sound,\n                           and accept two parameters: a time at which\n                           to play the sound (in seconds from now),\n                           and a value from the sequence array. The\n                           time should be passed into the play() or\n                           start() method to ensure precision.
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "sequence",
+                        "description": "
Array of values to pass into the callback\n                          at each step of the phrase.
\n",
+                        "type": "Array"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar mySound, myPhrase, myPart;\nvar pattern = [1,0,0,2,0,2,0,0];\nvar msg = 'click to play';\n\nfunction preload() {\n  mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n  noStroke();\n  fill(255);\n  textAlign(CENTER);\n  masterVolume(0.1);\n\n  myPhrase = new p5.Phrase('bbox', makeSound, pattern);\n  myPart = new p5.Part();\n  myPart.addPhrase(myPhrase);\n  myPart.setBPM(60);\n}\n\nfunction draw() {\n  background(0);\n  text(msg, width/2, height/2);\n}\n\nfunction makeSound(time, playbackRate) {\n  mySound.rate(playbackRate);\n  mySound.play(time);\n}\n\nfunction mouseClicked() {\n  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n    myPart.start();\n    msg = 'playing pattern';\n  }\n}\n\n
"
+                ]
+            },
+            "p5.Part": {
+                "name": "p5.Part",
+                "shortname": "p5.Part",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 10142,
+                "description": "
A p5.Part plays back one or more p5.Phrases. Instantiate a part\nwith steps and tatums. By default, each step represents 1/16th note.
\n\n
See p5.Phrase for more about musical timing.
",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "steps",
+                        "description": "
Steps in the part
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "tatums",
+                        "description": "
Divisions of a beat (default is 1/16, a quarter note)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar box, drum, myPart;\nvar boxPat = [1,0,0,2,0,2,0,0];\nvar drumPat = [0,1,1,0,2,0,1,0];\nvar msg = 'click to play';\n\nfunction preload() {\n  box = loadSound('assets/beatbox.mp3');\n  drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n  noStroke();\n  fill(255);\n  textAlign(CENTER);\n  masterVolume(0.1);\n\n  var boxPhrase = new p5.Phrase('box', playBox, boxPat);\n  var drumPhrase = new p5.Phrase('drum', playDrum, drumPat);\n  myPart = new p5.Part();\n  myPart.addPhrase(boxPhrase);\n  myPart.addPhrase(drumPhrase);\n  myPart.setBPM(60);\n  masterVolume(0.1);\n}\n\nfunction draw() {\n  background(0);\n  text(msg, width/2, height/2);\n}\n\nfunction playBox(time, playbackRate) {\n  box.rate(playbackRate);\n  box.play(time);\n}\n\nfunction playDrum(time, playbackRate) {\n  drum.rate(playbackRate);\n  drum.play(time);\n}\n\nfunction mouseClicked() {\n  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n    myPart.start();\n    msg = 'playing part';\n  }\n}\n
"
+                ]
+            },
+            "p5.Score": {
+                "name": "p5.Score",
+                "shortname": "p5.Score",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 10396,
+                "description": "
A Score consists of a series of Parts. The parts will\nbe played back in order. For example, you could have an\nA part, a B part, and a C part, and play them back in this order\nnew p5.Score(a, a, b, a, c)
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "parts",
+                        "description": "
One or multiple parts, to be played in sequence.
\n",
+                        "type": "p5.Part",
+                        "optional": true,
+                        "multiple": true
+                    }
+                ]
+            },
+            "p5.SoundLoop": {
+                "name": "p5.SoundLoop",
+                "shortname": "p5.SoundLoop",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 10527,
+                "description": "
SoundLoop
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "callback",
+                        "description": "
this function will be called on each iteration of theloop
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "interval",
+                        "description": "
amount of time or beats for each iteration of the loop\n                                      defaults to 1
\n",
+                        "type": "Number|String",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar click;\nvar looper1;\n\nfunction preload() {\n  click = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n  //the looper's callback is passed the timeFromNow\n  //this value should be used as a reference point from\n  //which to schedule sounds\n  looper1 = new p5.SoundLoop(function(timeFromNow){\n    click.play(timeFromNow);\n    background(255 * (looper1.iterations % 2));\n    }, 2);\n\n  //stop after 10 iteratios;\n  looper1.maxIterations = 10;\n  //start the loop\n  looper1.start();\n}\n
"
+                ]
+            },
+            "p5.Compressor": {
+                "name": "p5.Compressor",
+                "shortname": "p5.Compressor",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 10786,
+                "description": "
Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the master output.
\n
This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.
\n",
+                "is_constructor": 1,
+                "extends": "p5.Effect"
+            },
+            "p5.SoundRecorder": {
+                "name": "p5.SoundRecorder",
+                "shortname": "p5.SoundRecorder",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 10994,
+                "description": "
Record sounds for playback and/or to save as a .wav file.\nThe p5.SoundRecorder records all sound output from your sketch,\nor can be assigned a specific source with setInput().
\n
The record() method accepts a p5.SoundFile as a parameter.\nWhen playback is stopped (either after the given amount of time,\nor with the stop() method), the p5.SoundRecorder will send its\nrecording to that p5.SoundFile for playback.
",
+                "is_constructor": 1,
+                "example": [
+                    "\n
\nvar mic, recorder, soundFile;\nvar state = 0;\n\nfunction setup() {\n  background(200);\n  // create an audio in\n  mic = new p5.AudioIn();\n\n  // prompts user to enable their browser mic\n  mic.start();\n\n  // create a sound recorder\n  recorder = new p5.SoundRecorder();\n\n  // connect the mic to the recorder\n  recorder.setInput(mic);\n\n  // this sound file will be used to\n  // playback & save the recording\n  soundFile = new p5.SoundFile();\n\n  text('keyPress to record', 20, 20);\n}\n\nfunction keyPressed() {\n  // make sure user enabled the mic\n  if (state === 0 && mic.enabled) {\n\n    // record to our p5.SoundFile\n    recorder.record(soundFile);\n\n    background(255,0,0);\n    text('Recording!', 20, 20);\n    state++;\n  }\n  else if (state === 1) {\n    background(0,255,0);\n\n    // stop recorder and\n    // send result to soundFile\n    recorder.stop();\n\n    text('Stopped', 20, 20);\n    state++;\n  }\n\n  else if (state === 2) {\n    soundFile.play(); // play the result!\n    save(soundFile, 'mySound.wav');\n    state++;\n  }\n}\n
"
+                ]
+            },
+            "p5.PeakDetect": {
+                "name": "p5.PeakDetect",
+                "shortname": "p5.PeakDetect",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 11283,
+                "description": "
PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n
\n
\nTo use p5.PeakDetect, call update in the draw loop\nand pass in a p5.FFT object.\n
\n
\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between freq1 and freq2.\n
\n\n
threshold is the threshold for detecting a peak,\nscaled between 0 and 1. It is logarithmic, so 0.1 is half as loud\nas 1.0.
\n\n
\nThe update method is meant to be run in the draw loop, and\nframes determines how many loops must pass before\nanother peak can be detected.\nFor example, if the frameRate() = 60, you could detect the beat of a\n120 beat-per-minute song with this equation:\n framesPerPeak = 60 / (estimatedBPM / 60 );\n
\n\n
\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by a\nhref="http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/"\ntarget="_blank"Felix Turner.\n
",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "freq1",
+                        "description": "
lowFrequency - defaults to 20Hz
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "freq2",
+                        "description": "
highFrequency - defaults to 20000 Hz
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "threshold",
+                        "description": "
Threshold for detecting a beat between 0 and 1\n                          scaled logarithmically where 0.1 is 1/2 the loudness\n                          of 1.0. Defaults to 0.35.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "framesPerPeak",
+                        "description": "
Defaults to 20.
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 10;\n\nfunction setup() {\n  background(0);\n  noStroke();\n  fill(255);\n  textAlign(CENTER);\n\n  soundFile = loadSound('assets/beat.mp3');\n\n  // p5.PeakDetect requires a p5.FFT\n  fft = new p5.FFT();\n  peakDetect = new p5.PeakDetect();\n\n}\n\nfunction draw() {\n  background(0);\n  text('click to play/pause', width/2, height/2);\n\n  // peakDetect accepts an fft post-analysis\n  fft.analyze();\n  peakDetect.update(fft);\n\n  if ( peakDetect.isDetected ) {\n    ellipseWidth = 50;\n  } else {\n    ellipseWidth *= 0.95;\n  }\n\n  ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// toggle play/stop when canvas is clicked\nfunction mouseClicked() {\n  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n    if (soundFile.isPlaying() ) {\n      soundFile.stop();\n    } else {\n      soundFile.play();\n    }\n  }\n}\n
"
+                ]
+            },
+            "p5.Gain": {
+                "name": "p5.Gain",
+                "shortname": "p5.Gain",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 11503,
+                "description": "
A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.
\n",
+                "is_constructor": 1,
+                "example": [
+                    "\n
\n\n // load two soundfile and crossfade beetween them\n var sound1,sound2;\n var gain1, gain2, gain3;\n\n function preload(){\n soundFormats('ogg', 'mp3');\n sound1 = loadSound('../_files/Damscray_01');\n sound2 = loadSound('../_files/beat.mp3');\n }\n\n function setup() {\n createCanvas(400,200);\n\n // create a 'master' gain to which we will connect both soundfiles\n gain3 = new p5.Gain();\n gain3.connect();\n\n // setup first sound for playing\n sound1.rate(1);\n sound1.loop();\n sound1.disconnect(); // diconnect from p5 output\n\n gain1 = new p5.Gain(); // setup a gain node\n gain1.setInput(sound1); // connect the first sound to its input\n gain1.connect(gain3); // connect its output to the 'master'\n\n sound2.rate(1);\n sound2.disconnect();\n sound2.loop();\n\n gain2 = new p5.Gain();\n gain2.setInput(sound2);\n gain2.connect(gain3);\n\n }\n\n function draw(){\n background(180);\n\n // calculate the horizontal distance beetween the mouse and the right of the screen\n var d = dist(mouseX,0,width,0);\n\n // map the horizontal position of the mouse to values useable for volume control of sound1\n var vol1 = map(mouseX,0,width,0,1);\n var vol2 = 1-vol1; // when sound1 is loud, sound2 is quiet and vice versa\n\n gain1.amp(vol1,0.5,0);\n gain2.amp(vol2,0.5,0);\n\n // map the vertical position of the mouse to values useable for 'master volume control'\n var vol3 = map(mouseY,0,height,0,1);\n gain3.amp(vol3,0.5,0);\n }\n
\n"
+                ]
+            },
+            "p5.AudioVoice": {
+                "name": "p5.AudioVoice",
+                "shortname": "p5.AudioVoice",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 11638,
+                "description": "
Base class for monophonic synthesizers. Any extensions of this class\nshould follow the API and implement the methods below in order to\nremain compatible with p5.PolySynth();
\n",
+                "is_constructor": 1
+            },
+            "p5.MonoSynth": {
+                "name": "p5.MonoSynth",
+                "shortname": "p5.MonoSynth",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 11711,
+                "description": "
An MonoSynth is used as a single voice for sound synthesis.\nThis is a class to be used in conjonction with the PolySynth\nclass. Custom synthetisers should be built inheriting from\nthis class.
\n",
+                "is_constructor": 1,
+                "example": [
+                    "\n
\nvar monosynth;\nvar x;\n\nfunction setup() {\n  monosynth = new p5.MonoSynth();\n  monosynth.loadPreset('simpleBass');\n  monosynth.play(45,1,x=0,1);\n  monosynth.play(49,1,x+=1,0.25);\n  monosynth.play(50,1,x+=0.25,0.25);\n  monosynth.play(49,1,x+=0.5,0.25);\n  monosynth.play(50,1,x+=0.25,0.25);\n}\n
"
+                ]
+            },
+            "p5.PolySynth": {
+                "name": "p5.PolySynth",
+                "shortname": "p5.PolySynth",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 11943,
+                "description": "
An AudioVoice is used as a single voice for sound synthesis.\nThe PolySynth class holds an array of AudioVoice, and deals\nwith voices allocations, with setting notes to be played, and\nparameters to be set.
\n",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "synthVoice",
+                        "description": "
A monophonic synth voice inheriting\n                               the AudioVoice class. Defaults to p5.MonoSynth
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "polyValue",
+                        "description": "
Number of voices, defaults to 8;
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar polysynth;\nfunction setup() {\n  polysynth = new p5.PolySynth();\n  polysynth.play(53,1,0,3);\n  polysynth.play(60,1,0,2.9);\n  polysynth.play(69,1,0,3);\n  polysynth.play(71,1,0,3);\n  polysynth.play(74,1,0,3);\n}\n
\n"
+                ]
+            },
+            "p5.Distortion": {
+                "name": "p5.Distortion",
+                "shortname": "p5.Distortion",
+                "classitems": [],
+                "plugins": [],
+                "extensions": [],
+                "plugin_for": [],
+                "extension_for": [],
+                "module": "p5.sound",
+                "submodule": "p5.sound",
+                "namespace": "",
+                "file": "lib/addons/p5.sound.js",
+                "line": 12243,
+                "description": "
A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\nKevin Ennis
\n
This class extends p5.Effect.\nMethods amp(), chain(),\ndrywet(), connect(), and\ndisconnect() are available.
\n",
+                "extends": "p5.Effect",
+                "is_constructor": 1,
+                "params": [
+                    {
+                        "name": "amount",
+                        "description": "
Unbounded distortion amount.\n                               Normal values range from 0-1.
\n",
+                        "type": "Number",
+                        "optional": true,
+                        "optdefault": "0.25"
+                    },
+                    {
+                        "name": "oversample",
+                        "description": "
'none', '2x', or '4x'.
\n",
+                        "type": "String",
+                        "optional": true,
+                        "optdefault": "'none'"
+                    }
+                ]
+            }
+        },
+        "elements": {},
+        "classitems": [
+            {
+                "file": "src/color/color_conversion.js",
+                "line": 10,
+                "description": "
Conversions adapted from http://www.easyrgb.com/math.html.
\n
In these functions, hue is always in the range [0,1); all other components\nare in the range [0,1]. 'Brightness' and 'value' are used interchangeably.
\n",
+                "class": "p5",
+                "module": "Conversion",
+                "submodule": "Color Conversion"
+            },
+            {
+                "file": "src/color/color_conversion.js",
+                "line": 20,
+                "description": "
Convert an HSBA array to HSLA.
\n",
+                "class": "p5",
+                "module": "Conversion",
+                "submodule": "Color Conversion"
+            },
+            {
+                "file": "src/color/color_conversion.js",
+                "line": 46,
+                "description": "
Convert an HSBA array to RGBA.
\n",
+                "class": "p5",
+                "module": "Conversion",
+                "submodule": "Color Conversion"
+            },
+            {
+                "file": "src/color/color_conversion.js",
+                "line": 101,
+                "description": "
Convert an HSLA array to HSBA.
\n",
+                "class": "p5",
+                "module": "Conversion",
+                "submodule": "Color Conversion"
+            },
+            {
+                "file": "src/color/color_conversion.js",
+                "line": 124,
+                "description": "
Convert an HSLA array to RGBA.
\n
We need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.
\n",
+                "class": "p5",
+                "module": "Conversion",
+                "submodule": "Color Conversion"
+            },
+            {
+                "file": "src/color/color_conversion.js",
+                "line": 188,
+                "description": "
Convert an RGBA array to HSBA.
\n",
+                "class": "p5",
+                "module": "Conversion",
+                "submodule": "Color Conversion"
+            },
+            {
+                "file": "src/color/color_conversion.js",
+                "line": 227,
+                "description": "
Convert an RGBA array to HSLA.
\n",
+                "class": "p5",
+                "module": "Conversion",
+                "submodule": "Color Conversion"
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 16,
+                "description": "
Extracts the alpha value from a color or pixel array.
\n",
+                "itemtype": "method",
+                "name": "alpha",
+                "params": [
+                    {
+                        "name": "color",
+                        "description": "
p5.Color object, color components,\n                                        or CSS color
\n",
+                        "type": "p5.Color|Number[]|String"
+                    }
+                ],
+                "return": {
+                    "description": "the alpha value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nnoStroke();\nvar c = color(0, 126, 255, 102);\nfill(c);\nrect(15, 15, 35, 70);\nvar value = alpha(c); // Sets 'value' to 102\nfill(value);\nrect(50, 15, 35, 70);\n\n
"
+                ],
+                "alt": "Left half of canvas light blue and right half light charcoal grey.\nLeft half of canvas light purple and right half a royal blue.\nLeft half of canvas salmon pink and the right half white.\nYellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left canvas, black ellipse in bottom right,both 80x80.\nBright fuschia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and light green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.\nblue rect on left and green on right, both with black outlines & 35x60.\nsalmon pink rect on left and black on right, both 35x60.\n4 rects, tan, brown, brownish purple and purple, with white outlines & 20x60.\nlight pastel green rect on left and dark grey rect on right, both 35x60.\nyellow rect on left and red rect on right, both with black outlines & 35x60.\ngrey canvas\ndeep pink rect on left and grey rect on right, both 35x60.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 61,
+                "description": "
Extracts the blue value from a color or pixel array.
\n",
+                "itemtype": "method",
+                "name": "blue",
+                "params": [
+                    {
+                        "name": "color",
+                        "description": "
p5.Color object, color components,\n                                        or CSS color
\n",
+                        "type": "p5.Color|Number[]|String"
+                    }
+                ],
+                "return": {
+                    "description": "the blue value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar c = color(175, 100, 220); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nvar blueValue = blue(c); // Get blue in 'c'\nprint(blueValue); // Prints \"220.0\"\nfill(0, 0, blueValue); // Use 'blueValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n\n
"
+                ],
+                "alt": "Left half of canvas light purple and right half a royal blue.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 91,
+                "description": "
Extracts the HSB brightness value from a color or pixel array.
\n",
+                "itemtype": "method",
+                "name": "brightness",
+                "params": [
+                    {
+                        "name": "color",
+                        "description": "
p5.Color object, color components,\n                                        or CSS color
\n",
+                        "type": "p5.Color|Number[]|String"
+                    }
+                ],
+                "return": {
+                    "description": "the brightness value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nnoStroke();\ncolorMode(HSB, 255);\nvar c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nvar value = brightness(c); // Sets 'value' to 255\nfill(value);\nrect(50, 20, 35, 60);\n\n
"
+                ],
+                "alt": "Left half of canvas salmon pink and the right half white.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 121,
+                "description": "
Creates colors for storing in variables of the color datatype. The\nparameters are interpreted as RGB or HSB values depending on the\ncurrent colorMode(). The default mode is RGB values from 0 to 255\nand, therefore, the function call color(255, 204, 0) will return a\nbright yellow color.\n

\nNote that if only one value is provided to color(), it will be interpreted\nas a grayscale value. Add a second value, and it will be used for alpha\ntransparency. When three values are specified, they are interpreted as\neither RGB or HSB values. Adding a fourth value applies alpha\ntransparency.\n

\nIf a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.
\n",
+                "itemtype": "method",
+                "name": "color",
+                "return": {
+                    "description": "resulting color",
+                    "type": "p5.Color"
+                },
+                "example": [
+                    "\n
\n\nvar c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nnoStroke(); // Don't draw a stroke around shapes\nrect(30, 20, 55, 55); // Draw rectangle\n\n
\n\n
\n\nvar c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nnoStroke(); // Don't draw a stroke around shapes\nellipse(25, 25, 80, 80); // Draw left circle\n\n// Using only one value with color()\n// generates a grayscale value.\nc = color(65); // Update 'c' with grayscale value\nfill(c); // Use updated 'c' as fill color\nellipse(75, 75, 80, 80); // Draw right circle\n\n
\n\n
\n\n// Named SVG & CSS colors may be used,\nvar c = color('magenta');\nfill(c); // Use 'c' as fill color\nnoStroke(); // Don't draw a stroke around shapes\nrect(20, 20, 60, 60); // Draw rectangle\n\n
\n\n
\n\n// as can hex color codes:\nnoStroke(); // Don't draw a stroke around shapes\nvar c = color('#0f0');\nfill(c); // Use 'c' as fill color\nrect(0, 10, 45, 80); // Draw rectangle\n\nc = color('#00ff00');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw rectangle\n\n
\n\n
\n\n// RGB and RGBA color strings are also supported:\n// these all set to the same color (solid blue)\nvar c;\nnoStroke(); // Don't draw a stroke around shapes\nc = color('rgb(0,0,255)');\nfill(c); // Use 'c' as fill color\nrect(10, 10, 35, 35); // Draw rectangle\n\nc = color('rgb(0%, 0%, 100%)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 35, 35); // Draw rectangle\n\nc = color('rgba(0, 0, 255, 1)');\nfill(c); // Use updated 'c' as fill color\nrect(10, 55, 35, 35); // Draw rectangle\n\nc = color('rgba(0%, 0%, 100%, 1)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 55, 35, 35); // Draw rectangle\n\n
\n\n
\n\n// HSL color is also supported and can be specified\n// by value\nvar c;\nnoStroke(); // Don't draw a stroke around shapes\nc = color('hsl(160, 100%, 50%)');\nfill(c); // Use 'c' as fill color\nrect(0, 10, 45, 80); // Draw rectangle\n\nc = color('hsla(160, 100%, 50%, 0.5)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw rectangle\n\n
\n\n
\n\n// HSB color is also supported and can be specified\n// by value\nvar c;\nnoStroke(); // Don't draw a stroke around shapes\nc = color('hsb(160, 100%, 50%)');\nfill(c); // Use 'c' as fill color\nrect(0, 10, 45, 80); // Draw rectangle\n\nc = color('hsba(160, 100%, 50%, 0.5)');\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw rectangle\n\n
\n\n
\n\nvar c; // Declare color 'c'\nnoStroke(); // Don't draw a stroke around shapes\n\n// If no colorMode is specified, then the\n// default of RGB with scale of 0-255 is used.\nc = color(50, 55, 100); // Create a color for 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(0, 10, 45, 80); // Draw left rect\n\ncolorMode(HSB, 100); // Use HSB with scale of 0-100\nc = color(50, 55, 100); // Update 'c' with new color\nfill(c); // Use updated 'c' as fill color\nrect(55, 10, 45, 80); // Draw right rect\n\n
"
+                ],
+                "alt": "Yellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.\nBright fuschia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and lighter green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading",
+                "overloads": [
+                    {
+                        "line": 121,
+                        "params": [
+                            {
+                                "name": "gray",
+                                "description": "
number specifying value between white\n                                and black.
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "
alpha value relative to current color range\n                                (default is 0-255)
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "resulting color",
+                            "type": "p5.Color"
+                        }
+                    },
+                    {
+                        "line": 280,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
red or hue value relative to\n                                the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "p5.Color"
+                        }
+                    },
+                    {
+                        "line": 292,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
a color string
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "p5.Color"
+                        }
+                    },
+                    {
+                        "line": 298,
+                        "params": [
+                            {
+                                "name": "values",
+                                "description": "
an array containing the red,green,blue &\n                                and alpha components of the color
\n",
+                                "type": "Number[]"
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "p5.Color"
+                        }
+                    },
+                    {
+                        "line": 304,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "",
+                                "type": "p5.Color"
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "p5.Color"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 320,
+                "description": "
Extracts the green value from a color or pixel array.
\n",
+                "itemtype": "method",
+                "name": "green",
+                "params": [
+                    {
+                        "name": "color",
+                        "description": "
p5.Color object, color components,\n                                        or CSS color
\n",
+                        "type": "p5.Color|Number[]|String"
+                    }
+                ],
+                "return": {
+                    "description": "the green value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar c = color(20, 75, 200); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nvar greenValue = green(c); // Get green in 'c'\nprint(greenValue); // Print \"75.0\"\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n\n
"
+                ],
+                "alt": "blue rect on left and green on right, both with black outlines & 35x60.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 351,
+                "description": "
Extracts the hue value from a color or pixel array.
\n
Hue exists in both HSB and HSL. This function will return the\nHSB-normalized hue when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL-normalized hue otherwise. (The values will only be different if the\nmaximum hue setting for each system is different.)
\n",
+                "itemtype": "method",
+                "name": "hue",
+                "params": [
+                    {
+                        "name": "color",
+                        "description": "
p5.Color object, color components,\n                                        or CSS color
\n",
+                        "type": "p5.Color|Number[]|String"
+                    }
+                ],
+                "return": {
+                    "description": "the hue",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nnoStroke();\ncolorMode(HSB, 255);\nvar c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nvar value = hue(c); // Sets 'value' to \"0\"\nfill(value);\nrect(50, 20, 35, 60);\n\n
"
+                ],
+                "alt": "salmon pink rect on left and black on right, both 35x60.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 388,
+                "description": "
Blends two colors to find a third color somewhere between them. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\nabove 1 will be capped at 1. This is different from the behavior of lerp(),\nbut necessary because otherwise numbers outside the range will produce\nstrange and unexpected colors.\n

\nThe way that colours are interpolated depends on the current color mode.
\n",
+                "itemtype": "method",
+                "name": "lerpColor",
+                "params": [
+                    {
+                        "name": "c1",
+                        "description": "
interpolate from this color
\n",
+                        "type": "p5.Color"
+                    },
+                    {
+                        "name": "c2",
+                        "description": "
interpolate to this color
\n",
+                        "type": "p5.Color"
+                    },
+                    {
+                        "name": "amt",
+                        "description": "
number between 0 and 1
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "interpolated color",
+                    "type": "p5.Color"
+                },
+                "example": [
+                    "\n
\n\ncolorMode(RGB);\nstroke(255);\nbackground(51);\nvar from = color(218, 165, 32);\nvar to = color(72, 61, 139);\ncolorMode(RGB); // Try changing to HSB.\nvar interA = lerpColor(from, to, 0.33);\nvar interB = lerpColor(from, to, 0.66);\nfill(from);\nrect(10, 20, 20, 60);\nfill(interA);\nrect(30, 20, 20, 60);\nfill(interB);\nrect(50, 20, 20, 60);\nfill(to);\nrect(70, 20, 20, 60);\n\n
"
+                ],
+                "alt": "4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 485,
+                "description": "
Extracts the HSL lightness value from a color or pixel array.
\n",
+                "itemtype": "method",
+                "name": "lightness",
+                "params": [
+                    {
+                        "name": "color",
+                        "description": "
p5.Color object, color components,\n                                        or CSS color
\n",
+                        "type": "p5.Color|Number[]|String"
+                    }
+                ],
+                "return": {
+                    "description": "the lightness",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nnoStroke();\ncolorMode(HSL);\nvar c = color(156, 100, 50, 1);\nfill(c);\nrect(15, 20, 35, 60);\nvar value = lightness(c); // Sets 'value' to 50\nfill(value);\nrect(50, 20, 35, 60);\n\n
"
+                ],
+                "alt": "light pastel green rect on left and dark grey rect on right, both 35x60.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 515,
+                "description": "
Extracts the red value from a color or pixel array.
\n",
+                "itemtype": "method",
+                "name": "red",
+                "params": [
+                    {
+                        "name": "color",
+                        "description": "
p5.Color object, color components,\n                                        or CSS color
\n",
+                        "type": "p5.Color|Number[]|String"
+                    }
+                ],
+                "return": {
+                    "description": "the red value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nvar redValue = red(c); // Get red in 'c'\nprint(redValue); // Print \"255.0\"\nfill(redValue, 0, 0); // Use 'redValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n\n
\n\n
\n\ncolorMode(RGB, 255);\nvar c = color(127, 255, 0);\ncolorMode(RGB, 1);\nvar myColor = red(c);\nprint(myColor);\n\n
"
+                ],
+                "alt": "yellow rect on left and red rect on right, both with black outlines and 35x60.\ngrey canvas",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/creating_reading.js",
+                "line": 555,
+                "description": "
Extracts the saturation value from a color or pixel array.
\n
Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL saturation otherwise.
\n",
+                "itemtype": "method",
+                "name": "saturation",
+                "params": [
+                    {
+                        "name": "color",
+                        "description": "
p5.Color object, color components,\n                                        or CSS color
\n",
+                        "type": "p5.Color|Number[]|String"
+                    }
+                ],
+                "return": {
+                    "description": "the saturation value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nnoStroke();\ncolorMode(HSB, 255);\nvar c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nvar value = saturation(c); // Sets 'value' to 126\nfill(value);\nrect(50, 20, 35, 60);\n\n
"
+                ],
+                "alt": "deep pink rect on left and grey rect on right, both 35x60.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 54,
+                "itemtype": "method",
+                "name": "toString",
+                "return": {
+                    "description": "",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\nvar myColor;\nfunction setup() {\n  createCanvas(200, 200);\n  stroke(255);\n  myColor = color(100, 100, 250);\n  fill(myColor);\n}\n\nfunction draw() {\n  text(myColor.toString(), 10, 10);\n}\n\n
"
+                ],
+                "alt": "canvas with text representation of color",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 83,
+                "itemtype": "method",
+                "name": "setRed",
+                "params": [
+                    {
+                        "name": "red",
+                        "description": "
the new red value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar backgroundColor;\n\nfunction setup() {\n  backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n\n
"
+                ],
+                "alt": "canvas with gradually changing background color",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 110,
+                "itemtype": "method",
+                "name": "setGreen",
+                "params": [
+                    {
+                        "name": "green",
+                        "description": "
the new green value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar backgroundColor;\n\nfunction setup() {\n  backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n\n
"
+                ],
+                "alt": "canvas with gradually changing background color",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 137,
+                "itemtype": "method",
+                "name": "setBlue",
+                "params": [
+                    {
+                        "name": "blue",
+                        "description": "
the new blue value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar backgroundColor;\n\nfunction setup() {\n  backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n\n
"
+                ],
+                "alt": "canvas with gradually changing background color",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 164,
+                "itemtype": "method",
+                "name": "setAlpha",
+                "params": [
+                    {
+                        "name": "alpha",
+                        "description": "
the new alpha value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar squareColor;\n\nfunction setup() {\n  ellipseMode(CORNERS);\n  strokeWeight(4);\n  squareColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  background(255);\n\n  noFill();\n  stroke(0);\n  ellipse(10, 10, width - 10, height - 10);\n\n  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\n  fill(squareColor);\n  noStroke();\n  rect(13, 13, width - 26, height - 26);\n}\n\n
"
+                ],
+                "alt": "circle behind a square with gradually changing opacity",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 242,
+                "description": "
Hue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.
\n",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 273,
+                "description": "
Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.
\n",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 292,
+                "description": "
CSS named colors.
\n",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 445,
+                "description": "
These regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.
\n
Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.
\n",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 458,
+                "description": "
Full color string patterns. The capture groups are necessary.
\n",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/p5.Color.js",
+                "line": 812,
+                "description": "
For HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.
\n",
+                "class": "p5.Color",
+                "module": "Color",
+                "submodule": "Creating & Reading"
+            },
+            {
+                "file": "src/color/setting.js",
+                "line": 15,
+                "description": "
The background() function sets the color used for the background of the\np5.js canvas. The default background is light gray. This function is\ntypically used within draw() to clear the display window at the beginning\nof each frame, but it can be used inside setup() to set the background on\nthe first frame of animation or if the background need only be set once.\n

\nThe color is either specified in terms of the RGB, HSB, or HSL color\ndepending on the current colorMode. (The default color space is RGB, with\neach value in the range from 0 to 255). The alpha range by default is also 0 to 255.\n

\nIf a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.\n

\nA p5.Color object can also be provided to set the background color.\n

\nA p5.Image can also be provided to set the background iamge.
\n",
+                "itemtype": "method",
+                "name": "background",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n// Grayscale integer value\nbackground(51);\n\n
\n\n
\n\n// R, G & B integer values\nbackground(255, 204, 0);\n\n
\n\n
\n\n// H, S & B integer values\ncolorMode(HSB);\nbackground(255, 204, 100);\n\n
\n\n
\n\n// Named SVG/CSS color string\nbackground('red');\n\n
\n\n
\n\n// three-digit hexadecimal RGB notation\nbackground('#fae');\n\n
\n\n
\n\n// six-digit hexadecimal RGB notation\nbackground('#222222');\n\n
\n\n
\n\n// integer RGB notation\nbackground('rgb(0,255,0)');\n\n
\n\n
\n\n// integer RGBA notation\nbackground('rgba(0,255,0, 0.25)');\n\n
\n\n
\n\n// percentage RGB notation\nbackground('rgb(100%,0%,10%)');\n\n
\n\n
\n\n// percentage RGBA notation\nbackground('rgba(100%,0%,100%,0.5)');\n\n
\n\n
\n\n// p5 Color object\nbackground(color(0, 0, 255));\n\n
"
+                ],
+                "alt": "canvas with darkest charcoal grey background.\ncanvas with yellow background.\ncanvas with royal blue background.\ncanvas with red background.\ncanvas with pink background.\ncanvas with black background.\ncanvas with bright green background.\ncanvas with soft green background.\ncanvas with red background.\ncanvas with light purple background.\ncanvas with blue background.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Setting",
+                "overloads": [
+                    {
+                        "line": 15,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "
any value created by the color() function
\n",
+                                "type": "p5.Color"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 131,
+                        "params": [
+                            {
+                                "name": "colorstring",
+                                "description": "
color string, possible formats include: integer\n                        rgb() or rgba(), percentage rgb() or rgba(),\n                        3-digit hex, 6-digit hex
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "a",
+                                "description": "
opacity of the background relative to current\n                            color range (default is 0-255)
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 141,
+                        "params": [
+                            {
+                                "name": "gray",
+                                "description": "
specifies a value between white and black
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "a",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 148,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
red or hue value (depending on the current color\n                       mode)
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value (depending on the current\n                       color mode)
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value (depending on the current\n                       color mode)
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "a",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 160,
+                        "params": [
+                            {
+                                "name": "values",
+                                "description": "
an array containing the red,green,blue &\n                                and alpha components of the color
\n",
+                                "type": "Number[]"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 167,
+                        "params": [
+                            {
+                                "name": "image",
+                                "description": "
image created with loadImage() or createImage(),\n                            to set as background\n                            (must be same size as the sketch window)
\n",
+                                "type": "p5.Image"
+                            },
+                            {
+                                "name": "a",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/color/setting.js",
+                "line": 185,
+                "description": "
Clears the pixels within a buffer. This function only works on p5.Canvas\nobjects created with the createCanvas() function; it won't work with the\nmain display window. Unlike the main graphics context, pixels in\nadditional graphics areas created with createGraphics() can be entirely\nor partially transparent. This function clears everything to make all of\nthe pixels 100% transparent.
\n",
+                "itemtype": "method",
+                "name": "clear",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n// Clear the screen on mouse press.\nfunction setup() {\n  createCanvas(100, 100);\n}\n\nfunction draw() {\n  ellipse(mouseX, mouseY, 20, 20);\n}\n\nfunction mousePressed() {\n  clear();\n}\n\n
"
+                ],
+                "alt": "20x20 white ellipses are continually drawn at mouse x and y coordinates.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Setting"
+            },
+            {
+                "file": "src/color/setting.js",
+                "line": 223,
+                "description": "
colorMode() changes the way p5.js interprets color data. By default, the\nparameters for fill(), stroke(), background(), and color() are defined by\nvalues between 0 and 255 using the RGB color model. This is equivalent to\nsetting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB\nsystem instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You\ncan also use HSL.\n

\nNote: existing color objects remember the mode that they were created in,\nso you can change modes as you like without affecting their appearance.
\n",
+                "itemtype": "method",
+                "name": "colorMode",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nnoStroke();\ncolorMode(RGB, 100);\nfor (var i = 0; i < 100; i++) {\n  for (var j = 0; j < 100; j++) {\n    stroke(i, j, 0);\n    point(i, j);\n  }\n}\n\n
\n\n
\n\nnoStroke();\ncolorMode(HSB, 100);\nfor (var i = 0; i < 100; i++) {\n  for (var j = 0; j < 100; j++) {\n    stroke(i, j, 100);\n    point(i, j);\n  }\n}\n\n
\n\n
\n\ncolorMode(RGB, 255);\nvar c = color(127, 255, 0);\n\ncolorMode(RGB, 1);\nvar myColor = c._getRed();\ntext(myColor, 10, 10, 80, 80);\n\n
\n\n
\n\nnoFill();\ncolorMode(RGB, 255, 255, 255, 1);\nbackground(255);\n\nstrokeWeight(4);\nstroke(255, 0, 10, 0.3);\nellipse(40, 40, 50, 50);\nellipse(50, 50, 40, 40);\n\n
"
+                ],
+                "alt": "Green to red gradient from bottom L to top R. shading originates from top left.\nRainbow gradient from left to right. Brightness increasing to white at top.\nunknown image.\n50x50 ellipse at middle L & 40x40 ellipse at center. Transluscent pink outlines.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Setting",
+                "overloads": [
+                    {
+                        "line": 223,
+                        "params": [
+                            {
+                                "name": "mode",
+                                "description": "
either RGB, HSB or HSL, corresponding to\n                         Red/Green/Blue and Hue/Saturation/Brightness\n                         (or Lightness)
\n",
+                                "type": "Constant"
+                            },
+                            {
+                                "name": "max",
+                                "description": "
range for all values
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 300,
+                        "params": [
+                            {
+                                "name": "mode",
+                                "description": "",
+                                "type": "Constant"
+                            },
+                            {
+                                "name": "max1",
+                                "description": "
range for the red or hue depending on the\n                             current color mode
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "max2",
+                                "description": "
range for the green or saturation depending\n                             on the current color mode
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "max3",
+                                "description": "
range for the blue or brightness/lighntess\n                             depending on the current color mode
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "maxA",
+                                "description": "
range for the alpha
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/color/setting.js",
+                "line": 344,
+                "description": "
Sets the color used to fill shapes. For example, if you run\nfill(204, 102, 0), all subsequent shapes will be filled with orange. This\ncolor is either specified in terms of the RGB or HSB color depending on\nthe current colorMode(). (The default color space is RGB, with each value\nin the range from 0 to 255). The alpha range by default is also 0 to 255.\n

\nIf a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.\n

\nA p5 Color object can also be provided to set the fill color.
\n",
+                "itemtype": "method",
+                "name": "fill",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n// Grayscale integer value\nfill(51);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// R, G & B integer values\nfill(255, 204, 0);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// H, S & B integer values\ncolorMode(HSB);\nfill(255, 204, 100);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// Named SVG/CSS color string\nfill('red');\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// three-digit hexadecimal RGB notation\nfill('#fae');\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// six-digit hexadecimal RGB notation\nfill('#222222');\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// integer RGB notation\nfill('rgb(0,255,0)');\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// integer RGBA notation\nfill('rgba(0,255,0, 0.25)');\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// percentage RGB notation\nfill('rgb(100%,0%,10%)');\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// percentage RGBA notation\nfill('rgba(100%,0%,100%,0.5)');\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// p5 Color object\nfill(color(0, 0, 255));\nrect(20, 20, 60, 60);\n\n
"
+                ],
+                "alt": "60x60 dark charcoal grey rect with black outline in center of canvas.\n60x60 yellow rect with black outline in center of canvas.\n60x60 royal blue rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 pink rect with black outline in center of canvas.\n60x60 black rect with black outline in center of canvas.\n60x60 light green rect with black outline in center of canvas.\n60x60 soft green rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 dark fushcia rect with black outline in center of canvas.\n60x60 blue rect with black outline in center of canvas.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Setting",
+                "overloads": [
+                    {
+                        "line": 344,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
red or hue value relative to\n                                the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 469,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
a color string
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 476,
+                        "params": [
+                            {
+                                "name": "values",
+                                "description": "
an array containing the red,green,blue &\n                                and alpha components of the color
\n",
+                                "type": "Number[]"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 483,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "
the fill color
\n",
+                                "type": "p5.Color"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/color/setting.js",
+                "line": 495,
+                "description": "
Disables filling geometry. If both noStroke() and noFill() are called,\nnothing will be drawn to the screen.
\n",
+                "itemtype": "method",
+                "name": "noFill",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nrect(15, 10, 55, 55);\nnoFill();\nrect(20, 20, 60, 60);\n\n
\n\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noFill();\n  stroke(100, 100, 240);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n\n
"
+                ],
+                "alt": "white rect top middle and noFill rect center. Both 60x60 with black outlines.\nblack canvas with purple cube wireframe spinning",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Setting"
+            },
+            {
+                "file": "src/color/setting.js",
+                "line": 536,
+                "description": "
Disables drawing the stroke (outline). If both noStroke() and noFill()\nare called, nothing will be drawn to the screen.
\n",
+                "itemtype": "method",
+                "name": "noStroke",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nnoStroke();\nrect(20, 20, 60, 60);\n\n
\n\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noStroke();\n  fill(240, 150, 150);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n\n
"
+                ],
+                "alt": "60x60 white rect at center. no outline.\nblack canvas with pink cube spinning",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Setting"
+            },
+            {
+                "file": "src/color/setting.js",
+                "line": 576,
+                "description": "
Sets the color used to draw lines and borders around shapes. This color\nis either specified in terms of the RGB or HSB color depending on the\ncurrent colorMode() (the default color space is RGB, with each value in\nthe range from 0 to 255). The alpha range by default is also 0 to 255.\n

\nIf a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.\n

\nA p5 Color object can also be provided to set the stroke color.
\n",
+                "itemtype": "method",
+                "name": "stroke",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n// Grayscale integer value\nstrokeWeight(4);\nstroke(51);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// R, G & B integer values\nstroke(255, 204, 0);\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// H, S & B integer values\ncolorMode(HSB);\nstrokeWeight(4);\nstroke(255, 204, 100);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// Named SVG/CSS color string\nstroke('red');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// three-digit hexadecimal RGB notation\nstroke('#fae');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// six-digit hexadecimal RGB notation\nstroke('#222222');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// integer RGB notation\nstroke('rgb(0,255,0)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// integer RGBA notation\nstroke('rgba(0,255,0,0.25)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// percentage RGB notation\nstroke('rgb(100%,0%,10%)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// percentage RGBA notation\nstroke('rgba(100%,0%,100%,0.5)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n
\n\n
\n\n// p5 Color object\nstroke(color(0, 0, 255));\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n\n
"
+                ],
+                "alt": "60x60 white rect at center. Dark charcoal grey outline.\n60x60 white rect at center. Yellow outline.\n60x60 white rect at center. Royal blue outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Pink outline.\n60x60 white rect at center. Black outline.\n60x60 white rect at center. Bright green outline.\n60x60 white rect at center. Soft green outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Dark fushcia outline.\n60x60 white rect at center. Blue outline.",
+                "class": "p5",
+                "module": "Color",
+                "submodule": "Setting",
+                "overloads": [
+                    {
+                        "line": 576,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
red or hue value relative to\n                                the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 715,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
a color string
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 722,
+                        "params": [
+                            {
+                                "name": "values",
+                                "description": "
an array containing the red,green,blue &\n                                and alpha components of the color
\n",
+                                "type": "Number[]"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 729,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "
the stroke color
\n",
+                                "type": "p5.Color"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/core/2d_primitives.js",
+                "line": 16,
+                "description": "
Draw an arc to the screen. If called with only x, y, w, h, start, and\nstop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc\nwill be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The\norigin may be changed with the ellipseMode() function.

\nNote that drawing a full circle (ex: 0 to TWO_PI) will appear blank\nbecause 0 and TWO_PI are the same position on the unit circle. The\nbest way to handle this is by using the ellipse() function instead\nto create a closed ellipse, and to use the arc() function\nonly to draw parts of an ellipse.
\n",
+                "itemtype": "method",
+                "name": "arc",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of the arc's ellipse
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of the arc's ellipse
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "w",
+                        "description": "
width of the arc's ellipse by default
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height of the arc's ellipse by default
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "start",
+                        "description": "
angle to start the arc, specified in radians
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "stop",
+                        "description": "
angle to stop the arc, specified in radians
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "mode",
+                        "description": "
optional parameter to determine the way of drawing\n                        the arc. either CHORD, PIE or OPEN
\n",
+                        "type": "Constant",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\narc(50, 55, 50, 50, 0, HALF_PI);\nnoFill();\narc(50, 55, 60, 60, HALF_PI, PI);\narc(50, 55, 70, 70, PI, PI + QUARTER_PI);\narc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n\n
\n\n
\n\narc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n\n
\n\n
\n\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n\n
\n\n
\n\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n\n
\n\n
\n\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n\n
"
+                ],
+                "alt": "shattered outline of an ellipse with a quarter of a white circle bottom-right.\nwhite ellipse with top right quarter missing.\nwhite ellipse with black outline with top right missing.\nwhite ellipse with top right missing with black outline around shape.\nwhite ellipse with top right quarter missing with black outline around the shape.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "2D Primitives"
+            },
+            {
+                "file": "src/core/2d_primitives.js",
+                "line": 134,
+                "description": "
Draws an ellipse (oval) to the screen. An ellipse with equal width and\nheight is a circle. By default, the first two parameters set the location,\nand the third and fourth parameters set the shape's width and height. If\nno height is specified, the value of width is used for both the width and\nheight. If a negative height or width is specified, the absolute value is taken.\nThe origin may be changed with the ellipseMode() function.
\n",
+                "itemtype": "method",
+                "name": "ellipse",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nellipse(56, 46, 55, 55);\n\n
"
+                ],
+                "alt": "white ellipse with black outline in middle-right of canvas that is 55x55.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "2D Primitives",
+                "overloads": [
+                    {
+                        "line": 134,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
x-coordinate of the ellipse.
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
y-coordinate of the ellipse.
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "w",
+                                "description": "
width of the ellipse.
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "h",
+                                "description": "
height of the ellipse.
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 159,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "w",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "h",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "detailX",
+                                "description": "
number of segments in the x-direction
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "detailY",
+                                "description": "
number of segments in the y-direction
\n",
+                                "type": "Integer",
+                                "optional": true
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/core/2d_primitives.js",
+                "line": 190,
+                "description": "
Draws a line (a direct path between two points) to the screen. The version\nof line() with four parameters draws the line in 2D. To color a line, use\nthe stroke() function. A line cannot be filled, therefore the fill()\nfunction will not affect the color of a line. 2D lines are drawn with a\nwidth of one pixel by default, but this can be changed with the\nstrokeWeight() function.
\n",
+                "itemtype": "method",
+                "name": "line",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nline(30, 20, 85, 75);\n\n
\n\n
\n\nline(30, 20, 85, 20);\nstroke(126);\nline(85, 20, 85, 75);\nstroke(255);\nline(85, 75, 30, 75);\n\n
"
+                ],
+                "alt": "line 78 pixels long running from mid-top to bottom-right of canvas.\n3 lines of various stroke sizes. Form top, bottom and right sides of a square.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "2D Primitives",
+                "overloads": [
+                    {
+                        "line": 190,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "
the x-coordinate of the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "
the y-coordinate of the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "
the x-coordinate of the second point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "
the y-coordinate of the second point
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 226,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z1",
+                                "description": "
the z-coordinate of the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z2",
+                                "description": "
the z-coordinate of the second point
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/core/2d_primitives.js",
+                "line": 246,
+                "description": "
Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nvalue is the vertical value for the point. The color of the point is\ndetermined by the current stroke.
\n",
+                "itemtype": "method",
+                "name": "point",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
the x-coordinate
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
the y-coordinate
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "z",
+                        "description": "
the z-coordinate (for WEBGL mode)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n\n
"
+                ],
+                "alt": "4 points centered in the middle-right of the canvas.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "2D Primitives"
+            },
+            {
+                "file": "src/core/2d_primitives.js",
+                "line": 281,
+                "description": "
Draw a quad. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.
\n",
+                "itemtype": "method",
+                "name": "quad",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nquad(38, 31, 86, 20, 69, 63, 30, 76);\n\n
"
+                ],
+                "alt": "irregular white quadrilateral shape with black outline mid-right of canvas.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "2D Primitives",
+                "overloads": [
+                    {
+                        "line": 281,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "
the x-coordinate of the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "
the y-coordinate of the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "
the x-coordinate of the second point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "
the y-coordinate of the second point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x3",
+                                "description": "
the x-coordinate of the third point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y3",
+                                "description": "
the y-coordinate of the third point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x4",
+                                "description": "
the x-coordinate of the fourth point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y4",
+                                "description": "
the y-coordinate of the fourth point
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 309,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x3",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y3",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z3",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x4",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y4",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z4",
+                                "description": "",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/core/2d_primitives.js",
+                "line": 335,
+                "description": "
Draws a rectangle to the screen. A rectangle is a four-sided shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, however,\nmay be changed with the rectMode() function.\n

\nThe fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-right, top-left, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.
\n",
+                "itemtype": "method",
+                "name": "rect",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n// Draw a rectangle at location (30, 20) with a width and height of 55.\nrect(30, 20, 55, 55);\n\n
\n\n
\n\n// Draw a rectangle with rounded corners, each having a radius of 20.\nrect(30, 20, 55, 55, 20);\n\n
\n\n
\n\n// Draw a rectangle with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nrect(30, 20, 55, 55, 20, 15, 10, 5);\n\n
"
+                ],
+                "alt": "55x55 white rect with black outline in mid-right of canvas.\n55x55 white rect with black outline and rounded edges in mid-right of canvas.\n55x55 white rect with black outline and rounded edges of different radii.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "2D Primitives",
+                "overloads": [
+                    {
+                        "line": 335,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
x-coordinate of the rectangle.
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
y-coordinate of the rectangle.
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "w",
+                                "description": "
width of the rectangle.
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "h",
+                                "description": "
height of the rectangle.
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "tl",
+                                "description": "
optional radius of top-left corner.
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "tr",
+                                "description": "
optional radius of top-right corner.
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "br",
+                                "description": "
optional radius of bottom-right corner.
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "bl",
+                                "description": "
optional radius of bottom-left corner.
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 385,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "w",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "h",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "detailX",
+                                "description": "
number of segments in the x-direction
\n",
+                                "type": "Integer",
+                                "optional": true
+                            },
+                            {
+                                "name": "detailY",
+                                "description": "
number of segments in the y-direction
\n",
+                                "type": "Integer",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/core/2d_primitives.js",
+                "line": 406,
+                "description": "
A triangle is a plane created by connecting three points. The first two\narguments specify the first point, the middle two arguments specify the\nsecond point, and the last two arguments specify the third point.
\n",
+                "itemtype": "method",
+                "name": "triangle",
+                "params": [
+                    {
+                        "name": "x1",
+                        "description": "
x-coordinate of the first point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y1",
+                        "description": "
y-coordinate of the first point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "x2",
+                        "description": "
x-coordinate of the second point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y2",
+                        "description": "
y-coordinate of the second point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "x3",
+                        "description": "
x-coordinate of the third point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y3",
+                        "description": "
y-coordinate of the third point
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntriangle(30, 75, 58, 20, 86, 75);\n\n
"
+                ],
+                "alt": "white triangle with black outline in mid-right of canvas.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "2D Primitives"
+            },
+            {
+                "file": "src/core/attributes.js",
+                "line": 14,
+                "description": "
Modifies the location from which ellipses are drawn by changing the way\nin which parameters given to ellipse() are interpreted.\n

\nThe default mode is ellipseMode(CENTER), which interprets the first two\nparameters of ellipse() as the shape's center point, while the third and\nfourth parameters are its width and height.\n

\nellipseMode(RADIUS) also uses the first two parameters of ellipse() as\nthe shape's center point, but uses the third and fourth parameters to\nspecify half of the shapes's width and height.\n

\nellipseMode(CORNER) interprets the first two parameters of ellipse() as\nthe upper-left corner of the shape, while the third and fourth parameters\nare its width and height.\n

\nellipseMode(CORNERS) interprets the first two parameters of ellipse() as\nthe location of one corner of the ellipse's bounding box, and the third\nand fourth parameters as the location of the opposite corner.\n

\nThe parameter must be written in ALL CAPS because Javascript is a\ncase-sensitive language.
\n",
+                "itemtype": "method",
+                "name": "ellipseMode",
+                "params": [
+                    {
+                        "name": "mode",
+                        "description": "
either CENTER, RADIUS, CORNER, or CORNERS
\n",
+                        "type": "Constant"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nellipseMode(RADIUS); // Set ellipseMode to RADIUS\nfill(255); // Set fill to white\nellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode\n\nellipseMode(CENTER); // Set ellipseMode to CENTER\nfill(100); // Set fill to gray\nellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode\n\n
\n\n
\n\nellipseMode(CORNER); // Set ellipseMode is CORNER\nfill(255); // Set fill to white\nellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode\n\nellipseMode(CORNERS); // Set ellipseMode to CORNERS\nfill(100); // Set fill to gray\nellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode\n\n
"
+                ],
+                "alt": "60x60 white ellipse and 30x30 grey ellipse with black outlines at center.\n60x60 white ellipse @center and 30x30 grey ellipse top-right, black outlines.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/core/attributes.js",
+                "line": 83,
+                "description": "
Draws all geometry with jagged (aliased) edges. Note that smooth() is\nactive by default, so it is necessary to call noSmooth() to disable\nsmoothing of geometry, images, and fonts.
\n",
+                "itemtype": "method",
+                "name": "noSmooth",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n\n
"
+                ],
+                "alt": "2 pixelated 36x36 white ellipses to left & right of center, black background",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/core/attributes.js",
+                "line": 111,
+                "description": "
Modifies the location from which rectangles are drawn by changing the way\nin which parameters given to rect() are interpreted.\n

\nThe default mode is rectMode(CORNER), which interprets the first two\nparameters of rect() as the upper-left corner of the shape, while the\nthird and fourth parameters are its width and height.\n

\nrectMode(CORNERS) interprets the first two parameters of rect() as the\nlocation of one corner, and the third and fourth parameters as the\nlocation of the opposite corner.\n

\nrectMode(CENTER) interprets the first two parameters of rect() as the\nshape's center point, while the third and fourth parameters are its\nwidth and height.\n

\nrectMode(RADIUS) also uses the first two parameters of rect() as the\nshape's center point, but uses the third and fourth parameters to specify\nhalf of the shapes's width and height.\n

\nThe parameter must be written in ALL CAPS because Javascript is a\ncase-sensitive language.
\n",
+                "itemtype": "method",
+                "name": "rectMode",
+                "params": [
+                    {
+                        "name": "mode",
+                        "description": "
either CORNER, CORNERS, CENTER, or RADIUS
\n",
+                        "type": "Constant"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nrectMode(CORNER); // Default rectMode is CORNER\nfill(255); // Set fill to white\nrect(25, 25, 50, 50); // Draw white rect using CORNER mode\n\nrectMode(CORNERS); // Set rectMode to CORNERS\nfill(100); // Set fill to gray\nrect(25, 25, 50, 50); // Draw gray rect using CORNERS mode\n\n
\n\n
\n\nrectMode(RADIUS); // Set rectMode to RADIUS\nfill(255); // Set fill to white\nrect(50, 50, 30, 30); // Draw white rect using RADIUS mode\n\nrectMode(CENTER); // Set rectMode to CENTER\nfill(100); // Set fill to gray\nrect(50, 50, 30, 30); // Draw gray rect using CENTER mode\n\n
"
+                ],
+                "alt": "50x50 white rect at center and 25x25 grey rect in the top left of the other.\n50x50 white rect at center and 25x25 grey rect in the center of the other.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/core/attributes.js",
+                "line": 180,
+                "description": "
Draws all geometry with smooth (anti-aliased) edges. smooth() will also\nimprove image quality of resized images. Note that smooth() is active by\ndefault; noSmooth() can be used to disable smoothing of geometry,\nimages, and fonts.
\n",
+                "itemtype": "method",
+                "name": "smooth",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n\n
"
+                ],
+                "alt": "2 pixelated 36x36 white ellipses one left one right of center. On black.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/core/attributes.js",
+                "line": 209,
+                "description": "
Sets the style for rendering line endings. These ends are either squared,\nextended, or rounded, each of which specified with the corresponding\nparameters: SQUARE, PROJECT, and ROUND. The default cap is ROUND.
\n",
+                "itemtype": "method",
+                "name": "strokeCap",
+                "params": [
+                    {
+                        "name": "cap",
+                        "description": "
either SQUARE, PROJECT, or ROUND
\n",
+                        "type": "Constant"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nstrokeWeight(12.0);\nstrokeCap(ROUND);\nline(20, 30, 80, 30);\nstrokeCap(SQUARE);\nline(20, 50, 80, 50);\nstrokeCap(PROJECT);\nline(20, 70, 80, 70);\n\n
"
+                ],
+                "alt": "3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/core/attributes.js",
+                "line": 246,
+                "description": "
Sets the style of the joints which connect line segments. These joints\nare either mitered, beveled, or rounded and specified with the\ncorresponding parameters MITER, BEVEL, and ROUND. The default joint is\nMITER.
\n",
+                "itemtype": "method",
+                "name": "strokeJoin",
+                "params": [
+                    {
+                        "name": "join",
+                        "description": "
either MITER, BEVEL, ROUND
\n",
+                        "type": "Constant"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(MITER);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n\n
\n\n
\n\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(BEVEL);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n\n
\n\n
\n\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(ROUND);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n\n
"
+                ],
+                "alt": "Right-facing arrowhead shape with pointed tip in center of canvas.\nRight-facing arrowhead shape with flat tip in center of canvas.\nRight-facing arrowhead shape with rounded tip in center of canvas.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/core/attributes.js",
+                "line": 313,
+                "description": "
Sets the width of the stroke used for lines, points, and the border\naround shapes. All widths are set in units of pixels.
\n",
+                "itemtype": "method",
+                "name": "strokeWeight",
+                "params": [
+                    {
+                        "name": "weight",
+                        "description": "
the weight (in pixels) of the stroke
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nstrokeWeight(1); // Default\nline(20, 20, 80, 20);\nstrokeWeight(4); // Thicker\nline(20, 40, 80, 40);\nstrokeWeight(10); // Beastly\nline(20, 70, 80, 70);\n\n
"
+                ],
+                "alt": "3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/core/canvas.js",
+                "line": 1,
+                "requires": [
+                    "constants"
+                ],
+                "class": "p5",
+                "module": "Shape"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 13,
+                "itemtype": "property",
+                "name": "P2D",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 18,
+                "itemtype": "property",
+                "name": "WEBGL",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 34,
+                "description": "
HALF_PI is a mathematical constant with the value\n1.57079632679489661923. It is half the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().
\n",
+                "itemtype": "property",
+                "name": "HALF_PI",
+                "type": "Number",
+                "final": 1,
+                "example": [
+                    "\n
\narc(50, 50, 80, 80, 0, HALF_PI);\n
"
+                ],
+                "alt": "80x80 white quarter-circle with curve toward bottom right of canvas.",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 53,
+                "description": "
PI is a mathematical constant with the value\n3.14159265358979323846. It is the ratio of the circumference\nof a circle to its diameter. It is useful in combination with\nthe trigonometric functions sin() and cos().
\n",
+                "itemtype": "property",
+                "name": "PI",
+                "type": "Number",
+                "final": 1,
+                "example": [
+                    "\n
\narc(50, 50, 80, 80, 0, PI);\n
"
+                ],
+                "alt": "white half-circle with curve toward bottom of canvas.",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 72,
+                "description": "
QUARTER_PI is a mathematical constant with the value 0.7853982.\nIt is one quarter the ratio of the circumference of a circle to\nits diameter. It is useful in combination with the trigonometric\nfunctions sin() and cos().
\n",
+                "itemtype": "property",
+                "name": "QUARTER_PI",
+                "type": "Number",
+                "final": 1,
+                "example": [
+                    "\n
\narc(50, 50, 80, 80, 0, QUARTER_PI);\n
"
+                ],
+                "alt": "white eighth-circle rotated about 40 degrees with curve bottom right canvas.",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 91,
+                "description": "
TAU is an alias for TWO_PI, a mathematical constant with the\nvalue 6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().
\n",
+                "itemtype": "property",
+                "name": "TAU",
+                "type": "Number",
+                "final": 1,
+                "example": [
+                    "\n
\narc(50, 50, 80, 80, 0, TAU);\n
"
+                ],
+                "alt": "80x80 white ellipse shape in center of canvas.",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 110,
+                "description": "
TWO_PI is a mathematical constant with the value\n6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().
\n",
+                "itemtype": "property",
+                "name": "TWO_PI",
+                "type": "Number",
+                "final": 1,
+                "example": [
+                    "\n
\narc(50, 50, 80, 80, 0, TWO_PI);\n
"
+                ],
+                "alt": "80x80 white ellipse shape in center of canvas.",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 129,
+                "description": "
Constant to be used with angleMode() function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).
\n",
+                "itemtype": "property",
+                "name": "DEGREES",
+                "type": "String",
+                "final": 1,
+                "example": [
+                    "\n
\nfunction setup() {\n  angleMode(DEGREES);\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 143,
+                "description": "
Constant to be used with angleMode() function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).
\n",
+                "itemtype": "property",
+                "name": "RADIANS",
+                "type": "String",
+                "final": 1,
+                "example": [
+                    "\n
\nfunction setup() {\n  angleMode(RADIANS);\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 161,
+                "itemtype": "property",
+                "name": "CORNER",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 166,
+                "itemtype": "property",
+                "name": "CORNERS",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 171,
+                "itemtype": "property",
+                "name": "RADIUS",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 176,
+                "itemtype": "property",
+                "name": "RIGHT",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 181,
+                "itemtype": "property",
+                "name": "LEFT",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 186,
+                "itemtype": "property",
+                "name": "CENTER",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 191,
+                "itemtype": "property",
+                "name": "TOP",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 196,
+                "itemtype": "property",
+                "name": "BOTTOM",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 201,
+                "itemtype": "property",
+                "name": "BASELINE",
+                "type": "String",
+                "final": 1,
+                "default": "alphabetic",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 207,
+                "itemtype": "property",
+                "name": "POINTS",
+                "type": "Number",
+                "final": 1,
+                "default": "0x0000",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 213,
+                "itemtype": "property",
+                "name": "LINES",
+                "type": "Number",
+                "final": 1,
+                "default": "0x0001",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 219,
+                "itemtype": "property",
+                "name": "LINE_STRIP",
+                "type": "Number",
+                "final": 1,
+                "default": "0x0003",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 225,
+                "itemtype": "property",
+                "name": "LINE_LOOP",
+                "type": "Number",
+                "final": 1,
+                "default": "0x0002",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 231,
+                "itemtype": "property",
+                "name": "TRIANGLES",
+                "type": "Number",
+                "final": 1,
+                "default": "0x0004",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 237,
+                "itemtype": "property",
+                "name": "TRIANGLE_FAN",
+                "type": "Number",
+                "final": 1,
+                "default": "0x0006",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 243,
+                "itemtype": "property",
+                "name": "TRIANGLE_STRIP",
+                "type": "Number",
+                "final": 1,
+                "default": "0x0005",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 249,
+                "itemtype": "property",
+                "name": "QUADS",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 254,
+                "itemtype": "property",
+                "name": "QUAD_STRIP",
+                "type": "String",
+                "final": 1,
+                "default": "quad_strip",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 260,
+                "itemtype": "property",
+                "name": "CLOSE",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 265,
+                "itemtype": "property",
+                "name": "OPEN",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 270,
+                "itemtype": "property",
+                "name": "CHORD",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 275,
+                "itemtype": "property",
+                "name": "PIE",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 280,
+                "itemtype": "property",
+                "name": "PROJECT",
+                "type": "String",
+                "final": 1,
+                "default": "square",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 286,
+                "itemtype": "property",
+                "name": "SQUARE",
+                "type": "String",
+                "final": 1,
+                "default": "butt",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 292,
+                "itemtype": "property",
+                "name": "ROUND",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 297,
+                "itemtype": "property",
+                "name": "BEVEL",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 302,
+                "itemtype": "property",
+                "name": "MITER",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 309,
+                "itemtype": "property",
+                "name": "RGB",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 314,
+                "itemtype": "property",
+                "name": "HSB",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 319,
+                "itemtype": "property",
+                "name": "HSL",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 345,
+                "itemtype": "property",
+                "name": "BLEND",
+                "type": "String",
+                "final": 1,
+                "default": "source-over",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 351,
+                "itemtype": "property",
+                "name": "ADD",
+                "type": "String",
+                "final": 1,
+                "default": "lighter",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 359,
+                "itemtype": "property",
+                "name": "DARKEST",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 364,
+                "itemtype": "property",
+                "name": "LIGHTEST",
+                "type": "String",
+                "final": 1,
+                "default": "lighten",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 370,
+                "itemtype": "property",
+                "name": "DIFFERENCE",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 375,
+                "itemtype": "property",
+                "name": "EXCLUSION",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 380,
+                "itemtype": "property",
+                "name": "MULTIPLY",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 385,
+                "itemtype": "property",
+                "name": "SCREEN",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 390,
+                "itemtype": "property",
+                "name": "REPLACE",
+                "type": "String",
+                "final": 1,
+                "default": "copy",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 396,
+                "itemtype": "property",
+                "name": "OVERLAY",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 401,
+                "itemtype": "property",
+                "name": "HARD_LIGHT",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 406,
+                "itemtype": "property",
+                "name": "SOFT_LIGHT",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 411,
+                "itemtype": "property",
+                "name": "DODGE",
+                "type": "String",
+                "final": 1,
+                "default": "color-dodge",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 417,
+                "itemtype": "property",
+                "name": "BURN",
+                "type": "String",
+                "final": 1,
+                "default": "color-burn",
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 425,
+                "itemtype": "property",
+                "name": "THRESHOLD",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 430,
+                "itemtype": "property",
+                "name": "GRAY",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 435,
+                "itemtype": "property",
+                "name": "OPAQUE",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 440,
+                "itemtype": "property",
+                "name": "INVERT",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 445,
+                "itemtype": "property",
+                "name": "POSTERIZE",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 450,
+                "itemtype": "property",
+                "name": "DILATE",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 455,
+                "itemtype": "property",
+                "name": "ERODE",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 460,
+                "itemtype": "property",
+                "name": "BLUR",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 467,
+                "itemtype": "property",
+                "name": "NORMAL",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 472,
+                "itemtype": "property",
+                "name": "ITALIC",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 477,
+                "itemtype": "property",
+                "name": "BOLD",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 501,
+                "itemtype": "property",
+                "name": "LANDSCAPE",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/constants.js",
+                "line": 506,
+                "itemtype": "property",
+                "name": "PORTRAIT",
+                "type": "String",
+                "final": 1,
+                "class": "p5",
+                "module": "Constants",
+                "submodule": "Constants"
+            },
+            {
+                "file": "src/core/core.js",
+                "line": 49,
+                "description": "
Called directly before setup(), the preload() function is used to handle\nasynchronous loading of external files. If a preload function is\ndefined, setup() will wait until any load calls within have finished.\nNothing besides load calls should be inside preload (loadImage,\nloadJSON, loadFont, loadStrings, etc).

\nBy default the text "loading..." will be displayed. To make your own\nloading page, include an HTML element with id "p5_loading" in your\npage. More information here.
\n",
+                "itemtype": "method",
+                "name": "preload",
+                "example": [
+                    "\n
\nvar img;\nvar c;\nfunction preload() {\n // preload() runs once\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n // setup() waits until preload() is done\n  img.loadPixels();\n  // get color of middle pixel\n  c = img.get(img.width / 2, img.height / 2);\n}\n\nfunction draw() {\n  background(c);\n  image(img, 25, 25, 50, 50);\n}\n
"
+                ],
+                "alt": "nothing displayed",
+                "class": "p5",
+                "module": "Structure",
+                "submodule": "Structure"
+            },
+            {
+                "file": "src/core/core.js",
+                "line": 87,
+                "description": "
The setup() function is called once when the program starts. It's used to\ndefine initial environment properties such as screen size and background\ncolor and to load media such as images and fonts as the program starts.\nThere can only be one setup() function for each program and it shouldn't\nbe called again after its initial execution.\n

\nNote: Variables declared within setup() are not accessible within other\nfunctions, including draw().
\n",
+                "itemtype": "method",
+                "name": "setup",
+                "example": [
+                    "\n
\nvar a = 0;\n\nfunction setup() {\n  background(0);\n  noStroke();\n  fill(102);\n}\n\nfunction draw() {\n  rect(a++ % width, 10, 2, 80);\n}\n
"
+                ],
+                "alt": "nothing displayed",
+                "class": "p5",
+                "module": "Structure",
+                "submodule": "Structure"
+            },
+            {
+                "file": "src/core/core.js",
+                "line": 118,
+                "description": "
Called directly after setup(), the draw() function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor noLoop() is called. Note if noLoop() is called in setup(), draw() will\nstill be executed once before stopping. draw() is called automatically and\nshould never be called explicitly.\n

\nIt should always be controlled with noLoop(), redraw() and loop(). After\nnoLoop() stops the code in draw() from executing, redraw() causes the\ncode inside draw() to execute once, and loop() will cause the code\ninside draw() to resume executing continuously.\n

\nThe number of times draw() executes in each second may be controlled with\nthe frameRate() function.\n

\nThere can only be one draw() function for each sketch, and draw() must\nexist if you want the code to run continuously, or to process events such\nas mousePressed(). Sometimes, you might have an empty call to draw() in\nyour program, as shown in the above example.\n

\nIt is important to note that the drawing coordinate system will be reset\nat the beginning of each draw() call. If any transformations are performed\nwithin draw() (ex: scale, rotate, translate, their effects will be\nundone at the beginning of draw(), so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.
\n",
+                "itemtype": "method",
+                "name": "draw",
+                "example": [
+                    "\n
\nvar yPos = 0;\nfunction setup() {\n // setup() runs once\n  frameRate(30);\n}\nfunction draw() {\n // draw() loops forever, until stopped\n  background(204);\n  yPos = yPos - 1;\n  if (yPos < 0) {\n    yPos = height;\n  }\n  line(0, yPos, width, yPos);\n}\n
"
+                ],
+                "alt": "nothing displayed",
+                "class": "p5",
+                "module": "Structure",
+                "submodule": "Structure"
+            },
+            {
+                "file": "src/core/core.js",
+                "line": 401,
+                "description": "
Removes the entire p5 sketch. This will remove the canvas and any\nelements created by p5.js. It will also stop the draw loop and unbind\nany properties or methods from the window global scope. It will\nleave a variable p5 in case you wanted to create a new p5 sketch.\nIf you like, you can set p5 = null to erase it. While all functions and\nvariables and objects created by the p5 library will be removed, any\nother global variables created by your code will remain.
\n",
+                "itemtype": "method",
+                "name": "remove",
+                "example": [
+                    "\n
\nfunction draw() {\n  ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n  remove(); // remove whole sketch on mouse press\n}\n
"
+                ],
+                "alt": "nothing displayed",
+                "class": "p5",
+                "module": "Structure",
+                "submodule": "Structure"
+            },
+            {
+                "file": "src/core/curves.js",
+                "line": 13,
+                "description": "
Draws a cubic Bezier curve on the screen. These curves are defined by a\nseries of anchor and control points. The first two parameters specify\nthe first anchor point and the last two parameters specify the other\nanchor point, which become the first and last points on the curve. The\nmiddle parameters specify the two control points which define the shape\nof the curve. Approximately speaking, control points "pull" the curve\ntowards them.

Bezier curves were developed by French\nautomotive engineer Pierre Bezier, and are commonly used in computer\ngraphics to define gently sloping curves. See also curve().
\n",
+                "itemtype": "method",
+                "name": "bezier",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nnoFill();\nstroke(255, 102, 0);\nline(85, 20, 10, 10);\nline(90, 90, 15, 80);\nstroke(0, 0, 0);\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n
\n\n
\n\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n\n
"
+                ],
+                "alt": "stretched black s-shape in center with orange lines extending from end points.\nstretched black s-shape with 10 5x5 white ellipses along the shape.\nstretched black s-shape with 7 5x5 ellipses and orange lines along the shape.\nstretched black s-shape with 17 small orange lines extending from under shape.\nhorseshoe shape with orange ends facing left and black curved center.\nhorseshoe shape with orange ends facing left and black curved center.\nLine shaped like right-facing arrow,points move with mouse-x and warp shape.\nhorizontal line that hooks downward on the right and 13 5x5 ellipses along it.\nright curving line mid-right of canvas with 7 short lines radiating from it.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Curves",
+                "overloads": [
+                    {
+                        "line": 13,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "
x-coordinate for the first anchor point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "
y-coordinate for the first anchor point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "
x-coordinate for the first control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "
y-coordinate for the first control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x3",
+                                "description": "
x-coordinate for the second control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y3",
+                                "description": "
y-coordinate for the second control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x4",
+                                "description": "
x-coordinate for the second anchor point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y4",
+                                "description": "
y-coordinate for the second anchor point
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 66,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z1",
+                                "description": "
z-coordinate for the first anchor point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z2",
+                                "description": "
z-coordinate for the first control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x3",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y3",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z3",
+                                "description": "
z-coordinate for the second control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x4",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y4",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z4",
+                                "description": "
z-coordinate for the second anchor point
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/core/curves.js",
+                "line": 92,
+                "description": "
Sets the resolution at which Beziers display.
\n
The default value is 20.
\n",
+                "itemtype": "method",
+                "name": "bezierDetail",
+                "params": [
+                    {
+                        "name": "detail",
+                        "description": "
resolution of the curves
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nbackground(204);\nbezierDetail(50);\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n
"
+                ],
+                "alt": "stretched black s-shape with 7 5x5 ellipses and orange lines along the shape.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Curves"
+            },
+            {
+                "file": "src/core/curves.js",
+                "line": 119,
+                "description": "
Evaluates the Bezier at position t for points a, b, c, d.\nThe parameters a and d are the first and last points\non the curve, and b and c are the control points.\nThe final parameter t varies between 0 and 1.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a bezier curve at t.
\n",
+                "itemtype": "method",
+                "name": "bezierPoint",
+                "params": [
+                    {
+                        "name": "a",
+                        "description": "
coordinate of first point on the curve
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "b",
+                        "description": "
coordinate of first control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "c",
+                        "description": "
coordinate of second control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "d",
+                        "description": "
coordinate of second point on the curve
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "t",
+                        "description": "
value between 0 and 1
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the value of the Bezier at position t",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nnoFill();\nvar x1 = 85,\n x2 = 10,\n x3 = 90,\n x4 = 15;\nvar y1 = 20,\n y2 = 10,\n y3 = 90,\n y4 = 80;\nbezier(x1, y1, x2, y2, x3, y3, x4, y4);\nfill(255);\nvar steps = 10;\nfor (var i = 0; i <= steps; i++) {\n  var t = i / steps;\n  var x = bezierPoint(x1, x2, x3, x4, t);\n  var y = bezierPoint(y1, y2, y3, y4, t);\n  ellipse(x, y, 5, 5);\n}\n\n
"
+                ],
+                "alt": "stretched black s-shape with 17 small orange lines extending from under shape.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Curves"
+            },
+            {
+                "file": "src/core/curves.js",
+                "line": 174,
+                "description": "
Evaluates the tangent to the Bezier at position t for points a, b, c, d.\nThe parameters a and d are the first and last points\non the curve, and b and c are the control points.\nThe final parameter t varies between 0 and 1.
\n",
+                "itemtype": "method",
+                "name": "bezierTangent",
+                "params": [
+                    {
+                        "name": "a",
+                        "description": "
coordinate of first point on the curve
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "b",
+                        "description": "
coordinate of first control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "c",
+                        "description": "
coordinate of second control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "d",
+                        "description": "
coordinate of second point on the curve
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "t",
+                        "description": "
value between 0 and 1
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the tangent at position t",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nvar steps = 6;\nfill(255);\nfor (var i = 0; i <= steps; i++) {\n  var t = i / steps;\n  // Get the location of the point\n  var x = bezierPoint(85, 10, 90, 15, t);\n  var y = bezierPoint(20, 10, 90, 80, t);\n  // Get the tangent points\n  var tx = bezierTangent(85, 10, 90, 15, t);\n  var ty = bezierTangent(20, 10, 90, 80, t);\n  // Calculate an angle from the tangent points\n  var a = atan2(ty, tx);\n  a += PI;\n  stroke(255, 102, 0);\n  line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);\n  // The following line of code makes a line\n  // inverse of the above line\n  //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);\n  stroke(0);\n  ellipse(x, y, 5, 5);\n}\n\n
\n\n
\n\nnoFill();\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\nstroke(255, 102, 0);\nvar steps = 16;\nfor (var i = 0; i <= steps; i++) {\n  var t = i / steps;\n  var x = bezierPoint(85, 10, 90, 15, t);\n  var y = bezierPoint(20, 10, 90, 80, t);\n  var tx = bezierTangent(85, 10, 90, 15, t);\n  var ty = bezierTangent(20, 10, 90, 80, t);\n  var a = atan2(ty, tx);\n  a -= HALF_PI;\n  line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n}\n\n
"
+                ],
+                "alt": "s-shaped line with 17 short orange lines extending from underside of shape",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Curves"
+            },
+            {
+                "file": "src/core/curves.js",
+                "line": 253,
+                "description": "
Draws a curved line on the screen between two points, given as the\nmiddle four parameters. The first two parameters are a control point, as\nif the curve came from this point even though it's not drawn. The last\ntwo parameters similarly describe the other control point. 

\nLonger curves can be created by putting a series of curve() functions\ntogether or using curveVertex(). An additional function called\ncurveTightness() provides control for the visual quality of the curve.\nThe curve() function is an implementation of Catmull-Rom splines.
\n",
+                "itemtype": "method",
+                "name": "curve",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nnoFill();\nstroke(255, 102, 0);\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\nstroke(0);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nstroke(255, 102, 0);\ncurve(73, 24, 73, 61, 15, 65, 15, 65);\n\n
\n
\n\n// Define the curve points as JavaScript objects\nvar p1 = { x: 5, y: 26 },\n p2 = { x: 73, y: 24 };\nvar p3 = { x: 73, y: 61 },\n p4 = { x: 15, y: 65 };\nnoFill();\nstroke(255, 102, 0);\ncurve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);\nstroke(0);\ncurve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);\nstroke(255, 102, 0);\ncurve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);\n\n
\n
\n\nnoFill();\nstroke(255, 102, 0);\ncurve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);\nstroke(0);\ncurve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);\nstroke(255, 102, 0);\ncurve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);\n\n
"
+                ],
+                "alt": "horseshoe shape with orange ends facing left and black curved center.\nhorseshoe shape with orange ends facing left and black curved center.\ncurving black and orange lines.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Curves",
+                "overloads": [
+                    {
+                        "line": 253,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "
x-coordinate for the beginning control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "
y-coordinate for the beginning control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "
x-coordinate for the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "
y-coordinate for the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x3",
+                                "description": "
x-coordinate for the second point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y3",
+                                "description": "
y-coordinate for the second point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x4",
+                                "description": "
x-coordinate for the ending control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y4",
+                                "description": "
y-coordinate for the ending control point
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 318,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z1",
+                                "description": "
z-coordinate for the beginning control point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z2",
+                                "description": "
z-coordinate for the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x3",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y3",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z3",
+                                "description": "
z-coordinate for the second point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x4",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y4",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z4",
+                                "description": "
z-coordinate for the ending control point
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/core/curves.js",
+                "line": 344,
+                "description": "
Sets the resolution at which curves display.
\n
The default value is 20.
\n",
+                "itemtype": "method",
+                "name": "curveDetail",
+                "params": [
+                    {
+                        "name": "resolution",
+                        "description": "
of the curves
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nbackground(204);\ncurveDetail(20);\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\n\n
"
+                ],
+                "alt": "white arch shape in top-mid canvas.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Curves"
+            },
+            {
+                "file": "src/core/curves.js",
+                "line": 371,
+                "description": "
Modifies the quality of forms created with curve() and curveVertex().\nThe parameter tightness determines how the curve fits to the vertex\npoints. The value 0.0 is the default value for tightness (this value\ndefines the curves to be Catmull-Rom splines) and the value 1.0 connects\nall the points with straight lines. Values within the range -5.0 and 5.0\nwill deform the curves but will leave them recognizable and as values\nincrease in magnitude, they will continue to deform.
\n",
+                "itemtype": "method",
+                "name": "curveTightness",
+                "params": [
+                    {
+                        "name": "amount",
+                        "description": "
of deformation from the original vertices
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n// Move the mouse left and right to see the curve change\n\nfunction setup() {\n  createCanvas(100, 100);\n  noFill();\n}\n\nfunction draw() {\n  background(204);\n  var t = map(mouseX, 0, width, -5, 5);\n  curveTightness(t);\n  beginShape();\n  curveVertex(10, 26);\n  curveVertex(10, 26);\n  curveVertex(83, 24);\n  curveVertex(83, 61);\n  curveVertex(25, 65);\n  curveVertex(25, 65);\n  endShape();\n}\n\n
"
+                ],
+                "alt": "Line shaped like right-facing arrow,points move with mouse-x and warp shape.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Curves"
+            },
+            {
+                "file": "src/core/curves.js",
+                "line": 417,
+                "description": "
Evaluates the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are points\non the curve, and b and c are the control points.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a curve at t.
\n",
+                "itemtype": "method",
+                "name": "curvePoint",
+                "params": [
+                    {
+                        "name": "a",
+                        "description": "
coordinate of first point on the curve
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "b",
+                        "description": "
coordinate of first control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "c",
+                        "description": "
coordinate of second control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "d",
+                        "description": "
coordinate of second point on the curve
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "t",
+                        "description": "
value between 0 and 1
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "bezier value at position t",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nnoFill();\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nfill(255);\nellipseMode(CENTER);\nvar steps = 6;\nfor (var i = 0; i <= steps; i++) {\n  var t = i / steps;\n  var x = curvePoint(5, 5, 73, 73, t);\n  var y = curvePoint(26, 26, 24, 61, t);\n  ellipse(x, y, 5, 5);\n  x = curvePoint(5, 73, 73, 15, t);\n  y = curvePoint(26, 24, 61, 65, t);\n  ellipse(x, y, 5, 5);\n}\n\n
\n\nline hooking down to right-bottom with 13 5x5 white ellipse points"
+                ],
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Curves"
+            },
+            {
+                "file": "src/core/curves.js",
+                "line": 466,
+                "description": "
Evaluates the tangent to the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are points on the curve,\nand b and c are the control points.
\n",
+                "itemtype": "method",
+                "name": "curveTangent",
+                "params": [
+                    {
+                        "name": "a",
+                        "description": "
coordinate of first point on the curve
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "b",
+                        "description": "
coordinate of first control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "c",
+                        "description": "
coordinate of second control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "d",
+                        "description": "
coordinate of second point on the curve
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "t",
+                        "description": "
value between 0 and 1
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the tangent at position t",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nnoFill();\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\nvar steps = 6;\nfor (var i = 0; i <= steps; i++) {\n  var t = i / steps;\n  var x = curvePoint(5, 73, 73, 15, t);\n  var y = curvePoint(26, 24, 61, 65, t);\n  //ellipse(x, y, 5, 5);\n  var tx = curveTangent(5, 73, 73, 15, t);\n  var ty = curveTangent(26, 24, 61, 65, t);\n  var a = atan2(ty, tx);\n  a -= PI / 2.0;\n  line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n}\n\n
"
+                ],
+                "alt": "right curving line mid-right of canvas with 7 short lines radiating from it.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Curves"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 22,
+                "description": "
The print() function writes to the console area of your browser.\nThis function is often helpful for looking at the data a program is\nproducing. This function creates a new line of text for each call to\nthe function. Individual elements can be\nseparated with quotes ("") and joined with the addition operator (+).
\n",
+                "itemtype": "method",
+                "name": "print",
+                "params": [
+                    {
+                        "name": "contents",
+                        "description": "
any combination of Number, String, Object, Boolean,\n                      Array to print
\n",
+                        "type": "Any"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar x = 10;\nprint('The value of x is ' + x);\n// prints \"The value of x is 10\"\n
"
+                ],
+                "alt": "default grey canvas",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 49,
+                "description": "
The system variable frameCount contains the number of frames that have\nbeen displayed since the program started. Inside setup() the value is 0,\nafter the first iteration of draw it is 1, etc.
\n",
+                "itemtype": "property",
+                "name": "frameCount",
+                "type": "Integer",
+                "readonly": "",
+                "example": [
+                    "\n  
\nfunction setup() {\n  frameRate(30);\n  textSize(20);\n  textSize(30);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  text(frameCount, width / 2, height / 2);\n}\n
"
+                ],
+                "alt": "numbers rapidly counting upward with frame count set to 30.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 77,
+                "description": "
Confirms if the window a p5.js program is in is "focused," meaning that\nthe sketch will accept mouse or keyboard input. This variable is\n"true" if the window is focused and "false" if not.
\n",
+                "itemtype": "property",
+                "name": "focused",
+                "type": "Boolean",
+                "readonly": "",
+                "example": [
+                    "\n
\n// To demonstrate, put two windows side by side.\n// Click on the window that the p5 sketch isn't in!\nfunction draw() {\n  background(200);\n  noStroke();\n  fill(0, 200, 0);\n  ellipse(25, 25, 50, 50);\n\n  if (!focused) {\n   // or \"if (focused === false)\"\n    stroke(200, 0, 0);\n    line(0, 0, 100, 100);\n    line(100, 0, 0, 100);\n  }\n}\n
"
+                ],
+                "alt": "green 50x50 ellipse at top left. Red X covers canvas when page focus changes",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 109,
+                "description": "
Sets the cursor to a predefined symbol or an image, or makes it visible\nif already hidden. If you are trying to set an image as the cursor, the\nrecommended size is 16x16 or 32x32 pixels. It is not possible to load an\nimage as the cursor if you are exporting your program for the Web, and not\nall MODES work with all browsers. The values for parameters x and y must\nbe less than the dimensions of the image.
\n",
+                "itemtype": "method",
+                "name": "cursor",
+                "params": [
+                    {
+                        "name": "type",
+                        "description": "
either ARROW, CROSS, HAND, MOVE, TEXT, or\n                              WAIT, or path for image
\n",
+                        "type": "String|Constant"
+                    },
+                    {
+                        "name": "x",
+                        "description": "
the horizontal active spot of the cursor
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y",
+                        "description": "
the vertical active spot of the cursor
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n// Move the mouse left and right across the image\n// to see the cursor change from a cross to a hand\nfunction draw() {\n  line(width / 2, 0, width / 2, height);\n  if (mouseX < 50) {\n    cursor(CROSS);\n  } else {\n    cursor(HAND);\n  }\n}\n
"
+                ],
+                "alt": "horizontal line divides canvas. cursor on left is a cross, right is hand.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 170,
+                "description": "
Specifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within setup() is\nrecommended. The default rate is 60 frames per second. This is the same as\nsetFrameRate(val).\n

\nCalling frameRate() with no arguments returns the current framerate. The\ndraw function must run at least once before it will return a value. This\nis the same as getFrameRate().\n

\nCalling frameRate() with arguments that are not of the type numbers\nor are non positive also returns current framerate.
\n",
+                "itemtype": "method",
+                "name": "frameRate",
+                "chainable": 1,
+                "example": [
+                    "\n\n
\nvar rectX = 0;\nvar fr = 30; //starting FPS\nvar clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX += 1; // Move Rectangle\n\n  if (rectX >= width) {\n   // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n
"
+                ],
+                "alt": "blue rect moves left to right, followed by red rect moving faster. Loops.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment",
+                "overloads": [
+                    {
+                        "line": 170,
+                        "params": [
+                            {
+                                "name": "fps",
+                                "description": "
number of frames to be displayed every second
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 228,
+                        "params": [],
+                        "return": {
+                            "description": "current frameRate",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 268,
+                "description": "
Hides the cursor from view.
\n",
+                "itemtype": "method",
+                "name": "noCursor",
+                "example": [
+                    "\n
\nfunction setup() {\n  noCursor();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(mouseX, mouseY, 10, 10);\n}\n
"
+                ],
+                "alt": "cursor becomes 10x 10 white ellipse the moves with mouse x and y.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 293,
+                "description": "
System variable that stores the width of the entire screen display. This\nis used to run a full-screen program on any display size.
\n",
+                "itemtype": "property",
+                "name": "displayWidth",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\ncreateCanvas(displayWidth, displayHeight);\n
"
+                ],
+                "alt": "cursor becomes 10x 10 white ellipse the moves with mouse x and y.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 310,
+                "description": "
System variable that stores the height of the entire screen display. This\nis used to run a full-screen program on any display size.
\n",
+                "itemtype": "property",
+                "name": "displayHeight",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\ncreateCanvas(displayWidth, displayHeight);\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 327,
+                "description": "
System variable that stores the width of the inner window, it maps to\nwindow.innerWidth.
\n",
+                "itemtype": "property",
+                "name": "windowWidth",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\ncreateCanvas(windowWidth, windowHeight);\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 343,
+                "description": "
System variable that stores the height of the inner window, it maps to\nwindow.innerHeight.
\n",
+                "itemtype": "property",
+                "name": "windowHeight",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\ncreateCanvas(windowWidth, windowHeight);\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 359,
+                "description": "
The windowResized() function is called once every time the browser window\nis resized. This is a good place to resize the canvas or do any other\nadjustments to accommodate the new window size.
\n",
+                "itemtype": "method",
+                "name": "windowResized",
+                "example": [
+                    "\n
\nfunction setup() {\n  createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n  background(0, 100, 200);\n}\n\nfunction windowResized() {\n  resizeCanvas(windowWidth, windowHeight);\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 413,
+                "description": "
System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the createCanvas() function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\ncreateCanvas() is not used in a program.
\n",
+                "itemtype": "property",
+                "name": "width",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 425,
+                "description": "
System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the createCanvas() function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\ncreateCanvas() is not used in a program.
\n",
+                "itemtype": "property",
+                "name": "height",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 437,
+                "description": "
If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.
\n",
+                "itemtype": "method",
+                "name": "fullscreen",
+                "params": [
+                    {
+                        "name": "val",
+                        "description": "
whether the sketch should be in fullscreen mode\nor not
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "current fullscreen state",
+                    "type": "Boolean"
+                },
+                "example": [
+                    "\n
\n\n// Clicking in the box toggles fullscreen on and off.\nfunction setup() {\n  background(200);\n}\nfunction mousePressed() {\n  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n    var fs = fullscreen();\n    fullscreen(!fs);\n  }\n}\n\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 488,
+                "description": "
Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling pixelDensity() with no arguments returns\nthe current pixel density of the sketch.
\n",
+                "itemtype": "method",
+                "name": "pixelDensity",
+                "params": [
+                    {
+                        "name": "val",
+                        "description": "
whether or how much the sketch should scale
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "current pixel density of the sketch",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  pixelDensity(1);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n\n
\n
\n\nfunction setup() {\n  pixelDensity(3.0);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n\n
"
+                ],
+                "alt": "fuzzy 50x50 white ellipse with black outline in center of canvas.\nsharp 50x50 white ellipse with black outline in center of canvas.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 534,
+                "description": "
Returns the pixel density of the current display the sketch is running on.
\n",
+                "itemtype": "method",
+                "name": "displayDensity",
+                "return": {
+                    "description": "current pixel density of the display",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var density = displayDensity();\n  pixelDensity(density);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n\n
"
+                ],
+                "alt": "50x50 white ellipse with black outline in center of canvas.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 591,
+                "description": "
Gets the current URL.
\n",
+                "itemtype": "method",
+                "name": "getURL",
+                "return": {
+                    "description": "url",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\nvar url;\nvar x = 100;\n\nfunction setup() {\n  fill(0);\n  noStroke();\n  url = getURL();\n}\n\nfunction draw() {\n  background(200);\n  text(url, x, height / 2);\n  x--;\n}\n\n
"
+                ],
+                "alt": "current url (http://p5js.org/reference/#/p5/getURL) moves right to left.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 622,
+                "description": "
Gets the current URL path as an array.
\n",
+                "itemtype": "method",
+                "name": "getURLPath",
+                "return": {
+                    "description": "path components",
+                    "type": "String[]"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var urlPath = getURLPath();\n  for (var i = 0; i < urlPath.length; i++) {\n    text(urlPath[i], 10, i * 20 + 20);\n  }\n}\n
"
+                ],
+                "alt": "no display",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/environment.js",
+                "line": 645,
+                "description": "
Gets the current URL params as an Object.
\n",
+                "itemtype": "method",
+                "name": "getURLParams",
+                "return": {
+                    "description": "URL params",
+                    "type": "Object"
+                },
+                "example": [
+                    "\n
\n\n// Example: http://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n  var params = getURLParams();\n  text(params.day, 10, 20);\n  text(params.month, 10, 40);\n  text(params.year, 10, 60);\n}\n\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5",
+                "module": "Environment",
+                "submodule": "Environment"
+            },
+            {
+                "file": "src/core/error_helpers.js",
+                "line": 1,
+                "requires": [
+                    "core"
+                ],
+                "class": "p5",
+                "module": "Environment"
+            },
+            {
+                "file": "src/core/error_helpers.js",
+                "line": 397,
+                "description": "
Validates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments
\n
example:\n var a;\n ellipse(10,10,a,5);\nconsole ouput:\n "It looks like ellipse received an empty variable in spot #2."
\n
example:\n ellipse(10,"foo",5,5);\nconsole output:\n "ellipse was expecting a number for parameter #1,\n          received "foo" instead."
\n",
+                "class": "p5",
+                "module": "Environment"
+            },
+            {
+                "file": "src/core/error_helpers.js",
+                "line": 449,
+                "description": "
Prints out all the colors in the color pallete with white text.\nFor color blindness testing.
\n",
+                "class": "p5",
+                "module": "Environment"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 27,
+                "description": "
Underlying HTML element. All normal HTML methods can be called on this.
\n",
+                "example": [
+                    "\n
\n\ncreateCanvas(300, 500);\nbackground(0, 0, 0, 0);\nvar input = createInput();\ninput.position(20, 225);\nvar inputElem = new p5.Element(input.elt);\ninputElem.style('width:450px;');\ninputElem.value('some string');\n\n
"
+                ],
+                "itemtype": "property",
+                "name": "elt",
+                "readonly": "",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 53,
+                "description": "
Attaches the element to the parent specified. A way of setting\n the container for the element. Accepts either a string ID, DOM\n node, or p5.Element. If no arguments given, parent node is returned.\n For more ways to position the canvas, see the\n \n positioning the canvas wiki page.
\n",
+                "itemtype": "method",
+                "name": "parent",
+                "chainable": 1,
+                "example": [
+                    "\n 
\n // in the html file:\n // <div id=\"myContainer\"></div>\n// in the js file:\n var cnv = createCanvas(100, 100);\n cnv.parent('myContainer');\n 
\n 
\n var div0 = createDiv('this is the parent');\n var div1 = createDiv('this is the child');\n div1.parent(div0); // use p5.Element\n 
\n 
\n var div0 = createDiv('this is the parent');\n div0.id('apples');\n var div1 = createDiv('this is the child');\n div1.parent('apples'); // use id\n 
\n 
\n var elt = document.getElementById('myParentDiv');\n var div1 = createDiv('this is the child');\n div1.parent(elt); // use element from page\n 
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM",
+                "overloads": [
+                    {
+                        "line": 53,
+                        "params": [
+                            {
+                                "name": "parent",
+                                "description": "
the ID, DOM node, or p5.Element\n                         of desired parent element
\n",
+                                "type": "String|p5.Element|Object"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 96,
+                        "params": [],
+                        "return": {
+                            "description": "",
+                            "type": "p5.Element"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 118,
+                "description": "
Sets the ID of the element. If no ID argument is passed in, it instead\n returns the current ID of the element.
\n",
+                "itemtype": "method",
+                "name": "id",
+                "chainable": 1,
+                "example": [
+                    "\n 
\n function setup() {\n   var cnv = createCanvas(100, 100);\n   // Assigns a CSS selector ID to\n   // the canvas element.\n   cnv.id('mycanvas');\n }\n 
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM",
+                "overloads": [
+                    {
+                        "line": 118,
+                        "params": [
+                            {
+                                "name": "id",
+                                "description": "
ID of the element
\n",
+                                "type": "String"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 140,
+                        "params": [],
+                        "return": {
+                            "description": "the id of the element",
+                            "type": "String"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 155,
+                "description": "
Adds given class to the element. If no class argument is passed in, it\n instead returns a string containing the current class(es) of the element.
\n",
+                "itemtype": "method",
+                "name": "class",
+                "chainable": 1,
+                "example": [
+                    "\n 
\n function setup() {\n   var cnv = createCanvas(100, 100);\n   // Assigns a CSS selector class 'small'\n   // to the canvas element.\n   cnv.class('small');\n }\n 
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM",
+                "overloads": [
+                    {
+                        "line": 155,
+                        "params": [
+                            {
+                                "name": "class",
+                                "description": "
class to add
\n",
+                                "type": "String"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 177,
+                        "params": [],
+                        "return": {
+                            "description": "the class of the element",
+                            "type": "String"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 190,
+                "description": "
The .mousePressed() function is called once after every time a\nmouse button is pressed over the element. This can be used to\nattach element specific event listeners.
\n",
+                "itemtype": "method",
+                "name": "mousePressed",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when mouse is\n                               pressed over the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mousePressed(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any click anywhere\nfunction mousePressed() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 240,
+                "description": "
The .doubleClicked() function is called once after every time a\nmouse button is pressed twice over the element. This can be used to\nattach element and action specific event listeners.
\n",
+                "itemtype": "method",
+                "name": "doubleClicked",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when mouse is\n                               double clicked over the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "p5.Element"
+                },
+                "example": [
+                    "\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.doubleClicked(changeGray); // attach listener for\n  // canvas double click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any double click anywhere\nfunction doubleClicked() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is double clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 289,
+                "description": "
The .mouseWheel() function is called once after every time a\nmouse wheel is scrolled over the element. This can be used to\nattach element specific event listeners.\n

\nThe function accepts a callback function as argument which will be executed\nwhen the wheel event is triggered on the element, the callback function is\npassed one argument event. The event.deltaY property returns negative\nvalues if the mouse wheel is rotated up or away from the user and positive\nin the other direction. The event.deltaX does the same as event.deltaY\nexcept it reads the horizontal wheel scroll of the mouse wheel.\n

\nOn OS X with "natural" scrolling enabled, the event.deltaY values are\nreversed.
\n",
+                "itemtype": "method",
+                "name": "mouseWheel",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when mouse is\n                               scrolled over the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseWheel(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with mousewheel movement\n// anywhere on screen\nfunction mouseWheel() {\n  g = g + 10;\n}\n\n// this function fires with mousewheel movement\n// over canvas only\nfunction changeSize(event) {\n  if (event.deltaY > 0) {\n    d = d + 10;\n  } else {\n    d = d - 10;\n  }\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 355,
+                "description": "
The .mouseReleased() function is called once after every time a\nmouse button is released over the element. This can be used to\nattach element specific event listeners.
\n",
+                "itemtype": "method",
+                "name": "mouseReleased",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when mouse is\n                               released over the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseReleased(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// released\nfunction mouseReleased() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// released while on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 408,
+                "description": "
The .mouseClicked() function is called once after a mouse button is\npressed and released over the element. This can be used to\nattach element specific event listeners.
\n",
+                "itemtype": "method",
+                "name": "mouseClicked",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when mouse is\n                               clicked over the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar cnv;\nvar d;\nvar g;\n\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseClicked(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// clicked anywhere\nfunction mouseClicked() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// clicked on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 462,
+                "description": "
The .mouseMoved() function is called once every time a\nmouse moves over the element. This can be used to attach an\nelement specific event listener.
\n",
+                "itemtype": "method",
+                "name": "mouseMoved",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when a mouse moves\n                               over the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar cnv;\nvar d = 30;\nvar g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseMoved(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  fill(200);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires when mouse moves anywhere on\n// page\nfunction mouseMoved() {\n  g = g + 5;\n  if (g > 255) {\n    g = 0;\n  }\n}\n\n// this function fires when mouse moves over canvas\nfunction changeSize() {\n  d = d + 2;\n  if (d > 100) {\n    d = 0;\n  }\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 521,
+                "description": "
The .mouseOver() function is called once after every time a\nmouse moves onto the element. This can be used to attach an\nelement specific event listener.
\n",
+                "itemtype": "method",
+                "name": "mouseOver",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when a mouse moves\n                               onto the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar cnv;\nvar d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOver(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 564,
+                "description": "
The .changed() function is called when the value of an\nelement changes.\nThis can be used to attach an element specific event listener.
\n",
+                "itemtype": "method",
+                "name": "changed",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when the value of\n                               an element changes.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  var item = sel.value();\n  background(200);\n  text(\"it's a \" + item + '!', 50, 50);\n}\n
\n
\nvar checkbox;\nvar cnv;\n\nfunction setup() {\n  checkbox = createCheckbox(' fill');\n  checkbox.changed(changeFill);\n  cnv = createCanvas(100, 100);\n  cnv.position(0, 30);\n  noFill();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(50, 50, 50, 50);\n}\n\nfunction changeFill() {\n  if (checkbox.checked()) {\n    fill(0);\n  } else {\n    noFill();\n  }\n}\n
"
+                ],
+                "alt": "dropdown: pear, kiwi, grape. When selected text \"its a\" + selection shown.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 631,
+                "description": "
The .input() function is called when any user input is\ndetected with an element. The input event is often used\nto detect keystrokes in a input element, or changes on a\nslider element. This can be used to attach an element specific\nevent listener.
\n",
+                "itemtype": "method",
+                "name": "input",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when any user input is\n                               detected within the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n// Open your console to see the output\nfunction setup() {\n  var inp = createInput('');\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 666,
+                "description": "
The .mouseOut() function is called once after every time a\nmouse moves off the element. This can be used to attach an\nelement specific event listener.
\n",
+                "itemtype": "method",
+                "name": "mouseOut",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when a mouse\n                               moves off of an element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar cnv;\nvar d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOut(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 708,
+                "description": "
The .touchStarted() function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.
\n",
+                "itemtype": "method",
+                "name": "touchStarted",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when a touch\n                               starts over the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchStarted(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchStarted() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 757,
+                "description": "
The .touchMoved() function is called once after every time a touch move is\nregistered. This can be used to attach element specific event listeners.
\n",
+                "itemtype": "method",
+                "name": "touchMoved",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when a touch moves over\n                               the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar cnv;\nvar g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchMoved(changeGray); // attach listener for\n  // canvas click only\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 798,
+                "description": "
The .touchEnded() function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.
\n",
+                "itemtype": "method",
+                "name": "touchEnded",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when a touch ends\n                               over the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nvar cnv;\nvar d;\nvar g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchEnded(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchEnded() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n
"
+                ],
+                "alt": "no display.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 848,
+                "description": "
The .dragOver() function is called once after every time a\nfile is dragged over the element. This can be used to attach an\nelement specific event listener.
\n",
+                "itemtype": "method",
+                "name": "dragOver",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when a file is\n                               dragged over the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n// To test this sketch, simply drag a\n// file over the canvas\nfunction setup() {\n  var c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragOver(dragOverCallback);\n}\n\n// This function will be called whenever\n// a file is dragged over the canvas\nfunction dragOverCallback() {\n  background(240);\n  text('Dragged over', width / 2, height / 2);\n}\n
"
+                ],
+                "alt": "nothing displayed",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 886,
+                "description": "
The .dragLeave() function is called once after every time a\ndragged file leaves the element area. This can be used to attach an\nelement specific event listener.
\n",
+                "itemtype": "method",
+                "name": "dragLeave",
+                "params": [
+                    {
+                        "name": "fxn",
+                        "description": "
function to be fired when a file is\n                               dragged off the element.\n                               if false is passed instead, the previously\n                               firing function will no longer fire.
\n",
+                        "type": "Function|Boolean"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n// To test this sketch, simply drag a file\n// over and then out of the canvas area\nfunction setup() {\n  var c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragLeave(dragLeaveCallback);\n}\n\n// This function will be called whenever\n// a file is dragged out of the canvas\nfunction dragLeaveCallback() {\n  background(240);\n  text('Dragged off', width / 2, height / 2);\n}\n
"
+                ],
+                "alt": "nothing displayed",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 924,
+                "description": "
The .drop() function is called for each file dropped on the element.\nIt requires a callback that is passed a p5.File object.  You can\noptionally pass two callbacks, the first one (required) is triggered\nfor each file dropped when the file is loaded.  The second (optional)\nis triggered just once when a file (or files) are dropped.
\n",
+                "itemtype": "method",
+                "name": "drop",
+                "params": [
+                    {
+                        "name": "callback",
+                        "description": "
callback triggered when files are dropped.
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "fxn",
+                        "description": "
callback to receive loaded file.
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\nfunction setup() {\n  var c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop image', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction gotFile(file) {\n  var img = createImg(file.data).hide();\n  // Draw the image onto the canvas\n  image(img, 0, 0, width, height);\n}\n
"
+                ],
+                "alt": "Canvas turns into whatever image is dragged/dropped onto it.",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Element.js",
+                "line": 1059,
+                "description": "
Helper fxn for sharing pixel methods
\n",
+                "class": "p5.Element",
+                "module": "DOM",
+                "submodule": "DOM"
+            },
+            {
+                "file": "src/core/p5.Graphics.js",
+                "line": 68,
+                "itemtype": "method",
+                "name": "remove",
+                "class": "p5.Graphics",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/core/p5.Renderer.js",
+                "line": 63,
+                "description": "
Resize our canvas element.
\n",
+                "class": "p5.Renderer",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/core/p5.Renderer.js",
+                "line": 132,
+                "description": "
Helper fxn to check font type (system or otf)
\n",
+                "class": "p5.Renderer",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/core/p5.Renderer.js",
+                "line": 185,
+                "description": "
Helper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178
\n",
+                "class": "p5.Renderer",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/core/p5.Renderer2D.js",
+                "line": 10,
+                "description": "
p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer
\n",
+                "class": "p5",
+                "module": "Rendering"
+            },
+            {
+                "file": "src/core/p5.Renderer2D.js",
+                "line": 404,
+                "description": "
Generate a cubic Bezier representing an arc on the unit circle of total\nangle size radians, beginning start radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.
\n
See www.joecridge.me/bezier.pdf for an explanation of the method.
\n",
+                "class": "p5",
+                "module": "Rendering"
+            },
+            {
+                "file": "src/core/rendering.js",
+                "line": 16,
+                "description": "
Creates a canvas element in the document, and sets the dimensions of it\nin pixels. This method should be called only once at the start of setup.\nCalling createCanvas more than once in a sketch will result in very\nunpredictable behavior. If you want more than one drawing canvas\nyou could use createGraphics (hidden by default but it can be shown).\n

\nThe system variables width and height are set by the parameters passed\nto this function. If createCanvas() is not used, the window will be\ngiven a default size of 100x100 pixels.\n

\nFor more ways to position the canvas, see the\n\npositioning the canvas wiki page.
\n",
+                "itemtype": "method",
+                "name": "createCanvas",
+                "params": [
+                    {
+                        "name": "w",
+                        "description": "
width of the canvas
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height of the canvas
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "renderer",
+                        "description": "
either P2D or WEBGL
\n",
+                        "type": "Constant",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "canvas generated",
+                    "type": "HTMLCanvasElement"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 50);\n  background(153);\n  line(0, 0, width, height);\n}\n\n
"
+                ],
+                "alt": "Black line extending from top-left of canvas to bottom right.",
+                "class": "p5",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/core/rendering.js",
+                "line": 116,
+                "description": "
Resizes the canvas to given width and height. The canvas will be cleared\nand draw will be called immediately, allowing the sketch to re-render itself\nin the resized canvas.
\n",
+                "itemtype": "method",
+                "name": "resizeCanvas",
+                "params": [
+                    {
+                        "name": "w",
+                        "description": "
width of the canvas
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height of the canvas
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "noRedraw",
+                        "description": "
don't redraw the canvas immediately
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nfunction setup() {\n  createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n  background(0, 100, 200);\n}\n\nfunction windowResized() {\n  resizeCanvas(windowWidth, windowHeight);\n}\n
"
+                ],
+                "alt": "No image displayed.",
+                "class": "p5",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/core/rendering.js",
+                "line": 169,
+                "description": "
Removes the default canvas for a p5 sketch that doesn't\nrequire a canvas
\n",
+                "itemtype": "method",
+                "name": "noCanvas",
+                "example": [
+                    "\n
\n\nfunction setup() {\n  noCanvas();\n}\n\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/core/rendering.js",
+                "line": 192,
+                "description": "
Creates and returns a new p5.Renderer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.
\n",
+                "itemtype": "method",
+                "name": "createGraphics",
+                "params": [
+                    {
+                        "name": "w",
+                        "description": "
width of the offscreen graphics buffer
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height of the offscreen graphics buffer
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "renderer",
+                        "description": "
either P2D or WEBGL\nundefined defaults to p2d
\n",
+                        "type": "Constant",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "offscreen graphics buffer",
+                    "type": "p5.Graphics"
+                },
+                "example": [
+                    "\n
\n\nvar pg;\nfunction setup() {\n  createCanvas(100, 100);\n  pg = createGraphics(100, 100);\n}\nfunction draw() {\n  background(200);\n  pg.background(100);\n  pg.noStroke();\n  pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);\n  image(pg, 50, 50);\n  image(pg, 0, 0, 50, 50);\n}\n\n
"
+                ],
+                "alt": "4 grey squares alternating light and dark grey. White quarter circle mid-left.",
+                "class": "p5",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/core/rendering.js",
+                "line": 231,
+                "description": "
Blends the pixels in the display window according to the defined mode.\nThere is a choice of the following modes to blend the source pixels (A)\nwith the ones of pixels already in the display window (B):
\n
    \n
  • BLEND - linear interpolation of colours: C =\nAfactor + B. This is the default blending mode.
    • \n
  • ADD - sum of A and B
    • \n
  • DARKEST - only the darkest colour succeeds: C =\nmin(Afactor, B).
    • \n
  • LIGHTEST - only the lightest colour succeeds: C =\nmax(A*factor, B).
    • \n
  • DIFFERENCE - subtract colors from underlying image.
    • \n
  • EXCLUSION - similar to DIFFERENCE, but less\nextreme.
    • \n
  • MULTIPLY - multiply the colors, result will always be\ndarker.
    • \n
  • SCREEN - opposite multiply, uses inverse values of the\ncolors.
    • \n
  • REPLACE - the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.
    • \n
  • OVERLAY - mix of MULTIPLY and SCREEN\n. Multiplies dark values, and screens light values.
    • \n
  • HARD_LIGHT - SCREEN when greater than 50%\ngray, MULTIPLY when lower.
    • \n
  • SOFT_LIGHT - mix of DARKEST and\nLIGHTEST. Works like OVERLAY, but not as harsh.\n
    • \n
  • DODGE - lightens light tones and increases contrast,\nignores darks.
    • \n
  • BURN - darker areas are applied, increasing contrast,\nignores lights.
    • \n
",
+                "itemtype": "method",
+                "name": "blendMode",
+                "params": [
+                    {
+                        "name": "mode",
+                        "description": "
blend mode to set for canvas.\n               either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n               EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n               SOFT_LIGHT, DODGE, BURN, ADD or NORMAL
\n",
+                        "type": "Constant"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n\n
\n
\n\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n\n
"
+                ],
+                "alt": "translucent image thick red & blue diagonal rounded lines intersecting center\nThick red & blue diagonal rounded lines intersecting center. dark at overlap",
+                "class": "p5",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/core/shim.js",
+                "line": 70,
+                "description": "
shim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.
\n",
+                "class": "p5",
+                "module": "Rendering"
+            },
+            {
+                "file": "src/core/structure.js",
+                "line": 15,
+                "description": "
Stops p5.js from continuously executing the code within draw().\nIf loop() is called, the code in draw() begins to run continuously again.\nIf using noLoop() in setup(), it should be the last line inside the block.\n

\nWhen noLoop() is used, it's not possible to manipulate or access the\nscreen inside event handling functions such as mousePressed() or\nkeyPressed(). Instead, use those functions to call redraw() or loop(),\nwhich will run draw(), which can update the screen properly. This means\nthat when noLoop() has been called, no drawing can happen, and functions\nlike saveFrame() or loadPixels() may not be used.\n

\nNote that if the sketch is resized, redraw() will be called to update\nthe sketch, even after noLoop() has been specified. Otherwise, the sketch\nwould enter an odd state until loop() was called.
\n",
+                "itemtype": "method",
+                "name": "noLoop",
+                "example": [
+                    "\n
\nfunction setup() {\n  createCanvas(100, 100);\n  background(200);\n  noLoop();\n}\n\nfunction draw() {\n  line(10, 10, 90, 90);\n}\n
\n\n
\nvar x = 0;\nfunction setup() {\n  createCanvas(100, 100);\n}\n\nfunction draw() {\n  background(204);\n  x = x + 0.1;\n  if (x > width) {\n    x = 0;\n  }\n  line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n  noLoop();\n}\n\nfunction mouseReleased() {\n  loop();\n}\n
"
+                ],
+                "alt": "113 pixel long line extending from top-left to bottom right of canvas.\nhorizontal line moves slowly from left. Loops but stops on mouse press.",
+                "class": "p5",
+                "module": "Structure",
+                "submodule": "Structure"
+            },
+            {
+                "file": "src/core/structure.js",
+                "line": 77,
+                "description": "
By default, p5.js loops through draw() continuously, executing the code\nwithin it. However, the draw() loop may be stopped by calling noLoop().\nIn that case, the draw() loop can be resumed with loop().
\n",
+                "itemtype": "method",
+                "name": "loop",
+                "example": [
+                    "\n
\nvar x = 0;\nfunction setup() {\n  createCanvas(100, 100);\n  noLoop();\n}\n\nfunction draw() {\n  background(204);\n  x = x + 0.1;\n  if (x > width) {\n    x = 0;\n  }\n  line(x, 0, x, height);\n}\n\nfunction mousePressed() {\n  loop();\n}\n\nfunction mouseReleased() {\n  noLoop();\n}\n
"
+                ],
+                "alt": "horizontal line moves slowly from left. Loops but stops on mouse press.",
+                "class": "p5",
+                "module": "Structure",
+                "submodule": "Structure"
+            },
+            {
+                "file": "src/core/structure.js",
+                "line": 132,
+                "description": "
The push() function saves the current drawing style settings and\ntransformations, while pop() restores these settings. Note that these\nfunctions are always used together. They allow you to change the style\nand transformation settings and later return to what you had. When a new\nstate is started with push(), it builds on the current style and transform\ninformation. The push() and pop() functions can be embedded to provide\nmore control. (See the second example for a demonstration.)\n

\npush() stores information related to the current transformation state\nand style settings controlled by the following functions: fill(),\nstroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),\nimageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),\ntextFont(), textMode(), textSize(), textLeading().
\n",
+                "itemtype": "method",
+                "name": "push",
+                "example": [
+                    "\n
\n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\ntranslate(50, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
\n
\n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
"
+                ],
+                "alt": "Gold ellipse + thick black outline @center 2 white ellipses on left and right.\n2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.",
+                "class": "p5",
+                "module": "Structure",
+                "submodule": "Structure"
+            },
+            {
+                "file": "src/core/structure.js",
+                "line": 211,
+                "description": "
The push() function saves the current drawing style settings and\ntransformations, while pop() restores these settings. Note that these\nfunctions are always used together. They allow you to change the style\nand transformation settings and later return to what you had. When a new\nstate is started with push(), it builds on the current style and transform\ninformation. The push() and pop() functions can be embedded to provide\nmore control. (See the second example for a demonstration.)\n

\npush() stores information related to the current transformation state\nand style settings controlled by the following functions: fill(),\nstroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),\nimageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),\ntextFont(), textMode(), textSize(), textLeading().
\n",
+                "itemtype": "method",
+                "name": "pop",
+                "example": [
+                    "\n
\n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\ntranslate(50, 0);\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(0, 50, 33, 33); // Middle circle\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
\n
\n\nellipse(0, 50, 33, 33); // Left circle\n\npush(); // Start a new drawing state\nstrokeWeight(10);\nfill(204, 153, 0);\nellipse(33, 50, 33, 33); // Left-middle circle\n\npush(); // Start another new drawing state\nstroke(0, 102, 153);\nellipse(66, 50, 33, 33); // Right-middle circle\npop(); // Restore previous state\n\npop(); // Restore original state\n\nellipse(100, 50, 33, 33); // Right circle\n\n
"
+                ],
+                "alt": "Gold ellipse + thick black outline @center 2 white ellipses on left and right.\n2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.",
+                "class": "p5",
+                "module": "Structure",
+                "submodule": "Structure"
+            },
+            {
+                "file": "src/core/structure.js",
+                "line": 282,
+                "description": "
Executes the code within draw() one time. This functions allows the\n program to update the display window only when necessary, for example\n when an event registered by mousePressed() or keyPressed() occurs.\n 

\n In structuring a program, it only makes sense to call redraw() within\n events such as mousePressed(). This is because redraw() does not run\n draw() immediately (it only sets a flag that indicates an update is\n needed).\n 

\n The redraw() function does not work properly when called inside draw().\n To enable/disable animations, use loop() and noLoop().\n 

\n In addition you can set the number of redraws per method call. Just\n add an integer as single parameter for the number of redraws.
\n",
+                "itemtype": "method",
+                "name": "redraw",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
Redraw for n-times. The default value is 1.
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n 
\n var x = 0;\nfunction setup() {\n   createCanvas(100, 100);\n   noLoop();\n }\nfunction draw() {\n   background(204);\n   line(x, 0, x, height);\n }\nfunction mousePressed() {\n   x += 1;\n   redraw();\n }\n 
\n
\n var x = 0;\nfunction setup() {\n   createCanvas(100, 100);\n   noLoop();\n }\nfunction draw() {\n   background(204);\n   x += 1;\n   line(x, 0, x, height);\n }\nfunction mousePressed() {\n   redraw(5);\n }\n 
"
+                ],
+                "alt": "black line on far left of canvas\n black line on far left of canvas",
+                "class": "p5",
+                "module": "Structure",
+                "submodule": "Structure"
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 14,
+                "description": "
Multiplies the current matrix by the one specified through the parameters.\nThis is a powerful operation that can perform the equivalent of translate,\nscale, shear and rotate all at once. You can learn more about transformation\nmatrices on \nWikipedia.
\n
The naming of the arguments here follows the naming of the \nWHATWG specification and corresponds to a\ntransformation matrix of the\nform:
\n
\n
\n
\n",
+                "itemtype": "method",
+                "name": "applyMatrix",
+                "params": [
+                    {
+                        "name": "a",
+                        "description": "
numbers which define the 2x3 matrix to be multiplied
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "b",
+                        "description": "
numbers which define the 2x3 matrix to be multiplied
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "c",
+                        "description": "
numbers which define the 2x3 matrix to be multiplied
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "d",
+                        "description": "
numbers which define the 2x3 matrix to be multiplied
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "e",
+                        "description": "
numbers which define the 2x3 matrix to be multiplied
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "f",
+                        "description": "
numbers which define the 2x3 matrix to be multiplied
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  frameRate(10);\n  rectMode(CENTER);\n}\n\nfunction draw() {\n  var step = frameCount % 20;\n  background(200);\n  // Equivalent to translate(x, y);\n  applyMatrix(1, 0, 0, 1, 40 + step, 50);\n  rect(0, 0, 50, 50);\n}\n\n
\n
\n\nfunction setup() {\n  frameRate(10);\n  rectMode(CENTER);\n}\n\nfunction draw() {\n  var step = frameCount % 20;\n  background(200);\n  translate(50, 50);\n  // Equivalent to scale(x, y);\n  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);\n  rect(0, 0, 50, 50);\n}\n\n
\n
\n\nfunction setup() {\n  frameRate(10);\n  rectMode(CENTER);\n}\n\nfunction draw() {\n  var step = frameCount % 20;\n  var angle = map(step, 0, 20, 0, TWO_PI);\n  var cos_a = cos(angle);\n  var sin_a = sin(angle);\n  background(200);\n  translate(50, 50);\n  // Equivalent to rotate(angle);\n  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);\n  rect(0, 0, 50, 50);\n}\n\n
\n
\n\nfunction setup() {\n  frameRate(10);\n  rectMode(CENTER);\n}\n\nfunction draw() {\n  var step = frameCount % 20;\n  var angle = map(step, 0, 20, -PI / 4, PI / 4);\n  background(200);\n  translate(50, 50);\n  // equivalent to shearX(angle);\n  var shear_factor = 1 / tan(PI / 2 - angle);\n  applyMatrix(1, 0, shear_factor, 1, 0, 0);\n  rect(0, 0, 50, 50);\n}\n\n
"
+                ],
+                "alt": "A rectangle translating to the right\nA rectangle shrinking to the center\nA rectangle rotating clockwise about the center\nA rectangle shearing",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform"
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 136,
+                "description": "
Replaces the current matrix with the identity matrix.
\n",
+                "itemtype": "method",
+                "name": "resetMatrix",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntranslate(50, 50);\napplyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);\nrect(0, 0, 20, 20);\n// Note that the translate is also reset.\nresetMatrix();\nrect(0, 0, 20, 20);\n\n
"
+                ],
+                "alt": "A rotated retangle in the center with another at the top left corner",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform"
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 162,
+                "description": "
Rotates a shape the amount specified by the angle parameter. This\nfunction accounts for angleMode, so angles can be entered in either\nRADIANS or DEGREES.\n

\nObjects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nTransformations apply to everything that happens after and subsequent\ncalls to the function accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when draw() begins again.\n

\nTechnically, rotate() multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe push() and pop().
\n",
+                "itemtype": "method",
+                "name": "rotate",
+                "params": [
+                    {
+                        "name": "angle",
+                        "description": "
the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "axis",
+                        "description": "
(in 3d) the axis to rotate around
\n",
+                        "type": "p5.Vector|Number[]",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n\n
"
+                ],
+                "alt": "white 52x52 rect with black outline at center rotated counter 45 degrees",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform"
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 208,
+                "description": "
Rotates around X axis.
\n",
+                "itemtype": "method",
+                "name": "rotateX",
+                "params": [
+                    {
+                        "name": "rad",
+                        "description": "
angles in radians
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateX(millis() / 1000);\n  box();\n}\n\n
"
+                ],
+                "alt": "3d box rotating around the x axis.",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform"
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 240,
+                "description": "
Rotates around Y axis.
\n",
+                "itemtype": "method",
+                "name": "rotateY",
+                "params": [
+                    {
+                        "name": "rad",
+                        "description": "
angles in radians
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateY(millis() / 1000);\n  box();\n}\n\n
"
+                ],
+                "alt": "3d box rotating around the y axis.",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform"
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 272,
+                "description": "
Rotates around Z axis. Webgl mode only.
\n",
+                "itemtype": "method",
+                "name": "rotateZ",
+                "params": [
+                    {
+                        "name": "rad",
+                        "description": "
angles in radians
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateZ(millis() / 1000);\n  box();\n}\n\n
"
+                ],
+                "alt": "3d box rotating around the z axis.",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform"
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 304,
+                "description": "
Increases or decreases the size of a shape by expanding and contracting\nvertices. Objects always scale from their relative origin to the\ncoordinate system. Scale values are specified as decimal percentages.\nFor example, the function call scale(2.0) increases the dimension of a\nshape by 200%.\n

\nTransformations apply to everything that happens after and subsequent\ncalls to the function multiply the effect. For example, calling scale(2.0)\nand then scale(1.5) is the same as scale(3.0). If scale() is called\nwithin draw(), the transformation is reset when the loop begins again.\n

\nUsing this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with push() and pop().
\n",
+                "itemtype": "method",
+                "name": "scale",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n\n
\n\n
\n\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n\n
"
+                ],
+                "alt": "white 52x52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform",
+                "overloads": [
+                    {
+                        "line": 304,
+                        "params": [
+                            {
+                                "name": "s",
+                                "description": "
percent to scale the object, or percentage to\n                     scale the object in the x-axis if multiple arguments\n                     are given
\n",
+                                "type": "Number|p5.Vector|Number[]"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
percent to scale the object in the y-axis
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "z",
+                                "description": "
percent to scale the object in the z-axis (webgl only)
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 349,
+                        "params": [
+                            {
+                                "name": "scales",
+                                "description": "
per-axis percents to scale the object
\n",
+                                "type": "p5.Vector|Number[]"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 379,
+                "description": "
Shears a shape around the x-axis the amount specified by the angle\nparameter. Angles should be specified in the current angleMode.\nObjects are always sheared around their relative position to the origin\nand positive numbers shear objects in a clockwise direction.\n

\nTransformations apply to everything that happens after and subsequent\ncalls to the function accumulates the effect. For example, calling\nshearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).\nIf shearX() is called within the draw(), the transformation is reset when\nthe loop begins again.\n

\nTechnically, shearX() multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\npush() and pop() functions.
\n",
+                "itemtype": "method",
+                "name": "shearX",
+                "params": [
+                    {
+                        "name": "angle",
+                        "description": "
angle of shear specified in radians or degrees,\n                       depending on current angleMode
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n\n
"
+                ],
+                "alt": "white irregular quadrilateral with black outline at top middle.",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform"
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 421,
+                "description": "
Shears a shape around the y-axis the amount specified by the angle\nparameter. Angles should be specified in the current angleMode. Objects\nare always sheared around their relative position to the origin and\npositive numbers shear objects in a clockwise direction.\n

\nTransformations apply to everything that happens after and subsequent\ncalls to the function accumulates the effect. For example, calling\nshearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If\nshearY() is called within the draw(), the transformation is reset when\nthe loop begins again.\n

\nTechnically, shearY() multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\npush() and pop() functions.
\n",
+                "itemtype": "method",
+                "name": "shearY",
+                "params": [
+                    {
+                        "name": "angle",
+                        "description": "
angle of shear specified in radians or degrees,\n                       depending on current angleMode
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n\n
"
+                ],
+                "alt": "white irregular quadrilateral with black outline at middle bottom.",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform"
+            },
+            {
+                "file": "src/core/transform.js",
+                "line": 463,
+                "description": "
Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.\n

\nTransformations are cumulative and apply to everything that happens after\nand subsequent calls to the function accumulates the effect. For example,\ncalling translate(50, 0) and then translate(20, 0) is the same as\ntranslate(70, 0). If translate() is called within draw(), the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using push() and pop().
\n",
+                "itemtype": "method",
+                "name": "translate",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
left/right translation
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
up/down translation
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "z",
+                        "description": "
forward/backward translation (webgl only)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n\n
\n\n
\n\nrect(0, 0, 55, 55); // Draw rect at original 0,0\ntranslate(30, 20);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\ntranslate(14, 14);\nrect(0, 0, 55, 55); // Draw rect at new 0,0\n\n
"
+                ],
+                "alt": "white 55x55 rect with black outline at center right.\n3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.",
+                "class": "p5",
+                "module": "Transform",
+                "submodule": "Transform"
+            },
+            {
+                "file": "src/core/vertex.js",
+                "line": 22,
+                "description": "
Use the beginContour() and endContour() functions to create negative\nshapes within shapes such as the center of the letter 'O'. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must "wind" in the opposite\ndirection from the exterior shape. First draw vertices for the exterior\nclockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.\n

\nThese functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.
\n",
+                "itemtype": "method",
+                "name": "beginContour",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n\n
"
+                ],
+                "alt": "white rect and smaller grey rect with red outlines in center of canvas.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Vertex"
+            },
+            {
+                "file": "src/core/vertex.js",
+                "line": 70,
+                "description": "
Using the beginShape() and endShape() functions allow creating more\ncomplex forms. beginShape() begins recording vertices for a shape and\nendShape() stops recording. The value of the kind parameter tells it which\ntypes of shapes to create from the provided vertices. With no mode\nspecified, the shape can be any irregular polygon.\n

\nThe parameters available for beginShape() are POINTS, LINES, TRIANGLES,\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the\nbeginShape() function, a series of vertex() commands must follow. To stop\ndrawing the shape, call endShape(). Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.\n

\nTransformations such as translate(), rotate(), and scale() do not work\nwithin beginShape(). It is also not possible to use other shapes, such as\nellipse() or rect() within beginShape().
\n",
+                "itemtype": "method",
+                "name": "beginShape",
+                "params": [
+                    {
+                        "name": "kind",
+                        "description": "
either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n                               TRIANGLE_STRIP, QUADS, or QUAD_STRIP
\n",
+                        "type": "Constant",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n\n
\n\n
\n\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
\n\n
\n\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
\n\n
\n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
\n\n
\n\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n\n
\n\n
\n\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n\n
\n\n
\n\nbeginShape(TRIANGLE_STRIP);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nvertex(90, 75);\nendShape();\n\n
\n\n
\n\nbeginShape(TRIANGLE_FAN);\nvertex(57.5, 50);\nvertex(57.5, 15);\nvertex(92, 50);\nvertex(57.5, 85);\nvertex(22, 50);\nvertex(57.5, 15);\nendShape();\n\n
\n\n
\n\nbeginShape(QUADS);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 75);\nvertex(50, 20);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 75);\nvertex(85, 20);\nendShape();\n\n
\n\n
\n\nbeginShape(QUAD_STRIP);\nvertex(30, 20);\nvertex(30, 75);\nvertex(50, 20);\nvertex(50, 75);\nvertex(65, 20);\nvertex(65, 75);\nvertex(85, 20);\nvertex(85, 75);\nendShape();\n\n
\n\n
\n\nbeginShape();\nvertex(20, 20);\nvertex(40, 20);\nvertex(40, 40);\nvertex(60, 40);\nvertex(60, 60);\nvertex(20, 60);\nendShape(CLOSE);\n\n
"
+                ],
+                "alt": "white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20x55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Vertex"
+            },
+            {
+                "file": "src/core/vertex.js",
+                "line": 269,
+                "description": "
Specifies vertex coordinates for Bezier curves. Each call to\nbezierVertex() defines the position of two control points and\none anchor point of a Bezier curve, adding a new segment to a\nline or shape.\n

\nThe first time bezierVertex() is used within a\nbeginShape() call, it must be prefaced with a call to vertex()\nto set the first anchor point. This function must be used between\nbeginShape() and endShape() and only when there is no MODE\nparameter specified to beginShape().
\n",
+                "itemtype": "method",
+                "name": "bezierVertex",
+                "params": [
+                    {
+                        "name": "x2",
+                        "description": "
x-coordinate for the first control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y2",
+                        "description": "
y-coordinate for the first control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "x3",
+                        "description": "
x-coordinate for the second control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y3",
+                        "description": "
y-coordinate for the second control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "x4",
+                        "description": "
x-coordinate for the anchor point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y4",
+                        "description": "
y-coordinate for the anchor point
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n\n
\n\n
\n\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n\n
"
+                ],
+                "alt": "crescent-shaped line in middle of canvas. Points facing left.\nwhite crescent shape in middle of canvas. Points facing left.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Vertex"
+            },
+            {
+                "file": "src/core/vertex.js",
+                "line": 335,
+                "description": "
Specifies vertex coordinates for curves. This function may only\nbe used between beginShape() and endShape() and only when there\nis no MODE parameter specified to beginShape().\n

\nThe first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of a the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.
\n",
+                "itemtype": "method",
+                "name": "curveVertex",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of the vertex
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of the vertex
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nnoFill();\nbeginShape();\ncurveVertex(84, 91);\ncurveVertex(84, 91);\ncurveVertex(68, 19);\ncurveVertex(21, 17);\ncurveVertex(32, 100);\ncurveVertex(32, 100);\nendShape();\n\n
"
+                ],
+                "alt": "Upside-down u-shape line, mid canvas. left point extends beyond canvas view.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Vertex"
+            },
+            {
+                "file": "src/core/vertex.js",
+                "line": 378,
+                "description": "
Use the beginContour() and endContour() functions to create negative\nshapes within shapes such as the center of the letter 'O'. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must "wind" in the opposite\ndirection from the exterior shape. First draw vertices for the exterior\nclockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.\n

\nThese functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.
\n",
+                "itemtype": "method",
+                "name": "endContour",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntranslate(50, 50);\nstroke(255, 0, 0);\nbeginShape();\n// Exterior part of shape, clockwise winding\nvertex(-40, -40);\nvertex(40, -40);\nvertex(40, 40);\nvertex(-40, 40);\n// Interior part of shape, counter-clockwise winding\nbeginContour();\nvertex(-20, -20);\nvertex(-20, 20);\nvertex(20, 20);\nvertex(20, -20);\nendContour();\nendShape(CLOSE);\n\n
"
+                ],
+                "alt": "white rect and smaller grey rect with red outlines in center of canvas.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Vertex"
+            },
+            {
+                "file": "src/core/vertex.js",
+                "line": 438,
+                "description": "
The endShape() function is the companion to beginShape() and may only be\ncalled after beginShape(). When endshape() is called, all of image data\ndefined since the previous call to beginShape() is written into the image\nbuffer. The constant CLOSE as the value for the MODE parameter to close\nthe shape (to connect the beginning and the end).
\n",
+                "itemtype": "method",
+                "name": "endShape",
+                "params": [
+                    {
+                        "name": "mode",
+                        "description": "
use CLOSE to close the shape
\n",
+                        "type": "Constant",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nnoFill();\n\nbeginShape();\nvertex(20, 20);\nvertex(45, 20);\nvertex(45, 80);\nendShape(CLOSE);\n\nbeginShape();\nvertex(50, 20);\nvertex(75, 20);\nvertex(75, 80);\nendShape();\n\n
"
+                ],
+                "alt": "Triangle line shape with smallest interior angle on bottom and upside-down L.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Vertex"
+            },
+            {
+                "file": "src/core/vertex.js",
+                "line": 523,
+                "description": "
Specifies vertex coordinates for quadratic Bezier curves. Each call to\nquadraticVertex() defines the position of one control points and one\nanchor point of a Bezier curve, adding a new segment to a line or shape.\nThe first time quadraticVertex() is used within a beginShape() call, it\nmust be prefaced with a call to vertex() to set the first anchor point.\nThis function must be used between beginShape() and endShape() and only\nwhen there is no MODE parameter specified to beginShape().
\n",
+                "itemtype": "method",
+                "name": "quadraticVertex",
+                "params": [
+                    {
+                        "name": "cx",
+                        "description": "
x-coordinate for the control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "cy",
+                        "description": "
y-coordinate for the control point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "x3",
+                        "description": "
x-coordinate for the anchor point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y3",
+                        "description": "
y-coordinate for the anchor point
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nnoFill();\nstrokeWeight(4);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nendShape();\n\n
\n\n
\n\nnoFill();\nstrokeWeight(4);\nbeginShape();\nvertex(20, 20);\nquadraticVertex(80, 20, 50, 50);\nquadraticVertex(20, 80, 80, 80);\nvertex(80, 60);\nendShape();\n\n
"
+                ],
+                "alt": "arched-shaped black line with 4 pixel thick stroke weight.\nbackwards s-shaped black line with 4 pixel thick stroke weight.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Vertex"
+            },
+            {
+                "file": "src/core/vertex.js",
+                "line": 601,
+                "description": "
All shapes are constructed by connecting a series of vertices. vertex()\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the beginShape() and\nendShape() functions.
\n",
+                "itemtype": "method",
+                "name": "vertex",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n\n
"
+                ],
+                "alt": "4 black points in a square shape in middle-right of canvas.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "Vertex",
+                "overloads": [
+                    {
+                        "line": 601,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
x-coordinate of the vertex
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
y-coordinate of the vertex
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 627,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z",
+                                "description": "
z-coordinate of the vertex
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "u",
+                                "description": "
the vertex's texture u-coordinate
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "v",
+                                "description": "
the vertex's texture v-coordinate
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 16,
+                "description": "
Creates a new instance of p5.StringDict using the key, value pair\n or object you provide.
\n",
+                "itemtype": "method",
+                "name": "createStringDict",
+                "params": [
+                    {
+                        "name": "key",
+                        "description": "
or object
\n",
+                        "type": "String|Object"
+                    },
+                    {
+                        "name": "value",
+                        "description": "",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "p5.StringDict"
+                },
+                "example": [
+                    "\n 
\n \n function setup() {\n   var myDictionary = createStringDict('p5', 'js');\n   print(myDictionary.hasKey('p5')); // logs true to console\n }\n 
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 41,
+                "description": "
Creates a new instance of p5.NumberDict using the key, value pair\n or object you provide.
\n",
+                "itemtype": "method",
+                "name": "createNumberDict",
+                "params": [
+                    {
+                        "name": "key",
+                        "description": "
or object
\n",
+                        "type": "Number|Object"
+                    },
+                    {
+                        "name": "value",
+                        "description": "",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "p5.NumberDict"
+                },
+                "example": [
+                    "\n 
\n \n function setup() {\n   var myDictionary = createNumberDict('p5', 42);\n   print(myDictionary.hasKey('p5')); // logs true to console\n }\n 
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 86,
+                "description": "
Returns the number of key-value pairs currently in Dictionary object
\n",
+                "itemtype": "method",
+                "name": "size",
+                "return": {
+                    "description": "the number of key-value pairs in Dictionary object",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createNumberDict(1, 10);\n  myDictionary.create(2, 20);\n  myDictionary.create(3, 30);\n  print(myDictionary.size()); // value of amt is 3\n}\n
\n"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 108,
+                "description": "
Returns true if key exists in Dictionary\notherwise returns false
\n",
+                "itemtype": "method",
+                "name": "hasKey",
+                "params": [
+                    {
+                        "name": "key",
+                        "description": "
that you want to access
\n",
+                        "type": "Number|String"
+                    }
+                ],
+                "return": {
+                    "description": "whether that key exists in Dictionary",
+                    "type": "Boolean"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createStringDict('p5', 'js');\n  print(myDictionary.hasKey('p5')); // logs true to console\n}\n
\n"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 131,
+                "description": "
Returns value stored at supplied key.
\n",
+                "itemtype": "method",
+                "name": "get",
+                "params": [
+                    {
+                        "name": "key",
+                        "description": "
that you want to access
\n",
+                        "type": "Number|String"
+                    }
+                ],
+                "return": {
+                    "description": "the value stored at that key",
+                    "type": "Number|String"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createStringDict('p5', 'js');\n  var myValue = myDictionary.get('p5');\n  print(myValue === 'js'); // logs true to console\n}\n
\n"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 158,
+                "description": "
Changes the value of key if in it already exists in\nin the Dictionary otherwise makes a new key-value pair
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "key",
+                        "description": "",
+                        "type": "Number|String"
+                    },
+                    {
+                        "name": "value",
+                        "description": "",
+                        "type": "Number|String"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createStringDict('p5', 'js');\n  myDictionary.set('p5', 'JS');\n  myDictionary.print();\n  // above logs \"key: p5 - value: JS\" to console\n}\n
\n"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 187,
+                "description": "
private helper function to handle the user passing objects in\nduring construction or calls to create()
\n",
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 198,
+                "description": "
Creates a key-value pair in the Dictionary
\n",
+                "itemtype": "method",
+                "name": "create",
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createStringDict('p5', 'js');\n  myDictionary.create('happy', 'coding');\n  myDictionary.print();\n  // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n
"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary",
+                "overloads": [
+                    {
+                        "line": 198,
+                        "params": [
+                            {
+                                "name": "key",
+                                "description": "",
+                                "type": "Number|String"
+                            },
+                            {
+                                "name": "value",
+                                "description": "",
+                                "type": "Number|String"
+                            }
+                        ]
+                    },
+                    {
+                        "line": 216,
+                        "params": [
+                            {
+                                "name": "obj",
+                                "description": "
key/value pair
\n",
+                                "type": "Object"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 234,
+                "description": "
Empties Dictionary of all key-value pairs
\n",
+                "itemtype": "method",
+                "name": "clear",
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createStringDict('p5', 'js');\n  print(myDictionary.hasKey('p5')); // prints 'true'\n  myDictionary.clear();\n  print(myDictionary.hasKey('p5')); // prints 'false'\n}\n\n
"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 254,
+                "description": "
Removes a key-value pair in the Dictionary
\n",
+                "itemtype": "method",
+                "name": "remove",
+                "params": [
+                    {
+                        "name": "key",
+                        "description": "
for the pair to remove
\n",
+                        "type": "Number|String"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createStringDict('p5', 'js');\n  myDictionary.create('happy', 'coding');\n  myDictionary.print();\n  // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n  myDictionary.remove('p5');\n  myDictionary.print();\n  // above logs \"key: happy value: coding\" to console\n}\n
\n"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 284,
+                "description": "
Logs the list of items currently in the Dictionary to the console
\n",
+                "itemtype": "method",
+                "name": "print",
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createStringDict('p5', 'js');\n  myDictionary.create('happy', 'coding');\n  myDictionary.print();\n  // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n\n
"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 308,
+                "description": "
Converts the Dictionary into a CSV file for local\nstorage.
\n",
+                "itemtype": "method",
+                "name": "saveTable",
+                "example": [
+                    "\n
\n\ncreateButton('save')\n  .position(10, 10)\n  .mousePressed(function() {\n    createNumberDict({\n      john: 1940,\n     paul: 1942,\n     george: 1943,\n     ringo: 1940\n    }).saveTable('beatles');\n  });\n\n
"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 341,
+                "description": "
Converts the Dictionary into a JSON file for local\nstorage.
\n",
+                "itemtype": "method",
+                "name": "saveJSON",
+                "example": [
+                    "\n
\n\ncreateButton('save')\n  .position(10, 10)\n  .mousePressed(function() {\n    createNumberDict({\n      john: 1940,\n     paul: 1942,\n     george: 1943,\n     ringo: 1940\n    }).saveJSON('beatles');\n  });\n\n
"
+                ],
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 367,
+                "description": "
private helper function to ensure that the user passed in valid\nvalues for the Dictionary type
\n",
+                "class": "p5.TypedDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 414,
+                "description": "
private helper function to ensure that the user passed in valid\nvalues for the Dictionary type
\n",
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 423,
+                "description": "
Add to a value stored at a certain key\nThe sum is stored in that location in the Dictionary.
\n",
+                "itemtype": "method",
+                "name": "add",
+                "params": [
+                    {
+                        "name": "Key",
+                        "description": "
for value you wish to add to
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "Amount",
+                        "description": "
to add to the value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createNumberDict(2, 5);\n  myDictionary.add(2, 2);\n  console.log(myDictionary.get(2)); // logs 7 to console.\n}\n
\n\n"
+                ],
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 451,
+                "description": "
Subtract from a value stored at a certain key\nThe difference is stored in that location in the Dictionary.
\n",
+                "itemtype": "method",
+                "name": "sub",
+                "params": [
+                    {
+                        "name": "Key",
+                        "description": "
for value you wish to subtract from
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "Amount",
+                        "description": "
to subtract from the value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createNumberDict(2, 5);\n  myDictionary.sub(2, 2);\n  console.log(myDictionary.get(2)); // logs 3 to console.\n}\n
\n\n"
+                ],
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 475,
+                "description": "
Multiply a value stored at a certain key\nThe product is stored in that location in the Dictionary.
\n",
+                "itemtype": "method",
+                "name": "mult",
+                "params": [
+                    {
+                        "name": "Key",
+                        "description": "
for value you wish to multiply
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "Amount",
+                        "description": "
to multiply the value by
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createNumberDict(2, 4);\n  myDictionary.mult(2, 2);\n  console.log(myDictionary.get(2)); // logs 8 to console.\n}\n
\n\n"
+                ],
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 503,
+                "description": "
Divide a value stored at a certain key\nThe quotient is stored in that location in the Dictionary.
\n",
+                "itemtype": "method",
+                "name": "div",
+                "params": [
+                    {
+                        "name": "Key",
+                        "description": "
for value you wish to divide
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "Amount",
+                        "description": "
to divide the value by
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createNumberDict(2, 8);\n  myDictionary.div(2, 2);\n  console.log(myDictionary.get(2)); // logs 4 to console.\n}\n
\n\n"
+                ],
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 531,
+                "description": "
private helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'
\n",
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 554,
+                "description": "
Return the lowest value.
\n",
+                "itemtype": "method",
+                "name": "minValue",
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n  var lowestValue = myDictionary.minValue(); // value is -10\n  print(lowestValue);\n}\n
\n"
+                ],
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 575,
+                "description": "
Return the highest value.
\n",
+                "itemtype": "method",
+                "name": "maxValue",
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n  var highestValue = myDictionary.maxValue(); // value is 3\n  print(highestValue);\n}\n
\n"
+                ],
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 596,
+                "description": "
private helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'
\n",
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 619,
+                "description": "
Return the lowest key.
\n",
+                "itemtype": "method",
+                "name": "minKey",
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n  var lowestKey = myDictionary.minKey(); // value is 1.2\n  print(lowestKey);\n}\n
\n"
+                ],
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/data/p5.TypedDict.js",
+                "line": 640,
+                "description": "
Return the highest key.
\n",
+                "itemtype": "method",
+                "name": "maxKey",
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n  var highestKey = myDictionary.maxKey(); // value is 4\n  print(highestKey);\n}\n
\n"
+                ],
+                "class": "p5.NumberDict",
+                "module": "Data",
+                "submodule": "Dictionary"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 12,
+                "description": "
The system variable deviceOrientation always contains the orientation of\nthe device. The value of this variable will either be set 'landscape'\nor 'portrait'. If no data is available it will be set to 'undefined'.\neither LANDSCAPE or PORTRAIT.
\n",
+                "itemtype": "property",
+                "name": "deviceOrientation",
+                "type": "Constant",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 23,
+                "description": "
The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.
\n",
+                "itemtype": "property",
+                "name": "accelerationX",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 32,
+                "description": "
The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.
\n",
+                "itemtype": "property",
+                "name": "accelerationY",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 41,
+                "description": "
The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.
\n",
+                "itemtype": "property",
+                "name": "accelerationZ",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 50,
+                "description": "
The system variable pAccelerationX always contains the acceleration of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as meters per second squared.
\n",
+                "itemtype": "property",
+                "name": "pAccelerationX",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 60,
+                "description": "
The system variable pAccelerationY always contains the acceleration of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as meters per second squared.
\n",
+                "itemtype": "property",
+                "name": "pAccelerationY",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 70,
+                "description": "
The system variable pAccelerationZ always contains the acceleration of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as meters per second squared.
\n",
+                "itemtype": "property",
+                "name": "pAccelerationZ",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 91,
+                "description": "
The system variable rotationX always contains the rotation of the\ndevice along the x axis. Value is represented as 0 to +/-180 degrees.\n

\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.
\n",
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n\n
"
+                ],
+                "itemtype": "property",
+                "name": "rotationX",
+                "type": "Number",
+                "readonly": "",
+                "alt": "red horizontal line right, green vertical line bottom. black background.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 125,
+                "description": "
The system variable rotationY always contains the rotation of the\ndevice along the y axis. Value is represented as 0 to +/-90 degrees.\n

\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.
\n",
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n\n
"
+                ],
+                "itemtype": "property",
+                "name": "rotationY",
+                "type": "Number",
+                "readonly": "",
+                "alt": "red horizontal line right, green vertical line bottom. black background.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 158,
+                "description": "
The system variable rotationZ always contains the rotation of the\ndevice along the z axis. Value is represented as 0 to 359 degrees.\n

\nUnlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.\n

\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.
\n",
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n\n
"
+                ],
+                "itemtype": "property",
+                "name": "rotationZ",
+                "type": "Number",
+                "readonly": "",
+                "alt": "red horizontal line right, green vertical line bottom. black background.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 194,
+                "description": "
The system variable pRotationX always contains the rotation of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as 0 to +/-180 degrees.\n

\npRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.
\n",
+                "example": [
+                    "\n
\n\n// A simple if statement looking at whether\n// rotationX - pRotationX < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nvar rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nvar rX = rotationX + 180;\nvar pRX = pRotationX + 180;\n\nif ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {\n  rotateDirection = 'clockwise';\n} else if (rX - pRX < 0 || rX - pRX > 270) {\n  rotateDirection = 'counter-clockwise';\n}\n\nprint(rotateDirection);\n\n
"
+                ],
+                "alt": "no image to display.",
+                "itemtype": "property",
+                "name": "pRotationX",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 239,
+                "description": "
The system variable pRotationY always contains the rotation of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as 0 to +/-90 degrees.\n

\npRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.
\n",
+                "example": [
+                    "\n
\n\n// A simple if statement looking at whether\n// rotationY - pRotationY < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nvar rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nvar rY = rotationY + 180;\nvar pRY = pRotationY + 180;\n\nif ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {\n  rotateDirection = 'clockwise';\n} else if (rY - pRY < 0 || rY - pRY > 270) {\n  rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\n\n
"
+                ],
+                "alt": "no image to display.",
+                "itemtype": "property",
+                "name": "pRotationY",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 283,
+                "description": "
The system variable pRotationZ always contains the rotation of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as 0 to 359 degrees.\n

\npRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.
\n",
+                "example": [
+                    "\n
\n\n// A simple if statement looking at whether\n// rotationZ - pRotationZ < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nvar rotateDirection = 'clockwise';\n\nif (\n  (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||\n  rotationZ - pRotationZ < -270\n) {\n  rotateDirection = 'clockwise';\n} else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {\n  rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\n\n
"
+                ],
+                "alt": "no image to display.",
+                "itemtype": "property",
+                "name": "pRotationZ",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 341,
+                "itemtype": "property",
+                "name": "turnAxis",
+                "type": "String",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 350,
+                "description": "
The setMoveThreshold() function is used to set the movement threshold for\nthe deviceMoved() function. The default threshold is set to 0.5.
\n",
+                "itemtype": "method",
+                "name": "setMoveThreshold",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
The threshold value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 363,
+                "description": "
The setShakeThreshold() function is used to set the movement threshold for\nthe deviceShaken() function. The default threshold is set to 30.
\n",
+                "itemtype": "method",
+                "name": "setShakeThreshold",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
The threshold value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 376,
+                "description": "
The deviceMoved() function is called when the device is moved by more than\nthe threshold value along X, Y or Z axis. The default threshold is set to\n0.5.
\n",
+                "itemtype": "method",
+                "name": "deviceMoved",
+                "example": [
+                    "\n
\n\n// Run this example on a mobile device\n// Move the device around\n// to change the value.\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction deviceMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n\n
"
+                ],
+                "alt": "50x50 black rect in center of canvas. turns white on mobile when device moves",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 407,
+                "description": "
The deviceTurned() function is called when the device rotates by\nmore than 90 degrees continuously.\n

\nThe axis that triggers the deviceTurned() method is stored in the turnAxis\nvariable. The deviceTurned() method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
\n",
+                "itemtype": "method",
+                "name": "deviceTurned",
+                "example": [
+                    "\n
\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees\n// to change the value.\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction deviceTurned() {\n  if (value === 0) {\n    value = 255;\n  } else if (value === 255) {\n    value = 0;\n  }\n}\n\n
\n
\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction deviceTurned() {\n  if (turnAxis === 'X') {\n    if (value === 0) {\n      value = 255;\n    } else if (value === 255) {\n      value = 0;\n    }\n  }\n}\n\n
"
+                ],
+                "alt": "50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/acceleration.js",
+                "line": 466,
+                "description": "
The deviceShaken() function is called when the device total acceleration\nchanges of accelerationX and accelerationY values is more than\nthe threshold value. The default threshold is set to 30.
\n",
+                "itemtype": "method",
+                "name": "deviceShaken",
+                "example": [
+                    "\n
\n\n// Run this example on a mobile device\n// Shake the device to change the value.\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction deviceShaken() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n\n
"
+                ],
+                "alt": "50x50 black rect in center of canvas. turns white on mobile when device shakes",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Acceleration"
+            },
+            {
+                "file": "src/events/keyboard.js",
+                "line": 18,
+                "description": "
The boolean system variable keyIsPressed is true if any key is pressed\nand false if no keys are pressed.
\n",
+                "itemtype": "property",
+                "name": "keyIsPressed",
+                "type": "Boolean",
+                "readonly": "",
+                "example": [
+                    "\n
\n\nfunction draw() {\n  if (keyIsPressed === true) {\n    fill(0);\n  } else {\n    fill(255);\n  }\n  rect(25, 25, 50, 50);\n}\n\n
"
+                ],
+                "alt": "50x50 white rect that turns black on keypress.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Keyboard"
+            },
+            {
+                "file": "src/events/keyboard.js",
+                "line": 45,
+                "description": "
The system variable key always contains the value of the most recent\nkey on the keyboard that was typed. To get the proper capitalization, it\nis best to use it within keyTyped(). For non-ASCII keys, use the keyCode\nvariable.
\n",
+                "itemtype": "property",
+                "name": "key",
+                "type": "String",
+                "readonly": "",
+                "example": [
+                    "\n
\n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n  fill(245, 123, 158);\n  textSize(50);\n}\n\nfunction draw() {\n  background(200);\n  text(key, 33, 65); // Display last key pressed.\n}\n
"
+                ],
+                "alt": "canvas displays any key value that is pressed in pink font.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Keyboard"
+            },
+            {
+                "file": "src/events/keyboard.js",
+                "line": 74,
+                "description": "
The variable keyCode is used to detect special keys such as BACKSPACE,\nDELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,\nDOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\nYou can also check for custom keys by looking up the keyCode of any key\non a site like this: keycode.info.
\n",
+                "itemtype": "property",
+                "name": "keyCode",
+                "type": "Integer",
+                "readonly": "",
+                "example": [
+                    "\n
\nvar fillVal = 126;\nfunction draw() {\n  fill(fillVal);\n  rect(25, 25, 50, 50);\n}\n\nfunction keyPressed() {\n  if (keyCode === UP_ARROW) {\n    fillVal = 255;\n  } else if (keyCode === DOWN_ARROW) {\n    fillVal = 0;\n  }\n  return false; // prevent default\n}\n
"
+                ],
+                "alt": "Grey rect center. turns white when up arrow pressed and black when down",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Keyboard"
+            },
+            {
+                "file": "src/events/keyboard.js",
+                "line": 107,
+                "description": "
The keyPressed() function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the keyCode variable.\n

\nFor non-ASCII keys, use the keyCode variable. You can check if the keyCode\nequals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL,\nOPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\n

\nFor ASCII keys that was pressed is stored in the key variable. However, it\ndoes not distinguish between uppercase and lowercase. For this reason, it\nis recommended to use keyTyped() to read the key variable, in which the\ncase of the variable will be distinguished.\n

\nBecause of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to keyTyped() (and keyReleased() as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.

\nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n",
+                "itemtype": "method",
+                "name": "keyPressed",
+                "example": [
+                    "\n
\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n\n
\n
\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n\n
\n
\n\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n\n
"
+                ],
+                "alt": "black rect center. turns white when key pressed and black when released\nblack rect center. turns white when left arrow pressed and black when right.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Keyboard"
+            },
+            {
+                "file": "src/events/keyboard.js",
+                "line": 198,
+                "description": "
The keyReleased() function is called once every time a key is released.\nSee key and keyCode for more information.

\nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n",
+                "itemtype": "method",
+                "name": "keyReleased",
+                "example": [
+                    "\n
\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n\n
"
+                ],
+                "alt": "black rect center. turns white when key pressed and black when pressed again",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Keyboard"
+            },
+            {
+                "file": "src/events/keyboard.js",
+                "line": 254,
+                "description": "
The keyTyped() function is called once every time a key is pressed, but\naction keys such as Ctrl, Shift, and Alt are ignored. The most recent\nkey pressed will be stored in the key variable.\n

\nBecause of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to keyTyped() (and keyReleased() as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.

\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add "return false"\nto the end of the method.
\n",
+                "itemtype": "method",
+                "name": "keyTyped",
+                "example": [
+                    "\n
\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n\n
"
+                ],
+                "alt": "black rect center. turns white when 'a' key typed and black when 'b' pressed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Keyboard"
+            },
+            {
+                "file": "src/events/keyboard.js",
+                "line": 308,
+                "description": "
The onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.
\n",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Keyboard"
+            },
+            {
+                "file": "src/events/keyboard.js",
+                "line": 318,
+                "description": "
The keyIsDown() function checks if the key is currently down, i.e. pressed.\nIt can be used if you have an object that moves, and you want several keys\nto be able to affect its behaviour simultaneously, such as moving a\nsprite diagonally. You can put in any number representing the keyCode of\nthe key, or use any of the variable keyCode names listed\nhere.
\n",
+                "itemtype": "method",
+                "name": "keyIsDown",
+                "params": [
+                    {
+                        "name": "code",
+                        "description": "
The key to check for.
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "whether key is down or not",
+                    "type": "Boolean"
+                },
+                "example": [
+                    "\n
\nvar x = 100;\nvar y = 100;\n\nfunction setup() {\n  createCanvas(512, 512);\n}\n\nfunction draw() {\n  if (keyIsDown(LEFT_ARROW)) {\n    x -= 5;\n  }\n\n  if (keyIsDown(RIGHT_ARROW)) {\n    x += 5;\n  }\n\n  if (keyIsDown(UP_ARROW)) {\n    y -= 5;\n  }\n\n  if (keyIsDown(DOWN_ARROW)) {\n    y += 5;\n  }\n\n  clear();\n  fill(255, 0, 0);\n  ellipse(x, y, 50, 50);\n}\n
"
+                ],
+                "alt": "50x50 red ellipse moves left, right, up and down with arrow presses.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Keyboard"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 22,
+                "description": "
The system variable mouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the canvas. If touch is\nused instead of mouse input, mouseX will hold the x value of the most\nrecent touch point.
\n",
+                "itemtype": "property",
+                "name": "mouseX",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\n\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, 0, mouseX, 100);\n}\n\n
"
+                ],
+                "alt": "horizontal black line moves left and right with mouse x-position",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 48,
+                "description": "
The system variable mouseY always contains the current vertical position\nof the mouse, relative to (0, 0) of the canvas. If touch is\nused instead of mouse input, mouseY will hold the y value of the most\nrecent touch point.
\n",
+                "itemtype": "property",
+                "name": "mouseY",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\n\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(0, mouseY, 100, mouseY);\n}\n\n
"
+                ],
+                "alt": "vertical black line moves up and down with mouse y-position",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 74,
+                "description": "
The system variable pmouseX always contains the horizontal position of\nthe mouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas.
\n",
+                "itemtype": "property",
+                "name": "pmouseX",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\n\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n  //slow down the frameRate to make it more visible\n  frameRate(10);\n}\n\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, mouseY, pmouseX, pmouseY);\n  print(pmouseX + ' -> ' + mouseX);\n}\n\n
"
+                ],
+                "alt": "line trail is created from cursor movements. faster movement make longer line.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 105,
+                "description": "
The system variable pmouseY always contains the vertical position of the\nmouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas.
\n",
+                "itemtype": "property",
+                "name": "pmouseY",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  //draw a square only if the mouse is not moving\n  if (mouseY === pmouseY && mouseX === pmouseX) {\n    rect(20, 20, 60, 60);\n  }\n\n  print(pmouseY + ' -> ' + mouseY);\n}\n\n
"
+                ],
+                "alt": "60x60 black rect center, fuschia background. rect flickers on mouse movement",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 135,
+                "description": "
The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.
\n",
+                "itemtype": "property",
+                "name": "winMouseX",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\n\nvar myCanvas;\n\nfunction setup() {\n  //use a variable to store a pointer to the canvas\n  myCanvas = createCanvas(100, 100);\n}\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  //move the canvas to the horizontal mouse position\n  //rela                    tive to the window\n  myCanvas.position(winMouseX + 1, windowHeight / 2);\n\n  //the y of the square is relative to the canvas\n  rect(20, mouseY, 60, 60);\n}\n\n
"
+                ],
+                "alt": "60x60 black rect y moves with mouse y and fuschia canvas moves with mouse x",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 172,
+                "description": "
The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.
\n",
+                "itemtype": "property",
+                "name": "winMouseY",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\n\nvar myCanvas;\n\nfunction setup() {\n  //use a variable to store a pointer to the canvas\n  myCanvas = createCanvas(100, 100);\n}\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  //move the canvas to the vertical mouse position\n  //rel                    ative to the window\n  myCanvas.position(windowWidth / 2, winMouseY + 1);\n\n  //the x of the square is relative to the canvas\n  rect(mouseX, 20, 60, 60);\n}\n\n
"
+                ],
+                "alt": "60x60 black rect x moves with mouse x and fuschia canvas y moves with mouse y",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 209,
+                "description": "
The system variable pwinMouseX always contains the horizontal position\nof the mouse in the frame previous to the current frame, relative to\n(0, 0) of the window.
\n",
+                "itemtype": "property",
+                "name": "pwinMouseX",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\n\nvar myCanvas;\n\nfunction setup() {\n  //use a variable to store a pointer to the canvas\n  myCanvas = createCanvas(100, 100);\n  noStroke();\n  fill(237, 34, 93);\n}\n\nfunction draw() {\n  clear();\n  //the difference between previous and\n  //current x position is the horizontal mouse speed\n  var speed = abs(winMouseX - pwinMouseX);\n  //change the size of the circle\n  //according to the horizontal speed\n  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n  //move the canvas to the mouse position\n  myCanvas.position(winMouseX + 1, winMouseY + 1);\n}\n\n
"
+                ],
+                "alt": "fuschia ellipse moves with mouse x and y. Grows and shrinks with mouse speed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 249,
+                "description": "
The system variable pwinMouseY always contains the vertical position of\nthe mouse in the frame previous to the current frame, relative to (0, 0)\nof the window.
\n",
+                "itemtype": "property",
+                "name": "pwinMouseY",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\n\nvar myCanvas;\n\nfunction setup() {\n  //use a variable to store a pointer to the canvas\n  myCanvas = createCanvas(100, 100);\n  noStroke();\n  fill(237, 34, 93);\n}\n\nfunction draw() {\n  clear();\n  //the difference between previous and\n  //current y position is the vertical mouse speed\n  var speed = abs(winMouseY - pwinMouseY);\n  //change the size of the circle\n  //according to the vertical speed\n  ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n  //move the canvas to the mouse position\n  myCanvas.position(winMouseX + 1, winMouseY + 1);\n}\n\n
"
+                ],
+                "alt": "fuschia ellipse moves with mouse x and y. Grows and shrinks with mouse speed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 290,
+                "description": "
Processing automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.
\n",
+                "itemtype": "property",
+                "name": "mouseButton",
+                "type": "Constant",
+                "readonly": "",
+                "example": [
+                    "\n
\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    if (mouseButton === LEFT) {\n      ellipse(50, 50, 50, 50);\n    }\n    if (mouseButton === RIGHT) {\n      rect(25, 25, 50, 50);\n    }\n    if (mouseButton === CENTER) {\n      triangle(23, 75, 50, 20, 78, 75);\n    }\n  }\n\n  print(mouseButton);\n}\n\n
"
+                ],
+                "alt": "50x50 black ellipse appears on center of fuschia canvas on mouse click/press.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 329,
+                "description": "
The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.
\n",
+                "itemtype": "property",
+                "name": "mouseIsPressed",
+                "type": "Boolean",
+                "readonly": "",
+                "example": [
+                    "\n
\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    ellipse(50, 50, 50, 50);\n  } else {\n    rect(25, 25, 50, 50);\n  }\n\n  print(mouseIsPressed);\n}\n\n
"
+                ],
+                "alt": "black 50x50 rect becomes ellipse with mouse click/press. fuschia background.",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 418,
+                "description": "
The mouseMoved() function is called every time the mouse moves and a mouse\nbutton is not pressed.

\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n",
+                "itemtype": "method",
+                "name": "mouseMoved",
+                "example": [
+                    "\n
\n\n// Move the mouse across the page\n// to change its value\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction mouseMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n\n
\n\n
\n\nfunction mouseMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n\n
"
+                ],
+                "alt": "black 50x50 rect becomes lighter with mouse movements until white then resets\nno image displayed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 462,
+                "description": "
The mouseDragged() function is called once every time the mouse moves and\na mouse button is pressed. If no mouseDragged() function is defined, the\ntouchMoved() function will be called instead if it is defined.

\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n",
+                "itemtype": "method",
+                "name": "mouseDragged",
+                "example": [
+                    "\n
\n\n// Drag the mouse across the page\n// to change its value\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction mouseDragged() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n\n
\n\n
\n\nfunction mouseDragged() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n\n
"
+                ],
+                "alt": "black 50x50 rect turns lighter with mouse click and drag until white, resets\nno image displayed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 532,
+                "description": "
The mousePressed() function is called once after every time a mouse button\nis pressed. The mouseButton variable (see the related reference entry)\ncan be used to determine which button has been pressed. If no\nmousePressed() function is defined, the touchStarted() function will be\ncalled instead if it is defined.

\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n",
+                "itemtype": "method",
+                "name": "mousePressed",
+                "example": [
+                    "\n
\n\n// Click within the image to change\n// the value of the rectangle\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction mousePressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n\n
\n\n
\n\nfunction mousePressed() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n\n
"
+                ],
+                "alt": "black 50x50 rect turns white with mouse click/press.\nno image displayed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 598,
+                "description": "
The mouseReleased() function is called every time a mouse button is\nreleased. If no mouseReleased() function is defined, the touchEnded()\nfunction will be called instead if it is defined.

\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n",
+                "itemtype": "method",
+                "name": "mouseReleased",
+                "example": [
+                    "\n
\n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction mouseReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n\n
\n\n
\n\nfunction mouseReleased() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n\n
"
+                ],
+                "alt": "black 50x50 rect turns white with mouse click/press.\nno image displayed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 665,
+                "description": "
The mouseClicked() function is called once after a mouse button has been\npressed and then released.

\nBrowsers handle clicks differently, so this function is only guaranteed to be\nrun when the left mouse button is clicked. To handle other mouse buttons\nbeing pressed or released, see mousePressed() or mouseReleased().

\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add "return false" to the end of the method.
\n",
+                "itemtype": "method",
+                "name": "mouseClicked",
+                "example": [
+                    "\n
\n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been clicked\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\n\nfunction mouseClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n\n
\n\n
\n\nfunction mouseClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n\n
"
+                ],
+                "alt": "black 50x50 rect turns white with mouse click/press.\nno image displayed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 724,
+                "description": "
The doubleClicked() function is executed every time a event\nlistener has detected a dblclick event which is a part of the\nDOM L3 specification. The doubleClicked event is fired when a\npointing device button (usually a mouse's primary button)\nis clicked twice on a single element. For more info on the\ndblclick event refer to mozilla's documentation here:\nhttps://developer.mozilla.org/en-US/docs/Web/Events/dblclick
\n",
+                "itemtype": "method",
+                "name": "doubleClicked",
+                "example": [
+                    "\n
\n\n// Click within the image to change\n// the value of the rectangle\n// after the mouse has been double clicked\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\n\nfunction doubleClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n\n
\n\n
\n\nfunction doubleClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n\n
"
+                ],
+                "alt": "black 50x50 rect turns white with mouse doubleClick/press.\nno image displayed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/mouse.js",
+                "line": 782,
+                "description": "
The function mouseWheel() is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.

\nThe event.delta property returns the amount the mouse wheel\nhave scrolled. The values can be positive or negative depending on the\nscroll direction (on OS X with "natural" scrolling enabled, the signs\nare inverted).

\nBrowsers may have different default behaviors attached to various\nmouse events. To prevent any default behavior for this event, add\n"return false" to the end of the method.

\nDue to the current support of the "wheel" event on Safari, the function\nmay only work as expected if "return false" is included while using Safari.
\n",
+                "itemtype": "method",
+                "name": "mouseWheel",
+                "example": [
+                    "\n
\n\nvar pos = 25;\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  rect(25, pos, 50, 50);\n}\n\nfunction mouseWheel(event) {\n  print(event.delta);\n  //move the square according to the vertical scroll amount\n  pos += event.delta;\n  //uncomment to block page scrolling\n  //return false;\n}\n\n
"
+                ],
+                "alt": "black 50x50 rect moves up and down with vertical scroll. fuschia background",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Mouse"
+            },
+            {
+                "file": "src/events/touch.js",
+                "line": 12,
+                "description": "
The system variable touches[] contains an array of the positions of all\ncurrent touch points, relative to (0, 0) of the canvas, and IDs identifying a\nunique touch as it moves. Each element in the array is an object with x, y,\nand id properties.
\n
The touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).
\n",
+                "itemtype": "property",
+                "name": "touches",
+                "type": "Object[]",
+                "readonly": "",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Touch"
+            },
+            {
+                "file": "src/events/touch.js",
+                "line": 57,
+                "description": "
The touchStarted() function is called once after every time a touch is\nregistered. If no touchStarted() function is defined, the mousePressed()\nfunction will be called instead if it is defined.

\nBrowsers may have different default behaviors attached to various touch\nevents. To prevent any default behavior for this event, add "return false"\nto the end of the method.
\n",
+                "itemtype": "method",
+                "name": "touchStarted",
+                "example": [
+                    "\n
\n\n// Touch within the image to change\n// the value of the rectangle\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction touchStarted() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n\n
\n\n
\n\nfunction touchStarted() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n\n
"
+                ],
+                "alt": "50x50 black rect turns white with touch event.\nno image displayed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Touch"
+            },
+            {
+                "file": "src/events/touch.js",
+                "line": 120,
+                "description": "
The touchMoved() function is called every time a touch move is registered.\nIf no touchMoved() function is defined, the mouseDragged() function will\nbe called instead if it is defined.

\nBrowsers may have different default behaviors attached to various touch\nevents. To prevent any default behavior for this event, add "return false"\nto the end of the method.
\n",
+                "itemtype": "method",
+                "name": "touchMoved",
+                "example": [
+                    "\n
\n\n// Move your finger across the page\n// to change its value\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction touchMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n\n
\n\n
\n\nfunction touchMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n\n
"
+                ],
+                "alt": "50x50 black rect turns lighter with touch until white. resets\nno image displayed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Touch"
+            },
+            {
+                "file": "src/events/touch.js",
+                "line": 182,
+                "description": "
The touchEnded() function is called every time a touch ends. If no\ntouchEnded() function is defined, the mouseReleased() function will be\ncalled instead if it is defined.

\nBrowsers may have different default behaviors attached to various touch\nevents. To prevent any default behavior for this event, add "return false"\nto the end of the method.
\n",
+                "itemtype": "method",
+                "name": "touchEnded",
+                "example": [
+                    "\n
\n\n// Release touch within the image to\n// change the value of the rectangle\n\nvar value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction touchEnded() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n\n
\n\n
\n\nfunction touchEnded() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n\n
"
+                ],
+                "alt": "50x50 black rect turns white with touch.\nno image displayed",
+                "class": "p5",
+                "module": "Events",
+                "submodule": "Touch"
+            },
+            {
+                "file": "src/image/filters.js",
+                "line": 3,
+                "description": "
This module defines the filters for use with image buffers.
\n
This module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.
\n
Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.
\n
A number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.
\n",
+                "class": "p5",
+                "module": "Events"
+            },
+            {
+                "file": "src/image/image.js",
+                "line": 8,
+                "description": "
This module defines the p5 methods for the p5.Image class\nfor drawing images to the main display canvas.
\n",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/image.js",
+                "line": 18,
+                "description": "
Creates a new p5.Image (the datatype for storing images). This provides a\nfresh buffer of pixels to play with. Set the size of the buffer with the\nwidth and height parameters.\n

\n.pixels gives access to an array containing the values for all the pixels\nin the display window.\nThese values are numbers. This array is the size (including an appropriate\nfactor for the pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. See .pixels for\nmore info. It may also be simpler to use set() or get().\n

\nBefore accessing the pixels of an image, the data must loaded with the\nloadPixels() function. After the array data has been modified, the\nupdatePixels() function must be run to update the changes.
\n",
+                "itemtype": "method",
+                "name": "createImage",
+                "params": [
+                    {
+                        "name": "width",
+                        "description": "
width in pixels
\n",
+                        "type": "Integer"
+                    },
+                    {
+                        "name": "height",
+                        "description": "
height in pixels
\n",
+                        "type": "Integer"
+                    }
+                ],
+                "return": {
+                    "description": "the p5.Image object",
+                    "type": "p5.Image"
+                },
+                "example": [
+                    "\n
\n\nvar img = createImage(66, 66);\nimg.loadPixels();\nfor (var i = 0; i < img.width; i++) {\n  for (var j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n\n
\n\n
\n\nvar img = createImage(66, 66);\nimg.loadPixels();\nfor (var i = 0; i < img.width; i++) {\n  for (var j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n\n
\n\n
\n\nvar pink = color(255, 102, 204);\nvar img = createImage(66, 66);\nimg.loadPixels();\nvar d = pixelDensity();\nvar halfImage = 4 * (width * d) * (height / 2 * d);\nfor (var i = 0; i < halfImage; i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n\n
"
+                ],
+                "alt": "66x66 dark turquoise rect in center of canvas.\n2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas\nno image displayed",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/image.js",
+                "line": 98,
+                "description": "
Save the current canvas as an image. In Safari, this will open the\nimage in the window and the user must provide their own\nfilename on save-as. Other browsers will either save the\nfile immediately, or prompt the user with a dialogue window.
\n",
+                "itemtype": "method",
+                "name": "saveCanvas",
+                "example": [
+                    "\n 
\n function setup() {\n var c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas(c, 'myCanvas', 'jpg');\n }\n 
\n 
\n // note that this example has the same result as above\n // if no canvas is specified, defaults to main canvas\n function setup() {\n var c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas('myCanvas', 'jpg');\n\n // all of the following are valid\n saveCanvas(c, 'myCanvas', 'jpg');\n saveCanvas(c, 'myCanvas');\n saveCanvas(c);\n saveCanvas('myCanvas', 'png');\n saveCanvas('myCanvas');\n saveCanvas();\n }\n 
"
+                ],
+                "alt": "no image displayed\n no image displayed\n no image displayed",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Image",
+                "overloads": [
+                    {
+                        "line": 98,
+                        "params": [
+                            {
+                                "name": "selectedCanvas",
+                                "description": "
a variable\n                                representing a specific html5 canvas (optional)
\n",
+                                "type": "p5.Element|HTMLCanvasElement"
+                            },
+                            {
+                                "name": "filename",
+                                "description": "",
+                                "type": "String",
+                                "optional": true
+                            },
+                            {
+                                "name": "extension",
+                                "description": "
'jpg' or 'png'
\n",
+                                "type": "String",
+                                "optional": true
+                            }
+                        ]
+                    },
+                    {
+                        "line": 141,
+                        "params": [
+                            {
+                                "name": "filename",
+                                "description": "",
+                                "type": "String",
+                                "optional": true
+                            },
+                            {
+                                "name": "extension",
+                                "description": "",
+                                "type": "String",
+                                "optional": true
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/image/image.js",
+                "line": 178,
+                "description": "
Capture a sequence of frames that can be used to create a movie.\nAccepts a callback. For example, you may wish to send the frames\nto a server where they can be stored or converted into a movie.\nIf no callback is provided, the browser will pop up save dialogues in an\nattempt to download all of the images that have just been created. With the\ncallback provided the image data isn't saved by default but instead passed\nas an argument to the callback function as an array of objects, with the\nsize of array equal to the total number of frames.
\n
Note that saveFrames() will only save the first 15 frames of an animation.\nTo export longer animations, you might look into a library like\nccapture.js.
\n",
+                "itemtype": "method",
+                "name": "saveFrames",
+                "params": [
+                    {
+                        "name": "filename",
+                        "description": "",
+                        "type": "String"
+                    },
+                    {
+                        "name": "extension",
+                        "description": "
'jpg' or 'png'
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "duration",
+                        "description": "
Duration in seconds to save the frames for.
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "framerate",
+                        "description": "
Framerate to save the frames in.
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
A callback function that will be executed\n                                to handle the image data. This function\n                                should accept an array as argument. The\n                                array will contain the specified number of\n                                frames of objects. Each object has three\n                                properties: imageData - an\n                                image/octet-stream, filename and extension.
\n",
+                        "type": "Function(Array)",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n function draw() {\n background(mouseX);\n }\n\n function mousePressed() {\n saveFrames('out', 'png', 1, 25, function(data) {\n   print(data);\n });\n }\n
"
+                ],
+                "alt": "canvas background goes from light to dark with mouse x.",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/loading_displaying.js",
+                "line": 17,
+                "description": "
Loads an image from a path and creates a p5.Image from it.\n

\nThe image may not be immediately available for rendering\nIf you want to ensure that the image is ready before doing\nanything with it, place the loadImage() call in preload().\nYou may also supply a callback function to handle the image when it's ready.\n

\nThe path to the image should be relative to the HTML file\nthat links in your sketch. Loading an image from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.
\n",
+                "itemtype": "method",
+                "name": "loadImage",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
Path of the image to be loaded
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "successCallback",
+                        "description": "
Function to be called once\n                               the image is loaded. Will be passed the\n                               p5.Image.
\n",
+                        "type": "function(p5.Image)",
+                        "optional": true
+                    },
+                    {
+                        "name": "failureCallback",
+                        "description": "
called with event error if\n                               the image fails to load.
\n",
+                        "type": "Function(Event)",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "the p5.Image object",
+                    "type": "p5.Image"
+                },
+                "example": [
+                    "\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n}\n\n
\n
\n\nfunction setup() {\n  // here we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', function(img) {\n    image(img, 0, 0);\n  });\n}\n\n
"
+                ],
+                "alt": "image of the underside of a white umbrella and grided ceililng above\nimage of the underside of a white umbrella and grided ceililng above",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Loading & Displaying"
+            },
+            {
+                "file": "src/image/loading_displaying.js",
+                "line": 125,
+                "description": "
Draw an image to the p5.js canvas.
\n
This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.
\n
This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n"destination rectangle" (which corresponds to "dx", "dy", etc.) and "source\nimage" (which corresponds to "sx", "sy", etc.) below. Specifying the\n"source image" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n
\n",
+                "itemtype": "method",
+                "name": "image",
+                "example": [
+                    "\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height\n  image(img, 0, 0);\n}\n\n
\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  background(50);\n  // Top-left corner of the img is at (10, 10)\n  // Width and height are 50 x 50\n  image(img, 10, 10, 50, 50);\n}\n\n
\n
\n\nfunction setup() {\n  // Here, we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', function(img) {\n    image(img, 0, 0);\n  });\n}\n\n
\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/gradient.png');\n}\nfunction setup() {\n  // 1. Background image\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height, 100 x 100\n  image(img, 0, 0);\n  // 2. Top right image\n  // Top-left corner of destination rectangle is at (50, 0)\n  // Destination rectangle width and height are 40 x 20\n  // The next parameters are relative to the source image:\n  // - Starting at position (50, 50) on the source image, capture a 50 x 50\n  // subsection\n  // - Draw this subsection to fill the dimensions of the destination rectangle\n  image(img, 50, 0, 40, 20, 50, 50, 50, 50);\n}\n\n
"
+                ],
+                "alt": "image of the underside of a white umbrella and gridded ceiling above\nimage of the underside of a white umbrella and gridded ceiling above",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Loading & Displaying",
+                "overloads": [
+                    {
+                        "line": 125,
+                        "params": [
+                            {
+                                "name": "img",
+                                "description": "
the image to display
\n",
+                                "type": "p5.Image|p5.Element"
+                            },
+                            {
+                                "name": "x",
+                                "description": "
the x-coordinate of the top-left corner of the image
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
the y-coordinate of the top-left corner of the image
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "width",
+                                "description": "
the width to draw the image
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "height",
+                                "description": "
the height to draw the image
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ]
+                    },
+                    {
+                        "line": 213,
+                        "params": [
+                            {
+                                "name": "img",
+                                "description": "",
+                                "type": "p5.Image|p5.Element"
+                            },
+                            {
+                                "name": "dx",
+                                "description": "
the x-coordinate of the destination\n                          rectangle in which to draw the source image
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "dy",
+                                "description": "
the y-coordinate of the destination\n                          rectangle in which to draw the source image
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "dWidth",
+                                "description": "
the width of the destination rectangle
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "dHeight",
+                                "description": "
the height of the destination rectangle
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "sx",
+                                "description": "
the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "sy",
+                                "description": "
the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "sWidth",
+                                "description": "
the width of the subsection of the\n                          source image to draw into the destination\n                          rectangle
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "sHeight",
+                                "description": "
the height of the subsection of the\n                           source image to draw into the destination rectangle
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/image/loading_displaying.js",
+                "line": 296,
+                "description": "
Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.\n

\nTo apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with colorMode()).\n

\nThe value for the gray parameter must be less than or equal to the current\nmaximum value as specified by colorMode(). The default maximum value is\n255.
\n",
+                "itemtype": "method",
+                "name": "tint",
+                "example": [
+                    "\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204); // Tint blue\n  image(img, 50, 0);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204, 126); // Tint blue and set transparency\n  image(img, 50, 0);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(255, 126); // Apply transparency without changing color\n  image(img, 50, 0);\n}\n\n
"
+                ],
+                "alt": "2 side by side images of umbrella and ceiling, one image with blue tint\nImages of umbrella and ceiling, one half of image with blue tint\n2 side by side images of umbrella and ceiling, one image translucent",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Loading & Displaying",
+                "overloads": [
+                    {
+                        "line": 296,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
red or hue value relative to\n                                the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ]
+                    },
+                    {
+                        "line": 369,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
a color string
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ]
+                    },
+                    {
+                        "line": 375,
+                        "params": [
+                            {
+                                "name": "values",
+                                "description": "
an array containing the red,green,blue &\n                                and alpha components of the color
\n",
+                                "type": "Number[]"
+                            }
+                        ]
+                    },
+                    {
+                        "line": 381,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "
the tint color
\n",
+                                "type": "p5.Color"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/image/loading_displaying.js",
+                "line": 391,
+                "description": "
Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.
\n",
+                "itemtype": "method",
+                "name": "noTint",
+                "example": [
+                    "\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  tint(0, 153, 204); // Tint blue\n  image(img, 0, 0);\n  noTint(); // Disable tint\n  image(img, 50, 0);\n}\n\n
"
+                ],
+                "alt": "2 side by side images of bricks, left image with blue tint",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Loading & Displaying"
+            },
+            {
+                "file": "src/image/loading_displaying.js",
+                "line": 457,
+                "description": "
Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to image() are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of image() as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.\n

\nimageMode(CORNERS) interprets the second and third parameters of image()\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.\n

\nimageMode(CENTER) interprets the second and third parameters of image()\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.
\n",
+                "itemtype": "method",
+                "name": "imageMode",
+                "params": [
+                    {
+                        "name": "mode",
+                        "description": "
either CORNER, CORNERS, or CENTER
\n",
+                        "type": "Constant"
+                    }
+                ],
+                "example": [
+                    "\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNER);\n  image(img, 10, 10, 50, 50);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNERS);\n  image(img, 10, 10, 90, 40);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CENTER);\n  image(img, 50, 50, 80, 80);\n}\n\n
"
+                ],
+                "alt": "small square image of bricks\nhorizontal rectangle image of bricks\nlarge square image of bricks",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Loading & Displaying"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 9,
+                "description": "
This module defines the p5.Image class and P5 methods for\ndrawing images to the main display canvas.
\n",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 91,
+                "description": "
Image width.
\n",
+                "itemtype": "property",
+                "name": "width",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\nvar img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (var i = 0; i < img.width; i++) {\n    var c = img.get(i, img.height / 2);\n    stroke(c);\n    line(i, height / 2, i, height);\n  }\n}\n
"
+                ],
+                "alt": "rocky mountains in top and horizontal lines in corresponding colors in bottom.",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 118,
+                "description": "
Image height.
\n",
+                "itemtype": "property",
+                "name": "height",
+                "type": "Number",
+                "readonly": "",
+                "example": [
+                    "\n
\nvar img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (var i = 0; i < img.height; i++) {\n    var c = img.get(img.width / 2, i);\n    stroke(c);\n    line(0, i, width / 2, i);\n  }\n}\n
"
+                ],
+                "alt": "rocky mountains on right and vertical lines in corresponding colors on left.",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 152,
+                "description": "
Array containing the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh denisty displays may have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. With\npixelDensity = 2, there will be 160,000. The first four values\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\nat (x, y):
\n
var d = pixelDensity();\nfor (var i = 0; i < d; i++) {\n  for (var j = 0; j < d; j++) {\n    // loop over\n    idx = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[idx] = r;\n    pixels[idx+1] = g;\n    pixels[idx+2] = b;\n    pixels[idx+3] = a;\n  }\n}\n
\n


\nBefore accessing this array, the data must loaded with the loadPixels()\nfunction. After the array data has been modified, the updatePixels()\nfunction must be run to update the changes.
\n",
+                "itemtype": "property",
+                "name": "pixels",
+                "type": "Number[]",
+                "example": [
+                    "\n
\n\nvar img = createImage(66, 66);\nimg.loadPixels();\nfor (var i = 0; i < img.width; i++) {\n  for (var j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n\n
\n
\n\nvar pink = color(255, 102, 204);\nvar img = createImage(66, 66);\nimg.loadPixels();\nfor (var i = 0; i < 4 * (width * height / 2); i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n\n
"
+                ],
+                "alt": "66x66 turquoise rect in center of canvas\n66x66 pink rect in center of canvas",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 223,
+                "description": "
Helper fxn for sharing pixel methods
\n",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 232,
+                "description": "
Loads the pixels data for this image into the [pixels] attribute.
\n",
+                "itemtype": "method",
+                "name": "loadPixels",
+                "example": [
+                    "\n
\nvar myImage;\nvar halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * width * height / 2;\n  for (var i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0);\n}\n
"
+                ],
+                "alt": "2 images of rocky mountains vertically stacked",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 268,
+                "description": "
Updates the backing canvas for this image with the contents of\nthe [pixels] array.
\n",
+                "itemtype": "method",
+                "name": "updatePixels",
+                "example": [
+                    "\n
\nvar myImage;\nvar halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * width * height / 2;\n  for (var i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0);\n}\n
"
+                ],
+                "alt": "2 images of rocky mountains vertically stacked",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image",
+                "overloads": [
+                    {
+                        "line": 268,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
x-offset of the target update area for the\n                             underlying canvas
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
y-offset of the target update area for the\n                             underlying canvas
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "w",
+                                "description": "
height of the target update area for the\n                             underlying canvas
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "h",
+                                "description": "
height of the target update area for the\n                             underlying canvas
\n",
+                                "type": "Integer"
+                            }
+                        ]
+                    },
+                    {
+                        "line": 308,
+                        "params": []
+                    }
+                ]
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 316,
+                "description": "
Get a region of pixels from an image.
\n
If no params are passed, those whole image is returned,\nif x and y are the only params passed a single pixel is extracted\nif all params are passed a rectangle region is extracted and a p5.Image\nis returned.
\n
Returns undefined if the region is outside the bounds of the image
\n",
+                "itemtype": "method",
+                "name": "get",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of the pixel
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of the pixel
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "w",
+                        "description": "
width
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "color of pixel at x,y in array format\n                                   [R, G, B, A] or p5.Image",
+                    "type": "Number[]|Color|p5.Image"
+                },
+                "example": [
+                    "\n
\nvar myImage;\nvar c;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(myImage);\n  noStroke();\n  c = myImage.get(60, 90);\n  fill(c);\n  rect(25, 25, 50, 50);\n}\n\n//get() returns color here\n
"
+                ],
+                "alt": "image of rocky mountains with 50x50 green rect in front",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 361,
+                "description": "
Set the color of a single pixel or write an image into\nthis p5.Image.
\n
Note that for a large number of pixels this will\nbe slower than directly manipulating the pixels array\nand then calling updatePixels().
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of the pixel
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of the pixel
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "a",
+                        "description": "
grayscale value | pixel array |\n                               a p5.Color | image to copy
\n",
+                        "type": "Number|Number[]|Object"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar img = createImage(66, 66);\nimg.loadPixels();\nfor (var i = 0; i < img.width; i++) {\n  for (var j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n\n
"
+                ],
+                "alt": "2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 399,
+                "description": "
Resize the image to a new width and height. To make the image scale\nproportionally, use 0 as the value for the wide or high parameter.\nFor instance, to make the width of an image 150 pixels, and change\nthe height using the same proportion, use resize(150, 0).
\n",
+                "itemtype": "method",
+                "name": "resize",
+                "params": [
+                    {
+                        "name": "width",
+                        "description": "
the resized image width
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "height",
+                        "description": "
the resized image height
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(img, 0, 0);\n}\n\nfunction mousePressed() {\n  img.resize(50, 100);\n}\n
"
+                ],
+                "alt": "image of rocky mountains. zoomed in",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 483,
+                "description": "
Copies a region of pixels from one image to another. If no\nsrcImage is specified this is used as the source. If the source\nand destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.
\n",
+                "itemtype": "method",
+                "name": "copy",
+                "example": [
+                    "\n
\nvar photo;\nvar bricks;\nvar x;\nvar y;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n  x = bricks.width / 2;\n  y = bricks.height / 2;\n  photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n  image(photo, 0, 0);\n}\n
"
+                ],
+                "alt": "image of rocky mountains and smaller image on top of bricks at top left",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image",
+                "overloads": [
+                    {
+                        "line": 483,
+                        "params": [
+                            {
+                                "name": "srcImage",
+                                "description": "
source image
\n",
+                                "type": "p5.Image|p5.Element"
+                            },
+                            {
+                                "name": "sx",
+                                "description": "
X coordinate of the source's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sy",
+                                "description": "
Y coordinate of the source's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sw",
+                                "description": "
source image width
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sh",
+                                "description": "
source image height
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dx",
+                                "description": "
X coordinate of the destination's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dy",
+                                "description": "
Y coordinate of the destination's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dw",
+                                "description": "
destination image width
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dh",
+                                "description": "
destination image height
\n",
+                                "type": "Integer"
+                            }
+                        ]
+                    },
+                    {
+                        "line": 524,
+                        "params": [
+                            {
+                                "name": "sx",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sy",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sw",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sh",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dx",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dy",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dw",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dh",
+                                "description": "",
+                                "type": "Integer"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 563,
+                "description": "
Masks part of an image from displaying by loading another\nimage and using it's alpha channel as an alpha channel for\nthis image.
\n",
+                "itemtype": "method",
+                "name": "mask",
+                "params": [
+                    {
+                        "name": "srcImage",
+                        "description": "
source image
\n",
+                        "type": "p5.Image"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar photo, maskImage;\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  photo.mask(maskImage);\n  image(photo, 0, 0);\n}\n
"
+                ],
+                "alt": "image of rocky mountains with white at right\n\n\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 626,
+                "description": "
Applies an image filter to a p5.Image
\n",
+                "itemtype": "method",
+                "name": "filter",
+                "params": [
+                    {
+                        "name": "filterType",
+                        "description": "
either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter
\n",
+                        "type": "Constant"
+                    },
+                    {
+                        "name": "filterParam",
+                        "description": "
an optional parameter unique\n                               to each filter, see above
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar photo1;\nvar photo2;\n\nfunction preload() {\n  photo1 = loadImage('assets/rockies.jpg');\n  photo2 = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  photo2.filter('gray');\n  image(photo1, 0, 0);\n  image(photo2, width / 2, 0);\n}\n
"
+                ],
+                "alt": "2 images of rocky mountains left one in color, right in black and white",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 662,
+                "description": "
Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.
\n",
+                "itemtype": "method",
+                "name": "blend",
+                "example": [
+                    "\n
\nvar mountains;\nvar bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n
\n
\nvar mountains;\nvar bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n
\n
\nvar mountains;\nvar bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n
"
+                ],
+                "alt": "image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image",
+                "overloads": [
+                    {
+                        "line": 662,
+                        "params": [
+                            {
+                                "name": "srcImage",
+                                "description": "
source image
\n",
+                                "type": "p5.Image"
+                            },
+                            {
+                                "name": "sx",
+                                "description": "
X coordinate of the source's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sy",
+                                "description": "
Y coordinate of the source's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sw",
+                                "description": "
source image width
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sh",
+                                "description": "
source image height
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dx",
+                                "description": "
X coordinate of the destination's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dy",
+                                "description": "
Y coordinate of the destination's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dw",
+                                "description": "
destination image width
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dh",
+                                "description": "
destination image height
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "blendMode",
+                                "description": "
the blend mode. either\n    BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n    MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n    SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\n
Available blend modes are: normal | multiply | screen | overlay |\n           darken | lighten | color-dodge | color-burn | hard-light |\n           soft-light | difference | exclusion | hue | saturation |\n           color | luminosity
\n
http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
\n",
+                                "type": "Constant"
+                            }
+                        ]
+                    },
+                    {
+                        "line": 741,
+                        "params": [
+                            {
+                                "name": "sx",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sy",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sw",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sh",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dx",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dy",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dw",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dh",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "blendMode",
+                                "description": "",
+                                "type": "Constant"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/image/p5.Image.js",
+                "line": 784,
+                "description": "
Saves the image to a file and force the browser to download it.\nAccepts two strings for filename and file extension\nSupports png (default) and jpg.
\n",
+                "itemtype": "method",
+                "name": "save",
+                "params": [
+                    {
+                        "name": "filename",
+                        "description": "
give your file a name
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "extension",
+                        "description": "
'png' or 'jpg'
\n",
+                        "type": "String"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar photo;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(photo, 0, 0);\n}\n\nfunction keyTyped() {\n  if (key === 's') {\n    photo.save('photo', 'png');\n  }\n}\n
"
+                ],
+                "alt": "image of rocky mountains.",
+                "class": "p5.Image",
+                "module": "Image",
+                "submodule": "Image"
+            },
+            {
+                "file": "src/image/pixels.js",
+                "line": 14,
+                "description": "
Uint8ClampedArray\ncontaining the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays will have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\nretina display, there will be 160,000.\n

\nThe first four values (indices 0-3) in the array will be the R, G, B, A\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\nset values for a pixel at (x, y):
\n
var d = pixelDensity();\nfor (var i = 0; i < d; i++) {\n  for (var j = 0; j < d; j++) {\n    // loop over\n    idx = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[idx] = r;\n    pixels[idx+1] = g;\n    pixels[idx+2] = b;\n    pixels[idx+3] = a;\n  }\n}\n
\n
While the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that set() will automatically take care of\nsetting all the appropriate values in pixels[] for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.\n

\nBefore accessing this array, the data must loaded with the loadPixels()\nfunction. After the array data has been modified, the updatePixels()\nfunction must be run to update the changes.\n

\nNote that this is not a standard javascript array.  This means that\nstandard javascript functions such as slice() or\narrayCopy() do not\nwork.
",
+                "itemtype": "property",
+                "name": "pixels",
+                "type": "Number[]",
+                "example": [
+                    "\n
\n\nvar pink = color(255, 102, 204);\nloadPixels();\nvar d = pixelDensity();\nvar halfImage = 4 * (width * d) * (height / 2 * d);\nfor (var i = 0; i < halfImage; i += 4) {\n  pixels[i] = red(pink);\n  pixels[i + 1] = green(pink);\n  pixels[i + 2] = blue(pink);\n  pixels[i + 3] = alpha(pink);\n}\nupdatePixels();\n\n
"
+                ],
+                "alt": "top half of canvas pink, bottom grey",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Pixels"
+            },
+            {
+                "file": "src/image/pixels.js",
+                "line": 83,
+                "description": "
Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.
\n",
+                "itemtype": "method",
+                "name": "blend",
+                "example": [
+                    "\n
\nvar img0;\nvar img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n}\n
\n
\nvar img0;\nvar img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n}\n
\n
\nvar img0;\nvar img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n}\n
"
+                ],
+                "alt": "image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Pixels",
+                "overloads": [
+                    {
+                        "line": 83,
+                        "params": [
+                            {
+                                "name": "srcImage",
+                                "description": "
source image
\n",
+                                "type": "p5.Image"
+                            },
+                            {
+                                "name": "sx",
+                                "description": "
X coordinate of the source's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sy",
+                                "description": "
Y coordinate of the source's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sw",
+                                "description": "
source image width
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sh",
+                                "description": "
source image height
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dx",
+                                "description": "
X coordinate of the destination's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dy",
+                                "description": "
Y coordinate of the destination's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dw",
+                                "description": "
destination image width
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dh",
+                                "description": "
destination image height
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "blendMode",
+                                "description": "
the blend mode. either\n    BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n    MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n    SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\n",
+                                "type": "Constant"
+                            }
+                        ]
+                    },
+                    {
+                        "line": 156,
+                        "params": [
+                            {
+                                "name": "sx",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sy",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sw",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sh",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dx",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dy",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dw",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dh",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "blendMode",
+                                "description": "",
+                                "type": "Constant"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/image/pixels.js",
+                "line": 176,
+                "description": "
Copies a region of the canvas to another region of the canvas\nand copies a region of pixels from an image used as the srcImg parameter\ninto the canvas srcImage is specified this is used as the source. If\nthe source and destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.
\n",
+                "itemtype": "method",
+                "name": "copy",
+                "example": [
+                    "\n
\nvar img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(img);\n  copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n  stroke(255);\n  noFill();\n  // Rectangle shows area being copied\n  rect(7, 22, 10, 10);\n}\n
"
+                ],
+                "alt": "image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Pixels",
+                "overloads": [
+                    {
+                        "line": 176,
+                        "params": [
+                            {
+                                "name": "srcImage",
+                                "description": "
source image
\n",
+                                "type": "p5.Image|p5.Element"
+                            },
+                            {
+                                "name": "sx",
+                                "description": "
X coordinate of the source's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sy",
+                                "description": "
Y coordinate of the source's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sw",
+                                "description": "
source image width
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sh",
+                                "description": "
source image height
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dx",
+                                "description": "
X coordinate of the destination's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dy",
+                                "description": "
Y coordinate of the destination's upper left corner
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dw",
+                                "description": "
destination image width
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dh",
+                                "description": "
destination image height
\n",
+                                "type": "Integer"
+                            }
+                        ]
+                    },
+                    {
+                        "line": 219,
+                        "params": [
+                            {
+                                "name": "sx",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sy",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sw",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "sh",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dx",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dy",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dw",
+                                "description": "",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dh",
+                                "description": "",
+                                "type": "Integer"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/image/pixels.js",
+                "line": 235,
+                "description": "
Applies a filter to the canvas.\n

\n
The presets options are:\n

\n
THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.\n

\n
GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.\n

\n
OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.\n

\n
INVERT\nSets each pixel to its inverse value. No parameter is used.\n

\n
POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.\n

\n
BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.\n

\n
ERODE\nReduces the light areas. No parameter is used.\n

\n
DILATE\nIncreases the light areas. No parameter is used.
\n",
+                "itemtype": "method",
+                "name": "filter",
+                "params": [
+                    {
+                        "name": "filterType",
+                        "description": "
either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter
\n",
+                        "type": "Constant"
+                    },
+                    {
+                        "name": "filterParam",
+                        "description": "
an optional parameter unique\n                               to each filter, see above
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(THRESHOLD);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(GRAY);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(OPAQUE);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(INVERT);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(POSTERIZE, 3);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(DILATE);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(BLUR, 3);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(ERODE);\n}\n\n
"
+                ],
+                "alt": "black and white image of a brick wall.\ngreyscale image of a brickwall\nimage of a brickwall\njade colored image of a brickwall\nred and pink image of a brickwall\nimage of a brickwall\nblurry image of a brickwall\nimage of a brickwall\nimage of a brickwall with less detail",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Pixels"
+            },
+            {
+                "file": "src/image/pixels.js",
+                "line": 413,
+                "description": "
Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current imageMode().\n

\nIf the pixel requested is outside of the image window, [0,0,0,255] is\nreturned. To get the numbers scaled according to the current color ranges\nand taking into account colorMode, use getColor instead of get.\n

\nGetting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from pixels[]. The equivalent statement to\nget(x, y) using pixels[] with pixel density d is\n\nvar x, y, d; // set these to the coordinates\nvar off = (y  width + x)  d * 4;\nvar components = [\n  pixels[off],\n  pixels[off + 1],\n  pixels[off + 2],\n  pixels[off + 3]\n];\nprint(components);\n\n

\nSee the reference for pixels[] for more information.
\n",
+                "itemtype": "method",
+                "name": "get",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of the pixel
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of the pixel
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "w",
+                        "description": "
width
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "values of pixel at x,y in array format\n                             [R, G, B, A] or p5.Image",
+                    "type": "Number[]|p5.Image"
+                },
+                "example": [
+                    "\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  var c = get();\n  image(c, width / 2, 0);\n}\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  var c = get(50, 90);\n  fill(c);\n  noStroke();\n  rect(25, 25, 50, 50);\n}\n\n
"
+                ],
+                "alt": "2 images of the rocky mountains, side-by-side\nImage of the rocky mountains with 50x50 green rect in center of canvas",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Pixels"
+            },
+            {
+                "file": "src/image/pixels.js",
+                "line": 489,
+                "description": "
Loads the pixel data for the display window into the pixels[] array. This\nfunction must always be called before reading from or writing to pixels[].\nNote that only changes made with set() or direct manipulation of pixels[]\nwill occur.
\n",
+                "itemtype": "method",
+                "name": "loadPixels",
+                "example": [
+                    "\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0);\n  var d = pixelDensity();\n  var halfImage = 4 * (img.width * d) * (img.height * d / 2);\n  loadPixels();\n  for (var i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n\n
"
+                ],
+                "alt": "two images of the rocky mountains. one on top, one on bottom of canvas.",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Pixels"
+            },
+            {
+                "file": "src/image/pixels.js",
+                "line": 525,
+                "description": "
Changes the color of any pixel, or writes an image directly to the\ndisplay window.
\n
The x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a p5.Color object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current imageMode().\n
\n
\nAfter using set(), you must call updatePixels() for your changes to appear.\nThis should be called once all pixels have been set, and must be called before\ncalling .get() or drawing the image.\n
\n
Setting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into pixels[]. Setting the pixels[]\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop.
\n
See the reference for pixels[] for more information.
",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of the pixel
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of the pixel
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "c",
+                        "description": "
insert a grayscale value | a pixel array |\n                               a p5.Color object | a p5.Image to copy
\n",
+                        "type": "Number|Number[]|Object"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar black = color(0);\nset(30, 20, black);\nset(85, 20, black);\nset(85, 75, black);\nset(30, 75, black);\nupdatePixels();\n\n
\n\n
\n\nfor (var i = 30; i < width - 15; i++) {\n  for (var j = 20; j < height - 25; j++) {\n    var c = color(204 - j, 153 - i, 0);\n    set(i, j, c);\n  }\n}\nupdatePixels();\n\n
\n\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  set(0, 0, img);\n  updatePixels();\n  line(0, 0, width, height);\n  line(0, height, width, 0);\n}\n\n
"
+                ],
+                "alt": "4 black points in the shape of a square middle-right of canvas.\nsquare with orangey-brown gradient lightening at bottom right.\nimage of the rocky mountains. with lines like an 'x' through the center.",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Pixels"
+            },
+            {
+                "file": "src/image/pixels.js",
+                "line": 599,
+                "description": "
Updates the display window with the data in the pixels[] array.\nUse in conjunction with loadPixels(). If you're only reading pixels from\nthe array, there's no need to call updatePixels() — updating is only\nnecessary to apply changes. updatePixels() should be called anytime the\npixels array is manipulated or set() is called, and only changes made with\nset() or direct changes to pixels[] will occur.
\n",
+                "itemtype": "method",
+                "name": "updatePixels",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of the upper-left corner of region\n                        to update
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of the upper-left corner of region\n                        to update
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "w",
+                        "description": "
width of region to update
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height of region to update
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0);\n  var d = pixelDensity();\n  var halfImage = 4 * (img.width * d) * (img.height * d / 2);\n  loadPixels();\n  for (var i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n\n
"
+                ],
+                "alt": "two images of the rocky mountains. one on top, one on bottom of canvas.",
+                "class": "p5",
+                "module": "Image",
+                "submodule": "Pixels"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 19,
+                "description": "
Loads a JSON file from a file or a URL, and returns an Object.\nNote that even if the JSON file contains an Array, an Object will be\nreturned with index numbers as keys.
\n
This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. JSONP is supported via a polyfill and you\ncan pass in as the second argument an object with definitions of the json\ncallback following the syntax specified here.
\n",
+                "itemtype": "method",
+                "name": "loadJSON",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
name of the file or url to load
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "jsonpOptions",
+                        "description": "
options object for jsonp related settings
\n",
+                        "type": "Object",
+                        "optional": true
+                    },
+                    {
+                        "name": "datatype",
+                        "description": "
"json" or "jsonp"
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to be executed after\n                                   loadJSON() completes, data is passed\n                                   in as first argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "JSON data",
+                    "type": "Object|Array"
+                },
+                "example": [
+                    "\n\n
Calling loadJSON() inside preload() guarantees to complete the\noperation before setup() and draw() are called.
\n\n
\n// Examples use USGS Earthquake API:\n//   https://earthquake.usgs.gov/fdsnws/event/1/#methods\nvar earthquakes;\nfunction preload() {\n  // Get the most recent earthquake in the database\n  var url =\n   'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\n    'summary/all_day.geojson';\n  earthquakes = loadJSON(url);\n}\n\nfunction setup() {\n  noLoop();\n}\n\nfunction draw() {\n  background(200);\n  // Get the magnitude and name of the earthquake out of the loaded JSON\n  var earthquakeMag = earthquakes.features[0].properties.mag;\n  var earthquakeName = earthquakes.features[0].properties.place;\n  ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n  textAlign(CENTER);\n  text(earthquakeName, 0, height - 30, width, 30);\n}\n
\n\n\n
Outside of preload(), you may supply a callback function to handle the\nobject:
\n
\nfunction setup() {\n  noLoop();\n  var url =\n   'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\n    'summary/all_day.geojson';\n  loadJSON(url, drawEarthquake);\n}\n\nfunction draw() {\n  background(200);\n}\n\nfunction drawEarthquake(earthquakes) {\n  // Get the magnitude and name of the earthquake out of the loaded JSON\n  var earthquakeMag = earthquakes.features[0].properties.mag;\n  var earthquakeName = earthquakes.features[0].properties.place;\n  ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n  textAlign(CENTER);\n  text(earthquakeName, 0, height - 30, width, 30);\n}\n
"
+                ],
+                "alt": "50x50 ellipse that changes from black to white depending on the current humidity\n50x50 ellipse that changes from black to white depending on the current humidity",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Input"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 154,
+                "description": "
Reads the contents of a file and creates a String array of its individual\nlines. If the name of the file is used as the parameter, as in the above\nexample, the file must be located in the sketch directory/folder.\n

\nAlternatively, the file maybe be loaded from anywhere on the local\ncomputer using an absolute path (something that starts with / on Unix and\nLinux, or a drive letter on Windows), or the filename parameter can be a\nURL for a file found on a network.\n

\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.
\n",
+                "itemtype": "method",
+                "name": "loadStrings",
+                "params": [
+                    {
+                        "name": "filename",
+                        "description": "
name of the file or url to load
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to be executed after loadStrings()\n                              completes, Array is passed in as first\n                              argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
function to be executed if\n                              there is an error, response is passed\n                              in as first argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Array of Strings",
+                    "type": "String[]"
+                },
+                "example": [
+                    "\n\n
Calling loadStrings() inside preload() guarantees to complete the\noperation before setup() and draw() are called.
\n\n
\nvar result;\nfunction preload() {\n  result = loadStrings('assets/test.txt');\n}\n\nfunction setup() {\n  background(200);\n  var ind = floor(random(result.length));\n  text(result[ind], 10, 10, 80, 80);\n}\n
\n\n
Outside of preload(), you may supply a callback function to handle the\nobject:
\n\n
\nfunction setup() {\n  loadStrings('assets/test.txt', pickString);\n}\n\nfunction pickString(result) {\n  background(200);\n  var ind = floor(random(result.length));\n  text(result[ind], 10, 10, 80, 80);\n}\n
"
+                ],
+                "alt": "randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Input"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 253,
+                "description": "
Reads the contents of a file or URL and creates a p5.Table object with\nits values. If a file is specified, it must be located in the sketch's\n"data" folder. The filename parameter can also be a URL to a file found\nonline. By default, the file is assumed to be comma-separated (in CSV\nformat). Table only looks for a header row if the 'header' option is\nincluded.
\n\n
Possible options include:\n
    \n
  • csv - parse the table as comma-separated values
    • \n
  • tsv - parse the table as tab-separated values
    • \n
  • header - this table has a header (title) row
    • \n
\n
\n\n
When passing in multiple options, pass them in as separate parameters,\nseperated by commas. For example:\n

\n\nloadTable('my_csv_file.csv', 'csv', 'header');\n\n
\n\n
 All files loaded and saved use UTF-8 encoding.
\n\n
This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadTable() inside preload()\nguarantees to complete the operation before setup() and draw() are called.\n
Outside of preload(), you may supply a callback function to handle the\nobject:
\n
",
+                "itemtype": "method",
+                "name": "loadTable",
+                "return": {
+                    "description": "Table object containing data",
+                    "type": "Object"
+                },
+                "example": [
+                    "\n
\n\n// Given the following CSV file called \"mammals.csv\"\n// located in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nvar table;\n\nfunction preload() {\n  //my table is comma separated value \"csv\"\n  //and has a header specifying the columns labels\n  table = loadTable('assets/mammals.csv', 'csv', 'header');\n  //the file can be remote\n  //table = loadTable(\"http://p5js.org/reference/assets/mammals.csv\",\n  //                  \"csv\", \"header\");\n}\n\nfunction setup() {\n  //count the columns\n  print(table.getRowCount() + ' total rows in table');\n  print(table.getColumnCount() + ' total columns in table');\n\n  print(table.getColumn('name'));\n  //[\"Goat\", \"Leopard\", \"Zebra\"]\n\n  //cycle through the table\n  for (var r = 0; r < table.getRowCount(); r++)\n    for (var c = 0; c < table.getColumnCount(); c++) {\n      print(table.getString(r, c));\n    }\n}\n\n
"
+                ],
+                "alt": "randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Input",
+                "overloads": [
+                    {
+                        "line": 253,
+                        "params": [
+                            {
+                                "name": "filename",
+                                "description": "
name of the file or URL to load
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "options",
+                                "description": "
"header" "csv" "tsv"
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "callback",
+                                "description": "
function to be executed after\n                                    loadTable() completes. On success, the\n                                    Table object is passed in as the\n                                    first argument.
\n",
+                                "type": "Function",
+                                "optional": true
+                            },
+                            {
+                                "name": "errorCallback",
+                                "description": "
function to be executed if\n                                    there is an error, response is passed\n                                    in as first argument
\n",
+                                "type": "Function",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "Table object containing data",
+                            "type": "Object"
+                        }
+                    },
+                    {
+                        "line": 342,
+                        "params": [
+                            {
+                                "name": "filename",
+                                "description": "",
+                                "type": "String"
+                            },
+                            {
+                                "name": "callback",
+                                "description": "",
+                                "type": "Function",
+                                "optional": true
+                            },
+                            {
+                                "name": "errorCallback",
+                                "description": "",
+                                "type": "Function",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "Object"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 586,
+                "description": "
Reads the contents of a file and creates an XML object with its values.\nIf the name of the file is used as the parameter, as in the above example,\nthe file must be located in the sketch directory/folder.
\n
Alternatively, the file maybe be loaded from anywhere on the local\ncomputer using an absolute path (something that starts with / on Unix and\nLinux, or a drive letter on Windows), or the filename parameter can be a\nURL for a file found on a network.
\n
This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadXML() inside preload()\nguarantees to complete the operation before setup() and draw() are called.
\n
Outside of preload(), you may supply a callback function to handle the\nobject.
\n",
+                "itemtype": "method",
+                "name": "loadXML",
+                "params": [
+                    {
+                        "name": "filename",
+                        "description": "
name of the file or URL to load
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to be executed after loadXML()\n                              completes, XML object is passed in as\n                              first argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
function to be executed if\n                              there is an error, response is passed\n                              in as first argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "XML object containing data",
+                    "type": "Object"
+                },
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var children = xml.getChildren('animal');\n\n  for (var i = 0; i < children.length; i++) {\n    var id = children[i].getNum('id');\n    var coloring = children[i].getString('species');\n    var name = children[i].getContent();\n    print(id + ', ' + coloring + ', ' + name);\n  }\n}\n\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Input"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 687,
+                "description": "
Method for executing an HTTP GET request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'GET').
\n",
+                "itemtype": "method",
+                "name": "httpGet",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
name of the file or url to load
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "datatype",
+                        "description": "
"json", "jsonp", "xml", or "text"
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "data",
+                        "description": "
param data passed sent with request
\n",
+                        "type": "Object",
+                        "optional": true
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to be executed after\n                                   httpGet() completes, data is passed in\n                                   as first argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n// Examples use USGS Earthquake API:\n//   https://earthquake.usgs.gov/fdsnws/event/1/#methods\nvar earthquakes;\nfunction preload() {\n  // Get the most recent earthquake in the database\n  var url =\n   'https://earthquake.usgs.gov/fdsnws/event/1/query?' +\n    'format=geojson&limit=1&orderby=time';\n  httpGet(url, 'jsonp', false, function(response) {\n    // when the HTTP request completes, populate the variable that holds the\n    // earthquake data used in the visualization.\n    earthquakes = response;\n  });\n}\n\nfunction draw() {\n  if (!earthquakes) {\n    // Wait until the earthquake data has loaded before drawing.\n    return;\n  }\n  background(200);\n  // Get the magnitude and name of the earthquake out of the loaded JSON\n  var earthquakeMag = earthquakes.features[0].properties.mag;\n  var earthquakeName = earthquakes.features[0].properties.place;\n  ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n  textAlign(CENTER);\n  text(earthquakeName, 0, height - 30, width, 30);\n  noLoop();\n}\n
"
+                ],
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Input"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 741,
+                "description": "
Method for executing an HTTP POST request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'POST').
\n",
+                "itemtype": "method",
+                "name": "httpPost",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
name of the file or url to load
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "datatype",
+                        "description": "
"json", "jsonp", "xml", or "text".\n                                   If omitted, httpPost() will guess.
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "data",
+                        "description": "
param data passed sent with request
\n",
+                        "type": "Object",
+                        "optional": true
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to be executed after\n                                   httpPost() completes, data is passed in\n                                   as first argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n\n// Examples use jsonplaceholder.typicode.com for a Mock Data API\n\nvar url = 'https://jsonplaceholder.typicode.com/posts';\nvar postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is way cool.' };\n\nfunction setup() {\n  createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n  // Pick new random color values\n  var r = random(255);\n  var g = random(255);\n  var b = random(255);\n\n  httpPost(url, 'json', postData, function(result) {\n    strokeWeight(2);\n    stroke(r, g, b);\n    fill(r, g, b, 127);\n    ellipse(mouseX, mouseY, 200, 200);\n    text(result.body, mouseX, mouseY);\n  });\n}\n\n
\n\n\n
\nvar url = 'https://invalidURL'; // A bad URL that will cause errors\nvar postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };\n\nfunction setup() {\n  createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n  // Pick new random color values\n  var r = random(255);\n  var g = random(255);\n  var b = random(255);\n\n  httpPost(\n    url,\n    'json',\n    postData,\n    function(result) {\n      // ... won't be called\n    },\n    function(error) {\n      strokeWeight(2);\n      stroke(r, g, b);\n      fill(r, g, b, 127);\n      text(error.toString(), mouseX, mouseY);\n    }\n  );\n}\n
\n"
+                ],
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Input"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 826,
+                "description": "
Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.

\nFor more advanced use, you may also pass in the path as the first argument\nand a object as the second argument, the signature follows the one specified\nin the Fetch API specification.
\n",
+                "itemtype": "method",
+                "name": "httpDo",
+                "example": [
+                    "\n
\n\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\n\n// displays an animation of all USGS earthquakes\nvar earthquakes;\nvar eqFeatureIndex = 0;\n\nfunction preload() {\n  var url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';\n  httpDo(\n    url,\n    {\n      method: 'GET',\n      // Other Request options, like special headers for apis\n      headers: { authorization: 'Bearer secretKey' }\n    },\n    function(res) {\n      earthquakes = res;\n    }\n  );\n}\n\nfunction draw() {\n  // wait until the data is loaded\n  if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {\n    return;\n  }\n  clear();\n\n  var feature = earthquakes.features[eqFeatureIndex];\n  var mag = feature.properties.mag;\n  var rad = mag / 11 * ((width + height) / 2);\n  fill(255, 0, 0, 100);\n  ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);\n\n  if (eqFeatureIndex >= earthquakes.features.length) {\n    eqFeatureIndex = 0;\n  } else {\n    eqFeatureIndex += 1;\n  }\n}\n\n
"
+                ],
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Input",
+                "overloads": [
+                    {
+                        "line": 826,
+                        "params": [
+                            {
+                                "name": "path",
+                                "description": "
name of the file or url to load
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "method",
+                                "description": "
either "GET", "POST", or "PUT",\n                                   defaults to "GET"
\n",
+                                "type": "String",
+                                "optional": true
+                            },
+                            {
+                                "name": "datatype",
+                                "description": "
"json", "jsonp", "xml", or "text"
\n",
+                                "type": "String",
+                                "optional": true
+                            },
+                            {
+                                "name": "data",
+                                "description": "
param data passed sent with request
\n",
+                                "type": "Object",
+                                "optional": true
+                            },
+                            {
+                                "name": "callback",
+                                "description": "
function to be executed after\n                                   httpGet() completes, data is passed in\n                                   as first argument
\n",
+                                "type": "Function",
+                                "optional": true
+                            },
+                            {
+                                "name": "errorCallback",
+                                "description": "
function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument
\n",
+                                "type": "Function",
+                                "optional": true
+                            }
+                        ]
+                    },
+                    {
+                        "line": 895,
+                        "params": [
+                            {
+                                "name": "path",
+                                "description": "",
+                                "type": "String"
+                            },
+                            {
+                                "name": "options",
+                                "description": "
Request object options as documented in the\n                                   "fetch" API\nreference
\n",
+                                "type": "Object"
+                            },
+                            {
+                                "name": "callback",
+                                "description": "",
+                                "type": "Function",
+                                "optional": true
+                            },
+                            {
+                                "name": "errorCallback",
+                                "description": "",
+                                "type": "Function",
+                                "optional": true
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1063,
+                "itemtype": "method",
+                "name": "createWriter",
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
name of the file to be created
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "extension",
+                        "description": "",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "p5.PrintWriter"
+                },
+                "example": [
+                    "\n
\n\ncreateButton('save')\n  .position(10, 10)\n  .mousePressed(function() {\n    var writer = createWriter('squares.txt');\n    for (var i = 0; i < 10; i++) {\n      writer.print(i * i);\n    }\n    writer.close();\n    writer.flush();\n  });\n\n
"
+                ],
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1113,
+                "itemtype": "method",
+                "name": "write",
+                "params": [
+                    {
+                        "name": "data",
+                        "description": "",
+                        "type": "Array"
+                    }
+                ],
+                "class": "p5.PrintWriter",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1120,
+                "itemtype": "method",
+                "name": "print",
+                "params": [
+                    {
+                        "name": "data",
+                        "description": "",
+                        "type": "Array"
+                    }
+                ],
+                "class": "p5.PrintWriter",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1127,
+                "itemtype": "method",
+                "name": "flush",
+                "class": "p5.PrintWriter",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1133,
+                "itemtype": "method",
+                "name": "close",
+                "class": "p5.PrintWriter",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1162,
+                "description": "
Save an image, text, json, csv, wav, or html. Prompts download to\nthe client's computer. Note that it is not recommended to call save()\nwithin draw if it's looping, as the save() function will open a new save\ndialog every frame.
\n
The default behavior is to save the canvas as an image. You can\noptionally specify a filename.\nFor example:
\n 
\n save();\n save('myCanvas.jpg'); // save a specific canvas with a filename\n 
\n\n
Alternately, the first parameter can be a pointer to a canvas\np5.Element, an Array of Strings,\nan Array of JSON, a JSON object, a p5.Table, a p5.Image, or a\np5.SoundFile (requires p5.sound). The second parameter is a filename\n(including extension). The third parameter is for options specific\nto this type of object. This method will save a file that fits the\ngiven paramaters. For example:
\n\n 
\n // Saves canvas as an image\n save('myCanvas.jpg');\n\n // Saves pImage as a png image\n var img = createImage(10, 10);\n save(img, 'my.png');\n\n // Saves canvas as an image\n var cnv = createCanvas(100, 100);\n save(cnv, 'myCanvas.jpg');\n\n // Saves p5.Renderer object as an image\n var gb = createGraphics(100, 100);\n save(gb, 'myGraphics.jpg');\n\n var myTable = new p5.Table();\n\n // Saves table as html file\n save(myTable, 'myTable.html');\n\n // Comma Separated Values\n save(myTable, 'myTable.csv');\n\n // Tab Separated Values\n save(myTable, 'myTable.tsv');\n\n var myJSON = { a: 1, b: true };\n\n // Saves pretty JSON\n save(myJSON, 'my.json');\n\n // Optimizes JSON filesize\n save(myJSON, 'my.json', true);\n\n // Saves array of strings to a text file with line breaks after each item\n var arrayOfStrings = ['a', 'b'];\n save(arrayOfStrings, 'my.txt');\n 
",
+                "itemtype": "method",
+                "name": "save",
+                "params": [
+                    {
+                        "name": "objectOrFilename",
+                        "description": "
If filename is provided, will\n                                           save canvas as an image with\n                                           either png or jpg extension\n                                           depending on the filename.\n                                           If object is provided, will\n                                           save depending on the object\n                                           and filename (see examples\n                                           above).
\n",
+                        "type": "Object|String",
+                        "optional": true
+                    },
+                    {
+                        "name": "filename",
+                        "description": "
If an object is provided as the first\n                             parameter, then the second parameter\n                             indicates the filename,\n                             and should include an appropriate\n                             file extension (see examples above).
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "options",
+                        "description": "
Additional options depend on\n                          filetype. For example, when saving JSON,\n                          true indicates that the\n                          output will be optimized for filesize,\n                          rather than readability.
\n",
+                        "type": "Boolean|String",
+                        "optional": true
+                    }
+                ],
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1290,
+                "description": "
Writes the contents of an Array or a JSON object to a .json file.\nThe file saving process and location of the saved file will\nvary between web browsers.
\n",
+                "itemtype": "method",
+                "name": "saveJSON",
+                "params": [
+                    {
+                        "name": "json",
+                        "description": "",
+                        "type": "Array|Object"
+                    },
+                    {
+                        "name": "filename",
+                        "description": "",
+                        "type": "String"
+                    },
+                    {
+                        "name": "optimize",
+                        "description": "
If true, removes line breaks\n                               and spaces from the output\n                               file to optimize filesize\n                               (but not readability).
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n 
\n var json = {}; // new  JSON Object\n\n json.id = 0;\n json.species = 'Panthera leo';\n json.name = 'Lion';\n\n createButton('save')\n .position(10, 10)\n .mousePressed(function() {\n   saveJSON(json, 'lion.json');\n });\n\n // saves the following to a file called \"lion.json\":\n // {\n //   \"id\": 0,\n //   \"species\": \"Panthera leo\",\n //   \"name\": \"Lion\"\n // }\n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1341,
+                "description": "
Writes an array of Strings to a text file, one line per String.\nThe file saving process and location of the saved file will\nvary between web browsers.
\n",
+                "itemtype": "method",
+                "name": "saveStrings",
+                "params": [
+                    {
+                        "name": "list",
+                        "description": "
string array to be written
\n",
+                        "type": "String[]"
+                    },
+                    {
+                        "name": "filename",
+                        "description": "
filename for output
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "extension",
+                        "description": "
the filename's extension
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n 
\n var words = 'apple bear cat dog';\n\n // .split() outputs an Array\n var list = split(words, ' ');\n\n createButton('save')\n .position(10, 10)\n .mousePressed(function() {\n   saveStrings(list, 'nouns.txt');\n });\n\n // Saves the following to a file called 'nouns.txt':\n //\n // apple\n // bear\n // cat\n // dog\n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1402,
+                "description": "
Writes the contents of a Table object to a file. Defaults to a\ntext file with comma-separated-values ('csv') but can also\nuse tab separation ('tsv'), or generate an HTML table ('html').\nThe file saving process and location of the saved file will\nvary between web browsers.
\n",
+                "itemtype": "method",
+                "name": "saveTable",
+                "params": [
+                    {
+                        "name": "Table",
+                        "description": "
the Table object to save to a file
\n",
+                        "type": "p5.Table"
+                    },
+                    {
+                        "name": "filename",
+                        "description": "
the filename to which the Table should be saved
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "options",
+                        "description": "
can be one of "tsv", "csv", or "html"
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n var table;\n\n function setup() {\n table = new p5.Table();\n\n table.addColumn('id');\n table.addColumn('species');\n table.addColumn('name');\n\n var newRow = table.addRow();\n newRow.setNum('id', table.getRowCount() - 1);\n newRow.setString('species', 'Panthera leo');\n newRow.setString('name', 'Lion');\n\n // To save, un-comment next line then click 'run'\n // saveTable(table, 'new.csv');\n }\n\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/files.js",
+                "line": 1549,
+                "description": "
Forces download. Accepts a url to filedata/blob, a filename,\nand an extension (optional).\nThis is a private function because it does not do any formatting,\nbut it is used by saveStrings, saveJSON, saveTable etc.
\n",
+                "itemtype": "method",
+                "name": "downloadFile",
+                "params": [
+                    {
+                        "name": "data",
+                        "description": "
either an href generated by createObjectURL,\n                              or a Blob object containing the data
\n",
+                        "type": "String|Blob"
+                    },
+                    {
+                        "name": "filename",
+                        "description": "",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "extension",
+                        "description": "",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Output"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 11,
+                "description": "
Table Options
\n
Generic class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.
\n
CSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.
\n
File names should end with .csv if they're comma separated.
\n
A rough "spec" for CSV can be found\nhere.
\n
To load files, use the loadTable method.
\n
To save tables to your computer, use the save method\n or the saveTable method.
\n\n
Possible options include:
\n
    \n
  • csv - parse the table as comma-separated values\n
  • tsv - parse the table as tab-separated values\n
  • header - this table has a header (title) row\n
",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 45,
+                "itemtype": "property",
+                "name": "columns",
+                "type": "String[]",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 50,
+                "itemtype": "property",
+                "name": "rows",
+                "type": "p5.TableRow[]",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 57,
+                "description": "
Use addRow() to add a new row of data to a p5.Table object. By default,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using set().
\n
If a p5.TableRow object is included as a parameter, then that row is\nduplicated and added to the table.
\n",
+                "itemtype": "method",
+                "name": "addRow",
+                "params": [
+                    {
+                        "name": "row",
+                        "description": "
row to be added to the table
\n",
+                        "type": "p5.TableRow",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n 
\n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add a row\n var newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n //print the results\n for (var r = 0; r < table.getRowCount(); r++)\n   for (var c = 0; c < table.getColumnCount(); c++)\n     print(table.getString(r, c));\n }\n \n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 120,
+                "description": "
Removes a row from the table object.
\n",
+                "itemtype": "method",
+                "name": "removeRow",
+                "params": [
+                    {
+                        "name": "id",
+                        "description": "
ID number of the row to remove
\n",
+                        "type": "Integer"
+                    }
+                ],
+                "example": [
+                    "\n
\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nvar table;\n\nfunction preload() {\n  //my table is comma separated value \"csv\"\n  //and has a header specifying the columns labels\n  table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n  //remove the first row\n  table.removeRow(0);\n\n  //print the results\n  for (var r = 0; r < table.getRowCount(); r++)\n    for (var c = 0; c < table.getColumnCount(); c++)\n      print(table.getString(r, c));\n}\n\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 168,
+                "description": "
Returns a reference to the specified p5.TableRow. The reference\ncan then be used to get and set values of the selected row.
\n",
+                "itemtype": "method",
+                "name": "getRow",
+                "params": [
+                    {
+                        "name": "rowID",
+                        "description": "
ID number of the row to get
\n",
+                        "type": "Integer"
+                    }
+                ],
+                "return": {
+                    "description": "p5.TableRow object",
+                    "type": "p5.TableRow"
+                },
+                "example": [
+                    "\n
\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nvar table;\n\nfunction preload() {\n  //my table is comma separated value \"csv\"\n  //and has a header specifying the columns labels\n  table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n  var row = table.getRow(1);\n  //print it column by column\n  //note: a row is an object, not an array\n  for (var c = 0; c < table.getColumnCount(); c++) {\n    print(row.getString(c));\n  }\n}\n\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 214,
+                "description": "
Gets all rows from the table. Returns an array of p5.TableRows.
\n",
+                "itemtype": "method",
+                "name": "getRows",
+                "return": {
+                    "description": "Array of p5.TableRows",
+                    "type": "p5.TableRow[]"
+                },
+                "example": [
+                    "\n 
\n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n var rows = table.getRows();\n\n //warning: rows is an array of objects\n for (var r = 0; r < rows.length; r++) {\n   rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n for (r = 0; r < table.getRowCount(); r++)\n   for (var c = 0; c < table.getColumnCount(); c++)\n     print(table.getString(r, c));\n }\n \n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 263,
+                "description": "
Finds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.
\n",
+                "itemtype": "method",
+                "name": "findRow",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
The value to match
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
ID number or title of the\n                               column to search
\n",
+                        "type": "Integer|String"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "p5.TableRow"
+                },
+                "example": [
+                    "\n 
\n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //find the animal named zebra\n var row = table.findRow('Zebra', 'name');\n //find the corresponding species\n print(row.getString('species'));\n }\n \n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 328,
+                "description": "
Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "findRows",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
The value to match
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
ID number or title of the\n                               column to search
\n",
+                        "type": "Integer|String"
+                    }
+                ],
+                "return": {
+                    "description": "An Array of TableRow objects",
+                    "type": "p5.TableRow[]"
+                },
+                "example": [
+                    "\n 
\n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add another goat\n var newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Scape Goat');\n newRow.setString('name', 'Goat');\n\n //find the rows containing animals named Goat\n var rows = table.findRows('Goat', 'name');\n print(rows.length + ' Goats found');\n }\n \n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 397,
+                "description": "
Finds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "matchRow",
+                "params": [
+                    {
+                        "name": "regexp",
+                        "description": "
The regular expression to match
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
The column ID (number) or\n                                 title (string)
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "return": {
+                    "description": "TableRow object",
+                    "type": "p5.TableRow"
+                },
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 427,
+                "description": "
Finds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "matchRows",
+                "params": [
+                    {
+                        "name": "regexp",
+                        "description": "
The regular expression to match
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
The column ID (number) or\n                                 title (string)
\n",
+                        "type": "String|Integer",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "An Array of TableRow objects",
+                    "type": "p5.TableRow[]"
+                },
+                "example": [
+                    "\nvar table;\n\nfunction setup() {\n\n  table = new p5.Table();\n\n  table.addColumn('name');\n  table.addColumn('type');\n\n  var newRow = table.addRow();\n  newRow.setString('name', 'Lion');\n  newRow.setString('type', 'Mammal');\n\n  newRow = table.addRow();\n  newRow.setString('name', 'Snake');\n  newRow.setString('type', 'Reptile');\n\n  newRow = table.addRow();\n  newRow.setString('name', 'Mosquito');\n  newRow.setString('type', 'Insect');\n\n  newRow = table.addRow();\n  newRow.setString('name', 'Lizard');\n  newRow.setString('type', 'Reptile');\n\n  var rows = table.matchRows('R.*', 'type');\n  for (var i = 0; i < rows.length; i++) {\n    print(rows[i].getString('name') + ': ' + rows[i].getString('type'));\n  }\n}\n// Sketch prints:\n// Snake: Reptile\n// Lizard: Reptile"
+                ],
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 491,
+                "description": "
Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "getColumn",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
String or Number of the column to return
\n",
+                        "type": "String|Number"
+                    }
+                ],
+                "return": {
+                    "description": "Array of column values",
+                    "type": "Array"
+                },
+                "example": [
+                    "\n 
\n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //getColumn returns an array that can be printed directly\n print(table.getColumn('species'));\n //outputs [\"Capra hircus\", \"Panthera pardus\", \"Equus zebra\"]\n }\n \n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 544,
+                "description": "
Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.
\n",
+                "itemtype": "method",
+                "name": "clearRows",
+                "example": [
+                    "\n 
\n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.clearRows();\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n }\n \n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 586,
+                "description": "
Use addColumn() to add a new column to a Table object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column's title will be null.)
\n",
+                "itemtype": "method",
+                "name": "addColumn",
+                "params": [
+                    {
+                        "name": "title",
+                        "description": "
title of the given column
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n 
\n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.addColumn('carnivore');\n table.set(0, 'carnivore', 'no');\n table.set(1, 'carnivore', 'yes');\n table.set(2, 'carnivore', 'no');\n\n //print the results\n for (var r = 0; r < table.getRowCount(); r++)\n   for (var c = 0; c < table.getColumnCount(); c++)\n     print(table.getString(r, c));\n }\n \n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 637,
+                "description": "
Returns the total number of columns in a Table.
\n",
+                "itemtype": "method",
+                "name": "getColumnCount",
+                "return": {
+                    "description": "Number of columns in this table",
+                    "type": "Integer"
+                },
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 647,
+                "description": "
Returns the total number of rows in a Table.
\n",
+                "itemtype": "method",
+                "name": "getRowCount",
+                "return": {
+                    "description": "Number of rows in this table",
+                    "type": "Integer"
+                },
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 657,
+                "description": "
Removes any of the specified characters (or "tokens").
\n\n
If no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.
",
+                "itemtype": "method",
+                "name": "removeTokens",
+                "params": [
+                    {
+                        "name": "chars",
+                        "description": "
String listing characters to be removed
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
Column ID (number)\n                                 or name (string)
\n",
+                        "type": "String|Integer",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 706,
+                "description": "
Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "trim",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
Column ID (number)\n                                 or name (string)
\n",
+                        "type": "String|Integer",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 746,
+                "description": "
Use removeColumn() to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.
\n",
+                "itemtype": "method",
+                "name": "removeColumn",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
columnName (string) or ID (number)
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "example": [
+                    "\n 
\n \n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n var table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.removeColumn('id');\n print(table.getColumnCount());\n }\n \n 
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 812,
+                "description": "
Stores a value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
column ID (Number)\n                              or title (String)
\n",
+                        "type": "String|Integer"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
value to assign
\n",
+                        "type": "String|Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nvar table;\n\nfunction preload() {\n  //my table is comma separated value \"csv\"\n  //and has a header specifying the columns labels\n  table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n  table.set(0, 'species', 'Canis Lupus');\n  table.set(0, 'name', 'Wolf');\n\n  //print the results\n  for (var r = 0; r < table.getRowCount(); r++)\n    for (var c = 0; c < table.getColumnCount(); c++)\n      print(table.getString(r, c));\n}\n\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 861,
+                "description": "
Stores a Float value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "setNum",
+                "params": [
+                    {
+                        "name": "row",
+                        "description": "
row ID
\n",
+                        "type": "Integer"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
column ID (Number)\n                              or title (String)
\n",
+                        "type": "String|Integer"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
value to assign
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nvar table;\n\nfunction preload() {\n  //my table is comma separated value \"csv\"\n  //and has a header specifying the columns labels\n  table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n  table.setNum(1, 'id', 1);\n\n  print(table.getColumn(0));\n  //[\"0\", 1, \"2\"]\n}\n\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 907,
+                "description": "
Stores a String value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "setString",
+                "params": [
+                    {
+                        "name": "row",
+                        "description": "
row ID
\n",
+                        "type": "Integer"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
column ID (Number)\n                              or title (String)
\n",
+                        "type": "String|Integer"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
value to assign
\n",
+                        "type": "String"
+                    }
+                ],
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 922,
+                "description": "
Retrieves a value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n",
+                "itemtype": "method",
+                "name": "get",
+                "params": [
+                    {
+                        "name": "row",
+                        "description": "
row ID
\n",
+                        "type": "Integer"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
columnName (string) or\n                                  ID (number)
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "String|Number"
+                },
+                "example": [
+                    "\n
\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nvar table;\n\nfunction preload() {\n  //my table is comma separated value \"csv\"\n  //and has a header specifying the columns labels\n  table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n  print(table.get(0, 1));\n  //Capra hircus\n  print(table.get(0, 'species'));\n  //Capra hircus\n}\n\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 969,
+                "description": "
Retrieves a Float value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n",
+                "itemtype": "method",
+                "name": "getNum",
+                "params": [
+                    {
+                        "name": "row",
+                        "description": "
row ID
\n",
+                        "type": "Integer"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
columnName (string) or\n                                  ID (number)
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nvar table;\n\nfunction preload() {\n  //my table is comma separated value \"csv\"\n  //and has a header specifying the columns labels\n  table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n  print(table.getNum(1, 0) + 100);\n  //id 1 + 100 = 101\n}\n\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 1014,
+                "description": "
Retrieves a String value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n",
+                "itemtype": "method",
+                "name": "getString",
+                "params": [
+                    {
+                        "name": "row",
+                        "description": "
row ID
\n",
+                        "type": "Integer"
+                    },
+                    {
+                        "name": "column",
+                        "description": "
columnName (string) or\n                                  ID (number)
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nvar table;\n\nfunction preload() {\n  //my table is comma separated value \"csv\"\n  //and has a header specifying the columns labels\n  table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n  var tableArray = table.getArray();\n\n  //output each row as array\n  for (var i = 0; i < tableArray.length; i++) {\n    print(tableArray[i]);\n  }\n}\n\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 1063,
+                "description": "
Retrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.
\n",
+                "itemtype": "method",
+                "name": "getObject",
+                "params": [
+                    {
+                        "name": "headerColumn",
+                        "description": "
Name of the column which should be used to\n                             title each row object (optional)
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Object"
+                },
+                "example": [
+                    "\n
\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nvar table;\n\nfunction preload() {\n  //my table is comma separated value \"csv\"\n  //and has a header specifying the columns labels\n  table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n  var tableObject = table.getObject();\n\n  print(tableObject);\n  //outputs an object\n}\n\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.Table.js",
+                "line": 1127,
+                "description": "
Retrieves all table data and returns it as a multidimensional array.
\n",
+                "itemtype": "method",
+                "name": "getArray",
+                "return": {
+                    "description": "",
+                    "type": "Array"
+                },
+                "class": "p5.Table",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.TableRow.js",
+                "line": 43,
+                "description": "
Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
Column ID (Number)\n                              or Title (String)
\n",
+                        "type": "String|Integer"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
The value to be stored
\n",
+                        "type": "String|Number"
+                    }
+                ],
+                "class": "p5.TableRow",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.TableRow.js",
+                "line": 74,
+                "description": "
Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "setNum",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
Column ID (Number)\n                              or Title (String)
\n",
+                        "type": "String|Integer"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
The value to be stored\n                              as a Float
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.TableRow",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.TableRow.js",
+                "line": 89,
+                "description": "
Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "setString",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
Column ID (Number)\n                              or Title (String)
\n",
+                        "type": "String|Integer"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
The value to be stored\n                              as a String
\n",
+                        "type": "String"
+                    }
+                ],
+                "class": "p5.TableRow",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.TableRow.js",
+                "line": 104,
+                "description": "
Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n",
+                "itemtype": "method",
+                "name": "get",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
columnName (string) or\n                                 ID (number)
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "String|Number"
+                },
+                "class": "p5.TableRow",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.TableRow.js",
+                "line": 121,
+                "description": "
Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.
\n",
+                "itemtype": "method",
+                "name": "getNum",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
columnName (string) or\n                                 ID (number)
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "return": {
+                    "description": "Float Floating point number",
+                    "type": "Number"
+                },
+                "class": "p5.TableRow",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.TableRow.js",
+                "line": 145,
+                "description": "
Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.
\n",
+                "itemtype": "method",
+                "name": "getString",
+                "params": [
+                    {
+                        "name": "column",
+                        "description": "
columnName (string) or\n                                 ID (number)
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "return": {
+                    "description": "String",
+                    "type": "String"
+                },
+                "class": "p5.TableRow",
+                "module": "IO",
+                "submodule": "Table"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 65,
+                "description": "
Gets a copy of the element's parent. Returns the parent as another\np5.XML object.
\n",
+                "itemtype": "method",
+                "name": "getParent",
+                "return": {
+                    "description": "element parent",
+                    "type": "p5.XML"
+                },
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var children = xml.getChildren('animal');\n  var parent = children[1].getParent();\n  print(parent.getName());\n}\n\n// Sketch prints:\n// mammals\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 103,
+                "description": "
Gets the element's full name, which is returned as a String.
\n",
+                "itemtype": "method",
+                "name": "getName",
+                "return": {
+                    "description": "the name of the node",
+                    "type": "String"
+                },
+                "example": [
+                    "<animal\n 
\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // \n // <mammals>\n //   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n //   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n //   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n // </mammals>\n\n var xml;\n\n function preload() {\n xml = loadXML('assets/mammals.xml');\n }\n\n function setup() {\n print(xml.getName());\n }\n\n // Sketch prints:\n // mammals\n 
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 138,
+                "description": "
Sets the element's name, which is specified as a String.
\n",
+                "itemtype": "method",
+                "name": "setName",
+                "params": [
+                    {
+                        "name": "the",
+                        "description": "
new name of the node
\n",
+                        "type": "String"
+                    }
+                ],
+                "example": [
+                    "<animal\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  print(xml.getName());\n  xml.setName('fish');\n  print(xml.getName());\n}\n\n// Sketch prints:\n// mammals\n// fish\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 176,
+                "description": "
Checks whether or not the element has any children, and returns the result\nas a boolean.
\n",
+                "itemtype": "method",
+                "name": "hasChildren",
+                "return": {
+                    "description": "",
+                    "type": "Boolean"
+                },
+                "example": [
+                    "<animal\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  print(xml.hasChildren());\n}\n\n// Sketch prints:\n// true\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 212,
+                "description": "
Get the names of all of the element's children, and returns the names as an\narray of Strings. This is the same as looping through and calling getName()\non each child element individually.
\n",
+                "itemtype": "method",
+                "name": "listChildren",
+                "return": {
+                    "description": "names of the children of the element",
+                    "type": "String[]"
+                },
+                "example": [
+                    "<animal\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  print(xml.listChildren());\n}\n\n// Sketch prints:\n// [\"animal\", \"animal\", \"animal\"]\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 251,
+                "description": "
Returns all of the element's children as an array of p5.XML objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.
\n",
+                "itemtype": "method",
+                "name": "getChildren",
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
element name
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "children of the element",
+                    "type": "p5.XML[]"
+                },
+                "example": [
+                    "<animal\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var animals = xml.getChildren('animal');\n\n  for (var i = 0; i < animals.length; i++) {\n    print(animals[i].getContent());\n  }\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Leopard\"\n// \"Zebra\"\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 301,
+                "description": "
Returns the first of the element's children that matches the name parameter\nor the child of the given index.It returns undefined if no matching\nchild is found.
\n",
+                "itemtype": "method",
+                "name": "getChild",
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
element name or index
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "p5.XML"
+                },
+                "example": [
+                    "<animal\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var firstChild = xml.getChild('animal');\n  print(firstChild.getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n
\n
\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var secondChild = xml.getChild(1);\n  print(secondChild.getContent());\n}\n\n// Sketch prints:\n// \"Leopard\"\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 361,
+                "description": "
Appends a new child to the element. The child can be specified with\neither a String, which will be used as the new tag's name, or as a\nreference to an existing p5.XML object.\nA reference to the newly created child is returned as an p5.XML object.
\n",
+                "itemtype": "method",
+                "name": "addChild",
+                "params": [
+                    {
+                        "name": "a",
+                        "description": "
p5.XML Object which will be the child to be added
\n",
+                        "type": "p5.XML"
+                    }
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 378,
+                "description": "
Removes the element specified by name or index.
\n",
+                "itemtype": "method",
+                "name": "removeChild",
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
element name or index
\n",
+                        "type": "String|Integer"
+                    }
+                ],
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  xml.removeChild('animal');\n  var children = xml.getChildren();\n  for (var i = 0; i < children.length; i++) {\n    print(children[i].getContent());\n  }\n}\n\n// Sketch prints:\n// \"Leopard\"\n// \"Zebra\"\n
\n
\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  xml.removeChild(1);\n  var children = xml.getChildren();\n  for (var i = 0; i < children.length; i++) {\n    print(children[i].getContent());\n  }\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Zebra\"\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 450,
+                "description": "
Counts the specified element's number of attributes, returned as an Number.
\n",
+                "itemtype": "method",
+                "name": "getAttributeCount",
+                "return": {
+                    "description": "",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var firstChild = xml.getChild('animal');\n  print(firstChild.getAttributeCount());\n}\n\n// Sketch prints:\n// 2\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 486,
+                "description": "
Gets all of the specified element's attributes, and returns them as an\narray of Strings.
\n",
+                "itemtype": "method",
+                "name": "listAttributes",
+                "return": {
+                    "description": "an array of strings containing the names of attributes",
+                    "type": "String[]"
+                },
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var firstChild = xml.getChild('animal');\n  print(firstChild.listAttributes());\n}\n\n// Sketch prints:\n// [\"id\", \"species\"]\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 523,
+                "description": "
Checks whether or not an element has the specified attribute.
\n",
+                "itemtype": "method",
+                "name": "hasAttribute",
+                "params": [
+                    {
+                        "name": "the",
+                        "description": "
attribute to be checked
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "true if attribute found else false",
+                    "type": "Boolean"
+                },
+                "example": [
+                    "\n 
\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // \n // <mammals>\n //   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n //   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n //   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n // </mammals>\n\n var xml;\n\n function preload() {\n xml = loadXML('assets/mammals.xml');\n }\n\n function setup() {\n var firstChild = xml.getChild('animal');\n print(firstChild.hasAttribute('species'));\n print(firstChild.hasAttribute('color'));\n }\n\n // Sketch prints:\n // true\n // false\n 
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 562,
+                "description": "
Returns an attribute value of the element as an Number. If the defaultValue\nparameter is specified and the attribute doesn't exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn't\nexist, the value 0 is returned.
\n",
+                "itemtype": "method",
+                "name": "getNum",
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
the non-null full name of the attribute
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "defaultValue",
+                        "description": "
the default value of the attribute
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var firstChild = xml.getChild('animal');\n  print(firstChild.getNum('id'));\n}\n\n// Sketch prints:\n// 0\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 603,
+                "description": "
Returns an attribute value of the element as an String. If the defaultValue\nparameter is specified and the attribute doesn't exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn't\nexist, null is returned.
\n",
+                "itemtype": "method",
+                "name": "getString",
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
the non-null full name of the attribute
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "defaultValue",
+                        "description": "
the default value of the attribute
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var firstChild = xml.getChild('animal');\n  print(firstChild.getString('species'));\n}\n\n// Sketch prints:\n// \"Capra hircus\"\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 644,
+                "description": "
Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.
\n",
+                "itemtype": "method",
+                "name": "setAttribute",
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
the full name of the attribute
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
the value of the attribute
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var firstChild = xml.getChild('animal');\n  print(firstChild.getString('species'));\n  firstChild.setAttribute('species', 'Jamides zebra');\n  print(firstChild.getString('species'));\n}\n\n// Sketch prints:\n// \"Capra hircus\"\n// \"Jamides zebra\"\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 687,
+                "description": "
Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.
\n",
+                "itemtype": "method",
+                "name": "getContent",
+                "params": [
+                    {
+                        "name": "defaultValue",
+                        "description": "
value returned if no content is found
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var firstChild = xml.getChild('animal');\n  print(firstChild.getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 725,
+                "description": "
Sets the element's content.
\n",
+                "itemtype": "method",
+                "name": "setContent",
+                "params": [
+                    {
+                        "name": "text",
+                        "description": "
the new content
\n",
+                        "type": "String"
+                    }
+                ],
+                "example": [
+                    "\n
\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// \n// <mammals>\n//   <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n//   <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n//   <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n// </mammals>\n\nvar xml;\n\nfunction preload() {\n  xml = loadXML('assets/mammals.xml');\n}\n\nfunction setup() {\n  var firstChild = xml.getChild('animal');\n  print(firstChild.getContent());\n  firstChild.setContent('Mountain Goat');\n  print(firstChild.getContent());\n}\n\n// Sketch prints:\n// \"Goat\"\n// \"Mountain Goat\"\n
"
+                ],
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 767,
+                "description": "
This method is called while the parsing of XML (when loadXML() is\ncalled). The difference between this method and the setContent()\nmethod defined later is that this one is used to set the content\nwhen the node in question has more nodes under it and so on and\nnot directly text content. While in the other one is used when\nthe node in question directly has text inside it.
\n",
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/io/p5.XML.js",
+                "line": 784,
+                "description": "
This method is called while the parsing of XML (when loadXML() is\ncalled). The XML node is passed and its attributes are stored in the\np5.XML's attribute Object.
\n",
+                "class": "p5.XML",
+                "module": "IO",
+                "submodule": "XML"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 12,
+                "description": "
Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\nThe absolute value of a number is always positive.
\n",
+                "itemtype": "method",
+                "name": "abs",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
number to compute
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "absolute value of given number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var x = -3;\n  var y = abs(x);\n\n  print(x); // -3\n  print(y); // 3\n}\n
"
+                ],
+                "alt": "no image displayed",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 36,
+                "description": "
Calculates the closest int value that is greater than or equal to the\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\nreturns the value 10.
\n",
+                "itemtype": "method",
+                "name": "ceil",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
number to round up
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "rounded up number",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\nfunction draw() {\n  background(200);\n  // map, mouseX between 0 and 5.\n  var ax = map(mouseX, 0, 100, 0, 5);\n  var ay = 66;\n\n  //Get the ceiling of the mapped number.\n  var bx = ceil(map(mouseX, 0, 100, 0, 5));\n  var by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n
"
+                ],
+                "alt": "2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 76,
+                "description": "
Constrains a value between a minimum and maximum value.
\n",
+                "itemtype": "method",
+                "name": "constrain",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
number to constrain
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "low",
+                        "description": "
minimum limit
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "high",
+                        "description": "
maximum limit
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "constrained number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction draw() {\n  background(200);\n\n  var leftWall = 25;\n  var rightWall = 75;\n\n  // xm is just the mouseX, while\n  // xc is the mouseX, but constrained\n  // between the leftWall and rightWall!\n  var xm = mouseX;\n  var xc = constrain(mouseX, leftWall, rightWall);\n\n  // Draw the walls.\n  stroke(150);\n  line(leftWall, 0, leftWall, height);\n  line(rightWall, 0, rightWall, height);\n\n  // Draw xm and xc as circles.\n  noStroke();\n  fill(150);\n  ellipse(xm, 33, 9, 9); // Not Constrained\n  fill(0);\n  ellipse(xc, 66, 9, 9); // Constrained\n}\n
"
+                ],
+                "alt": "2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 121,
+                "description": "
Calculates the distance between two points.
\n",
+                "itemtype": "method",
+                "name": "dist",
+                "return": {
+                    "description": "distance between the two points",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n// Move your mouse inside the canvas to see the\n// change in distance between two points!\nfunction draw() {\n  background(200);\n  fill(0);\n\n  var x1 = 10;\n  var y1 = 90;\n  var x2 = mouseX;\n  var y2 = mouseY;\n\n  line(x1, y1, x2, y2);\n  ellipse(x1, y1, 7, 7);\n  ellipse(x2, y2, 7, 7);\n\n  // d is the length of the line\n  // the distance from point 1 to point 2.\n  var d = int(dist(x1, y1, x2, y2));\n\n  // Let's write d along the line we are drawing!\n  push();\n  translate((x1 + x2) / 2, (y1 + y2) / 2);\n  rotate(atan2(y2 - y1, x2 - x1));\n  text(nfc(d, 1), 0, -5);\n  pop();\n  // Fancy!\n}\n
"
+                ],
+                "alt": "2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation",
+                "overloads": [
+                    {
+                        "line": 121,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "
x-coordinate of the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "
y-coordinate of the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "
x-coordinate of the second point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "
y-coordinate of the second point
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "return": {
+                            "description": "distance between the two points",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 165,
+                        "params": [
+                            {
+                                "name": "x1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z1",
+                                "description": "
z-coordinate of the first point
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z2",
+                                "description": "
z-coordinate of the second point
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "return": {
+                            "description": "distance between the two points",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 190,
+                "description": "
Returns Euler's number e (2.71828...) raised to the power of the n\nparameter. Maps to Math.exp().
\n",
+                "itemtype": "method",
+                "name": "exp",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
exponent to raise
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "e^n",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction draw() {\n  background(200);\n\n  // Compute the exp() function with a value between 0 and 2\n  var xValue = map(mouseX, 0, width, 0, 2);\n  var yValue = exp(xValue);\n\n  var y = map(yValue, 0, 8, height, 0);\n\n  var legend = 'exp (' + nfc(xValue, 3) + ')\\n= ' + nf(yValue, 1, 4);\n  stroke(150);\n  line(mouseX, y, mouseX, height);\n  fill(0);\n  text(legend, 5, 15);\n  noStroke();\n  ellipse(mouseX, y, 7, 7);\n\n  // Draw the exp(x) curve,\n  // over the domain of x from 0 to 2\n  noFill();\n  stroke(0);\n  beginShape();\n  for (var x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, 2);\n    yValue = exp(xValue);\n    y = map(yValue, 0, 8, height, 0);\n    vertex(x, y);\n  }\n\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height - 1, width, height - 1);\n}\n
"
+                ],
+                "alt": "ellipse moves along a curve with mouse x. e^n displayed.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 240,
+                "description": "
Calculates the closest int value that is less than or equal to the\nvalue of the parameter. Maps to Math.floor().
\n",
+                "itemtype": "method",
+                "name": "floor",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
number to round down
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "rounded down number",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  var ax = map(mouseX, 0, 100, 0, 5);\n  var ay = 66;\n\n  //Get the floor of the mapped number.\n  var bx = floor(map(mouseX, 0, 100, 0, 5));\n  var by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n
"
+                ],
+                "alt": "2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 279,
+                "description": "
Calculates a number between two numbers at a specific increment. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first point, 0.1 is very near the first point, 0.5 is\nhalf-way in between, etc. The lerp function is convenient for creating\nmotion along a straight path and for drawing dotted lines.
\n",
+                "itemtype": "method",
+                "name": "lerp",
+                "params": [
+                    {
+                        "name": "start",
+                        "description": "
first value
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "stop",
+                        "description": "
second value
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "amt",
+                        "description": "
number between 0.0 and 1.0
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "lerped value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  background(200);\n  var a = 20;\n  var b = 80;\n  var c = lerp(a, b, 0.2);\n  var d = lerp(a, b, 0.5);\n  var e = lerp(a, b, 0.8);\n\n  var y = 50;\n\n  strokeWeight(5);\n  stroke(0); // Draw the original points in black\n  point(a, y);\n  point(b, y);\n\n  stroke(100); // Draw the lerp points in gray\n  point(c, y);\n  point(d, y);\n  point(e, y);\n}\n
"
+                ],
+                "alt": "5 points horizontally staggered mid-canvas. mid 3 are grey, outer black",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 324,
+                "description": "
Calculates the natural logarithm (the base-e logarithm) of a number. This\nfunction expects the n parameter to be a value greater than 0.0. Maps to\nMath.log().
\n",
+                "itemtype": "method",
+                "name": "log",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
number greater than 0
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "natural logarithm of n",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction draw() {\n  background(200);\n  var maxX = 2.8;\n  var maxY = 1.5;\n\n  // Compute the natural log of a value between 0 and maxX\n  var xValue = map(mouseX, 0, width, 0, maxX);\n  if (xValue > 0) {\n   // Cannot take the log of a negative number.\n    var yValue = log(xValue);\n    var y = map(yValue, -maxY, maxY, height, 0);\n\n    // Display the calculation occurring.\n    var legend = 'log(' + nf(xValue, 1, 2) + ')\\n= ' + nf(yValue, 1, 3);\n    stroke(150);\n    line(mouseX, y, mouseX, height);\n    fill(0);\n    text(legend, 5, 15);\n    noStroke();\n    ellipse(mouseX, y, 7, 7);\n  }\n\n  // Draw the log(x) curve,\n  // over the domain of x from 0 to maxX\n  noFill();\n  stroke(0);\n  beginShape();\n  for (var x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, maxX);\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n    vertex(x, y);\n  }\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height / 2, width, height / 2);\n}\n
"
+                ],
+                "alt": "ellipse moves along a curve with mouse x. natural logarithm of n displayed.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 379,
+                "description": "
Calculates the magnitude (or length) of a vector. A vector is a direction\nin space commonly used in computer graphics and linear algebra. Because it\nhas no "start" position, the magnitude of a vector can be thought of as\nthe distance from the coordinate 0,0 to its x,y value. Therefore, mag() is\na shortcut for writing dist(0, 0, x, y).
\n",
+                "itemtype": "method",
+                "name": "mag",
+                "params": [
+                    {
+                        "name": "a",
+                        "description": "
first value
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "b",
+                        "description": "
second value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "magnitude of vector from (0,0) to (a,b)",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var x1 = 20;\n  var x2 = 80;\n  var y1 = 30;\n  var y2 = 70;\n\n  line(0, 0, x1, y1);\n  print(mag(x1, y1)); // Prints \"36.05551275463989\"\n  line(0, 0, x2, y1);\n  print(mag(x2, y1)); // Prints \"85.44003745317531\"\n  line(0, 0, x1, y2);\n  print(mag(x1, y2)); // Prints \"72.80109889280519\"\n  line(0, 0, x2, y2);\n  print(mag(x2, y2)); // Prints \"106.3014581273465\"\n}\n
"
+                ],
+                "alt": "4 lines of different length radiate from top left of canvas.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 418,
+                "description": "
Re-maps a number from one range to another.\n

\nIn the first example above, the number 25 is converted from a value in the\nrange of 0 to 100 into a value that ranges from the left edge of the\nwindow (0) to the right edge (width).
\n",
+                "itemtype": "method",
+                "name": "map",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
the incoming value to be converted
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "start1",
+                        "description": "
lower bound of the value's current range
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "stop1",
+                        "description": "
upper bound of the value's current range
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "start2",
+                        "description": "
lower bound of the value's target range
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "stop2",
+                        "description": "
upper bound of the value's target range
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "withinBounds",
+                        "description": "
constrain the value to the newly mapped range
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "remapped number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n  
\nvar value = 25;\nvar m = map(value, 0, 100, 0, width);\nellipse(m, 50, 10, 10);\n
\n\n  
\nfunction setup() {\n  noStroke();\n}\n\nfunction draw() {\n  background(204);\n  var x1 = map(mouseX, 0, width, 25, 75);\n  ellipse(x1, 25, 25, 25);\n  //This ellipse is constrained to the 0-100 range\n  //after setting withinBounds to true\n  var x2 = map(mouseX, 0, width, 0, 100, true);\n  ellipse(x2, 75, 25, 25);\n}\n
"
+                ],
+                "alt": "10 by 10 white ellipse with in mid left canvas\n2 25 by 25 white ellipses move with mouse x. Bottom has more range from X",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 474,
+                "description": "
Determines the largest value in a sequence of numbers, and then returns\nthat value. max() accepts any number of Number parameters, or an Array\nof any length.
\n",
+                "itemtype": "method",
+                "name": "max",
+                "return": {
+                    "description": "maximum Number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how max() works!\n  var numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  var spacing = 15;\n  var elemsY = 25;\n  for (var i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  var maxX = 33;\n  var maxY = 80;\n  // Draw the Maximum value in the array.\n  textSize(32);\n  text(max(numArray), maxX, maxY);\n}\n
"
+                ],
+                "alt": "Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation",
+                "overloads": [
+                    {
+                        "line": 474,
+                        "params": [
+                            {
+                                "name": "n0",
+                                "description": "
Number to compare
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "n1",
+                                "description": "
Number to compare
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "return": {
+                            "description": "maximum Number",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 510,
+                        "params": [
+                            {
+                                "name": "nums",
+                                "description": "
Numbers to compare
\n",
+                                "type": "Number[]"
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 524,
+                "description": "
Determines the smallest value in a sequence of numbers, and then returns\nthat value. min() accepts any number of Number parameters, or an Array\nof any length.
\n",
+                "itemtype": "method",
+                "name": "min",
+                "return": {
+                    "description": "minimum Number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how min() works!\n  var numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  var spacing = 15;\n  var elemsY = 25;\n  for (var i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  var maxX = 33;\n  var maxY = 80;\n  // Draw the Minimum value in the array.\n  textSize(32);\n  text(min(numArray), maxX, maxY);\n}\n
"
+                ],
+                "alt": "Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation",
+                "overloads": [
+                    {
+                        "line": 524,
+                        "params": [
+                            {
+                                "name": "n0",
+                                "description": "
Number to compare
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "n1",
+                                "description": "
Number to compare
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "return": {
+                            "description": "minimum Number",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 560,
+                        "params": [
+                            {
+                                "name": "nums",
+                                "description": "
Numbers to compare
\n",
+                                "type": "Number[]"
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 574,
+                "description": "
Normalizes a number from another range into a value between 0 and 1.\nIdentical to map(value, low, high, 0, 1).\nNumbers outside of the range are not clamped to 0 and 1, because\nout-of-range values are often intentional and useful. (See the second\nexample above.)
\n",
+                "itemtype": "method",
+                "name": "norm",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
incoming value to be normalized
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "start",
+                        "description": "
lower bound of the value's current range
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "stop",
+                        "description": "
upper bound of the value's current range
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "normalized number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction draw() {\n  background(200);\n  var currentNum = mouseX;\n  var lowerBound = 0;\n  var upperBound = width; //100;\n  var normalized = norm(currentNum, lowerBound, upperBound);\n  var lineY = 70;\n  line(0, lineY, width, lineY);\n  //Draw an ellipse mapped to the non-normalized value.\n  noStroke();\n  fill(50);\n  var s = 7; // ellipse size\n  ellipse(currentNum, lineY, s, s);\n\n  // Draw the guide\n  var guideY = lineY + 15;\n  text('0', 0, guideY);\n  textAlign(RIGHT);\n  text('100', width, guideY);\n\n  // Draw the normalized value\n  textAlign(LEFT);\n  fill(0);\n  textSize(32);\n  var normalY = 40;\n  var normalX = 20;\n  text(normalized, normalX, normalY);\n}\n
"
+                ],
+                "alt": "ellipse moves with mouse. 0 shown left & 100 right and updating values center",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 627,
+                "description": "
Facilitates exponential expressions. The pow() function is an efficient\nway of multiplying numbers by themselves (or their reciprocals) in large\nquantities. For example, pow(3, 5) is equivalent to the expression\n33333 and pow(3, -5) is equivalent to 1 / 33333. Maps to\nMath.pow().
\n",
+                "itemtype": "method",
+                "name": "pow",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
base of the exponential expression
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "e",
+                        "description": "
power by which to raise the base
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "n^e",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  //Exponentially increase the size of an ellipse.\n  var eSize = 3; // Original Size\n  var eLoc = 10; // Original Location\n\n  ellipse(eLoc, eLoc, eSize, eSize);\n\n  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\n\n  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\n\n  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\n}\n
"
+                ],
+                "alt": "small to large ellipses radiating from top left of canvas",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 661,
+                "description": "
Calculates the integer closest to the n parameter. For example,\nround(133.8) returns the value 134. Maps to Math.round().
\n",
+                "itemtype": "method",
+                "name": "round",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
number to round
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "rounded number",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  var ax = map(mouseX, 0, 100, 0, 5);\n  var ay = 66;\n\n  // Round the mapped number.\n  var bx = round(map(mouseX, 0, 100, 0, 5));\n  var by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n
"
+                ],
+                "alt": "horizontal center line squared values displayed on top and regular on bottom.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 700,
+                "description": "
Squares a number (multiplies a number by itself). The result is always a\npositive number, as multiplying two negative numbers always yields a\npositive result. For example, -1 * -1 = 1.
\n",
+                "itemtype": "method",
+                "name": "sq",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
number to square
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "squared number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction draw() {\n  background(200);\n  var eSize = 7;\n  var x1 = map(mouseX, 0, width, 0, 10);\n  var y1 = 80;\n  var x2 = sq(x1);\n  var y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  var spacing = 15;\n  noStroke();\n  fill(0);\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sq(x) = ' + x2, 0, y2 + spacing);\n}\n
"
+                ],
+                "alt": "horizontal center line squared values displayed on top and regular on bottom.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/calculation.js",
+                "line": 747,
+                "description": "
Calculates the square root of a number. The square root of a number is\nalways positive, even though there may be a valid negative root. The\nsquare root s of number a is such that s*s = a. It is the opposite of\nsquaring. Maps to Math.sqrt().
\n",
+                "itemtype": "method",
+                "name": "sqrt",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
non-negative number to square root
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "square root of number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction draw() {\n  background(200);\n  var eSize = 7;\n  var x1 = mouseX;\n  var y1 = 80;\n  var x2 = sqrt(x1);\n  var y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  noStroke();\n  fill(0);\n  var spacing = 15;\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sqrt(x) = ' + x2, 0, y2 + spacing);\n}\n
"
+                ],
+                "alt": "horizontal center line squareroot values displayed on top and regular on bottom.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Calculation"
+            },
+            {
+                "file": "src/math/math.js",
+                "line": 12,
+                "description": "
Creates a new p5.Vector (the datatype for storing vectors). This provides a\ntwo or three dimensional vector, specifically a Euclidean (also known as\ngeometric) vector. A vector is an entity that has both magnitude and\ndirection.
\n",
+                "itemtype": "method",
+                "name": "createVector",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x component of the vector
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y component of the vector
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "z",
+                        "description": "
z component of the vector
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "p5.Vector"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n  fill(255, 102, 204);\n}\n\nfunction draw() {\n  background(255);\n  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));\n  scale(0.75);\n  sphere();\n}\n
"
+                ],
+                "alt": "a purple sphere lit by a point light oscillating horizontally",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/noise.js",
+                "line": 40,
+                "description": "
Returns the Perlin noise value at specified coordinates. Perlin noise is\na random sequence generator producing a more natural ordered, harmonic\nsuccession of numbers compared to the standard random() function.\nIt was invented by Ken Perlin in the 1980s and been used since in\ngraphical applications to produce procedural textures, natural motion,\nshapes, terrains etc.

 The main difference to the\nrandom() function is that Perlin noise is defined in an infinite\nn-dimensional space where each pair of coordinates corresponds to a\nfixed semi-random value (fixed only for the lifespan of the program; see\nthe noiseSeed() function). p5.js can compute 1D, 2D and 3D noise,\ndepending on the number of coordinates given. The resulting value will\nalways be between 0.0 and 1.0. The noise value can be animated by moving\nthrough the noise space as demonstrated in the example above. The 2nd\nand 3rd dimension can also be interpreted as time.

The actual\nnoise is structured similar to an audio signal, in respect to the\nfunction's use of frequencies. Similar to the concept of harmonics in\nphysics, perlin noise is computed over several octaves which are added\ntogether for the final result. 

Another way to adjust the\ncharacter of the resulting sequence is the scale of the input\ncoordinates. As the function works within an infinite space the value of\nthe coordinates doesn't matter as such, only the distance between\nsuccessive coordinates does (eg. when using noise() within a\nloop). As a general rule the smaller the difference between coordinates,\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\nwork best for most applications, but this will differ depending on use.
\n",
+                "itemtype": "method",
+                "name": "noise",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate in noise space
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate in noise space
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "z",
+                        "description": "
z-coordinate in noise space
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Perlin noise value (between 0 and 1) at specified\n                     coordinates",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar xoff = 0.0;\n\nfunction draw() {\n  background(204);\n  xoff = xoff + 0.01;\n  var n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n\n
\n
\nvar noiseScale=0.02;\n\nfunction draw() {\n  background(0);\n  for (var x=0; x < width; x++) {\n    var noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n    stroke(noiseVal*255);\n    line(x, mouseY+noiseVal*80, x, height);\n  }\n}\n\n
"
+                ],
+                "alt": "vertical line moves left to right with updating noise values.\nhorizontal wave pattern effected by mouse x-position & updating noise values.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Noise"
+            },
+            {
+                "file": "src/math/noise.js",
+                "line": 187,
+                "description": "
Adjusts the character and level of detail produced by the Perlin noise\n function. Similar to harmonics in physics, noise is computed over\n several octaves. Lower octaves contribute more to the output signal and\n as such define the overall intensity of the noise, whereas higher octaves\n create finer grained details in the noise sequence.\n 

\n By default, noise is computed over 4 octaves with each octave contributing\n exactly half than its predecessor, starting at 50% strength for the 1st\n octave. This falloff amount can be changed by adding an additional function\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\n 75% impact (25% less) of the previous lower octave. Any value between\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\n result in greater than 1.0 values returned by noise().\n 

\n By changing these parameters, the signal created by the noise()\n function can be adapted to fit very specific needs and characteristics.
\n",
+                "itemtype": "method",
+                "name": "noiseDetail",
+                "params": [
+                    {
+                        "name": "lod",
+                        "description": "
number of octaves to be used by the noise
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "falloff",
+                        "description": "
falloff factor for each octave
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n 
\n \n var noiseVal;\n var noiseScale = 0.02;\nfunction setup() {\n   createCanvas(100, 100);\n }\nfunction draw() {\n   background(0);\n   for (var y = 0; y < height; y++) {\n     for (var x = 0; x < width / 2; x++) {\n       noiseDetail(2, 0.2);\n       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\n       stroke(noiseVal * 255);\n       point(x, y);\n       noiseDetail(8, 0.65);\n       noiseVal = noise(\n         (mouseX + x + width / 2) * noiseScale,\n         (mouseY + y) * noiseScale\n       );\n       stroke(noiseVal * 255);\n       point(x + width / 2, y);\n     }\n   }\n }\n \n 
"
+                ],
+                "alt": "2 vertical grey smokey patterns affected my mouse x-position and noise.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Noise"
+            },
+            {
+                "file": "src/math/noise.js",
+                "line": 253,
+                "description": "
Sets the seed value for noise(). By default, noise()\nproduces different results each time the program is run. Set the\nvalue parameter to a constant to return the same pseudo-random\nnumbers each time the software is run.
\n",
+                "itemtype": "method",
+                "name": "noiseSeed",
+                "params": [
+                    {
+                        "name": "seed",
+                        "description": "
the seed value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar xoff = 0.0;\n\nfunction setup() {\n  noiseSeed(99);\n  stroke(0, 10);\n}\n\nfunction draw() {\n  xoff = xoff + .01;\n  var n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n\n
"
+                ],
+                "alt": "vertical grey lines drawing in pattern affected by noise.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Noise"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 69,
+                "description": "
The x component of the vector
\n",
+                "itemtype": "property",
+                "name": "x",
+                "type": "Number",
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 74,
+                "description": "
The y component of the vector
\n",
+                "itemtype": "property",
+                "name": "y",
+                "type": "Number",
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 79,
+                "description": "
The z component of the vector
\n",
+                "itemtype": "property",
+                "name": "z",
+                "type": "Number",
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 87,
+                "description": "
Returns a string representation of a vector v by calling String(v)\nor v.toString(). This method is useful for logging vectors in the\nconsole.
\n",
+                "itemtype": "method",
+                "name": "toString",
+                "return": {
+                    "description": "",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var v = createVector(20, 30);\n  print(String(v)); // prints \"p5.Vector Object : [20, 30, 0]\"\n}\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 107,
+                "description": "
Sets the x, y, and z component of the vector using two or three separate\nvariables, the data from a p5.Vector, or the values from a float array.
\n",
+                "itemtype": "method",
+                "name": "set",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var v = createVector(1, 2, 3);\n  v.set(4, 5, 6); // Sets vector to [4, 5, 6]\n\n  var v1 = createVector(0, 0, 0);\n  var arr = [1, 2, 3];\n  v1.set(arr); // Sets vector to [1, 2, 3]\n}\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 107,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
the x component of the vector
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "y",
+                                "description": "
the y component of the vector
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "z",
+                                "description": "
the z component of the vector
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 129,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
the vector to set
\n",
+                                "type": "p5.Vector|Number[]"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 153,
+                "description": "
Gets a copy of the vector, returns a p5.Vector object.
\n",
+                "itemtype": "method",
+                "name": "copy",
+                "return": {
+                    "description": "the copy of the p5.Vector object",
+                    "type": "p5.Vector"
+                },
+                "example": [
+                    "\n
\n\nvar v1 = createVector(1, 2, 3);\nvar v2 = v1.copy();\nprint(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\n// Prints \"true\"\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 176,
+                "description": "
Adds x, y, and z components to a vector, adds one vector to another, or\nadds two independent vectors together. The version of the method that adds\ntwo vectors together is a static method and returns a p5.Vector, the others\nacts directly on the vector. See the examples for more context.
\n",
+                "itemtype": "method",
+                "name": "add",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar v = createVector(1, 2, 3);\nv.add(4, 5, 6);\n// v's components are set to [5, 7, 9]\n\n
\n\n
\n\n// Static method\nvar v1 = createVector(1, 2, 3);\nvar v2 = createVector(2, 3, 4);\n\nvar v3 = p5.Vector.add(v1, v2);\n// v3 has components [3, 5, 7]\nprint(v3);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 176,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
the x component of the vector to be added
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
the y component of the vector to be added
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "z",
+                                "description": "
the z component of the vector to be added
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 208,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
the vector to add
\n",
+                                "type": "p5.Vector|Number[]"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 1035,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
a p5.Vector to add
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
a p5.Vector to add
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "target",
+                                "description": "
the vector to receive the result
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1
+                    },
+                    {
+                        "line": 1042,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1,
+                        "return": {
+                            "description": "the resulting p5.Vector",
+                            "type": "p5.Vector"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 232,
+                "description": "
Subtracts x, y, and z components from a vector, subtracts one vector from\nanother, or subtracts two independent vectors. The version of the method\nthat subtracts two vectors is a static method and returns a p5.Vector, the\nother acts directly on the vector. See the examples for more context.
\n",
+                "itemtype": "method",
+                "name": "sub",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar v = createVector(4, 5, 6);\nv.sub(1, 1, 1);\n// v's components are set to [3, 4, 5]\n\n
\n\n
\n\n// Static method\nvar v1 = createVector(2, 3, 4);\nvar v2 = createVector(1, 2, 3);\n\nvar v3 = p5.Vector.sub(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 232,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
the x component of the vector to subtract
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
the y component of the vector to subtract
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "z",
+                                "description": "
the z component of the vector to subtract
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 264,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
the vector to subtract
\n",
+                                "type": "p5.Vector|Number[]"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 1065,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
a p5.Vector to subtract from
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
a p5.Vector to subtract
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "target",
+                                "description": "
if undefined a new vector will be created
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1
+                    },
+                    {
+                        "line": 1072,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1,
+                        "return": {
+                            "description": "the resulting p5.Vector",
+                            "type": "p5.Vector"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 288,
+                "description": "
Multiply the vector by a scalar. The static version of this method\ncreates a new p5.Vector while the non static version acts on the vector\ndirectly. See the examples for more context.
\n",
+                "itemtype": "method",
+                "name": "mult",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar v = createVector(1, 2, 3);\nv.mult(2);\n// v's components are set to [2, 4, 6]\n\n
\n\n
\n\n// Static method\nvar v1 = createVector(1, 2, 3);\nvar v2 = p5.Vector.mult(v1, 2);\n// v2 has components [2, 4, 6]\nprint(v2);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 288,
+                        "params": [
+                            {
+                                "name": "n",
+                                "description": "
the number to multiply with the vector
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 1093,
+                        "params": [
+                            {
+                                "name": "v",
+                                "description": "
the vector to multiply
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "n",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "target",
+                                "description": "
if undefined a new vector will be created
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1
+                    },
+                    {
+                        "line": 1100,
+                        "params": [
+                            {
+                                "name": "v",
+                                "description": "",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "n",
+                                "description": "",
+                                "type": "Number"
+                            }
+                        ],
+                        "static": 1,
+                        "return": {
+                            "description": "the resulting new p5.Vector",
+                            "type": "p5.Vector"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 329,
+                "description": "
Divide the vector by a scalar. The static version of this method creates a\nnew p5.Vector while the non static version acts on the vector directly.\nSee the examples for more context.
\n",
+                "itemtype": "method",
+                "name": "div",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar v = createVector(6, 4, 2);\nv.div(2); //v's components are set to [3, 2, 1]\n\n
\n\n
\n\n// Static method\nvar v1 = createVector(6, 4, 2);\nvar v2 = p5.Vector.div(v1, 2);\n// v2 has components [3, 2, 1]\nprint(v2);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 329,
+                        "params": [
+                            {
+                                "name": "n",
+                                "description": "
the number to divide the vector by
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 1120,
+                        "params": [
+                            {
+                                "name": "v",
+                                "description": "
the vector to divide
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "n",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "target",
+                                "description": "
if undefined a new vector will be created
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1
+                    },
+                    {
+                        "line": 1127,
+                        "params": [
+                            {
+                                "name": "v",
+                                "description": "",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "n",
+                                "description": "",
+                                "type": "Number"
+                            }
+                        ],
+                        "static": 1,
+                        "return": {
+                            "description": "the resulting new p5.Vector",
+                            "type": "p5.Vector"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 373,
+                "description": "
Calculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation sqrt(xx + yy + z*z).)
\n",
+                "itemtype": "method",
+                "name": "mag",
+                "return": {
+                    "description": "magnitude of the vector",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar v = createVector(20.0, 30.0, 40.0);\nvar m = v.mag();\nprint(m); // Prints \"53.85164807134504\"\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 373,
+                        "params": [],
+                        "return": {
+                            "description": "magnitude of the vector",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 1217,
+                        "params": [
+                            {
+                                "name": "vecT",
+                                "description": "
the vector to return the magnitude of
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1,
+                        "return": {
+                            "description": "the magnitude of vecT",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 392,
+                "description": "
Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation (xx + yy + z*z).)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.
\n",
+                "itemtype": "method",
+                "name": "magSq",
+                "return": {
+                    "description": "squared magnitude of the vector",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\n// Static method\nvar v1 = createVector(6, 4, 2);\nprint(v1.magSq()); // Prints \"56\"\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 416,
+                "description": "
Calculates the dot product of two vectors. The version of the method\nthat computes the dot product of two independent vectors is a static\nmethod. See the examples for more context.
\n",
+                "itemtype": "method",
+                "name": "dot",
+                "return": {
+                    "description": "the dot product",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar v1 = createVector(1, 2, 3);\nvar v2 = createVector(2, 3, 4);\n\nprint(v1.dot(v2)); // Prints \"20\"\n\n
\n\n
\n\n//Static method\nvar v1 = createVector(1, 2, 3);\nvar v2 = createVector(3, 2, 1);\nprint(p5.Vector.dot(v1, v2)); // Prints \"10\"\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 416,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
x component of the vector
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
y component of the vector
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "z",
+                                "description": "
z component of the vector
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "the dot product",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 447,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
value component of the vector or a p5.Vector
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 1147,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
the first p5.Vector
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
the second p5.Vector
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1,
+                        "return": {
+                            "description": "the dot product",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 459,
+                "description": "
Calculates and returns a vector composed of the cross product between\ntwo vectors. Both the static and non static methods return a new p5.Vector.\nSee the examples for more context.
\n",
+                "itemtype": "method",
+                "name": "cross",
+                "return": {
+                    "description": "p5.Vector composed of cross product",
+                    "type": "p5.Vector"
+                },
+                "example": [
+                    "\n
\n\nvar v1 = createVector(1, 2, 3);\nvar v2 = createVector(1, 2, 3);\n\nv1.cross(v2); // v's components are [0, 0, 0]\n\n
\n\n
\n\n// Static method\nvar v1 = createVector(1, 0, 0);\nvar v2 = createVector(0, 1, 0);\n\nvar crossProduct = p5.Vector.cross(v1, v2);\n// crossProduct has components [0, 0, 1]\nprint(crossProduct);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 459,
+                        "params": [
+                            {
+                                "name": "v",
+                                "description": "
p5.Vector to be crossed
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "return": {
+                            "description": "p5.Vector composed of cross product",
+                            "type": "p5.Vector"
+                        }
+                    },
+                    {
+                        "line": 1161,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
the first p5.Vector
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
the second p5.Vector
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1,
+                        "return": {
+                            "description": "the cross product",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 500,
+                "description": "
Calculates the Euclidean distance between two points (considering a\npoint as a vector object).
\n",
+                "itemtype": "method",
+                "name": "dist",
+                "return": {
+                    "description": "the distance",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar v1 = createVector(1, 0, 0);\nvar v2 = createVector(0, 1, 0);\n\nvar distance = v1.dist(v2); // distance is 1.4142...\nprint(distance);\n\n
\n\n
\n\n// Static method\nvar v1 = createVector(1, 0, 0);\nvar v2 = createVector(0, 1, 0);\n\nvar distance = p5.Vector.dist(v1, v2);\n// distance is 1.4142...\nprint(distance);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 500,
+                        "params": [
+                            {
+                                "name": "v",
+                                "description": "
the x, y, and z coordinates of a p5.Vector
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "return": {
+                            "description": "the distance",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 1176,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
the first p5.Vector
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
the second p5.Vector
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1,
+                        "return": {
+                            "description": "the distance",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 537,
+                "description": "
Normalize the vector to length 1 (make it a unit vector).
\n",
+                "itemtype": "method",
+                "name": "normalize",
+                "return": {
+                    "description": "normalized p5.Vector",
+                    "type": "p5.Vector"
+                },
+                "example": [
+                    "\n
\n\nvar v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.normalize();\n// v's components are set to\n// [0.4454354, 0.8908708, 0.089087084]\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 557,
+                "description": "
Limit the magnitude of this vector to the value used for the max\nparameter.
\n",
+                "itemtype": "method",
+                "name": "limit",
+                "params": [
+                    {
+                        "name": "max",
+                        "description": "
the maximum magnitude for the vector
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.limit(5);\n// v's components are set to\n// [2.2271771, 4.4543543, 0.4454354]\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 584,
+                "description": "
Set the magnitude of this vector to the value used for the len\nparameter.
\n",
+                "itemtype": "method",
+                "name": "setMag",
+                "params": [
+                    {
+                        "name": "len",
+                        "description": "
the new length for this vector
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.setMag(10);\n// v's components are set to [6.0, 8.0, 0.0]\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 605,
+                "description": "
Calculate the angle of rotation for this vector (only 2D vectors)
\n",
+                "itemtype": "method",
+                "name": "heading",
+                "return": {
+                    "description": "the angle of rotation",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var v1 = createVector(30, 50);\n  print(v1.heading()); // 1.0303768265243125\n\n  v1 = createVector(40, 50);\n  print(v1.heading()); // 0.8960553845713439\n\n  v1 = createVector(30, 70);\n  print(v1.heading()); // 1.1659045405098132\n}\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 637,
+                "description": "
Rotate the vector by an angle (only 2D vectors), magnitude remains the\nsame
\n",
+                "itemtype": "method",
+                "name": "rotate",
+                "params": [
+                    {
+                        "name": "angle",
+                        "description": "
the angle of rotation
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nv.rotate(HALF_PI);\n// v's components are set to [-20.0, 9.999999, 0.0]\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 667,
+                "description": "
Calculates and returns the angle (in radians) between two vectors.
\n",
+                "itemtype": "method",
+                "name": "angleBetween",
+                "params": [
+                    {
+                        "name": "the",
+                        "description": "
x, y, and z components of a p5.Vector
\n",
+                        "type": "p5.Vector"
+                    }
+                ],
+                "return": {
+                    "description": "the angle between (in radians)",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar v1 = createVector(1, 0, 0);\nvar v2 = createVector(0, 1, 0);\n\nvar angle = v1.angleBetween(v2);\n// angle is PI/2\nprint(angle);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 700,
+                "description": "
Linear interpolate the vector to another vector
\n",
+                "itemtype": "method",
+                "name": "lerp",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar v = createVector(1, 1, 0);\n\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n\n
\n\n
\n\nvar v1 = createVector(0, 0, 0);\nvar v2 = createVector(100, 100, 0);\n\nvar v3 = p5.Vector.lerp(v1, v2, 0.5);\n// v3 has components [50,50,0]\nprint(v3);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 700,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
the x component
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
the y component
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z",
+                                "description": "
the z component
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "amt",
+                                "description": "
the amount of interpolation; some value between 0.0\n                        (old vector) and 1.0 (new vector). 0.9 is very near\n                        the new vector. 0.5 is halfway in between.
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 732,
+                        "params": [
+                            {
+                                "name": "v",
+                                "description": "
the p5.Vector to lerp to
\n",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "amt",
+                                "description": "",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 1191,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "amt",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "target",
+                                "description": "
if undefined a new vector will be created
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "static": 1
+                    },
+                    {
+                        "line": 1199,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "",
+                                "type": "p5.Vector"
+                            },
+                            {
+                                "name": "amt",
+                                "description": "",
+                                "type": "Number"
+                            }
+                        ],
+                        "static": 1,
+                        "return": {
+                            "description": "the lerped value",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 748,
+                "description": "
Return a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the p5.Vector.copy() method to copy into your own\narray.
\n",
+                "itemtype": "method",
+                "name": "array",
+                "return": {
+                    "description": "an Array with the 3 values",
+                    "type": "Number[]"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var v = createVector(20, 30);\n  print(v.array()); // Prints : Array [20, 30, 0]\n}\n\n
\n\n
\n\nvar v = createVector(10.0, 20.0, 30.0);\nvar f = v.array();\nprint(f[0]); // Prints \"10.0\"\nprint(f[1]); // Prints \"20.0\"\nprint(f[2]); // Prints \"30.0\"\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 780,
+                "description": "
Equality check against a p5.Vector
\n",
+                "itemtype": "method",
+                "name": "equals",
+                "return": {
+                    "description": "whether the vectors are equals",
+                    "type": "Boolean"
+                },
+                "example": [
+                    "\n
\n\nvar v1 = createVector(5, 10, 20);\nvar v2 = createVector(5, 10, 20);\nvar v3 = createVector(13, 10, 19);\n\nprint(v1.equals(v2.x, v2.y, v2.z)); // true\nprint(v1.equals(v3.x, v3.y, v3.z)); // false\n\n
\n\n
\n\nvar v1 = createVector(10.0, 20.0, 30.0);\nvar v2 = createVector(10.0, 20.0, 30.0);\nvar v3 = createVector(0.0, 0.0, 0.0);\nprint(v1.equals(v2)); // true\nprint(v1.equals(v3)); // false\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math",
+                "overloads": [
+                    {
+                        "line": 780,
+                        "params": [
+                            {
+                                "name": "x",
+                                "description": "
the x component of the vector
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "y",
+                                "description": "
the y component of the vector
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "z",
+                                "description": "
the z component of the vector
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "whether the vectors are equals",
+                            "type": "Boolean"
+                        }
+                    },
+                    {
+                        "line": 810,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
the vector to compare
\n",
+                                "type": "p5.Vector|Array"
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "Boolean"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 835,
+                "description": "
Make a new 2D vector from an angle
\n",
+                "itemtype": "method",
+                "name": "fromAngle",
+                "static": 1,
+                "params": [
+                    {
+                        "name": "angle",
+                        "description": "
the desired angle
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "length",
+                        "description": "
the length of the new vector (defaults to 1)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "the new p5.Vector object",
+                    "type": "p5.Vector"
+                },
+                "example": [
+                    "\n
\n\nfunction draw() {\n  background(200);\n\n  // Create a variable, proportional to the mouseX,\n  // varying from 0-360, to represent an angle in degrees.\n  angleMode(DEGREES);\n  var myDegrees = map(mouseX, 0, width, 0, 360);\n\n  // Display that variable in an onscreen text.\n  // (Note the nfc() function to truncate additional decimal places,\n  // and the \"\\xB0\" character for the degree symbol.)\n  var readout = 'angle = ' + nfc(myDegrees, 1) + '\\xB0';\n  noStroke();\n  fill(0);\n  text(readout, 5, 15);\n\n  // Create a p5.Vector using the fromAngle function,\n  // and extract its x and y components.\n  var v = p5.Vector.fromAngle(radians(myDegrees), 30);\n  var vx = v.x;\n  var vy = v.y;\n\n  push();\n  translate(width / 2, height / 2);\n  noFill();\n  stroke(150);\n  line(0, 0, 30, 0);\n  stroke(0);\n  line(0, 0, vx, vy);\n  pop();\n}\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 900,
+                "description": "
Make a new 3D vector from a pair of ISO spherical angles
\n",
+                "itemtype": "method",
+                "name": "fromAngles",
+                "static": 1,
+                "params": [
+                    {
+                        "name": "theta",
+                        "description": "
the polar angle (zero is up)
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "phi",
+                        "description": "
the azimuthal angle (zero is out of the screen)
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "length",
+                        "description": "
the length of the new vector (defaults to 1)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "the new p5.Vector object",
+                    "type": "p5.Vector"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  fill(255);\n  noStroke();\n}\nfunction draw() {\n  background(255);\n\n  var t = millis() / 1000;\n\n  // add three point lights\n  pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\n  pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\n  pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\n\n  sphere(35);\n}\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 963,
+                "description": "
Make a new 2D unit vector from a random angle
\n",
+                "itemtype": "method",
+                "name": "random2D",
+                "static": 1,
+                "return": {
+                    "description": "the new p5.Vector object",
+                    "type": "p5.Vector"
+                },
+                "example": [
+                    "\n
\n\nvar v = p5.Vector.random2D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.0] or\n// [-0.4695841, -0.14366731, 0.0] or\n// [0.6091097, -0.22805278, 0.0]\nprint(v);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 997,
+                "description": "
Make a new random 3D unit vector.
\n",
+                "itemtype": "method",
+                "name": "random3D",
+                "static": 1,
+                "return": {
+                    "description": "the new p5.Vector object",
+                    "type": "p5.Vector"
+                },
+                "example": [
+                    "\n
\n\nvar v = p5.Vector.random3D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.599168] or\n// [-0.4695841, -0.14366731, -0.8711202] or\n// [0.6091097, -0.22805278, -0.7595902]\nprint(v);\n\n
"
+                ],
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 1090,
+                "description": "
Multiplies a vector by a scalar and returns a new vector.
\n",
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 1117,
+                "description": "
Divides a vector by a scalar and returns a new vector.
\n",
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 1144,
+                "description": "
Calculates the dot product of two vectors.
\n",
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 1158,
+                "description": "
Calculates the cross product of two vectors.
\n",
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 1172,
+                "description": "
Calculates the Euclidean distance between two points (considering a\npoint as a vector object).
\n",
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/p5.Vector.js",
+                "line": 1187,
+                "description": "
Linear interpolate a vector to another vector and return the result as a\nnew vector.
\n",
+                "class": "p5.Vector",
+                "module": "Math",
+                "submodule": "Math"
+            },
+            {
+                "file": "src/math/random.js",
+                "line": 48,
+                "description": "
Sets the seed value for random().
\n
By default, random() produces different results each time the program\nis run. Set the seed parameter to a constant to return the same\npseudo-random numbers each time the software is run.
\n",
+                "itemtype": "method",
+                "name": "randomSeed",
+                "params": [
+                    {
+                        "name": "seed",
+                        "description": "
the seed value
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nrandomSeed(99);\nfor (var i = 0; i < 100; i++) {\n  var r = random(0, 255);\n  stroke(r);\n  line(i, 0, i, 100);\n}\n\n
"
+                ],
+                "alt": "many vertical lines drawn in white, black or grey.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Random"
+            },
+            {
+                "file": "src/math/random.js",
+                "line": 79,
+                "description": "
Return a random floating-point number.
\n
Takes either 0, 1 or 2 arguments.
\n
If no argument is given, returns a random number from 0\nup to (but not including) 1.
\n
If one argument is given and it is a number, returns a random number from 0\nup to (but not including) the number.
\n
If one argument is given and it is an array, returns a random element from\nthat array.
\n
If two arguments are given, returns a random number from the\nfirst argument up to (but not including) the second argument.
\n",
+                "itemtype": "method",
+                "name": "random",
+                "return": {
+                    "description": "the random number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nfor (var i = 0; i < 100; i++) {\n  var r = random(50);\n  stroke(r * 5);\n  line(50, i, 50 + r, i);\n}\n\n
\n
\n\nfor (var i = 0; i < 100; i++) {\n  var r = random(-50, 50);\n  line(50, i, 50 + r, i);\n}\n\n
\n
\n\n// Get a random element from an array using the random(Array) syntax\nvar words = ['apple', 'bear', 'cat', 'dog'];\nvar word = random(words); // select random word\ntext(word, 10, 50); // draw the word\n\n
"
+                ],
+                "alt": "100 horizontal lines from center canvas to right. size+fill change each time\n100 horizontal lines from center of canvas. height & side change each render\nword displayed at random. Either apple, bear, cat, or dog",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Random",
+                "overloads": [
+                    {
+                        "line": 79,
+                        "params": [
+                            {
+                                "name": "min",
+                                "description": "
the lower bound (inclusive)
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "max",
+                                "description": "
the upper bound (exclusive)
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "the random number",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 133,
+                        "params": [
+                            {
+                                "name": "choices",
+                                "description": "
the array to choose from
\n",
+                                "type": "Array"
+                            }
+                        ],
+                        "return": {
+                            "description": "the random element from the array",
+                            "type": "*"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/math/random.js",
+                "line": 166,
+                "description": "
Returns a random number fitting a Gaussian, or\n normal, distribution. There is theoretically no minimum or maximum\n value that randomGaussian() might return. Rather, there is\n just a very low probability that values far from the mean will be\n returned; and a higher probability that numbers near the mean will\n be returned.\n 

\n Takes either 0, 1 or 2 arguments.
\n If no args, returns a mean of 0 and standard deviation of 1.
\n If one arg, that arg is the mean (standard deviation is 1).
\n If two args, first is mean, second is standard deviation.
\n",
+                "itemtype": "method",
+                "name": "randomGaussian",
+                "params": [
+                    {
+                        "name": "mean",
+                        "description": "
the mean
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "sd",
+                        "description": "
the standard deviation
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the random number",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n 
\n \n for (var y = 0; y < 100; y++) {\n   var x = randomGaussian(50, 15);\n   line(50, y, x, y);\n }\n \n 
\n 
\n \n var distribution = new Array(360);\nfunction setup() {\n   createCanvas(100, 100);\n   for (var i = 0; i < distribution.length; i++) {\n     distribution[i] = floor(randomGaussian(0, 15));\n   }\n }\nfunction draw() {\n   background(204);\n  translate(width / 2, width / 2);\n  for (var i = 0; i < distribution.length; i++) {\n     rotate(TWO_PI / distribution.length);\n     stroke(0);\n     var dist = abs(distribution[i]);\n     line(0, 0, dist, 0);\n   }\n }\n \n 
"
+                ],
+                "alt": "100 horizontal lines from center of canvas. height & side change each render\n black lines radiate from center of canvas. size determined each render",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Random"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 18,
+                "description": "
The inverse of cos(), returns the arc cosine of a value. This function\nexpects the values in the range of -1 to 1 and values are returned in\nthe range 0 to PI (3.1415927).
\n",
+                "itemtype": "method",
+                "name": "acos",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
the value whose arc cosine is to be returned
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the arc cosine of the given value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar a = PI;\nvar c = cos(a);\nvar ac = acos(c);\n// Prints: \"3.1415927 : -1.0 : 3.1415927\"\nprint(a + ' : ' + c + ' : ' + ac);\n\n
\n\n
\n\nvar a = PI + PI / 4.0;\nvar c = cos(a);\nvar ac = acos(c);\n// Prints: \"3.926991 : -0.70710665 : 2.3561943\"\nprint(a + ' : ' + c + ' : ' + ac);\n\n
"
+                ],
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 56,
+                "description": "
The inverse of sin(), returns the arc sine of a value. This function\nexpects the values in the range of -1 to 1 and values are returned\nin the range -PI/2 to PI/2.
\n",
+                "itemtype": "method",
+                "name": "asin",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
the value whose arc sine is to be returned
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the arc sine of the given value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar a = PI + PI / 3;\nvar s = sin(a);\nvar as = asin(s);\n// Prints: \"1.0471976 : 0.86602545 : 1.0471976\"\nprint(a + ' : ' + s + ' : ' + as);\n\n
\n\n
\n\nvar a = PI + PI / 3.0;\nvar s = sin(a);\nvar as = asin(s);\n// Prints: \"4.1887903 : -0.86602545 : -1.0471976\"\nprint(a + ' : ' + s + ' : ' + as);\n\n
\n"
+                ],
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 95,
+                "description": "
The inverse of tan(), returns the arc tangent of a value. This function\nexpects the values in the range of -Infinity to Infinity (exclusive) and\nvalues are returned in the range -PI/2 to PI/2.
\n",
+                "itemtype": "method",
+                "name": "atan",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
the value whose arc tangent is to be returned
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the arc tangent of the given value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar a = PI + PI / 3;\nvar t = tan(a);\nvar at = atan(t);\n// Prints: \"1.0471976 : 1.7320509 : 1.0471976\"\nprint(a + ' : ' + t + ' : ' + at);\n\n
\n\n
\n\nvar a = PI + PI / 3.0;\nvar t = tan(a);\nvar at = atan(t);\n// Prints: \"4.1887903 : 1.7320513 : 1.0471977\"\nprint(a + ' : ' + t + ' : ' + at);\n\n
\n"
+                ],
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 134,
+                "description": "
Calculates the angle (in radians) from a specified point to the coordinate\norigin as measured from the positive x-axis. Values are returned as a\nfloat in the range from PI to -PI. The atan2() function is most often used\nfor orienting geometry to the position of the cursor.\n

\nNote: The y-coordinate of the point is the first parameter, and the\nx-coordinate is the second parameter, due the the structure of calculating\nthe tangent.
\n",
+                "itemtype": "method",
+                "name": "atan2",
+                "params": [
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of the point
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of the point
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the arc tangent of the given point",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nfunction draw() {\n  background(204);\n  translate(width / 2, height / 2);\n  var a = atan2(mouseY - height / 2, mouseX - width / 2);\n  rotate(a);\n  rect(-30, -5, 60, 10);\n}\n\n
"
+                ],
+                "alt": "60 by 10 rect at center of canvas rotates with mouse movements",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 174,
+                "description": "
Calculates the cosine of an angle. This function takes into account the\ncurrent angleMode. Values are returned in the range -1 to 1.
\n",
+                "itemtype": "method",
+                "name": "cos",
+                "params": [
+                    {
+                        "name": "angle",
+                        "description": "
the angle
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the cosine of the angle",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar a = 0.0;\nvar inc = TWO_PI / 25.0;\nfor (var i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\n  a = a + inc;\n}\n\n
"
+                ],
+                "alt": "vertical black lines form wave patterns, extend-down on left and right side",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 206,
+                "description": "
Calculates the sine of an angle. This function takes into account the\ncurrent angleMode. Values are returned in the range -1 to 1.
\n",
+                "itemtype": "method",
+                "name": "sin",
+                "params": [
+                    {
+                        "name": "angle",
+                        "description": "
the angle
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the sine of the angle",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar a = 0.0;\nvar inc = TWO_PI / 25.0;\nfor (var i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\n  a = a + inc;\n}\n\n
"
+                ],
+                "alt": "vertical black lines extend down and up from center to form wave pattern",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 238,
+                "description": "
Calculates the tangent of an angle. This function takes into account\nthe current angleMode. Values are returned in the range -1 to 1.
\n",
+                "itemtype": "method",
+                "name": "tan",
+                "params": [
+                    {
+                        "name": "angle",
+                        "description": "
the angle
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the tangent of the angle",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar a = 0.0;\nvar inc = TWO_PI / 50.0;\nfor (var i = 0; i < 100; i = i + 2) {\n  line(i, 50, i, 50 + tan(a) * 2.0);\n  a = a + inc;\n}\n"
+                ],
+                "alt": "vertical black lines end down and up from center to form spike pattern",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 270,
+                "description": "
Converts a radian measurement to its corresponding value in degrees.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964.
\n",
+                "itemtype": "method",
+                "name": "degrees",
+                "params": [
+                    {
+                        "name": "radians",
+                        "description": "
the radians value to convert to degrees
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the converted angle",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar rad = PI / 4;\nvar deg = degrees(rad);\nprint(rad + ' radians is ' + deg + ' degrees');\n// Prints: 0.7853981633974483 radians is 45 degrees\n\n
\n"
+                ],
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 296,
+                "description": "
Converts a degree measurement to its corresponding value in radians.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964.
\n",
+                "itemtype": "method",
+                "name": "radians",
+                "params": [
+                    {
+                        "name": "degrees",
+                        "description": "
the degree value to convert to radians
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "the converted angle",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar deg = 45.0;\nvar rad = radians(deg);\nprint(deg + ' degrees is ' + rad + ' radians');\n// Prints: 45 degrees is 0.7853981633974483 radians\n\n
"
+                ],
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/math/trigonometry.js",
+                "line": 320,
+                "description": "
Sets the current mode of p5 to given mode. Default mode is RADIANS.
\n",
+                "itemtype": "method",
+                "name": "angleMode",
+                "params": [
+                    {
+                        "name": "mode",
+                        "description": "
either RADIANS or DEGREES
\n",
+                        "type": "Constant"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction draw() {\n  background(204);\n  angleMode(DEGREES); // Change the mode to DEGREES\n  var a = atan2(mouseY - height / 2, mouseX - width / 2);\n  translate(width / 2, height / 2);\n  push();\n  rotate(a);\n  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n  pop();\n  angleMode(RADIANS); // Change the mode to RADIANS\n  rotate(a); // var a stays the same\n  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n}\n\n
"
+                ],
+                "alt": "40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.",
+                "class": "p5",
+                "module": "Math",
+                "submodule": "Trigonometry"
+            },
+            {
+                "file": "src/typography/attributes.js",
+                "line": 13,
+                "description": "
Sets the current alignment for drawing text. Accepts two\narguments: horizAlign (LEFT, CENTER, or RIGHT) and\nvertAlign (TOP, BOTTOM, CENTER, or BASELINE).
\n
The horizAlign parameter is in reference to the x value\nof the text() function, while the vertAlign parameter is\nin reference to the y value.
\n
So if you write textAlign(LEFT), you are aligning the left\nedge of your text to the x value you give in text(). If you\nwrite textAlign(RIGHT, TOP), you are aligning the right edge\nof your text to the x value and the top of edge of the text\nto the y value.
\n",
+                "itemtype": "method",
+                "name": "textAlign",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntextSize(16);\ntextAlign(RIGHT);\ntext('ABCD', 50, 30);\ntextAlign(CENTER);\ntext('EFGH', 50, 50);\ntextAlign(LEFT);\ntext('IJKL', 50, 70);\n\n
"
+                ],
+                "alt": "Letters ABCD displayed at top right, EFGH at center and IJKL at bottom left.",
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Attributes",
+                "overloads": [
+                    {
+                        "line": 13,
+                        "params": [
+                            {
+                                "name": "horizAlign",
+                                "description": "
horizontal alignment, either LEFT,\n                           CENTER, or RIGHT
\n",
+                                "type": "Constant"
+                            },
+                            {
+                                "name": "vertAlign",
+                                "description": "
vertical alignment, either TOP,\n                           BOTTOM, CENTER, or BASELINE
\n",
+                                "type": "Constant",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 51,
+                        "params": [],
+                        "return": {
+                            "description": "",
+                            "type": "Object"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/typography/attributes.js",
+                "line": 59,
+                "description": "
Sets/gets the spacing, in pixels, between lines of text. This\nsetting will be used in all subsequent calls to the text() function.
\n",
+                "itemtype": "method",
+                "name": "textLeading",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n// Text to display. The \"\\n\" is a \"new line\" character\nvar lines = 'L1\\nL2\\nL3';\ntextSize(12);\n\ntextLeading(10); // Set leading to 10\ntext(lines, 10, 25);\n\ntextLeading(20); // Set leading to 20\ntext(lines, 40, 25);\n\ntextLeading(30); // Set leading to 30\ntext(lines, 70, 25);\n\n
"
+                ],
+                "alt": "set L1 L2 & L3 displayed vertically 3 times. spacing increases for each set",
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Attributes",
+                "overloads": [
+                    {
+                        "line": 59,
+                        "params": [
+                            {
+                                "name": "leading",
+                                "description": "
the size in pixels for spacing between lines
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 88,
+                        "params": [],
+                        "return": {
+                            "description": "",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/typography/attributes.js",
+                "line": 96,
+                "description": "
Sets/gets the current font size. This size will be used in all subsequent\ncalls to the text() function. Font size is measured in pixels.
\n",
+                "itemtype": "method",
+                "name": "textSize",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntextSize(12);\ntext('Font Size 12', 10, 30);\ntextSize(14);\ntext('Font Size 14', 10, 60);\ntextSize(16);\ntext('Font Size 16', 10, 90);\n\n
"
+                ],
+                "alt": "Font Size 12 displayed small, Font Size 14 medium & Font Size 16 large",
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Attributes",
+                "overloads": [
+                    {
+                        "line": 96,
+                        "params": [
+                            {
+                                "name": "theSize",
+                                "description": "
the size of the letters in units of pixels
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 119,
+                        "params": [],
+                        "return": {
+                            "description": "",
+                            "type": "Number"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/typography/attributes.js",
+                "line": 127,
+                "description": "
Sets/gets the style of the text for system fonts to NORMAL, ITALIC, or BOLD.\nNote: this may be is overridden by CSS styling. For non-system fonts\n(opentype, truetype, etc.) please load styled fonts instead.
\n",
+                "itemtype": "method",
+                "name": "textStyle",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nstrokeWeight(0);\ntextSize(12);\ntextStyle(NORMAL);\ntext('Font Style Normal', 10, 30);\ntextStyle(ITALIC);\ntext('Font Style Italic', 10, 60);\ntextStyle(BOLD);\ntext('Font Style Bold', 10, 90);\n\n
"
+                ],
+                "alt": "words Font Style Normal displayed normally, Italic in italic and bold in bold",
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Attributes",
+                "overloads": [
+                    {
+                        "line": 127,
+                        "params": [
+                            {
+                                "name": "theStyle",
+                                "description": "
styling for text, either NORMAL,\n                           ITALIC, or BOLD
\n",
+                                "type": "Constant"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 153,
+                        "params": [],
+                        "return": {
+                            "description": "",
+                            "type": "String"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/typography/attributes.js",
+                "line": 161,
+                "description": "
Calculates and returns the width of any character or text string.
\n",
+                "itemtype": "method",
+                "name": "textWidth",
+                "params": [
+                    {
+                        "name": "theText",
+                        "description": "
the String of characters to measure
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\ntextSize(28);\n\nvar aChar = 'P';\nvar cWidth = textWidth(aChar);\ntext(aChar, 0, 40);\nline(cWidth, 0, cWidth, 50);\n\nvar aString = 'p5.js';\nvar sWidth = textWidth(aString);\ntext(aString, 0, 85);\nline(sWidth, 50, sWidth, 100);\n\n
"
+                ],
+                "alt": "Letter P and p5.js are displayed with vertical lines at end. P is wide",
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/typography/attributes.js",
+                "line": 195,
+                "description": "
Returns the ascent of the current font at its current size. The ascent\nrepresents the distance, in pixels, of the tallest character above\nthe baseline.
\n",
+                "itemtype": "method",
+                "name": "textAscent",
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar base = height * 0.75;\nvar scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nvar asc = textAscent() * scalar; // Calc ascent\nline(0, base - asc, width, base - asc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\nasc = textAscent() * scalar; // Recalc ascent\nline(40, base - asc, width, base - asc);\ntext('dp', 40, base); // Draw text on baseline\n\n
"
+                ],
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/typography/attributes.js",
+                "line": 223,
+                "description": "
Returns the descent of the current font at its current size. The descent\nrepresents the distance, in pixels, of the character with the longest\ndescender below the baseline.
\n",
+                "itemtype": "method",
+                "name": "textDescent",
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar base = height * 0.75;\nvar scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nvar desc = textDescent() * scalar; // Calc ascent\nline(0, base + desc, width, base + desc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\ndesc = textDescent() * scalar; // Recalc ascent\nline(40, base + desc, width, base + desc);\ntext('dp', 40, base); // Draw text on baseline\n\n
"
+                ],
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/typography/attributes.js",
+                "line": 251,
+                "description": "
Helper function to measure ascent and descent.
\n",
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Attributes"
+            },
+            {
+                "file": "src/typography/loading_displaying.js",
+                "line": 16,
+                "description": "
Loads an opentype font file (.otf, .ttf) from a file or a URL,\nand returns a PFont Object. This method is asynchronous,\nmeaning it may not finish before the next line in your sketch\nis executed.\n

\nThe path to the font should be relative to the HTML file\nthat links in your sketch. Loading an from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.
\n",
+                "itemtype": "method",
+                "name": "loadFont",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
name of the file or url to load
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to be executed after\n                                   loadFont() completes
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "onError",
+                        "description": "
function to be executed if\n                                   an error occurs
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "p5.Font object",
+                    "type": "p5.Font"
+                },
+                "example": [
+                    "\n\n
Calling loadFont() inside preload() guarantees that the load\noperation will have completed before setup() and draw() are called.
\n\n
\nvar myFont;\nfunction preload() {\n  myFont = loadFont('assets/AvenirNextLTPro-Demi.otf');\n}\n\nfunction setup() {\n  fill('#ED225D');\n  textFont(myFont);\n  textSize(36);\n  text('p5*js', 10, 50);\n}\n
\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n
\nfunction setup() {\n  loadFont('assets/AvenirNextLTPro-Demi.otf', drawText);\n}\n\nfunction drawText(font) {\n  fill('#ED225D');\n  textFont(font, 36);\n  text('p5*js', 10, 50);\n}\n
\n\n
You can also use the string name of the font to style other HTML\nelements.
\n\n
\nfunction preload() {\n  loadFont('assets/Avenir.otf');\n}\n\nfunction setup() {\n  var myDiv = createDiv('hello there');\n  myDiv.style('font-family', 'Avenir');\n}\n
"
+                ],
+                "alt": "p5*js in p5's theme dark pink\np5*js in p5's theme dark pink",
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Loading & Displaying"
+            },
+            {
+                "file": "src/typography/loading_displaying.js",
+                "line": 142,
+                "description": "
Draws text to the screen. Displays the information specified in the first\nparameter on the screen in the position specified by the additional\nparameters. A default font will be used unless a font is set with the\ntextFont() function and a default size will be used unless a font is set\nwith textSize(). Change the color of the text with the fill() function.\nChange the outline of the text with the stroke() and strokeWeight()\nfunctions.\n

\nThe text displays in relation to the textAlign() function, which gives the\noption to draw to the left, right, and center of the coordinates.\n

\nThe x2 and y2 parameters define a rectangular area to display within and\nmay only be used with string data. When these parameters are specified,\nthey are interpreted based on the current rectMode() setting. Text that\ndoes not fit completely within the rectangle specified will not be drawn\nto the screen.
\n",
+                "itemtype": "method",
+                "name": "text",
+                "params": [
+                    {
+                        "name": "str",
+                        "description": "
the alphanumeric symbols to be displayed
\n",
+                        "type": "String|Object|Array"
+                    },
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of text
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of text
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "x2",
+                        "description": "
by default, the width of the text box,\n                    see rectMode() for more info
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y2",
+                        "description": "
by default, the height of the text box,\n                    see rectMode() for more info
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\ntextSize(32);\ntext('word', 10, 30);\nfill(0, 102, 153);\ntext('word', 10, 60);\nfill(0, 102, 153, 51);\ntext('word', 10, 90);\n\n
\n
\n\nvar s = 'The quick brown fox jumped over the lazy dog.';\nfill(50);\ntext(s, 10, 10, 70, 80); // Text wraps within text box\n\n
"
+                ],
+                "alt": "'word' displayed 3 times going from black, blue to translucent blue\nThe quick brown fox jumped over the lazy dog.",
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Loading & Displaying"
+            },
+            {
+                "file": "src/typography/loading_displaying.js",
+                "line": 199,
+                "description": "
Sets the current font that will be drawn with the text() function.
\n",
+                "itemtype": "method",
+                "name": "textFont",
+                "return": {
+                    "description": "the current font",
+                    "type": "Object"
+                },
+                "example": [
+                    "\n
\n\nfill(0);\ntextSize(12);\ntextFont('Georgia');\ntext('Georgia', 12, 30);\ntextFont('Helvetica');\ntext('Helvetica', 12, 60);\n\n
\n
\n\nvar fontRegular, fontItalic, fontBold;\nfunction preload() {\n  fontRegular = loadFont('assets/Regular.otf');\n  fontItalic = loadFont('assets/Italic.ttf');\n  fontBold = loadFont('assets/Bold.ttf');\n}\nfunction setup() {\n  background(210);\n  fill(0)\n   .strokeWeight(0)\n   .textSize(10);\n  textFont(fontRegular);\n  text('Font Style Normal', 10, 30);\n  textFont(fontItalic);\n  text('Font Style Italic', 10, 50);\n  textFont(fontBold);\n  text('Font Style Bold', 10, 70);\n}\n\n
"
+                ],
+                "alt": "words Font Style Normal displayed normally, Italic in italic and bold in bold",
+                "class": "p5",
+                "module": "Typography",
+                "submodule": "Loading & Displaying",
+                "overloads": [
+                    {
+                        "line": 199,
+                        "params": [],
+                        "return": {
+                            "description": "the current font",
+                            "type": "Object"
+                        }
+                    },
+                    {
+                        "line": 242,
+                        "params": [
+                            {
+                                "name": "font",
+                                "description": "
a font loaded via loadFont(), or a String\nrepresenting a web safe font (a font\nthat is generally available across all systems)
\n",
+                                "type": "Object|String"
+                            },
+                            {
+                                "name": "size",
+                                "description": "
the font size to use
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/typography/p5.Font.js",
+                "line": 32,
+                "description": "
Underlying opentype font implementation
\n",
+                "itemtype": "property",
+                "name": "font",
+                "class": "p5.Font",
+                "module": "Typography",
+                "submodule": "Font"
+            },
+            {
+                "file": "src/typography/p5.Font.js",
+                "line": 45,
+                "description": "
Returns a tight bounding box for the given text string using this\nfont (currently only supports single lines)
\n",
+                "itemtype": "method",
+                "name": "textBounds",
+                "params": [
+                    {
+                        "name": "line",
+                        "description": "
a line of text
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "x",
+                        "description": "
x-position
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-position
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "fontSize",
+                        "description": "
font size to use (optional)
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "options",
+                        "description": "
opentype options (optional)
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "a rectangle object with properties: x, y, w, h",
+                    "type": "Object"
+                },
+                "example": [
+                    "\n
\n\nvar font;\nvar textString = 'Lorem ipsum dolor sit amet.';\nfunction preload() {\n  font = loadFont('./assets/Regular.otf');\n}\nfunction setup() {\n  background(210);\n\n  var bbox = font.textBounds(textString, 10, 30, 12);\n  fill(255);\n  stroke(0);\n  rect(bbox.x, bbox.y, bbox.w, bbox.h);\n  fill(0);\n  noStroke();\n\n  textFont(font);\n  textSize(12);\n  text(textString, 10, 30);\n}\n\n
"
+                ],
+                "alt": "words Lorem ipsum dol go off canvas and contained by white bounding box",
+                "class": "p5.Font",
+                "module": "Typography",
+                "submodule": "Font"
+            },
+            {
+                "file": "src/typography/p5.Font.js",
+                "line": 160,
+                "description": "
Computes an array of points following the path for specified text
\n",
+                "itemtype": "method",
+                "name": "textToPoints",
+                "params": [
+                    {
+                        "name": "txt",
+                        "description": "
a line of text
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "x",
+                        "description": "
x-position
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-position
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "fontSize",
+                        "description": "
font size to use (optional)
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "options",
+                        "description": "
an (optional) object that can contain:
\n

sampleFactor - the ratio of path-length to number of samples\n(default=.25); higher values yield more points and are therefore\nmore precise
\n

simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "an array of points, each with x, y, alpha (the path angle)",
+                    "type": "Array"
+                },
+                "example": [
+                    "\n
\n\nvar font;\nfunction preload() {\n  font = loadFont('./assets/Avenir.otf');\n}\n\nvar points;\nvar bounds;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(0);\n  fill(255, 104, 204);\n\n  points = font.textToPoints('p5', 0, 0, 10, {\n    sampleFactor: 5,\n    simplifyThreshold: 0\n  });\n  bounds = font.textBounds(' p5 ', 0, 0, 10);\n}\n\nfunction draw() {\n  background(255);\n  beginShape();\n  translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\n  for (var i = 0; i < points.length; i++) {\n    var p = points[i];\n    vertex(\n      p.x * width / bounds.w +\n        sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\n      p.y * height / bounds.h\n    );\n  }\n  endShape(CLOSE);\n}\n\n
\n"
+                ],
+                "class": "p5.Font",
+                "module": "Typography",
+                "submodule": "Font"
+            },
+            {
+                "file": "src/utilities/array_functions.js",
+                "line": 12,
+                "description": "
Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().
\n",
+                "itemtype": "method",
+                "name": "append",
+                "params": [
+                    {
+                        "name": "array",
+                        "description": "
Array to append
\n",
+                        "type": "Array"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
to be added to the Array
\n",
+                        "type": "Any"
+                    }
+                ],
+                "example": [
+                    "\n
\nfunction setup() {\n  var myArray = ['Mango', 'Apple', 'Papaya'];\n  print(myArray); // ['Mango', 'Apple', 'Papaya']\n\n  append(myArray, 'Peach');\n  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Array Functions"
+            },
+            {
+                "file": "src/utilities/array_functions.js",
+                "line": 35,
+                "description": "
Copies an array (or part of an array) to another array. The src array is\ncopied to the dst array, beginning at the position specified by\nsrcPosition and into the position specified by dstPosition. The number of\nelements to copy is determined by length. Note that copying values\noverwrites existing values in the destination array. To append values\ninstead of overwriting them, use concat().\n

\nThe simplified version with only two arguments, arrayCopy(src, dst),\ncopies an entire array to another of the same size. It is equivalent to\narrayCopy(src, 0, dst, 0, src.length).\n

\nUsing this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.
\n",
+                "itemtype": "method",
+                "name": "arrayCopy",
+                "example": [
+                    "\n
\nvar src = ['A', 'B', 'C'];\nvar dst = [1, 2, 3];\nvar srcPosition = 1;\nvar dstPosition = 0;\nvar length = 2;\n\nprint(src); // ['A', 'B', 'C']\nprint(dst); // [ 1 ,  2 ,  3 ]\n\narrayCopy(src, srcPosition, dst, dstPosition, length);\nprint(dst); // ['B', 'C', 3]\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Array Functions",
+                "overloads": [
+                    {
+                        "line": 35,
+                        "params": [
+                            {
+                                "name": "src",
+                                "description": "
the source Array
\n",
+                                "type": "Array"
+                            },
+                            {
+                                "name": "srcPosition",
+                                "description": "
starting position in the source Array
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "dst",
+                                "description": "
the destination Array
\n",
+                                "type": "Array"
+                            },
+                            {
+                                "name": "dstPosition",
+                                "description": "
starting position in the destination Array
\n",
+                                "type": "Integer"
+                            },
+                            {
+                                "name": "length",
+                                "description": "
number of Array elements to be copied
\n",
+                                "type": "Integer"
+                            }
+                        ]
+                    },
+                    {
+                        "line": 72,
+                        "params": [
+                            {
+                                "name": "src",
+                                "description": "",
+                                "type": "Array"
+                            },
+                            {
+                                "name": "dst",
+                                "description": "",
+                                "type": "Array"
+                            },
+                            {
+                                "name": "length",
+                                "description": "",
+                                "type": "Integer",
+                                "optional": true
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/array_functions.js",
+                "line": 110,
+                "description": "
Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.
\n",
+                "itemtype": "method",
+                "name": "concat",
+                "params": [
+                    {
+                        "name": "a",
+                        "description": "
first Array to concatenate
\n",
+                        "type": "Array"
+                    },
+                    {
+                        "name": "b",
+                        "description": "
second Array to concatenate
\n",
+                        "type": "Array"
+                    }
+                ],
+                "return": {
+                    "description": "concatenated array",
+                    "type": "Array"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var arr1 = ['A', 'B', 'C'];\n  var arr2 = [1, 2, 3];\n\n  print(arr1); // ['A','B','C']\n  print(arr2); // [1,2,3]\n\n  var arr3 = concat(arr1, arr2);\n\n  print(arr1); // ['A','B','C']\n  print(arr2); // [1, 2, 3]\n  print(arr3); // ['A','B','C', 1, 2, 3]\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Array Functions"
+            },
+            {
+                "file": "src/utilities/array_functions.js",
+                "line": 140,
+                "description": "
Reverses the order of an array, maps to Array.reverse()
\n",
+                "itemtype": "method",
+                "name": "reverse",
+                "params": [
+                    {
+                        "name": "list",
+                        "description": "
Array to reverse
\n",
+                        "type": "Array"
+                    }
+                ],
+                "example": [
+                    "\n
\nfunction setup() {\n  var myArray = ['A', 'B', 'C'];\n  print(myArray); // ['A','B','C']\n\n  reverse(myArray);\n  print(myArray); // ['C','B','A']\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Array Functions"
+            },
+            {
+                "file": "src/utilities/array_functions.js",
+                "line": 160,
+                "description": "
Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().
\n",
+                "itemtype": "method",
+                "name": "shorten",
+                "params": [
+                    {
+                        "name": "list",
+                        "description": "
Array to shorten
\n",
+                        "type": "Array"
+                    }
+                ],
+                "return": {
+                    "description": "shortened Array",
+                    "type": "Array"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var myArray = ['A', 'B', 'C'];\n  print(myArray); // ['A', 'B', 'C']\n  var newArray = shorten(myArray);\n  print(myArray); // ['A','B','C']\n  print(newArray); // ['A','B']\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Array Functions"
+            },
+            {
+                "file": "src/utilities/array_functions.js",
+                "line": 183,
+                "description": "
Randomizes the order of the elements of an array. Implements\n\nFisher-Yates Shuffle Algorithm.
\n",
+                "itemtype": "method",
+                "name": "shuffle",
+                "params": [
+                    {
+                        "name": "array",
+                        "description": "
Array to shuffle
\n",
+                        "type": "Array"
+                    },
+                    {
+                        "name": "bool",
+                        "description": "
modify passed array
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "shuffled Array",
+                    "type": "Array"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];\n  print(regularArr);\n  shuffle(regularArr, true); // force modifications to passed array\n  print(regularArr);\n\n  // By default shuffle() returns a shuffled cloned array:\n  var newArr = shuffle(regularArr);\n  print(regularArr);\n  print(newArr);\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Array Functions"
+            },
+            {
+                "file": "src/utilities/array_functions.js",
+                "line": 225,
+                "description": "
Sorts an array of numbers from smallest to largest, or puts an array of\nwords in alphabetical order. The original array is not modified; a\nre-ordered array is returned. The count parameter states the number of\nelements to sort. For example, if there are 12 elements in an array and\ncount is set to 5, only the first 5 elements in the array will be sorted.
\n",
+                "itemtype": "method",
+                "name": "sort",
+                "params": [
+                    {
+                        "name": "list",
+                        "description": "
Array to sort
\n",
+                        "type": "Array"
+                    },
+                    {
+                        "name": "count",
+                        "description": "
number of elements to sort, starting from 0
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nfunction setup() {\n  var words = ['banana', 'apple', 'pear', 'lime'];\n  print(words); // ['banana', 'apple', 'pear', 'lime']\n  var count = 4; // length of array\n\n  words = sort(words, count);\n  print(words); // ['apple', 'banana', 'lime', 'pear']\n}\n
\n
\nfunction setup() {\n  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];\n  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]\n  var count = 5; // Less than the length of the array\n\n  numbers = sort(numbers, count);\n  print(numbers); // [1,2,5,6,14,9,8,12]\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Array Functions"
+            },
+            {
+                "file": "src/utilities/array_functions.js",
+                "line": 271,
+                "description": "
Inserts a value or an array of values into an existing array. The first\nparameter specifies the initial array to be modified, and the second\nparameter defines the data to be inserted. The third parameter is an index\nvalue which specifies the array position from which to insert data.\n(Remember that array index numbering starts at zero, so the first position\nis 0, the second position is 1, and so on.)
\n",
+                "itemtype": "method",
+                "name": "splice",
+                "params": [
+                    {
+                        "name": "list",
+                        "description": "
Array to splice into
\n",
+                        "type": "Array"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
value to be spliced in
\n",
+                        "type": "Any"
+                    },
+                    {
+                        "name": "position",
+                        "description": "
in the array from which to insert data
\n",
+                        "type": "Integer"
+                    }
+                ],
+                "example": [
+                    "\n
\nfunction setup() {\n  var myArray = [0, 1, 2, 3, 4];\n  var insArray = ['A', 'B', 'C'];\n  print(myArray); // [0, 1, 2, 3, 4]\n  print(insArray); // ['A','B','C']\n\n  splice(myArray, insArray, 3);\n  print(myArray); // [0,1,2,'A','B','C',3,4]\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Array Functions"
+            },
+            {
+                "file": "src/utilities/array_functions.js",
+                "line": 304,
+                "description": "
Extracts an array of elements from an existing array. The list parameter\ndefines the array from which the elements will be copied, and the start\nand count parameters specify which elements to extract. If no count is\ngiven, elements will be extracted from the start to the end of the array.\nWhen specifying the start, remember that the first array element is 0.\nThis function does not change the source array.
\n",
+                "itemtype": "method",
+                "name": "subset",
+                "params": [
+                    {
+                        "name": "list",
+                        "description": "
Array to extract from
\n",
+                        "type": "Array"
+                    },
+                    {
+                        "name": "start",
+                        "description": "
position to begin
\n",
+                        "type": "Integer"
+                    },
+                    {
+                        "name": "count",
+                        "description": "
number of values to extract
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Array of extracted elements",
+                    "type": "Array"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var myArray = [1, 2, 3, 4, 5];\n  print(myArray); // [1, 2, 3, 4, 5]\n\n  var sub1 = subset(myArray, 0, 3);\n  var sub2 = subset(myArray, 2, 2);\n  print(sub1); // [1,2,3]\n  print(sub2); // [3,4]\n}\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Array Functions"
+            },
+            {
+                "file": "src/utilities/conversion.js",
+                "line": 12,
+                "description": "
Converts a string to its floating point representation. The contents of a\nstring must resemble a number, or NaN (not a number) will be returned.\nFor example, float("1234.56") evaluates to 1234.56, but float("giraffe")\nwill return NaN.
\n
When an array of values is passed in, then an array of floats of the same\nlength is returned.
\n",
+                "itemtype": "method",
+                "name": "float",
+                "params": [
+                    {
+                        "name": "str",
+                        "description": "
float string to parse
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "floating point representation of string",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nvar str = '20';\nvar diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\n
"
+                ],
+                "alt": "20 by 20 white ellipse in the center of the canvas",
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Conversion"
+            },
+            {
+                "file": "src/utilities/conversion.js",
+                "line": 42,
+                "description": "
Converts a boolean, string, or float to its integer representation.\nWhen an array of values is passed in, then an int array of the same length\nis returned.
\n",
+                "itemtype": "method",
+                "name": "int",
+                "return": {
+                    "description": "integer representation of value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nprint(int('10')); // 10\nprint(int(10.31)); // 10\nprint(int(-10)); // -10\nprint(int(true)); // 1\nprint(int(false)); // 0\nprint(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Conversion",
+                "overloads": [
+                    {
+                        "line": 42,
+                        "params": [
+                            {
+                                "name": "n",
+                                "description": "
value to parse
\n",
+                                "type": "String|Boolean|Number"
+                            }
+                        ],
+                        "return": {
+                            "description": "integer representation of value",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 61,
+                        "params": [
+                            {
+                                "name": "ns",
+                                "description": "
values to parse
\n",
+                                "type": "Array"
+                            }
+                        ],
+                        "return": {
+                            "description": "integer representation of values",
+                            "type": "Number[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/conversion.js",
+                "line": 81,
+                "description": "
Converts a boolean, string or number to its string representation.\nWhen an array of values is passed in, then an array of strings of the same\nlength is returned.
\n",
+                "itemtype": "method",
+                "name": "str",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
value to parse
\n",
+                        "type": "String|Boolean|Number|Array"
+                    }
+                ],
+                "return": {
+                    "description": "string representation of value",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\nprint(str('10')); // \"10\"\nprint(str(10.31)); // \"10.31\"\nprint(str(-10)); // \"-10\"\nprint(str(true)); // \"true\"\nprint(str(false)); // \"false\"\nprint(str([true, '10.3', 9.8])); // [ \"true\", \"10.3\", \"9.8\" ]\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Conversion"
+            },
+            {
+                "file": "src/utilities/conversion.js",
+                "line": 107,
+                "description": "
Converts a number or string to its boolean representation.\nFor a number, any non-zero value (positive or negative) evaluates to true,\nwhile zero evaluates to false. For a string, the value "true" evaluates to\ntrue, while any other value evaluates to false. When an array of number or\nstring values is passed in, then a array of booleans of the same length is\nreturned.
\n",
+                "itemtype": "method",
+                "name": "boolean",
+                "params": [
+                    {
+                        "name": "n",
+                        "description": "
value to parse
\n",
+                        "type": "String|Boolean|Number|Array"
+                    }
+                ],
+                "return": {
+                    "description": "boolean representation of value",
+                    "type": "Boolean"
+                },
+                "example": [
+                    "\n
\nprint(boolean(0)); // false\nprint(boolean(1)); // true\nprint(boolean('true')); // true\nprint(boolean('abcd')); // false\nprint(boolean([0, 12, 'true'])); // [false, true, false]\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Conversion"
+            },
+            {
+                "file": "src/utilities/conversion.js",
+                "line": 139,
+                "description": "
Converts a number, string representation of a number, or boolean to its byte\nrepresentation. A byte can be only a whole number between -128 and 127, so\nwhen a value outside of this range is converted, it wraps around to the\ncorresponding byte representation. When an array of number, string or boolean\nvalues is passed in, then an array of bytes the same length is returned.
\n",
+                "itemtype": "method",
+                "name": "byte",
+                "return": {
+                    "description": "byte representation of value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nprint(byte(127)); // 127\nprint(byte(128)); // -128\nprint(byte(23.4)); // 23\nprint(byte('23.4')); // 23\nprint(byte('hello')); // NaN\nprint(byte(true)); // 1\nprint(byte([0, 255, '100'])); // [0, -1, 100]\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Conversion",
+                "overloads": [
+                    {
+                        "line": 139,
+                        "params": [
+                            {
+                                "name": "n",
+                                "description": "
value to parse
\n",
+                                "type": "String|Boolean|Number"
+                            }
+                        ],
+                        "return": {
+                            "description": "byte representation of value",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 161,
+                        "params": [
+                            {
+                                "name": "ns",
+                                "description": "
values to parse
\n",
+                                "type": "Array"
+                            }
+                        ],
+                        "return": {
+                            "description": "array of byte representation of values",
+                            "type": "Number[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/conversion.js",
+                "line": 175,
+                "description": "
Converts a number or string to its corresponding single-character\nstring representation. If a string parameter is provided, it is first\nparsed as an integer and then translated into a single-character string.\nWhen an array of number or string values is passed in, then an array of\nsingle-character strings of the same length is returned.
\n",
+                "itemtype": "method",
+                "name": "char",
+                "return": {
+                    "description": "string representation of value",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\nprint(char(65)); // \"A\"\nprint(char('65')); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Conversion",
+                "overloads": [
+                    {
+                        "line": 175,
+                        "params": [
+                            {
+                                "name": "n",
+                                "description": "
value to parse
\n",
+                                "type": "String|Number"
+                            }
+                        ],
+                        "return": {
+                            "description": "string representation of value",
+                            "type": "String"
+                        }
+                    },
+                    {
+                        "line": 194,
+                        "params": [
+                            {
+                                "name": "ns",
+                                "description": "
values to parse
\n",
+                                "type": "Array"
+                            }
+                        ],
+                        "return": {
+                            "description": "array of string representation of values",
+                            "type": "String[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/conversion.js",
+                "line": 209,
+                "description": "
Converts a single-character string to its corresponding integer\nrepresentation. When an array of single-character string values is passed\nin, then an array of integers of the same length is returned.
\n",
+                "itemtype": "method",
+                "name": "unchar",
+                "return": {
+                    "description": "integer representation of value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Conversion",
+                "overloads": [
+                    {
+                        "line": 209,
+                        "params": [
+                            {
+                                "name": "n",
+                                "description": "
value to parse
\n",
+                                "type": "String"
+                            }
+                        ],
+                        "return": {
+                            "description": "integer representation of value",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 225,
+                        "params": [
+                            {
+                                "name": "ns",
+                                "description": "
values to parse
\n",
+                                "type": "Array"
+                            }
+                        ],
+                        "return": {
+                            "description": "integer representation of values",
+                            "type": "Number[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/conversion.js",
+                "line": 238,
+                "description": "
Converts a number to a string in its equivalent hexadecimal notation. If a\nsecond parameter is passed, it is used to set the number of characters to\ngenerate in the hexadecimal notation. When an array is passed in, an\narray of strings in hexadecimal notation of the same length is returned.
\n",
+                "itemtype": "method",
+                "name": "hex",
+                "return": {
+                    "description": "hexadecimal string representation of value",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\nprint(hex(255)); // \"000000FF\"\nprint(hex(255, 6)); // \"0000FF\"\nprint(hex([0, 127, 255], 6)); // [ \"000000\", \"00007F\", \"0000FF\" ]\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Conversion",
+                "overloads": [
+                    {
+                        "line": 238,
+                        "params": [
+                            {
+                                "name": "n",
+                                "description": "
value to parse
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "digits",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "hexadecimal string representation of value",
+                            "type": "String"
+                        }
+                    },
+                    {
+                        "line": 256,
+                        "params": [
+                            {
+                                "name": "ns",
+                                "description": "
array of values to parse
\n",
+                                "type": "Number[]"
+                            },
+                            {
+                                "name": "digits",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "hexadecimal string representation of values",
+                            "type": "String[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/conversion.js",
+                "line": 285,
+                "description": "
Converts a string representation of a hexadecimal number to its equivalent\ninteger value. When an array of strings in hexadecimal notation is passed\nin, an array of integers of the same length is returned.
\n",
+                "itemtype": "method",
+                "name": "unhex",
+                "return": {
+                    "description": "integer representation of hexadecimal value",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "Conversion",
+                "overloads": [
+                    {
+                        "line": 285,
+                        "params": [
+                            {
+                                "name": "n",
+                                "description": "
value to parse
\n",
+                                "type": "String"
+                            }
+                        ],
+                        "return": {
+                            "description": "integer representation of hexadecimal value",
+                            "type": "Number"
+                        }
+                    },
+                    {
+                        "line": 301,
+                        "params": [
+                            {
+                                "name": "ns",
+                                "description": "
values to parse
\n",
+                                "type": "Array"
+                            }
+                        ],
+                        "return": {
+                            "description": "integer representations of hexadecimal value",
+                            "type": "Number[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 15,
+                "description": "
Combines an array of Strings into one String, each separated by the\ncharacter(s) used for the separator parameter. To join arrays of ints or\nfloats, it's necessary to first convert them to Strings using nf() or\nnfs().
\n",
+                "itemtype": "method",
+                "name": "join",
+                "params": [
+                    {
+                        "name": "list",
+                        "description": "
array of Strings to be joined
\n",
+                        "type": "Array"
+                    },
+                    {
+                        "name": "separator",
+                        "description": "
String to be placed between each item
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "joined String",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\nvar array = ['Hello', 'world!'];\nvar separator = ' ';\nvar message = join(array, separator);\ntext(message, 5, 50);\n\n
"
+                ],
+                "alt": "\"hello world!\" displayed middle left of canvas.",
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions"
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 44,
+                "description": "
This function is used to apply a regular expression to a piece of text,\nand return matching groups (elements found inside parentheses) as a\nString array. If there are no matches, a null value will be returned.\nIf no groups are specified in the regular expression, but the sequence\nmatches, an array of length 1 (with the matched text as the first element\nof the array) will be returned.\n

\nTo use the function, first check to see if the result is null. If the\nresult is null, then the sequence did not match at all. If the sequence\ndid match, an array is returned.\n

\nIf there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nElement [0] of a regular expression match returns the entire matching\nstring, and the match groups start at element [1] (the first group is [1],\nthe second [2], and so on).
\n",
+                "itemtype": "method",
+                "name": "match",
+                "params": [
+                    {
+                        "name": "str",
+                        "description": "
the String to be searched
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "regexp",
+                        "description": "
the regexp to be used for matching
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "Array of Strings found",
+                    "type": "String[]"
+                },
+                "example": [
+                    "\n
\n\nvar string = 'Hello p5js*!';\nvar regexp = 'p5js\\\\*';\nvar m = match(string, regexp);\ntext(m, 5, 50);\n\n
"
+                ],
+                "alt": "\"p5js*\" displayed middle left of canvas.",
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions"
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 85,
+                "description": "
This function is used to apply a regular expression to a piece of text,\nand return a list of matching groups (elements found inside parentheses)\nas a two-dimensional String array. If there are no matches, a null value\nwill be returned. If no groups are specified in the regular expression,\nbut the sequence matches, a two dimensional array is still returned, but\nthe second dimension is only of length one.\n

\nTo use the function, first check to see if the result is null. If the\nresult is null, then the sequence did not match at all. If the sequence\ndid match, a 2D array is returned.\n

\nIf there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nAssuming a loop with counter variable i, element [i][0] of a regular\nexpression match returns the entire matching string, and the match groups\nstart at element [i][1] (the first group is [i][1], the second [i][2],\nand so on).
\n",
+                "itemtype": "method",
+                "name": "matchAll",
+                "params": [
+                    {
+                        "name": "str",
+                        "description": "
the String to be searched
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "regexp",
+                        "description": "
the regexp to be used for matching
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "2d Array of Strings found",
+                    "type": "String[]"
+                },
+                "example": [
+                    "\n
\n\nvar string = 'Hello p5js*! Hello world!';\nvar regexp = 'Hello';\nmatchAll(string, regexp);\n\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions"
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 132,
+                "description": "
Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.\nThe values for the digits, left, and right parameters should always\nbe positive integers.
\n",
+                "itemtype": "method",
+                "name": "nf",
+                "return": {
+                    "description": "formatted String",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  background(200);\n  var num = 112.53106115;\n\n  noStroke();\n  fill(0);\n  textSize(14);\n  // Draw formatted numbers\n  text(nf(num, 5, 2), 10, 20);\n\n  text(nf(num, 4, 3), 10, 55);\n\n  text(nf(num, 3, 6), 10, 85);\n\n  // Draw dividing lines\n  stroke(120);\n  line(0, 30, width, 30);\n  line(0, 65, width, 65);\n}\n\n
"
+                ],
+                "alt": "\"0011253\" top left, \"0112.531\" mid left, \"112.531061\" bottom left canvas",
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions",
+                "overloads": [
+                    {
+                        "line": 132,
+                        "params": [
+                            {
+                                "name": "num",
+                                "description": "
the Number to format
\n",
+                                "type": "Number|String"
+                            },
+                            {
+                                "name": "left",
+                                "description": "
number of digits to the left of the\n                               decimal point
\n",
+                                "type": "Integer|String",
+                                "optional": true
+                            },
+                            {
+                                "name": "right",
+                                "description": "
number of digits to the right of the\n                               decimal point
\n",
+                                "type": "Integer|String",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "formatted String",
+                            "type": "String"
+                        }
+                    },
+                    {
+                        "line": 174,
+                        "params": [
+                            {
+                                "name": "nums",
+                                "description": "
the Numbers to format
\n",
+                                "type": "Array"
+                            },
+                            {
+                                "name": "left",
+                                "description": "",
+                                "type": "Integer|String",
+                                "optional": true
+                            },
+                            {
+                                "name": "right",
+                                "description": "",
+                                "type": "Integer|String",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "formatted Strings",
+                            "type": "String[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 237,
+                "description": "
Utility function for formatting numbers into strings and placing\nappropriate commas to mark units of 1000. There are two versions: one\nfor formatting ints, and one for formatting an array of ints. The value\nfor the right parameter should always be a positive integer.
\n",
+                "itemtype": "method",
+                "name": "nfc",
+                "return": {
+                    "description": "formatted String",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  background(200);\n  var num = 11253106.115;\n  var numArr = [1, 1, 2];\n\n  noStroke();\n  fill(0);\n  textSize(12);\n\n  // Draw formatted numbers\n  text(nfc(num, 4), 10, 30);\n  text(nfc(numArr, 2), 10, 80);\n\n  // Draw dividing line\n  stroke(120);\n  line(0, 50, width, 50);\n}\n\n
"
+                ],
+                "alt": "\"11,253,106.115\" top middle and \"1.00,1.00,2.00\" displayed bottom mid",
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions",
+                "overloads": [
+                    {
+                        "line": 237,
+                        "params": [
+                            {
+                                "name": "num",
+                                "description": "
the Number to format
\n",
+                                "type": "Number|String"
+                            },
+                            {
+                                "name": "right",
+                                "description": "
number of digits to the right of the\n                                 decimal point
\n",
+                                "type": "Integer|String",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "formatted String",
+                            "type": "String"
+                        }
+                    },
+                    {
+                        "line": 275,
+                        "params": [
+                            {
+                                "name": "nums",
+                                "description": "
the Numbers to format
\n",
+                                "type": "Array"
+                            },
+                            {
+                                "name": "right",
+                                "description": "",
+                                "type": "Integer|String",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "formatted Strings",
+                            "type": "String[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 313,
+                "description": "
Utility function for formatting numbers into strings. Similar to nf() but\nputs a "+" in front of positive numbers and a "-" in front of negative\nnumbers. There are two versions: one for formatting floats, and one for\nformatting ints. The values for left, and right parameters\nshould always be positive integers.
\n",
+                "itemtype": "method",
+                "name": "nfp",
+                "return": {
+                    "description": "formatted String",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  background(200);\n  var num1 = 11253106.115;\n  var num2 = -11253106.115;\n\n  noStroke();\n  fill(0);\n  textSize(12);\n\n  // Draw formatted numbers\n  text(nfp(num1, 4, 2), 10, 30);\n  text(nfp(num2, 4, 2), 10, 80);\n\n  // Draw dividing line\n  stroke(120);\n  line(0, 50, width, 50);\n}\n\n
"
+                ],
+                "alt": "\"+11253106.11\" top middle and \"-11253106.11\" displayed bottom middle",
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions",
+                "overloads": [
+                    {
+                        "line": 313,
+                        "params": [
+                            {
+                                "name": "num",
+                                "description": "
the Number to format
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "left",
+                                "description": "
number of digits to the left of the decimal\n                               point
\n",
+                                "type": "Integer",
+                                "optional": true
+                            },
+                            {
+                                "name": "right",
+                                "description": "
number of digits to the right of the\n                               decimal point
\n",
+                                "type": "Integer",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "formatted String",
+                            "type": "String"
+                        }
+                    },
+                    {
+                        "line": 354,
+                        "params": [
+                            {
+                                "name": "nums",
+                                "description": "
the Numbers to format
\n",
+                                "type": "Number[]"
+                            },
+                            {
+                                "name": "left",
+                                "description": "",
+                                "type": "Integer",
+                                "optional": true
+                            },
+                            {
+                                "name": "right",
+                                "description": "",
+                                "type": "Integer",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "formatted Strings",
+                            "type": "String[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 375,
+                "description": "
Utility function for formatting numbers into strings. Similar to nf() but\nputs a " " (space) in front of positive numbers and a "-" in front of\nnegative numbers. There are two versions: one for formatting floats, and\none for formatting ints. The values for the digits, left, and right\nparameters should always be positive integers.
\n",
+                "itemtype": "method",
+                "name": "nfs",
+                "return": {
+                    "description": "formatted String",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  background(200);\n  var num1 = 11253106.115;\n  var num2 = -11253106.115;\n\n  noStroke();\n  fill(0);\n  textSize(12);\n  // Draw formatted numbers\n  text(nfs(num1, 4, 2), 10, 30);\n\n  text(nfs(num2, 4, 2), 10, 80);\n\n  // Draw dividing line\n  stroke(120);\n  line(0, 50, width, 50);\n}\n\n
"
+                ],
+                "alt": "\"11253106.11\" top middle and \"-11253106.11\" displayed bottom middle",
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions",
+                "overloads": [
+                    {
+                        "line": 375,
+                        "params": [
+                            {
+                                "name": "num",
+                                "description": "
the Number to format
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "left",
+                                "description": "
number of digits to the left of the decimal\n                               point
\n",
+                                "type": "Integer",
+                                "optional": true
+                            },
+                            {
+                                "name": "right",
+                                "description": "
number of digits to the right of the\n                               decimal point
\n",
+                                "type": "Integer",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "formatted String",
+                            "type": "String"
+                        }
+                    },
+                    {
+                        "line": 416,
+                        "params": [
+                            {
+                                "name": "nums",
+                                "description": "
the Numbers to format
\n",
+                                "type": "Array"
+                            },
+                            {
+                                "name": "left",
+                                "description": "",
+                                "type": "Integer",
+                                "optional": true
+                            },
+                            {
+                                "name": "right",
+                                "description": "",
+                                "type": "Integer",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "formatted Strings",
+                            "type": "String[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 437,
+                "description": "
The split() function maps to String.split(), it breaks a String into\npieces using a character or string as the delimiter. The delim parameter\nspecifies the character or characters that mark the boundaries between\neach piece. A String[] array is returned that contains each of the pieces.
\n
The splitTokens() function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.
\n",
+                "itemtype": "method",
+                "name": "split",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
the String to be split
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "delim",
+                        "description": "
the String used to separate the data
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "Array of Strings",
+                    "type": "String[]"
+                },
+                "example": [
+                    "\n
\n\nvar names = 'Pat,Xio,Alex';\nvar splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\n\n
"
+                ],
+                "alt": "\"pat\" top left, \"Xio\" mid left and \"Alex\" displayed bottom left",
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions"
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 471,
+                "description": "
The splitTokens() function splits a String at one or many character\ndelimiters or "tokens." The delim parameter specifies the character or\ncharacters to be used as a boundary.\n

\nIf no delim characters are specified, any whitespace character is used to\nsplit. Whitespace characters include tab (\\t), line feed (\\n), carriage\nreturn (\\r), form feed (\\f), and space.
\n",
+                "itemtype": "method",
+                "name": "splitTokens",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
the String to be split
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "delim",
+                        "description": "
list of individual Strings that will be used as\n                         separators
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Array of Strings",
+                    "type": "String[]"
+                },
+                "example": [
+                    "\n
\n\nfunction setup() {\n  var myStr = 'Mango, Banana, Lime';\n  var myStrArr = splitTokens(myStr, ',');\n\n  print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n\n
"
+                ],
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions"
+            },
+            {
+                "file": "src/utilities/string_functions.js",
+                "line": 526,
+                "description": "
Removes whitespace characters from the beginning and end of a String. In\naddition to standard whitespace characters such as space, carriage return,\nand tab, this function also removes the Unicode "nbsp" character.
\n",
+                "itemtype": "method",
+                "name": "trim",
+                "return": {
+                    "description": "a trimmed String",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\n\nvar string = trim('  No new lines\\n   ');\ntext(string + ' here', 2, 50);\n\n
"
+                ],
+                "alt": "\"No new lines here\" displayed center canvas",
+                "class": "p5",
+                "module": "Data",
+                "submodule": "String Functions",
+                "overloads": [
+                    {
+                        "line": 526,
+                        "params": [
+                            {
+                                "name": "str",
+                                "description": "
a String to be trimmed
\n",
+                                "type": "String"
+                            }
+                        ],
+                        "return": {
+                            "description": "a trimmed String",
+                            "type": "String"
+                        }
+                    },
+                    {
+                        "line": 546,
+                        "params": [
+                            {
+                                "name": "strs",
+                                "description": "
an Array of Strings to be trimmed
\n",
+                                "type": "Array"
+                            }
+                        ],
+                        "return": {
+                            "description": "an Array of trimmed Strings",
+                            "type": "String[]"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/utilities/time_date.js",
+                "line": 12,
+                "description": "
p5.js communicates with the clock on your computer. The day() function\nreturns the current day as a value from 1 - 31.
\n",
+                "itemtype": "method",
+                "name": "day",
+                "return": {
+                    "description": "the current day",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\n\nvar d = day();\ntext('Current day: \\n' + d, 5, 50);\n\n
"
+                ],
+                "alt": "Current day is displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Time & Date"
+            },
+            {
+                "file": "src/utilities/time_date.js",
+                "line": 34,
+                "description": "
p5.js communicates with the clock on your computer. The hour() function\nreturns the current hour as a value from 0 - 23.
\n",
+                "itemtype": "method",
+                "name": "hour",
+                "return": {
+                    "description": "the current hour",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\n\nvar h = hour();\ntext('Current hour:\\n' + h, 5, 50);\n\n
"
+                ],
+                "alt": "Current hour is displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Time & Date"
+            },
+            {
+                "file": "src/utilities/time_date.js",
+                "line": 56,
+                "description": "
p5.js communicates with the clock on your computer. The minute() function\nreturns the current minute as a value from 0 - 59.
\n",
+                "itemtype": "method",
+                "name": "minute",
+                "return": {
+                    "description": "the current minute",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\n\nvar m = minute();\ntext('Current minute: \\n' + m, 5, 50);\n\n
"
+                ],
+                "alt": "Current minute is displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Time & Date"
+            },
+            {
+                "file": "src/utilities/time_date.js",
+                "line": 78,
+                "description": "
Returns the number of milliseconds (thousandths of a second) since\nstarting the program. This information is often used for timing events and\nanimation sequences.
\n",
+                "itemtype": "method",
+                "name": "millis",
+                "return": {
+                    "description": "the number of milliseconds since starting the program",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\nvar millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\n\n
"
+                ],
+                "alt": "number of milliseconds since program has started displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Time & Date"
+            },
+            {
+                "file": "src/utilities/time_date.js",
+                "line": 101,
+                "description": "
p5.js communicates with the clock on your computer. The month() function\nreturns the current month as a value from 1 - 12.
\n",
+                "itemtype": "method",
+                "name": "month",
+                "return": {
+                    "description": "the current month",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\n\nvar m = month();\ntext('Current month: \\n' + m, 5, 50);\n\n
"
+                ],
+                "alt": "Current month is displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Time & Date"
+            },
+            {
+                "file": "src/utilities/time_date.js",
+                "line": 123,
+                "description": "
p5.js communicates with the clock on your computer. The second() function\nreturns the current second as a value from 0 - 59.
\n",
+                "itemtype": "method",
+                "name": "second",
+                "return": {
+                    "description": "the current second",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\n\nvar s = second();\ntext('Current second: \\n' + s, 5, 50);\n\n
"
+                ],
+                "alt": "Current second is displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Time & Date"
+            },
+            {
+                "file": "src/utilities/time_date.js",
+                "line": 145,
+                "description": "
p5.js communicates with the clock on your computer. The year() function\nreturns the current year as an integer (2014, 2015, 2016, etc).
\n",
+                "itemtype": "method",
+                "name": "year",
+                "return": {
+                    "description": "the current year",
+                    "type": "Integer"
+                },
+                "example": [
+                    "\n
\n\nvar y = year();\ntext('Current year: \\n' + y, 5, 50);\n\n
"
+                ],
+                "alt": "Current year is displayed",
+                "class": "p5",
+                "module": "IO",
+                "submodule": "Time & Date"
+            },
+            {
+                "file": "src/webgl/camera.js",
+                "line": 12,
+                "description": "
Sets camera position for a 3D sketch. The function behaves similarly\ngluLookAt, except that it replaces the existing modelview matrix instead\nof applying any transformations calculated here on top of the existing\nmodel view.\nWhen called with no arguments, this function\nsets a default camera equivalent to calling\ncamera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
\n",
+                "itemtype": "method",
+                "name": "camera",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
camera position value on x axis
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y",
+                        "description": "
camera position value on y axis
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "z",
+                        "description": "
camera position value on z axis
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "centerX",
+                        "description": "
x coordinate representing center of the sketch
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "centerY",
+                        "description": "
y coordinate representing center of the sketch
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "centerZ",
+                        "description": "
z coordinate representing center of the sketch
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "upX",
+                        "description": "
x component of direction 'up' from camera
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "upY",
+                        "description": "
y component of direction 'up' from camera
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "upZ",
+                        "description": "
z component of direction 'up' from camera
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  //move the camera away from the plane by a sin wave\n  camera(0, 0, sin(frameCount * 0.01) * 100, 0, 0, 0, 0, 1, 0);\n  plane(120, 120);\n}\n\n
"
+                ],
+                "alt": "blue square shrinks in size grows to fill canvas. disappears then loops.",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Camera"
+            },
+            {
+                "file": "src/webgl/camera.js",
+                "line": 159,
+                "description": "
Sets perspective camera. When called with no arguments, the defaults\nprovided are equivalent to\nperspective(PI/3.0, width/height, cameraZ/10.0, cameraZ10.0)\nwhere cameraZ is ((height/2.0) / tan(PI60.0/360.0));
\n",
+                "itemtype": "method",
+                "name": "perspective",
+                "params": [
+                    {
+                        "name": "fovy",
+                        "description": "
camera frustum vertical field of view,\n                          from bottom to top of view, in degrees
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "aspect",
+                        "description": "
camera frustum aspect ratio
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "near",
+                        "description": "
frustum near plane length
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "far",
+                        "description": "
frustum far plane length
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n//drag mouse to toggle the world!\n//you will see there's a vanish point\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  var fov = 60 / 180 * PI;\n  var cameraZ = height / 2.0 / tan(fov / 2.0);\n  perspective(60 / 180 * PI, width / height, cameraZ * 0.1, cameraZ * 10);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  for (var i = -1; i < 2; i++) {\n    for (var j = -2; j < 3; j++) {\n      push();\n      translate(i * 160, 0, j * 160);\n      box(40, 40, 40);\n      pop();\n    }\n  }\n}\n\n
"
+                ],
+                "alt": "colored 3d boxes toggleable with mouse position",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Camera"
+            },
+            {
+                "file": "src/webgl/camera.js",
+                "line": 239,
+                "description": "
Setup ortho camera
\n",
+                "itemtype": "method",
+                "name": "ortho",
+                "params": [
+                    {
+                        "name": "left",
+                        "description": "
camera frustum left plane
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "right",
+                        "description": "
camera frustum right plane
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "bottom",
+                        "description": "
camera frustum bottom plane
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "top",
+                        "description": "
camera frustum top plane
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "near",
+                        "description": "
camera frustum near plane
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "far",
+                        "description": "
camera frustum far plane
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n//drag mouse to toggle the world!\n//there's no vanish point\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  strokeWeight(0.1);\n  for (var i = -1; i < 2; i++) {\n    for (var j = -2; j < 3; j++) {\n      push();\n      translate(i * 160, 0, j * 160);\n      box(40, 40, 40);\n      pop();\n    }\n  }\n}\n\n
"
+                ],
+                "alt": "3 3d boxes, reveal several more boxes on 3d plane when mouse used to toggle",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Camera"
+            },
+            {
+                "file": "src/webgl/interaction.js",
+                "line": 5,
+                "itemtype": "method",
+                "name": "orbitControl",
+                "chainable": 1,
+                "class": "p5",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/light.js",
+                "line": 12,
+                "description": "
Creates an ambient light with a color
\n",
+                "itemtype": "method",
+                "name": "ambientLight",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  ambientLight(150);\n  ambientMaterial(250);\n  noStroke();\n  sphere(25);\n}\n\n
"
+                ],
+                "alt": "evenly distributed light across a sphere",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Lights",
+                "overloads": [
+                    {
+                        "line": 12,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
red or hue value relative to\n                                the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value\n                                relative to the current color range
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 46,
+                        "params": [
+                            {
+                                "name": "value",
+                                "description": "
a color string
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "alpha",
+                                "description": "",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 53,
+                        "params": [
+                            {
+                                "name": "values",
+                                "description": "
an array containing the red,green,blue &\n                                and alpha components of the color
\n",
+                                "type": "Number[]"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 60,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "
the ambient light color
\n",
+                                "type": "p5.Color"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/webgl/light.js",
+                "line": 93,
+                "description": "
Creates a directional light with a color and a direction
\n",
+                "itemtype": "method",
+                "name": "directionalLight",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  //move your mouse to change light direction\n  var dirX = (mouseX / width - 0.5) * 2;\n  var dirY = (mouseY / height - 0.5) * 2;\n  directionalLight(250, 250, 250, -dirX, -dirY, 0.25);\n  ambientMaterial(250);\n  noStroke();\n  sphere(25);\n}\n\n
"
+                ],
+                "alt": "light source on canvas changeable with mouse position",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Lights",
+                "overloads": [
+                    {
+                        "line": 93,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
red or hue value (depending on the current\ncolor mode),
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "position",
+                                "description": "
the direction of the light
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 126,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "
color Array, CSS color string,\n                                            or p5.Color value
\n",
+                                "type": "Number[]|String|p5.Color"
+                            },
+                            {
+                                "name": "x",
+                                "description": "
x axis direction
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
y axis direction
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z",
+                                "description": "
z axis direction
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 136,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "",
+                                "type": "Number[]|String|p5.Color"
+                            },
+                            {
+                                "name": "position",
+                                "description": "",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 143,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z",
+                                "description": "",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/webgl/light.js",
+                "line": 197,
+                "description": "
Creates a point light with a color and a light position
\n",
+                "itemtype": "method",
+                "name": "pointLight",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  //move your mouse to change light position\n  var locX = mouseX - width / 2;\n  var locY = mouseY - height / 2;\n  // to set the light position,\n  // think of the world's coordinate as:\n  // -width/2,-height/2 -------- width/2,-height/2\n  //                |            |\n  //                |     0,0    |\n  //                |            |\n  // -width/2,height/2--------width/2,height/2\n  pointLight(250, 250, 250, locX, locY, 50);\n  ambientMaterial(250);\n  noStroke();\n  sphere(25);\n}\n\n
"
+                ],
+                "alt": "spot light on canvas changes position with mouse",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Lights",
+                "overloads": [
+                    {
+                        "line": 197,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
red or hue value (depending on the current\ncolor mode),
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "x",
+                                "description": "
x axis position
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "
y axis position
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z",
+                                "description": "
z axis position
\n",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 239,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v3",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "position",
+                                "description": "
the position of the light
\n",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 248,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "
color Array, CSS color string,\nor p5.Color value
\n",
+                                "type": "Number[]|String|p5.Color"
+                            },
+                            {
+                                "name": "x",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "y",
+                                "description": "",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "z",
+                                "description": "",
+                                "type": "Number"
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 258,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "",
+                                "type": "Number[]|String|p5.Color"
+                            },
+                            {
+                                "name": "position",
+                                "description": "",
+                                "type": "p5.Vector"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/webgl/loading.js",
+                "line": 14,
+                "description": "
Load a 3d model from an OBJ file.\n

\nOne of the limitations of the OBJ format is that it doesn't have a built-in\nsense of scale. This means that models exported from different programs might\nbe very different sizes. If your model isn't displaying, try calling\nloadModel() with the normalized parameter set to true. This will resize the\nmodel to a scale appropriate for p5. You can also make additional changes to\nthe final size of your model with the scale() function.
\n",
+                "itemtype": "method",
+                "name": "loadModel",
+                "return": {
+                    "description": "the p5.Geometry object",
+                    "type": "p5.Geometry"
+                },
+                "example": [
+                    "\n
\n\n//draw a spinning teapot\nvar teapot;\n\nfunction preload() {\n  teapot = loadModel('assets/teapot.obj');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(teapot);\n}\n\n
"
+                ],
+                "alt": "Vertically rotating 3-d teapot with red, green and blue gradient.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Models",
+                "overloads": [
+                    {
+                        "line": 14,
+                        "params": [
+                            {
+                                "name": "path",
+                                "description": "
Path of the model to be loaded
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "normalize",
+                                "description": "
If true, scale the model to a\n                                     standardized size when loading
\n",
+                                "type": "Boolean"
+                            },
+                            {
+                                "name": "successCallback",
+                                "description": "
Function to be called\n                                    once the model is loaded. Will be passed\n                                    the 3D model object.
\n",
+                                "type": "function(p5.Geometry)",
+                                "optional": true
+                            },
+                            {
+                                "name": "failureCallback",
+                                "description": "
called with event error if\n                                        the image fails to load.
\n",
+                                "type": "Function(Event)",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "the p5.Geometry object",
+                            "type": "p5.Geometry"
+                        }
+                    },
+                    {
+                        "line": 61,
+                        "params": [
+                            {
+                                "name": "path",
+                                "description": "",
+                                "type": "String"
+                            },
+                            {
+                                "name": "successCallback",
+                                "description": "",
+                                "type": "function(p5.Geometry)",
+                                "optional": true
+                            },
+                            {
+                                "name": "failureCallback",
+                                "description": "",
+                                "type": "Function(Event)",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "the p5.Geometry object",
+                            "type": "p5.Geometry"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "src/webgl/loading.js",
+                "line": 103,
+                "description": "
Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:
\n
v -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5
\n
f 4 3 2 1
\n",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Models"
+            },
+            {
+                "file": "src/webgl/loading.js",
+                "line": 212,
+                "description": "
Render a 3d model to the screen.
\n",
+                "itemtype": "method",
+                "name": "model",
+                "params": [
+                    {
+                        "name": "model",
+                        "description": "
Loaded 3d model to be rendered
\n",
+                        "type": "p5.Geometry"
+                    }
+                ],
+                "example": [
+                    "\n
\n\n//draw a spinning teapot\nvar teapot;\n\nfunction preload() {\n  teapot = loadModel('assets/teapot.obj');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(teapot);\n}\n\n
"
+                ],
+                "alt": "Vertically rotating 3-d teapot with red, green and blue gradient.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Models"
+            },
+            {
+                "file": "src/webgl/material.js",
+                "line": 14,
+                "description": "
Loads a custom shader from the provided vertex and fragment\nshader paths. The shader files are loaded asynchronously in the\nbackground, so this method should be used in preload().
\n
For now, there are three main types of shaders. p5 will automatically\nsupply appropriate vertices, normals, colors, and lighting attributes\nif the parameters defined in the shader match the names.
\n",
+                "itemtype": "method",
+                "name": "loadShader",
+                "params": [
+                    {
+                        "name": "vertFilename",
+                        "description": "
path to file containing vertex shader\nsource code
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "fragFilename",
+                        "description": "
path to file containing fragment shader\nsource code
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "a shader object created from the provided\nvertex and fragment shader files.",
+                    "type": "p5.Shader"
+                },
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Material"
+            },
+            {
+                "file": "src/webgl/material.js",
+                "line": 56,
+                "itemtype": "method",
+                "name": "createShader",
+                "params": [
+                    {
+                        "name": "vertSrc",
+                        "description": "
source code for the vertex shader
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "fragSrc",
+                        "description": "
source code for the fragment shader
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "a shader object created from the provided\nvertex and fragment shaders.",
+                    "type": "p5.Shader"
+                },
+                "example": [
+                    "\n
\n\n// the 'varying's are shared between both vertex & fragment shaders\nvar varying = 'precision highp float; varying vec2 vPos;';\n\n// the vertex shader is called for each vertex\nvar vs =\n  varying +\n  'attribute vec3 aPosition;' +\n  'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\n\n// the fragment shader is called for each pixel\nvar fs =\n  varying +\n  'uniform vec2 p;' +\n  'uniform float r;' +\n  'const int I = 500;' +\n  'void main() {' +\n  '  vec2 c = p + vPos * r, z = c;' +\n  '  float n = 0.0;' +\n  '  for (int i = I; i > 0; i --) {' +\n  '    if(z.x*z.x+z.y*z.y > 4.0) {' +\n  '      n = float(i)/float(I);' +\n  '      break;' +\n  '    }' +\n  '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\n  '  }' +\n  '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\n  '}';\n\nvar mandel;\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n\n  // create and initialize the shader\n  mandel = createShader(vs, fs);\n  shader(mandel);\n  noStroke();\n\n  // 'p' is the center point of the Mandelbrot image\n  mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\n}\n\nfunction draw() {\n  // 'r' is the size of the image in Mandelbrot-space\n  mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n  quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n
"
+                ],
+                "alt": "zooming Mandelbrot set. a colorful, infinitely detailed fractal.",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Material"
+            },
+            {
+                "file": "src/webgl/material.js",
+                "line": 122,
+                "description": "
The shader() function lets the user provide a custom shader\nto fill in shapes in WEBGL mode. Users can create their\nown shaders by loading vertex and fragment shaders with\nloadShader().
\n",
+                "itemtype": "method",
+                "name": "shader",
+                "chainable": 1,
+                "params": [
+                    {
+                        "name": "s",
+                        "description": "
the desired p5.Shader to use for rendering\nshapes.
\n",
+                        "type": "p5.Shader",
+                        "optional": true
+                    }
+                ],
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Material"
+            },
+            {
+                "file": "src/webgl/material.js",
+                "line": 145,
+                "description": "
Normal material for geometry. You can view all\npossible materials in this\nexample.
\n",
+                "itemtype": "method",
+                "name": "normalMaterial",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  normalMaterial();\n  sphere(50);\n}\n\n
"
+                ],
+                "alt": "Red, green and blue gradient.",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Material"
+            },
+            {
+                "file": "src/webgl/material.js",
+                "line": 178,
+                "description": "
Texture for geometry.  You can view other possible materials in this\nexample.
\n",
+                "itemtype": "method",
+                "name": "texture",
+                "params": [
+                    {
+                        "name": "tex",
+                        "description": "
2-dimensional graphics\n                   to render as texture
\n",
+                        "type": "p5.Image|p5.MediaElement|p5.Graphics"
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nvar img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  rotateZ(frameCount * 0.01);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  //pass image as texture\n  texture(img);\n  box(200, 200, 200);\n}\n\n
\n\n
\n\nvar pg;\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  pg = createGraphics(200, 200);\n  pg.textSize(100);\n}\n\nfunction draw() {\n  background(0);\n  pg.background(255);\n  pg.text('hello!', 0, 100);\n  //pass image as texture\n  texture(pg);\n  plane(200);\n}\n\n
\n\n
\n\nvar vid;\nfunction preload() {\n  vid = createVideo('assets/fingers.mov');\n  vid.hide();\n  vid.loop();\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  //pass video frame as texture\n  texture(vid);\n  plane(200);\n}\n\n
"
+                ],
+                "alt": "Rotating view of many images umbrella and grid roof on a 3d plane\nblack canvas\nblack canvas",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Material"
+            },
+            {
+                "file": "src/webgl/material.js",
+                "line": 273,
+                "description": "
Ambient material for geometry with a given color. You can view all\npossible materials in this\nexample.
\n",
+                "itemtype": "method",
+                "name": "ambientMaterial",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  ambientLight(100);\n  pointLight(250, 250, 250, 100, 100, 0);\n  ambientMaterial(250);\n  sphere(50);\n}\n\n
"
+                ],
+                "alt": "radiating light source from top right of canvas",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Material",
+                "overloads": [
+                    {
+                        "line": 273,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
gray value, red or hue value\n                        (depending on the current color mode),
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "a",
+                                "description": "
opacity
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 304,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "
color, color Array, or CSS color string
\n",
+                                "type": "Number[]|String|p5.Color"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/webgl/material.js",
+                "line": 320,
+                "description": "
Specular material for geometry with a given color. You can view all\npossible materials in this\nexample.
\n",
+                "itemtype": "method",
+                "name": "specularMaterial",
+                "chainable": 1,
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  ambientLight(100);\n  pointLight(250, 250, 250, 100, 100, 0);\n  specularMaterial(250);\n  sphere(50);\n}\n\n
"
+                ],
+                "alt": "diffused radiating light source from top right of canvas",
+                "class": "p5",
+                "module": "Lights, Camera",
+                "submodule": "Material",
+                "overloads": [
+                    {
+                        "line": 320,
+                        "params": [
+                            {
+                                "name": "v1",
+                                "description": "
gray value, red or hue value\n                      (depending on the current color mode),
\n",
+                                "type": "Number"
+                            },
+                            {
+                                "name": "v2",
+                                "description": "
green or saturation value
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "v3",
+                                "description": "
blue or brightness value
\n",
+                                "type": "Number",
+                                "optional": true
+                            },
+                            {
+                                "name": "a",
+                                "description": "
opacity
\n",
+                                "type": "Number",
+                                "optional": true
+                            }
+                        ],
+                        "chainable": 1
+                    },
+                    {
+                        "line": 351,
+                        "params": [
+                            {
+                                "name": "color",
+                                "description": "
color Array, or CSS color string
\n",
+                                "type": "Number[]|String|p5.Color"
+                            }
+                        ],
+                        "chainable": 1
+                    }
+                ]
+            },
+            {
+                "file": "src/webgl/p5.Geometry.js",
+                "line": 54,
+                "itemtype": "method",
+                "name": "computeFaces",
+                "chainable": 1,
+                "class": "p5.Geometry",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.Geometry.js",
+                "line": 87,
+                "description": "
computes smooth normals per vertex as an average of each\nface.
\n",
+                "itemtype": "method",
+                "name": "computeNormals",
+                "chainable": 1,
+                "class": "p5.Geometry",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.Geometry.js",
+                "line": 116,
+                "description": "
Averages the vertex normals. Used in curved\nsurfaces
\n",
+                "itemtype": "method",
+                "name": "averageNormals",
+                "chainable": 1,
+                "class": "p5.Geometry",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.Geometry.js",
+                "line": 137,
+                "description": "
Averages pole normals.  Used in spherical primitives
\n",
+                "itemtype": "method",
+                "name": "averagePoleNormals",
+                "chainable": 1,
+                "class": "p5.Geometry",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.Geometry.js",
+                "line": 226,
+                "description": "
Modifies all vertices to be centered within the range -100 to 100.
\n",
+                "itemtype": "method",
+                "name": "normalize",
+                "chainable": 1,
+                "class": "p5.Geometry",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.Immediate.js",
+                "line": 1,
+                "description": "
Welcome to RendererGL Immediate Mode.\nImmediate mode is used for drawing custom shapes\nfrom a set of vertices.  Immediate Mode is activated\nwhen you call beginShape() & de-activated when you call endShape().\nImmediate mode is a style of programming borrowed\nfrom OpenGL's (now-deprecated) immediate mode.\nIt differs from p5.js' default, Retained Mode, which caches\ngeometries and buffers on the CPU to reduce the number of webgl\ndraw calls. Retained mode is more efficient & performative,\nhowever, Immediate Mode is useful for sketching quick\ngeometric ideas.
\n",
+                "class": "p5.RendererGL",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.Immediate.js",
+                "line": 19,
+                "description": "
Begin shape drawing.  This is a helpful way of generating\ncustom shapes quickly.  However in WEBGL mode, application\nperformance will likely drop as a result of too many calls to\nbeginShape() / endShape().  As a high performance alternative,\nplease use p5.js geometry primitives.
\n",
+                "itemtype": "method",
+                "name": "beginShape",
+                "params": [
+                    {
+                        "name": "mode",
+                        "description": "
webgl primitives mode.  beginShape supports the\n                      following modes:\n                      POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,\n                      TRIANGLE_STRIP,and TRIANGLE_FAN.
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "class": "p5.RendererGL",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.Immediate.js",
+                "line": 61,
+                "description": "
adds a vertex to be drawn in a custom Shape.
\n",
+                "itemtype": "method",
+                "name": "vertex",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of vertex
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of vertex
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "z",
+                        "description": "
z-coordinate of vertex
\n",
+                        "type": "Number"
+                    }
+                ],
+                "chainable": 1,
+                "todo": [
+                    "implement handling of p5.Vector args"
+                ],
+                "class": "p5.RendererGL",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.Immediate.js",
+                "line": 104,
+                "description": "
End shape drawing and render vertices to screen.
\n",
+                "chainable": 1,
+                "class": "p5.RendererGL",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 79,
+                "description": "
model view, projection, & normal\nmatrices
\n",
+                "class": "p5.RendererGL",
+                "module": "Lights, Camera"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 199,
+                "description": "
Set attributes for the WebGL Drawing context.\nThis is a way of adjusting ways that the WebGL\nrenderer works to fine-tune the display and performance.\nThis should be put in setup().\nThe available attributes are:\n
\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true\n

\ndepth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true\n

\nstencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits\n

\nantialias - indicates whether or not to perform anti-aliasing\ndefault is false\n

\npremultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is false\n

\npreserveDrawingBuffer - if true the buffers will not be cleared and\nand will preserve their values until cleared or overwritten by author\n(note that p5 clears automatically on draw loop)\ndefault is true\n

\nperPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader.\ndefault is false\n

\n",
+                "itemtype": "method",
+                "name": "setAttributes",
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(255);\n  push();\n  rotateZ(frameCount * 0.02);\n  rotateX(frameCount * 0.02);\n  rotateY(frameCount * 0.02);\n  fill(0, 0, 0);\n  box(50);\n  pop();\n}\n\n
\n
\nNow with the antialias attribute set to true.\n
\n
\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  setAttributes('antialias', true);\n}\n\nfunction draw() {\n  background(255);\n  push();\n  rotateZ(frameCount * 0.02);\n  rotateX(frameCount * 0.02);\n  rotateY(frameCount * 0.02);\n  fill(0, 0, 0);\n  box(50);\n  pop();\n}\n\n
\n\n
\n\n// press the mouse button to enable perPixelLighting\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n  fill(255);\n}\n\nvar lights = [\n  { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },\n  { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },\n  { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },\n  { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },\n  { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },\n  { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }\n];\n\nfunction draw() {\n  var t = millis() / 1000 + 1000;\n  background(0);\n  directionalLight(color('#222'), 1, 1, 1);\n\n  for (var i = 0; i < lights.length; i++) {\n    var light = lights[i];\n    pointLight(\n      color(light.c),\n      p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)\n    );\n  }\n\n  specularMaterial(255);\n  sphere(width * 0.1);\n\n  rotateX(t * 0.77);\n  rotateY(t * 0.83);\n  rotateZ(t * 0.91);\n  torus(width * 0.3, width * 0.07, 30, 10);\n}\n\nfunction mousePressed() {\n  setAttributes('perPixelLighting', true);\n  noStroke();\n  fill(255);\n}\nfunction mouseReleased() {\n  setAttributes('perPixelLighting', false);\n  noStroke();\n  fill(255);\n}\n\n
"
+                ],
+                "alt": "a rotating cube with smoother edges",
+                "class": "p5",
+                "module": "Rendering",
+                "submodule": "Rendering",
+                "overloads": [
+                    {
+                        "line": 199,
+                        "params": [
+                            {
+                                "name": "key",
+                                "description": "
Name of attribute
\n",
+                                "type": "String"
+                            },
+                            {
+                                "name": "value",
+                                "description": "
New value of named attribute
\n",
+                                "type": "Boolean"
+                            }
+                        ]
+                    },
+                    {
+                        "line": 332,
+                        "params": [
+                            {
+                                "name": "obj",
+                                "description": "
object with key-value pairs
\n",
+                                "type": "Object"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 416,
+                "description": "
[background description]
\n",
+                "class": "p5.RendererGL",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 485,
+                "description": "
Basic stroke material for geometry with a given color
\n",
+                "itemtype": "method",
+                "name": "stroke",
+                "params": [
+                    {
+                        "name": "v1",
+                        "description": "
gray value,\nred or hue value (depending on the current color mode),\nor color Array, or CSS color string
\n",
+                        "type": "Number|Number[]|String|p5.Color"
+                    },
+                    {
+                        "name": "v2",
+                        "description": "
green or saturation value
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "v3",
+                        "description": "
blue or brightness value
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "a",
+                        "description": "
opacity
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(200, 200, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  stroke(240, 150, 150);\n  fill(100, 100, 240);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(75, 75, 75);\n}\n\n
"
+                ],
+                "alt": "black canvas with purple cube with pink outline spinning",
+                "class": "p5.RendererGL",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 525,
+                "description": "
Change weight of stroke
\n",
+                "itemtype": "method",
+                "name": "strokeWeight",
+                "params": [
+                    {
+                        "name": "stroke",
+                        "description": "
weight to be used for drawing
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nfunction setup() {\n  createCanvas(200, 400, WEBGL);\n  setAttributes('antialias', true);\n}\n\nfunction draw() {\n  background(0);\n  noStroke();\n  translate(0, -100, 0);\n  stroke(240, 150, 150);\n  fill(100, 100, 240);\n  push();\n  strokeWeight(8);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  sphere(75);\n  pop();\n  push();\n  translate(0, 200, 0);\n  strokeWeight(1);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  sphere(75);\n  pop();\n}\n\n
"
+                ],
+                "alt": "black canvas with two purple rotating spheres with pink\noutlines the sphere on top has much heavier outlines,",
+                "class": "p5.RendererGL",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 573,
+                "description": "
Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current imageMode().\n

\nIf the pixel requested is outside of the image window, [0,0,0,255] is\nreturned.\n

\nGetting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from pixels[]. The equivalent statement to\nget(x, y) is using pixels[] with pixel density d
\n",
+                "itemtype": "method",
+                "name": "get",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-coordinate of the pixel
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-coordinate of the pixel
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "w",
+                        "description": "
width
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "color of pixel at x,y in array format\n                                   [R, G, B, A] or p5.Image",
+                    "type": "Number[]|Color|p5.Image"
+                },
+                "class": "p5.RendererGL",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 601,
+                "description": "
Loads the pixels data for this canvas into the pixels[] attribute.\nNote that updatePixels() and set() do not work.\nAny pixel manipulation must be done directly to the pixels[] array.
\n",
+                "itemtype": "method",
+                "name": "loadPixels",
+                "class": "p5.RendererGL",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 751,
+                "description": "
pushes a copy of the model view matrix onto the\nMV Matrix stack.
\n",
+                "class": "p5.RendererGL",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/webgl/p5.RendererGL.js",
+                "line": 760,
+                "description": "
[pop description]
\n",
+                "class": "p5.RendererGL",
+                "module": "Rendering",
+                "submodule": "Rendering"
+            },
+            {
+                "file": "src/webgl/p5.Shader.js",
+                "line": 271,
+                "description": "
Wrapper around gl.uniform functions.\nAs we store uniform info in the shader we can use that\nto do type checking on the supplied data and call\nthe appropriate function.
\n",
+                "itemtype": "method",
+                "name": "setUniform",
+                "chainable": 1,
+                "params": [
+                    {
+                        "name": "uniformName",
+                        "description": "
the name of the uniform in the\nshader program
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "data",
+                        "description": "
the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)
\n",
+                        "type": "Object|Number|Boolean|Number[]"
+                    }
+                ],
+                "class": "p5.Shader",
+                "module": "Lights, Camera",
+                "submodule": "Shaders"
+            },
+            {
+                "file": "src/webgl/p5.Texture.js",
+                "line": 123,
+                "description": "
Checks if the source data for this texture has changed (if it's\neasy to do so) and reuploads the texture if necessary. If it's not\npossible or to expensive to do a calculation to determine wheter or\nnot the data has occurred, this method simply re-uploads the texture.
\n",
+                "itemtype": "method",
+                "name": "update",
+                "class": "p5.Texture",
+                "module": "Lights, Camera",
+                "submodule": "Material"
+            },
+            {
+                "file": "src/webgl/p5.Texture.js",
+                "line": 232,
+                "description": "
Binds the texture to the appropriate GL target.
\n",
+                "itemtype": "method",
+                "name": "bindTexture",
+                "class": "p5.Texture",
+                "module": "Lights, Camera",
+                "submodule": "Material"
+            },
+            {
+                "file": "src/webgl/p5.Texture.js",
+                "line": 245,
+                "description": "
Unbinds the texture from the appropriate GL target.
\n",
+                "itemtype": "method",
+                "name": "unbindTexture",
+                "class": "p5.Texture",
+                "module": "Lights, Camera",
+                "submodule": "Material"
+            },
+            {
+                "file": "src/webgl/primitives.js",
+                "line": 13,
+                "description": "
Draw a plane with given a width and height
\n",
+                "itemtype": "method",
+                "name": "plane",
+                "params": [
+                    {
+                        "name": "width",
+                        "description": "
width of the plane
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "height",
+                        "description": "
height of the plane
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailX",
+                        "description": "
Optional number of triangle\n                            subdivisions in x-dimension
\n",
+                        "type": "Integer",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailY",
+                        "description": "
Optional number of triangle\n                            subdivisions in y-dimension
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n//draw a plane with width 50 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  plane(50, 50);\n}\n\n
"
+                ],
+                "alt": "Nothing displayed on canvas\nRotating interior view of a box with sides that change color.\n3d red and green gradient.\nRotating interior view of a cylinder with sides that change color.\nRotating view of a cylinder with sides that change color.\n3d red and green gradient.\nrotating view of a multi-colored cylinder with concave sides.",
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Primitives"
+            },
+            {
+                "file": "src/webgl/primitives.js",
+                "line": 94,
+                "description": "
Draw a box with given width, height and depth
\n",
+                "itemtype": "method",
+                "name": "box",
+                "params": [
+                    {
+                        "name": "width",
+                        "description": "
width of the box
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "Height",
+                        "description": "
height of the box
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "depth",
+                        "description": "
depth of the box
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailX",
+                        "description": "
Optional number of triangle\n                           subdivisions in x-dimension
\n",
+                        "type": "Integer",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailY",
+                        "description": "
Optional number of triangle\n                           subdivisions in y-dimension
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n//draw a spinning box with width, height and depth 200\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(50);\n}\n\n
"
+                ],
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Primitives"
+            },
+            {
+                "file": "src/webgl/primitives.js",
+                "line": 208,
+                "description": "
Draw a sphere with given radius
\n",
+                "itemtype": "method",
+                "name": "sphere",
+                "params": [
+                    {
+                        "name": "radius",
+                        "description": "
radius of circle
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailX",
+                        "description": "
number of segments,\n                                   the more segments the smoother geometry\n                                   default is 24
\n",
+                        "type": "Integer",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailY",
+                        "description": "
number of segments,\n                                   the more segments the smoother geometry\n                                   default is 16
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n// draw a sphere with radius 200\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  sphere(40);\n}\n\n
"
+                ],
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Primitives"
+            },
+            {
+                "file": "src/webgl/primitives.js",
+                "line": 336,
+                "description": "
Draw a cylinder with given radius and height
\n",
+                "itemtype": "method",
+                "name": "cylinder",
+                "params": [
+                    {
+                        "name": "radius",
+                        "description": "
radius of the surface
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "height",
+                        "description": "
height of the cylinder
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailX",
+                        "description": "
number of segments,\n                            the more segments the smoother geometry\n                            default is 24
\n",
+                        "type": "Integer",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailY",
+                        "description": "
number of segments in y-dimension,\n                            the more segments the smoother geometry\n                            default is 16
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n//draw a spinning cylinder with radius 200 and height 200\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateZ(frameCount * 0.01);\n  cylinder(20, 50);\n}\n\n
"
+                ],
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Primitives"
+            },
+            {
+                "file": "src/webgl/primitives.js",
+                "line": 401,
+                "description": "
Draw a cone with given radius and height
\n",
+                "itemtype": "method",
+                "name": "cone",
+                "params": [
+                    {
+                        "name": "radius",
+                        "description": "
radius of the bottom surface
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "height",
+                        "description": "
height of the cone
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailX",
+                        "description": "
number of segments,\n                                   the more segments the smoother geometry\n                                   default is 24
\n",
+                        "type": "Integer",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailY",
+                        "description": "
number of segments,\n                                   the more segments the smoother geometry\n                                   default is 16
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n//draw a spinning cone with radius 200 and height 200\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateZ(frameCount * 0.01);\n  cone(40, 70);\n}\n\n
"
+                ],
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Primitives"
+            },
+            {
+                "file": "src/webgl/primitives.js",
+                "line": 476,
+                "description": "
Draw an ellipsoid with given radius
\n",
+                "itemtype": "method",
+                "name": "ellipsoid",
+                "params": [
+                    {
+                        "name": "radiusx",
+                        "description": "
xradius of circle
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "radiusy",
+                        "description": "
yradius of circle
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "radiusz",
+                        "description": "
zradius of circle
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailX",
+                        "description": "
number of segments,\n                                   the more segments the smoother geometry\n                                   default is 24. Avoid detail number above\n                                   150, it may crash the browser.
\n",
+                        "type": "Integer",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailY",
+                        "description": "
number of segments,\n                                   the more segments the smoother geometry\n                                   default is 16. Avoid detail number above\n                                   150, it may crash the browser.
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n// draw an ellipsoid with radius 20, 30 and 40.\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  ellipsoid(20, 30, 40);\n}\n\n
"
+                ],
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Primitives"
+            },
+            {
+                "file": "src/webgl/primitives.js",
+                "line": 565,
+                "description": "
Draw a torus with given radius and tube radius
\n",
+                "itemtype": "method",
+                "name": "torus",
+                "params": [
+                    {
+                        "name": "radius",
+                        "description": "
radius of the whole ring
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "tubeRadius",
+                        "description": "
radius of the tube
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailX",
+                        "description": "
number of segments in x-dimension,\n                               the more segments the smoother geometry\n                               default is 24
\n",
+                        "type": "Integer",
+                        "optional": true
+                    },
+                    {
+                        "name": "detailY",
+                        "description": "
number of segments in y-dimension,\n                               the more segments the smoother geometry\n                               default is 16
\n",
+                        "type": "Integer",
+                        "optional": true
+                    }
+                ],
+                "chainable": 1,
+                "example": [
+                    "\n
\n\n//draw a spinning torus with radius 200 and tube radius 60\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  torus(50, 15);\n}\n\n
"
+                ],
+                "class": "p5",
+                "module": "Shape",
+                "submodule": "3D Primitives"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 40,
+                "description": "
Searches the page for an element with the given ID, class, or tag name (using the '#' or '.'\nprefixes to specify an ID or class respectively, and none for a tag) and returns it as\na p5.Element. If a class or tag name is given with more than 1 element,\nonly the first element will be returned.\nThe DOM node itself can be accessed with .elt.\nReturns null if none found. You can also specify a container to search within.
\n",
+                "itemtype": "method",
+                "name": "select",
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
id, class, or tag name of element to search for
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "container",
+                        "description": "
id, p5.Element, or HTML element to search within
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "p5.Element containing node found",
+                    "type": "Object|p5.Element|Null"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  createCanvas(100, 100);\n  //translates canvas 50px down\n  select('canvas').position(100, 100);\n}\n
\n
\n// these are all valid calls to select()\nvar a = select('#moo');\nvar b = select('#blah', '#myContainer');\nvar c = select('#foo', b);\nvar d = document.getElementById('beep');\nvar e = select('p', d);\n[a, b, c, d, e]; // unused\n
\n"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 101,
+                "description": "
Searches the page for elements with the given class or tag name (using the '.' prefix\nto specify a class and no prefix for a tag) and returns them as p5.Elements\nin an array.\nThe DOM node itself can be accessed with .elt.\nReturns an empty array if none found.\nYou can also specify a container to search within.
\n",
+                "itemtype": "method",
+                "name": "selectAll",
+                "params": [
+                    {
+                        "name": "name",
+                        "description": "
class or tag name of elements to search for
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "container",
+                        "description": "
id, p5.Element, or HTML element to search within
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Array of p5.Elements containing nodes found",
+                    "type": "Array"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  createButton('btn');\n  createButton('2nd btn');\n  createButton('3rd btn');\n  var buttons = selectAll('button');\n\n  for (var i = 0; i < buttons.length; i++) {\n    buttons[i].size(100, 100);\n  }\n}\n
\n
\n// these are all valid calls to selectAll()\nvar a = selectAll('.moo');\na = selectAll('div');\na = selectAll('button', '#myContainer');\n\nvar d = select('#container');\na = selectAll('p', d);\n\nvar f = document.getElementById('beep');\na = select('.blah', f);\n\na; // unused\n
\n"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 162,
+                "description": "
Helper function for select and selectAll
\n",
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 178,
+                "description": "
Helper function for getElement and getElements.
\n",
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 212,
+                "description": "
Removes all elements created by p5, except any canvas / graphics\nelements created by createCanvas or createGraphics.\nEvent handlers are removed, and element is removed from the DOM.
\n",
+                "itemtype": "method",
+                "name": "removeElements",
+                "example": [
+                    "\n
\nfunction setup() {\n  createCanvas(100, 100);\n  createDiv('this is some text');\n  createP('this is a paragraph');\n}\nfunction mousePressed() {\n  removeElements(); // this will remove the div and p, not canvas\n}\n
\n"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 239,
+                "description": "
Helpers for create methods.
\n",
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 250,
+                "description": "
Creates a <div></div> element in the DOM with given inner HTML.\nAppends to the container node if one is specified, otherwise\nappends to body.
\n",
+                "itemtype": "method",
+                "name": "createDiv",
+                "params": [
+                    {
+                        "name": "html",
+                        "description": "
inner HTML for element created
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\ncreateDiv('this is some text');\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 264,
+                "description": "
Creates a <p></p> element in the DOM with given inner HTML. Used\nfor paragraph length text.\nAppends to the container node if one is specified, otherwise\nappends to body.
\n",
+                "itemtype": "method",
+                "name": "createP",
+                "params": [
+                    {
+                        "name": "html",
+                        "description": "
inner HTML for element created
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\ncreateP('this is some text');\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 279,
+                "description": "
Creates a <span></span> element in the DOM with given inner HTML.\nAppends to the container node if one is specified, otherwise\nappends to body.
\n",
+                "itemtype": "method",
+                "name": "createSpan",
+                "params": [
+                    {
+                        "name": "html",
+                        "description": "
inner HTML for element created
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\ncreateSpan('this is some text');\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 302,
+                "description": "
Creates an <img> element in the DOM with given src and\nalternate text.\nAppends to the container node if one is specified, otherwise\nappends to body.
\n",
+                "itemtype": "method",
+                "name": "createImg",
+                "params": [
+                    {
+                        "name": "src",
+                        "description": "
src path or url for image
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "alt",
+                        "description": "
alternate text to be used if image does not load
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "successCallback",
+                        "description": "
callback to be called once image data is loaded
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\ncreateImg('http://p5js.org/img/asterisk-01.png');\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 345,
+                "description": "
Creates an <a></a> element in the DOM for including a hyperlink.\nAppends to the container node if one is specified, otherwise\nappends to body.
\n",
+                "itemtype": "method",
+                "name": "createA",
+                "params": [
+                    {
+                        "name": "href",
+                        "description": "
url of page to link to
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "html",
+                        "description": "
inner html of link element to display
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "target",
+                        "description": "
target where new link should open,\n                            could be _blank, _self, _parent, _top.
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\ncreateA('http://p5js.org/', 'this is a link');\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 370,
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 372,
+                "description": "
Creates a slider <input></input> element in the DOM.\nUse .size() to set the display length of the slider.\nAppends to the container node if one is specified, otherwise\nappends to body.
\n",
+                "itemtype": "method",
+                "name": "createSlider",
+                "params": [
+                    {
+                        "name": "min",
+                        "description": "
minimum value of the slider
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "max",
+                        "description": "
maximum value of the slider
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
default value of the slider
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "step",
+                        "description": "
step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar slider;\nfunction setup() {\n  slider = createSlider(0, 255, 100);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  var val = slider.value();\n  background(val);\n}\n
\n\n
\nvar slider;\nfunction setup() {\n  colorMode(HSB);\n  slider = createSlider(0, 360, 60, 40);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  var val = slider.value();\n  background(val, 100, 100, 1);\n}\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 429,
+                "description": "
Creates a <button></button> element in the DOM.\nUse .size() to set the display size of the button.\nUse .mousePressed() to specify behavior on press.\nAppends to the container node if one is specified, otherwise\nappends to body.
\n",
+                "itemtype": "method",
+                "name": "createButton",
+                "params": [
+                    {
+                        "name": "label",
+                        "description": "
label displayed on the button
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
value of the button
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar button;\nfunction setup() {\n  createCanvas(100, 100);\n  background(0);\n  button = createButton('click me');\n  button.position(19, 19);\n  button.mousePressed(changeBG);\n}\n\nfunction changeBG() {\n  var val = random(255);\n  background(val);\n}\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 465,
+                "description": "
Creates a checkbox <input></input> element in the DOM.\nCalling .checked() on a checkbox returns if it is checked or not
\n",
+                "itemtype": "method",
+                "name": "createCheckbox",
+                "params": [
+                    {
+                        "name": "label",
+                        "description": "
label displayed after checkbox
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "value",
+                        "description": "
value of the checkbox; checked is true, unchecked is false
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar checkbox;\n\nfunction setup() {\n  checkbox = createCheckbox('label', false);\n  checkbox.changed(myCheckedEvent);\n}\n\nfunction myCheckedEvent() {\n  if (this.checked()) {\n    console.log('Checking!');\n  } else {\n    console.log('Unchecking!');\n  }\n}\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 533,
+                "description": "
Creates a dropdown menu <select></select> element in the DOM.\nIt also helps to assign select-box methods to p5.Element when selecting existing select box
\n",
+                "itemtype": "method",
+                "name": "createSelect",
+                "return": {
+                    "description": "",
+                    "type": "p5.Element"
+                },
+                "example": [
+                    "\n
\nvar sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  var item = sel.value();\n  background(200);\n  text('it is a' + item + '!', 50, 50);\n}\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom",
+                "overloads": [
+                    {
+                        "line": 533,
+                        "params": [
+                            {
+                                "name": "multiple",
+                                "description": "
true if dropdown should support multiple selections
\n",
+                                "type": "Boolean",
+                                "optional": true
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "p5.Element"
+                        }
+                    },
+                    {
+                        "line": 561,
+                        "params": [
+                            {
+                                "name": "existing",
+                                "description": "
DOM select element
\n",
+                                "type": "Object"
+                            }
+                        ],
+                        "return": {
+                            "description": "",
+                            "type": "p5.Element"
+                        }
+                    }
+                ]
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 637,
+                "description": "
Creates a radio button <input></input> element in the DOM.\nThe .option() method can be used to set options for the radio after it is\ncreated. The .value() method will return the currently selected option.
\n",
+                "itemtype": "method",
+                "name": "createRadio",
+                "params": [
+                    {
+                        "name": "divId",
+                        "description": "
the id and name of the created div and input field respectively
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('black');\n  radio.option('white');\n  radio.option('gray');\n  radio.style('width', '60px');\n  textAlign(CENTER);\n  fill(255, 0, 0);\n}\n\nfunction draw() {\n  var val = radio.value();\n  background(val);\n  text(val, width / 2, height / 2);\n}\n
\n
\nvar radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('apple', 1);\n  radio.option('bread', 2);\n  radio.option('juice', 3);\n  radio.style('width', '60px');\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  var val = radio.value();\n  if (val) {\n    text('item cost is $' + val, width / 2, height / 2);\n  }\n}\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 775,
+                "description": "
Creates an <input></input> element in the DOM for text input.\nUse .size() to set the display length of the box.\nAppends to the container node if one is specified, otherwise\nappends to body.
\n",
+                "itemtype": "method",
+                "name": "createInput",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
default value of the input box
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "type",
+                        "description": "
type of text, ie text, password etc. Defaults to text
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var inp = createInput('');\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 805,
+                "description": "
Creates an <input></input> element in the DOM of type 'file'.\nThis allows users to select local files for use in a sketch.
\n",
+                "itemtype": "method",
+                "name": "createFileInput",
+                "params": [
+                    {
+                        "name": "callback",
+                        "description": "
callback function for when a file loaded
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "multiple",
+                        "description": "
optional to allow multiple files selected
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created DOM element",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\nvar input;\nvar img;\n\nfunction setup() {\n  input = createFileInput(handleFile);\n  input.position(0, 0);\n}\n\nfunction draw() {\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction handleFile(file) {\n  print(file);\n  if (file.type === 'image') {\n    img = createImg(file.data);\n    img.hide();\n  }\n}"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 891,
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 928,
+                "description": "
Creates an HTML5 <video> element in the DOM for simple playback\nof audio/video. Shown by default, can be hidden with .hide()\nand drawn into canvas using video(). Appends to the container\nnode if one is specified, otherwise appends to body. The first parameter\ncan be either a single string path to a video file, or an array of string\npaths to different formats of the same video. This is useful for ensuring\nthat your video can play across different browsers, as each supports\ndifferent formats. See this\npage for further information about supported formats.
\n",
+                "itemtype": "method",
+                "name": "createVideo",
+                "params": [
+                    {
+                        "name": "src",
+                        "description": "
path to a video file, or array of paths for\n                            supporting different browsers
\n",
+                        "type": "String|Array"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to video p5.Element",
+                    "type": "p5.MediaElement|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar vid;\nfunction setup() {\n  vid = createVideo(['small.mp4', 'small.ogv', 'small.webm'], vidLoad);\n}\n\n// This function is called when the video loads\nfunction vidLoad() {\n  vid.play();\n}\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 967,
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 969,
+                "description": "
Creates a hidden HTML5 <audio> element in the DOM for simple audio\nplayback. Appends to the container node if one is specified,\notherwise appends to body. The first parameter\ncan be either a single string path to a audio file, or an array of string\npaths to different formats of the same audio. This is useful for ensuring\nthat your audio can play across different browsers, as each supports\ndifferent formats. See this\npage for further information about supported formats.
\n",
+                "itemtype": "method",
+                "name": "createAudio",
+                "params": [
+                    {
+                        "name": "src",
+                        "description": "
path to an audio file, or array of paths\n                            for supporting different browsers
\n",
+                        "type": "String|String[]",
+                        "optional": true
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to audio p5.Element  /**",
+                    "type": "p5.MediaElement|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar ele;\nfunction setup() {\n  ele = createAudio('assets/beat.mp3');\n\n  // here we set the element to autoplay\n  // The element will play as soon\n  // as it is able to do so.\n  ele.autoplay(true);\n}\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1007,
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1042,
+                "description": "
Creates a new <video> element that contains the audio/video feed\nfrom a webcam. This can be drawn onto the canvas using video().
\n
More specific properties of the feed can be passing in a Constraints object.\nSee the\n W3C\nspec for possible properties. Note that not all of these are supported\nby all browsers.
\n
Security note: A new browser security specification requires that getUserMedia,\nwhich is behind createCapture(), only works when you're running the code locally,\nor on HTTPS. Learn more here\nand here.
",
+                "itemtype": "method",
+                "name": "createCapture",
+                "params": [
+                    {
+                        "name": "type",
+                        "description": "
type of capture, either VIDEO or\n                                  AUDIO if none specified, default both,\n                                  or a Constraints object
\n",
+                        "type": "String|Constant|Object"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to be called once\n                                  stream has loaded
\n",
+                        "type": "Function"
+                    }
+                ],
+                "return": {
+                    "description": "capture video p5.Element",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar capture;\n\nfunction setup() {\n  createCanvas(480, 120);\n  capture = createCapture(VIDEO);\n}\n\nfunction draw() {\n  image(capture, 0, 0, width, width * capture.height / capture.width);\n  filter(INVERT);\n}\n
\n
\nfunction setup() {\n  createCanvas(480, 120);\n  var constraints = {\n    video: {\n      mandatory: {\n        minWidth: 1280,\n        minHeight: 720\n      },\n      optional: [{ maxFrameRate: 10 }]\n    },\n    audio: true\n  };\n  createCapture(constraints, function(stream) {\n    console.log(stream);\n  });\n}\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1158,
+                "description": "
Creates element with given tag in the DOM with given content.\nAppends to the container node if one is specified, otherwise\nappends to body.
\n",
+                "itemtype": "method",
+                "name": "createElement",
+                "params": [
+                    {
+                        "name": "tag",
+                        "description": "
tag for the new element
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "content",
+                        "description": "
html content to be inserted into the element
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element holding created node",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\ncreateElement('h2', 'im an h2 p5.element!');\n
"
+                ],
+                "class": "p5.dom",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1184,
+                "description": "
Adds specified class to the element.
\n",
+                "itemtype": "method",
+                "name": "addClass",
+                "params": [
+                    {
+                        "name": "class",
+                        "description": "
name of class to add
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n 
\n var div = createDiv('div');\n div.addClass('myClass');\n 
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1211,
+                "description": "
Removes specified class from the element.
\n",
+                "itemtype": "method",
+                "name": "removeClass",
+                "params": [
+                    {
+                        "name": "class",
+                        "description": "
name of class to remove
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "* @example\n 
\n // In this example, a class is set when the div is created\n // and removed when mouse is pressed. This could link up\n // with a CSS style rule to toggle style properties.\nvar div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('myClass');\n }\nfunction mousePressed() {\n   div.removeClass('myClass');\n }\n 
",
+                    "type": "Object|p5.Element"
+                },
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1242,
+                "description": "
Attaches the element  as a child to the parent specified.\n Accepts either a string ID, DOM node, or p5.Element.\n If no argument is specified, an array of children DOM nodes is returned.
\n",
+                "itemtype": "method",
+                "name": "child",
+                "params": [
+                    {
+                        "name": "child",
+                        "description": "
the ID, DOM node, or p5.Element\n                         to add to the current element
\n",
+                        "type": "String|Object|p5.Element",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "p5.Element"
+                },
+                "example": [
+                    "\n 
\n var div0 = createDiv('this is the parent');\n var div1 = createDiv('this is the child');\n div0.child(div1); // use p5.Element\n 
\n 
\n var div0 = createDiv('this is the parent');\n var div1 = createDiv('this is the child');\n div1.id('apples');\n div0.child('apples'); // use id\n 
\n 
\n var div0 = createDiv('this is the parent');\n var elt = document.getElementById('myChildDiv');\n div0.child(elt); // use element from page\n 
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1286,
+                "description": "
Centers a p5 Element either vertically, horizontally,\nor both, relative to its parent or according to\nthe body if the Element has no parent. If no argument is passed\nthe Element is aligned both vertically and horizontally.
\n",
+                "itemtype": "method",
+                "name": "center",
+                "params": [
+                    {
+                        "name": "align",
+                        "description": "
passing 'vertical', 'horizontal' aligns element accordingly
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "pointer to p5.Element",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var div = createDiv('').size(10, 10);\n  div.style('background-color', 'orange');\n  div.center();\n}\n
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1339,
+                "description": "
If an argument is given, sets the inner HTML of the element,\n replacing any existing html. If true is included as a second\n argument, html is appended instead of replacing existing html.\n If no arguments are given, returns\n the inner HTML of the element.
\n",
+                "itemtype": "method",
+                "name": "html",
+                "params": [
+                    {
+                        "name": "html",
+                        "description": "
the HTML to be placed inside the element
\n",
+                        "type": "String",
+                        "optional": true
+                    },
+                    {
+                        "name": "append",
+                        "description": "
whether to append HTML to existing
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element|String"
+                },
+                "example": [
+                    "\n 
\n var div = createDiv('').size(100, 100);\n div.html('hi');\n 
\n 
\n var div = createDiv('Hello ').size(100, 100);\n div.html('World', true);\n 
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1374,
+                "description": "
Sets the position of the element relative to (0, 0) of the\n window. Essentially, sets position:absolute and left and top\n properties of style. If no arguments given returns the x and y position\n of the element in an object.
\n",
+                "itemtype": "method",
+                "name": "position",
+                "params": [
+                    {
+                        "name": "x",
+                        "description": "
x-position relative to upper left of window
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "y",
+                        "description": "
y-position relative to upper left of window
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n 
\n function setup() {\n   var cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(50, 100);\n }\n 
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1464,
+                "description": "
Sets the given style (css) property (1st arg) of the element with the\ngiven value (2nd arg). If a single argument is given, .style()\nreturns the value of the given property; however, if the single argument\nis given in css syntax ('text-align:center'), .style() sets the css\nappropriatly. .style() also handles 2d and 3d css transforms. If\nthe 1st arg is 'rotate', 'translate', or 'position', the following arguments\naccept Numbers as values. ('translate', 10, 100, 50);
\n",
+                "itemtype": "method",
+                "name": "style",
+                "params": [
+                    {
+                        "name": "property",
+                        "description": "
property to be set
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
value to assign to property (only String|Number for rotate/translate)
\n",
+                        "type": "String|Number|p5.Color",
+                        "optional": true
+                    },
+                    {
+                        "name": "value2",
+                        "description": "
position can take a 2nd value
\n",
+                        "type": "String|Number|p5.Color",
+                        "optional": true
+                    },
+                    {
+                        "name": "value3",
+                        "description": "
translate can take a 2nd & 3rd value
\n",
+                        "type": "String|Number|p5.Color",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "value of property, if no value is specified\nor p5.Element",
+                    "type": "String|Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\n
\n
\nvar col = color(25, 23, 200, 50);\nvar button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(10, 10);\n
\n
\nvar myDiv = createDiv('I like lizards.');\nmyDiv.style('position', 20, 20);\nmyDiv.style('rotate', 45);\n
\n
\nvar myDiv;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(20, 20);\n}\n\nfunction draw() {\n  myDiv.style('font-size', mouseX + 'px');\n}\n
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1561,
+                "description": "
Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.
\n",
+                "itemtype": "method",
+                "name": "attribute",
+                "params": [
+                    {
+                        "name": "attr",
+                        "description": "
attribute to set
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
value to assign to attribute
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "value of attribute, if no value is\n                             specified or p5.Element",
+                    "type": "String|Object|p5.Element"
+                },
+                "example": [
+                    "\n 
\n var myDiv = createDiv('I like pandas.');\n myDiv.attribute('align', 'center');\n 
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1601,
+                "description": "
Removes an attribute on the specified element.
\n",
+                "itemtype": "method",
+                "name": "removeAttribute",
+                "params": [
+                    {
+                        "name": "attr",
+                        "description": "
attribute to remove
\n",
+                        "type": "String"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n 
\n var button;\n var checkbox;\nfunction setup() {\n   checkbox = createCheckbox('enable', true);\n   checkbox.changed(enableButton);\n   button = createButton('button');\n   button.position(10, 10);\n }\nfunction enableButton() {\n   if (this.checked()) {\n     // Re-enable the button\n     button.removeAttribute('disabled');\n   } else {\n     // Disable the button\n     button.attribute('disabled', '');\n   }\n }\n 
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1646,
+                "description": "
Either returns the value of the element if no arguments\ngiven, or sets the value of the element.
\n",
+                "itemtype": "method",
+                "name": "value",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "",
+                        "type": "String|Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "value of element if no value is specified or p5.Element",
+                    "type": "String|Object|p5.Element"
+                },
+                "example": [
+                    "\n
\n// gets the value\nvar inp;\nfunction setup() {\n  inp = createInput('');\n}\n\nfunction mousePressed() {\n  print(inp.value());\n}\n
\n
\n// sets the value\nvar inp;\nfunction setup() {\n  inp = createInput('myValue');\n}\n\nfunction mousePressed() {\n  inp.value('myValue');\n}\n
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1688,
+                "description": "
Shows the current element. Essentially, setting display:block for the style.
\n",
+                "itemtype": "method",
+                "name": "show",
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n 
\n var div = createDiv('div');\n div.style('display', 'none');\n div.show(); // turns display to block\n 
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1706,
+                "description": "
Hides the current element. Essentially, setting display:none for the style.
\n",
+                "itemtype": "method",
+                "name": "hide",
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar div = createDiv('this is a div');\ndiv.hide();\n
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1722,
+                "description": "
Sets the width and height of the element. AUTO can be used to\n only adjust one dimension. If no arguments given returns the width and height\n of the element in an object.
\n",
+                "itemtype": "method",
+                "name": "size",
+                "params": [
+                    {
+                        "name": "w",
+                        "description": "
width of the element, either AUTO, or a number
\n",
+                        "type": "Number|Constant",
+                        "optional": true
+                    },
+                    {
+                        "name": "h",
+                        "description": "
height of the element, either AUTO, or a number
\n",
+                        "type": "Number|Constant",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n 
\n var div = createDiv('this is a div');\n div.size(100, 100);\n 
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1796,
+                "description": "
Removes the element and deregisters all listeners.
\n",
+                "itemtype": "method",
+                "name": "remove",
+                "example": [
+                    "\n
\nvar myDiv = createDiv('this is some text');\nmyDiv.remove();\n
"
+                ],
+                "class": "p5.Element",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1842,
+                "description": "
Path to the media element source.
\n",
+                "itemtype": "property",
+                "name": "src",
+                "return": {
+                    "description": "src",
+                    "type": "String"
+                },
+                "example": [
+                    "\n
\nvar ele;\n\nfunction setup() {\n  background(250);\n\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  //We'll set up our example so that\n  //when you click on the text,\n  //an alert box displays the MediaElement's\n  //src field.\n  textAlign(CENTER);\n  text('Click Me!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Show our p5.MediaElement's src field\n    alert(ele.src);\n  }\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1908,
+                "description": "
Play an HTML5 media element.
\n",
+                "itemtype": "method",
+                "name": "play",
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\nvar ele;\n\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Here we call the play() function on\n    //the p5.MediaElement we created above.\n    //This will start the audio sample.\n    ele.play();\n\n    background(200);\n    text('You clicked Play!', width / 2, height / 2);\n  }\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 1961,
+                "description": "
Stops an HTML5 media element (sets current time to zero).
\n",
+                "itemtype": "method",
+                "name": "stop",
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\n//This example both starts\n//and stops a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nvar ele;\n\n//while our audio is playing,\n//this will be set to true\nvar sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //if the sample is currently playing\n      //calling the stop() function on\n      //our p5.MediaElement will stop\n      //it and reset its current\n      //time to 0 (i.e. it will start\n      //at the beginning the next time\n      //you play it)\n      ele.stop();\n\n      sampleIsPlaying = false;\n      text('Click to play!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to stop!', width / 2, height / 2);\n    }\n  }\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2025,
+                "description": "
Pauses an HTML5 media element.
\n",
+                "itemtype": "method",
+                "name": "pause",
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\n//This example both starts\n//and pauses a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nvar ele;\n\n//while our audio is playing,\n//this will be set to true\nvar sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //Calling pause() on our\n      //p5.MediaElement will stop it\n      //playing, but when we call the\n      //loop() or play() functions\n      //the sample will start from\n      //where we paused it.\n      ele.pause();\n\n      sampleIsPlaying = false;\n      text('Click to resume!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.pause() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to pause!', width / 2, height / 2);\n    }\n  }\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2087,
+                "description": "
Set 'loop' to true for an HTML5 media element, and starts playing.
\n",
+                "itemtype": "method",
+                "name": "loop",
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nvar ele;\n\n//while our audio is playing,\n//this will be set to true\nvar sampleIsLooping = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to loop!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (!sampleIsLooping) {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsLooping = true;\n      text('Click to stop!', width / 2, height / 2);\n    } else {\n      ele.stop();\n\n      sampleIsLooping = false;\n      text('Click to loop!', width / 2, height / 2);\n    }\n  }\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2143,
+                "description": "
Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.
\n",
+                "itemtype": "method",
+                "name": "noLoop",
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "example": [
+                    "\n
\n//This example both starts\n//and stops loop of sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nvar ele;\n//while our audio is playing,\n//this will be set to true\nvar sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      ele.noLoop();\n      text('No more Loops!', width / 2, height / 2);\n    } else {\n      ele.loop();\n      sampleIsPlaying = true;\n      text('Click to stop looping!', width / 2, height / 2);\n    }\n  }\n}\n
\n"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2195,
+                "description": "
Set HTML5 media element to autoplay or not.
\n",
+                "itemtype": "method",
+                "name": "autoplay",
+                "params": [
+                    {
+                        "name": "autoplay",
+                        "description": "
whether the element should autoplay
\n",
+                        "type": "Boolean"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.Element"
+                },
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2207,
+                "description": "
Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.
\n",
+                "params": [
+                    {
+                        "name": "val",
+                        "description": "
volume between 0.0 and 1.0
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "current volume or p5.MediaElement",
+                    "type": "Number|p5.MediaElement"
+                },
+                "itemtype": "method",
+                "name": "volume",
+                "example": [
+                    "\n
\nvar ele;\nfunction setup() {\n  // p5.MediaElement objects are usually created\n  // by calling the createAudio(), createVideo(),\n  // and createCapture() functions.\n  // In this example we create\n  // a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\nfunction mouseClicked() {\n  // Here we call the volume() function\n  // on the sound element to set its volume\n  // Volume must be between 0.0 and 1.0\n  ele.volume(0.2);\n  ele.play();\n  background(200);\n  text('You clicked Play!', width / 2, height / 2);\n}\n
\n
\nvar audio;\nvar counter = 0;\n\nfunction loaded() {\n  audio.play();\n}\n\nfunction setup() {\n  audio = createAudio('assets/lucky_dragons.mp3', loaded);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  if (counter === 0) {\n    background(0, 255, 0);\n    text('volume(0.9)', width / 2, height / 2);\n  } else if (counter === 1) {\n    background(255, 255, 0);\n    text('volume(0.5)', width / 2, height / 2);\n  } else if (counter === 2) {\n    background(255, 0, 0);\n    text('volume(0.1)', width / 2, height / 2);\n  }\n}\n\nfunction mousePressed() {\n  counter++;\n  if (counter === 0) {\n    audio.volume(0.9);\n  } else if (counter === 1) {\n    audio.volume(0.5);\n  } else if (counter === 2) {\n    audio.volume(0.1);\n  } else {\n    counter = 0;\n    audio.volume(0.9);\n  }\n}\n\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2289,
+                "description": "
If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)
\n",
+                "itemtype": "method",
+                "name": "speed",
+                "params": [
+                    {
+                        "name": "speed",
+                        "description": "
speed multiplier for element playback
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "current playback speed or p5.MediaElement",
+                    "type": "Number|Object|p5.MediaElement"
+                },
+                "example": [
+                    "\n
\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nvar ele;\nvar button;\n\nfunction setup() {\n  createCanvas(710, 400);\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  ele.loop();\n  background(200);\n\n  button = createButton('2x speed');\n  button.position(100, 68);\n  button.mousePressed(twice_speed);\n\n  button = createButton('half speed');\n  button.position(200, 68);\n  button.mousePressed(half_speed);\n\n  button = createButton('reverse play');\n  button.position(300, 68);\n  button.mousePressed(reverse_speed);\n\n  button = createButton('STOP');\n  button.position(400, 68);\n  button.mousePressed(stop_song);\n\n  button = createButton('PLAY!');\n  button.position(500, 68);\n  button.mousePressed(play_speed);\n}\n\nfunction twice_speed() {\n  ele.speed(2);\n}\n\nfunction half_speed() {\n  ele.speed(0.5);\n}\n\nfunction reverse_speed() {\n  ele.speed(-1);\n}\n\nfunction stop_song() {\n  ele.stop();\n}\n\nfunction play_speed() {\n  ele.play();\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2368,
+                "description": "
If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.
\n",
+                "itemtype": "method",
+                "name": "time",
+                "params": [
+                    {
+                        "name": "time",
+                        "description": "
time to jump to (in seconds)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "current time (in seconds)\n                                or p5.MediaElement",
+                    "type": "Number|Object|p5.MediaElement"
+                },
+                "example": [
+                    "\n
\nvar ele;\nvar beginning = true;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('start at beginning', width / 2, height / 2);\n}\n\n// this function fires with click anywhere\nfunction mousePressed() {\n  if (beginning === true) {\n    // here we start the sound at the beginning\n    // time(0) is not necessary here\n    // as this produces the same result as\n    // play()\n    ele.play().time(0);\n    background(200);\n    text('jump 2 sec in', width / 2, height / 2);\n    beginning = false;\n  } else {\n    // here we jump 2 seconds into the sound\n    ele.play().time(2);\n    background(250);\n    text('start at beginning', width / 2, height / 2);\n    beginning = true;\n  }\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2423,
+                "description": "
Returns the duration of the HTML5 media element.
\n",
+                "itemtype": "method",
+                "name": "duration",
+                "return": {
+                    "description": "duration",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nvar ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/doorbell.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to know the duration!', 10, 25, 70, 80);\n}\nfunction mouseClicked() {\n  ele.play();\n  background(200);\n  //ele.duration dislpays the duration\n  text(ele.duration() + ' seconds', width / 2, height / 2);\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2541,
+                "description": "
Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.
\n",
+                "itemtype": "method",
+                "name": "onended",
+                "params": [
+                    {
+                        "name": "callback",
+                        "description": "
function to call when the\n                            soundfile has ended. The\n                            media element will be passed\n                            in as the argument to the\n                            callback.
\n",
+                        "type": "Function"
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "Object|p5.MediaElement"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  var audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  audioEl.onended(sayDone);\n}\n\nfunction sayDone(elt) {\n  alert('done playing ' + elt.src);\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2572,
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2574,
+                "description": "
Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's master\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.
\n
This method is meant to be used with the p5.sound.js addon library.
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "audioNode",
+                        "description": "
AudioNode from the Web Audio API,\nor an object from the p5.sound library
\n",
+                        "type": "AudioNode|Object"
+                    }
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2623,
+                "description": "
Disconnect all Web Audio routing, including to master output.\nThis is useful if you want to re-route the output through\naudio effects, for example.
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2638,
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2640,
+                "description": "
Show the default MediaElement controls, as determined by the web browser.
\n",
+                "itemtype": "method",
+                "name": "showControls",
+                "example": [
+                    "\n
\nvar ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to Show Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.showControls();\n  background(200);\n  text('Controls Shown', width / 2, height / 2);\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2671,
+                "description": "
Hide the default mediaElement controls.
\n",
+                "itemtype": "method",
+                "name": "hideControls",
+                "example": [
+                    "\n
\nvar ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  ele.showControls();\n  background(200);\n  textAlign(CENTER);\n  text('Click to hide Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.hideControls();\n  background(200);\n  text('Controls hidden', width / 2, height / 2);\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2700,
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2711,
+                "description": "
Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.
\n
Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.
\n
Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.
\n",
+                "itemtype": "method",
+                "name": "addCue",
+                "params": [
+                    {
+                        "name": "time",
+                        "description": "
Time in seconds, relative to this media\n                            element's playback. For example, to trigger\n                            an event every time playback reaches two\n                            seconds, pass in the number 2. This will be\n                            passed as the first parameter to\n                            the callback function.
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
Name of a function that will be\n                            called at the given time. The callback will\n                            receive time and (optionally) param as its\n                            two parameters.
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
An object to be passed as the\n                            second parameter to the\n                            callback function.
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "id ID of this cue,\n                    useful for removeCue(id)",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  background(255, 255, 255);\n\n  var audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n\n  // schedule three calls to changeBackground\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\n}\n\nfunction changeBackground(val) {\n  background(val);\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2773,
+                "description": "
Remove a callback based on its ID. The ID is returned by the\naddCue method.
\n",
+                "itemtype": "method",
+                "name": "removeCue",
+                "params": [
+                    {
+                        "name": "id",
+                        "description": "
ID of the cue, as returned by addCue
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar audioEl, id1, id2;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  // schedule five calls to changeBackground\n  id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  text('Click to remove first and last Cue!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  audioEl.removeCue(id1);\n  audioEl.removeCue(id2);\n}\nfunction changeBackground(val) {\n  background(val);\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2815,
+                "description": "
Remove all of the callbacks that had originally been scheduled\nvia the addCue method.
\n",
+                "itemtype": "method",
+                "name": "clearCues",
+                "params": [
+                    {
+                        "name": "id",
+                        "description": "
ID of the cue, as returned by addCue
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar audioEl;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  //Show the default MediaElement controls, as determined by the web browser\n  audioEl.showControls();\n  // schedule calls to changeBackground\n  background(200);\n  text('Click to change Cue!', 10, 25, 70, 80);\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n}\nfunction mousePressed() {\n  // here we clear the scheduled callbacks\n  audioEl.clearCues();\n  // then we add some more callbacks\n  audioEl.addCue(1, changeBackground, color(2, 2, 2));\n  audioEl.addCue(3, changeBackground, color(255, 255, 0));\n}\nfunction changeBackground(val) {\n  background(val);\n}\n
"
+                ],
+                "class": "p5.MediaElement",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2885,
+                "description": "
Underlying File object. All normal File methods can be called on this.
\n",
+                "itemtype": "property",
+                "name": "file",
+                "class": "p5.File",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2897,
+                "description": "
File type (image, text, etc.)
\n",
+                "itemtype": "property",
+                "name": "type",
+                "class": "p5.File",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2903,
+                "description": "
File subtype (usually the file extension jpg, png, xml, etc.)
\n",
+                "itemtype": "property",
+                "name": "subtype",
+                "class": "p5.File",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2909,
+                "description": "
File name
\n",
+                "itemtype": "property",
+                "name": "name",
+                "class": "p5.File",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2915,
+                "description": "
File size
\n",
+                "itemtype": "property",
+                "name": "size",
+                "class": "p5.File",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.dom.js",
+                "line": 2922,
+                "description": "
URL string containing image data.
\n",
+                "itemtype": "property",
+                "name": "data",
+                "class": "p5.File",
+                "module": "p5.dom",
+                "submodule": "p5.dom"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 46,
+                "description": "
p5.sound\nhttps://p5js.org/reference/#/libraries/p5.sound
\n
From the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors
\n
MIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE
\n
Some of the many audio libraries & resources that inspire p5.sound:
\n\n",
+                "class": "p5.sound",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 212,
+                "description": "
Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the Web Audio API\n.
",
+                "itemtype": "method",
+                "name": "getAudioContext",
+                "return": {
+                    "description": "AudioContext for this sketch",
+                    "type": "Object"
+                },
+                "class": "p5.sound",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 226,
+                "description": "
Determine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats
\n",
+                "class": "p5.sound",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 296,
+                "description": "
Master contains AudioContext and the master sound output.
\n",
+                "class": "p5.sound",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 329,
+                "description": "
Returns a number representing the master amplitude (volume) for sound\nin this sketch.
\n",
+                "itemtype": "method",
+                "name": "getMasterVolume",
+                "return": {
+                    "description": "Master amplitude (volume) for sound in this sketch.\n                 Should be between 0.0 (silence) and 1.0.",
+                    "type": "Number"
+                },
+                "class": "p5.sound",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 340,
+                "description": "
Scale the output of all sound in this sketch
\nScaled between 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a rampTime parameter. For more\ncomplex fades, see the Env class.\n\nAlternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.\n\n
How This Works: When you load the p5.sound module, it\ncreates a single instance of p5sound. All sound objects in this\nmodule output to p5sound before reaching your computer's output.\nSo if you change the amplitude of p5sound, it impacts all of the\nsound in this module.
\n\n
If no value is provided, returns a Web Audio API Gain Node
",
+                "itemtype": "method",
+                "name": "masterVolume",
+                "params": [
+                    {
+                        "name": "volume",
+                        "description": "
Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator
\n",
+                        "type": "Number|Object"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
Fade for t seconds
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
Schedule this event to happen at\n                               t seconds in the future
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.sound",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 382,
+                "description": "
p5.soundOut is the p5.sound master output. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (.limiter),\nand Gain Nodes for .input and .output.
\n",
+                "itemtype": "property",
+                "name": "soundOut",
+                "type": "Object",
+                "class": "p5.sound",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 407,
+                "class": "p5",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 410,
+                "description": "
Returns a number representing the sample rate, in samples per second,\nof all sound objects in this audio context. It is determined by the\nsampling rate of your operating system's sound card, and it is not\ncurrently possile to change.\nIt is often 44100, or twice the range of human hearing.
\n",
+                "itemtype": "method",
+                "name": "sampleRate",
+                "return": {
+                    "description": "samplerate samples per second",
+                    "type": "Number"
+                },
+                "class": "p5",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 423,
+                "description": "
Returns the closest MIDI note value for\na given frequency.
\n",
+                "itemtype": "method",
+                "name": "freqToMidi",
+                "params": [
+                    {
+                        "name": "frequency",
+                        "description": "
A freqeuncy, for example, the "A"\n                           above Middle C is 440Hz
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "MIDI note value",
+                    "type": "Number"
+                },
+                "class": "p5",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 437,
+                "description": "
Returns the frequency value of a MIDI note value.\nGeneral MIDI treats notes as integers where middle C\nis 60, C# is 61, D is 62 etc. Useful for generating\nmusical frequencies with oscillators.
\n",
+                "itemtype": "method",
+                "name": "midiToFreq",
+                "params": [
+                    {
+                        "name": "midiNote",
+                        "description": "
The number of a MIDI note
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Frequency value of the given MIDI note",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nvar notes = [60, 64, 67, 72];\nvar i = 0;\n\nfunction setup() {\n  osc = new p5.Oscillator('Triangle');\n  osc.start();\n  frameRate(1);\n}\n\nfunction draw() {\n  var freq = midiToFreq(notes[i]);\n  osc.freq(freq);\n  i++;\n  if (i >= notes.length){\n    i = 0;\n  }\n}\n
"
+                ],
+                "class": "p5",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 470,
+                "description": "
List the SoundFile formats that you will include. LoadSound\nwill search your directory for these extensions, and will pick\na format that is compatable with the client's web browser.\nHere is a free online file\nconverter.
\n",
+                "itemtype": "method",
+                "name": "soundFormats",
+                "params": [
+                    {
+                        "name": "formats",
+                        "description": "
i.e. 'mp3', 'wav', 'ogg'
\n",
+                        "type": "String",
+                        "optional": true,
+                        "multiple": true
+                    }
+                ],
+                "example": [
+                    "\n
\nfunction preload() {\n  // set the global sound formats\n  soundFormats('mp3', 'ogg');\n\n  // load either beatbox.mp3, or .ogg, depending on browser\n  mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n  mySound.play();\n}\n
"
+                ],
+                "class": "p5",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 583,
+                "description": "
Used by Osc and Env to chain signal math
\n",
+                "class": "p5",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 855,
+                "description": "
loadSound() returns a new p5.SoundFile from a specified\npath. If called during preload(), the p5.SoundFile will be ready\nto play in time for setup() and draw(). If called outside of\npreload, the p5.SoundFile will not be ready immediately, so\nloadSound accepts a callback as the second parameter. Using a\n\nlocal server is recommended when loading external files.
\n",
+                "itemtype": "method",
+                "name": "loadSound",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
Path to the sound file, or an array with\n                                  paths to soundfiles in multiple formats\n                                  i.e. ['sound.ogg', 'sound.mp3'].\n                                  Alternately, accepts an object: either\n                                  from the HTML5 File API, or a p5.File.
\n",
+                        "type": "String|Array"
+                    },
+                    {
+                        "name": "successCallback",
+                        "description": "
Name of a function to call once file loads
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
Name of a function to call if there is\n                                    an error loading the file.
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "whileLoading",
+                        "description": "
Name of a function to call while file is loading.\n                               This function will receive the percentage loaded\n                               so far, from 0.0 to 1.0.
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Returns a p5.SoundFile",
+                    "type": "SoundFile"
+                },
+                "example": [
+                    "\n
\nfunction preload() {\n mySound = loadSound('assets/doorbell.mp3');\n}\n\nfunction setup() {\n  mySound.setVolume(0.1);\n  mySound.play();\n}\n
"
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 995,
+                "description": "
Returns true if the sound file finished loading successfully.
\n",
+                "itemtype": "method",
+                "name": "isLoaded",
+                "return": {
+                    "description": "",
+                    "type": "Boolean"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1008,
+                "description": "
Play the p5.SoundFile
\n",
+                "itemtype": "method",
+                "name": "play",
+                "params": [
+                    {
+                        "name": "startTime",
+                        "description": "
(optional) schedule playback to start (in seconds from now).
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "rate",
+                        "description": "
(optional) playback rate
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "amp",
+                        "description": "
(optional) amplitude (volume)\n                                    of playback
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "cueStart",
+                        "description": "
(optional) cue start time in seconds
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "duration",
+                        "description": "
(optional) duration of playback in seconds
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1109,
+                "description": "
p5.SoundFile has two play modes: restart and\nsustain. Play Mode determines what happens to a\np5.SoundFile if it is triggered while in the middle of playback.\nIn sustain mode, playback will continue simultaneous to the\nnew playback. In restart mode, play() will stop playback\nand start over. With untilDone, a sound will play only if it's\nnot already playing. Sustain is the default mode.
\n",
+                "itemtype": "method",
+                "name": "playMode",
+                "params": [
+                    {
+                        "name": "str",
+                        "description": "
'restart' or 'sustain' or 'untilDone'
\n",
+                        "type": "String"
+                    }
+                ],
+                "example": [
+                    "\n
\nfunction setup(){\n  mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\nfunction mouseClicked() {\n  mySound.playMode('sustain');\n  mySound.play();\n}\nfunction keyPressed() {\n  mySound.playMode('restart');\n  mySound.play();\n}\n\n 
"
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1152,
+                "description": "
Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.
\n
After pausing, .play() will resume from the paused\nposition.\nIf p5.SoundFile had been set to loop before it was paused,\nit will continue to loop after it is unpaused with .play().
\n",
+                "itemtype": "method",
+                "name": "pause",
+                "params": [
+                    {
+                        "name": "startTime",
+                        "description": "
(optional) schedule event to occur\n                             seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar soundFile;\n\nfunction preload() {\n  soundFormats('ogg', 'mp3');\n  soundFile = loadSound('assets/Damscray_02.mp3');\n}\nfunction setup() {\n  background(0, 255, 0);\n  soundFile.setVolume(0.1);\n  soundFile.loop();\n}\nfunction keyTyped() {\n  if (key == 'p') {\n    soundFile.pause();\n    background(255, 0, 0);\n  }\n}\n\nfunction keyReleased() {\n  if (key == 'p') {\n    soundFile.play();\n    background(0, 255, 0);\n  }\n}\n\n
"
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1208,
+                "description": "
Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.
\n",
+                "itemtype": "method",
+                "name": "loop",
+                "params": [
+                    {
+                        "name": "startTime",
+                        "description": "
(optional) schedule event to occur\n                            seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "rate",
+                        "description": "
(optional) playback rate
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "amp",
+                        "description": "
(optional) playback volume
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "cueLoopStart",
+                        "description": "
(optional) startTime in seconds
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "duration",
+                        "description": "
(optional) loop duration in seconds
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1224,
+                "description": "
Set a p5.SoundFile's looping flag to true or false. If the sound\nis currently playing, this change will take effect when it\nreaches the end of the current playback.
\n",
+                "itemtype": "method",
+                "name": "setLoop",
+                "params": [
+                    {
+                        "name": "Boolean",
+                        "description": "
set looping to true or false
\n",
+                        "type": "Boolean"
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1245,
+                "description": "
Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.
\n",
+                "itemtype": "method",
+                "name": "isLooping",
+                "return": {
+                    "description": "",
+                    "type": "Boolean"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1260,
+                "description": "
Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).
\n",
+                "itemtype": "method",
+                "name": "isPlaying",
+                "return": {
+                    "description": "",
+                    "type": "Boolean"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1270,
+                "description": "
Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).
\n",
+                "itemtype": "method",
+                "name": "isPaused",
+                "return": {
+                    "description": "",
+                    "type": "Boolean"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1280,
+                "description": "
Stop soundfile playback.
\n",
+                "itemtype": "method",
+                "name": "stop",
+                "params": [
+                    {
+                        "name": "startTime",
+                        "description": "
(optional) schedule event to occur\n                            in seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1326,
+                "description": "
Multiply the output volume (amplitude) of a sound file\nbetween 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a rampTime parameter. For more\ncomplex fades, see the Env class.
\n
Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.
\n",
+                "itemtype": "method",
+                "name": "setVolume",
+                "params": [
+                    {
+                        "name": "volume",
+                        "description": "
Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator
\n",
+                        "type": "Number|Object"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
Fade for t seconds
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
Schedule this event to happen at\n                               t seconds in the future
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1367,
+                "description": "
Set the stereo panning of a p5.sound object to\na floating point number between -1.0 (left) and 1.0 (right).\nDefault is 0.0 (center).
\n",
+                "itemtype": "method",
+                "name": "pan",
+                "params": [
+                    {
+                        "name": "panValue",
+                        "description": "
Set the stereo panner
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                                seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\n\n var ball = {};\n var soundFile;\n\n function setup() {\n   soundFormats('ogg', 'mp3');\n   soundFile = loadSound('assets/beatbox.mp3');\n }\n\n function draw() {\n   background(0);\n   ball.x = constrain(mouseX, 0, width);\n   ellipse(ball.x, height/2, 20, 20)\n }\n\n function mousePressed(){\n   // map the ball's x location to a panning degree\n   // between -1.0 (left) and 1.0 (right)\n   var panning = map(ball.x, 0., width,-1.0, 1.0);\n   soundFile.pan(panning);\n   soundFile.play();\n }\n 
"
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1406,
+                "description": "
Returns the current stereo pan position (-1.0 to 1.0)
\n",
+                "itemtype": "method",
+                "name": "getPan",
+                "return": {
+                    "description": "Returns the stereo pan setting of the Oscillator\n                         as a number between -1.0 (left) and 1.0 (right).\n                         0.0 is center and default.",
+                    "type": "Number"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1417,
+                "description": "
Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.
\n",
+                "itemtype": "method",
+                "name": "rate",
+                "params": [
+                    {
+                        "name": "playbackRate",
+                        "description": "
Set the playback rate. 1.0 is normal,\n                                   .5 is half-speed, 2.0 is twice as fast.\n                                   Values less than zero play backwards.
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar song;\n\nfunction preload() {\n  song = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n  song.loop();\n}\n\nfunction draw() {\n  background(200);\n\n  // Set the rate to a range between 0.1 and 4\n  // Changing the rate also alters the pitch\n  var speed = map(mouseY, 0.1, height, 0, 2);\n  speed = constrain(speed, 0.01, 4);\n  song.rate(speed);\n\n  // Draw a circle to show what is going on\n  stroke(0);\n  fill(51, 100);\n  ellipse(mouseX, 100, 48, 48);\n}\n\n \n 
\n"
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1490,
+                "description": "
Returns the duration of a sound file in seconds.
\n",
+                "itemtype": "method",
+                "name": "duration",
+                "return": {
+                    "description": "The duration of the soundFile in seconds.",
+                    "type": "Number"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1504,
+                "description": "
Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if reverseBuffer\nhas been called, currentTime will count backwards.
\n",
+                "itemtype": "method",
+                "name": "currentTime",
+                "return": {
+                    "description": "currentTime of the soundFile in seconds.",
+                    "type": "Number"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1515,
+                "description": "
Move the playhead of the song to a position, in seconds. Start timing\nand playback duration. If none are given, will reset the file to play\nentire duration from start to finish.
\n",
+                "itemtype": "method",
+                "name": "jump",
+                "params": [
+                    {
+                        "name": "cueTime",
+                        "description": "
cueTime of the soundFile in seconds.
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "duration",
+                        "description": "
duration in seconds.
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1538,
+                "description": "
Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.
\n",
+                "itemtype": "method",
+                "name": "channels",
+                "return": {
+                    "description": "[channels]",
+                    "type": "Number"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1548,
+                "description": "
Return the sample rate of the sound file.
\n",
+                "itemtype": "method",
+                "name": "sampleRate",
+                "return": {
+                    "description": "[sampleRate]",
+                    "type": "Number"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1557,
+                "description": "
Return the number of samples in a sound file.\nEqual to sampleRate * duration.
\n",
+                "itemtype": "method",
+                "name": "frames",
+                "return": {
+                    "description": "[sampleCount]",
+                    "type": "Number"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1567,
+                "description": "
Returns an array of amplitude peaks in a p5.SoundFile that can be\nused to draw a static waveform. Scans through the p5.SoundFile's\naudio buffer to find the greatest amplitudes. Accepts one\nparameter, 'length', which determines size of the array.\nLarger arrays result in more precise waveform visualizations.
\n
Inspired by Wavesurfer.js.
\n",
+                "itemtype": "method",
+                "name": "getPeaks",
+                "params": [
+                    {
+                        "name": "length",
+                        "description": "
length is the size of the returned array.\n                         Larger length results in more precision.\n                         Defaults to 5*width of the browser window.
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Array of peaks.",
+                    "type": "Float32Array"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1619,
+                "description": "
Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).
\n",
+                "itemtype": "method",
+                "name": "reverseBuffer",
+                "example": [
+                    "\n
\nvar drum;\n\nfunction preload() {\n  drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n  drum.reverseBuffer();\n  drum.play();\n}\n\n \n 
"
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1659,
+                "description": "
Schedule an event to be called when the soundfile\nreaches the end of a buffer. If the soundfile is\nplaying through once, this will be called when it\nends. If it is looping, it will be called when\nstop is called.
\n",
+                "itemtype": "method",
+                "name": "onended",
+                "params": [
+                    {
+                        "name": "callback",
+                        "description": "
function to call when the\n                            soundfile has ended.
\n",
+                        "type": "Function"
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1712,
+                "description": "
Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe master output. Most p5sound objects connect to the master\noutput when they are created.
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "object",
+                        "description": "
Audio object that accepts an input
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1733,
+                "description": "
Disconnects the output of this p5sound object.
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1741,
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1746,
+                "description": "
Reset the source for this SoundFile to a\nnew path (URL).
\n",
+                "itemtype": "method",
+                "name": "setPath",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
path to audio file
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
Callback
\n",
+                        "type": "Function"
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1759,
+                "description": "
Replace the current Audio Buffer with a new Buffer.
\n",
+                "itemtype": "method",
+                "name": "setBuffer",
+                "params": [
+                    {
+                        "name": "buf",
+                        "description": "
Array of Float32 Array(s). 2 Float32 Arrays\n                   will create a stereo source. 1 will create\n                   a mono source.
\n",
+                        "type": "Array"
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 1831,
+                "description": "
processPeaks returns an array of timestamps where it thinks there is a beat.
\n
This is an asynchronous function that processes the soundfile in an offline audio context,\nand sends the results to your callback function.
\n
The process involves running the soundfile through a lowpass filter, and finding all of the\npeaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,\nit decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.
\n",
+                "itemtype": "method",
+                "name": "processPeaks",
+                "params": [
+                    {
+                        "name": "callback",
+                        "description": "
a function to call once this data is returned
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "initThreshold",
+                        "description": "
initial threshold defaults to 0.9
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "minThreshold",
+                        "description": "
minimum threshold defaults to 0.22
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "minPeaks",
+                        "description": "
minimum number of peaks defaults to 200
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Array of timestamped peaks",
+                    "type": "Array"
+                },
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2022,
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2031,
+                "description": "
Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.
\n
Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.
\n
Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.
\n",
+                "itemtype": "method",
+                "name": "addCue",
+                "params": [
+                    {
+                        "name": "time",
+                        "description": "
Time in seconds, relative to this media\n                           element's playback. For example, to trigger\n                           an event every time playback reaches two\n                           seconds, pass in the number 2. This will be\n                           passed as the first parameter to\n                           the callback function.
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
Name of a function that will be\n                           called at the given time. The callback will\n                           receive time and (optionally) param as its\n                           two parameters.
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "value",
+                        "description": "
An object to be passed as the\n                           second parameter to the\n                           callback function.
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "id ID of this cue,\n                    useful for removeCue(id)",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction setup() {\n  background(0);\n  noStroke();\n  fill(255);\n  textAlign(CENTER);\n  text('click to play', width/2, height/2);\n\n  mySound = loadSound('assets/beat.mp3');\n\n  // schedule calls to changeText\n  mySound.addCue(0.50, changeText, \"hello\" );\n  mySound.addCue(1.00, changeText, \"p5\" );\n  mySound.addCue(1.50, changeText, \"what\" );\n  mySound.addCue(2.00, changeText, \"do\" );\n  mySound.addCue(2.50, changeText, \"you\" );\n  mySound.addCue(3.00, changeText, \"want\" );\n  mySound.addCue(4.00, changeText, \"to\" );\n  mySound.addCue(5.00, changeText, \"make\" );\n  mySound.addCue(6.00, changeText, \"?\" );\n}\n\nfunction changeText(val) {\n  background(0);\n  text(val, width/2, height/2);\n}\n\nfunction mouseClicked() {\n  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n    if (mySound.isPlaying() ) {\n      mySound.stop();\n    } else {\n      mySound.play();\n    }\n  }\n}\n
"
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2106,
+                "description": "
Remove a callback based on its ID. The ID is returned by the\naddCue method.
\n",
+                "itemtype": "method",
+                "name": "removeCue",
+                "params": [
+                    {
+                        "name": "id",
+                        "description": "
ID of the cue, as returned by addCue
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2124,
+                "description": "
Remove all of the callbacks that had originally been scheduled\nvia the addCue method.
\n",
+                "itemtype": "method",
+                "name": "clearCues",
+                "class": "p5.SoundFile",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2232,
+                "description": "
Connects to the p5sound instance (master output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).
\n",
+                "itemtype": "method",
+                "name": "setInput",
+                "params": [
+                    {
+                        "name": "snd",
+                        "description": "
set the sound source\n                                     (optional, defaults to\n                                     master output)
\n",
+                        "type": "SoundObject|undefined",
+                        "optional": true
+                    },
+                    {
+                        "name": "smoothing",
+                        "description": "
a range between 0.0 and 1.0\n                                      to smooth amplitude readings
\n",
+                        "type": "Number|undefined",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nfunction preload(){\n  sound1 = loadSound('assets/beat.mp3');\n  sound2 = loadSound('assets/drum.mp3');\n}\nfunction setup(){\n  amplitude = new p5.Amplitude();\n  sound1.play();\n  sound2.play();\n  amplitude.setInput(sound2);\n}\nfunction draw() {\n  background(0);\n  fill(255);\n  var level = amplitude.getLevel();\n  var size = map(level, 0, 1, 0, 200);\n  ellipse(width/2, height/2, size, size);\n}\nfunction mouseClicked(){\n  sound1.stop();\n  sound2.stop();\n}\n
"
+                ],
+                "class": "p5.Amplitude",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2337,
+                "description": "
Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.
\n",
+                "itemtype": "method",
+                "name": "getLevel",
+                "params": [
+                    {
+                        "name": "channel",
+                        "description": "
Optionally return only channel 0 (left) or 1 (right)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Amplitude as a number between 0.0 and 1.0",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\nfunction preload(){\n  sound = loadSound('assets/beat.mp3');\n}\nfunction setup() {\n  amplitude = new p5.Amplitude();\n  sound.play();\n}\nfunction draw() {\n  background(0);\n  fill(255);\n  var level = amplitude.getLevel();\n  var size = map(level, 0, 1, 0, 200);\n  ellipse(width/2, height/2, size, size);\n}\nfunction mouseClicked(){\n  sound.stop();\n}\n
"
+                ],
+                "class": "p5.Amplitude",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2378,
+                "description": "
Determines whether the results of Amplitude.process() will be\nNormalized. To normalize, Amplitude finds the difference the\nloudest reading it has processed and the maximum amplitude of\n1.0. Amplitude adds this difference to all values to produce\nresults that will reliably map between 0.0 and 1.0. However,\nif a louder moment occurs, the amount that Normalize adds to\nall the values will change. Accepts an optional boolean parameter\n(true or false). Normalizing is off by default.
\n",
+                "itemtype": "method",
+                "name": "toggleNormalize",
+                "params": [
+                    {
+                        "name": "boolean",
+                        "description": "
set normalize to true (1) or false (0)
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Amplitude",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2398,
+                "description": "
Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.
\n",
+                "itemtype": "method",
+                "name": "smooth",
+                "params": [
+                    {
+                        "name": "set",
+                        "description": "
smoothing from 0.0 <= 1
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Amplitude",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2567,
+                "description": "
Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.
\n",
+                "itemtype": "method",
+                "name": "setInput",
+                "params": [
+                    {
+                        "name": "source",
+                        "description": "
p5.sound object (or web audio API source node)
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2586,
+                "description": "
Returns an array of amplitude values (between -1.0 and +1.0) that represent\na snapshot of amplitude readings in a single buffer. Length will be\nequal to bins (defaults to 1024). Can be used to draw the waveform\nof a sound.
\n",
+                "itemtype": "method",
+                "name": "waveform",
+                "params": [
+                    {
+                        "name": "bins",
+                        "description": "
Must be a power of two between\n                          16 and 1024. Defaults to 1024.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "precision",
+                        "description": "
If any value is provided, will return results\n                            in a Float32 Array which is more precise\n                            than a regular array.
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Array    Array of amplitude values (-1 to 1)\n                          over time. Array length = bins.",
+                    "type": "Array"
+                },
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2629,
+                "description": "
Returns an array of amplitude values (between 0 and 255)\nacross the frequency spectrum. Length is equal to FFT bins\n(1024 by default). The array indices correspond to frequencies\n(i.e. pitches), from the lowest to the highest that humans can\nhear. Each value represents amplitude at that slice of the\nfrequency spectrum. Must be called prior to using\ngetEnergy().
\n",
+                "itemtype": "method",
+                "name": "analyze",
+                "params": [
+                    {
+                        "name": "bins",
+                        "description": "
Must be a power of two between\n                           16 and 1024. Defaults to 1024.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "scale",
+                        "description": "
If "dB," returns decibel\n                           float measurements between\n                           -140 and 0 (max).\n                           Otherwise returns integers from 0-255.
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "spectrum    Array of energy (amplitude/volume)\n                            values across the frequency spectrum.\n                            Lowest energy (silence) = 0, highest\n                            possible is 255.",
+                    "type": "Array"
+                },
+                "example": [
+                    "\n
\nvar osc;\nvar fft;\n\nfunction setup(){\n  createCanvas(100,100);\n  osc = new p5.Oscillator();\n  osc.amp(0);\n  osc.start();\n  fft = new p5.FFT();\n}\n\nfunction draw(){\n  background(0);\n\n  var freq = map(mouseX, 0, 800, 20, 15000);\n  freq = constrain(freq, 1, 20000);\n  osc.freq(freq);\n\n  var spectrum = fft.analyze();\n  noStroke();\n  fill(0,255,0); // spectrum is green\n  for (var i = 0; i< spectrum.length; i++){\n    var x = map(i, 0, spectrum.length, 0, width);\n    var h = -height + map(spectrum[i], 0, 255, height, 0);\n    rect(x, height, width / spectrum.length, h );\n  }\n\n  stroke(255);\n  text('Freq: ' + round(freq)+'Hz', 10, 10);\n\n  isMouseOverCanvas();\n}\n\n// only play sound when mouse is over canvas\nfunction isMouseOverCanvas() {\n  var mX = mouseX, mY = mouseY;\n  if (mX > 0 && mX < width && mY < height && mY > 0) {\n    osc.amp(0.5, 0.2);\n  } else {\n    osc.amp(0, 0.2);\n  }\n}\n
\n\n"
+                ],
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2721,
+                "description": "
Returns the amount of energy (volume) at a specific\n\nfrequency, or the average amount of energy between two\nfrequencies. Accepts Number(s) corresponding\nto frequency (in Hz), or a String corresponding to predefined\nfrequency ranges ("bass", "lowMid", "mid", "highMid", "treble").\nReturns a range between 0 (no energy/volume at that frequency) and\n255 (maximum energy).\nNOTE: analyze() must be called prior to getEnergy(). Analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results determine the value at a specific frequency or\nrange of frequencies.
\n",
+                "itemtype": "method",
+                "name": "getEnergy",
+                "params": [
+                    {
+                        "name": "frequency1",
+                        "description": "
Will return a value representing\n                              energy at this frequency. Alternately,\n                              the strings "bass", "lowMid" "mid",\n                              "highMid", and "treble" will return\n                              predefined frequency ranges.
\n",
+                        "type": "Number|String"
+                    },
+                    {
+                        "name": "frequency2",
+                        "description": "
If a second frequency is given,\n                              will return average amount of\n                              energy that exists between the\n                              two frequencies.
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Energy   Energy (volume/amplitude) from\n                            0 and 255.",
+                    "type": "Number"
+                },
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2803,
+                "description": "
Returns the\n\nspectral centroid of the input signal.\nNOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.
\n",
+                "itemtype": "method",
+                "name": "getCentroid",
+                "return": {
+                    "description": "Spectral Centroid Frequency   Frequency of the spectral centroid in Hz.",
+                    "type": "Number"
+                },
+                "example": [
+                    "\n
\n\n\nfunction setup(){\ncnv = createCanvas(800,400);\nsound = new p5.AudioIn();\nsound.start();\nfft = new p5.FFT();\nsound.connect(fft);\n}\n\n\nfunction draw(){\n\nvar centroidplot = 0.0;\nvar spectralCentroid = 0;\n\n\nbackground(0);\nstroke(0,255,0);\nvar spectrum = fft.analyze();\nfill(0,255,0); // spectrum is green\n\n//draw the spectrum\n\nfor (var i = 0; i< spectrum.length; i++){\n  var x = map(log(i), 0, log(spectrum.length), 0, width);\n  var h = map(spectrum[i], 0, 255, 0, height);\n  var rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));\n  rect(x, height, rectangle_width, -h )\n}\n\nvar nyquist = 22050;\n\n// get the centroid\nspectralCentroid = fft.getCentroid();\n\n// the mean_freq_index calculation is for the display.\nvar mean_freq_index = spectralCentroid/(nyquist/spectrum.length);\n\ncentroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);\n\n\nstroke(255,0,0); // the line showing where the centroid is will be red\n\nrect(centroidplot, 0, width / spectrum.length, height)\nnoStroke();\nfill(255,255,255);  // text is white\ntextSize(40);\ntext(\"centroid: \"+round(spectralCentroid)+\" Hz\", 10, 40);\n}\n 
"
+                ],
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2884,
+                "description": "
Smooth FFT analysis by averaging with the last analysis frame.
\n",
+                "itemtype": "method",
+                "name": "smooth",
+                "params": [
+                    {
+                        "name": "smoothing",
+                        "description": "
0.0 < smoothing < 1.0.\n                             Defaults to 0.8.
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2904,
+                "description": "
Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\nNOTE: analyze() must be called prior to linAverages(). Analyze()\ntells the FFT to analyze frequency data, and linAverages() uses\nthe results to group them into a smaller set of averages.
\n",
+                "itemtype": "method",
+                "name": "linAverages",
+                "params": [
+                    {
+                        "name": "N",
+                        "description": "
Number of returned frequency groups
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "linearAverages   Array of average amplitude values for each group",
+                    "type": "Array"
+                },
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2934,
+                "description": "
Returns an array of average amplitude values of the spectrum, for a given\nset of \nOctave Bands\nNOTE: analyze() must be called prior to logAverages(). Analyze()\ntells the FFT to analyze frequency data, and logAverages() uses\nthe results to group them into a smaller set of averages.
\n",
+                "itemtype": "method",
+                "name": "logAverages",
+                "params": [
+                    {
+                        "name": "octaveBands",
+                        "description": "
Array of Octave Bands objects for grouping
\n",
+                        "type": "Array"
+                    }
+                ],
+                "return": {
+                    "description": "logAverages    Array of average amplitude values for each group",
+                    "type": "Array"
+                },
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 2964,
+                "description": "
Calculates and Returns the 1/N\nOctave Bands\nN defaults to 3 and minimum central frequency to 15.625Hz.\n(1/3 Octave Bands ~= 31 Frequency Bands)\nSetting fCtr0 to a central value of a higher octave will ignore the lower bands\nand produce less frequency groups.
\n",
+                "itemtype": "method",
+                "name": "getOctaveBands",
+                "params": [
+                    {
+                        "name": "N",
+                        "description": "
Specifies the 1/N type of generated octave bands
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "fCtr0",
+                        "description": "
Minimum central frequency for the lowest band
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "octaveBands   Array of octave band objects with their bounds",
+                    "type": "Array"
+                },
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 3022,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 3399,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 3420,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 3479,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 3797,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 3969,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4127,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4168,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4238,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4426,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4483,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4651,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4699,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4730,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4751,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4771,
+                "class": "p5.FFT",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4873,
+                "description": "
Fade to value, for smooth transitions
\n",
+                "itemtype": "method",
+                "name": "fade",
+                "params": [
+                    {
+                        "name": "value",
+                        "description": "
Value to set this signal
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
Length of fade, in seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Signal",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4884,
+                "description": "
Connect a p5.sound object or Web Audio node to this\np5.Signal so that its amplitude values can be scaled.
\n",
+                "itemtype": "method",
+                "name": "setInput",
+                "params": [
+                    {
+                        "name": "input",
+                        "description": "",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.Signal",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4898,
+                "description": "
Add a constant value to this audio signal,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalAdd.
\n",
+                "itemtype": "method",
+                "name": "add",
+                "params": [
+                    {
+                        "name": "number",
+                        "description": "",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "object",
+                    "type": "p5.Signal"
+                },
+                "class": "p5.Signal",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4917,
+                "description": "
Multiply this signal by a constant value,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalMult.
\n",
+                "itemtype": "method",
+                "name": "mult",
+                "params": [
+                    {
+                        "name": "number",
+                        "description": "
to multiply
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "object",
+                    "type": "p5.Signal"
+                },
+                "class": "p5.Signal",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 4936,
+                "description": "
Scale this signal value to a given range,\nand return the result as an audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalScale.
\n",
+                "itemtype": "method",
+                "name": "scale",
+                "params": [
+                    {
+                        "name": "number",
+                        "description": "
to multiply
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "inMin",
+                        "description": "
input range minumum
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "inMax",
+                        "description": "
input range maximum
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "outMin",
+                        "description": "
input range minumum
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "outMax",
+                        "description": "
input range maximum
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "object",
+                    "type": "p5.Signal"
+                },
+                "class": "p5.Signal",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5070,
+                "description": "
Start an oscillator. Accepts an optional parameter to\ndetermine how long (in seconds from now) until the\noscillator starts.
\n",
+                "itemtype": "method",
+                "name": "start",
+                "params": [
+                    {
+                        "name": "time",
+                        "description": "
startTime in seconds from now.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "frequency",
+                        "description": "
frequency in Hz.
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5110,
+                "description": "
Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.
\n",
+                "itemtype": "method",
+                "name": "stop",
+                "params": [
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
Time, in seconds from now.
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5126,
+                "description": "
Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.
\n",
+                "itemtype": "method",
+                "name": "amp",
+                "params": [
+                    {
+                        "name": "vol",
+                        "description": "
between 0 and 1.0\n                            or a modulating signal/oscillator
\n",
+                        "type": "Number|Object"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
create a fade that lasts rampTime
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "gain  If no value is provided,\n                            returns the Web Audio API\n                            AudioParam that controls\n                            this oscillator's\n                            gain/amplitude/volume)",
+                    "type": "AudioParam"
+                },
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5161,
+                "description": "
Set frequency of an oscillator to a value. Or, pass in an object\nsuch as an oscillator to modulate the frequency with an audio signal.
\n",
+                "itemtype": "method",
+                "name": "freq",
+                "params": [
+                    {
+                        "name": "Frequency",
+                        "description": "
Frequency in Hz\n                                      or modulating signal/oscillator
\n",
+                        "type": "Number|Object"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
Ramp time (in seconds)
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
Schedule this event to happen\n                                 at x seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Frequency If no value is provided,\n                                returns the Web Audio API\n                                AudioParam that controls\n                                this oscillator's frequency",
+                    "type": "AudioParam"
+                },
+                "example": [
+                    "\n
\nvar osc = new p5.Oscillator(300);\nosc.start();\nosc.freq(40, 10);\n
"
+                ],
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5220,
+                "description": "
Set type to 'sine', 'triangle', 'sawtooth' or 'square'.
\n",
+                "itemtype": "method",
+                "name": "setType",
+                "params": [
+                    {
+                        "name": "type",
+                        "description": "
'sine', 'triangle', 'sawtooth' or 'square'.
\n",
+                        "type": "String"
+                    }
+                ],
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5232,
+                "description": "
Connect to a p5.sound / Web Audio object.
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "
A p5.sound or Web Audio object
\n",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5249,
+                "description": "
Disconnect all outputs
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5260,
+                "description": "
Pan between Left (-1) and Right (1)
\n",
+                "itemtype": "method",
+                "name": "pan",
+                "params": [
+                    {
+                        "name": "panning",
+                        "description": "
Number between -1 and 1
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5292,
+                "description": "
Set the phase of an oscillator between 0.0 and 1.0.\nIn this implementation, phase is a delay time\nbased on the oscillator's current frequency.
\n",
+                "itemtype": "method",
+                "name": "phase",
+                "params": [
+                    {
+                        "name": "phase",
+                        "description": "
float between 0.0 and 1.0
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5346,
+                "description": "
Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method again\nwill override the initial add() with a new value.
\n",
+                "itemtype": "method",
+                "name": "add",
+                "params": [
+                    {
+                        "name": "number",
+                        "description": "
Constant number to add
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Oscillator Returns this oscillator\n                                   with scaled output",
+                    "type": "p5.Oscillator"
+                },
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5363,
+                "description": "
Multiply the p5.Oscillator's output amplitude\nby a fixed value (i.e. turn it up!). Calling this method\nagain will override the initial mult() with a new value.
\n",
+                "itemtype": "method",
+                "name": "mult",
+                "params": [
+                    {
+                        "name": "number",
+                        "description": "
Constant number to multiply
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Oscillator Returns this oscillator\n                                   with multiplied output",
+                    "type": "p5.Oscillator"
+                },
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5379,
+                "description": "
Scale this oscillator's amplitude values to a given\nrange, and return the oscillator. Calling this method\nagain will override the initial scale() with new values.
\n",
+                "itemtype": "method",
+                "name": "scale",
+                "params": [
+                    {
+                        "name": "inMin",
+                        "description": "
input range minumum
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "inMax",
+                        "description": "
input range maximum
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "outMin",
+                        "description": "
input range minumum
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "outMax",
+                        "description": "
input range maximum
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Oscillator Returns this oscillator\n                                   with scaled output",
+                    "type": "p5.Oscillator"
+                },
+                "class": "p5.Oscillator",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5478,
+                "class": "p5.SqrOsc",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5681,
+                "class": "p5.SqrOsc",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5970,
+                "description": "
Time until envelope reaches attackLevel
\n",
+                "itemtype": "property",
+                "name": "attackTime",
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5975,
+                "description": "
Level once attack is complete.
\n",
+                "itemtype": "property",
+                "name": "attackLevel",
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5980,
+                "description": "
Time until envelope reaches decayLevel.
\n",
+                "itemtype": "property",
+                "name": "decayTime",
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5985,
+                "description": "
Level after decay. The envelope will sustain here until it is released.
\n",
+                "itemtype": "property",
+                "name": "decayLevel",
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5990,
+                "description": "
Duration of the release portion of the envelope.
\n",
+                "itemtype": "property",
+                "name": "releaseTime",
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 5995,
+                "description": "
Level at the end of the release.
\n",
+                "itemtype": "property",
+                "name": "releaseLevel",
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6031,
+                "description": "
Reset the envelope with a series of time/value pairs.
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "attackTime",
+                        "description": "
Time (in seconds) before level\n                               reaches attackLevel
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "attackLevel",
+                        "description": "
Typically an amplitude between\n                               0.0 and 1.0
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "decayTime",
+                        "description": "
Time
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "decayLevel",
+                        "description": "
Amplitude (In a standard ADSR envelope,\n                               decayLevel = sustainLevel)
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "releaseTime",
+                        "description": "
Release Time (in seconds)
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "releaseLevel",
+                        "description": "
Amplitude
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar t1 = 0.1; // attack time in seconds\nvar l1 = 0.7; // attack level 0.0 to 1.0\nvar t2 = 0.3; // decay time in seconds\nvar l2 = 0.1; // decay level  0.0 to 1.0\nvar t3 = 0.2; // sustain time in seconds\nvar l3 = dL; // sustain level  0.0 to 1.0\n// release level defaults to zero\n\nvar env;\nvar triOsc;\n\nfunction setup() {\n  background(0);\n  noStroke();\n  fill(255);\n  textAlign(CENTER);\n  text('click to play', width/2, height/2);\n\n  env = new p5.Env(t1, l1, t2, l2, t3, l3);\n  triOsc = new p5.Oscillator('triangle');\n  triOsc.amp(env); // give the env control of the triOsc's amp\n  triOsc.start();\n}\n\n// mouseClick triggers envelope if over canvas\nfunction mouseClicked() {\n  // is mouse over canvas?\n  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n    env.play(triOsc);\n  }\n}\n
\n"
+                ],
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6090,
+                "description": "
Set values like a traditional\n\nADSR envelope\n.
\n",
+                "itemtype": "method",
+                "name": "setADSR",
+                "params": [
+                    {
+                        "name": "attackTime",
+                        "description": "
Time (in seconds before envelope\n                              reaches Attack Level
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "decayTime",
+                        "description": "
Time (in seconds) before envelope\n                              reaches Decay/Sustain Level
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "susRatio",
+                        "description": "
Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n                              where 1.0 = attackLevel, 0.0 = releaseLevel.\n                              The susRatio determines the decayLevel and the level at which the\n                              sustain portion of the envelope will sustain.\n                              For example, if attackLevel is 0.4, releaseLevel is 0,\n                              and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n                              increased to 1.0 (using setRange),\n                              then decayLevel would increase proportionally, to become 0.5.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "releaseTime",
+                        "description": "
Time in seconds from now (defaults to 0)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.2;\nvar susPercent = 0.2;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n  var cnv = createCanvas(100, 100);\n\n  textAlign(CENTER);\n  text('click to play', width/2, height/2);\n\n  env = new p5.Env();\n  env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n  env.setRange(attackLevel, releaseLevel);\n\n  triOsc = new p5.Oscillator('triangle');\n  triOsc.amp(env);\n  triOsc.start();\n  triOsc.freq(220);\n\n  cnv.mousePressed(playEnv);\n}\n\nfunction playEnv(){\n  env.play();\n}\n
"
+                ],
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6155,
+                "description": "
Set max (attackLevel) and min (releaseLevel) of envelope.
\n",
+                "itemtype": "method",
+                "name": "setRange",
+                "params": [
+                    {
+                        "name": "aLevel",
+                        "description": "
attack level (defaults to 1)
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "rLevel",
+                        "description": "
release level (defaults to 0)
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.2;\nvar susPercent = 0.2;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n  var cnv = createCanvas(100, 100);\n\n  textAlign(CENTER);\n  text('click to play', width/2, height/2);\n\n  env = new p5.Env();\n  env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n  env.setRange(attackLevel, releaseLevel);\n\n  triOsc = new p5.Oscillator('triangle');\n  triOsc.amp(env);\n  triOsc.start();\n  triOsc.freq(220);\n\n  cnv.mousePressed(playEnv);\n}\n\nfunction playEnv(){\n  env.play();\n}\n
"
+                ],
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6234,
+                "description": "
Assign a parameter to be controlled by this envelope.\nIf a p5.Sound object is given, then the p5.Env will control its\noutput gain. If multiple inputs are provided, the env will\ncontrol all of them.
\n",
+                "itemtype": "method",
+                "name": "setInput",
+                "params": [
+                    {
+                        "name": "inputs",
+                        "description": "
A p5.sound object or\n                              Web Audio Param.
\n",
+                        "type": "Object",
+                        "optional": true,
+                        "multiple": true
+                    }
+                ],
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6249,
+                "description": "
Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.
\n",
+                "itemtype": "method",
+                "name": "setExp",
+                "params": [
+                    {
+                        "name": "isExp",
+                        "description": "
true is exponential, false is linear
\n",
+                        "type": "Boolean"
+                    }
+                ],
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6267,
+                "description": "
Play tells the envelope to start acting on a given input.\nIf the input is a p5.sound object (i.e. AudioIn, Oscillator,\nSoundFile), then Env will control its output volume.\nEnvelopes can also be used to control any \nWeb Audio Audio Param.
\n",
+                "itemtype": "method",
+                "name": "play",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "
A p5.sound object or\n                              Web Audio Param.
\n",
+                        "type": "Object"
+                    },
+                    {
+                        "name": "startTime",
+                        "description": "
time from now (in seconds) at which to play
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "sustainTime",
+                        "description": "
time to sustain before releasing the envelope
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.2;\nvar susPercent = 0.2;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n  var cnv = createCanvas(100, 100);\n\n  textAlign(CENTER);\n  text('click to play', width/2, height/2);\n\n  env = new p5.Env();\n  env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n  env.setRange(attackLevel, releaseLevel);\n\n  triOsc = new p5.Oscillator('triangle');\n  triOsc.amp(env);\n  triOsc.start();\n  triOsc.freq(220);\n\n  cnv.mousePressed(playEnv);\n}\n\nfunction playEnv(){\n  // trigger env on triOsc, 0 seconds from now\n  // After decay, sustain for 0.2 seconds before release\n  env.play(triOsc, 0, 0.2);\n}\n
"
+                ],
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6328,
+                "description": "
Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go. Input can be\nany p5.sound object, or a \nWeb Audio Param.
\n",
+                "itemtype": "method",
+                "name": "triggerAttack",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "
p5.sound Object or Web Audio Param
\n",
+                        "type": "Object"
+                    },
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
time from now (in seconds)
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.3;\nvar susPercent = 0.4;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n  var cnv = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('click to play', width/2, height/2);\n\n  env = new p5.Env();\n  env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n  env.setRange(attackLevel, releaseLevel);\n\n  triOsc = new p5.Oscillator('triangle');\n  triOsc.amp(env);\n  triOsc.start();\n  triOsc.freq(220);\n\n  cnv.mousePressed(envAttack);\n}\n\nfunction envAttack(){\n  console.log('trigger attack');\n  env.triggerAttack();\n\n  background(0,255,0);\n  text('attack!', width/2, height/2);\n}\n\nfunction mouseReleased() {\n  env.triggerRelease();\n\n  background(200);\n  text('click to play', width/2, height/2);\n}\n
"
+                ],
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6435,
+                "description": "
Trigger the Release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.
\n",
+                "itemtype": "method",
+                "name": "triggerRelease",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "
p5.sound Object or Web Audio Param
\n",
+                        "type": "Object"
+                    },
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
time to trigger the release
\n",
+                        "type": "Number"
+                    }
+                ],
+                "example": [
+                    "\n
\n\nvar attackLevel = 1.0;\nvar releaseLevel = 0;\n\nvar attackTime = 0.001\nvar decayTime = 0.3;\nvar susPercent = 0.4;\nvar releaseTime = 0.5;\n\nvar env, triOsc;\n\nfunction setup() {\n  var cnv = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('click to play', width/2, height/2);\n\n  env = new p5.Env();\n  env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n  env.setRange(attackLevel, releaseLevel);\n\n  triOsc = new p5.Oscillator('triangle');\n  triOsc.amp(env);\n  triOsc.start();\n  triOsc.freq(220);\n\n  cnv.mousePressed(envAttack);\n}\n\nfunction envAttack(){\n  console.log('trigger attack');\n  env.triggerAttack();\n\n  background(0,255,0);\n  text('attack!', width/2, height/2);\n}\n\nfunction mouseReleased() {\n  env.triggerRelease();\n\n  background(200);\n  text('click to play', width/2, height/2);\n}\n
"
+                ],
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6532,
+                "description": "
Exponentially ramp to a value using the first two\nvalues from setADSR(attackTime, decayTime)\nas \ntime constants for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.
\n",
+                "itemtype": "method",
+                "name": "ramp",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "
p5.sound Object or Web Audio Param
\n",
+                        "type": "Object"
+                    },
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
When to trigger the ramp
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "v",
+                        "description": "
Target value
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "v2",
+                        "description": "
Second target value (optional)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar env, osc, amp, cnv;\n\nvar attackTime = 0.001;\nvar decayTime = 0.2;\nvar attackLevel = 1;\nvar decayLevel = 0;\n\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  fill(0,255,0);\n  noStroke();\n\n  env = new p5.Env();\n  env.setADSR(attackTime, decayTime);\n\n  osc = new p5.Oscillator();\n  osc.amp(env);\n  osc.start();\n\n  amp = new p5.Amplitude();\n\n  cnv.mousePressed(triggerRamp);\n}\n\nfunction triggerRamp() {\n  env.ramp(osc, 0, attackLevel, decayLevel);\n}\n\nfunction draw() {\n  background(20,20,20);\n  text('click me', 10, 20);\n  var h = map(amp.getLevel(), 0, 0.4, 0, height);;\n\n  rect(0, height, width, -h);\n}\n
"
+                ],
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6637,
+                "description": "
Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method\nagain will override the initial add() with new values.
\n",
+                "itemtype": "method",
+                "name": "add",
+                "params": [
+                    {
+                        "name": "number",
+                        "description": "
Constant number to add
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Envelope Returns this envelope\n                                   with scaled output",
+                    "type": "p5.Env"
+                },
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6653,
+                "description": "
Multiply the p5.Env's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.
\n",
+                "itemtype": "method",
+                "name": "mult",
+                "params": [
+                    {
+                        "name": "number",
+                        "description": "
Constant number to multiply
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Envelope Returns this envelope\n                                   with scaled output",
+                    "type": "p5.Env"
+                },
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6669,
+                "description": "
Scale this envelope's amplitude values to a given\nrange, and return the envelope. Calling this method\nagain will override the initial scale() with new values.
\n",
+                "itemtype": "method",
+                "name": "scale",
+                "params": [
+                    {
+                        "name": "inMin",
+                        "description": "
input range minumum
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "inMax",
+                        "description": "
input range maximum
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "outMin",
+                        "description": "
input range minumum
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "outMax",
+                        "description": "
input range maximum
\n",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Envelope Returns this envelope\n                                   with scaled output",
+                    "type": "p5.Env"
+                },
+                "class": "p5.Env",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6773,
+                "description": "
Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).
\n",
+                "itemtype": "method",
+                "name": "width",
+                "params": [
+                    {
+                        "name": "width",
+                        "description": "
Width between the pulses (0 to 1.0,\n                       defaults to 0)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Pulse",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6958,
+                "description": "
Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.
\n",
+                "itemtype": "method",
+                "name": "setType",
+                "params": [
+                    {
+                        "name": "type",
+                        "description": "
'white', 'pink' or 'brown'
\n",
+                        "type": "String",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Noise",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 6988,
+                "description": "
Start the noise
\n",
+                "itemtype": "method",
+                "name": "start",
+                "class": "p5.Noise",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7005,
+                "description": "
Stop the noise.
\n",
+                "itemtype": "method",
+                "name": "stop",
+                "class": "p5.Noise",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7017,
+                "description": "
Pan the noise.
\n",
+                "itemtype": "method",
+                "name": "pan",
+                "params": [
+                    {
+                        "name": "panning",
+                        "description": "
Number between -1 (left)\n                         and 1 (right)
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Noise",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7026,
+                "description": "
Set the amplitude of the noise between 0 and 1.0. Or,\nmodulate amplitude with an audio signal such as an oscillator.
\n",
+                "itemtype": "method",
+                "name": "amp",
+                "params": [
+                    {
+                        "name": "volume",
+                        "description": "
amplitude between 0 and 1.0\n                                   or modulating signal/oscillator
\n",
+                        "type": "Number|Object"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
create a fade that lasts rampTime
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Noise",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7037,
+                "description": "
Send output to a p5.sound or web audio object
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.Noise",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7043,
+                "description": "
Disconnect all output.
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.Noise",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7117,
+                "description": "
Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables acces.
\n",
+                "itemtype": "property",
+                "name": "enabled",
+                "type": "Boolean",
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7133,
+                "description": "
Start processing audio input. This enables the use of other\nAudioIn methods like getLevel(). Note that by default, AudioIn\nis not connected to p5.sound's output. So you won't hear\nanything unless you use the connect() method.
\n
Certain browsers limit access to the user's microphone. For example,\nChrome only allows access from localhost and over https. For this reason,\nyou may want to include an errorCallback—a function that is called in case\nthe browser won't provide mic access.
\n",
+                "itemtype": "method",
+                "name": "start",
+                "params": [
+                    {
+                        "name": "successCallback",
+                        "description": "
Name of a function to call on\n                                  success.
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
Name of a function to call if\n                                  there was an error. For example,\n                                  some browsers do not support\n                                  getUserMedia.
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7186,
+                "description": "
Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.
\n",
+                "itemtype": "method",
+                "name": "stop",
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7202,
+                "description": "
Connect to an audio unit. If no parameter is provided, will\nconnect to the master output (i.e. your speakers).
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "
An object that accepts audio input,\n                        such as an FFT
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7223,
+                "description": "
Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7235,
+                "description": "
Read the Amplitude (volume level) of an AudioIn. The AudioIn\nclass contains its own instance of the Amplitude class to help\nmake it easy to get a microphone's volume level. Accepts an\noptional smoothing value (0.0 < 1.0). NOTE: AudioIn must\n.start() before using .getLevel().
\n",
+                "itemtype": "method",
+                "name": "getLevel",
+                "params": [
+                    {
+                        "name": "smoothing",
+                        "description": "
Smoothing is 0.0 by default.\n                             Smooths values based on previous values.
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Volume level (between 0.0 and 1.0)",
+                    "type": "Number"
+                },
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7253,
+                "description": "
Set amplitude (volume) of a mic input between 0 and 1.0. 
\n",
+                "itemtype": "method",
+                "name": "amp",
+                "params": [
+                    {
+                        "name": "vol",
+                        "description": "
between 0 and 1.0
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "time",
+                        "description": "
ramp time (optional)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7272,
+                "description": "
Returns a list of available input sources. This is a wrapper\nfor <a title="MediaDevices.enumerateDevices() - Web APIs | MDN" target="_blank" href=\n "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices"
\n
\n
and it returns a Promise.
\n
\n",
+                "itemtype": "method",
+                "name": "getSources",
+                "params": [
+                    {
+                        "name": "successCallback",
+                        "description": "
This callback function handles the sources when they\n                                     have been enumerated. The callback function\n                                     receives the deviceList array as its only argument
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
This optional callback receives the error\n                                   message as its argument.
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "Returns a Promise that can be used in place of the callbacks, similar\n                           to the enumerateDevices() method",
+                    "type": "Object"
+                },
+                "example": [
+                    "\n 
\n var audiograb;\n\n function setup(){\n   //new audioIn\n   audioGrab = new p5.AudioIn();\n\n   audioGrab.getSources(function(deviceList) {\n     //print out the array of available sources\n     console.log(deviceList);\n     //set the source to the first item in the deviceList array\n     audioGrab.setSource(0);\n   });\n }\n 
"
+                ],
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7323,
+                "description": "
Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n<a title="MediaDevices.enumerateDevices() - Web APIs | MDN" target="_blank" href=\n"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices"
\n
\n
navigator.mediaDevices.enumerateDevices().
\n
\n",
+                "itemtype": "method",
+                "name": "setSource",
+                "params": [
+                    {
+                        "name": "num",
+                        "description": "
position of input source in the array
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7363,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7379,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7403,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7429,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7451,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7473,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7519,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7550,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7568,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7905,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 7927,
+                "class": "p5.AudioIn",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8003,
+                "description": "
In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter
\n",
+                "class": "p5.Effect",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8016,
+                "description": "
Set the output volume of the filter.
\n",
+                "itemtype": "method",
+                "name": "amp",
+                "params": [
+                    {
+                        "name": "vol",
+                        "description": "
amplitude between 0 and 1.0
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
create a fade that lasts until rampTime
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "tFromNow",
+                        "description": "
schedule this event to happen in tFromNow seconds
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Effect",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8033,
+                "description": "
Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments
\n",
+                "itemtype": "method",
+                "name": "chain",
+                "params": [
+                    {
+                        "name": "arguments",
+                        "description": "
Chain together multiple sound objects
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Effect",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8050,
+                "description": "
Adjust the dry/wet value.
\n",
+                "itemtype": "method",
+                "name": "drywet",
+                "params": [
+                    {
+                        "name": "fade",
+                        "description": "
The desired drywet value (0 - 1.0)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Effect",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8062,
+                "description": "
Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.Effect",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8073,
+                "description": "
Disconnect all output.
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.Effect",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8181,
+                "description": "
The p5.Filter is built with a\n\nWeb Audio BiquadFilter Node.
\n",
+                "itemtype": "property",
+                "name": "biquadFilter",
+                "type": "DelayNode",
+                "class": "p5.Filter",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8199,
+                "description": "
Filter an audio signal according to a set\nof filter parameters.
\n",
+                "itemtype": "method",
+                "name": "process",
+                "params": [
+                    {
+                        "name": "Signal",
+                        "description": "
An object that outputs audio
\n",
+                        "type": "Object"
+                    },
+                    {
+                        "name": "freq",
+                        "description": "
Frequency in Hz, from 10 to 22050
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "res",
+                        "description": "
Resonance/Width of the filter frequency\n                      from 0.001 to 1000
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Filter",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8213,
+                "description": "
Set the frequency and the resonance of the filter.
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "freq",
+                        "description": "
Frequency in Hz, from 10 to 22050
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "res",
+                        "description": "
Resonance (Q) from 0.001 to 1000
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Filter",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8230,
+                "description": "
Set the filter frequency, in Hz, from 10 to 22050 (the range of\nhuman hearing, although in reality most people hear in a narrower\nrange).
\n",
+                "itemtype": "method",
+                "name": "freq",
+                "params": [
+                    {
+                        "name": "freq",
+                        "description": "
Filter Frequency
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "value  Returns the current frequency value",
+                    "type": "Number"
+                },
+                "class": "p5.Filter",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8255,
+                "description": "
Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.
\n",
+                "itemtype": "method",
+                "name": "res",
+                "params": [
+                    {
+                        "name": "res",
+                        "description": "
Resonance/Width of filter freq\n                     from 0.001 to 1000
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "value Returns the current res value",
+                    "type": "Number"
+                },
+                "class": "p5.Filter",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8277,
+                "description": "
Controls the gain attribute of a Biquad Filter.\nThis is distinctly different from .amp() which is inherited from p5.Effect\n.amp() controls the volume via the output gain node\np5.Filter.gain() controls the gain parameter of a Biquad Filter node.
\n",
+                "itemtype": "method",
+                "name": "gain",
+                "params": [
+                    {
+                        "name": "gain",
+                        "description": "",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Returns the current or updated gain value",
+                    "type": "Number"
+                },
+                "class": "p5.Filter",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8298,
+                "description": "
Toggle function. Switches between the specified type and allpass
\n",
+                "itemtype": "method",
+                "name": "toggle",
+                "return": {
+                    "description": "[Toggle value]",
+                    "type": "Boolean"
+                },
+                "class": "p5.Filter",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8313,
+                "description": "
Set the type of a p5.Filter. Possible types include:\n"lowpass" (default), "highpass", "bandpass",\n"lowshelf", "highshelf", "peaking", "notch",\n"allpass".
\n",
+                "itemtype": "method",
+                "name": "setType",
+                "params": [
+                    {
+                        "name": "t",
+                        "description": "",
+                        "type": "String"
+                    }
+                ],
+                "class": "p5.Filter",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8516,
+                "description": "
The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the \np5.Filter API, especially gain and freq.\nBands are stored in an array, with indices 0 - 3, or 0 - 7
\n",
+                "itemtype": "property",
+                "name": "bands",
+                "type": "Array",
+                "class": "p5.EQ",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8551,
+                "description": "
Process an input by connecting it to the EQ
\n",
+                "itemtype": "method",
+                "name": "process",
+                "params": [
+                    {
+                        "name": "src",
+                        "description": "
Audio source
\n",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.EQ",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8637,
+                "description": "
\nWeb Audio Spatial Panner Node
\n
Properties include
\n\n",
+                "itemtype": "property",
+                "name": "panner",
+                "type": "AudioNode",
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8660,
+                "description": "
Connect an audio sorce
\n",
+                "itemtype": "method",
+                "name": "process",
+                "params": [
+                    {
+                        "name": "src",
+                        "description": "
Input source
\n",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8669,
+                "description": "
Set the X,Y,Z position of the Panner
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "xVal",
+                        "description": "",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "yVal",
+                        "description": "",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "zVal",
+                        "description": "",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "time",
+                        "description": "",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Updated x, y, z values as an array",
+                    "type": "Array"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8688,
+                "description": "
Getter and setter methods for position coordinates
\n",
+                "itemtype": "method",
+                "name": "positionX",
+                "return": {
+                    "description": "updated coordinate value",
+                    "type": "Number"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8693,
+                "description": "
Getter and setter methods for position coordinates
\n",
+                "itemtype": "method",
+                "name": "positionY",
+                "return": {
+                    "description": "updated coordinate value",
+                    "type": "Number"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8698,
+                "description": "
Getter and setter methods for position coordinates
\n",
+                "itemtype": "method",
+                "name": "positionZ",
+                "return": {
+                    "description": "updated coordinate value",
+                    "type": "Number"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8736,
+                "description": "
Set the X,Y,Z position of the Panner
\n",
+                "itemtype": "method",
+                "name": "orient",
+                "params": [
+                    {
+                        "name": "xVal",
+                        "description": "",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "yVal",
+                        "description": "",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "zVal",
+                        "description": "",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "time",
+                        "description": "",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "Updated x, y, z values as an array",
+                    "type": "Array"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8755,
+                "description": "
Getter and setter methods for orient coordinates
\n",
+                "itemtype": "method",
+                "name": "orientX",
+                "return": {
+                    "description": "updated coordinate value",
+                    "type": "Number"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8760,
+                "description": "
Getter and setter methods for orient coordinates
\n",
+                "itemtype": "method",
+                "name": "orientY",
+                "return": {
+                    "description": "updated coordinate value",
+                    "type": "Number"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8765,
+                "description": "
Getter and setter methods for orient coordinates
\n",
+                "itemtype": "method",
+                "name": "orientZ",
+                "return": {
+                    "description": "updated coordinate value",
+                    "type": "Number"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8803,
+                "description": "
Set the rolloff factor and max distance
\n",
+                "itemtype": "method",
+                "name": "setFalloff",
+                "params": [
+                    {
+                        "name": "maxDistance",
+                        "description": "",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "rolloffFactor",
+                        "description": "",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8813,
+                "description": "
Maxium distance between the source and the listener
\n",
+                "itemtype": "method",
+                "name": "maxDist",
+                "params": [
+                    {
+                        "name": "maxDistance",
+                        "description": "",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "updated value",
+                    "type": "Number"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 8825,
+                "description": "
How quickly the volume is reduced as the source moves away from the listener
\n",
+                "itemtype": "method",
+                "name": "rollof",
+                "params": [
+                    {
+                        "name": "rolloffFactor",
+                        "description": "",
+                        "type": "Number"
+                    }
+                ],
+                "return": {
+                    "description": "updated value",
+                    "type": "Number"
+                },
+                "class": "p5.Panner3D",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9128,
+                "description": "
The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.
\n",
+                "itemtype": "property",
+                "name": "leftDelay",
+                "type": "DelayNode",
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9136,
+                "description": "
The p5.Delay is built with two\n\nWeb Audio Delay Nodes, one for each stereo channel.
\n",
+                "itemtype": "property",
+                "name": "rightDelay",
+                "type": "DelayNode",
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9168,
+                "description": "
Add delay to an audio signal according to a set\nof delay parameters.
\n",
+                "itemtype": "method",
+                "name": "process",
+                "params": [
+                    {
+                        "name": "Signal",
+                        "description": "
An object that outputs audio
\n",
+                        "type": "Object"
+                    },
+                    {
+                        "name": "delayTime",
+                        "description": "
Time (in seconds) of the delay/echo.\n                             Some browsers limit delayTime to\n                             1 second.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "feedback",
+                        "description": "
sends the delay back through itself\n                             in a loop that decreases in volume\n                             each time.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "lowPass",
+                        "description": "
Cutoff frequency. Only frequencies\n                             below the lowPass will be part of the\n                             delay.
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9203,
+                "description": "
Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.
\n",
+                "itemtype": "method",
+                "name": "delayTime",
+                "params": [
+                    {
+                        "name": "delayTime",
+                        "description": "
Time (in seconds) of the delay
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9222,
+                "description": "
Feedback occurs when Delay sends its signal back through its input\nin a loop. The feedback amount determines how much signal to send each\ntime through the loop. A feedback greater than 1.0 is not desirable because\nit will increase the overall output each time through the loop,\ncreating an infinite feedback loop. The default value is 0.5
\n",
+                "itemtype": "method",
+                "name": "feedback",
+                "params": [
+                    {
+                        "name": "feedback",
+                        "description": "
0.0 to 1.0, or an object such as an\n                                Oscillator that can be used to\n                                modulate this param
\n",
+                        "type": "Number|Object"
+                    }
+                ],
+                "return": {
+                    "description": "Feedback value",
+                    "type": "Number"
+                },
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9250,
+                "description": "
Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.
\n",
+                "itemtype": "method",
+                "name": "filter",
+                "params": [
+                    {
+                        "name": "cutoffFreq",
+                        "description": "
A lowpass filter will cut off any\n                            frequencies higher than the filter frequency.
\n",
+                        "type": "Number|Object"
+                    },
+                    {
+                        "name": "res",
+                        "description": "
Resonance of the filter frequency\n                            cutoff, or an object (i.e. a p5.Oscillator)\n                            that can be used to modulate this parameter.\n                            High numbers (i.e. 15) will produce a resonance,\n                            low numbers (i.e. .2) will produce a slope.
\n",
+                        "type": "Number|Object"
+                    }
+                ],
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9267,
+                "description": "
Choose a preset type of delay. 'pingPong' bounces the signal\nfrom the left to the right channel to produce a stereo effect.\nAny other parameter will revert to the default delay setting.
\n",
+                "itemtype": "method",
+                "name": "setType",
+                "params": [
+                    {
+                        "name": "type",
+                        "description": "
'pingPong' (1) or 'default' (0)
\n",
+                        "type": "String|Number"
+                    }
+                ],
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9300,
+                "description": "
Set the output level of the delay effect.
\n",
+                "itemtype": "method",
+                "name": "amp",
+                "params": [
+                    {
+                        "name": "volume",
+                        "description": "
amplitude between 0 and 1.0
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
create a fade that lasts rampTime
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9309,
+                "description": "
Send output to a p5.sound or web audio object
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9315,
+                "description": "
Disconnect all output.
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.Delay",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9394,
+                "description": "
Connect a source to the reverb, and assign reverb parameters.
\n",
+                "itemtype": "method",
+                "name": "process",
+                "params": [
+                    {
+                        "name": "src",
+                        "description": "
p5.sound / Web Audio object with a sound\n                         output.
\n",
+                        "type": "Object"
+                    },
+                    {
+                        "name": "seconds",
+                        "description": "
Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "decayRate",
+                        "description": "
Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "reverse",
+                        "description": "
Play the reverb backwards or forwards.
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Reverb",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9423,
+                "description": "
Set the reverb settings. Similar to .process(), but without\nassigning a new input.
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "seconds",
+                        "description": "
Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "decayRate",
+                        "description": "
Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "reverse",
+                        "description": "
Play the reverb backwards or forwards.
\n",
+                        "type": "Boolean",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Reverb",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9451,
+                "description": "
Set the output level of the reverb effect.
\n",
+                "itemtype": "method",
+                "name": "amp",
+                "params": [
+                    {
+                        "name": "volume",
+                        "description": "
amplitude between 0 and 1.0
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
create a fade that lasts rampTime
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Reverb",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9460,
+                "description": "
Send output to a p5.sound or web audio object
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.Reverb",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9466,
+                "description": "
Disconnect all output.
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.Reverb",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9560,
+                "description": "
Internally, the p5.Convolver uses the a\n\nWeb Audio Convolver Node.
\n",
+                "itemtype": "property",
+                "name": "convolverNod",
+                "type": "ConvolverNode",
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9585,
+                "description": "
Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.
\n",
+                "itemtype": "method",
+                "name": "createConvolver",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
path to a sound file
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function to call if loading is successful.\n                              The object will be passed in as the argument\n                              to the callback function.
\n",
+                        "type": "Function",
+                        "optional": true
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
function to call if loading is not successful.\n                              A custom error will be passed in as the argument\n                              to the callback function.
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "",
+                    "type": "p5.Convolver"
+                },
+                "example": [
+                    "\n
\nvar cVerb, sound;\nfunction preload() {\n  // We have both MP3 and OGG versions of all sound assets\n  soundFormats('ogg', 'mp3');\n\n  // Try replacing 'bx-spring' with other soundfiles like\n  // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n  cVerb = createConvolver('assets/bx-spring.mp3');\n\n  // Try replacing 'Damscray_DancingTiger' with\n  // 'beat', 'doorbell', lucky_dragons'\n  sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n  // disconnect from master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n\n  sound.play();\n}\n
"
+                ],
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9701,
+                "description": "
Connect a source to the reverb, and assign reverb parameters.
\n",
+                "itemtype": "method",
+                "name": "process",
+                "params": [
+                    {
+                        "name": "src",
+                        "description": "
p5.sound / Web Audio object with a sound\n                         output.
\n",
+                        "type": "Object"
+                    }
+                ],
+                "example": [
+                    "\n
\nvar cVerb, sound;\nfunction preload() {\n  soundFormats('ogg', 'mp3');\n\n  cVerb = createConvolver('assets/concrete-tunnel.mp3');\n\n  sound = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n  // disconnect from master output...\n  sound.disconnect();\n\n  // ...and process with (i.e. connect to) cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n\n  sound.play();\n}\n
"
+                ],
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9733,
+                "description": "
If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the toggleImpulse(id) method.
\n",
+                "itemtype": "property",
+                "name": "impulses",
+                "type": "Array",
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9741,
+                "description": "
Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the .impulses array. Previous\nimpulses can be accessed with the .toggleImpulse(id)\nmethod.
\n",
+                "itemtype": "method",
+                "name": "addImpulse",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
path to a sound file
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function (optional)
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
function (optional)
\n",
+                        "type": "Function"
+                    }
+                ],
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9759,
+                "description": "
Similar to .addImpulse, except that the .impulses\nArray is reset to save memory. A new .impulses\narray is created with this impulse as the only item.
\n",
+                "itemtype": "method",
+                "name": "resetImpulse",
+                "params": [
+                    {
+                        "name": "path",
+                        "description": "
path to a sound file
\n",
+                        "type": "String"
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
function (optional)
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "errorCallback",
+                        "description": "
function (optional)
\n",
+                        "type": "Function"
+                    }
+                ],
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9777,
+                "description": "
If you have used .addImpulse() to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the .impulses Array. Accepts a parameter\nto identify which impulse you wish to use, identified either by its\noriginal filename (String) or by its position in the .impulses\n Array (Number).
\nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an .audioBuffer (type:\nWeb Audio \nAudioBuffer) and a .name, a String that corresponds\nwith the original filename.
\n",
+                "itemtype": "method",
+                "name": "toggleImpulse",
+                "params": [
+                    {
+                        "name": "id",
+                        "description": "
Identify the impulse by its original filename\n                          (String), or by its position in the\n                          .impulses Array (Number).
\n",
+                        "type": "String|Number"
+                    }
+                ],
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9821,
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 9846,
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10041,
+                "description": "
Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.
\n",
+                "itemtype": "method",
+                "name": "setBPM",
+                "params": [
+                    {
+                        "name": "BPM",
+                        "description": "
Beats Per Minute
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
Seconds from now
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Convolver",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10131,
+                "description": "
Array of values to pass into the callback\nat each step of the phrase. Depending on the callback\nfunction's requirements, these values may be numbers,\nstrings, or an object with multiple parameters.\nZero (0) indicates a rest.
\n",
+                "itemtype": "property",
+                "name": "sequence",
+                "type": "Array",
+                "class": "p5.Phrase",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10219,
+                "description": "
Set the tempo of this part, in Beats Per Minute.
\n",
+                "itemtype": "method",
+                "name": "setBPM",
+                "params": [
+                    {
+                        "name": "BPM",
+                        "description": "
Beats Per Minute
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
Seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10229,
+                "description": "
Returns the Beats Per Minute of this currently part.
\n",
+                "itemtype": "method",
+                "name": "getBPM",
+                "return": {
+                    "description": "",
+                    "type": "Number"
+                },
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10238,
+                "description": "
Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.
\n",
+                "itemtype": "method",
+                "name": "start",
+                "params": [
+                    {
+                        "name": "time",
+                        "description": "
seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10254,
+                "description": "
Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.
\n",
+                "itemtype": "method",
+                "name": "loop",
+                "params": [
+                    {
+                        "name": "time",
+                        "description": "
seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10271,
+                "description": "
Tell the part to stop looping.
\n",
+                "itemtype": "method",
+                "name": "noLoop",
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10283,
+                "description": "
Stop the part and cue it to step 0.
\n",
+                "itemtype": "method",
+                "name": "stop",
+                "params": [
+                    {
+                        "name": "time",
+                        "description": "
seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10293,
+                "description": "
Pause the part. Playback will resume\nfrom the current step.
\n",
+                "itemtype": "method",
+                "name": "pause",
+                "params": [
+                    {
+                        "name": "time",
+                        "description": "
seconds from now
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10305,
+                "description": "
Add a p5.Phrase to this Part.
\n",
+                "itemtype": "method",
+                "name": "addPhrase",
+                "params": [
+                    {
+                        "name": "phrase",
+                        "description": "
reference to a p5.Phrase
\n",
+                        "type": "p5.Phrase"
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10326,
+                "description": "
Remove a phrase from this part, based on the name it was\ngiven when it was created.
\n",
+                "itemtype": "method",
+                "name": "removePhrase",
+                "params": [
+                    {
+                        "name": "phraseName",
+                        "description": "",
+                        "type": "String"
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10340,
+                "description": "
Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.
\n",
+                "itemtype": "method",
+                "name": "getPhrase",
+                "params": [
+                    {
+                        "name": "phraseName",
+                        "description": "",
+                        "type": "String"
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10354,
+                "description": "
Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.
\n",
+                "itemtype": "method",
+                "name": "replaceSequence",
+                "params": [
+                    {
+                        "name": "phraseName",
+                        "description": "",
+                        "type": "String"
+                    },
+                    {
+                        "name": "sequence",
+                        "description": "
Array of values to pass into the callback\n                          at each step of the phrase.
\n",
+                        "type": "Array"
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10382,
+                "description": "
Fire a callback function at every step.
\n",
+                "itemtype": "method",
+                "name": "onStep",
+                "params": [
+                    {
+                        "name": "callback",
+                        "description": "
The name of the callback\n                            you want to fire\n                            on every beat/tatum.
\n",
+                        "type": "Function"
+                    }
+                ],
+                "class": "p5.Part",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10435,
+                "description": "
Start playback of the score.
\n",
+                "itemtype": "method",
+                "name": "start",
+                "class": "p5.Score",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10444,
+                "description": "
Stop playback of the score.
\n",
+                "itemtype": "method",
+                "name": "stop",
+                "class": "p5.Score",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10454,
+                "description": "
Pause playback of the score.
\n",
+                "itemtype": "method",
+                "name": "pause",
+                "class": "p5.Score",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10462,
+                "description": "
Loop playback of the score.
\n",
+                "itemtype": "method",
+                "name": "loop",
+                "class": "p5.Score",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10471,
+                "description": "
Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.
\n",
+                "itemtype": "method",
+                "name": "noLoop",
+                "class": "p5.Score",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10496,
+                "description": "
Set the tempo for all parts in the score
\n",
+                "itemtype": "method",
+                "name": "setBPM",
+                "params": [
+                    {
+                        "name": "BPM",
+                        "description": "
Beats Per Minute
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
Seconds from now
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Score",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10564,
+                "description": "
musicalTimeMode uses Tone.Time convention\ntrue if string, false if number
\n",
+                "itemtype": "property",
+                "name": "musicalTimeMode",
+                "type": "Boolean",
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10571,
+                "description": "
musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string
\n",
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10578,
+                "description": "
Set a limit to the number of loops to play. defaults to Infinity
\n",
+                "itemtype": "property",
+                "name": "maxIterations",
+                "type": "Number",
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10587,
+                "description": "
Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded
\n
The callback should only be called until maxIterations is reached
\n",
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10601,
+                "description": "
Start the loop
\n",
+                "itemtype": "method",
+                "name": "start",
+                "params": [
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule a starting time
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10614,
+                "description": "
Stop the loop
\n",
+                "itemtype": "method",
+                "name": "stop",
+                "params": [
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule a stopping time
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10627,
+                "description": "
Pause the loop
\n",
+                "itemtype": "method",
+                "name": "pause",
+                "params": [
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule a pausing time
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10639,
+                "description": "
Synchronize loops. Use this method to start two more more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)
\n",
+                "itemtype": "method",
+                "name": "syncedStart",
+                "params": [
+                    {
+                        "name": "otherLoop",
+                        "description": "
a p5.SoundLoop to sync with
\n",
+                        "type": "Object"
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
Start the loops in sync after timeFromNow seconds
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10720,
+                "description": "
Getters and Setters, setting any paramter will result in a change in the clock's\nfrequency, that will be reflected after the next callback\nbeats per minute (defaults to 60)
\n",
+                "itemtype": "property",
+                "name": "bpm",
+                "type": "Number",
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10738,
+                "description": "
number of quarter notes in a measure (defaults to 4)
\n",
+                "itemtype": "property",
+                "name": "timeSignature",
+                "type": "Number",
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10754,
+                "description": "
length of the loops interval
\n",
+                "itemtype": "property",
+                "name": "interval",
+                "type": "Number|String",
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10768,
+                "description": "
how many times the callback has been called so far
\n",
+                "itemtype": "property",
+                "name": "iterations",
+                "type": "Number",
+                "readonly": "",
+                "class": "p5.SoundLoop",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10809,
+                "description": "
The p5.Compressor is built with a Web Audio Dynamics Compressor Node\n  
\n",
+                "itemtype": "property",
+                "name": "compressor",
+                "type": "AudioNode",
+                "class": "p5.Compressor",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10820,
+                "description": "
Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams
\n",
+                "itemtype": "method",
+                "name": "process",
+                "params": [
+                    {
+                        "name": "src",
+                        "description": "
Sound source to be connected
\n",
+                        "type": "Object"
+                    },
+                    {
+                        "name": "attack",
+                        "description": "
The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "knee",
+                        "description": "
A decibel value representing the range above the\n                           threshold where the curve smoothly transitions to the "ratio" portion.\n                           default = 30, range 0 - 40
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "ratio",
+                        "description": "
The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "threshold",
+                        "description": "
The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "release",
+                        "description": "
The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Compressor",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10843,
+                "description": "
Set the paramters of a compressor.
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "attack",
+                        "description": "
The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "knee",
+                        "description": "
A decibel value representing the range above the\n                           threshold where the curve smoothly transitions to the "ratio" portion.\n                           default = 30, range 0 - 40
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "ratio",
+                        "description": "
The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "threshold",
+                        "description": "
The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "release",
+                        "description": "
The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1
\n",
+                        "type": "Number"
+                    }
+                ],
+                "class": "p5.Compressor",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10875,
+                "description": "
Get current attack or set value w/ time ramp
\n",
+                "itemtype": "method",
+                "name": "attack",
+                "params": [
+                    {
+                        "name": "attack",
+                        "description": "
Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n                         default = .003, range 0 - 1
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "time",
+                        "description": "
Assign time value to schedule the change in value
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Compressor",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10895,
+                "description": "
Get current knee or set value w/ time ramp
\n",
+                "itemtype": "method",
+                "name": "knee",
+                "params": [
+                    {
+                        "name": "knee",
+                        "description": "
A decibel value representing the range above the\n                       threshold where the curve smoothly transitions to the "ratio" portion.\n                       default = 30, range 0 - 40
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "time",
+                        "description": "
Assign time value to schedule the change in value
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Compressor",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10915,
+                "description": "
Get current ratio or set value w/ time ramp
\n",
+                "itemtype": "method",
+                "name": "ratio",
+                "params": [
+                    {
+                        "name": "ratio",
+                        "description": "
The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "time",
+                        "description": "
Assign time value to schedule the change in value
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Compressor",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10934,
+                "description": "
Get current threshold or set value w/ time ramp
\n",
+                "itemtype": "method",
+                "name": "threshold",
+                "params": [
+                    {
+                        "name": "threshold",
+                        "description": "
The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "time",
+                        "description": "
Assign time value to schedule the change in value
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Compressor",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10953,
+                "description": "
Get current release or set value w/ time ramp
\n",
+                "itemtype": "method",
+                "name": "release",
+                "params": [
+                    {
+                        "name": "release",
+                        "description": "
The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "time",
+                        "description": "
Assign time value to schedule the change in value
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Compressor",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 10973,
+                "description": "
Return the current reduction value
\n",
+                "itemtype": "method",
+                "name": "reduction",
+                "return": {
+                    "description": "Value of the amount of gain reduction that is applied to the signal",
+                    "type": "Number"
+                },
+                "class": "p5.Compressor",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11085,
+                "description": "
Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.
\n",
+                "itemtype": "method",
+                "name": "setInput",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "
p5.sound object or a web audio unit\n                       that outputs sound
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundRecorder",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11106,
+                "description": "
Start recording. To access the recording, provide\na p5.SoundFile as the first parameter. The p5.SoundRecorder\nwill send its recording to that p5.SoundFile for playback once\nrecording is complete. Optional parameters include duration\n(in seconds) of the recording, and a callback function that\nwill be called once the complete recording has been\ntransfered to the p5.SoundFile.
\n",
+                "itemtype": "method",
+                "name": "record",
+                "params": [
+                    {
+                        "name": "soundFile",
+                        "description": "
p5.SoundFile
\n",
+                        "type": "p5.SoundFile"
+                    },
+                    {
+                        "name": "duration",
+                        "description": "
Time (in seconds)
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "callback",
+                        "description": "
The name of a function that will be\n                              called once the recording completes
\n",
+                        "type": "Function",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.SoundRecorder",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11139,
+                "description": "
Stop the recording. Once the recording is stopped,\nthe results will be sent to the p5.SoundFile that\nwas given on .record(), and if a callback function\nwas provided on record, that function will be called.
\n",
+                "itemtype": "method",
+                "name": "stop",
+                "class": "p5.SoundRecorder",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11212,
+                "description": "
Save a p5.SoundFile as a .wav audio file.
\n",
+                "itemtype": "method",
+                "name": "saveSound",
+                "params": [
+                    {
+                        "name": "soundFile",
+                        "description": "
p5.SoundFile that you wish to save
\n",
+                        "type": "p5.SoundFile"
+                    },
+                    {
+                        "name": "name",
+                        "description": "
name of the resulting .wav file.
\n",
+                        "type": "String"
+                    }
+                ],
+                "class": "p5.SoundRecorder",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11388,
+                "description": "
isDetected is set to true when a peak is detected.
\n",
+                "itemtype": "attribute",
+                "name": "isDetected",
+                "type": "Boolean",
+                "default": "false",
+                "class": "p5.PeakDetect",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11401,
+                "description": "
The update method is run in the draw loop.
\n
Accepts an FFT object. You must call .analyze()\non the FFT object prior to updating the peakDetect\nbecause it relies on a completed FFT analysis.
\n",
+                "itemtype": "method",
+                "name": "update",
+                "params": [
+                    {
+                        "name": "fftObject",
+                        "description": "
A p5.FFT object
\n",
+                        "type": "p5.FFT"
+                    }
+                ],
+                "class": "p5.PeakDetect",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11432,
+                "description": "
onPeak accepts two arguments: a function to call when\na peak is detected. The value of the peak,\nbetween 0.0 and 1.0, is passed to the callback.
\n",
+                "itemtype": "method",
+                "name": "onPeak",
+                "params": [
+                    {
+                        "name": "callback",
+                        "description": "
Name of a function that will\n                            be called when a peak is\n                            detected.
\n",
+                        "type": "Function"
+                    },
+                    {
+                        "name": "val",
+                        "description": "
Optional value to pass\n                            into the function when\n                            a peak is detected.
\n",
+                        "type": "Object",
+                        "optional": true
+                    }
+                ],
+                "example": [
+                    "\n
\nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 0;\n\nfunction setup() {\n  cnv = createCanvas(100,100);\n  textAlign(CENTER);\n\n  soundFile = loadSound('assets/beat.mp3');\n  fft = new p5.FFT();\n  peakDetect = new p5.PeakDetect();\n\n  setupSound();\n\n  // when a beat is detected, call triggerBeat()\n  peakDetect.onPeak(triggerBeat);\n}\n\nfunction draw() {\n  background(0);\n  fill(255);\n  text('click to play', width/2, height/2);\n\n  fft.analyze();\n  peakDetect.update(fft);\n\n  ellipseWidth *= 0.95;\n  ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// this function is called by peakDetect.onPeak\nfunction triggerBeat() {\n  ellipseWidth = 50;\n}\n\n// mouseclick starts/stops sound\nfunction setupSound() {\n  cnv.mouseClicked( function() {\n    if (soundFile.isPlaying() ) {\n      soundFile.stop();\n    } else {\n      soundFile.play();\n    }\n  });\n}\n
"
+                ],
+                "class": "p5.PeakDetect",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11578,
+                "description": "
Connect a source to the gain node.
\n",
+                "itemtype": "method",
+                "name": "setInput",
+                "params": [
+                    {
+                        "name": "src",
+                        "description": "
p5.sound / Web Audio object with a sound\n                         output.
\n",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.Gain",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11588,
+                "description": "
Send output to a p5.sound or web audio object
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.Gain",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11598,
+                "description": "
Disconnect all output.
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.Gain",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11606,
+                "description": "
Set the output level of the gain node.
\n",
+                "itemtype": "method",
+                "name": "amp",
+                "params": [
+                    {
+                        "name": "volume",
+                        "description": "
amplitude between 0 and 1.0
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
create a fade that lasts rampTime
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "timeFromNow",
+                        "description": "
schedule this event to happen\n                              seconds from now
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.Gain",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11684,
+                "description": "
Connect to p5 objects or Web Audio Nodes
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.AudioVoice",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11693,
+                "description": "
Disconnect from soundOut
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.AudioVoice",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11761,
+                "description": "
Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.
\n",
+                "itemtype": "method",
+                "name": "play",
+                "params": [
+                    {
+                        "name": "note",
+                        "description": "
the note you want to play, specified as a\n                               frequency in Hertz (Number) or as a midi\n                               value in Note/Octave format ("C4", "Eb3"...etc")\n                               See \n                               Tone. Defaults to 440 hz.
\n",
+                        "type": "String | Number"
+                    },
+                    {
+                        "name": "velocity",
+                        "description": "
velocity of the note to play (ranging from 0 to 1)
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
time from now (in seconds) at which to play
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "sustainTime",
+                        "description": "
time to sustain before releasing the envelope
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11783,
+                "description": "
Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.
\n",
+                "params": [
+                    {
+                        "name": "note",
+                        "description": "
the note you want to play, specified as a\n                               frequency in Hertz (Number) or as a midi\n                               value in Note/Octave format ("C4", "Eb3"...etc")\n                               See \n                               Tone. Defaults to 440 hz
\n",
+                        "type": "String | Number"
+                    },
+                    {
+                        "name": "velocity",
+                        "description": "
velocity of the note to play (ranging from 0 to 1)
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
time from now (in seconds) at which to play
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "itemtype": "method",
+                "name": "triggerAttack",
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11806,
+                "description": "
Trigger the release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.
\n",
+                "params": [
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
time to trigger the release
\n",
+                        "type": "Number"
+                    }
+                ],
+                "itemtype": "method",
+                "name": "triggerRelease",
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11819,
+                "description": "
Set values like a traditional\n\nADSR envelope\n.
\n",
+                "itemtype": "method",
+                "name": "setADSR",
+                "params": [
+                    {
+                        "name": "attackTime",
+                        "description": "
Time (in seconds before envelope\n                              reaches Attack Level
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "decayTime",
+                        "description": "
Time (in seconds) before envelope\n                              reaches Decay/Sustain Level
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "susRatio",
+                        "description": "
Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n                              where 1.0 = attackLevel, 0.0 = releaseLevel.\n                              The susRatio determines the decayLevel and the level at which the\n                              sustain portion of the envelope will sustain.\n                              For example, if attackLevel is 0.4, releaseLevel is 0,\n                              and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n                              increased to 1.0 (using setRange),\n                              then decayLevel would increase proportionally, to become 0.5.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "releaseTime",
+                        "description": "
Time in seconds from now (defaults to 0)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11843,
+                "description": "
Getters and Setters
\n",
+                "itemtype": "property",
+                "name": "attack",
+                "type": "Number",
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11847,
+                "itemtype": "property",
+                "name": "decay",
+                "type": "Number",
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11850,
+                "itemtype": "property",
+                "name": "sustain",
+                "type": "Number",
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11853,
+                "itemtype": "property",
+                "name": "release",
+                "type": "Number",
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11890,
+                "description": "
MonoSynth amp
\n",
+                "itemtype": "method",
+                "name": "amp",
+                "params": [
+                    {
+                        "name": "vol",
+                        "description": "
desired volume
\n",
+                        "type": "Number"
+                    },
+                    {
+                        "name": "rampTime",
+                        "description": "
Time to reach new volume
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "return": {
+                    "description": "new volume value",
+                    "type": "Number"
+                },
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11904,
+                "description": "
Connect to a p5.sound / Web Audio object.
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "
A p5.sound or Web Audio object
\n",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11914,
+                "description": "
Disconnect all outputs
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11922,
+                "description": "
Get rid of the MonoSynth and free up its resources / memory.
\n",
+                "itemtype": "method",
+                "name": "dispose",
+                "class": "p5.MonoSynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11974,
+                "description": "
An object that holds information about which notes have been played and\nwhich notes are currently being played. New notes are added as keys\non the fly. While a note has been attacked, but not released, the value of the\nkey is the audiovoice which is generating that note. When notes are released,\nthe value of the key becomes undefined.
\n",
+                "itemtype": "property",
+                "name": "notes",
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11986,
+                "description": "
A PolySynth must have at least 1 voice, defaults to 8
\n",
+                "itemtype": "property",
+                "name": "polyvalue",
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 11991,
+                "description": "
Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.
\n",
+                "itemtype": "property",
+                "name": "AudioVoice",
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12022,
+                "description": "
Play a note by triggering noteAttack and noteRelease with sustain time
\n",
+                "itemtype": "method",
+                "name": "play",
+                "params": [
+                    {
+                        "name": "note",
+                        "description": "
midi note to play (ranging from 0 to 127 - 60 being a middle C)
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "velocity",
+                        "description": "
velocity of the note to play (ranging from 0 to 1)
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
time from now (in seconds) at which to play
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "sustainTime",
+                        "description": "
time to sustain before releasing the envelope
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12036,
+                "description": "
noteADSR sets the envelope for a specific note that has just been triggered.\nUsing this method modifies the envelope of whichever audiovoice is being used\nto play the desired note. The envelope should be reset before noteRelease is called\nin order to prevent the modified envelope from being used on other notes.
\n",
+                "itemtype": "method",
+                "name": "noteADSR",
+                "params": [
+                    {
+                        "name": "note",
+                        "description": "
Midi note on which ADSR should be set.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "attackTime",
+                        "description": "
Time (in seconds before envelope\n                              reaches Attack Level
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "decayTime",
+                        "description": "
Time (in seconds) before envelope\n                              reaches Decay/Sustain Level
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "susRatio",
+                        "description": "
Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n                              where 1.0 = attackLevel, 0.0 = releaseLevel.\n                              The susRatio determines the decayLevel and the level at which the\n                              sustain portion of the envelope will sustain.\n                              For example, if attackLevel is 0.4, releaseLevel is 0,\n                              and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n                              increased to 1.0 (using setRange),\n                              then decayLevel would increase proportionally, to become 0.5.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "releaseTime",
+                        "description": "
Time in seconds from now (defaults to 0)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12064,
+                "description": "
Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.
\n",
+                "itemtype": "method",
+                "name": "setADSR",
+                "params": [
+                    {
+                        "name": "note",
+                        "description": "
Midi note on which ADSR should be set.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "attackTime",
+                        "description": "
Time (in seconds before envelope\n                               reaches Attack Level
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "decayTime",
+                        "description": "
Time (in seconds) before envelope\n                               reaches Decay/Sustain Level
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "susRatio",
+                        "description": "
Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n                               where 1.0 = attackLevel, 0.0 = releaseLevel.\n                               The susRatio determines the decayLevel and the level at which the\n                               sustain portion of the envelope will sustain.\n                               For example, if attackLevel is 0.4, releaseLevel is 0,\n                               and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n                               increased to 1.0 (using setRange),\n                               then decayLevel would increase proportionally, to become 0.5.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "releaseTime",
+                        "description": "
Time in seconds from now (defaults to 0)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12089,
+                "description": "
Trigger the Attack, and Decay portion of a MonoSynth.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.
\n",
+                "itemtype": "method",
+                "name": "noteAttack",
+                "params": [
+                    {
+                        "name": "note",
+                        "description": "
midi note on which attack should be triggered.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "velocity",
+                        "description": "
velocity of the note to play (ranging from 0 to 1)/
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
time from now (in seconds)
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12162,
+                "description": "
Trigger the Release of an AudioVoice note. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.
\n",
+                "itemtype": "method",
+                "name": "noteRelease",
+                "params": [
+                    {
+                        "name": "note",
+                        "description": "
midi note on which attack should be triggered.
\n",
+                        "type": "Number",
+                        "optional": true
+                    },
+                    {
+                        "name": "secondsFromNow",
+                        "description": "
time to trigger the release
\n",
+                        "type": "Number",
+                        "optional": true
+                    }
+                ],
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12192,
+                "description": "
Connect to a p5.sound / Web Audio object.
\n",
+                "itemtype": "method",
+                "name": "connect",
+                "params": [
+                    {
+                        "name": "unit",
+                        "description": "
A p5.sound or Web Audio object
\n",
+                        "type": "Object"
+                    }
+                ],
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12202,
+                "description": "
Disconnect all outputs
\n",
+                "itemtype": "method",
+                "name": "disconnect",
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12210,
+                "description": "
Get rid of the MonoSynth and free up its resources / memory.
\n",
+                "itemtype": "method",
+                "name": "dispose",
+                "class": "p5.PolySynth",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12276,
+                "description": "
The p5.Distortion is built with a\n\nWeb Audio WaveShaper Node.
\n",
+                "itemtype": "property",
+                "name": "WaveShaperNode",
+                "type": "AudioNode",
+                "class": "p5.Distortion",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12291,
+                "description": "
Process a sound source, optionally specify amount and oversample values.
\n",
+                "itemtype": "method",
+                "name": "process",
+                "params": [
+                    {
+                        "name": "amount",
+                        "description": "
Unbounded distortion amount.\n                               Normal values range from 0-1.
\n",
+                        "type": "Number",
+                        "optional": true,
+                        "optdefault": "0.25"
+                    },
+                    {
+                        "name": "oversample",
+                        "description": "
'none', '2x', or '4x'.
\n",
+                        "type": "String",
+                        "optional": true,
+                        "optdefault": "'none'"
+                    }
+                ],
+                "class": "p5.Distortion",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12303,
+                "description": "
Set the amount and oversample of the waveshaper distortion.
\n",
+                "itemtype": "method",
+                "name": "set",
+                "params": [
+                    {
+                        "name": "amount",
+                        "description": "
Unbounded distortion amount.\n                               Normal values range from 0-1.
\n",
+                        "type": "Number",
+                        "optional": true,
+                        "optdefault": "0.25"
+                    },
+                    {
+                        "name": "oversample",
+                        "description": "
'none', '2x', or '4x'.
\n",
+                        "type": "String",
+                        "optional": true,
+                        "optdefault": "'none'"
+                    }
+                ],
+                "class": "p5.Distortion",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12321,
+                "description": "
Return the distortion amount, typically between 0-1.
\n",
+                "itemtype": "method",
+                "name": "getAmount",
+                "return": {
+                    "description": "Unbounded distortion amount.\n                 Normal values range from 0-1.",
+                    "type": "Number"
+                },
+                "class": "p5.Distortion",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            },
+            {
+                "file": "lib/addons/p5.sound.js",
+                "line": 12331,
+                "description": "
Return the oversampling.
\n",
+                "itemtype": "method",
+                "name": "getOversample",
+                "return": {
+                    "description": "Oversample can either be 'none', '2x', or '4x'.",
+                    "type": "String"
+                },
+                "class": "p5.Distortion",
+                "module": "p5.sound",
+                "submodule": "p5.sound"
+            }
+        ],
+        "warnings": [
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:16"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:61"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:91"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:121"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:320"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:351"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:388"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:485"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:515"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/creating_reading.js:555"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/p5.Color.js:54"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/p5.Color.js:83"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/p5.Color.js:110"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/p5.Color.js:137"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/p5.Color.js:164"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/p5.Color.js:595"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/setting.js:15"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/setting.js:185"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/setting.js:223"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/setting.js:344"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/setting.js:495"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/setting.js:536"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/color/setting.js:576"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/2d_primitives.js:16"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/2d_primitives.js:134"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/2d_primitives.js:190"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/2d_primitives.js:246"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/2d_primitives.js:281"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/2d_primitives.js:335"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/2d_primitives.js:406"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/attributes.js:14"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/attributes.js:83"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/attributes.js:111"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/attributes.js:180"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/attributes.js:209"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/attributes.js:246"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/attributes.js:313"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/constants.js:34"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/constants.js:53"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/constants.js:72"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/constants.js:91"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/constants.js:110"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/core.js:49"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/core.js:87"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/core.js:118"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/core.js:401"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/curves.js:13"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/curves.js:92"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/curves.js:119"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/curves.js:174"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/curves.js:253"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/curves.js:344"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/curves.js:371"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/curves.js:466"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:22"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:49"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:77"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:109"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:170"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:268"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:293"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:310"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:327"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:343"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:359"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:437"
+            },
+            {
+                "message": "replacing incorrect tag: returns with return",
+                "line": " src/core/environment.js:488"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:488"
+            },
+            {
+                "message": "replacing incorrect tag: returns with return",
+                "line": " src/core/environment.js:534"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:534"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:591"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:622"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/environment.js:645"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:53"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:118"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:155"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:190"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:240"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:289"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:355"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:408"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:462"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:521"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:564"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:631"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:666"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:708"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:757"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:798"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:848"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:886"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/p5.Element.js:924"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/rendering.js:16"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/rendering.js:116"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/rendering.js:169"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/rendering.js:192"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/rendering.js:231"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/structure.js:15"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/structure.js:77"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/structure.js:132"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/structure.js:211"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/structure.js:282"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:14"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:136"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:162"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:208"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:240"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:272"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:304"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:379"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:421"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/transform.js:463"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/vertex.js:22"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/vertex.js:70"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/vertex.js:269"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/vertex.js:335"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/vertex.js:378"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/vertex.js:438"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/vertex.js:523"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/core/vertex.js:601"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/acceleration.js:91"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/acceleration.js:125"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/acceleration.js:158"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/acceleration.js:194"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/acceleration.js:239"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/acceleration.js:283"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/acceleration.js:376"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/acceleration.js:407"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/acceleration.js:466"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/keyboard.js:18"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/keyboard.js:45"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/keyboard.js:74"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/keyboard.js:107"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/keyboard.js:198"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/keyboard.js:254"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/keyboard.js:318"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:22"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:48"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:74"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:105"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:135"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:172"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:209"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:249"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:290"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:329"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:418"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:462"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:532"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:598"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:665"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:724"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/mouse.js:782"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/touch.js:57"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/touch.js:120"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/events/touch.js:182"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/image.js:18"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/image.js:98"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/image.js:178"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/loading_displaying.js:17"
+            },
+            {
+                "message": "replacing incorrect tag: returns with return",
+                "line": " src/image/loading_displaying.js:108"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/loading_displaying.js:125"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/loading_displaying.js:296"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/loading_displaying.js:391"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/loading_displaying.js:457"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:91"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:118"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:152"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:232"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:268"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:316"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:361"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:399"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:483"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:563"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:626"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:662"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/p5.Image.js:784"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/pixels.js:14"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/pixels.js:83"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/pixels.js:176"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/pixels.js:235"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/pixels.js:413"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/pixels.js:489"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/pixels.js:525"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/image/pixels.js:599"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/files.js:19"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/files.js:154"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/files.js:253"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/files.js:586"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/files.js:1290"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/files.js:1341"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/files.js:1402"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:57"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:120"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:168"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:214"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:263"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:328"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:491"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:544"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:586"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:746"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:812"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:861"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:922"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:969"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:1014"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.Table.js:1063"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/io/p5.XML.js:11"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:12"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:36"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:76"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:121"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:190"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:240"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:279"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:324"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:379"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:418"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:474"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:524"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:574"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:627"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:661"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:700"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/calculation.js:747"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/math.js:12"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/noise.js:40"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/noise.js:187"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/noise.js:253"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/p5.Vector.js:13"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/random.js:48"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/random.js:79"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/random.js:166"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/trigonometry.js:134"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/trigonometry.js:174"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/trigonometry.js:206"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/trigonometry.js:238"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/math/trigonometry.js:320"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/typography/attributes.js:13"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/typography/attributes.js:59"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/typography/attributes.js:96"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/typography/attributes.js:127"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/typography/attributes.js:161"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/typography/loading_displaying.js:16"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/typography/loading_displaying.js:142"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/typography/loading_displaying.js:199"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/typography/p5.Font.js:45"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/conversion.js:12"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/string_functions.js:15"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/string_functions.js:44"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/string_functions.js:132"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/string_functions.js:237"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/string_functions.js:313"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/string_functions.js:375"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/string_functions.js:437"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/string_functions.js:526"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/time_date.js:12"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/time_date.js:34"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/time_date.js:56"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/time_date.js:78"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/time_date.js:101"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/time_date.js:123"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/utilities/time_date.js:145"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/camera.js:12"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/camera.js:159"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/camera.js:239"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/light.js:12"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/light.js:93"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/light.js:197"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/loading.js:14"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/loading.js:212"
+            },
+            {
+                "message": "replacing incorrect tag: returns with return",
+                "line": " src/webgl/material.js:56"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/material.js:56"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/material.js:145"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/material.js:178"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/material.js:273"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/material.js:320"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/p5.RendererGL.js:199"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/p5.RendererGL.js:438"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/p5.RendererGL.js:485"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/p5.RendererGL.js:525"
+            },
+            {
+                "message": "unknown tag: alt",
+                "line": " src/webgl/primitives.js:13"
+            },
+            {
+                "message": "replacing incorrect tag: params with param",
+                "line": " lib/addons/p5.sound.js:1567"
+            },
+            {
+                "message": "replacing incorrect tag: returns with return",
+                "line": " lib/addons/p5.sound.js:1567"
+            },
+            {
+                "message": "replacing incorrect tag: returns with return",
+                "line": " lib/addons/p5.sound.js:7272"
+            },
+            {
+                "message": "replacing incorrect tag: returns with return",
+                "line": " lib/addons/p5.sound.js:9222"
+            },
+            {
+                "message": "Missing item type\nConversions adapted from .\n\nIn these functions, hue is always in the range [0,1); all other components\nare in the range [0,1]. 'Brightness' and 'value' are used interchangeably.",
+                "line": " src/color/color_conversion.js:10"
+            },
+            {
+                "message": "Missing item type\nConvert an HSBA array to HSLA.",
+                "line": " src/color/color_conversion.js:20"
+            },
+            {
+                "message": "Missing item type\nConvert an HSBA array to RGBA.",
+                "line": " src/color/color_conversion.js:46"
+            },
+            {
+                "message": "Missing item type\nConvert an HSLA array to HSBA.",
+                "line": " src/color/color_conversion.js:101"
+            },
+            {
+                "message": "Missing item type\nConvert an HSLA array to RGBA.\n\nWe need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.",
+                "line": " src/color/color_conversion.js:124"
+            },
+            {
+                "message": "Missing item type\nConvert an RGBA array to HSBA.",
+                "line": " src/color/color_conversion.js:188"
+            },
+            {
+                "message": "Missing item type\nConvert an RGBA array to HSLA.",
+                "line": " src/color/color_conversion.js:227"
+            },
+            {
+                "message": "Missing item type\nHue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.",
+                "line": " src/color/p5.Color.js:242"
+            },
+            {
+                "message": "Missing item type\nSaturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.",
+                "line": " src/color/p5.Color.js:273"
+            },
+            {
+                "message": "Missing item type\nCSS named colors.",
+                "line": " src/color/p5.Color.js:292"
+            },
+            {
+                "message": "Missing item type\nThese regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.\n\nNote that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.",
+                "line": " src/color/p5.Color.js:445"
+            },
+            {
+                "message": "Missing item type\nFull color string patterns. The capture groups are necessary.",
+                "line": " src/color/p5.Color.js:458"
+            },
+            {
+                "message": "Missing item type\nFor a number of different inputs, returns a color formatted as [r, g, b, a]\narrays, with each component normalized between 0 and 1.",
+                "line": " src/color/p5.Color.js:595"
+            },
+            {
+                "message": "Missing item type\nFor HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.",
+                "line": " src/color/p5.Color.js:812"
+            },
+            {
+                "message": "Missing item type",
+                "line": " src/core/canvas.js:1"
+            },
+            {
+                "message": "Missing item type\nReturns the current framerate.",
+                "line": " src/core/environment.js:242"
+            },
+            {
+                "message": "Missing item type\nSpecifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within setup() is\nrecommended. The default rate is 60 frames per second.\n\nCalling frameRate() with no arguments returns the current framerate.",
+                "line": " src/core/environment.js:252"
+            },
+            {
+                "message": "Missing item type",
+                "line": " src/core/error_helpers.js:1"
+            },
+            {
+                "message": "Missing item type\nPrints out a fancy, colorful message to the console log",
+                "line": " src/core/error_helpers.js:65"
+            },
+            {
+                "message": "Missing item type\nValidates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments\n\nexample:\n var a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"\n\nexample:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"",
+                "line": " src/core/error_helpers.js:397"
+            },
+            {
+                "message": "Missing item type\nPrints out all the colors in the color pallete with white text.\nFor color blindness testing.",
+                "line": " src/core/error_helpers.js:449"
+            },
+            {
+                "message": "Missing item type\n_globalInit\n\nTODO: ???\nif sketch is on window\nassume \"global\" mode\nand instantiate p5 automatically\notherwise do nothing",
+                "line": " src/core/init.js:5"
+            },
+            {
+                "message": "Missing item type\nHelper fxn for sharing pixel methods",
+                "line": " src/core/p5.Element.js:1059"
+            },
+            {
+                "message": "Missing item type\nResize our canvas element.",
+                "line": " src/core/p5.Renderer.js:63"
+            },
+            {
+                "message": "Missing item type\nHelper fxn to check font type (system or otf)",
+                "line": " src/core/p5.Renderer.js:132"
+            },
+            {
+                "message": "Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178",
+                "line": " src/core/p5.Renderer.js:185"
+            },
+            {
+                "message": "Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer",
+                "line": " src/core/p5.Renderer2D.js:10"
+            },
+            {
+                "message": "Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee www.joecridge.me/bezier.pdf for an explanation of the method.",
+                "line": " src/core/p5.Renderer2D.js:404"
+            },
+            {
+                "message": "Missing item type\nshim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.",
+                "line": " src/core/shim.js:70"
+            },
+            {
+                "message": "Missing item type\nprivate helper function to handle the user passing objects in\nduring construction or calls to create()",
+                "line": " src/data/p5.TypedDict.js:187"
+            },
+            {
+                "message": "Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type",
+                "line": " src/data/p5.TypedDict.js:367"
+            },
+            {
+                "message": "Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type",
+                "line": " src/data/p5.TypedDict.js:414"
+            },
+            {
+                "message": "Missing item type\nprivate helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'",
+                "line": " src/data/p5.TypedDict.js:531"
+            },
+            {
+                "message": "Missing item type\nprivate helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'",
+                "line": " src/data/p5.TypedDict.js:596"
+            },
+            {
+                "message": "Missing item type\n_updatePAccelerations updates the pAcceleration values",
+                "line": " src/events/acceleration.js:80"
+            },
+            {
+                "message": "Missing item type\nHolds the key codes of currently pressed keys.",
+                "line": " src/events/keyboard.js:12"
+            },
+            {
+                "message": "Missing item type\nThe onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.",
+                "line": " src/events/keyboard.js:308"
+            },
+            {
+                "message": "Missing item type\nThe checkDownKeys function returns a boolean true if any keys pressed\nand a false if no keys are currently pressed.\n\nHelps avoid instances where a multiple keys are pressed simultaneously and\nreleasing a single key will then switch the\nkeyIsPressed property to true.",
+                "line": " src/events/keyboard.js:370"
+            },
+            {
+                "message": "Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.",
+                "line": " src/image/filters.js:3"
+            },
+            {
+                "message": "Missing item type\nReturns the pixel buffer for a canvas",
+                "line": " src/image/filters.js:26"
+            },
+            {
+                "message": "Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.",
+                "line": " src/image/filters.js:46"
+            },
+            {
+                "message": "Missing item type\nModifies pixels RGBA values to values contained in the data object.",
+                "line": " src/image/filters.js:67"
+            },
+            {
+                "message": "Missing item type\nReturns the ImageData object for a canvas\nhttps://developer.mozilla.org/en-US/docs/Web/API/ImageData",
+                "line": " src/image/filters.js:87"
+            },
+            {
+                "message": "Missing item type\nReturns a blank ImageData object.",
+                "line": " src/image/filters.js:107"
+            },
+            {
+                "message": "Missing item type\nApplys a filter function to a canvas.\n\nThe difference between this and the actual filter functions defined below\nis that the filter functions generally modify the pixel buffer but do\nnot actually put that data back to the canvas (where it would actually\nupdate what is visible). By contrast this method does make the changes\nactually visible in the canvas.\n\nThe apply method is the method that callers of this module would generally\nuse. It has been separated from the actual filters to support an advanced\nuse case of creating a filter chain that executes without actually updating\nthe canvas in between everystep.",
+                "line": " src/image/filters.js:122"
+            },
+            {
+                "message": "Missing item type\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/",
+                "line": " src/image/filters.js:159"
+            },
+            {
+                "message": "Missing item type\nConverts any colors in the image to grayscale equivalents.\nNo parameter is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/",
+                "line": " src/image/filters.js:193"
+            },
+            {
+                "message": "Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.",
+                "line": " src/image/filters.js:216"
+            },
+            {
+                "message": "Missing item type\nSets each pixel to its inverse value. No parameter is used.",
+                "line": " src/image/filters.js:232"
+            },
+            {
+                "message": "Missing item type\nLimits each channel of the image to the number of colors specified as\nthe parameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.\n\nAdapted from java based processing implementation",
+                "line": " src/image/filters.js:247"
+            },
+            {
+                "message": "Missing item type\nreduces the bright areas in an image",
+                "line": " src/image/filters.js:279"
+            },
+            {
+                "message": "Missing item type\nincreases the bright areas in an image",
+                "line": " src/image/filters.js:367"
+            },
+            {
+                "message": "Missing item type\nThis module defines the p5 methods for the p5.Image class\nfor drawing images to the main display canvas.",
+                "line": " src/image/image.js:8"
+            },
+            {
+                "message": "Missing item type\nValidates clipping params. Per drawImage spec sWidth and sHight cannot be\nnegative or greater than image intrinsic width and height",
+                "line": " src/image/loading_displaying.js:108"
+            },
+            {
+                "message": "Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.",
+                "line": " src/image/loading_displaying.js:420"
+            },
+            {
+                "message": "Missing item type\nThis module defines the p5.Image class and P5 methods for\ndrawing images to the main display canvas.",
+                "line": " src/image/p5.Image.js:9"
+            },
+            {
+                "message": "Missing item type\nHelper fxn for sharing pixel methods",
+                "line": " src/image/p5.Image.js:223"
+            },
+            {
+                "message": "Missing item type\nGenerate a blob of file data as a url to prepare for download.\nAccepts an array of data, a filename, and an extension (optional).\nThis is a private function because it does not do any formatting,\nbut it is used by saveStrings, saveJSON, saveTable etc.",
+                "line": " src/io/files.js:1527"
+            },
+            {
+                "message": "Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.",
+                "line": " src/io/files.js:1595"
+            },
+            {
+                "message": "Missing item type\nReturns true if the browser is Safari, false if not.\nSafari makes trouble for downloading files.",
+                "line": " src/io/files.js:1628"
+            },
+            {
+                "message": "Missing item type\nHelper function, a callback for download that deletes\nan invisible anchor element from the DOM once the file\nhas been automatically downloaded.",
+                "line": " src/io/files.js:1640"
+            },
+            {
+                "message": "Missing item type\nTable Options\n
Generic class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.
\n
CSV files are\n\ncomma separated values, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.
\n
File names should end with .csv if they're comma separated.
\n
A rough \"spec\" for CSV can be found\nhere.
\n
To load files, use the loadTable method.
\n
To save tables to your computer, use the save method\n or the saveTable method.
\n\nPossible options include:\n
    \n
  • csv - parse the table as comma-separated values\n
  • tsv - parse the table as tab-separated values\n
  • header - this table has a header (title) row\n
",
+                "line": " src/io/p5.Table.js:11"
+            },
+            {
+                "message": "Missing item type\nThis method is called while the parsing of XML (when loadXML() is\ncalled). The difference between this method and the setContent()\nmethod defined later is that this one is used to set the content\nwhen the node in question has more nodes under it and so on and\nnot directly text content. While in the other one is used when\nthe node in question directly has text inside it.",
+                "line": " src/io/p5.XML.js:767"
+            },
+            {
+                "message": "Missing item type\nThis method is called while the parsing of XML (when loadXML() is\ncalled). The XML node is passed and its attributes are stored in the\np5.XML's attribute Object.",
+                "line": " src/io/p5.XML.js:784"
+            },
+            {
+                "message": "Missing item type\nMultiplies a vector by a scalar and returns a new vector.",
+                "line": " src/math/p5.Vector.js:1090"
+            },
+            {
+                "message": "Missing item type\nDivides a vector by a scalar and returns a new vector.",
+                "line": " src/math/p5.Vector.js:1117"
+            },
+            {
+                "message": "Missing item type\nCalculates the dot product of two vectors.",
+                "line": " src/math/p5.Vector.js:1144"
+            },
+            {
+                "message": "Missing item type\nCalculates the cross product of two vectors.",
+                "line": " src/math/p5.Vector.js:1158"
+            },
+            {
+                "message": "Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).",
+                "line": " src/math/p5.Vector.js:1172"
+            },
+            {
+                "message": "Missing item type\nLinear interpolate a vector to another vector and return the result as a\nnew vector.",
+                "line": " src/math/p5.Vector.js:1187"
+            },
+            {
+                "message": "Missing item type\nHelper function to measure ascent and descent.",
+                "line": " src/typography/attributes.js:251"
+            },
+            {
+                "message": "Missing item type\nReturns the set of opentype glyphs for the supplied string.\n\nNote that there is not a strict one-to-one mapping between characters\nand glyphs, so the list of returned glyphs can be larger or smaller\n than the length of the given string.",
+                "line": " src/typography/p5.Font.js:259"
+            },
+            {
+                "message": "Missing item type\nReturns an opentype path for the supplied string and position.",
+                "line": " src/typography/p5.Font.js:274"
+            },
+            {
+                "message": "Missing item type\nParse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:\n\nv -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5\n\nf 4 3 2 1",
+                "line": " src/webgl/loading.js:103"
+            },
+            {
+                "message": "Missing item type",
+                "line": " src/webgl/material.js:367"
+            },
+            {
+                "message": "Missing item type\nCreate a 2D array for establishing stroke connections",
+                "line": " src/webgl/p5.Geometry.js:175"
+            },
+            {
+                "message": "Missing item type\nCreate 4 vertices for each stroke line, two at the beginning position\nand two at the end position. These vertices are displaced relative to\nthat line's normal on the GPU",
+                "line": " src/webgl/p5.Geometry.js:195"
+            },
+            {
+                "message": "Missing item type",
+                "line": " src/webgl/p5.Matrix.js:1"
+            },
+            {
+                "message": "Missing item type\nPRIVATE",
+                "line": " src/webgl/p5.Matrix.js:682"
+            },
+            {
+                "message": "Missing item type\nWelcome to RendererGL Immediate Mode.\nImmediate mode is used for drawing custom shapes\nfrom a set of vertices.  Immediate Mode is activated\nwhen you call beginShape() & de-activated when you call endShape().\nImmediate mode is a style of programming borrowed\nfrom OpenGL's (now-deprecated) immediate mode.\nIt differs from p5.js' default, Retained Mode, which caches\ngeometries and buffers on the CPU to reduce the number of webgl\ndraw calls. Retained mode is more efficient & performative,\nhowever, Immediate Mode is useful for sketching quick\ngeometric ideas.",
+                "line": " src/webgl/p5.RendererGL.Immediate.js:1"
+            },
+            {
+                "message": "Missing item type\nEnd shape drawing and render vertices to screen.",
+                "line": " src/webgl/p5.RendererGL.Immediate.js:104"
+            },
+            {
+                "message": "Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered",
+                "line": " src/webgl/p5.RendererGL.Retained.js:8"
+            },
+            {
+                "message": "Missing item type\ncreateBuffers description",
+                "line": " src/webgl/p5.RendererGL.Retained.js:47"
+            },
+            {
+                "message": "Missing item type\nDraws buffers given a geometry key ID",
+                "line": " src/webgl/p5.RendererGL.Retained.js:191"
+            },
+            {
+                "message": "Missing item type\nmodel view, projection, & normal\nmatrices",
+                "line": " src/webgl/p5.RendererGL.js:79"
+            },
+            {
+                "message": "Missing item type\n[background description]",
+                "line": " src/webgl/p5.RendererGL.js:416"
+            },
+            {
+                "message": "Missing item type\n[resize description]",
+                "line": " src/webgl/p5.RendererGL.js:652"
+            },
+            {
+                "message": "Missing item type\nclears color and depth buffers\nwith r,g,b,a",
+                "line": " src/webgl/p5.RendererGL.js:682"
+            },
+            {
+                "message": "Missing item type\n[translate description]",
+                "line": " src/webgl/p5.RendererGL.js:696"
+            },
+            {
+                "message": "Missing item type\nScales the Model View Matrix by a vector",
+                "line": " src/webgl/p5.RendererGL.js:715"
+            },
+            {
+                "message": "Missing item type\npushes a copy of the model view matrix onto the\nMV Matrix stack.",
+                "line": " src/webgl/p5.RendererGL.js:751"
+            },
+            {
+                "message": "Missing item type\n[pop description]",
+                "line": " src/webgl/p5.RendererGL.js:760"
+            },
+            {
+                "message": "Missing item type\nturn a two dimensional array into one dimensional array",
+                "line": " src/webgl/p5.RendererGL.js:991"
+            },
+            {
+                "message": "Missing item type\nturn a p5.Vector Array into a one dimensional number array",
+                "line": " src/webgl/p5.RendererGL.js:1028"
+            },
+            {
+                "message": "Missing item type",
+                "line": " src/webgl/primitives.js:250"
+            },
+            {
+                "message": "Missing item type\nDraw a line given two points",
+                "line": " src/webgl/primitives.js:938"
+            },
+            {
+                "message": "Missing item type\nHelper function for select and selectAll",
+                "line": " lib/addons/p5.dom.js:162"
+            },
+            {
+                "message": "Missing item type\nHelper function for getElement and getElements.",
+                "line": " lib/addons/p5.dom.js:178"
+            },
+            {
+                "message": "Missing item type\nHelpers for create methods.",
+                "line": " lib/addons/p5.dom.js:239"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.dom.js:370"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.dom.js:891"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.dom.js:967"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.dom.js:1007"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.dom.js:2572"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.dom.js:2638"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.dom.js:2700"
+            },
+            {
+                "message": "Missing item type\np5.sound\nhttps://p5js.org/reference/#/libraries/p5.sound\n\nFrom the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors\n\nMIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE\n\nSome of the many audio libraries & resources that inspire p5.sound:\n - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js\n - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/\n - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0\n - wavesurfer.js https://github.com/katspaugh/wavesurfer.js\n - Web Audio Components by Jordan Santell https://github.com/web-audio-components\n - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound\n\n Web Audio API: http://w3.org/TR/webaudio/",
+                "line": " lib/addons/p5.sound.js:46"
+            },
+            {
+                "message": "Missing item type\nDetermine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats",
+                "line": " lib/addons/p5.sound.js:226"
+            },
+            {
+                "message": "Missing item type\nMaster contains AudioContext and the master sound output.",
+                "line": " lib/addons/p5.sound.js:296"
+            },
+            {
+                "message": "Missing item type\na silent connection to the DesinationNode\nwhich will ensure that anything connected to it\nwill not be garbage collected",
+                "line": " lib/addons/p5.sound.js:391"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:407"
+            },
+            {
+                "message": "Missing item type\nUsed by Osc and Env to chain signal math",
+                "line": " lib/addons/p5.sound.js:583"
+            },
+            {
+                "message": "Missing item type\nThis is a helper function that the p5.SoundFile calls to load\nitself. Accepts a callback (the name of another function)\nas an optional parameter.",
+                "line": " lib/addons/p5.sound.js:903"
+            },
+            {
+                "message": "Missing item type\nStop playback on all of this soundfile's sources.",
+                "line": " lib/addons/p5.sound.js:1304"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:1741"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:2022"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:3022"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:3399"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:3420"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:3479"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:3797"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:3969"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4127"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4168"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4238"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4426"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4483"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4651"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4699"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4730"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4751"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:4771"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:5478"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:5681"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7363"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7379"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7403"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7429"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7451"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7473"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7519"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7550"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7568"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7905"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:7927"
+            },
+            {
+                "message": "Missing item type\nThe p5.Effect class is built\n  using Tone.js CrossFade",
+                "line": " lib/addons/p5.sound.js:7997"
+            },
+            {
+                "message": "Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter",
+                "line": " lib/addons/p5.sound.js:8003"
+            },
+            {
+                "message": "Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ",
+                "line": " lib/addons/p5.sound.js:8381"
+            },
+            {
+                "message": "Missing item type\nInspired by Simple Reverb by Jordan Santell\nhttps://github.com/web-audio-components/simple-reverb/blob/master/index.js\n\nUtility function for building an impulse response\nbased on the module parameters.",
+                "line": " lib/addons/p5.sound.js:9471"
+            },
+            {
+                "message": "Missing item type\nPrivate method to load a buffer as an Impulse Response,\nassign it to the convolverNode, and add to the Array of .impulses.",
+                "line": " lib/addons/p5.sound.js:9635"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:9821"
+            },
+            {
+                "message": "Missing item type",
+                "line": " lib/addons/p5.sound.js:9846"
+            },
+            {
+                "message": "Missing item type\nmusicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string",
+                "line": " lib/addons/p5.sound.js:10571"
+            },
+            {
+                "message": "Missing item type\nDo not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded\n\nThe callback should only be called until maxIterations is reached",
+                "line": " lib/addons/p5.sound.js:10587"
+            },
+            {
+                "message": "Missing item type\ncallback invoked when the recording is over",
+                "line": " lib/addons/p5.sound.js:11072"
+            },
+            {
+                "message": "Missing item type\ninternal method called on audio process",
+                "line": " lib/addons/p5.sound.js:11158"
+            },
+            {
+                "message": "Missing item type\nPrivate method to ensure accurate values of this._voicesInUse\nAny time a new value is scheduled, it is necessary to increment all subsequent\nscheduledValues after attack, and decrement all subsequent\nscheduledValues after release",
+                "line": " lib/addons/p5.sound.js:12142"
+            },
+            {
+                "message": "Missing item type\np5.sound\nhttps://p5js.org/reference/#/libraries/p5.sound\n\nFrom the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors\n\nMIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE\n\nSome of the many audio libraries & resources that inspire p5.sound:\n - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js\n - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/\n - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0\n - wavesurfer.js https://github.com/katspaugh/wavesurfer.js\n - Web Audio Components by Jordan Santell https://github.com/web-audio-components\n - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound\n\n Web Audio API: http://w3.org/TR/webaudio/",
+                "line": " lib/addons/p5.sound.min.js:3"
+            }
+        ],
+        "consts": {
+            "RGB": [
+                "p5.colorMode"
+            ],
+            "HSB": [
+                "p5.colorMode"
+            ],
+            "HSL": [
+                "p5.colorMode"
+            ],
+            "CHORD": [
+                "p5.arc"
+            ],
+            "PIE": [
+                "p5.arc"
+            ],
+            "OPEN": [
+                "p5.arc"
+            ],
+            "CENTER": [
+                "p5.ellipseMode",
+                "p5.rectMode",
+                "p5.imageMode",
+                "p5.textAlign"
+            ],
+            "RADIUS": [
+                "p5.ellipseMode",
+                "p5.rectMode"
+            ],
+            "CORNER": [
+                "p5.ellipseMode",
+                "p5.rectMode",
+                "p5.imageMode"
+            ],
+            "CORNERS": [
+                "p5.ellipseMode",
+                "p5.rectMode",
+                "p5.imageMode"
+            ],
+            "SQUARE": [
+                "p5.strokeCap"
+            ],
+            "PROJECT": [
+                "p5.strokeCap"
+            ],
+            "ROUND": [
+                "p5.strokeCap",
+                "p5.strokeJoin"
+            ],
+            "MITER": [
+                "p5.strokeJoin"
+            ],
+            "BEVEL": [
+                "p5.strokeJoin"
+            ],
+            "ARROW": [
+                "p5.cursor"
+            ],
+            "CROSS": [
+                "p5.cursor"
+            ],
+            "HAND": [
+                "p5.cursor"
+            ],
+            "MOVE": [
+                "p5.cursor"
+            ],
+            "TEXT": [
+                "p5.cursor"
+            ],
+            "WAIT": [
+                "p5.cursor"
+            ],
+            "P2D": [
+                "p5.createCanvas",
+                "p5.createGraphics"
+            ],
+            "WEBGL": [
+                "p5.createCanvas",
+                "p5.createGraphics"
+            ],
+            "BLEND": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "DARKEST": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "LIGHTEST": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "DIFFERENCE": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "MULTIPLY": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "EXCLUSION": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "SCREEN": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "REPLACE": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "OVERLAY": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "HARD_LIGHT": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "SOFT_LIGHT": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "DODGE": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "BURN": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "ADD": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend"
+            ],
+            "NORMAL": [
+                "p5.blendMode",
+                "p5.Image.blend",
+                "p5.blend",
+                "p5.textStyle"
+            ],
+            "POINTS": [
+                "p5.beginShape"
+            ],
+            "LINES": [
+                "p5.beginShape"
+            ],
+            "TRIANGLES": [
+                "p5.beginShape"
+            ],
+            "TRIANGLE_FAN": [
+                "p5.beginShape"
+            ],
+            "TRIANGLE_STRIP": [
+                "p5.beginShape"
+            ],
+            "QUADS": [
+                "p5.beginShape"
+            ],
+            "QUAD_STRIP": [
+                "p5.beginShape"
+            ],
+            "CLOSE": [
+                "p5.endShape"
+            ],
+            "THRESHOLD": [
+                "p5.Image.filter",
+                "p5.filter"
+            ],
+            "GRAY": [
+                "p5.Image.filter",
+                "p5.filter"
+            ],
+            "OPAQUE": [
+                "p5.Image.filter",
+                "p5.filter"
+            ],
+            "INVERT": [
+                "p5.Image.filter",
+                "p5.filter"
+            ],
+            "POSTERIZE": [
+                "p5.Image.filter",
+                "p5.filter"
+            ],
+            "BLUR": [
+                "p5.Image.filter",
+                "p5.filter"
+            ],
+            "ERODE": [
+                "p5.Image.filter",
+                "p5.filter"
+            ],
+            "DILATE": [
+                "p5.Image.filter",
+                "p5.filter"
+            ],
+            "RADIANS": [
+                "p5.angleMode"
+            ],
+            "DEGREES": [
+                "p5.angleMode"
+            ],
+            "LEFT": [
+                "p5.textAlign"
+            ],
+            "RIGHT": [
+                "p5.textAlign"
+            ],
+            "TOP": [
+                "p5.textAlign"
+            ],
+            "BOTTOM": [
+                "p5.textAlign"
+            ],
+            "BASELINE": [
+                "p5.textAlign"
+            ],
+            "ITALIC": [
+                "p5.textStyle"
+            ],
+            "BOLD": [
+                "p5.textStyle"
+            ],
+            "VIDEO": [
+                "p5.dom.createCapture"
+            ],
+            "AUDIO": [
+                "p5.dom.createCapture"
+            ],
+            "AUTO": [
+                "p5.Element.size"
+            ]
+        }
+    }
+    },{}],2:[function(_dereq_,module,exports){
+    var lookup = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+    ;(function (exports) {
+        'use strict';
+
+      var Arr = (typeof Uint8Array !== 'undefined')
+        ? Uint8Array
+        : Array
+
+        var PLUS   = '+'.charCodeAt(0)
+        var SLASH  = '/'.charCodeAt(0)
+        var NUMBER = '0'.charCodeAt(0)
+        var LOWER  = 'a'.charCodeAt(0)
+        var UPPER  = 'A'.charCodeAt(0)
+        var PLUS_URL_SAFE = '-'.charCodeAt(0)
+        var SLASH_URL_SAFE = '_'.charCodeAt(0)
+
+        function decode (elt) {
+            var code = elt.charCodeAt(0)
+            if (code === PLUS ||
+                code === PLUS_URL_SAFE)
+                return 62 // '+'
+            if (code === SLASH ||
+                code === SLASH_URL_SAFE)
+                return 63 // '/'
+            if (code < NUMBER)
+                return -1 //no match
+            if (code < NUMBER + 10)
+                return code - NUMBER + 26 + 26
+            if (code < UPPER + 26)
+                return code - UPPER
+            if (code < LOWER + 26)
+                return code - LOWER + 26
+        }
+
+        function b64ToByteArray (b64) {
+            var i, j, l, tmp, placeHolders, arr
+
+            if (b64.length % 4 > 0) {
+                throw new Error('Invalid string. Length must be a multiple of 4')
+            }
+
+            // the number of equal signs (place holders)
+            // if there are two placeholders, than the two characters before it
+            // represent one byte
+            // if there is only one, then the three characters before it represent 2 bytes
+            // this is just a cheap hack to not do indexOf twice
+            var len = b64.length
+            placeHolders = '=' === b64.charAt(len - 2) ? 2 : '=' === b64.charAt(len - 1) ? 1 : 0
+
+            // base64 is 4/3 + up to two characters of the original data
+            arr = new Arr(b64.length * 3 / 4 - placeHolders)
+
+            // if there are placeholders, only get up to the last complete 4 chars
+            l = placeHolders > 0 ? b64.length - 4 : b64.length
+
+            var L = 0
+
+            function push (v) {
+                arr[L++] = v
+            }
+
+            for (i = 0, j = 0; i < l; i += 4, j += 3) {
+                tmp = (decode(b64.charAt(i)) << 18) | (decode(b64.charAt(i + 1)) << 12) | (decode(b64.charAt(i + 2)) << 6) | decode(b64.charAt(i + 3))
+                push((tmp & 0xFF0000) >> 16)
+                push((tmp & 0xFF00) >> 8)
+                push(tmp & 0xFF)
+            }
+
+            if (placeHolders === 2) {
+                tmp = (decode(b64.charAt(i)) << 2) | (decode(b64.charAt(i + 1)) >> 4)
+                push(tmp & 0xFF)
+            } else if (placeHolders === 1) {
+                tmp = (decode(b64.charAt(i)) << 10) | (decode(b64.charAt(i + 1)) << 4) | (decode(b64.charAt(i + 2)) >> 2)
+                push((tmp >> 8) & 0xFF)
+                push(tmp & 0xFF)
+            }
+
+            return arr
+        }
+
+        function uint8ToBase64 (uint8) {
+            var i,
+                extraBytes = uint8.length % 3, // if we have 1 byte left, pad 2 bytes
+                output = "",
+                temp, length
+
+            function encode (num) {
+                return lookup.charAt(num)
+            }
+
+            function tripletToBase64 (num) {
+                return encode(num >> 18 & 0x3F) + encode(num >> 12 & 0x3F) + encode(num >> 6 & 0x3F) + encode(num & 0x3F)
+            }
+
+            // go through the array every three bytes, we'll deal with trailing stuff later
+            for (i = 0, length = uint8.length - extraBytes; i < length; i += 3) {
+                temp = (uint8[i] << 16) + (uint8[i + 1] << 8) + (uint8[i + 2])
+                output += tripletToBase64(temp)
+            }
+
+            // pad the end with zeros, but make sure to not forget the extra bytes
+            switch (extraBytes) {
+                case 1:
+                    temp = uint8[uint8.length - 1]
+                    output += encode(temp >> 2)
+                    output += encode((temp << 4) & 0x3F)
+                    output += '=='
+                    break
+                case 2:
+                    temp = (uint8[uint8.length - 2] << 8) + (uint8[uint8.length - 1])
+                    output += encode(temp >> 10)
+                    output += encode((temp >> 4) & 0x3F)
+                    output += encode((temp << 2) & 0x3F)
+                    output += '='
+                    break
+            }
+
+            return output
+        }
+
+        exports.toByteArray = b64ToByteArray
+        exports.fromByteArray = uint8ToBase64
+    }(typeof exports === 'undefined' ? (this.base64js = {}) : exports))
+
+    },{}],3:[function(_dereq_,module,exports){
+
+    },{}],4:[function(_dereq_,module,exports){
+    (function (global){
+    /*!
+     * The buffer module from node.js, for the browser.
+     *
+     * @author   Feross Aboukhadijeh  
+     * @license  MIT
+     */
+    /* eslint-disable no-proto */
+
+    'use strict'
+
+    var base64 = _dereq_('base64-js')
+    var ieee754 = _dereq_('ieee754')
+    var isArray = _dereq_('isarray')
+
+    exports.Buffer = Buffer
+    exports.SlowBuffer = SlowBuffer
+    exports.INSPECT_MAX_BYTES = 50
+    Buffer.poolSize = 8192 // not used by this implementation
+
+    var rootParent = {}
+
+    /**
+     * If `Buffer.TYPED_ARRAY_SUPPORT`:
+     *   === true    Use Uint8Array implementation (fastest)
+     *   === false   Use Object implementation (most compatible, even IE6)
+     *
+     * Browsers that support typed arrays are IE 10+, Firefox 4+, Chrome 7+, Safari 5.1+,
+     * Opera 11.6+, iOS 4.2+.
+     *
+     * Due to various browser bugs, sometimes the Object implementation will be used even
+     * when the browser supports typed arrays.
+     *
+     * Note:
+     *
+     *   - Firefox 4-29 lacks support for adding new properties to `Uint8Array` instances,
+     *     See: https://bugzilla.mozilla.org/show_bug.cgi?id=695438.
+     *
+     *   - Safari 5-7 lacks support for changing the `Object.prototype.constructor` property
+     *     on objects.
+     *
+     *   - Chrome 9-10 is missing the `TypedArray.prototype.subarray` function.
+     *
+     *   - IE10 has a broken `TypedArray.prototype.subarray` function which returns arrays of
+     *     incorrect length in some situations.
+
+     * We detect these buggy browsers and set `Buffer.TYPED_ARRAY_SUPPORT` to `false` so they
+     * get the Object implementation, which is slower but behaves correctly.
+     */
+    Buffer.TYPED_ARRAY_SUPPORT = global.TYPED_ARRAY_SUPPORT !== undefined
+      ? global.TYPED_ARRAY_SUPPORT
+      : typedArraySupport()
+
+    function typedArraySupport () {
+      function Bar () {}
+      try {
+        var arr = new Uint8Array(1)
+        arr.foo = function () { return 42 }
+        arr.constructor = Bar
+        return arr.foo() === 42 && // typed array instances can be augmented
+            arr.constructor === Bar && // constructor can be set
+            typeof arr.subarray === 'function' && // chrome 9-10 lack `subarray`
+            arr.subarray(1, 1).byteLength === 0 // ie10 has broken `subarray`
+      } catch (e) {
+        return false
+      }
+    }
+
+    function kMaxLength () {
+      return Buffer.TYPED_ARRAY_SUPPORT
+        ? 0x7fffffff
+        : 0x3fffffff
+    }
+
+    /**
+     * Class: Buffer
+     * =============
+     *
+     * The Buffer constructor returns instances of `Uint8Array` that are augmented
+     * with function properties for all the node `Buffer` API functions. We use
+     * `Uint8Array` so that square bracket notation works as expected -- it returns
+     * a single octet.
+     *
+     * By augmenting the instances, we can avoid modifying the `Uint8Array`
+     * prototype.
+     */
+    function Buffer (arg) {
+      if (!(this instanceof Buffer)) {
+        // Avoid going through an ArgumentsAdaptorTrampoline in the common case.
+        if (arguments.length > 1) return new Buffer(arg, arguments[1])
+        return new Buffer(arg)
+      }
+
+      if (!Buffer.TYPED_ARRAY_SUPPORT) {
+        this.length = 0
+        this.parent = undefined
+      }
+
+      // Common case.
+      if (typeof arg === 'number') {
+        return fromNumber(this, arg)
+      }
+
+      // Slightly less common case.
+      if (typeof arg === 'string') {
+        return fromString(this, arg, arguments.length > 1 ? arguments[1] : 'utf8')
+      }
+
+      // Unusual.
+      return fromObject(this, arg)
+    }
+
+    function fromNumber (that, length) {
+      that = allocate(that, length < 0 ? 0 : checked(length) | 0)
+      if (!Buffer.TYPED_ARRAY_SUPPORT) {
+        for (var i = 0; i < length; i++) {
+          that[i] = 0
+        }
+      }
+      return that
+    }
+
+    function fromString (that, string, encoding) {
+      if (typeof encoding !== 'string' || encoding === '') encoding = 'utf8'
+
+      // Assumption: byteLength() return value is always < kMaxLength.
+      var length = byteLength(string, encoding) | 0
+      that = allocate(that, length)
+
+      that.write(string, encoding)
+      return that
+    }
+
+    function fromObject (that, object) {
+      if (Buffer.isBuffer(object)) return fromBuffer(that, object)
+
+      if (isArray(object)) return fromArray(that, object)
+
+      if (object == null) {
+        throw new TypeError('must start with number, buffer, array or string')
+      }
+
+      if (typeof ArrayBuffer !== 'undefined') {
+        if (object.buffer instanceof ArrayBuffer) {
+          return fromTypedArray(that, object)
+        }
+        if (object instanceof ArrayBuffer) {
+          return fromArrayBuffer(that, object)
+        }
+      }
+
+      if (object.length) return fromArrayLike(that, object)
+
+      return fromJsonObject(that, object)
+    }
+
+    function fromBuffer (that, buffer) {
+      var length = checked(buffer.length) | 0
+      that = allocate(that, length)
+      buffer.copy(that, 0, 0, length)
+      return that
+    }
+
+    function fromArray (that, array) {
+      var length = checked(array.length) | 0
+      that = allocate(that, length)
+      for (var i = 0; i < length; i += 1) {
+        that[i] = array[i] & 255
+      }
+      return that
+    }
+
+    // Duplicate of fromArray() to keep fromArray() monomorphic.
+    function fromTypedArray (that, array) {
+      var length = checked(array.length) | 0
+      that = allocate(that, length)
+      // Truncating the elements is probably not what people expect from typed
+      // arrays with BYTES_PER_ELEMENT > 1 but it's compatible with the behavior
+      // of the old Buffer constructor.
+      for (var i = 0; i < length; i += 1) {
+        that[i] = array[i] & 255
+      }
+      return that
+    }
+
+    function fromArrayBuffer (that, array) {
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        // Return an augmented `Uint8Array` instance, for best performance
+        array.byteLength
+        that = Buffer._augment(new Uint8Array(array))
+      } else {
+        // Fallback: Return an object instance of the Buffer class
+        that = fromTypedArray(that, new Uint8Array(array))
+      }
+      return that
+    }
+
+    function fromArrayLike (that, array) {
+      var length = checked(array.length) | 0
+      that = allocate(that, length)
+      for (var i = 0; i < length; i += 1) {
+        that[i] = array[i] & 255
+      }
+      return that
+    }
+
+    // Deserialize { type: 'Buffer', data: [1,2,3,...] } into a Buffer object.
+    // Returns a zero-length buffer for inputs that don't conform to the spec.
+    function fromJsonObject (that, object) {
+      var array
+      var length = 0
+
+      if (object.type === 'Buffer' && isArray(object.data)) {
+        array = object.data
+        length = checked(array.length) | 0
+      }
+      that = allocate(that, length)
+
+      for (var i = 0; i < length; i += 1) {
+        that[i] = array[i] & 255
+      }
+      return that
+    }
+
+    if (Buffer.TYPED_ARRAY_SUPPORT) {
+      Buffer.prototype.__proto__ = Uint8Array.prototype
+      Buffer.__proto__ = Uint8Array
+    } else {
+      // pre-set for values that may exist in the future
+      Buffer.prototype.length = undefined
+      Buffer.prototype.parent = undefined
+    }
+
+    function allocate (that, length) {
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        // Return an augmented `Uint8Array` instance, for best performance
+        that = Buffer._augment(new Uint8Array(length))
+        that.__proto__ = Buffer.prototype
+      } else {
+        // Fallback: Return an object instance of the Buffer class
+        that.length = length
+        that._isBuffer = true
+      }
+
+      var fromPool = length !== 0 && length <= Buffer.poolSize >>> 1
+      if (fromPool) that.parent = rootParent
+
+      return that
+    }
+
+    function checked (length) {
+      // Note: cannot use `length < kMaxLength` here because that fails when
+      // length is NaN (which is otherwise coerced to zero.)
+      if (length >= kMaxLength()) {
+        throw new RangeError('Attempt to allocate Buffer larger than maximum ' +
+                             'size: 0x' + kMaxLength().toString(16) + ' bytes')
+      }
+      return length | 0
+    }
+
+    function SlowBuffer (subject, encoding) {
+      if (!(this instanceof SlowBuffer)) return new SlowBuffer(subject, encoding)
+
+      var buf = new Buffer(subject, encoding)
+      delete buf.parent
+      return buf
+    }
+
+    Buffer.isBuffer = function isBuffer (b) {
+      return !!(b != null && b._isBuffer)
+    }
+
+    Buffer.compare = function compare (a, b) {
+      if (!Buffer.isBuffer(a) || !Buffer.isBuffer(b)) {
+        throw new TypeError('Arguments must be Buffers')
+      }
+
+      if (a === b) return 0
+
+      var x = a.length
+      var y = b.length
+
+      var i = 0
+      var len = Math.min(x, y)
+      while (i < len) {
+        if (a[i] !== b[i]) break
+
+        ++i
+      }
+
+      if (i !== len) {
+        x = a[i]
+        y = b[i]
+      }
+
+      if (x < y) return -1
+      if (y < x) return 1
+      return 0
+    }
+
+    Buffer.isEncoding = function isEncoding (encoding) {
+      switch (String(encoding).toLowerCase()) {
+        case 'hex':
+        case 'utf8':
+        case 'utf-8':
+        case 'ascii':
+        case 'binary':
+        case 'base64':
+        case 'raw':
+        case 'ucs2':
+        case 'ucs-2':
+        case 'utf16le':
+        case 'utf-16le':
+          return true
+        default:
+          return false
+      }
+    }
+
+    Buffer.concat = function concat (list, length) {
+      if (!isArray(list)) throw new TypeError('list argument must be an Array of Buffers.')
+
+      if (list.length === 0) {
+        return new Buffer(0)
+      }
+
+      var i
+      if (length === undefined) {
+        length = 0
+        for (i = 0; i < list.length; i++) {
+          length += list[i].length
+        }
+      }
+
+      var buf = new Buffer(length)
+      var pos = 0
+      for (i = 0; i < list.length; i++) {
+        var item = list[i]
+        item.copy(buf, pos)
+        pos += item.length
+      }
+      return buf
+    }
+
+    function byteLength (string, encoding) {
+      if (typeof string !== 'string') string = '' + string
+
+      var len = string.length
+      if (len === 0) return 0
+
+      // Use a for loop to avoid recursion
+      var loweredCase = false
+      for (;;) {
+        switch (encoding) {
+          case 'ascii':
+          case 'binary':
+          // Deprecated
+          case 'raw':
+          case 'raws':
+            return len
+          case 'utf8':
+          case 'utf-8':
+            return utf8ToBytes(string).length
+          case 'ucs2':
+          case 'ucs-2':
+          case 'utf16le':
+          case 'utf-16le':
+            return len * 2
+          case 'hex':
+            return len >>> 1
+          case 'base64':
+            return base64ToBytes(string).length
+          default:
+            if (loweredCase) return utf8ToBytes(string).length // assume utf8
+            encoding = ('' + encoding).toLowerCase()
+            loweredCase = true
+        }
+      }
+    }
+    Buffer.byteLength = byteLength
+
+    function slowToString (encoding, start, end) {
+      var loweredCase = false
+
+      start = start | 0
+      end = end === undefined || end === Infinity ? this.length : end | 0
+
+      if (!encoding) encoding = 'utf8'
+      if (start < 0) start = 0
+      if (end > this.length) end = this.length
+      if (end <= start) return ''
+
+      while (true) {
+        switch (encoding) {
+          case 'hex':
+            return hexSlice(this, start, end)
+
+          case 'utf8':
+          case 'utf-8':
+            return utf8Slice(this, start, end)
+
+          case 'ascii':
+            return asciiSlice(this, start, end)
+
+          case 'binary':
+            return binarySlice(this, start, end)
+
+          case 'base64':
+            return base64Slice(this, start, end)
+
+          case 'ucs2':
+          case 'ucs-2':
+          case 'utf16le':
+          case 'utf-16le':
+            return utf16leSlice(this, start, end)
+
+          default:
+            if (loweredCase) throw new TypeError('Unknown encoding: ' + encoding)
+            encoding = (encoding + '').toLowerCase()
+            loweredCase = true
+        }
+      }
+    }
+
+    Buffer.prototype.toString = function toString () {
+      var length = this.length | 0
+      if (length === 0) return ''
+      if (arguments.length === 0) return utf8Slice(this, 0, length)
+      return slowToString.apply(this, arguments)
+    }
+
+    Buffer.prototype.equals = function equals (b) {
+      if (!Buffer.isBuffer(b)) throw new TypeError('Argument must be a Buffer')
+      if (this === b) return true
+      return Buffer.compare(this, b) === 0
+    }
+
+    Buffer.prototype.inspect = function inspect () {
+      var str = ''
+      var max = exports.INSPECT_MAX_BYTES
+      if (this.length > 0) {
+        str = this.toString('hex', 0, max).match(/.{2}/g).join(' ')
+        if (this.length > max) str += ' ... '
+      }
+      return ''
+    }
+
+    Buffer.prototype.compare = function compare (b) {
+      if (!Buffer.isBuffer(b)) throw new TypeError('Argument must be a Buffer')
+      if (this === b) return 0
+      return Buffer.compare(this, b)
+    }
+
+    Buffer.prototype.indexOf = function indexOf (val, byteOffset) {
+      if (byteOffset > 0x7fffffff) byteOffset = 0x7fffffff
+      else if (byteOffset < -0x80000000) byteOffset = -0x80000000
+      byteOffset >>= 0
+
+      if (this.length === 0) return -1
+      if (byteOffset >= this.length) return -1
+
+      // Negative offsets start from the end of the buffer
+      if (byteOffset < 0) byteOffset = Math.max(this.length + byteOffset, 0)
+
+      if (typeof val === 'string') {
+        if (val.length === 0) return -1 // special case: looking for empty string always fails
+        return String.prototype.indexOf.call(this, val, byteOffset)
+      }
+      if (Buffer.isBuffer(val)) {
+        return arrayIndexOf(this, val, byteOffset)
+      }
+      if (typeof val === 'number') {
+        if (Buffer.TYPED_ARRAY_SUPPORT && Uint8Array.prototype.indexOf === 'function') {
+          return Uint8Array.prototype.indexOf.call(this, val, byteOffset)
+        }
+        return arrayIndexOf(this, [ val ], byteOffset)
+      }
+
+      function arrayIndexOf (arr, val, byteOffset) {
+        var foundIndex = -1
+        for (var i = 0; byteOffset + i < arr.length; i++) {
+          if (arr[byteOffset + i] === val[foundIndex === -1 ? 0 : i - foundIndex]) {
+            if (foundIndex === -1) foundIndex = i
+            if (i - foundIndex + 1 === val.length) return byteOffset + foundIndex
+          } else {
+            foundIndex = -1
+          }
+        }
+        return -1
+      }
+
+      throw new TypeError('val must be string, number or Buffer')
+    }
+
+    // `get` is deprecated
+    Buffer.prototype.get = function get (offset) {
+      console.log('.get() is deprecated. Access using array indexes instead.')
+      return this.readUInt8(offset)
+    }
+
+    // `set` is deprecated
+    Buffer.prototype.set = function set (v, offset) {
+      console.log('.set() is deprecated. Access using array indexes instead.')
+      return this.writeUInt8(v, offset)
+    }
+
+    function hexWrite (buf, string, offset, length) {
+      offset = Number(offset) || 0
+      var remaining = buf.length - offset
+      if (!length) {
+        length = remaining
+      } else {
+        length = Number(length)
+        if (length > remaining) {
+          length = remaining
+        }
+      }
+
+      // must be an even number of digits
+      var strLen = string.length
+      if (strLen % 2 !== 0) throw new Error('Invalid hex string')
+
+      if (length > strLen / 2) {
+        length = strLen / 2
+      }
+      for (var i = 0; i < length; i++) {
+        var parsed = parseInt(string.substr(i * 2, 2), 16)
+        if (isNaN(parsed)) throw new Error('Invalid hex string')
+        buf[offset + i] = parsed
+      }
+      return i
+    }
+
+    function utf8Write (buf, string, offset, length) {
+      return blitBuffer(utf8ToBytes(string, buf.length - offset), buf, offset, length)
+    }
+
+    function asciiWrite (buf, string, offset, length) {
+      return blitBuffer(asciiToBytes(string), buf, offset, length)
+    }
+
+    function binaryWrite (buf, string, offset, length) {
+      return asciiWrite(buf, string, offset, length)
+    }
+
+    function base64Write (buf, string, offset, length) {
+      return blitBuffer(base64ToBytes(string), buf, offset, length)
+    }
+
+    function ucs2Write (buf, string, offset, length) {
+      return blitBuffer(utf16leToBytes(string, buf.length - offset), buf, offset, length)
+    }
+
+    Buffer.prototype.write = function write (string, offset, length, encoding) {
+      // Buffer#write(string)
+      if (offset === undefined) {
+        encoding = 'utf8'
+        length = this.length
+        offset = 0
+      // Buffer#write(string, encoding)
+      } else if (length === undefined && typeof offset === 'string') {
+        encoding = offset
+        length = this.length
+        offset = 0
+      // Buffer#write(string, offset[, length][, encoding])
+      } else if (isFinite(offset)) {
+        offset = offset | 0
+        if (isFinite(length)) {
+          length = length | 0
+          if (encoding === undefined) encoding = 'utf8'
+        } else {
+          encoding = length
+          length = undefined
+        }
+      // legacy write(string, encoding, offset, length) - remove in v0.13
+      } else {
+        var swap = encoding
+        encoding = offset
+        offset = length | 0
+        length = swap
+      }
+
+      var remaining = this.length - offset
+      if (length === undefined || length > remaining) length = remaining
+
+      if ((string.length > 0 && (length < 0 || offset < 0)) || offset > this.length) {
+        throw new RangeError('attempt to write outside buffer bounds')
+      }
+
+      if (!encoding) encoding = 'utf8'
+
+      var loweredCase = false
+      for (;;) {
+        switch (encoding) {
+          case 'hex':
+            return hexWrite(this, string, offset, length)
+
+          case 'utf8':
+          case 'utf-8':
+            return utf8Write(this, string, offset, length)
+
+          case 'ascii':
+            return asciiWrite(this, string, offset, length)
+
+          case 'binary':
+            return binaryWrite(this, string, offset, length)
+
+          case 'base64':
+            // Warning: maxLength not taken into account in base64Write
+            return base64Write(this, string, offset, length)
+
+          case 'ucs2':
+          case 'ucs-2':
+          case 'utf16le':
+          case 'utf-16le':
+            return ucs2Write(this, string, offset, length)
+
+          default:
+            if (loweredCase) throw new TypeError('Unknown encoding: ' + encoding)
+            encoding = ('' + encoding).toLowerCase()
+            loweredCase = true
+        }
+      }
+    }
+
+    Buffer.prototype.toJSON = function toJSON () {
+      return {
+        type: 'Buffer',
+        data: Array.prototype.slice.call(this._arr || this, 0)
+      }
+    }
+
+    function base64Slice (buf, start, end) {
+      if (start === 0 && end === buf.length) {
+        return base64.fromByteArray(buf)
+      } else {
+        return base64.fromByteArray(buf.slice(start, end))
+      }
+    }
+
+    function utf8Slice (buf, start, end) {
+      end = Math.min(buf.length, end)
+      var res = []
+
+      var i = start
+      while (i < end) {
+        var firstByte = buf[i]
+        var codePoint = null
+        var bytesPerSequence = (firstByte > 0xEF) ? 4
+          : (firstByte > 0xDF) ? 3
+          : (firstByte > 0xBF) ? 2
+          : 1
+
+        if (i + bytesPerSequence <= end) {
+          var secondByte, thirdByte, fourthByte, tempCodePoint
+
+          switch (bytesPerSequence) {
+            case 1:
+              if (firstByte < 0x80) {
+                codePoint = firstByte
+              }
+              break
+            case 2:
+              secondByte = buf[i + 1]
+              if ((secondByte & 0xC0) === 0x80) {
+                tempCodePoint = (firstByte & 0x1F) << 0x6 | (secondByte & 0x3F)
+                if (tempCodePoint > 0x7F) {
+                  codePoint = tempCodePoint
+                }
+              }
+              break
+            case 3:
+              secondByte = buf[i + 1]
+              thirdByte = buf[i + 2]
+              if ((secondByte & 0xC0) === 0x80 && (thirdByte & 0xC0) === 0x80) {
+                tempCodePoint = (firstByte & 0xF) << 0xC | (secondByte & 0x3F) << 0x6 | (thirdByte & 0x3F)
+                if (tempCodePoint > 0x7FF && (tempCodePoint < 0xD800 || tempCodePoint > 0xDFFF)) {
+                  codePoint = tempCodePoint
+                }
+              }
+              break
+            case 4:
+              secondByte = buf[i + 1]
+              thirdByte = buf[i + 2]
+              fourthByte = buf[i + 3]
+              if ((secondByte & 0xC0) === 0x80 && (thirdByte & 0xC0) === 0x80 && (fourthByte & 0xC0) === 0x80) {
+                tempCodePoint = (firstByte & 0xF) << 0x12 | (secondByte & 0x3F) << 0xC | (thirdByte & 0x3F) << 0x6 | (fourthByte & 0x3F)
+                if (tempCodePoint > 0xFFFF && tempCodePoint < 0x110000) {
+                  codePoint = tempCodePoint
+                }
+              }
+          }
+        }
+
+        if (codePoint === null) {
+          // we did not generate a valid codePoint so insert a
+          // replacement char (U+FFFD) and advance only 1 byte
+          codePoint = 0xFFFD
+          bytesPerSequence = 1
+        } else if (codePoint > 0xFFFF) {
+          // encode to utf16 (surrogate pair dance)
+          codePoint -= 0x10000
+          res.push(codePoint >>> 10 & 0x3FF | 0xD800)
+          codePoint = 0xDC00 | codePoint & 0x3FF
+        }
+
+        res.push(codePoint)
+        i += bytesPerSequence
+      }
+
+      return decodeCodePointsArray(res)
+    }
+
+    // Based on http://stackoverflow.com/a/22747272/680742, the browser with
+    // the lowest limit is Chrome, with 0x10000 args.
+    // We go 1 magnitude less, for safety
+    var MAX_ARGUMENTS_LENGTH = 0x1000
+
+    function decodeCodePointsArray (codePoints) {
+      var len = codePoints.length
+      if (len <= MAX_ARGUMENTS_LENGTH) {
+        return String.fromCharCode.apply(String, codePoints) // avoid extra slice()
+      }
+
+      // Decode in chunks to avoid "call stack size exceeded".
+      var res = ''
+      var i = 0
+      while (i < len) {
+        res += String.fromCharCode.apply(
+          String,
+          codePoints.slice(i, i += MAX_ARGUMENTS_LENGTH)
+        )
+      }
+      return res
+    }
+
+    function asciiSlice (buf, start, end) {
+      var ret = ''
+      end = Math.min(buf.length, end)
+
+      for (var i = start; i < end; i++) {
+        ret += String.fromCharCode(buf[i] & 0x7F)
+      }
+      return ret
+    }
+
+    function binarySlice (buf, start, end) {
+      var ret = ''
+      end = Math.min(buf.length, end)
+
+      for (var i = start; i < end; i++) {
+        ret += String.fromCharCode(buf[i])
+      }
+      return ret
+    }
+
+    function hexSlice (buf, start, end) {
+      var len = buf.length
+
+      if (!start || start < 0) start = 0
+      if (!end || end < 0 || end > len) end = len
+
+      var out = ''
+      for (var i = start; i < end; i++) {
+        out += toHex(buf[i])
+      }
+      return out
+    }
+
+    function utf16leSlice (buf, start, end) {
+      var bytes = buf.slice(start, end)
+      var res = ''
+      for (var i = 0; i < bytes.length; i += 2) {
+        res += String.fromCharCode(bytes[i] + bytes[i + 1] * 256)
+      }
+      return res
+    }
+
+    Buffer.prototype.slice = function slice (start, end) {
+      var len = this.length
+      start = ~~start
+      end = end === undefined ? len : ~~end
+
+      if (start < 0) {
+        start += len
+        if (start < 0) start = 0
+      } else if (start > len) {
+        start = len
+      }
+
+      if (end < 0) {
+        end += len
+        if (end < 0) end = 0
+      } else if (end > len) {
+        end = len
+      }
+
+      if (end < start) end = start
+
+      var newBuf
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        newBuf = Buffer._augment(this.subarray(start, end))
+      } else {
+        var sliceLen = end - start
+        newBuf = new Buffer(sliceLen, undefined)
+        for (var i = 0; i < sliceLen; i++) {
+          newBuf[i] = this[i + start]
+        }
+      }
+
+      if (newBuf.length) newBuf.parent = this.parent || this
+
+      return newBuf
+    }
+
+    /*
+     * Need to make sure that buffer isn't trying to write out of bounds.
+     */
+    function checkOffset (offset, ext, length) {
+      if ((offset % 1) !== 0 || offset < 0) throw new RangeError('offset is not uint')
+      if (offset + ext > length) throw new RangeError('Trying to access beyond buffer length')
+    }
+
+    Buffer.prototype.readUIntLE = function readUIntLE (offset, byteLength, noAssert) {
+      offset = offset | 0
+      byteLength = byteLength | 0
+      if (!noAssert) checkOffset(offset, byteLength, this.length)
+
+      var val = this[offset]
+      var mul = 1
+      var i = 0
+      while (++i < byteLength && (mul *= 0x100)) {
+        val += this[offset + i] * mul
+      }
+
+      return val
+    }
+
+    Buffer.prototype.readUIntBE = function readUIntBE (offset, byteLength, noAssert) {
+      offset = offset | 0
+      byteLength = byteLength | 0
+      if (!noAssert) {
+        checkOffset(offset, byteLength, this.length)
+      }
+
+      var val = this[offset + --byteLength]
+      var mul = 1
+      while (byteLength > 0 && (mul *= 0x100)) {
+        val += this[offset + --byteLength] * mul
+      }
+
+      return val
+    }
+
+    Buffer.prototype.readUInt8 = function readUInt8 (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 1, this.length)
+      return this[offset]
+    }
+
+    Buffer.prototype.readUInt16LE = function readUInt16LE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 2, this.length)
+      return this[offset] | (this[offset + 1] << 8)
+    }
+
+    Buffer.prototype.readUInt16BE = function readUInt16BE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 2, this.length)
+      return (this[offset] << 8) | this[offset + 1]
+    }
+
+    Buffer.prototype.readUInt32LE = function readUInt32LE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 4, this.length)
+
+      return ((this[offset]) |
+          (this[offset + 1] << 8) |
+          (this[offset + 2] << 16)) +
+          (this[offset + 3] * 0x1000000)
+    }
+
+    Buffer.prototype.readUInt32BE = function readUInt32BE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 4, this.length)
+
+      return (this[offset] * 0x1000000) +
+        ((this[offset + 1] << 16) |
+        (this[offset + 2] << 8) |
+        this[offset + 3])
+    }
+
+    Buffer.prototype.readIntLE = function readIntLE (offset, byteLength, noAssert) {
+      offset = offset | 0
+      byteLength = byteLength | 0
+      if (!noAssert) checkOffset(offset, byteLength, this.length)
+
+      var val = this[offset]
+      var mul = 1
+      var i = 0
+      while (++i < byteLength && (mul *= 0x100)) {
+        val += this[offset + i] * mul
+      }
+      mul *= 0x80
+
+      if (val >= mul) val -= Math.pow(2, 8 * byteLength)
+
+      return val
+    }
+
+    Buffer.prototype.readIntBE = function readIntBE (offset, byteLength, noAssert) {
+      offset = offset | 0
+      byteLength = byteLength | 0
+      if (!noAssert) checkOffset(offset, byteLength, this.length)
+
+      var i = byteLength
+      var mul = 1
+      var val = this[offset + --i]
+      while (i > 0 && (mul *= 0x100)) {
+        val += this[offset + --i] * mul
+      }
+      mul *= 0x80
+
+      if (val >= mul) val -= Math.pow(2, 8 * byteLength)
+
+      return val
+    }
+
+    Buffer.prototype.readInt8 = function readInt8 (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 1, this.length)
+      if (!(this[offset] & 0x80)) return (this[offset])
+      return ((0xff - this[offset] + 1) * -1)
+    }
+
+    Buffer.prototype.readInt16LE = function readInt16LE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 2, this.length)
+      var val = this[offset] | (this[offset + 1] << 8)
+      return (val & 0x8000) ? val | 0xFFFF0000 : val
+    }
+
+    Buffer.prototype.readInt16BE = function readInt16BE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 2, this.length)
+      var val = this[offset + 1] | (this[offset] << 8)
+      return (val & 0x8000) ? val | 0xFFFF0000 : val
+    }
+
+    Buffer.prototype.readInt32LE = function readInt32LE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 4, this.length)
+
+      return (this[offset]) |
+        (this[offset + 1] << 8) |
+        (this[offset + 2] << 16) |
+        (this[offset + 3] << 24)
+    }
+
+    Buffer.prototype.readInt32BE = function readInt32BE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 4, this.length)
+
+      return (this[offset] << 24) |
+        (this[offset + 1] << 16) |
+        (this[offset + 2] << 8) |
+        (this[offset + 3])
+    }
+
+    Buffer.prototype.readFloatLE = function readFloatLE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 4, this.length)
+      return ieee754.read(this, offset, true, 23, 4)
+    }
+
+    Buffer.prototype.readFloatBE = function readFloatBE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 4, this.length)
+      return ieee754.read(this, offset, false, 23, 4)
+    }
+
+    Buffer.prototype.readDoubleLE = function readDoubleLE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 8, this.length)
+      return ieee754.read(this, offset, true, 52, 8)
+    }
+
+    Buffer.prototype.readDoubleBE = function readDoubleBE (offset, noAssert) {
+      if (!noAssert) checkOffset(offset, 8, this.length)
+      return ieee754.read(this, offset, false, 52, 8)
+    }
+
+    function checkInt (buf, value, offset, ext, max, min) {
+      if (!Buffer.isBuffer(buf)) throw new TypeError('buffer must be a Buffer instance')
+      if (value > max || value < min) throw new RangeError('value is out of bounds')
+      if (offset + ext > buf.length) throw new RangeError('index out of range')
+    }
+
+    Buffer.prototype.writeUIntLE = function writeUIntLE (value, offset, byteLength, noAssert) {
+      value = +value
+      offset = offset | 0
+      byteLength = byteLength | 0
+      if (!noAssert) checkInt(this, value, offset, byteLength, Math.pow(2, 8 * byteLength), 0)
+
+      var mul = 1
+      var i = 0
+      this[offset] = value & 0xFF
+      while (++i < byteLength && (mul *= 0x100)) {
+        this[offset + i] = (value / mul) & 0xFF
+      }
+
+      return offset + byteLength
+    }
+
+    Buffer.prototype.writeUIntBE = function writeUIntBE (value, offset, byteLength, noAssert) {
+      value = +value
+      offset = offset | 0
+      byteLength = byteLength | 0
+      if (!noAssert) checkInt(this, value, offset, byteLength, Math.pow(2, 8 * byteLength), 0)
+
+      var i = byteLength - 1
+      var mul = 1
+      this[offset + i] = value & 0xFF
+      while (--i >= 0 && (mul *= 0x100)) {
+        this[offset + i] = (value / mul) & 0xFF
+      }
+
+      return offset + byteLength
+    }
+
+    Buffer.prototype.writeUInt8 = function writeUInt8 (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 1, 0xff, 0)
+      if (!Buffer.TYPED_ARRAY_SUPPORT) value = Math.floor(value)
+      this[offset] = (value & 0xff)
+      return offset + 1
+    }
+
+    function objectWriteUInt16 (buf, value, offset, littleEndian) {
+      if (value < 0) value = 0xffff + value + 1
+      for (var i = 0, j = Math.min(buf.length - offset, 2); i < j; i++) {
+        buf[offset + i] = (value & (0xff << (8 * (littleEndian ? i : 1 - i)))) >>>
+          (littleEndian ? i : 1 - i) * 8
+      }
+    }
+
+    Buffer.prototype.writeUInt16LE = function writeUInt16LE (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 2, 0xffff, 0)
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        this[offset] = (value & 0xff)
+        this[offset + 1] = (value >>> 8)
+      } else {
+        objectWriteUInt16(this, value, offset, true)
+      }
+      return offset + 2
+    }
+
+    Buffer.prototype.writeUInt16BE = function writeUInt16BE (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 2, 0xffff, 0)
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        this[offset] = (value >>> 8)
+        this[offset + 1] = (value & 0xff)
+      } else {
+        objectWriteUInt16(this, value, offset, false)
+      }
+      return offset + 2
+    }
+
+    function objectWriteUInt32 (buf, value, offset, littleEndian) {
+      if (value < 0) value = 0xffffffff + value + 1
+      for (var i = 0, j = Math.min(buf.length - offset, 4); i < j; i++) {
+        buf[offset + i] = (value >>> (littleEndian ? i : 3 - i) * 8) & 0xff
+      }
+    }
+
+    Buffer.prototype.writeUInt32LE = function writeUInt32LE (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 4, 0xffffffff, 0)
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        this[offset + 3] = (value >>> 24)
+        this[offset + 2] = (value >>> 16)
+        this[offset + 1] = (value >>> 8)
+        this[offset] = (value & 0xff)
+      } else {
+        objectWriteUInt32(this, value, offset, true)
+      }
+      return offset + 4
+    }
+
+    Buffer.prototype.writeUInt32BE = function writeUInt32BE (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 4, 0xffffffff, 0)
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        this[offset] = (value >>> 24)
+        this[offset + 1] = (value >>> 16)
+        this[offset + 2] = (value >>> 8)
+        this[offset + 3] = (value & 0xff)
+      } else {
+        objectWriteUInt32(this, value, offset, false)
+      }
+      return offset + 4
+    }
+
+    Buffer.prototype.writeIntLE = function writeIntLE (value, offset, byteLength, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) {
+        var limit = Math.pow(2, 8 * byteLength - 1)
+
+        checkInt(this, value, offset, byteLength, limit - 1, -limit)
+      }
+
+      var i = 0
+      var mul = 1
+      var sub = value < 0 ? 1 : 0
+      this[offset] = value & 0xFF
+      while (++i < byteLength && (mul *= 0x100)) {
+        this[offset + i] = ((value / mul) >> 0) - sub & 0xFF
+      }
+
+      return offset + byteLength
+    }
+
+    Buffer.prototype.writeIntBE = function writeIntBE (value, offset, byteLength, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) {
+        var limit = Math.pow(2, 8 * byteLength - 1)
+
+        checkInt(this, value, offset, byteLength, limit - 1, -limit)
+      }
+
+      var i = byteLength - 1
+      var mul = 1
+      var sub = value < 0 ? 1 : 0
+      this[offset + i] = value & 0xFF
+      while (--i >= 0 && (mul *= 0x100)) {
+        this[offset + i] = ((value / mul) >> 0) - sub & 0xFF
+      }
+
+      return offset + byteLength
+    }
+
+    Buffer.prototype.writeInt8 = function writeInt8 (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 1, 0x7f, -0x80)
+      if (!Buffer.TYPED_ARRAY_SUPPORT) value = Math.floor(value)
+      if (value < 0) value = 0xff + value + 1
+      this[offset] = (value & 0xff)
+      return offset + 1
+    }
+
+    Buffer.prototype.writeInt16LE = function writeInt16LE (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 2, 0x7fff, -0x8000)
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        this[offset] = (value & 0xff)
+        this[offset + 1] = (value >>> 8)
+      } else {
+        objectWriteUInt16(this, value, offset, true)
+      }
+      return offset + 2
+    }
+
+    Buffer.prototype.writeInt16BE = function writeInt16BE (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 2, 0x7fff, -0x8000)
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        this[offset] = (value >>> 8)
+        this[offset + 1] = (value & 0xff)
+      } else {
+        objectWriteUInt16(this, value, offset, false)
+      }
+      return offset + 2
+    }
+
+    Buffer.prototype.writeInt32LE = function writeInt32LE (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 4, 0x7fffffff, -0x80000000)
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        this[offset] = (value & 0xff)
+        this[offset + 1] = (value >>> 8)
+        this[offset + 2] = (value >>> 16)
+        this[offset + 3] = (value >>> 24)
+      } else {
+        objectWriteUInt32(this, value, offset, true)
+      }
+      return offset + 4
+    }
+
+    Buffer.prototype.writeInt32BE = function writeInt32BE (value, offset, noAssert) {
+      value = +value
+      offset = offset | 0
+      if (!noAssert) checkInt(this, value, offset, 4, 0x7fffffff, -0x80000000)
+      if (value < 0) value = 0xffffffff + value + 1
+      if (Buffer.TYPED_ARRAY_SUPPORT) {
+        this[offset] = (value >>> 24)
+        this[offset + 1] = (value >>> 16)
+        this[offset + 2] = (value >>> 8)
+        this[offset + 3] = (value & 0xff)
+      } else {
+        objectWriteUInt32(this, value, offset, false)
+      }
+      return offset + 4
+    }
+
+    function checkIEEE754 (buf, value, offset, ext, max, min) {
+      if (value > max || value < min) throw new RangeError('value is out of bounds')
+      if (offset + ext > buf.length) throw new RangeError('index out of range')
+      if (offset < 0) throw new RangeError('index out of range')
+    }
+
+    function writeFloat (buf, value, offset, littleEndian, noAssert) {
+      if (!noAssert) {
+        checkIEEE754(buf, value, offset, 4, 3.4028234663852886e+38, -3.4028234663852886e+38)
+      }
+      ieee754.write(buf, value, offset, littleEndian, 23, 4)
+      return offset + 4
+    }
+
+    Buffer.prototype.writeFloatLE = function writeFloatLE (value, offset, noAssert) {
+      return writeFloat(this, value, offset, true, noAssert)
+    }
+
+    Buffer.prototype.writeFloatBE = function writeFloatBE (value, offset, noAssert) {
+      return writeFloat(this, value, offset, false, noAssert)
+    }
+
+    function writeDouble (buf, value, offset, littleEndian, noAssert) {
+      if (!noAssert) {
+        checkIEEE754(buf, value, offset, 8, 1.7976931348623157E+308, -1.7976931348623157E+308)
+      }
+      ieee754.write(buf, value, offset, littleEndian, 52, 8)
+      return offset + 8
+    }
+
+    Buffer.prototype.writeDoubleLE = function writeDoubleLE (value, offset, noAssert) {
+      return writeDouble(this, value, offset, true, noAssert)
+    }
+
+    Buffer.prototype.writeDoubleBE = function writeDoubleBE (value, offset, noAssert) {
+      return writeDouble(this, value, offset, false, noAssert)
+    }
+
+    // copy(targetBuffer, targetStart=0, sourceStart=0, sourceEnd=buffer.length)
+    Buffer.prototype.copy = function copy (target, targetStart, start, end) {
+      if (!start) start = 0
+      if (!end && end !== 0) end = this.length
+      if (targetStart >= target.length) targetStart = target.length
+      if (!targetStart) targetStart = 0
+      if (end > 0 && end < start) end = start
+
+      // Copy 0 bytes; we're done
+      if (end === start) return 0
+      if (target.length === 0 || this.length === 0) return 0
+
+      // Fatal error conditions
+      if (targetStart < 0) {
+        throw new RangeError('targetStart out of bounds')
+      }
+      if (start < 0 || start >= this.length) throw new RangeError('sourceStart out of bounds')
+      if (end < 0) throw new RangeError('sourceEnd out of bounds')
+
+      // Are we oob?
+      if (end > this.length) end = this.length
+      if (target.length - targetStart < end - start) {
+        end = target.length - targetStart + start
+      }
+
+      var len = end - start
+      var i
+
+      if (this === target && start < targetStart && targetStart < end) {
+        // descending copy from end
+        for (i = len - 1; i >= 0; i--) {
+          target[i + targetStart] = this[i + start]
+        }
+      } else if (len < 1000 || !Buffer.TYPED_ARRAY_SUPPORT) {
+        // ascending copy from start
+        for (i = 0; i < len; i++) {
+          target[i + targetStart] = this[i + start]
+        }
+      } else {
+        target._set(this.subarray(start, start + len), targetStart)
+      }
+
+      return len
+    }
+
+    // fill(value, start=0, end=buffer.length)
+    Buffer.prototype.fill = function fill (value, start, end) {
+      if (!value) value = 0
+      if (!start) start = 0
+      if (!end) end = this.length
+
+      if (end < start) throw new RangeError('end < start')
+
+      // Fill 0 bytes; we're done
+      if (end === start) return
+      if (this.length === 0) return
+
+      if (start < 0 || start >= this.length) throw new RangeError('start out of bounds')
+      if (end < 0 || end > this.length) throw new RangeError('end out of bounds')
+
+      var i
+      if (typeof value === 'number') {
+        for (i = start; i < end; i++) {
+          this[i] = value
+        }
+      } else {
+        var bytes = utf8ToBytes(value.toString())
+        var len = bytes.length
+        for (i = start; i < end; i++) {
+          this[i] = bytes[i % len]
+        }
+      }
+
+      return this
+    }
+
+    /**
+     * Creates a new `ArrayBuffer` with the *copied* memory of the buffer instance.
+     * Added in Node 0.12. Only available in browsers that support ArrayBuffer.
+     */
+    Buffer.prototype.toArrayBuffer = function toArrayBuffer () {
+      if (typeof Uint8Array !== 'undefined') {
+        if (Buffer.TYPED_ARRAY_SUPPORT) {
+          return (new Buffer(this)).buffer
+        } else {
+          var buf = new Uint8Array(this.length)
+          for (var i = 0, len = buf.length; i < len; i += 1) {
+            buf[i] = this[i]
+          }
+          return buf.buffer
+        }
+      } else {
+        throw new TypeError('Buffer.toArrayBuffer not supported in this browser')
+      }
+    }
+
+    // HELPER FUNCTIONS
+    // ================
+
+    var BP = Buffer.prototype
+
+    /**
+     * Augment a Uint8Array *instance* (not the Uint8Array class!) with Buffer methods
+     */
+    Buffer._augment = function _augment (arr) {
+      arr.constructor = Buffer
+      arr._isBuffer = true
+
+      // save reference to original Uint8Array set method before overwriting
+      arr._set = arr.set
+
+      // deprecated
+      arr.get = BP.get
+      arr.set = BP.set
+
+      arr.write = BP.write
+      arr.toString = BP.toString
+      arr.toLocaleString = BP.toString
+      arr.toJSON = BP.toJSON
+      arr.equals = BP.equals
+      arr.compare = BP.compare
+      arr.indexOf = BP.indexOf
+      arr.copy = BP.copy
+      arr.slice = BP.slice
+      arr.readUIntLE = BP.readUIntLE
+      arr.readUIntBE = BP.readUIntBE
+      arr.readUInt8 = BP.readUInt8
+      arr.readUInt16LE = BP.readUInt16LE
+      arr.readUInt16BE = BP.readUInt16BE
+      arr.readUInt32LE = BP.readUInt32LE
+      arr.readUInt32BE = BP.readUInt32BE
+      arr.readIntLE = BP.readIntLE
+      arr.readIntBE = BP.readIntBE
+      arr.readInt8 = BP.readInt8
+      arr.readInt16LE = BP.readInt16LE
+      arr.readInt16BE = BP.readInt16BE
+      arr.readInt32LE = BP.readInt32LE
+      arr.readInt32BE = BP.readInt32BE
+      arr.readFloatLE = BP.readFloatLE
+      arr.readFloatBE = BP.readFloatBE
+      arr.readDoubleLE = BP.readDoubleLE
+      arr.readDoubleBE = BP.readDoubleBE
+      arr.writeUInt8 = BP.writeUInt8
+      arr.writeUIntLE = BP.writeUIntLE
+      arr.writeUIntBE = BP.writeUIntBE
+      arr.writeUInt16LE = BP.writeUInt16LE
+      arr.writeUInt16BE = BP.writeUInt16BE
+      arr.writeUInt32LE = BP.writeUInt32LE
+      arr.writeUInt32BE = BP.writeUInt32BE
+      arr.writeIntLE = BP.writeIntLE
+      arr.writeIntBE = BP.writeIntBE
+      arr.writeInt8 = BP.writeInt8
+      arr.writeInt16LE = BP.writeInt16LE
+      arr.writeInt16BE = BP.writeInt16BE
+      arr.writeInt32LE = BP.writeInt32LE
+      arr.writeInt32BE = BP.writeInt32BE
+      arr.writeFloatLE = BP.writeFloatLE
+      arr.writeFloatBE = BP.writeFloatBE
+      arr.writeDoubleLE = BP.writeDoubleLE
+      arr.writeDoubleBE = BP.writeDoubleBE
+      arr.fill = BP.fill
+      arr.inspect = BP.inspect
+      arr.toArrayBuffer = BP.toArrayBuffer
+
+      return arr
+    }
+
+    var INVALID_BASE64_RE = /[^+\/0-9A-Za-z-_]/g
+
+    function base64clean (str) {
+      // Node strips out invalid characters like \n and \t from the string, base64-js does not
+      str = stringtrim(str).replace(INVALID_BASE64_RE, '')
+      // Node converts strings with length < 2 to ''
+      if (str.length < 2) return ''
+      // Node allows for non-padded base64 strings (missing trailing ===), base64-js does not
+      while (str.length % 4 !== 0) {
+        str = str + '='
+      }
+      return str
+    }
+
+    function stringtrim (str) {
+      if (str.trim) return str.trim()
+      return str.replace(/^\s+|\s+$/g, '')
+    }
+
+    function toHex (n) {
+      if (n < 16) return '0' + n.toString(16)
+      return n.toString(16)
+    }
+
+    function utf8ToBytes (string, units) {
+      units = units || Infinity
+      var codePoint
+      var length = string.length
+      var leadSurrogate = null
+      var bytes = []
+
+      for (var i = 0; i < length; i++) {
+        codePoint = string.charCodeAt(i)
+
+        // is surrogate component
+        if (codePoint > 0xD7FF && codePoint < 0xE000) {
+          // last char was a lead
+          if (!leadSurrogate) {
+            // no lead yet
+            if (codePoint > 0xDBFF) {
+              // unexpected trail
+              if ((units -= 3) > -1) bytes.push(0xEF, 0xBF, 0xBD)
+              continue
+            } else if (i + 1 === length) {
+              // unpaired lead
+              if ((units -= 3) > -1) bytes.push(0xEF, 0xBF, 0xBD)
+              continue
+            }
+
+            // valid lead
+            leadSurrogate = codePoint
+
+            continue
+          }
+
+          // 2 leads in a row
+          if (codePoint < 0xDC00) {
+            if ((units -= 3) > -1) bytes.push(0xEF, 0xBF, 0xBD)
+            leadSurrogate = codePoint
+            continue
+          }
+
+          // valid surrogate pair
+          codePoint = (leadSurrogate - 0xD800 << 10 | codePoint - 0xDC00) + 0x10000
+        } else if (leadSurrogate) {
+          // valid bmp char, but last char was a lead
+          if ((units -= 3) > -1) bytes.push(0xEF, 0xBF, 0xBD)
+        }
+
+        leadSurrogate = null
+
+        // encode utf8
+        if (codePoint < 0x80) {
+          if ((units -= 1) < 0) break
+          bytes.push(codePoint)
+        } else if (codePoint < 0x800) {
+          if ((units -= 2) < 0) break
+          bytes.push(
+            codePoint >> 0x6 | 0xC0,
+            codePoint & 0x3F | 0x80
+          )
+        } else if (codePoint < 0x10000) {
+          if ((units -= 3) < 0) break
+          bytes.push(
+            codePoint >> 0xC | 0xE0,
+            codePoint >> 0x6 & 0x3F | 0x80,
+            codePoint & 0x3F | 0x80
+          )
+        } else if (codePoint < 0x110000) {
+          if ((units -= 4) < 0) break
+          bytes.push(
+            codePoint >> 0x12 | 0xF0,
+            codePoint >> 0xC & 0x3F | 0x80,
+            codePoint >> 0x6 & 0x3F | 0x80,
+            codePoint & 0x3F | 0x80
+          )
+        } else {
+          throw new Error('Invalid code point')
+        }
+      }
+
+      return bytes
+    }
+
+    function asciiToBytes (str) {
+      var byteArray = []
+      for (var i = 0; i < str.length; i++) {
+        // Node's code seems to be doing this and not & 0x7F..
+        byteArray.push(str.charCodeAt(i) & 0xFF)
+      }
+      return byteArray
+    }
+
+    function utf16leToBytes (str, units) {
+      var c, hi, lo
+      var byteArray = []
+      for (var i = 0; i < str.length; i++) {
+        if ((units -= 2) < 0) break
+
+        c = str.charCodeAt(i)
+        hi = c >> 8
+        lo = c % 256
+        byteArray.push(lo)
+        byteArray.push(hi)
+      }
+
+      return byteArray
+    }
+
+    function base64ToBytes (str) {
+      return base64.toByteArray(base64clean(str))
+    }
+
+    function blitBuffer (src, dst, offset, length) {
+      for (var i = 0; i < length; i++) {
+        if ((i + offset >= dst.length) || (i >= src.length)) break
+        dst[i + offset] = src[i]
+      }
+      return i
+    }
+
+    }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+    },{"base64-js":2,"ieee754":8,"isarray":9}],5:[function(_dereq_,module,exports){
+    (function (process,global){
+    /*!
+     * @overview es6-promise - a tiny implementation of Promises/A+.
+     * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+     * @license   Licensed under MIT license
+     *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
+     * @version   4.1.1
+     */
+
+    (function (global, factory) {
+        typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+        typeof define === 'function' && define.amd ? define(factory) :
+        (global.ES6Promise = factory());
+    }(this, (function () { 'use strict';
+
+    function objectOrFunction(x) {
+      var type = typeof x;
+      return x !== null && (type === 'object' || type === 'function');
+    }
+
+    function isFunction(x) {
+      return typeof x === 'function';
+    }
+
+    var _isArray = undefined;
+    if (Array.isArray) {
+      _isArray = Array.isArray;
+    } else {
+      _isArray = function (x) {
+        return Object.prototype.toString.call(x) === '[object Array]';
+      };
+    }
+
+    var isArray = _isArray;
+
+    var len = 0;
+    var vertxNext = undefined;
+    var customSchedulerFn = undefined;
+
+    var asap = function asap(callback, arg) {
+      queue[len] = callback;
+      queue[len + 1] = arg;
+      len += 2;
+      if (len === 2) {
+        // If len is 2, that means that we need to schedule an async flush.
+        // If additional callbacks are queued before the queue is flushed, they
+        // will be processed by this flush that we are scheduling.
+        if (customSchedulerFn) {
+          customSchedulerFn(flush);
+        } else {
+          scheduleFlush();
+        }
+      }
+    };
+
+    function setScheduler(scheduleFn) {
+      customSchedulerFn = scheduleFn;
+    }
+
+    function setAsap(asapFn) {
+      asap = asapFn;
+    }
+
+    var browserWindow = typeof window !== 'undefined' ? window : undefined;
+    var browserGlobal = browserWindow || {};
+    var BrowserMutationObserver = browserGlobal.MutationObserver || browserGlobal.WebKitMutationObserver;
+    var isNode = typeof self === 'undefined' && typeof process !== 'undefined' && ({}).toString.call(process) === '[object process]';
+
+    // test for web worker but not in IE10
+    var isWorker = typeof Uint8ClampedArray !== 'undefined' && typeof importScripts !== 'undefined' && typeof MessageChannel !== 'undefined';
+
+    // node
+    function useNextTick() {
+      // node version 0.10.x displays a deprecation warning when nextTick is used recursively
+      // see https://github.com/cujojs/when/issues/410 for details
+      return function () {
+        return process.nextTick(flush);
+      };
+    }
+
+    // vertx
+    function useVertxTimer() {
+      if (typeof vertxNext !== 'undefined') {
+        return function () {
+          vertxNext(flush);
+        };
+      }
+
+      return useSetTimeout();
+    }
+
+    function useMutationObserver() {
+      var iterations = 0;
+      var observer = new BrowserMutationObserver(flush);
+      var node = document.createTextNode('');
+      observer.observe(node, { characterData: true });
+
+      return function () {
+        node.data = iterations = ++iterations % 2;
+      };
+    }
+
+    // web worker
+    function useMessageChannel() {
+      var channel = new MessageChannel();
+      channel.port1.onmessage = flush;
+      return function () {
+        return channel.port2.postMessage(0);
+      };
+    }
+
+    function useSetTimeout() {
+      // Store setTimeout reference so es6-promise will be unaffected by
+      // other code modifying setTimeout (like sinon.useFakeTimers())
+      var globalSetTimeout = setTimeout;
+      return function () {
+        return globalSetTimeout(flush, 1);
+      };
+    }
+
+    var queue = new Array(1000);
+    function flush() {
+      for (var i = 0; i < len; i += 2) {
+        var callback = queue[i];
+        var arg = queue[i + 1];
+
+        callback(arg);
+
+        queue[i] = undefined;
+        queue[i + 1] = undefined;
+      }
+
+      len = 0;
+    }
+
+    function attemptVertx() {
+      try {
+        var r = _dereq_;
+        var vertx = r('vertx');
+        vertxNext = vertx.runOnLoop || vertx.runOnContext;
+        return useVertxTimer();
+      } catch (e) {
+        return useSetTimeout();
+      }
+    }
+
+    var scheduleFlush = undefined;
+    // Decide what async method to use to triggering processing of queued callbacks:
+    if (isNode) {
+      scheduleFlush = useNextTick();
+    } else if (BrowserMutationObserver) {
+      scheduleFlush = useMutationObserver();
+    } else if (isWorker) {
+      scheduleFlush = useMessageChannel();
+    } else if (browserWindow === undefined && typeof _dereq_ === 'function') {
+      scheduleFlush = attemptVertx();
+    } else {
+      scheduleFlush = useSetTimeout();
+    }
+
+    function then(onFulfillment, onRejection) {
+      var _arguments = arguments;
+
+      var parent = this;
+
+      var child = new this.constructor(noop);
+
+      if (child[PROMISE_ID] === undefined) {
+        makePromise(child);
+      }
+
+      var _state = parent._state;
+
+      if (_state) {
+        (function () {
+          var callback = _arguments[_state - 1];
+          asap(function () {
+            return invokeCallback(_state, child, callback, parent._result);
+          });
+        })();
+      } else {
+        subscribe(parent, child, onFulfillment, onRejection);
+      }
+
+      return child;
+    }
+
+    /**
+      `Promise.resolve` returns a promise that will become resolved with the
+      passed `value`. It is shorthand for the following:
+
+      ```javascript
+      let promise = new Promise(function(resolve, reject){
+        resolve(1);
+      });
+
+      promise.then(function(value){
+        // value === 1
+      });
+      ```
+
+      Instead of writing the above, your code now simply becomes the following:
+
+      ```javascript
+      let promise = Promise.resolve(1);
+
+      promise.then(function(value){
+        // value === 1
+      });
+      ```
+
+      @method resolve
+      @static
+      @param {Any} value value that the returned promise will be resolved with
+      Useful for tooling.
+      @return {Promise} a promise that will become fulfilled with the given
+      `value`
+    */
+    function resolve$1(object) {
+      /*jshint validthis:true */
+      var Constructor = this;
+
+      if (object && typeof object === 'object' && object.constructor === Constructor) {
+        return object;
+      }
+
+      var promise = new Constructor(noop);
+      resolve(promise, object);
+      return promise;
+    }
+
+    var PROMISE_ID = Math.random().toString(36).substring(16);
+
+    function noop() {}
+
+    var PENDING = void 0;
+    var FULFILLED = 1;
+    var REJECTED = 2;
+
+    var GET_THEN_ERROR = new ErrorObject();
+
+    function selfFulfillment() {
+      return new TypeError("You cannot resolve a promise with itself");
+    }
+
+    function cannotReturnOwn() {
+      return new TypeError('A promises callback cannot return that same promise.');
+    }
+
+    function getThen(promise) {
+      try {
+        return promise.then;
+      } catch (error) {
+        GET_THEN_ERROR.error = error;
+        return GET_THEN_ERROR;
+      }
+    }
+
+    function tryThen(then$$1, value, fulfillmentHandler, rejectionHandler) {
+      try {
+        then$$1.call(value, fulfillmentHandler, rejectionHandler);
+      } catch (e) {
+        return e;
+      }
+    }
+
+    function handleForeignThenable(promise, thenable, then$$1) {
+      asap(function (promise) {
+        var sealed = false;
+        var error = tryThen(then$$1, thenable, function (value) {
+          if (sealed) {
+            return;
+          }
+          sealed = true;
+          if (thenable !== value) {
+            resolve(promise, value);
+          } else {
+            fulfill(promise, value);
+          }
+        }, function (reason) {
+          if (sealed) {
+            return;
+          }
+          sealed = true;
+
+          reject(promise, reason);
+        }, 'Settle: ' + (promise._label || ' unknown promise'));
+
+        if (!sealed && error) {
+          sealed = true;
+          reject(promise, error);
+        }
+      }, promise);
+    }
+
+    function handleOwnThenable(promise, thenable) {
+      if (thenable._state === FULFILLED) {
+        fulfill(promise, thenable._result);
+      } else if (thenable._state === REJECTED) {
+        reject(promise, thenable._result);
+      } else {
+        subscribe(thenable, undefined, function (value) {
+          return resolve(promise, value);
+        }, function (reason) {
+          return reject(promise, reason);
+        });
+      }
+    }
+
+    function handleMaybeThenable(promise, maybeThenable, then$$1) {
+      if (maybeThenable.constructor === promise.constructor && then$$1 === then && maybeThenable.constructor.resolve === resolve$1) {
+        handleOwnThenable(promise, maybeThenable);
+      } else {
+        if (then$$1 === GET_THEN_ERROR) {
+          reject(promise, GET_THEN_ERROR.error);
+          GET_THEN_ERROR.error = null;
+        } else if (then$$1 === undefined) {
+          fulfill(promise, maybeThenable);
+        } else if (isFunction(then$$1)) {
+          handleForeignThenable(promise, maybeThenable, then$$1);
+        } else {
+          fulfill(promise, maybeThenable);
+        }
+      }
+    }
+
+    function resolve(promise, value) {
+      if (promise === value) {
+        reject(promise, selfFulfillment());
+      } else if (objectOrFunction(value)) {
+        handleMaybeThenable(promise, value, getThen(value));
+      } else {
+        fulfill(promise, value);
+      }
+    }
+
+    function publishRejection(promise) {
+      if (promise._onerror) {
+        promise._onerror(promise._result);
+      }
+
+      publish(promise);
+    }
+
+    function fulfill(promise, value) {
+      if (promise._state !== PENDING) {
+        return;
+      }
+
+      promise._result = value;
+      promise._state = FULFILLED;
+
+      if (promise._subscribers.length !== 0) {
+        asap(publish, promise);
+      }
+    }
+
+    function reject(promise, reason) {
+      if (promise._state !== PENDING) {
+        return;
+      }
+      promise._state = REJECTED;
+      promise._result = reason;
+
+      asap(publishRejection, promise);
+    }
+
+    function subscribe(parent, child, onFulfillment, onRejection) {
+      var _subscribers = parent._subscribers;
+      var length = _subscribers.length;
+
+      parent._onerror = null;
+
+      _subscribers[length] = child;
+      _subscribers[length + FULFILLED] = onFulfillment;
+      _subscribers[length + REJECTED] = onRejection;
+
+      if (length === 0 && parent._state) {
+        asap(publish, parent);
+      }
+    }
+
+    function publish(promise) {
+      var subscribers = promise._subscribers;
+      var settled = promise._state;
+
+      if (subscribers.length === 0) {
+        return;
+      }
+
+      var child = undefined,
+          callback = undefined,
+          detail = promise._result;
+
+      for (var i = 0; i < subscribers.length; i += 3) {
+        child = subscribers[i];
+        callback = subscribers[i + settled];
+
+        if (child) {
+          invokeCallback(settled, child, callback, detail);
+        } else {
+          callback(detail);
+        }
+      }
+
+      promise._subscribers.length = 0;
+    }
+
+    function ErrorObject() {
+      this.error = null;
+    }
+
+    var TRY_CATCH_ERROR = new ErrorObject();
+
+    function tryCatch(callback, detail) {
+      try {
+        return callback(detail);
+      } catch (e) {
+        TRY_CATCH_ERROR.error = e;
+        return TRY_CATCH_ERROR;
+      }
+    }
+
+    function invokeCallback(settled, promise, callback, detail) {
+      var hasCallback = isFunction(callback),
+          value = undefined,
+          error = undefined,
+          succeeded = undefined,
+          failed = undefined;
+
+      if (hasCallback) {
+        value = tryCatch(callback, detail);
+
+        if (value === TRY_CATCH_ERROR) {
+          failed = true;
+          error = value.error;
+          value.error = null;
+        } else {
+          succeeded = true;
+        }
+
+        if (promise === value) {
+          reject(promise, cannotReturnOwn());
+          return;
+        }
+      } else {
+        value = detail;
+        succeeded = true;
+      }
+
+      if (promise._state !== PENDING) {
+        // noop
+      } else if (hasCallback && succeeded) {
+          resolve(promise, value);
+        } else if (failed) {
+          reject(promise, error);
+        } else if (settled === FULFILLED) {
+          fulfill(promise, value);
+        } else if (settled === REJECTED) {
+          reject(promise, value);
+        }
+    }
+
+    function initializePromise(promise, resolver) {
+      try {
+        resolver(function resolvePromise(value) {
+          resolve(promise, value);
+        }, function rejectPromise(reason) {
+          reject(promise, reason);
+        });
+      } catch (e) {
+        reject(promise, e);
+      }
+    }
+
+    var id = 0;
+    function nextId() {
+      return id++;
+    }
+
+    function makePromise(promise) {
+      promise[PROMISE_ID] = id++;
+      promise._state = undefined;
+      promise._result = undefined;
+      promise._subscribers = [];
+    }
+
+    function Enumerator$1(Constructor, input) {
+      this._instanceConstructor = Constructor;
+      this.promise = new Constructor(noop);
+
+      if (!this.promise[PROMISE_ID]) {
+        makePromise(this.promise);
+      }
+
+      if (isArray(input)) {
+        this.length = input.length;
+        this._remaining = input.length;
+
+        this._result = new Array(this.length);
+
+        if (this.length === 0) {
+          fulfill(this.promise, this._result);
+        } else {
+          this.length = this.length || 0;
+          this._enumerate(input);
+          if (this._remaining === 0) {
+            fulfill(this.promise, this._result);
+          }
+        }
+      } else {
+        reject(this.promise, validationError());
+      }
+    }
+
+    function validationError() {
+      return new Error('Array Methods must be provided an Array');
+    }
+
+    Enumerator$1.prototype._enumerate = function (input) {
+      for (var i = 0; this._state === PENDING && i < input.length; i++) {
+        this._eachEntry(input[i], i);
+      }
+    };
+
+    Enumerator$1.prototype._eachEntry = function (entry, i) {
+      var c = this._instanceConstructor;
+      var resolve$$1 = c.resolve;
+
+      if (resolve$$1 === resolve$1) {
+        var _then = getThen(entry);
+
+        if (_then === then && entry._state !== PENDING) {
+          this._settledAt(entry._state, i, entry._result);
+        } else if (typeof _then !== 'function') {
+          this._remaining--;
+          this._result[i] = entry;
+        } else if (c === Promise$2) {
+          var promise = new c(noop);
+          handleMaybeThenable(promise, entry, _then);
+          this._willSettleAt(promise, i);
+        } else {
+          this._willSettleAt(new c(function (resolve$$1) {
+            return resolve$$1(entry);
+          }), i);
+        }
+      } else {
+        this._willSettleAt(resolve$$1(entry), i);
+      }
+    };
+
+    Enumerator$1.prototype._settledAt = function (state, i, value) {
+      var promise = this.promise;
+
+      if (promise._state === PENDING) {
+        this._remaining--;
+
+        if (state === REJECTED) {
+          reject(promise, value);
+        } else {
+          this._result[i] = value;
+        }
+      }
+
+      if (this._remaining === 0) {
+        fulfill(promise, this._result);
+      }
+    };
+
+    Enumerator$1.prototype._willSettleAt = function (promise, i) {
+      var enumerator = this;
+
+      subscribe(promise, undefined, function (value) {
+        return enumerator._settledAt(FULFILLED, i, value);
+      }, function (reason) {
+        return enumerator._settledAt(REJECTED, i, reason);
+      });
+    };
+
+    /**
+      `Promise.all` accepts an array of promises, and returns a new promise which
+      is fulfilled with an array of fulfillment values for the passed promises, or
+      rejected with the reason of the first passed promise to be rejected. It casts all
+      elements of the passed iterable to promises as it runs this algorithm.
+
+      Example:
+
+      ```javascript
+      let promise1 = resolve(1);
+      let promise2 = resolve(2);
+      let promise3 = resolve(3);
+      let promises = [ promise1, promise2, promise3 ];
+
+      Promise.all(promises).then(function(array){
+        // The array here would be [ 1, 2, 3 ];
+      });
+      ```
+
+      If any of the `promises` given to `all` are rejected, the first promise
+      that is rejected will be given as an argument to the returned promises's
+      rejection handler. For example:
+
+      Example:
+
+      ```javascript
+      let promise1 = resolve(1);
+      let promise2 = reject(new Error("2"));
+      let promise3 = reject(new Error("3"));
+      let promises = [ promise1, promise2, promise3 ];
+
+      Promise.all(promises).then(function(array){
+        // Code here never runs because there are rejected promises!
+      }, function(error) {
+        // error.message === "2"
+      });
+      ```
+
+      @method all
+      @static
+      @param {Array} entries array of promises
+      @param {String} label optional string for labeling the promise.
+      Useful for tooling.
+      @return {Promise} promise that is fulfilled when all `promises` have been
+      fulfilled, or rejected if any of them become rejected.
+      @static
+    */
+    function all$1(entries) {
+      return new Enumerator$1(this, entries).promise;
+    }
+
+    /**
+      `Promise.race` returns a new promise which is settled in the same way as the
+      first passed promise to settle.
+
+      Example:
+
+      ```javascript
+      let promise1 = new Promise(function(resolve, reject){
+        setTimeout(function(){
+          resolve('promise 1');
+        }, 200);
+      });
+
+      let promise2 = new Promise(function(resolve, reject){
+        setTimeout(function(){
+          resolve('promise 2');
+        }, 100);
+      });
+
+      Promise.race([promise1, promise2]).then(function(result){
+        // result === 'promise 2' because it was resolved before promise1
+        // was resolved.
+      });
+      ```
+
+      `Promise.race` is deterministic in that only the state of the first
+      settled promise matters. For example, even if other promises given to the
+      `promises` array argument are resolved, but the first settled promise has
+      become rejected before the other promises became fulfilled, the returned
+      promise will become rejected:
+
+      ```javascript
+      let promise1 = new Promise(function(resolve, reject){
+        setTimeout(function(){
+          resolve('promise 1');
+        }, 200);
+      });
+
+      let promise2 = new Promise(function(resolve, reject){
+        setTimeout(function(){
+          reject(new Error('promise 2'));
+        }, 100);
+      });
+
+      Promise.race([promise1, promise2]).then(function(result){
+        // Code here never runs
+      }, function(reason){
+        // reason.message === 'promise 2' because promise 2 became rejected before
+        // promise 1 became fulfilled
+      });
+      ```
+
+      An example real-world use case is implementing timeouts:
+
+      ```javascript
+      Promise.race([ajax('foo.json'), timeout(5000)])
+      ```
+
+      @method race
+      @static
+      @param {Array} promises array of promises to observe
+      Useful for tooling.
+      @return {Promise} a promise which settles in the same way as the first passed
+      promise to settle.
+    */
+    function race$1(entries) {
+      /*jshint validthis:true */
+      var Constructor = this;
+
+      if (!isArray(entries)) {
+        return new Constructor(function (_, reject) {
+          return reject(new TypeError('You must pass an array to race.'));
+        });
+      } else {
+        return new Constructor(function (resolve, reject) {
+          var length = entries.length;
+          for (var i = 0; i < length; i++) {
+            Constructor.resolve(entries[i]).then(resolve, reject);
+          }
+        });
+      }
+    }
+
+    /**
+      `Promise.reject` returns a promise rejected with the passed `reason`.
+      It is shorthand for the following:
+
+      ```javascript
+      let promise = new Promise(function(resolve, reject){
+        reject(new Error('WHOOPS'));
+      });
+
+      promise.then(function(value){
+        // Code here doesn't run because the promise is rejected!
+      }, function(reason){
+        // reason.message === 'WHOOPS'
+      });
+      ```
+
+      Instead of writing the above, your code now simply becomes the following:
+
+      ```javascript
+      let promise = Promise.reject(new Error('WHOOPS'));
+
+      promise.then(function(value){
+        // Code here doesn't run because the promise is rejected!
+      }, function(reason){
+        // reason.message === 'WHOOPS'
+      });
+      ```
+
+      @method reject
+      @static
+      @param {Any} reason value that the returned promise will be rejected with.
+      Useful for tooling.
+      @return {Promise} a promise rejected with the given `reason`.
+    */
+    function reject$1(reason) {
+      /*jshint validthis:true */
+      var Constructor = this;
+      var promise = new Constructor(noop);
+      reject(promise, reason);
+      return promise;
+    }
+
+    function needsResolver() {
+      throw new TypeError('You must pass a resolver function as the first argument to the promise constructor');
+    }
+
+    function needsNew() {
+      throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");
+    }
+
+    /**
+      Promise objects represent the eventual result of an asynchronous operation. The
+      primary way of interacting with a promise is through its `then` method, which
+      registers callbacks to receive either a promise's eventual value or the reason
+      why the promise cannot be fulfilled.
+
+      Terminology
+      -----------
+
+      - `promise` is an object or function with a `then` method whose behavior conforms to this specification.
+      - `thenable` is an object or function that defines a `then` method.
+      - `value` is any legal JavaScript value (including undefined, a thenable, or a promise).
+      - `exception` is a value that is thrown using the throw statement.
+      - `reason` is a value that indicates why a promise was rejected.
+      - `settled` the final resting state of a promise, fulfilled or rejected.
+
+      A promise can be in one of three states: pending, fulfilled, or rejected.
+
+      Promises that are fulfilled have a fulfillment value and are in the fulfilled
+      state.  Promises that are rejected have a rejection reason and are in the
+      rejected state.  A fulfillment value is never a thenable.
+
+      Promises can also be said to *resolve* a value.  If this value is also a
+      promise, then the original promise's settled state will match the value's
+      settled state.  So a promise that *resolves* a promise that rejects will
+      itself reject, and a promise that *resolves* a promise that fulfills will
+      itself fulfill.
+
+
+      Basic Usage:
+      ------------
+
+      ```js
+      let promise = new Promise(function(resolve, reject) {
+        // on success
+        resolve(value);
+
+        // on failure
+        reject(reason);
+      });
+
+      promise.then(function(value) {
+        // on fulfillment
+      }, function(reason) {
+        // on rejection
+      });
+      ```
+
+      Advanced Usage:
+      ---------------
+
+      Promises shine when abstracting away asynchronous interactions such as
+      `XMLHttpRequest`s.
+
+      ```js
+      function getJSON(url) {
+        return new Promise(function(resolve, reject){
+          let xhr = new XMLHttpRequest();
+
+          xhr.open('GET', url);
+          xhr.onreadystatechange = handler;
+          xhr.responseType = 'json';
+          xhr.setRequestHeader('Accept', 'application/json');
+          xhr.send();
+
+          function handler() {
+            if (this.readyState === this.DONE) {
+              if (this.status === 200) {
+                resolve(this.response);
+              } else {
+                reject(new Error('getJSON: `' + url + '` failed with status: [' + this.status + ']'));
+              }
+            }
+          };
+        });
+      }
+
+      getJSON('/posts.json').then(function(json) {
+        // on fulfillment
+      }, function(reason) {
+        // on rejection
+      });
+      ```
+
+      Unlike callbacks, promises are great composable primitives.
+
+      ```js
+      Promise.all([
+        getJSON('/posts'),
+        getJSON('/comments')
+      ]).then(function(values){
+        values[0] // => postsJSON
+        values[1] // => commentsJSON
+
+        return values;
+      });
+      ```
+
+      @class Promise
+      @param {function} resolver
+      Useful for tooling.
+      @constructor
+    */
+    function Promise$2(resolver) {
+      this[PROMISE_ID] = nextId();
+      this._result = this._state = undefined;
+      this._subscribers = [];
+
+      if (noop !== resolver) {
+        typeof resolver !== 'function' && needsResolver();
+        this instanceof Promise$2 ? initializePromise(this, resolver) : needsNew();
+      }
+    }
+
+    Promise$2.all = all$1;
+    Promise$2.race = race$1;
+    Promise$2.resolve = resolve$1;
+    Promise$2.reject = reject$1;
+    Promise$2._setScheduler = setScheduler;
+    Promise$2._setAsap = setAsap;
+    Promise$2._asap = asap;
+
+    Promise$2.prototype = {
+      constructor: Promise$2,
+
+      /**
+        The primary way of interacting with a promise is through its `then` method,
+        which registers callbacks to receive either a promise's eventual value or the
+        reason why the promise cannot be fulfilled.
+
+        ```js
+        findUser().then(function(user){
+          // user is available
+        }, function(reason){
+          // user is unavailable, and you are given the reason why
+        });
+        ```
+
+        Chaining
+        --------
+
+        The return value of `then` is itself a promise.  This second, 'downstream'
+        promise is resolved with the return value of the first promise's fulfillment
+        or rejection handler, or rejected if the handler throws an exception.
+
+        ```js
+        findUser().then(function (user) {
+          return user.name;
+        }, function (reason) {
+          return 'default name';
+        }).then(function (userName) {
+          // If `findUser` fulfilled, `userName` will be the user's name, otherwise it
+          // will be `'default name'`
+        });
+
+        findUser().then(function (user) {
+          throw new Error('Found user, but still unhappy');
+        }, function (reason) {
+          throw new Error('`findUser` rejected and we're unhappy');
+        }).then(function (value) {
+          // never reached
+        }, function (reason) {
+          // if `findUser` fulfilled, `reason` will be 'Found user, but still unhappy'.
+          // If `findUser` rejected, `reason` will be '`findUser` rejected and we're unhappy'.
+        });
+        ```
+        If the downstream promise does not specify a rejection handler, rejection reasons will be propagated further downstream.
+
+        ```js
+        findUser().then(function (user) {
+          throw new PedagogicalException('Upstream error');
+        }).then(function (value) {
+          // never reached
+        }).then(function (value) {
+          // never reached
+        }, function (reason) {
+          // The `PedgagocialException` is propagated all the way down to here
+        });
+        ```
+
+        Assimilation
+        ------------
+
+        Sometimes the value you want to propagate to a downstream promise can only be
+        retrieved asynchronously. This can be achieved by returning a promise in the
+        fulfillment or rejection handler. The downstream promise will then be pending
+        until the returned promise is settled. This is called *assimilation*.
+
+        ```js
+        findUser().then(function (user) {
+          return findCommentsByAuthor(user);
+        }).then(function (comments) {
+          // The user's comments are now available
+        });
+        ```
+
+        If the assimliated promise rejects, then the downstream promise will also reject.
+
+        ```js
+        findUser().then(function (user) {
+          return findCommentsByAuthor(user);
+        }).then(function (comments) {
+          // If `findCommentsByAuthor` fulfills, we'll have the value here
+        }, function (reason) {
+          // If `findCommentsByAuthor` rejects, we'll have the reason here
+        });
+        ```
+
+        Simple Example
+        --------------
+
+        Synchronous Example
+
+        ```javascript
+        let result;
+
+        try {
+          result = findResult();
+          // success
+        } catch(reason) {
+          // failure
+        }
+        ```
+
+        Errback Example
+
+        ```js
+        findResult(function(result, err){
+          if (err) {
+            // failure
+          } else {
+            // success
+          }
+        });
+        ```
+
+        Promise Example;
+
+        ```javascript
+        findResult().then(function(result){
+          // success
+        }, function(reason){
+          // failure
+        });
+        ```
+
+        Advanced Example
+        --------------
+
+        Synchronous Example
+
+        ```javascript
+        let author, books;
+
+        try {
+          author = findAuthor();
+          books  = findBooksByAuthor(author);
+          // success
+        } catch(reason) {
+          // failure
+        }
+        ```
+
+        Errback Example
+
+        ```js
+
+        function foundBooks(books) {
+
+        }
+
+        function failure(reason) {
+
+        }
+
+        findAuthor(function(author, err){
+          if (err) {
+            failure(err);
+            // failure
+          } else {
+            try {
+              findBoooksByAuthor(author, function(books, err) {
+                if (err) {
+                  failure(err);
+                } else {
+                  try {
+                    foundBooks(books);
+                  } catch(reason) {
+                    failure(reason);
+                  }
+                }
+              });
+            } catch(error) {
+              failure(err);
+            }
+            // success
+          }
+        });
+        ```
+
+        Promise Example;
+
+        ```javascript
+        findAuthor().
+          then(findBooksByAuthor).
+          then(function(books){
+            // found books
+        }).catch(function(reason){
+          // something went wrong
+        });
+        ```
+
+        @method then
+        @param {Function} onFulfilled
+        @param {Function} onRejected
+        Useful for tooling.
+        @return {Promise}
+      */
+      then: then,
+
+      /**
+        `catch` is simply sugar for `then(undefined, onRejection)` which makes it the same
+        as the catch block of a try/catch statement.
+
+        ```js
+        function findAuthor(){
+          throw new Error('couldn't find that author');
+        }
+
+        // synchronous
+        try {
+          findAuthor();
+        } catch(reason) {
+          // something went wrong
+        }
+
+        // async with promises
+        findAuthor().catch(function(reason){
+          // something went wrong
+        });
+        ```
+
+        @method catch
+        @param {Function} onRejection
+        Useful for tooling.
+        @return {Promise}
+      */
+      'catch': function _catch(onRejection) {
+        return this.then(null, onRejection);
+      }
+    };
+
+    /*global self*/
+    function polyfill$1() {
+        var local = undefined;
+
+        if (typeof global !== 'undefined') {
+            local = global;
+        } else if (typeof self !== 'undefined') {
+            local = self;
+        } else {
+            try {
+                local = Function('return this')();
+            } catch (e) {
+                throw new Error('polyfill failed because global object is unavailable in this environment');
+            }
+        }
+
+        var P = local.Promise;
+
+        if (P) {
+            var promiseToString = null;
+            try {
+                promiseToString = Object.prototype.toString.call(P.resolve());
+            } catch (e) {
+                // silently ignored
+            }
+
+            if (promiseToString === '[object Promise]' && !P.cast) {
+                return;
+            }
+        }
+
+        local.Promise = Promise$2;
+    }
+
+    // Strange compat..
+    Promise$2.polyfill = polyfill$1;
+    Promise$2.Promise = Promise$2;
+
+    return Promise$2;
+
+    })));
+
+
+
+    }).call(this,_dereq_('_process'),typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+    },{"_process":11}],6:[function(_dereq_,module,exports){
+    (function (global, factory) {
+      if (typeof define === 'function' && define.amd) {
+        define(['exports', 'module'], factory);
+      } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
+        factory(exports, module);
+      } else {
+        var mod = {
+          exports: {}
+        };
+        factory(mod.exports, mod);
+        global.fetchJsonp = mod.exports;
+      }
+    })(this, function (exports, module) {
+      'use strict';
+
+      var defaultOptions = {
+        timeout: 5000,
+        jsonpCallback: 'callback',
+        jsonpCallbackFunction: null
+      };
+
+      function generateCallbackFunction() {
+        return 'jsonp_' + Date.now() + '_' + Math.ceil(Math.random() * 100000);
+      }
+
+      function clearFunction(functionName) {
+        // IE8 throws an exception when you try to delete a property on window
+        // http://stackoverflow.com/a/1824228/751089
+        try {
+          delete window[functionName];
+        } catch (e) {
+          window[functionName] = undefined;
+        }
+      }
+
+      function removeScript(scriptId) {
+        var script = document.getElementById(scriptId);
+        if (script) {
+          document.getElementsByTagName('head')[0].removeChild(script);
+        }
+      }
+
+      function fetchJsonp(_url) {
+        var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+        // to avoid param reassign
+        var url = _url;
+        var timeout = options.timeout || defaultOptions.timeout;
+        var jsonpCallback = options.jsonpCallback || defaultOptions.jsonpCallback;
+
+        var timeoutId = undefined;
+
+        return new Promise(function (resolve, reject) {
+          var callbackFunction = options.jsonpCallbackFunction || generateCallbackFunction();
+          var scriptId = jsonpCallback + '_' + callbackFunction;
+
+          window[callbackFunction] = function (response) {
+            resolve({
+              ok: true,
+              // keep consistent with fetch API
+              json: function json() {
+                return Promise.resolve(response);
+              }
+            });
+
+            if (timeoutId) clearTimeout(timeoutId);
+
+            removeScript(scriptId);
+
+            clearFunction(callbackFunction);
+          };
+
+          // Check if the user set their own params, and if not add a ? to start a list of params
+          url += url.indexOf('?') === -1 ? '?' : '&';
+
+          var jsonpScript = document.createElement('script');
+          jsonpScript.setAttribute('src', '' + url + jsonpCallback + '=' + callbackFunction);
+          if (options.charset) {
+            jsonpScript.setAttribute('charset', options.charset);
+          }
+          jsonpScript.id = scriptId;
+          document.getElementsByTagName('head')[0].appendChild(jsonpScript);
+
+          timeoutId = setTimeout(function () {
+            reject(new Error('JSONP request to ' + _url + ' timed out'));
+
+            clearFunction(callbackFunction);
+            removeScript(scriptId);
+            window[callbackFunction] = function () {
+              clearFunction(callbackFunction);
+            };
+          }, timeout);
+
+          // Caught if got 404/500
+          jsonpScript.onerror = function () {
+            reject(new Error('JSONP request to ' + _url + ' failed'));
+
+            clearFunction(callbackFunction);
+            removeScript(scriptId);
+            if (timeoutId) clearTimeout(timeoutId);
+          };
+        });
+      }
+
+      // export as global function
+      /*
+      let local;
+      if (typeof global !== 'undefined') {
+        local = global;
+      } else if (typeof self !== 'undefined') {
+        local = self;
+      } else {
+        try {
+          local = Function('return this')();
+        } catch (e) {
+          throw new Error('polyfill failed because global object is unavailable in this environment');
+        }
+      }
+      local.fetchJsonp = fetchJsonp;
+      */
+
+      module.exports = fetchJsonp;
+    });
+    },{}],7:[function(_dereq_,module,exports){
+    /* FileSaver.js
+     * A saveAs() FileSaver implementation.
+     * 1.3.2
+     * 2016-06-16 18:25:19
+     *
+     * By Eli Grey, http://eligrey.com
+     * License: MIT
+     *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
+     */
+
+    /*global self */
+    /*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
+
+    /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
+
+    var saveAs = saveAs || (function(view) {
+        "use strict";
+        // IE <10 is explicitly unsupported
+        if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
+            return;
+        }
+        var
+              doc = view.document
+              // only get URL when necessary in case Blob.js hasn't overridden it yet
+            , get_URL = function() {
+                return view.URL || view.webkitURL || view;
+            }
+            , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
+            , can_use_save_link = "download" in save_link
+            , click = function(node) {
+                var event = new MouseEvent("click");
+                node.dispatchEvent(event);
+            }
+            , is_safari = /constructor/i.test(view.HTMLElement) || view.safari
+            , is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
+            , throw_outside = function(ex) {
+                (view.setImmediate || view.setTimeout)(function() {
+                    throw ex;
+                }, 0);
+            }
+            , force_saveable_type = "application/octet-stream"
+            // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
+            , arbitrary_revoke_timeout = 1000 * 40 // in ms
+            , revoke = function(file) {
+                var revoker = function() {
+                    if (typeof file === "string") { // file is an object URL
+                        get_URL().revokeObjectURL(file);
+                    } else { // file is a File
+                        file.remove();
+                    }
+                };
+                setTimeout(revoker, arbitrary_revoke_timeout);
+            }
+            , dispatch = function(filesaver, event_types, event) {
+                event_types = [].concat(event_types);
+                var i = event_types.length;
+                while (i--) {
+                    var listener = filesaver["on" + event_types[i]];
+                    if (typeof listener === "function") {
+                        try {
+                            listener.call(filesaver, event || filesaver);
+                        } catch (ex) {
+                            throw_outside(ex);
+                        }
+                    }
+                }
+            }
+            , auto_bom = function(blob) {
+                // prepend BOM for UTF-8 XML and text/* types (including HTML)
+                // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
+                if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
+                    return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
+                }
+                return blob;
+            }
+            , FileSaver = function(blob, name, no_auto_bom) {
+                if (!no_auto_bom) {
+                    blob = auto_bom(blob);
+                }
+                // First try a.download, then web filesystem, then object URLs
+                var
+                      filesaver = this
+                    , type = blob.type
+                    , force = type === force_saveable_type
+                    , object_url
+                    , dispatch_all = function() {
+                        dispatch(filesaver, "writestart progress write writeend".split(" "));
+                    }
+                    // on any filesys errors revert to saving with object URLs
+                    , fs_error = function() {
+                        if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
+                            // Safari doesn't allow downloading of blob urls
+                            var reader = new FileReader();
+                            reader.onloadend = function() {
+                                var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
+                                var popup = view.open(url, '_blank');
+                                if(!popup) view.location.href = url;
+                                url=undefined; // release reference before dispatching
+                                filesaver.readyState = filesaver.DONE;
+                                dispatch_all();
+                            };
+                            reader.readAsDataURL(blob);
+                            filesaver.readyState = filesaver.INIT;
+                            return;
+                        }
+                        // don't create more object URLs than needed
+                        if (!object_url) {
+                            object_url = get_URL().createObjectURL(blob);
+                        }
+                        if (force) {
+                            view.location.href = object_url;
+                        } else {
+                            var opened = view.open(object_url, "_blank");
+                            if (!opened) {
+                                // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
+                                view.location.href = object_url;
+                            }
+                        }
+                        filesaver.readyState = filesaver.DONE;
+                        dispatch_all();
+                        revoke(object_url);
+                    }
+                ;
+                filesaver.readyState = filesaver.INIT;
+
+                if (can_use_save_link) {
+                    object_url = get_URL().createObjectURL(blob);
+                    setTimeout(function() {
+                        save_link.href = object_url;
+                        save_link.download = name;
+                        click(save_link);
+                        dispatch_all();
+                        revoke(object_url);
+                        filesaver.readyState = filesaver.DONE;
+                    });
+                    return;
+                }
+
+                fs_error();
+            }
+            , FS_proto = FileSaver.prototype
+            , saveAs = function(blob, name, no_auto_bom) {
+                return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
+            }
+        ;
+        // IE 10+ (native saveAs)
+        if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
+            return function(blob, name, no_auto_bom) {
+                name = name || blob.name || "download";
+
+                if (!no_auto_bom) {
+                    blob = auto_bom(blob);
+                }
+                return navigator.msSaveOrOpenBlob(blob, name);
+            };
+        }
+
+        FS_proto.abort = function(){};
+        FS_proto.readyState = FS_proto.INIT = 0;
+        FS_proto.WRITING = 1;
+        FS_proto.DONE = 2;
+
+        FS_proto.error =
+        FS_proto.onwritestart =
+        FS_proto.onprogress =
+        FS_proto.onwrite =
+        FS_proto.onabort =
+        FS_proto.onerror =
+        FS_proto.onwriteend =
+            null;
+
+        return saveAs;
+    }(
+           typeof self !== "undefined" && self
+        || typeof window !== "undefined" && window
+        || this.content
+    ));
+    // `self` is undefined in Firefox for Android content script context
+    // while `this` is nsIContentFrameMessageManager
+    // with an attribute `content` that corresponds to the window
+
+    if (typeof module !== "undefined" && module.exports) {
+      module.exports.saveAs = saveAs;
+    } else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
+      define("FileSaver.js", function() {
+        return saveAs;
+      });
+    }
+
+    },{}],8:[function(_dereq_,module,exports){
+    exports.read = function (buffer, offset, isLE, mLen, nBytes) {
+      var e, m
+      var eLen = nBytes * 8 - mLen - 1
+      var eMax = (1 << eLen) - 1
+      var eBias = eMax >> 1
+      var nBits = -7
+      var i = isLE ? (nBytes - 1) : 0
+      var d = isLE ? -1 : 1
+      var s = buffer[offset + i]
+
+      i += d
+
+      e = s & ((1 << (-nBits)) - 1)
+      s >>= (-nBits)
+      nBits += eLen
+      for (; nBits > 0; e = e * 256 + buffer[offset + i], i += d, nBits -= 8) {}
+
+      m = e & ((1 << (-nBits)) - 1)
+      e >>= (-nBits)
+      nBits += mLen
+      for (; nBits > 0; m = m * 256 + buffer[offset + i], i += d, nBits -= 8) {}
+
+      if (e === 0) {
+        e = 1 - eBias
+      } else if (e === eMax) {
+        return m ? NaN : ((s ? -1 : 1) * Infinity)
+      } else {
+        m = m + Math.pow(2, mLen)
+        e = e - eBias
+      }
+      return (s ? -1 : 1) * m * Math.pow(2, e - mLen)
+    }
+
+    exports.write = function (buffer, value, offset, isLE, mLen, nBytes) {
+      var e, m, c
+      var eLen = nBytes * 8 - mLen - 1
+      var eMax = (1 << eLen) - 1
+      var eBias = eMax >> 1
+      var rt = (mLen === 23 ? Math.pow(2, -24) - Math.pow(2, -77) : 0)
+      var i = isLE ? 0 : (nBytes - 1)
+      var d = isLE ? 1 : -1
+      var s = value < 0 || (value === 0 && 1 / value < 0) ? 1 : 0
+
+      value = Math.abs(value)
+
+      if (isNaN(value) || value === Infinity) {
+        m = isNaN(value) ? 1 : 0
+        e = eMax
+      } else {
+        e = Math.floor(Math.log(value) / Math.LN2)
+        if (value * (c = Math.pow(2, -e)) < 1) {
+          e--
+          c *= 2
+        }
+        if (e + eBias >= 1) {
+          value += rt / c
+        } else {
+          value += rt * Math.pow(2, 1 - eBias)
+        }
+        if (value * c >= 2) {
+          e++
+          c /= 2
+        }
+
+        if (e + eBias >= eMax) {
+          m = 0
+          e = eMax
+        } else if (e + eBias >= 1) {
+          m = (value * c - 1) * Math.pow(2, mLen)
+          e = e + eBias
+        } else {
+          m = value * Math.pow(2, eBias - 1) * Math.pow(2, mLen)
+          e = 0
+        }
+      }
+
+      for (; mLen >= 8; buffer[offset + i] = m & 0xff, i += d, m /= 256, mLen -= 8) {}
+
+      e = (e << mLen) | m
+      eLen += mLen
+      for (; eLen > 0; buffer[offset + i] = e & 0xff, i += d, e /= 256, eLen -= 8) {}
+
+      buffer[offset + i - d] |= s * 128
+    }
+
+    },{}],9:[function(_dereq_,module,exports){
+    var toString = {}.toString;
+
+    module.exports = Array.isArray || function (arr) {
+      return toString.call(arr) == '[object Array]';
+    };
+
+    },{}],10:[function(_dereq_,module,exports){
+    (function (Buffer){
+    /**
+     * https://opentype.js.org v0.7.3 | (c) Frederik De Bleser and other contributors | MIT License | Uses tiny-inflate by Devon Govett
+     */
+
+    (function (global, factory) {
+        typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+        typeof define === 'function' && define.amd ? define(['exports'], factory) :
+        (factory((global.opentype = global.opentype || {})));
+    }(this, (function (exports) { 'use strict';
+
+    var TINF_OK = 0;
+    var TINF_DATA_ERROR = -3;
+
+    function Tree() {
+      this.table = new Uint16Array(16);   /* table of code length counts */
+      this.trans = new Uint16Array(288);  /* code -> symbol translation table */
+    }
+
+    function Data(source, dest) {
+      this.source = source;
+      this.sourceIndex = 0;
+      this.tag = 0;
+      this.bitcount = 0;
+
+      this.dest = dest;
+      this.destLen = 0;
+
+      this.ltree = new Tree();  /* dynamic length/symbol tree */
+      this.dtree = new Tree();  /* dynamic distance tree */
+    }
+
+    /* --------------------------------------------------- *
+     * -- uninitialized global data (static structures) -- *
+     * --------------------------------------------------- */
+
+    var sltree = new Tree();
+    var sdtree = new Tree();
+
+    /* extra bits and base tables for length codes */
+    var length_bits = new Uint8Array(30);
+    var length_base = new Uint16Array(30);
+
+    /* extra bits and base tables for distance codes */
+    var dist_bits = new Uint8Array(30);
+    var dist_base = new Uint16Array(30);
+
+    /* special ordering of code length codes */
+    var clcidx = new Uint8Array([
+      16, 17, 18, 0, 8, 7, 9, 6,
+      10, 5, 11, 4, 12, 3, 13, 2,
+      14, 1, 15
+    ]);
+
+    /* used by tinf_decode_trees, avoids allocations every call */
+    var code_tree = new Tree();
+    var lengths = new Uint8Array(288 + 32);
+
+    /* ----------------------- *
+     * -- utility functions -- *
+     * ----------------------- */
+
+    /* build extra bits and base tables */
+    function tinf_build_bits_base(bits, base, delta, first) {
+      var i, sum;
+
+      /* build bits table */
+      for (i = 0; i < delta; ++i) { bits[i] = 0; }
+      for (i = 0; i < 30 - delta; ++i) { bits[i + delta] = i / delta | 0; }
+
+      /* build base table */
+      for (sum = first, i = 0; i < 30; ++i) {
+        base[i] = sum;
+        sum += 1 << bits[i];
+      }
+    }
+
+    /* build the fixed huffman trees */
+    function tinf_build_fixed_trees(lt, dt) {
+      var i;
+
+      /* build fixed length tree */
+      for (i = 0; i < 7; ++i) { lt.table[i] = 0; }
+
+      lt.table[7] = 24;
+      lt.table[8] = 152;
+      lt.table[9] = 112;
+
+      for (i = 0; i < 24; ++i) { lt.trans[i] = 256 + i; }
+      for (i = 0; i < 144; ++i) { lt.trans[24 + i] = i; }
+      for (i = 0; i < 8; ++i) { lt.trans[24 + 144 + i] = 280 + i; }
+      for (i = 0; i < 112; ++i) { lt.trans[24 + 144 + 8 + i] = 144 + i; }
+
+      /* build fixed distance tree */
+      for (i = 0; i < 5; ++i) { dt.table[i] = 0; }
+
+      dt.table[5] = 32;
+
+      for (i = 0; i < 32; ++i) { dt.trans[i] = i; }
+    }
+
+    /* given an array of code lengths, build a tree */
+    var offs = new Uint16Array(16);
+
+    function tinf_build_tree(t, lengths, off, num) {
+      var i, sum;
+
+      /* clear code length count table */
+      for (i = 0; i < 16; ++i) { t.table[i] = 0; }
+
+      /* scan symbol lengths, and sum code length counts */
+      for (i = 0; i < num; ++i) { t.table[lengths[off + i]]++; }
+
+      t.table[0] = 0;
+
+      /* compute offset table for distribution sort */
+      for (sum = 0, i = 0; i < 16; ++i) {
+        offs[i] = sum;
+        sum += t.table[i];
+      }
+
+      /* create code->symbol translation table (symbols sorted by code) */
+      for (i = 0; i < num; ++i) {
+        if (lengths[off + i]) { t.trans[offs[lengths[off + i]]++] = i; }
+      }
+    }
+
+    /* ---------------------- *
+     * -- decode functions -- *
+     * ---------------------- */
+
+    /* get one bit from source stream */
+    function tinf_getbit(d) {
+      /* check if tag is empty */
+      if (!d.bitcount--) {
+        /* load next tag */
+        d.tag = d.source[d.sourceIndex++];
+        d.bitcount = 7;
+      }
+
+      /* shift bit out of tag */
+      var bit = d.tag & 1;
+      d.tag >>>= 1;
+
+      return bit;
+    }
+
+    /* read a num bit value from a stream and add base */
+    function tinf_read_bits(d, num, base) {
+      if (!num)
+        { return base; }
+
+      while (d.bitcount < 24) {
+        d.tag |= d.source[d.sourceIndex++] << d.bitcount;
+        d.bitcount += 8;
+      }
+
+      var val = d.tag & (0xffff >>> (16 - num));
+      d.tag >>>= num;
+      d.bitcount -= num;
+      return val + base;
+    }
+
+    /* given a data stream and a tree, decode a symbol */
+    function tinf_decode_symbol(d, t) {
+      while (d.bitcount < 24) {
+        d.tag |= d.source[d.sourceIndex++] << d.bitcount;
+        d.bitcount += 8;
+      }
+
+      var sum = 0, cur = 0, len = 0;
+      var tag = d.tag;
+
+      /* get more bits while code value is above sum */
+      do {
+        cur = 2 * cur + (tag & 1);
+        tag >>>= 1;
+        ++len;
+
+        sum += t.table[len];
+        cur -= t.table[len];
+      } while (cur >= 0);
+
+      d.tag = tag;
+      d.bitcount -= len;
+
+      return t.trans[sum + cur];
+    }
+
+    /* given a data stream, decode dynamic trees from it */
+    function tinf_decode_trees(d, lt, dt) {
+      var hlit, hdist, hclen;
+      var i, num, length;
+
+      /* get 5 bits HLIT (257-286) */
+      hlit = tinf_read_bits(d, 5, 257);
+
+      /* get 5 bits HDIST (1-32) */
+      hdist = tinf_read_bits(d, 5, 1);
+
+      /* get 4 bits HCLEN (4-19) */
+      hclen = tinf_read_bits(d, 4, 4);
+
+      for (i = 0; i < 19; ++i) { lengths[i] = 0; }
+
+      /* read code lengths for code length alphabet */
+      for (i = 0; i < hclen; ++i) {
+        /* get 3 bits code length (0-7) */
+        var clen = tinf_read_bits(d, 3, 0);
+        lengths[clcidx[i]] = clen;
+      }
+
+      /* build code length tree */
+      tinf_build_tree(code_tree, lengths, 0, 19);
+
+      /* decode code lengths for the dynamic trees */
+      for (num = 0; num < hlit + hdist;) {
+        var sym = tinf_decode_symbol(d, code_tree);
+
+        switch (sym) {
+          case 16:
+            /* copy previous code length 3-6 times (read 2 bits) */
+            var prev = lengths[num - 1];
+            for (length = tinf_read_bits(d, 2, 3); length; --length) {
+              lengths[num++] = prev;
+            }
+            break;
+          case 17:
+            /* repeat code length 0 for 3-10 times (read 3 bits) */
+            for (length = tinf_read_bits(d, 3, 3); length; --length) {
+              lengths[num++] = 0;
+            }
+            break;
+          case 18:
+            /* repeat code length 0 for 11-138 times (read 7 bits) */
+            for (length = tinf_read_bits(d, 7, 11); length; --length) {
+              lengths[num++] = 0;
+            }
+            break;
+          default:
+            /* values 0-15 represent the actual code lengths */
+            lengths[num++] = sym;
+            break;
+        }
+      }
+
+      /* build dynamic trees */
+      tinf_build_tree(lt, lengths, 0, hlit);
+      tinf_build_tree(dt, lengths, hlit, hdist);
+    }
+
+    /* ----------------------------- *
+     * -- block inflate functions -- *
+     * ----------------------------- */
+
+    /* given a stream and two trees, inflate a block of data */
+    function tinf_inflate_block_data(d, lt, dt) {
+      while (1) {
+        var sym = tinf_decode_symbol(d, lt);
+
+        /* check for end of block */
+        if (sym === 256) {
+          return TINF_OK;
+        }
+
+        if (sym < 256) {
+          d.dest[d.destLen++] = sym;
+        } else {
+          var length, dist, offs;
+          var i;
+
+          sym -= 257;
+
+          /* possibly get more bits from length code */
+          length = tinf_read_bits(d, length_bits[sym], length_base[sym]);
+
+          dist = tinf_decode_symbol(d, dt);
+
+          /* possibly get more bits from distance code */
+          offs = d.destLen - tinf_read_bits(d, dist_bits[dist], dist_base[dist]);
+
+          /* copy match */
+          for (i = offs; i < offs + length; ++i) {
+            d.dest[d.destLen++] = d.dest[i];
+          }
+        }
+      }
+    }
+
+    /* inflate an uncompressed block of data */
+    function tinf_inflate_uncompressed_block(d) {
+      var length, invlength;
+      var i;
+
+      /* unread from bitbuffer */
+      while (d.bitcount > 8) {
+        d.sourceIndex--;
+        d.bitcount -= 8;
+      }
+
+      /* get length */
+      length = d.source[d.sourceIndex + 1];
+      length = 256 * length + d.source[d.sourceIndex];
+
+      /* get one's complement of length */
+      invlength = d.source[d.sourceIndex + 3];
+      invlength = 256 * invlength + d.source[d.sourceIndex + 2];
+
+      /* check length */
+      if (length !== (~invlength & 0x0000ffff))
+        { return TINF_DATA_ERROR; }
+
+      d.sourceIndex += 4;
+
+      /* copy block */
+      for (i = length; i; --i)
+        { d.dest[d.destLen++] = d.source[d.sourceIndex++]; }
+
+      /* make sure we start next block on a byte boundary */
+      d.bitcount = 0;
+
+      return TINF_OK;
+    }
+
+    /* inflate stream from source to dest */
+    function tinf_uncompress(source, dest) {
+      var d = new Data(source, dest);
+      var bfinal, btype, res;
+
+      do {
+        /* read final block flag */
+        bfinal = tinf_getbit(d);
+
+        /* read block type (2 bits) */
+        btype = tinf_read_bits(d, 2, 0);
+
+        /* decompress block */
+        switch (btype) {
+          case 0:
+            /* decompress uncompressed block */
+            res = tinf_inflate_uncompressed_block(d);
+            break;
+          case 1:
+            /* decompress block with fixed huffman trees */
+            res = tinf_inflate_block_data(d, sltree, sdtree);
+            break;
+          case 2:
+            /* decompress block with dynamic huffman trees */
+            tinf_decode_trees(d, d.ltree, d.dtree);
+            res = tinf_inflate_block_data(d, d.ltree, d.dtree);
+            break;
+          default:
+            res = TINF_DATA_ERROR;
+        }
+
+        if (res !== TINF_OK)
+          { throw new Error('Data error'); }
+
+      } while (!bfinal);
+
+      if (d.destLen < d.dest.length) {
+        if (typeof d.dest.slice === 'function')
+          { return d.dest.slice(0, d.destLen); }
+        else
+          { return d.dest.subarray(0, d.destLen); }
+      }
+
+      return d.dest;
+    }
+
+    /* -------------------- *
+     * -- initialization -- *
+     * -------------------- */
+
+    /* build fixed huffman trees */
+    tinf_build_fixed_trees(sltree, sdtree);
+
+    /* build extra bits and base tables */
+    tinf_build_bits_base(length_bits, length_base, 4, 3);
+    tinf_build_bits_base(dist_bits, dist_base, 2, 1);
+
+    /* fix a special case */
+    length_bits[28] = 0;
+    length_base[28] = 258;
+
+    var index = tinf_uncompress;
+
+    // The Bounding Box object
+
+    function derive(v0, v1, v2, v3, t) {
+        return Math.pow(1 - t, 3) * v0 +
+            3 * Math.pow(1 - t, 2) * t * v1 +
+            3 * (1 - t) * Math.pow(t, 2) * v2 +
+            Math.pow(t, 3) * v3;
+    }
+    /**
+     * A bounding box is an enclosing box that describes the smallest measure within which all the points lie.
+     * It is used to calculate the bounding box of a glyph or text path.
+     *
+     * On initialization, x1/y1/x2/y2 will be NaN. Check if the bounding box is empty using `isEmpty()`.
+     *
+     * @exports opentype.BoundingBox
+     * @class
+     * @constructor
+     */
+    function BoundingBox() {
+        this.x1 = Number.NaN;
+        this.y1 = Number.NaN;
+        this.x2 = Number.NaN;
+        this.y2 = Number.NaN;
+    }
+
+    /**
+     * Returns true if the bounding box is empty, that is, no points have been added to the box yet.
+     */
+    BoundingBox.prototype.isEmpty = function() {
+        return isNaN(this.x1) || isNaN(this.y1) || isNaN(this.x2) || isNaN(this.y2);
+    };
+
+    /**
+     * Add the point to the bounding box.
+     * The x1/y1/x2/y2 coordinates of the bounding box will now encompass the given point.
+     * @param {number} x - The X coordinate of the point.
+     * @param {number} y - The Y coordinate of the point.
+     */
+    BoundingBox.prototype.addPoint = function(x, y) {
+        if (typeof x === 'number') {
+            if (isNaN(this.x1) || isNaN(this.x2)) {
+                this.x1 = x;
+                this.x2 = x;
+            }
+            if (x < this.x1) {
+                this.x1 = x;
+            }
+            if (x > this.x2) {
+                this.x2 = x;
+            }
+        }
+        if (typeof y === 'number') {
+            if (isNaN(this.y1) || isNaN(this.y2)) {
+                this.y1 = y;
+                this.y2 = y;
+            }
+            if (y < this.y1) {
+                this.y1 = y;
+            }
+            if (y > this.y2) {
+                this.y2 = y;
+            }
+        }
+    };
+
+    /**
+     * Add a X coordinate to the bounding box.
+     * This extends the bounding box to include the X coordinate.
+     * This function is used internally inside of addBezier.
+     * @param {number} x - The X coordinate of the point.
+     */
+    BoundingBox.prototype.addX = function(x) {
+        this.addPoint(x, null);
+    };
+
+    /**
+     * Add a Y coordinate to the bounding box.
+     * This extends the bounding box to include the Y coordinate.
+     * This function is used internally inside of addBezier.
+     * @param {number} y - The Y coordinate of the point.
+     */
+    BoundingBox.prototype.addY = function(y) {
+        this.addPoint(null, y);
+    };
+
+    /**
+     * Add a Bézier curve to the bounding box.
+     * This extends the bounding box to include the entire Bézier.
+     * @param {number} x0 - The starting X coordinate.
+     * @param {number} y0 - The starting Y coordinate.
+     * @param {number} x1 - The X coordinate of the first control point.
+     * @param {number} y1 - The Y coordinate of the first control point.
+     * @param {number} x2 - The X coordinate of the second control point.
+     * @param {number} y2 - The Y coordinate of the second control point.
+     * @param {number} x - The ending X coordinate.
+     * @param {number} y - The ending Y coordinate.
+     */
+    BoundingBox.prototype.addBezier = function(x0, y0, x1, y1, x2, y2, x, y) {
+        var this$1 = this;
+
+        // This code is based on http://nishiohirokazu.blogspot.com/2009/06/how-to-calculate-bezier-curves-bounding.html
+        // and https://github.com/icons8/svg-path-bounding-box
+
+        var p0 = [x0, y0];
+        var p1 = [x1, y1];
+        var p2 = [x2, y2];
+        var p3 = [x, y];
+
+        this.addPoint(x0, y0);
+        this.addPoint(x, y);
+
+        for (var i = 0; i <= 1; i++) {
+            var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
+            var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
+            var c = 3 * p1[i] - 3 * p0[i];
+
+            if (a === 0) {
+                if (b === 0) { continue; }
+                var t = -c / b;
+                if (0 < t && t < 1) {
+                    if (i === 0) { this$1.addX(derive(p0[i], p1[i], p2[i], p3[i], t)); }
+                    if (i === 1) { this$1.addY(derive(p0[i], p1[i], p2[i], p3[i], t)); }
+                }
+                continue;
+            }
+
+            var b2ac = Math.pow(b, 2) - 4 * c * a;
+            if (b2ac < 0) { continue; }
+            var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
+            if (0 < t1 && t1 < 1) {
+                if (i === 0) { this$1.addX(derive(p0[i], p1[i], p2[i], p3[i], t1)); }
+                if (i === 1) { this$1.addY(derive(p0[i], p1[i], p2[i], p3[i], t1)); }
+            }
+            var t2 = (-b - Math.sqrt(b2ac)) / (2 * a);
+            if (0 < t2 && t2 < 1) {
+                if (i === 0) { this$1.addX(derive(p0[i], p1[i], p2[i], p3[i], t2)); }
+                if (i === 1) { this$1.addY(derive(p0[i], p1[i], p2[i], p3[i], t2)); }
+            }
+        }
+    };
+
+    /**
+     * Add a quadratic curve to the bounding box.
+     * This extends the bounding box to include the entire quadratic curve.
+     * @param {number} x0 - The starting X coordinate.
+     * @param {number} y0 - The starting Y coordinate.
+     * @param {number} x1 - The X coordinate of the control point.
+     * @param {number} y1 - The Y coordinate of the control point.
+     * @param {number} x - The ending X coordinate.
+     * @param {number} y - The ending Y coordinate.
+     */
+    BoundingBox.prototype.addQuad = function(x0, y0, x1, y1, x, y) {
+        var cp1x = x0 + 2 / 3 * (x1 - x0);
+        var cp1y = y0 + 2 / 3 * (y1 - y0);
+        var cp2x = cp1x + 1 / 3 * (x - x0);
+        var cp2y = cp1y + 1 / 3 * (y - y0);
+        this.addBezier(x0, y0, cp1x, cp1y, cp2x, cp2y, x, y);
+    };
+
+    // Geometric objects
+
+    /**
+     * A bézier path containing a set of path commands similar to a SVG path.
+     * Paths can be drawn on a context using `draw`.
+     * @exports opentype.Path
+     * @class
+     * @constructor
+     */
+    function Path() {
+        this.commands = [];
+        this.fill = 'black';
+        this.stroke = null;
+        this.strokeWidth = 1;
+    }
+
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     */
+    Path.prototype.moveTo = function(x, y) {
+        this.commands.push({
+            type: 'M',
+            x: x,
+            y: y
+        });
+    };
+
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     */
+    Path.prototype.lineTo = function(x, y) {
+        this.commands.push({
+            type: 'L',
+            x: x,
+            y: y
+        });
+    };
+
+    /**
+     * Draws cubic curve
+     * @function
+     * curveTo
+     * @memberof opentype.Path.prototype
+     * @param  {number} x1 - x of control 1
+     * @param  {number} y1 - y of control 1
+     * @param  {number} x2 - x of control 2
+     * @param  {number} y2 - y of control 2
+     * @param  {number} x - x of path point
+     * @param  {number} y - y of path point
+     */
+
+    /**
+     * Draws cubic curve
+     * @function
+     * bezierCurveTo
+     * @memberof opentype.Path.prototype
+     * @param  {number} x1 - x of control 1
+     * @param  {number} y1 - y of control 1
+     * @param  {number} x2 - x of control 2
+     * @param  {number} y2 - y of control 2
+     * @param  {number} x - x of path point
+     * @param  {number} y - y of path point
+     * @see curveTo
+     */
+    Path.prototype.curveTo = Path.prototype.bezierCurveTo = function(x1, y1, x2, y2, x, y) {
+        this.commands.push({
+            type: 'C',
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2,
+            x: x,
+            y: y
+        });
+    };
+
+    /**
+     * Draws quadratic curve
+     * @function
+     * quadraticCurveTo
+     * @memberof opentype.Path.prototype
+     * @param  {number} x1 - x of control
+     * @param  {number} y1 - y of control
+     * @param  {number} x - x of path point
+     * @param  {number} y - y of path point
+     */
+
+    /**
+     * Draws quadratic curve
+     * @function
+     * quadTo
+     * @memberof opentype.Path.prototype
+     * @param  {number} x1 - x of control
+     * @param  {number} y1 - y of control
+     * @param  {number} x - x of path point
+     * @param  {number} y - y of path point
+     */
+    Path.prototype.quadTo = Path.prototype.quadraticCurveTo = function(x1, y1, x, y) {
+        this.commands.push({
+            type: 'Q',
+            x1: x1,
+            y1: y1,
+            x: x,
+            y: y
+        });
+    };
+
+    /**
+     * Closes the path
+     * @function closePath
+     * @memberof opentype.Path.prototype
+     */
+
+    /**
+     * Close the path
+     * @function close
+     * @memberof opentype.Path.prototype
+     */
+    Path.prototype.close = Path.prototype.closePath = function() {
+        this.commands.push({
+            type: 'Z'
+        });
+    };
+
+    /**
+     * Add the given path or list of commands to the commands of this path.
+     * @param  {Array} pathOrCommands - another opentype.Path, an opentype.BoundingBox, or an array of commands.
+     */
+    Path.prototype.extend = function(pathOrCommands) {
+        if (pathOrCommands.commands) {
+            pathOrCommands = pathOrCommands.commands;
+        } else if (pathOrCommands instanceof BoundingBox) {
+            var box = pathOrCommands;
+            this.moveTo(box.x1, box.y1);
+            this.lineTo(box.x2, box.y1);
+            this.lineTo(box.x2, box.y2);
+            this.lineTo(box.x1, box.y2);
+            this.close();
+            return;
+        }
+
+        Array.prototype.push.apply(this.commands, pathOrCommands);
+    };
+
+    /**
+     * Calculate the bounding box of the path.
+     * @returns {opentype.BoundingBox}
+     */
+    Path.prototype.getBoundingBox = function() {
+        var this$1 = this;
+
+        var box = new BoundingBox();
+
+        var startX = 0;
+        var startY = 0;
+        var prevX = 0;
+        var prevY = 0;
+        for (var i = 0; i < this.commands.length; i++) {
+            var cmd = this$1.commands[i];
+            switch (cmd.type) {
+                case 'M':
+                    box.addPoint(cmd.x, cmd.y);
+                    startX = prevX = cmd.x;
+                    startY = prevY = cmd.y;
+                    break;
+                case 'L':
+                    box.addPoint(cmd.x, cmd.y);
+                    prevX = cmd.x;
+                    prevY = cmd.y;
+                    break;
+                case 'Q':
+                    box.addQuad(prevX, prevY, cmd.x1, cmd.y1, cmd.x, cmd.y);
+                    prevX = cmd.x;
+                    prevY = cmd.y;
+                    break;
+                case 'C':
+                    box.addBezier(prevX, prevY, cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+                    prevX = cmd.x;
+                    prevY = cmd.y;
+                    break;
+                case 'Z':
+                    prevX = startX;
+                    prevY = startY;
+                    break;
+                default:
+                    throw new Error('Unexpected path command ' + cmd.type);
+            }
+        }
+        if (box.isEmpty()) {
+            box.addPoint(0, 0);
+        }
+        return box;
+    };
+
+    /**
+     * Draw the path to a 2D context.
+     * @param {CanvasRenderingContext2D} ctx - A 2D drawing context.
+     */
+    Path.prototype.draw = function(ctx) {
+        var this$1 = this;
+
+        ctx.beginPath();
+        for (var i = 0; i < this.commands.length; i += 1) {
+            var cmd = this$1.commands[i];
+            if (cmd.type === 'M') {
+                ctx.moveTo(cmd.x, cmd.y);
+            } else if (cmd.type === 'L') {
+                ctx.lineTo(cmd.x, cmd.y);
+            } else if (cmd.type === 'C') {
+                ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+            } else if (cmd.type === 'Q') {
+                ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
+            } else if (cmd.type === 'Z') {
+                ctx.closePath();
+            }
+        }
+
+        if (this.fill) {
+            ctx.fillStyle = this.fill;
+            ctx.fill();
+        }
+
+        if (this.stroke) {
+            ctx.strokeStyle = this.stroke;
+            ctx.lineWidth = this.strokeWidth;
+            ctx.stroke();
+        }
+    };
+
+    /**
+     * Convert the Path to a string of path data instructions
+     * See http://www.w3.org/TR/SVG/paths.html#PathData
+     * @param  {number} [decimalPlaces=2] - The amount of decimal places for floating-point values
+     * @return {string}
+     */
+    Path.prototype.toPathData = function(decimalPlaces) {
+        var this$1 = this;
+
+        decimalPlaces = decimalPlaces !== undefined ? decimalPlaces : 2;
+
+        function floatToString(v) {
+            if (Math.round(v) === v) {
+                return '' + Math.round(v);
+            } else {
+                return v.toFixed(decimalPlaces);
+            }
+        }
+
+        function packValues() {
+            var arguments$1 = arguments;
+
+            var s = '';
+            for (var i = 0; i < arguments.length; i += 1) {
+                var v = arguments$1[i];
+                if (v >= 0 && i > 0) {
+                    s += ' ';
+                }
+
+                s += floatToString(v);
+            }
+
+            return s;
+        }
+
+        var d = '';
+        for (var i = 0; i < this.commands.length; i += 1) {
+            var cmd = this$1.commands[i];
+            if (cmd.type === 'M') {
+                d += 'M' + packValues(cmd.x, cmd.y);
+            } else if (cmd.type === 'L') {
+                d += 'L' + packValues(cmd.x, cmd.y);
+            } else if (cmd.type === 'C') {
+                d += 'C' + packValues(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+            } else if (cmd.type === 'Q') {
+                d += 'Q' + packValues(cmd.x1, cmd.y1, cmd.x, cmd.y);
+            } else if (cmd.type === 'Z') {
+                d += 'Z';
+            }
+        }
+
+        return d;
+    };
+
+    /**
+     * Convert the path to an SVG  element, as a string.
+     * @param  {number} [decimalPlaces=2] - The amount of decimal places for floating-point values
+     * @return {string}
+     */
+    Path.prototype.toSVG = function(decimalPlaces) {
+        var svg = '= 0 && v <= 255, 'Byte value should be between 0 and 255.');
+        return [v];
+    };
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.BYTE = constant(1);
+
+    /**
+     * Convert a 8-bit signed integer to a list of 1 byte.
+     * @param {string}
+     * @returns {Array}
+     */
+    encode.CHAR = function(v) {
+        return [v.charCodeAt(0)];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.CHAR = constant(1);
+
+    /**
+     * Convert an ASCII string to a list of bytes.
+     * @param {string}
+     * @returns {Array}
+     */
+    encode.CHARARRAY = function(v) {
+        var b = [];
+        for (var i = 0; i < v.length; i += 1) {
+            b[i] = v.charCodeAt(i);
+        }
+
+        return b;
+    };
+
+    /**
+     * @param {Array}
+     * @returns {number}
+     */
+    sizeOf.CHARARRAY = function(v) {
+        return v.length;
+    };
+
+    /**
+     * Convert a 16-bit unsigned integer to a list of 2 bytes.
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.USHORT = function(v) {
+        return [(v >> 8) & 0xFF, v & 0xFF];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.USHORT = constant(2);
+
+    /**
+     * Convert a 16-bit signed integer to a list of 2 bytes.
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.SHORT = function(v) {
+        // Two's complement
+        if (v >= LIMIT16) {
+            v = -(2 * LIMIT16 - v);
+        }
+
+        return [(v >> 8) & 0xFF, v & 0xFF];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.SHORT = constant(2);
+
+    /**
+     * Convert a 24-bit unsigned integer to a list of 3 bytes.
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.UINT24 = function(v) {
+        return [(v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.UINT24 = constant(3);
+
+    /**
+     * Convert a 32-bit unsigned integer to a list of 4 bytes.
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.ULONG = function(v) {
+        return [(v >> 24) & 0xFF, (v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.ULONG = constant(4);
+
+    /**
+     * Convert a 32-bit unsigned integer to a list of 4 bytes.
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.LONG = function(v) {
+        // Two's complement
+        if (v >= LIMIT32) {
+            v = -(2 * LIMIT32 - v);
+        }
+
+        return [(v >> 24) & 0xFF, (v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.LONG = constant(4);
+
+    encode.FIXED = encode.ULONG;
+    sizeOf.FIXED = sizeOf.ULONG;
+
+    encode.FWORD = encode.SHORT;
+    sizeOf.FWORD = sizeOf.SHORT;
+
+    encode.UFWORD = encode.USHORT;
+    sizeOf.UFWORD = sizeOf.USHORT;
+
+    /**
+     * Convert a 32-bit Apple Mac timestamp integer to a list of 8 bytes, 64-bit timestamp.
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.LONGDATETIME = function(v) {
+        return [0, 0, 0, 0, (v >> 24) & 0xFF, (v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.LONGDATETIME = constant(8);
+
+    /**
+     * Convert a 4-char tag to a list of 4 bytes.
+     * @param {string}
+     * @returns {Array}
+     */
+    encode.TAG = function(v) {
+        check.argument(v.length === 4, 'Tag should be exactly 4 ASCII characters.');
+        return [v.charCodeAt(0),
+                v.charCodeAt(1),
+                v.charCodeAt(2),
+                v.charCodeAt(3)];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.TAG = constant(4);
+
+    // CFF data types ///////////////////////////////////////////////////////////
+
+    encode.Card8 = encode.BYTE;
+    sizeOf.Card8 = sizeOf.BYTE;
+
+    encode.Card16 = encode.USHORT;
+    sizeOf.Card16 = sizeOf.USHORT;
+
+    encode.OffSize = encode.BYTE;
+    sizeOf.OffSize = sizeOf.BYTE;
+
+    encode.SID = encode.USHORT;
+    sizeOf.SID = sizeOf.USHORT;
+
+    // Convert a numeric operand or charstring number to a variable-size list of bytes.
+    /**
+     * Convert a numeric operand or charstring number to a variable-size list of bytes.
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.NUMBER = function(v) {
+        if (v >= -107 && v <= 107) {
+            return [v + 139];
+        } else if (v >= 108 && v <= 1131) {
+            v = v - 108;
+            return [(v >> 8) + 247, v & 0xFF];
+        } else if (v >= -1131 && v <= -108) {
+            v = -v - 108;
+            return [(v >> 8) + 251, v & 0xFF];
+        } else if (v >= -32768 && v <= 32767) {
+            return encode.NUMBER16(v);
+        } else {
+            return encode.NUMBER32(v);
+        }
+    };
+
+    /**
+     * @param {number}
+     * @returns {number}
+     */
+    sizeOf.NUMBER = function(v) {
+        return encode.NUMBER(v).length;
+    };
+
+    /**
+     * Convert a signed number between -32768 and +32767 to a three-byte value.
+     * This ensures we always use three bytes, but is not the most compact format.
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.NUMBER16 = function(v) {
+        return [28, (v >> 8) & 0xFF, v & 0xFF];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.NUMBER16 = constant(3);
+
+    /**
+     * Convert a signed number between -(2^31) and +(2^31-1) to a five-byte value.
+     * This is useful if you want to be sure you always use four bytes,
+     * at the expense of wasting a few bytes for smaller numbers.
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.NUMBER32 = function(v) {
+        return [29, (v >> 24) & 0xFF, (v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF];
+    };
+
+    /**
+     * @constant
+     * @type {number}
+     */
+    sizeOf.NUMBER32 = constant(5);
+
+    /**
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.REAL = function(v) {
+        var value = v.toString();
+
+        // Some numbers use an epsilon to encode the value. (e.g. JavaScript will store 0.0000001 as 1e-7)
+        // This code converts it back to a number without the epsilon.
+        var m = /\.(\d*?)(?:9{5,20}|0{5,20})\d{0,2}(?:e(.+)|$)/.exec(value);
+        if (m) {
+            var epsilon = parseFloat('1e' + ((m[2] ? +m[2] : 0) + m[1].length));
+            value = (Math.round(v * epsilon) / epsilon).toString();
+        }
+
+        var nibbles = '';
+        for (var i = 0, ii = value.length; i < ii; i += 1) {
+            var c = value[i];
+            if (c === 'e') {
+                nibbles += value[++i] === '-' ? 'c' : 'b';
+            } else if (c === '.') {
+                nibbles += 'a';
+            } else if (c === '-') {
+                nibbles += 'e';
+            } else {
+                nibbles += c;
+            }
+        }
+
+        nibbles += (nibbles.length & 1) ? 'f' : 'ff';
+        var out = [30];
+        for (var i$1 = 0, ii$1 = nibbles.length; i$1 < ii$1; i$1 += 2) {
+            out.push(parseInt(nibbles.substr(i$1, 2), 16));
+        }
+
+        return out;
+    };
+
+    /**
+     * @param {number}
+     * @returns {number}
+     */
+    sizeOf.REAL = function(v) {
+        return encode.REAL(v).length;
+    };
+
+    encode.NAME = encode.CHARARRAY;
+    sizeOf.NAME = sizeOf.CHARARRAY;
+
+    encode.STRING = encode.CHARARRAY;
+    sizeOf.STRING = sizeOf.CHARARRAY;
+
+    /**
+     * @param {DataView} data
+     * @param {number} offset
+     * @param {number} numBytes
+     * @returns {string}
+     */
+    decode.UTF8 = function(data, offset, numBytes) {
+        var codePoints = [];
+        var numChars = numBytes;
+        for (var j = 0; j < numChars; j++, offset += 1) {
+            codePoints[j] = data.getUint8(offset);
+        }
+
+        return String.fromCharCode.apply(null, codePoints);
+    };
+
+    /**
+     * @param {DataView} data
+     * @param {number} offset
+     * @param {number} numBytes
+     * @returns {string}
+     */
+    decode.UTF16 = function(data, offset, numBytes) {
+        var codePoints = [];
+        var numChars = numBytes / 2;
+        for (var j = 0; j < numChars; j++, offset += 2) {
+            codePoints[j] = data.getUint16(offset);
+        }
+
+        return String.fromCharCode.apply(null, codePoints);
+    };
+
+    /**
+     * Convert a JavaScript string to UTF16-BE.
+     * @param {string}
+     * @returns {Array}
+     */
+    encode.UTF16 = function(v) {
+        var b = [];
+        for (var i = 0; i < v.length; i += 1) {
+            var codepoint = v.charCodeAt(i);
+            b[b.length] = (codepoint >> 8) & 0xFF;
+            b[b.length] = codepoint & 0xFF;
+        }
+
+        return b;
+    };
+
+    /**
+     * @param {string}
+     * @returns {number}
+     */
+    sizeOf.UTF16 = function(v) {
+        return v.length * 2;
+    };
+
+    // Data for converting old eight-bit Macintosh encodings to Unicode.
+    // This representation is optimized for decoding; encoding is slower
+    // and needs more memory. The assumption is that all opentype.js users
+    // want to open fonts, but saving a font will be comparatively rare
+    // so it can be more expensive. Keyed by IANA character set name.
+    //
+    // Python script for generating these strings:
+    //
+    //     s = u''.join([chr(c).decode('mac_greek') for c in range(128, 256)])
+    //     print(s.encode('utf-8'))
+    /**
+     * @private
+     */
+    var eightBitMacEncodings = {
+        'x-mac-croatian':  // Python: 'mac_croatian'
+        'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®Š™´¨≠ŽØ∞±≤≥∆µ∂∑∏š∫ªºΩžø' +
+        '¿¡¬√ƒ≈Ć«Č… ÀÃÕŒœĐ—“”‘’÷◊©⁄€‹›Æ»–·‚„‰ÂćÁčÈÍÎÏÌÓÔđÒÚÛÙıˆ˜¯πË˚¸Êæˇ',
+        'x-mac-cyrillic':  // Python: 'mac_cyrillic'
+        'АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ†°Ґ£§•¶І®©™Ђђ≠Ѓѓ∞±≤≥іµґЈЄєЇїЉљЊњ' +
+        'јЅ¬√ƒ≈∆«»… ЋћЌќѕ–—“”‘’÷„ЎўЏџ№Ёёяабвгдежзийклмнопрстуфхцчшщъыьэю',
+        'x-mac-gaelic': // http://unicode.org/Public/MAPPINGS/VENDORS/APPLE/GAELIC.TXT
+        'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØḂ±≤≥ḃĊċḊḋḞḟĠġṀæø' +
+        'ṁṖṗɼƒſṠ«»… ÀÃÕŒœ–—“”‘’ṡẛÿŸṪ€‹›Ŷŷṫ·Ỳỳ⁊ÂÊÁËÈÍÎÏÌÓÔ♣ÒÚÛÙıÝýŴŵẄẅẀẁẂẃ',
+        'x-mac-greek':  // Python: 'mac_greek'
+        'Ĺ²É³ÖÜ΅àâä΄¨çéèê룙î‰ôö¦€ùûü†ΓΔΘΛΞΠß®©ΣΪ§≠°·Α±≤≥¥ΒΕΖΗΙΚΜΦΫΨΩ' +
+        'άΝ¬ΟΡ≈Τ«»… ΥΧΆΈœ–―“”‘’÷ΉΊΌΎέήίόΏύαβψδεφγηιξκλμνοπώρστθωςχυζϊϋΐΰ\u00AD',
+        'x-mac-icelandic':  // Python: 'mac_iceland'
+        'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûüÝ°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø' +
+        '¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€ÐðÞþý·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ',
+        'x-mac-inuit': // http://unicode.org/Public/MAPPINGS/VENDORS/APPLE/INUIT.TXT
+        'ᐃᐄᐅᐆᐊᐋᐱᐲᐳᐴᐸᐹᑉᑎᑏᑐᑑᑕᑖᑦᑭᑮᑯᑰᑲᑳᒃᒋᒌᒍᒎᒐᒑ°ᒡᒥᒦ•¶ᒧ®©™ᒨᒪᒫᒻᓂᓃᓄᓅᓇᓈᓐᓯᓰᓱᓲᓴᓵᔅᓕᓖᓗ' +
+        'ᓘᓚᓛᓪᔨᔩᔪᔫᔭ… ᔮᔾᕕᕖᕗ–—“”‘’ᕘᕙᕚᕝᕆᕇᕈᕉᕋᕌᕐᕿᖀᖁᖂᖃᖄᖅᖏᖐᖑᖒᖓᖔᖕᙱᙲᙳᙴᙵᙶᖖᖠᖡᖢᖣᖤᖥᖦᕼŁł',
+        'x-mac-ce':  // Python: 'mac_latin2'
+        'ÄĀāÉĄÖÜáąČäčĆć鏟ĎíďĒēĖóėôöõúĚěü†°Ę£§•¶ß®©™ę¨≠ģĮįĪ≤≥īĶ∂∑łĻļĽľĹĺŅ' +
+        'ņѬ√ńŇ∆«»… ňŐÕőŌ–—“”‘’÷◊ōŔŕŘ‹›řŖŗŠ‚„šŚśÁŤťÍŽžŪÓÔūŮÚůŰűŲųÝýķŻŁżĢˇ',
+        macintosh:  // Python: 'mac_roman'
+        'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø' +
+        '¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€‹›fifl‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ',
+        'x-mac-romanian':  // Python: 'mac_romanian'
+        'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ĂȘ∞±≤≥¥µ∂∑∏π∫ªºΩăș' +
+        '¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄€‹›Țț‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ',
+        'x-mac-turkish':  // Python: 'mac_turkish'
+        'ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø' +
+        '¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸĞğİıŞş‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔÒÚÛÙˆ˜¯˘˙˚¸˝˛ˇ'
+    };
+
+    /**
+     * Decodes an old-style Macintosh string. Returns either a Unicode JavaScript
+     * string, or 'undefined' if the encoding is unsupported. For example, we do
+     * not support Chinese, Japanese or Korean because these would need large
+     * mapping tables.
+     * @param {DataView} dataView
+     * @param {number} offset
+     * @param {number} dataLength
+     * @param {string} encoding
+     * @returns {string}
+     */
+    decode.MACSTRING = function(dataView, offset, dataLength, encoding) {
+        var table = eightBitMacEncodings[encoding];
+        if (table === undefined) {
+            return undefined;
+        }
+
+        var result = '';
+        for (var i = 0; i < dataLength; i++) {
+            var c = dataView.getUint8(offset + i);
+            // In all eight-bit Mac encodings, the characters 0x00..0x7F are
+            // mapped to U+0000..U+007F; we only need to look up the others.
+            if (c <= 0x7F) {
+                result += String.fromCharCode(c);
+            } else {
+                result += table[c & 0x7F];
+            }
+        }
+
+        return result;
+    };
+
+    // Helper function for encode.MACSTRING. Returns a dictionary for mapping
+    // Unicode character codes to their 8-bit MacOS equivalent. This table
+    // is not exactly a super cheap data structure, but we do not care because
+    // encoding Macintosh strings is only rarely needed in typical applications.
+    var macEncodingTableCache = typeof WeakMap === 'function' && new WeakMap();
+    var macEncodingCacheKeys;
+    var getMacEncodingTable = function (encoding) {
+        // Since we use encoding as a cache key for WeakMap, it has to be
+        // a String object and not a literal. And at least on NodeJS 2.10.1,
+        // WeakMap requires that the same String instance is passed for cache hits.
+        if (!macEncodingCacheKeys) {
+            macEncodingCacheKeys = {};
+            for (var e in eightBitMacEncodings) {
+                /*jshint -W053 */  // Suppress "Do not use String as a constructor."
+                macEncodingCacheKeys[e] = new String(e);
+            }
+        }
+
+        var cacheKey = macEncodingCacheKeys[encoding];
+        if (cacheKey === undefined) {
+            return undefined;
+        }
+
+        // We can't do "if (cache.has(key)) {return cache.get(key)}" here:
+        // since garbage collection may run at any time, it could also kick in
+        // between the calls to cache.has() and cache.get(). In that case,
+        // we would return 'undefined' even though we do support the encoding.
+        if (macEncodingTableCache) {
+            var cachedTable = macEncodingTableCache.get(cacheKey);
+            if (cachedTable !== undefined) {
+                return cachedTable;
+            }
+        }
+
+        var decodingTable = eightBitMacEncodings[encoding];
+        if (decodingTable === undefined) {
+            return undefined;
+        }
+
+        var encodingTable = {};
+        for (var i = 0; i < decodingTable.length; i++) {
+            encodingTable[decodingTable.charCodeAt(i)] = i + 0x80;
+        }
+
+        if (macEncodingTableCache) {
+            macEncodingTableCache.set(cacheKey, encodingTable);
+        }
+
+        return encodingTable;
+    };
+
+    /**
+     * Encodes an old-style Macintosh string. Returns a byte array upon success.
+     * If the requested encoding is unsupported, or if the input string contains
+     * a character that cannot be expressed in the encoding, the function returns
+     * 'undefined'.
+     * @param {string} str
+     * @param {string} encoding
+     * @returns {Array}
+     */
+    encode.MACSTRING = function(str, encoding) {
+        var table = getMacEncodingTable(encoding);
+        if (table === undefined) {
+            return undefined;
+        }
+
+        var result = [];
+        for (var i = 0; i < str.length; i++) {
+            var c = str.charCodeAt(i);
+
+            // In all eight-bit Mac encodings, the characters 0x00..0x7F are
+            // mapped to U+0000..U+007F; we only need to look up the others.
+            if (c >= 0x80) {
+                c = table[c];
+                if (c === undefined) {
+                    // str contains a Unicode character that cannot be encoded
+                    // in the requested encoding.
+                    return undefined;
+                }
+            }
+            result[i] = c;
+            // result.push(c);
+        }
+
+        return result;
+    };
+
+    /**
+     * @param {string} str
+     * @param {string} encoding
+     * @returns {number}
+     */
+    sizeOf.MACSTRING = function(str, encoding) {
+        var b = encode.MACSTRING(str, encoding);
+        if (b !== undefined) {
+            return b.length;
+        } else {
+            return 0;
+        }
+    };
+
+    // Helper for encode.VARDELTAS
+    function isByteEncodable(value) {
+        return value >= -128 && value <= 127;
+    }
+
+    // Helper for encode.VARDELTAS
+    function encodeVarDeltaRunAsZeroes(deltas, pos, result) {
+        var runLength = 0;
+        var numDeltas = deltas.length;
+        while (pos < numDeltas && runLength < 64 && deltas[pos] === 0) {
+            ++pos;
+            ++runLength;
+        }
+        result.push(0x80 | (runLength - 1));
+        return pos;
+    }
+
+    // Helper for encode.VARDELTAS
+    function encodeVarDeltaRunAsBytes(deltas, offset, result) {
+        var runLength = 0;
+        var numDeltas = deltas.length;
+        var pos = offset;
+        while (pos < numDeltas && runLength < 64) {
+            var value = deltas[pos];
+            if (!isByteEncodable(value)) {
+                break;
+            }
+
+            // Within a byte-encoded run of deltas, a single zero is best
+            // stored literally as 0x00 value. However, if we have two or
+            // more zeroes in a sequence, it is better to start a new run.
+            // Fore example, the sequence of deltas [15, 15, 0, 15, 15]
+            // becomes 6 bytes (04 0F 0F 00 0F 0F) when storing the zero
+            // within the current run, but 7 bytes (01 0F 0F 80 01 0F 0F)
+            // when starting a new run.
+            if (value === 0 && pos + 1 < numDeltas && deltas[pos + 1] === 0) {
+                break;
+            }
+
+            ++pos;
+            ++runLength;
+        }
+        result.push(runLength - 1);
+        for (var i = offset; i < pos; ++i) {
+            result.push((deltas[i] + 256) & 0xff);
+        }
+        return pos;
+    }
+
+    // Helper for encode.VARDELTAS
+    function encodeVarDeltaRunAsWords(deltas, offset, result) {
+        var runLength = 0;
+        var numDeltas = deltas.length;
+        var pos = offset;
+        while (pos < numDeltas && runLength < 64) {
+            var value = deltas[pos];
+
+            // Within a word-encoded run of deltas, it is easiest to start
+            // a new run (with a different encoding) whenever we encounter
+            // a zero value. For example, the sequence [0x6666, 0, 0x7777]
+            // needs 7 bytes when storing the zero inside the current run
+            // (42 66 66 00 00 77 77), and equally 7 bytes when starting a
+            // new run (40 66 66 80 40 77 77).
+            if (value === 0) {
+                break;
+            }
+
+            // Within a word-encoded run of deltas, a single value in the
+            // range (-128..127) should be encoded within the current run
+            // because it is more compact. For example, the sequence
+            // [0x6666, 2, 0x7777] becomes 7 bytes when storing the value
+            // literally (42 66 66 00 02 77 77), but 8 bytes when starting
+            // a new run (40 66 66 00 02 40 77 77).
+            if (isByteEncodable(value) && pos + 1 < numDeltas && isByteEncodable(deltas[pos + 1])) {
+                break;
+            }
+
+            ++pos;
+            ++runLength;
+        }
+        result.push(0x40 | (runLength - 1));
+        for (var i = offset; i < pos; ++i) {
+            var val = deltas[i];
+            result.push(((val + 0x10000) >> 8) & 0xff, (val + 0x100) & 0xff);
+        }
+        return pos;
+    }
+
+    /**
+     * Encode a list of variation adjustment deltas.
+     *
+     * Variation adjustment deltas are used in ‘gvar’ and ‘cvar’ tables.
+     * They indicate how points (in ‘gvar’) or values (in ‘cvar’) get adjusted
+     * when generating instances of variation fonts.
+     *
+     * @see https://www.microsoft.com/typography/otspec/gvar.htm
+     * @see https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6gvar.html
+     * @param {Array}
+     * @return {Array}
+     */
+    encode.VARDELTAS = function(deltas) {
+        var pos = 0;
+        var result = [];
+        while (pos < deltas.length) {
+            var value = deltas[pos];
+            if (value === 0) {
+                pos = encodeVarDeltaRunAsZeroes(deltas, pos, result);
+            } else if (value >= -128 && value <= 127) {
+                pos = encodeVarDeltaRunAsBytes(deltas, pos, result);
+            } else {
+                pos = encodeVarDeltaRunAsWords(deltas, pos, result);
+            }
+        }
+        return result;
+    };
+
+    // Convert a list of values to a CFF INDEX structure.
+    // The values should be objects containing name / type / value.
+    /**
+     * @param {Array} l
+     * @returns {Array}
+     */
+    encode.INDEX = function(l) {
+        //var offset, offsets, offsetEncoder, encodedOffsets, encodedOffset, data,
+        //    i, v;
+        // Because we have to know which data type to use to encode the offsets,
+        // we have to go through the values twice: once to encode the data and
+        // calculate the offsets, then again to encode the offsets using the fitting data type.
+        var offset = 1; // First offset is always 1.
+        var offsets = [offset];
+        var data = [];
+        for (var i = 0; i < l.length; i += 1) {
+            var v = encode.OBJECT(l[i]);
+            Array.prototype.push.apply(data, v);
+            offset += v.length;
+            offsets.push(offset);
+        }
+
+        if (data.length === 0) {
+            return [0, 0];
+        }
+
+        var encodedOffsets = [];
+        var offSize = (1 + Math.floor(Math.log(offset) / Math.log(2)) / 8) | 0;
+        var offsetEncoder = [undefined, encode.BYTE, encode.USHORT, encode.UINT24, encode.ULONG][offSize];
+        for (var i$1 = 0; i$1 < offsets.length; i$1 += 1) {
+            var encodedOffset = offsetEncoder(offsets[i$1]);
+            Array.prototype.push.apply(encodedOffsets, encodedOffset);
+        }
+
+        return Array.prototype.concat(encode.Card16(l.length),
+                               encode.OffSize(offSize),
+                               encodedOffsets,
+                               data);
+    };
+
+    /**
+     * @param {Array}
+     * @returns {number}
+     */
+    sizeOf.INDEX = function(v) {
+        return encode.INDEX(v).length;
+    };
+
+    /**
+     * Convert an object to a CFF DICT structure.
+     * The keys should be numeric.
+     * The values should be objects containing name / type / value.
+     * @param {Object} m
+     * @returns {Array}
+     */
+    encode.DICT = function(m) {
+        var d = [];
+        var keys = Object.keys(m);
+        var length = keys.length;
+
+        for (var i = 0; i < length; i += 1) {
+            // Object.keys() return string keys, but our keys are always numeric.
+            var k = parseInt(keys[i], 0);
+            var v = m[k];
+            // Value comes before the key.
+            d = d.concat(encode.OPERAND(v.value, v.type));
+            d = d.concat(encode.OPERATOR(k));
+        }
+
+        return d;
+    };
+
+    /**
+     * @param {Object}
+     * @returns {number}
+     */
+    sizeOf.DICT = function(m) {
+        return encode.DICT(m).length;
+    };
+
+    /**
+     * @param {number}
+     * @returns {Array}
+     */
+    encode.OPERATOR = function(v) {
+        if (v < 1200) {
+            return [v];
+        } else {
+            return [12, v - 1200];
+        }
+    };
+
+    /**
+     * @param {Array} v
+     * @param {string}
+     * @returns {Array}
+     */
+    encode.OPERAND = function(v, type) {
+        var d = [];
+        if (Array.isArray(type)) {
+            for (var i = 0; i < type.length; i += 1) {
+                check.argument(v.length === type.length, 'Not enough arguments given for type' + type);
+                d = d.concat(encode.OPERAND(v[i], type[i]));
+            }
+        } else {
+            if (type === 'SID') {
+                d = d.concat(encode.NUMBER(v));
+            } else if (type === 'offset') {
+                // We make it easy for ourselves and always encode offsets as
+                // 4 bytes. This makes offset calculation for the top dict easier.
+                d = d.concat(encode.NUMBER32(v));
+            } else if (type === 'number') {
+                d = d.concat(encode.NUMBER(v));
+            } else if (type === 'real') {
+                d = d.concat(encode.REAL(v));
+            } else {
+                throw new Error('Unknown operand type ' + type);
+                // FIXME Add support for booleans
+            }
+        }
+
+        return d;
+    };
+
+    encode.OP = encode.BYTE;
+    sizeOf.OP = sizeOf.BYTE;
+
+    // memoize charstring encoding using WeakMap if available
+    var wmm = typeof WeakMap === 'function' && new WeakMap();
+
+    /**
+     * Convert a list of CharString operations to bytes.
+     * @param {Array}
+     * @returns {Array}
+     */
+    encode.CHARSTRING = function(ops) {
+        // See encode.MACSTRING for why we don't do "if (wmm && wmm.has(ops))".
+        if (wmm) {
+            var cachedValue = wmm.get(ops);
+            if (cachedValue !== undefined) {
+                return cachedValue;
+            }
+        }
+
+        var d = [];
+        var length = ops.length;
+
+        for (var i = 0; i < length; i += 1) {
+            var op = ops[i];
+            d = d.concat(encode[op.type](op.value));
+        }
+
+        if (wmm) {
+            wmm.set(ops, d);
+        }
+
+        return d;
+    };
+
+    /**
+     * @param {Array}
+     * @returns {number}
+     */
+    sizeOf.CHARSTRING = function(ops) {
+        return encode.CHARSTRING(ops).length;
+    };
+
+    // Utility functions ////////////////////////////////////////////////////////
+
+    /**
+     * Convert an object containing name / type / value to bytes.
+     * @param {Object}
+     * @returns {Array}
+     */
+    encode.OBJECT = function(v) {
+        var encodingFunction = encode[v.type];
+        check.argument(encodingFunction !== undefined, 'No encoding function for type ' + v.type);
+        return encodingFunction(v.value);
+    };
+
+    /**
+     * @param {Object}
+     * @returns {number}
+     */
+    sizeOf.OBJECT = function(v) {
+        var sizeOfFunction = sizeOf[v.type];
+        check.argument(sizeOfFunction !== undefined, 'No sizeOf function for type ' + v.type);
+        return sizeOfFunction(v.value);
+    };
+
+    /**
+     * Convert a table object to bytes.
+     * A table contains a list of fields containing the metadata (name, type and default value).
+     * The table itself has the field values set as attributes.
+     * @param {opentype.Table}
+     * @returns {Array}
+     */
+    encode.TABLE = function(table) {
+        var d = [];
+        var length = table.fields.length;
+        var subtables = [];
+        var subtableOffsets = [];
+
+        for (var i = 0; i < length; i += 1) {
+            var field = table.fields[i];
+            var encodingFunction = encode[field.type];
+            check.argument(encodingFunction !== undefined, 'No encoding function for field type ' + field.type + ' (' + field.name + ')');
+            var value = table[field.name];
+            if (value === undefined) {
+                value = field.value;
+            }
+
+            var bytes = encodingFunction(value);
+
+            if (field.type === 'TABLE') {
+                subtableOffsets.push(d.length);
+                d = d.concat([0, 0]);
+                subtables.push(bytes);
+            } else {
+                d = d.concat(bytes);
+            }
+        }
+
+        for (var i$1 = 0; i$1 < subtables.length; i$1 += 1) {
+            var o = subtableOffsets[i$1];
+            var offset = d.length;
+            check.argument(offset < 65536, 'Table ' + table.tableName + ' too big.');
+            d[o] = offset >> 8;
+            d[o + 1] = offset & 0xff;
+            d = d.concat(subtables[i$1]);
+        }
+
+        return d;
+    };
+
+    /**
+     * @param {opentype.Table}
+     * @returns {number}
+     */
+    sizeOf.TABLE = function(table) {
+        var numBytes = 0;
+        var length = table.fields.length;
+
+        for (var i = 0; i < length; i += 1) {
+            var field = table.fields[i];
+            var sizeOfFunction = sizeOf[field.type];
+            check.argument(sizeOfFunction !== undefined, 'No sizeOf function for field type ' + field.type + ' (' + field.name + ')');
+            var value = table[field.name];
+            if (value === undefined) {
+                value = field.value;
+            }
+
+            numBytes += sizeOfFunction(value);
+
+            // Subtables take 2 more bytes for offsets.
+            if (field.type === 'TABLE') {
+                numBytes += 2;
+            }
+        }
+
+        return numBytes;
+    };
+
+    encode.RECORD = encode.TABLE;
+    sizeOf.RECORD = sizeOf.TABLE;
+
+    // Merge in a list of bytes.
+    encode.LITERAL = function(v) {
+        return v;
+    };
+
+    sizeOf.LITERAL = function(v) {
+        return v.length;
+    };
+
+    // Table metadata
+
+    /**
+     * @exports opentype.Table
+     * @class
+     * @param {string} tableName
+     * @param {Array} fields
+     * @param {Object} options
+     * @constructor
+     */
+    function Table(tableName, fields, options) {
+        var this$1 = this;
+
+        for (var i = 0; i < fields.length; i += 1) {
+            var field = fields[i];
+            this$1[field.name] = field.value;
+        }
+
+        this.tableName = tableName;
+        this.fields = fields;
+        if (options) {
+            var optionKeys = Object.keys(options);
+            for (var i$1 = 0; i$1 < optionKeys.length; i$1 += 1) {
+                var k = optionKeys[i$1];
+                var v = options[k];
+                if (this$1[k] !== undefined) {
+                    this$1[k] = v;
+                }
+            }
+        }
+    }
+
+    /**
+     * Encodes the table and returns an array of bytes
+     * @return {Array}
+     */
+    Table.prototype.encode = function() {
+        return encode.TABLE(this);
+    };
+
+    /**
+     * Get the size of the table.
+     * @return {number}
+     */
+    Table.prototype.sizeOf = function() {
+        return sizeOf.TABLE(this);
+    };
+
+    /**
+     * @private
+     */
+    function ushortList(itemName, list, count) {
+        if (count === undefined) {
+            count = list.length;
+        }
+        var fields = new Array(list.length + 1);
+        fields[0] = {name: itemName + 'Count', type: 'USHORT', value: count};
+        for (var i = 0; i < list.length; i++) {
+            fields[i + 1] = {name: itemName + i, type: 'USHORT', value: list[i]};
+        }
+        return fields;
+    }
+
+    /**
+     * @private
+     */
+    function tableList(itemName, records, itemCallback) {
+        var count = records.length;
+        var fields = new Array(count + 1);
+        fields[0] = {name: itemName + 'Count', type: 'USHORT', value: count};
+        for (var i = 0; i < count; i++) {
+            fields[i + 1] = {name: itemName + i, type: 'TABLE', value: itemCallback(records[i], i)};
+        }
+        return fields;
+    }
+
+    /**
+     * @private
+     */
+    function recordList(itemName, records, itemCallback) {
+        var count = records.length;
+        var fields = [];
+        fields[0] = {name: itemName + 'Count', type: 'USHORT', value: count};
+        for (var i = 0; i < count; i++) {
+            fields = fields.concat(itemCallback(records[i], i));
+        }
+        return fields;
+    }
+
+    // Common Layout Tables
+
+    /**
+     * @exports opentype.Coverage
+     * @class
+     * @param {opentype.Table}
+     * @constructor
+     * @extends opentype.Table
+     */
+    function Coverage(coverageTable) {
+        if (coverageTable.format === 1) {
+            Table.call(this, 'coverageTable',
+                [{name: 'coverageFormat', type: 'USHORT', value: 1}]
+                .concat(ushortList('glyph', coverageTable.glyphs))
+            );
+        } else {
+            check.assert(false, 'Can\'t create coverage table format 2 yet.');
+        }
+    }
+    Coverage.prototype = Object.create(Table.prototype);
+    Coverage.prototype.constructor = Coverage;
+
+    function ScriptList(scriptListTable) {
+        Table.call(this, 'scriptListTable',
+            recordList('scriptRecord', scriptListTable, function(scriptRecord, i) {
+                var script = scriptRecord.script;
+                var defaultLangSys = script.defaultLangSys;
+                check.assert(!!defaultLangSys, 'Unable to write GSUB: script ' + scriptRecord.tag + ' has no default language system.');
+                return [
+                    {name: 'scriptTag' + i, type: 'TAG', value: scriptRecord.tag},
+                    {name: 'script' + i, type: 'TABLE', value: new Table('scriptTable', [
+                        {name: 'defaultLangSys', type: 'TABLE', value: new Table('defaultLangSys', [
+                            {name: 'lookupOrder', type: 'USHORT', value: 0},
+                            {name: 'reqFeatureIndex', type: 'USHORT', value: defaultLangSys.reqFeatureIndex}]
+                            .concat(ushortList('featureIndex', defaultLangSys.featureIndexes)))}
+                        ].concat(recordList('langSys', script.langSysRecords, function(langSysRecord, i) {
+                            var langSys = langSysRecord.langSys;
+                            return [
+                                {name: 'langSysTag' + i, type: 'TAG', value: langSysRecord.tag},
+                                {name: 'langSys' + i, type: 'TABLE', value: new Table('langSys', [
+                                    {name: 'lookupOrder', type: 'USHORT', value: 0},
+                                    {name: 'reqFeatureIndex', type: 'USHORT', value: langSys.reqFeatureIndex}
+                                    ].concat(ushortList('featureIndex', langSys.featureIndexes)))}
+                            ];
+                        })))}
+                ];
+            })
+        );
+    }
+    ScriptList.prototype = Object.create(Table.prototype);
+    ScriptList.prototype.constructor = ScriptList;
+
+    /**
+     * @exports opentype.FeatureList
+     * @class
+     * @param {opentype.Table}
+     * @constructor
+     * @extends opentype.Table
+     */
+    function FeatureList(featureListTable) {
+        Table.call(this, 'featureListTable',
+            recordList('featureRecord', featureListTable, function(featureRecord, i) {
+                var feature = featureRecord.feature;
+                return [
+                    {name: 'featureTag' + i, type: 'TAG', value: featureRecord.tag},
+                    {name: 'feature' + i, type: 'TABLE', value: new Table('featureTable', [
+                        {name: 'featureParams', type: 'USHORT', value: feature.featureParams} ].concat(ushortList('lookupListIndex', feature.lookupListIndexes)))}
+                ];
+            })
+        );
+    }
+    FeatureList.prototype = Object.create(Table.prototype);
+    FeatureList.prototype.constructor = FeatureList;
+
+    /**
+     * @exports opentype.LookupList
+     * @class
+     * @param {opentype.Table}
+     * @param {Object}
+     * @constructor
+     * @extends opentype.Table
+     */
+    function LookupList(lookupListTable, subtableMakers) {
+        Table.call(this, 'lookupListTable', tableList('lookup', lookupListTable, function(lookupTable) {
+            var subtableCallback = subtableMakers[lookupTable.lookupType];
+            check.assert(!!subtableCallback, 'Unable to write GSUB lookup type ' + lookupTable.lookupType + ' tables.');
+            return new Table('lookupTable', [
+                {name: 'lookupType', type: 'USHORT', value: lookupTable.lookupType},
+                {name: 'lookupFlag', type: 'USHORT', value: lookupTable.lookupFlag}
+            ].concat(tableList('subtable', lookupTable.subtables, subtableCallback)));
+        }));
+    }
+    LookupList.prototype = Object.create(Table.prototype);
+    LookupList.prototype.constructor = LookupList;
+
+    // Record = same as Table, but inlined (a Table has an offset and its data is further in the stream)
+    // Don't use offsets inside Records (probable bug), only in Tables.
+    var table = {
+        Table: Table,
+        Record: Table,
+        Coverage: Coverage,
+        ScriptList: ScriptList,
+        FeatureList: FeatureList,
+        LookupList: LookupList,
+        ushortList: ushortList,
+        tableList: tableList,
+        recordList: recordList,
+    };
+
+    // Parsing utility functions
+
+    // Retrieve an unsigned byte from the DataView.
+    function getByte(dataView, offset) {
+        return dataView.getUint8(offset);
+    }
+
+    // Retrieve an unsigned 16-bit short from the DataView.
+    // The value is stored in big endian.
+    function getUShort(dataView, offset) {
+        return dataView.getUint16(offset, false);
+    }
+
+    // Retrieve a signed 16-bit short from the DataView.
+    // The value is stored in big endian.
+    function getShort(dataView, offset) {
+        return dataView.getInt16(offset, false);
+    }
+
+    // Retrieve an unsigned 32-bit long from the DataView.
+    // The value is stored in big endian.
+    function getULong(dataView, offset) {
+        return dataView.getUint32(offset, false);
+    }
+
+    // Retrieve a 32-bit signed fixed-point number (16.16) from the DataView.
+    // The value is stored in big endian.
+    function getFixed(dataView, offset) {
+        var decimal = dataView.getInt16(offset, false);
+        var fraction = dataView.getUint16(offset + 2, false);
+        return decimal + fraction / 65535;
+    }
+
+    // Retrieve a 4-character tag from the DataView.
+    // Tags are used to identify tables.
+    function getTag(dataView, offset) {
+        var tag = '';
+        for (var i = offset; i < offset + 4; i += 1) {
+            tag += String.fromCharCode(dataView.getInt8(i));
+        }
+
+        return tag;
+    }
+
+    // Retrieve an offset from the DataView.
+    // Offsets are 1 to 4 bytes in length, depending on the offSize argument.
+    function getOffset(dataView, offset, offSize) {
+        var v = 0;
+        for (var i = 0; i < offSize; i += 1) {
+            v <<= 8;
+            v += dataView.getUint8(offset + i);
+        }
+
+        return v;
+    }
+
+    // Retrieve a number of bytes from start offset to the end offset from the DataView.
+    function getBytes(dataView, startOffset, endOffset) {
+        var bytes = [];
+        for (var i = startOffset; i < endOffset; i += 1) {
+            bytes.push(dataView.getUint8(i));
+        }
+
+        return bytes;
+    }
+
+    // Convert the list of bytes to a string.
+    function bytesToString(bytes) {
+        var s = '';
+        for (var i = 0; i < bytes.length; i += 1) {
+            s += String.fromCharCode(bytes[i]);
+        }
+
+        return s;
+    }
+
+    var typeOffsets = {
+        byte: 1,
+        uShort: 2,
+        short: 2,
+        uLong: 4,
+        fixed: 4,
+        longDateTime: 8,
+        tag: 4
+    };
+
+    // A stateful parser that changes the offset whenever a value is retrieved.
+    // The data is a DataView.
+    function Parser(data, offset) {
+        this.data = data;
+        this.offset = offset;
+        this.relativeOffset = 0;
+    }
+
+    Parser.prototype.parseByte = function() {
+        var v = this.data.getUint8(this.offset + this.relativeOffset);
+        this.relativeOffset += 1;
+        return v;
+    };
+
+    Parser.prototype.parseChar = function() {
+        var v = this.data.getInt8(this.offset + this.relativeOffset);
+        this.relativeOffset += 1;
+        return v;
+    };
+
+    Parser.prototype.parseCard8 = Parser.prototype.parseByte;
+
+    Parser.prototype.parseUShort = function() {
+        var v = this.data.getUint16(this.offset + this.relativeOffset);
+        this.relativeOffset += 2;
+        return v;
+    };
+
+    Parser.prototype.parseCard16 = Parser.prototype.parseUShort;
+    Parser.prototype.parseSID = Parser.prototype.parseUShort;
+    Parser.prototype.parseOffset16 = Parser.prototype.parseUShort;
+
+    Parser.prototype.parseShort = function() {
+        var v = this.data.getInt16(this.offset + this.relativeOffset);
+        this.relativeOffset += 2;
+        return v;
+    };
+
+    Parser.prototype.parseF2Dot14 = function() {
+        var v = this.data.getInt16(this.offset + this.relativeOffset) / 16384;
+        this.relativeOffset += 2;
+        return v;
+    };
+
+    Parser.prototype.parseULong = function() {
+        var v = getULong(this.data, this.offset + this.relativeOffset);
+        this.relativeOffset += 4;
+        return v;
+    };
+
+    Parser.prototype.parseFixed = function() {
+        var v = getFixed(this.data, this.offset + this.relativeOffset);
+        this.relativeOffset += 4;
+        return v;
+    };
+
+    Parser.prototype.parseString = function(length) {
+        var dataView = this.data;
+        var offset = this.offset + this.relativeOffset;
+        var string = '';
+        this.relativeOffset += length;
+        for (var i = 0; i < length; i++) {
+            string += String.fromCharCode(dataView.getUint8(offset + i));
+        }
+
+        return string;
+    };
+
+    Parser.prototype.parseTag = function() {
+        return this.parseString(4);
+    };
+
+    // LONGDATETIME is a 64-bit integer.
+    // JavaScript and unix timestamps traditionally use 32 bits, so we
+    // only take the last 32 bits.
+    // + Since until 2038 those bits will be filled by zeros we can ignore them.
+    Parser.prototype.parseLongDateTime = function() {
+        var v = getULong(this.data, this.offset + this.relativeOffset + 4);
+        // Subtract seconds between 01/01/1904 and 01/01/1970
+        // to convert Apple Mac timestamp to Standard Unix timestamp
+        v -= 2082844800;
+        this.relativeOffset += 8;
+        return v;
+    };
+
+    Parser.prototype.parseVersion = function() {
+        var major = getUShort(this.data, this.offset + this.relativeOffset);
+
+        // How to interpret the minor version is very vague in the spec. 0x5000 is 5, 0x1000 is 1
+        // This returns the correct number if minor = 0xN000 where N is 0-9
+        var minor = getUShort(this.data, this.offset + this.relativeOffset + 2);
+        this.relativeOffset += 4;
+        return major + minor / 0x1000 / 10;
+    };
+
+    Parser.prototype.skip = function(type, amount) {
+        if (amount === undefined) {
+            amount = 1;
+        }
+
+        this.relativeOffset += typeOffsets[type] * amount;
+    };
+
+    ///// Parsing lists and records ///////////////////////////////
+
+    // Parse a list of 16 bit unsigned integers. The length of the list can be read on the stream
+    // or provided as an argument.
+    Parser.prototype.parseOffset16List =
+    Parser.prototype.parseUShortList = function(count) {
+        if (count === undefined) { count = this.parseUShort(); }
+        var offsets = new Array(count);
+        var dataView = this.data;
+        var offset = this.offset + this.relativeOffset;
+        for (var i = 0; i < count; i++) {
+            offsets[i] = dataView.getUint16(offset);
+            offset += 2;
+        }
+
+        this.relativeOffset += count * 2;
+        return offsets;
+    };
+
+    // Parses a list of 16 bit signed integers.
+    Parser.prototype.parseShortList = function(count) {
+        var list = new Array(count);
+        var dataView = this.data;
+        var offset = this.offset + this.relativeOffset;
+        for (var i = 0; i < count; i++) {
+            list[i] = dataView.getInt16(offset);
+            offset += 2;
+        }
+
+        this.relativeOffset += count * 2;
+        return list;
+    };
+
+    // Parses a list of bytes.
+    Parser.prototype.parseByteList = function(count) {
+        var list = new Array(count);
+        var dataView = this.data;
+        var offset = this.offset + this.relativeOffset;
+        for (var i = 0; i < count; i++) {
+            list[i] = dataView.getUint8(offset++);
+        }
+
+        this.relativeOffset += count;
+        return list;
+    };
+
+    /**
+     * Parse a list of items.
+     * Record count is optional, if omitted it is read from the stream.
+     * itemCallback is one of the Parser methods.
+     */
+    Parser.prototype.parseList = function(count, itemCallback) {
+        var this$1 = this;
+
+        if (!itemCallback) {
+            itemCallback = count;
+            count = this.parseUShort();
+        }
+        var list = new Array(count);
+        for (var i = 0; i < count; i++) {
+            list[i] = itemCallback.call(this$1);
+        }
+        return list;
+    };
+
+    /**
+     * Parse a list of records.
+     * Record count is optional, if omitted it is read from the stream.
+     * Example of recordDescription: { sequenceIndex: Parser.uShort, lookupListIndex: Parser.uShort }
+     */
+    Parser.prototype.parseRecordList = function(count, recordDescription) {
+        var this$1 = this;
+
+        // If the count argument is absent, read it in the stream.
+        if (!recordDescription) {
+            recordDescription = count;
+            count = this.parseUShort();
+        }
+        var records = new Array(count);
+        var fields = Object.keys(recordDescription);
+        for (var i = 0; i < count; i++) {
+            var rec = {};
+            for (var j = 0; j < fields.length; j++) {
+                var fieldName = fields[j];
+                var fieldType = recordDescription[fieldName];
+                rec[fieldName] = fieldType.call(this$1);
+            }
+            records[i] = rec;
+        }
+        return records;
+    };
+
+    // Parse a data structure into an object
+    // Example of description: { sequenceIndex: Parser.uShort, lookupListIndex: Parser.uShort }
+    Parser.prototype.parseStruct = function(description) {
+        var this$1 = this;
+
+        if (typeof description === 'function') {
+            return description.call(this);
+        } else {
+            var fields = Object.keys(description);
+            var struct = {};
+            for (var j = 0; j < fields.length; j++) {
+                var fieldName = fields[j];
+                var fieldType = description[fieldName];
+                struct[fieldName] = fieldType.call(this$1);
+            }
+            return struct;
+        }
+    };
+
+    Parser.prototype.parsePointer = function(description) {
+        var structOffset = this.parseOffset16();
+        if (structOffset > 0) {                         // NULL offset => return undefined
+            return new Parser(this.data, this.offset + structOffset).parseStruct(description);
+        }
+        return undefined;
+    };
+
+    /**
+     * Parse a list of offsets to lists of 16-bit integers,
+     * or a list of offsets to lists of offsets to any kind of items.
+     * If itemCallback is not provided, a list of list of UShort is assumed.
+     * If provided, itemCallback is called on each item and must parse the item.
+     * See examples in tables/gsub.js
+     */
+    Parser.prototype.parseListOfLists = function(itemCallback) {
+        var this$1 = this;
+
+        var offsets = this.parseOffset16List();
+        var count = offsets.length;
+        var relativeOffset = this.relativeOffset;
+        var list = new Array(count);
+        for (var i = 0; i < count; i++) {
+            var start = offsets[i];
+            if (start === 0) {                  // NULL offset
+                list[i] = undefined;            // Add i as owned property to list. Convenient with assert.
+                continue;
+            }
+            this$1.relativeOffset = start;
+            if (itemCallback) {
+                var subOffsets = this$1.parseOffset16List();
+                var subList = new Array(subOffsets.length);
+                for (var j = 0; j < subOffsets.length; j++) {
+                    this$1.relativeOffset = start + subOffsets[j];
+                    subList[j] = itemCallback.call(this$1);
+                }
+                list[i] = subList;
+            } else {
+                list[i] = this$1.parseUShortList();
+            }
+        }
+        this.relativeOffset = relativeOffset;
+        return list;
+    };
+
+    ///// Complex tables parsing //////////////////////////////////
+
+    // Parse a coverage table in a GSUB, GPOS or GDEF table.
+    // https://www.microsoft.com/typography/OTSPEC/chapter2.htm
+    // parser.offset must point to the start of the table containing the coverage.
+    Parser.prototype.parseCoverage = function() {
+        var this$1 = this;
+
+        var startOffset = this.offset + this.relativeOffset;
+        var format = this.parseUShort();
+        var count = this.parseUShort();
+        if (format === 1) {
+            return {
+                format: 1,
+                glyphs: this.parseUShortList(count)
+            };
+        } else if (format === 2) {
+            var ranges = new Array(count);
+            for (var i = 0; i < count; i++) {
+                ranges[i] = {
+                    start: this$1.parseUShort(),
+                    end: this$1.parseUShort(),
+                    index: this$1.parseUShort()
+                };
+            }
+            return {
+                format: 2,
+                ranges: ranges
+            };
+        }
+        throw new Error('0x' + startOffset.toString(16) + ': Coverage format must be 1 or 2.');
+    };
+
+    // Parse a Class Definition Table in a GSUB, GPOS or GDEF table.
+    // https://www.microsoft.com/typography/OTSPEC/chapter2.htm
+    Parser.prototype.parseClassDef = function() {
+        var startOffset = this.offset + this.relativeOffset;
+        var format = this.parseUShort();
+        if (format === 1) {
+            return {
+                format: 1,
+                startGlyph: this.parseUShort(),
+                classes: this.parseUShortList()
+            };
+        } else if (format === 2) {
+            return {
+                format: 2,
+                ranges: this.parseRecordList({
+                    start: Parser.uShort,
+                    end: Parser.uShort,
+                    classId: Parser.uShort
+                })
+            };
+        }
+        throw new Error('0x' + startOffset.toString(16) + ': ClassDef format must be 1 or 2.');
+    };
+
+    ///// Static methods ///////////////////////////////////
+    // These convenience methods can be used as callbacks and should be called with "this" context set to a Parser instance.
+
+    Parser.list = function(count, itemCallback) {
+        return function() {
+            return this.parseList(count, itemCallback);
+        };
+    };
+
+    Parser.recordList = function(count, recordDescription) {
+        return function() {
+            return this.parseRecordList(count, recordDescription);
+        };
+    };
+
+    Parser.pointer = function(description) {
+        return function() {
+            return this.parsePointer(description);
+        };
+    };
+
+    Parser.tag = Parser.prototype.parseTag;
+    Parser.byte = Parser.prototype.parseByte;
+    Parser.uShort = Parser.offset16 = Parser.prototype.parseUShort;
+    Parser.uShortList = Parser.prototype.parseUShortList;
+    Parser.struct = Parser.prototype.parseStruct;
+    Parser.coverage = Parser.prototype.parseCoverage;
+    Parser.classDef = Parser.prototype.parseClassDef;
+
+    ///// Script, Feature, Lookup lists ///////////////////////////////////////////////
+    // https://www.microsoft.com/typography/OTSPEC/chapter2.htm
+
+    var langSysTable = {
+        reserved: Parser.uShort,
+        reqFeatureIndex: Parser.uShort,
+        featureIndexes: Parser.uShortList
+    };
+
+    Parser.prototype.parseScriptList = function() {
+        return this.parsePointer(Parser.recordList({
+            tag: Parser.tag,
+            script: Parser.pointer({
+                defaultLangSys: Parser.pointer(langSysTable),
+                langSysRecords: Parser.recordList({
+                    tag: Parser.tag,
+                    langSys: Parser.pointer(langSysTable)
+                })
+            })
+        }));
+    };
+
+    Parser.prototype.parseFeatureList = function() {
+        return this.parsePointer(Parser.recordList({
+            tag: Parser.tag,
+            feature: Parser.pointer({
+                featureParams: Parser.offset16,
+                lookupListIndexes: Parser.uShortList
+            })
+        }));
+    };
+
+    Parser.prototype.parseLookupList = function(lookupTableParsers) {
+        return this.parsePointer(Parser.list(Parser.pointer(function() {
+            var lookupType = this.parseUShort();
+            check.argument(1 <= lookupType && lookupType <= 8, 'GSUB lookup type ' + lookupType + ' unknown.');
+            var lookupFlag = this.parseUShort();
+            var useMarkFilteringSet = lookupFlag & 0x10;
+            return {
+                lookupType: lookupType,
+                lookupFlag: lookupFlag,
+                subtables: this.parseList(Parser.pointer(lookupTableParsers[lookupType])),
+                markFilteringSet: useMarkFilteringSet ? this.parseUShort() : undefined
+            };
+        })));
+    };
+
+    var parse = {
+        getByte: getByte,
+        getCard8: getByte,
+        getUShort: getUShort,
+        getCard16: getUShort,
+        getShort: getShort,
+        getULong: getULong,
+        getFixed: getFixed,
+        getTag: getTag,
+        getOffset: getOffset,
+        getBytes: getBytes,
+        bytesToString: bytesToString,
+        Parser: Parser,
+    };
+
+    // The `cmap` table stores the mappings from characters to glyphs.
+    // https://www.microsoft.com/typography/OTSPEC/cmap.htm
+
+    function parseCmapTableFormat12(cmap, p) {
+        //Skip reserved.
+        p.parseUShort();
+
+        // Length in bytes of the sub-tables.
+        cmap.length = p.parseULong();
+        cmap.language = p.parseULong();
+
+        var groupCount;
+        cmap.groupCount = groupCount = p.parseULong();
+        cmap.glyphIndexMap = {};
+
+        for (var i = 0; i < groupCount; i += 1) {
+            var startCharCode = p.parseULong();
+            var endCharCode = p.parseULong();
+            var startGlyphId = p.parseULong();
+
+            for (var c = startCharCode; c <= endCharCode; c += 1) {
+                cmap.glyphIndexMap[c] = startGlyphId;
+                startGlyphId++;
+            }
+        }
+    }
+
+    function parseCmapTableFormat4(cmap, p, data, start, offset) {
+        // Length in bytes of the sub-tables.
+        cmap.length = p.parseUShort();
+        cmap.language = p.parseUShort();
+
+        // segCount is stored x 2.
+        var segCount;
+        cmap.segCount = segCount = p.parseUShort() >> 1;
+
+        // Skip searchRange, entrySelector, rangeShift.
+        p.skip('uShort', 3);
+
+        // The "unrolled" mapping from character codes to glyph indices.
+        cmap.glyphIndexMap = {};
+        var endCountParser = new parse.Parser(data, start + offset + 14);
+        var startCountParser = new parse.Parser(data, start + offset + 16 + segCount * 2);
+        var idDeltaParser = new parse.Parser(data, start + offset + 16 + segCount * 4);
+        var idRangeOffsetParser = new parse.Parser(data, start + offset + 16 + segCount * 6);
+        var glyphIndexOffset = start + offset + 16 + segCount * 8;
+        for (var i = 0; i < segCount - 1; i += 1) {
+            var glyphIndex = (void 0);
+            var endCount = endCountParser.parseUShort();
+            var startCount = startCountParser.parseUShort();
+            var idDelta = idDeltaParser.parseShort();
+            var idRangeOffset = idRangeOffsetParser.parseUShort();
+            for (var c = startCount; c <= endCount; c += 1) {
+                if (idRangeOffset !== 0) {
+                    // The idRangeOffset is relative to the current position in the idRangeOffset array.
+                    // Take the current offset in the idRangeOffset array.
+                    glyphIndexOffset = (idRangeOffsetParser.offset + idRangeOffsetParser.relativeOffset - 2);
+
+                    // Add the value of the idRangeOffset, which will move us into the glyphIndex array.
+                    glyphIndexOffset += idRangeOffset;
+
+                    // Then add the character index of the current segment, multiplied by 2 for USHORTs.
+                    glyphIndexOffset += (c - startCount) * 2;
+                    glyphIndex = parse.getUShort(data, glyphIndexOffset);
+                    if (glyphIndex !== 0) {
+                        glyphIndex = (glyphIndex + idDelta) & 0xFFFF;
+                    }
+                } else {
+                    glyphIndex = (c + idDelta) & 0xFFFF;
+                }
+
+                cmap.glyphIndexMap[c] = glyphIndex;
+            }
+        }
+    }
+
+    // Parse the `cmap` table. This table stores the mappings from characters to glyphs.
+    // There are many available formats, but we only support the Windows format 4 and 12.
+    // This function returns a `CmapEncoding` object or null if no supported format could be found.
+    function parseCmapTable(data, start) {
+        var cmap = {};
+        cmap.version = parse.getUShort(data, start);
+        check.argument(cmap.version === 0, 'cmap table version should be 0.');
+
+        // The cmap table can contain many sub-tables, each with their own format.
+        // We're only interested in a "platform 3" table. This is a Windows format.
+        cmap.numTables = parse.getUShort(data, start + 2);
+        var offset = -1;
+        for (var i = cmap.numTables - 1; i >= 0; i -= 1) {
+            var platformId = parse.getUShort(data, start + 4 + (i * 8));
+            var encodingId = parse.getUShort(data, start + 4 + (i * 8) + 2);
+            if (platformId === 3 && (encodingId === 0 || encodingId === 1 || encodingId === 10)) {
+                offset = parse.getULong(data, start + 4 + (i * 8) + 4);
+                break;
+            }
+        }
+
+        if (offset === -1) {
+            // There is no cmap table in the font that we support.
+            throw new Error('No valid cmap sub-tables found.');
+        }
+
+        var p = new parse.Parser(data, start + offset);
+        cmap.format = p.parseUShort();
+
+        if (cmap.format === 12) {
+            parseCmapTableFormat12(cmap, p);
+        } else if (cmap.format === 4) {
+            parseCmapTableFormat4(cmap, p, data, start, offset);
+        } else {
+            throw new Error('Only format 4 and 12 cmap tables are supported (found format ' + cmap.format + ').');
+        }
+
+        return cmap;
+    }
+
+    function addSegment(t, code, glyphIndex) {
+        t.segments.push({
+            end: code,
+            start: code,
+            delta: -(code - glyphIndex),
+            offset: 0
+        });
+    }
+
+    function addTerminatorSegment(t) {
+        t.segments.push({
+            end: 0xFFFF,
+            start: 0xFFFF,
+            delta: 1,
+            offset: 0
+        });
+    }
+
+    function makeCmapTable(glyphs) {
+        var t = new table.Table('cmap', [
+            {name: 'version', type: 'USHORT', value: 0},
+            {name: 'numTables', type: 'USHORT', value: 1},
+            {name: 'platformID', type: 'USHORT', value: 3},
+            {name: 'encodingID', type: 'USHORT', value: 1},
+            {name: 'offset', type: 'ULONG', value: 12},
+            {name: 'format', type: 'USHORT', value: 4},
+            {name: 'length', type: 'USHORT', value: 0},
+            {name: 'language', type: 'USHORT', value: 0},
+            {name: 'segCountX2', type: 'USHORT', value: 0},
+            {name: 'searchRange', type: 'USHORT', value: 0},
+            {name: 'entrySelector', type: 'USHORT', value: 0},
+            {name: 'rangeShift', type: 'USHORT', value: 0}
+        ]);
+
+        t.segments = [];
+        for (var i = 0; i < glyphs.length; i += 1) {
+            var glyph = glyphs.get(i);
+            for (var j = 0; j < glyph.unicodes.length; j += 1) {
+                addSegment(t, glyph.unicodes[j], i);
+            }
+
+            t.segments = t.segments.sort(function(a, b) {
+                return a.start - b.start;
+            });
+        }
+
+        addTerminatorSegment(t);
+
+        var segCount;
+        segCount = t.segments.length;
+        t.segCountX2 = segCount * 2;
+        t.searchRange = Math.pow(2, Math.floor(Math.log(segCount) / Math.log(2))) * 2;
+        t.entrySelector = Math.log(t.searchRange / 2) / Math.log(2);
+        t.rangeShift = t.segCountX2 - t.searchRange;
+
+        // Set up parallel segment arrays.
+        var endCounts = [];
+        var startCounts = [];
+        var idDeltas = [];
+        var idRangeOffsets = [];
+        var glyphIds = [];
+
+        for (var i$1 = 0; i$1 < segCount; i$1 += 1) {
+            var segment = t.segments[i$1];
+            endCounts = endCounts.concat({name: 'end_' + i$1, type: 'USHORT', value: segment.end});
+            startCounts = startCounts.concat({name: 'start_' + i$1, type: 'USHORT', value: segment.start});
+            idDeltas = idDeltas.concat({name: 'idDelta_' + i$1, type: 'SHORT', value: segment.delta});
+            idRangeOffsets = idRangeOffsets.concat({name: 'idRangeOffset_' + i$1, type: 'USHORT', value: segment.offset});
+            if (segment.glyphId !== undefined) {
+                glyphIds = glyphIds.concat({name: 'glyph_' + i$1, type: 'USHORT', value: segment.glyphId});
+            }
+        }
+
+        t.fields = t.fields.concat(endCounts);
+        t.fields.push({name: 'reservedPad', type: 'USHORT', value: 0});
+        t.fields = t.fields.concat(startCounts);
+        t.fields = t.fields.concat(idDeltas);
+        t.fields = t.fields.concat(idRangeOffsets);
+        t.fields = t.fields.concat(glyphIds);
+
+        t.length = 14 + // Subtable header
+            endCounts.length * 2 +
+            2 + // reservedPad
+            startCounts.length * 2 +
+            idDeltas.length * 2 +
+            idRangeOffsets.length * 2 +
+            glyphIds.length * 2;
+
+        return t;
+    }
+
+    var cmap = { parse: parseCmapTable, make: makeCmapTable };
+
+    // Glyph encoding
+
+    var cffStandardStrings = [
+        '.notdef', 'space', 'exclam', 'quotedbl', 'numbersign', 'dollar', 'percent', 'ampersand', 'quoteright',
+        'parenleft', 'parenright', 'asterisk', 'plus', 'comma', 'hyphen', 'period', 'slash', 'zero', 'one', 'two',
+        'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'colon', 'semicolon', 'less', 'equal', 'greater',
+        'question', 'at', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
+        'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'bracketleft', 'backslash', 'bracketright', 'asciicircum', 'underscore',
+        'quoteleft', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
+        'u', 'v', 'w', 'x', 'y', 'z', 'braceleft', 'bar', 'braceright', 'asciitilde', 'exclamdown', 'cent', 'sterling',
+        'fraction', 'yen', 'florin', 'section', 'currency', 'quotesingle', 'quotedblleft', 'guillemotleft',
+        'guilsinglleft', 'guilsinglright', 'fi', 'fl', 'endash', 'dagger', 'daggerdbl', 'periodcentered', 'paragraph',
+        'bullet', 'quotesinglbase', 'quotedblbase', 'quotedblright', 'guillemotright', 'ellipsis', 'perthousand',
+        'questiondown', 'grave', 'acute', 'circumflex', 'tilde', 'macron', 'breve', 'dotaccent', 'dieresis', 'ring',
+        'cedilla', 'hungarumlaut', 'ogonek', 'caron', 'emdash', 'AE', 'ordfeminine', 'Lslash', 'Oslash', 'OE',
+        'ordmasculine', 'ae', 'dotlessi', 'lslash', 'oslash', 'oe', 'germandbls', 'onesuperior', 'logicalnot', 'mu',
+        'trademark', 'Eth', 'onehalf', 'plusminus', 'Thorn', 'onequarter', 'divide', 'brokenbar', 'degree', 'thorn',
+        'threequarters', 'twosuperior', 'registered', 'minus', 'eth', 'multiply', 'threesuperior', 'copyright',
+        'Aacute', 'Acircumflex', 'Adieresis', 'Agrave', 'Aring', 'Atilde', 'Ccedilla', 'Eacute', 'Ecircumflex',
+        'Edieresis', 'Egrave', 'Iacute', 'Icircumflex', 'Idieresis', 'Igrave', 'Ntilde', 'Oacute', 'Ocircumflex',
+        'Odieresis', 'Ograve', 'Otilde', 'Scaron', 'Uacute', 'Ucircumflex', 'Udieresis', 'Ugrave', 'Yacute',
+        'Ydieresis', 'Zcaron', 'aacute', 'acircumflex', 'adieresis', 'agrave', 'aring', 'atilde', 'ccedilla', 'eacute',
+        'ecircumflex', 'edieresis', 'egrave', 'iacute', 'icircumflex', 'idieresis', 'igrave', 'ntilde', 'oacute',
+        'ocircumflex', 'odieresis', 'ograve', 'otilde', 'scaron', 'uacute', 'ucircumflex', 'udieresis', 'ugrave',
+        'yacute', 'ydieresis', 'zcaron', 'exclamsmall', 'Hungarumlautsmall', 'dollaroldstyle', 'dollarsuperior',
+        'ampersandsmall', 'Acutesmall', 'parenleftsuperior', 'parenrightsuperior', '266 ff', 'onedotenleader',
+        'zerooldstyle', 'oneoldstyle', 'twooldstyle', 'threeoldstyle', 'fouroldstyle', 'fiveoldstyle', 'sixoldstyle',
+        'sevenoldstyle', 'eightoldstyle', 'nineoldstyle', 'commasuperior', 'threequartersemdash', 'periodsuperior',
+        'questionsmall', 'asuperior', 'bsuperior', 'centsuperior', 'dsuperior', 'esuperior', 'isuperior', 'lsuperior',
+        'msuperior', 'nsuperior', 'osuperior', 'rsuperior', 'ssuperior', 'tsuperior', 'ff', 'ffi', 'ffl',
+        'parenleftinferior', 'parenrightinferior', 'Circumflexsmall', 'hyphensuperior', 'Gravesmall', 'Asmall',
+        'Bsmall', 'Csmall', 'Dsmall', 'Esmall', 'Fsmall', 'Gsmall', 'Hsmall', 'Ismall', 'Jsmall', 'Ksmall', 'Lsmall',
+        'Msmall', 'Nsmall', 'Osmall', 'Psmall', 'Qsmall', 'Rsmall', 'Ssmall', 'Tsmall', 'Usmall', 'Vsmall', 'Wsmall',
+        'Xsmall', 'Ysmall', 'Zsmall', 'colonmonetary', 'onefitted', 'rupiah', 'Tildesmall', 'exclamdownsmall',
+        'centoldstyle', 'Lslashsmall', 'Scaronsmall', 'Zcaronsmall', 'Dieresissmall', 'Brevesmall', 'Caronsmall',
+        'Dotaccentsmall', 'Macronsmall', 'figuredash', 'hypheninferior', 'Ogoneksmall', 'Ringsmall', 'Cedillasmall',
+        'questiondownsmall', 'oneeighth', 'threeeighths', 'fiveeighths', 'seveneighths', 'onethird', 'twothirds',
+        'zerosuperior', 'foursuperior', 'fivesuperior', 'sixsuperior', 'sevensuperior', 'eightsuperior', 'ninesuperior',
+        'zeroinferior', 'oneinferior', 'twoinferior', 'threeinferior', 'fourinferior', 'fiveinferior', 'sixinferior',
+        'seveninferior', 'eightinferior', 'nineinferior', 'centinferior', 'dollarinferior', 'periodinferior',
+        'commainferior', 'Agravesmall', 'Aacutesmall', 'Acircumflexsmall', 'Atildesmall', 'Adieresissmall',
+        'Aringsmall', 'AEsmall', 'Ccedillasmall', 'Egravesmall', 'Eacutesmall', 'Ecircumflexsmall', 'Edieresissmall',
+        'Igravesmall', 'Iacutesmall', 'Icircumflexsmall', 'Idieresissmall', 'Ethsmall', 'Ntildesmall', 'Ogravesmall',
+        'Oacutesmall', 'Ocircumflexsmall', 'Otildesmall', 'Odieresissmall', 'OEsmall', 'Oslashsmall', 'Ugravesmall',
+        'Uacutesmall', 'Ucircumflexsmall', 'Udieresissmall', 'Yacutesmall', 'Thornsmall', 'Ydieresissmall', '001.000',
+        '001.001', '001.002', '001.003', 'Black', 'Bold', 'Book', 'Light', 'Medium', 'Regular', 'Roman', 'Semibold'];
+
+    var cffStandardEncoding = [
+        '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
+        '', '', '', '', 'space', 'exclam', 'quotedbl', 'numbersign', 'dollar', 'percent', 'ampersand', 'quoteright',
+        'parenleft', 'parenright', 'asterisk', 'plus', 'comma', 'hyphen', 'period', 'slash', 'zero', 'one', 'two',
+        'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'colon', 'semicolon', 'less', 'equal', 'greater',
+        'question', 'at', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
+        'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'bracketleft', 'backslash', 'bracketright', 'asciicircum', 'underscore',
+        'quoteleft', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
+        'u', 'v', 'w', 'x', 'y', 'z', 'braceleft', 'bar', 'braceright', 'asciitilde', '', '', '', '', '', '', '', '',
+        '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
+        'exclamdown', 'cent', 'sterling', 'fraction', 'yen', 'florin', 'section', 'currency', 'quotesingle',
+        'quotedblleft', 'guillemotleft', 'guilsinglleft', 'guilsinglright', 'fi', 'fl', '', 'endash', 'dagger',
+        'daggerdbl', 'periodcentered', '', 'paragraph', 'bullet', 'quotesinglbase', 'quotedblbase', 'quotedblright',
+        'guillemotright', 'ellipsis', 'perthousand', '', 'questiondown', '', 'grave', 'acute', 'circumflex', 'tilde',
+        'macron', 'breve', 'dotaccent', 'dieresis', '', 'ring', 'cedilla', '', 'hungarumlaut', 'ogonek', 'caron',
+        'emdash', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'AE', '', 'ordfeminine', '', '', '',
+        '', 'Lslash', 'Oslash', 'OE', 'ordmasculine', '', '', '', '', '', 'ae', '', '', '', 'dotlessi', '', '',
+        'lslash', 'oslash', 'oe', 'germandbls'];
+
+    var cffExpertEncoding = [
+        '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
+        '', '', '', '', 'space', 'exclamsmall', 'Hungarumlautsmall', '', 'dollaroldstyle', 'dollarsuperior',
+        'ampersandsmall', 'Acutesmall', 'parenleftsuperior', 'parenrightsuperior', 'twodotenleader', 'onedotenleader',
+        'comma', 'hyphen', 'period', 'fraction', 'zerooldstyle', 'oneoldstyle', 'twooldstyle', 'threeoldstyle',
+        'fouroldstyle', 'fiveoldstyle', 'sixoldstyle', 'sevenoldstyle', 'eightoldstyle', 'nineoldstyle', 'colon',
+        'semicolon', 'commasuperior', 'threequartersemdash', 'periodsuperior', 'questionsmall', '', 'asuperior',
+        'bsuperior', 'centsuperior', 'dsuperior', 'esuperior', '', '', 'isuperior', '', '', 'lsuperior', 'msuperior',
+        'nsuperior', 'osuperior', '', '', 'rsuperior', 'ssuperior', 'tsuperior', '', 'ff', 'fi', 'fl', 'ffi', 'ffl',
+        'parenleftinferior', '', 'parenrightinferior', 'Circumflexsmall', 'hyphensuperior', 'Gravesmall', 'Asmall',
+        'Bsmall', 'Csmall', 'Dsmall', 'Esmall', 'Fsmall', 'Gsmall', 'Hsmall', 'Ismall', 'Jsmall', 'Ksmall', 'Lsmall',
+        'Msmall', 'Nsmall', 'Osmall', 'Psmall', 'Qsmall', 'Rsmall', 'Ssmall', 'Tsmall', 'Usmall', 'Vsmall', 'Wsmall',
+        'Xsmall', 'Ysmall', 'Zsmall', 'colonmonetary', 'onefitted', 'rupiah', 'Tildesmall', '', '', '', '', '', '', '',
+        '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
+        'exclamdownsmall', 'centoldstyle', 'Lslashsmall', '', '', 'Scaronsmall', 'Zcaronsmall', 'Dieresissmall',
+        'Brevesmall', 'Caronsmall', '', 'Dotaccentsmall', '', '', 'Macronsmall', '', '', 'figuredash', 'hypheninferior',
+        '', '', 'Ogoneksmall', 'Ringsmall', 'Cedillasmall', '', '', '', 'onequarter', 'onehalf', 'threequarters',
+        'questiondownsmall', 'oneeighth', 'threeeighths', 'fiveeighths', 'seveneighths', 'onethird', 'twothirds', '',
+        '', 'zerosuperior', 'onesuperior', 'twosuperior', 'threesuperior', 'foursuperior', 'fivesuperior',
+        'sixsuperior', 'sevensuperior', 'eightsuperior', 'ninesuperior', 'zeroinferior', 'oneinferior', 'twoinferior',
+        'threeinferior', 'fourinferior', 'fiveinferior', 'sixinferior', 'seveninferior', 'eightinferior',
+        'nineinferior', 'centinferior', 'dollarinferior', 'periodinferior', 'commainferior', 'Agravesmall',
+        'Aacutesmall', 'Acircumflexsmall', 'Atildesmall', 'Adieresissmall', 'Aringsmall', 'AEsmall', 'Ccedillasmall',
+        'Egravesmall', 'Eacutesmall', 'Ecircumflexsmall', 'Edieresissmall', 'Igravesmall', 'Iacutesmall',
+        'Icircumflexsmall', 'Idieresissmall', 'Ethsmall', 'Ntildesmall', 'Ogravesmall', 'Oacutesmall',
+        'Ocircumflexsmall', 'Otildesmall', 'Odieresissmall', 'OEsmall', 'Oslashsmall', 'Ugravesmall', 'Uacutesmall',
+        'Ucircumflexsmall', 'Udieresissmall', 'Yacutesmall', 'Thornsmall', 'Ydieresissmall'];
+
+    var standardNames = [
+        '.notdef', '.null', 'nonmarkingreturn', 'space', 'exclam', 'quotedbl', 'numbersign', 'dollar', 'percent',
+        'ampersand', 'quotesingle', 'parenleft', 'parenright', 'asterisk', 'plus', 'comma', 'hyphen', 'period', 'slash',
+        'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'colon', 'semicolon', 'less',
+        'equal', 'greater', 'question', 'at', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
+        'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'bracketleft', 'backslash', 'bracketright',
+        'asciicircum', 'underscore', 'grave', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o',
+        'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'braceleft', 'bar', 'braceright', 'asciitilde',
+        'Adieresis', 'Aring', 'Ccedilla', 'Eacute', 'Ntilde', 'Odieresis', 'Udieresis', 'aacute', 'agrave',
+        'acircumflex', 'adieresis', 'atilde', 'aring', 'ccedilla', 'eacute', 'egrave', 'ecircumflex', 'edieresis',
+        'iacute', 'igrave', 'icircumflex', 'idieresis', 'ntilde', 'oacute', 'ograve', 'ocircumflex', 'odieresis',
+        'otilde', 'uacute', 'ugrave', 'ucircumflex', 'udieresis', 'dagger', 'degree', 'cent', 'sterling', 'section',
+        'bullet', 'paragraph', 'germandbls', 'registered', 'copyright', 'trademark', 'acute', 'dieresis', 'notequal',
+        'AE', 'Oslash', 'infinity', 'plusminus', 'lessequal', 'greaterequal', 'yen', 'mu', 'partialdiff', 'summation',
+        'product', 'pi', 'integral', 'ordfeminine', 'ordmasculine', 'Omega', 'ae', 'oslash', 'questiondown',
+        'exclamdown', 'logicalnot', 'radical', 'florin', 'approxequal', 'Delta', 'guillemotleft', 'guillemotright',
+        'ellipsis', 'nonbreakingspace', 'Agrave', 'Atilde', 'Otilde', 'OE', 'oe', 'endash', 'emdash', 'quotedblleft',
+        'quotedblright', 'quoteleft', 'quoteright', 'divide', 'lozenge', 'ydieresis', 'Ydieresis', 'fraction',
+        'currency', 'guilsinglleft', 'guilsinglright', 'fi', 'fl', 'daggerdbl', 'periodcentered', 'quotesinglbase',
+        'quotedblbase', 'perthousand', 'Acircumflex', 'Ecircumflex', 'Aacute', 'Edieresis', 'Egrave', 'Iacute',
+        'Icircumflex', 'Idieresis', 'Igrave', 'Oacute', 'Ocircumflex', 'apple', 'Ograve', 'Uacute', 'Ucircumflex',
+        'Ugrave', 'dotlessi', 'circumflex', 'tilde', 'macron', 'breve', 'dotaccent', 'ring', 'cedilla', 'hungarumlaut',
+        'ogonek', 'caron', 'Lslash', 'lslash', 'Scaron', 'scaron', 'Zcaron', 'zcaron', 'brokenbar', 'Eth', 'eth',
+        'Yacute', 'yacute', 'Thorn', 'thorn', 'minus', 'multiply', 'onesuperior', 'twosuperior', 'threesuperior',
+        'onehalf', 'onequarter', 'threequarters', 'franc', 'Gbreve', 'gbreve', 'Idotaccent', 'Scedilla', 'scedilla',
+        'Cacute', 'cacute', 'Ccaron', 'ccaron', 'dcroat'];
+
+    /**
+     * This is the encoding used for fonts created from scratch.
+     * It loops through all glyphs and finds the appropriate unicode value.
+     * Since it's linear time, other encodings will be faster.
+     * @exports opentype.DefaultEncoding
+     * @class
+     * @constructor
+     * @param {opentype.Font}
+     */
+    function DefaultEncoding(font) {
+        this.font = font;
+    }
+
+    DefaultEncoding.prototype.charToGlyphIndex = function(c) {
+        var code = c.charCodeAt(0);
+        var glyphs = this.font.glyphs;
+        if (glyphs) {
+            for (var i = 0; i < glyphs.length; i += 1) {
+                var glyph = glyphs.get(i);
+                for (var j = 0; j < glyph.unicodes.length; j += 1) {
+                    if (glyph.unicodes[j] === code) {
+                        return i;
+                    }
+                }
+            }
+        }
+        return null;
+    };
+
+    /**
+     * @exports opentype.CmapEncoding
+     * @class
+     * @constructor
+     * @param {Object} cmap - a object with the cmap encoded data
+     */
+    function CmapEncoding(cmap) {
+        this.cmap = cmap;
+    }
+
+    /**
+     * @param  {string} c - the character
+     * @return {number} The glyph index.
+     */
+    CmapEncoding.prototype.charToGlyphIndex = function(c) {
+        return this.cmap.glyphIndexMap[c.charCodeAt(0)] || 0;
+    };
+
+    /**
+     * @exports opentype.CffEncoding
+     * @class
+     * @constructor
+     * @param {string} encoding - The encoding
+     * @param {Array} charset - The character set.
+     */
+    function CffEncoding(encoding, charset) {
+        this.encoding = encoding;
+        this.charset = charset;
+    }
+
+    /**
+     * @param  {string} s - The character
+     * @return {number} The index.
+     */
+    CffEncoding.prototype.charToGlyphIndex = function(s) {
+        var code = s.charCodeAt(0);
+        var charName = this.encoding[code];
+        return this.charset.indexOf(charName);
+    };
+
+    /**
+     * @exports opentype.GlyphNames
+     * @class
+     * @constructor
+     * @param {Object} post
+     */
+    function GlyphNames(post) {
+        var this$1 = this;
+
+        switch (post.version) {
+            case 1:
+                this.names = standardNames.slice();
+                break;
+            case 2:
+                this.names = new Array(post.numberOfGlyphs);
+                for (var i = 0; i < post.numberOfGlyphs; i++) {
+                    if (post.glyphNameIndex[i] < standardNames.length) {
+                        this$1.names[i] = standardNames[post.glyphNameIndex[i]];
+                    } else {
+                        this$1.names[i] = post.names[post.glyphNameIndex[i] - standardNames.length];
+                    }
+                }
+
+                break;
+            case 2.5:
+                this.names = new Array(post.numberOfGlyphs);
+                for (var i$1 = 0; i$1 < post.numberOfGlyphs; i$1++) {
+                    this$1.names[i$1] = standardNames[i$1 + post.glyphNameIndex[i$1]];
+                }
+
+                break;
+            case 3:
+                this.names = [];
+                break;
+            default:
+                this.names = [];
+                break;
+        }
+    }
+
+    /**
+     * Gets the index of a glyph by name.
+     * @param  {string} name - The glyph name
+     * @return {number} The index
+     */
+    GlyphNames.prototype.nameToGlyphIndex = function(name) {
+        return this.names.indexOf(name);
+    };
+
+    /**
+     * @param  {number} gid
+     * @return {string}
+     */
+    GlyphNames.prototype.glyphIndexToName = function(gid) {
+        return this.names[gid];
+    };
+
+    /**
+     * @alias opentype.addGlyphNames
+     * @param {opentype.Font}
+     */
+    function addGlyphNames(font) {
+        var glyph;
+        var glyphIndexMap = font.tables.cmap.glyphIndexMap;
+        var charCodes = Object.keys(glyphIndexMap);
+
+        for (var i = 0; i < charCodes.length; i += 1) {
+            var c = charCodes[i];
+            var glyphIndex = glyphIndexMap[c];
+            glyph = font.glyphs.get(glyphIndex);
+            glyph.addUnicode(parseInt(c));
+        }
+
+        for (var i$1 = 0; i$1 < font.glyphs.length; i$1 += 1) {
+            glyph = font.glyphs.get(i$1);
+            if (font.cffEncoding) {
+                if (font.isCIDFont) {
+                    glyph.name = 'gid' + i$1;
+                } else {
+                    glyph.name = font.cffEncoding.charset[i$1];
+                }
+            } else if (font.glyphNames.names) {
+                glyph.name = font.glyphNames.glyphIndexToName(i$1);
+            }
+        }
+    }
+
+    // Drawing utility functions.
+
+    // Draw a line on the given context from point `x1,y1` to point `x2,y2`.
+    function line(ctx, x1, y1, x2, y2) {
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+    }
+
+    var draw = { line: line };
+
+    // The `glyf` table describes the glyphs in TrueType outline format.
+    // http://www.microsoft.com/typography/otspec/glyf.htm
+
+    // Parse the coordinate data for a glyph.
+    function parseGlyphCoordinate(p, flag, previousValue, shortVectorBitMask, sameBitMask) {
+        var v;
+        if ((flag & shortVectorBitMask) > 0) {
+            // The coordinate is 1 byte long.
+            v = p.parseByte();
+            // The `same` bit is re-used for short values to signify the sign of the value.
+            if ((flag & sameBitMask) === 0) {
+                v = -v;
+            }
+
+            v = previousValue + v;
+        } else {
+            //  The coordinate is 2 bytes long.
+            // If the `same` bit is set, the coordinate is the same as the previous coordinate.
+            if ((flag & sameBitMask) > 0) {
+                v = previousValue;
+            } else {
+                // Parse the coordinate as a signed 16-bit delta value.
+                v = previousValue + p.parseShort();
+            }
+        }
+
+        return v;
+    }
+
+    // Parse a TrueType glyph.
+    function parseGlyph(glyph, data, start) {
+        var p = new parse.Parser(data, start);
+        glyph.numberOfContours = p.parseShort();
+        glyph._xMin = p.parseShort();
+        glyph._yMin = p.parseShort();
+        glyph._xMax = p.parseShort();
+        glyph._yMax = p.parseShort();
+        var flags;
+        var flag;
+
+        if (glyph.numberOfContours > 0) {
+            // This glyph is not a composite.
+            var endPointIndices = glyph.endPointIndices = [];
+            for (var i = 0; i < glyph.numberOfContours; i += 1) {
+                endPointIndices.push(p.parseUShort());
+            }
+
+            glyph.instructionLength = p.parseUShort();
+            glyph.instructions = [];
+            for (var i$1 = 0; i$1 < glyph.instructionLength; i$1 += 1) {
+                glyph.instructions.push(p.parseByte());
+            }
+
+            var numberOfCoordinates = endPointIndices[endPointIndices.length - 1] + 1;
+            flags = [];
+            for (var i$2 = 0; i$2 < numberOfCoordinates; i$2 += 1) {
+                flag = p.parseByte();
+                flags.push(flag);
+                // If bit 3 is set, we repeat this flag n times, where n is the next byte.
+                if ((flag & 8) > 0) {
+                    var repeatCount = p.parseByte();
+                    for (var j = 0; j < repeatCount; j += 1) {
+                        flags.push(flag);
+                        i$2 += 1;
+                    }
+                }
+            }
+
+            check.argument(flags.length === numberOfCoordinates, 'Bad flags.');
+
+            if (endPointIndices.length > 0) {
+                var points = [];
+                var point;
+                // X/Y coordinates are relative to the previous point, except for the first point which is relative to 0,0.
+                if (numberOfCoordinates > 0) {
+                    for (var i$3 = 0; i$3 < numberOfCoordinates; i$3 += 1) {
+                        flag = flags[i$3];
+                        point = {};
+                        point.onCurve = !!(flag & 1);
+                        point.lastPointOfContour = endPointIndices.indexOf(i$3) >= 0;
+                        points.push(point);
+                    }
+
+                    var px = 0;
+                    for (var i$4 = 0; i$4 < numberOfCoordinates; i$4 += 1) {
+                        flag = flags[i$4];
+                        point = points[i$4];
+                        point.x = parseGlyphCoordinate(p, flag, px, 2, 16);
+                        px = point.x;
+                    }
+
+                    var py = 0;
+                    for (var i$5 = 0; i$5 < numberOfCoordinates; i$5 += 1) {
+                        flag = flags[i$5];
+                        point = points[i$5];
+                        point.y = parseGlyphCoordinate(p, flag, py, 4, 32);
+                        py = point.y;
+                    }
+                }
+
+                glyph.points = points;
+            } else {
+                glyph.points = [];
+            }
+        } else if (glyph.numberOfContours === 0) {
+            glyph.points = [];
+        } else {
+            glyph.isComposite = true;
+            glyph.points = [];
+            glyph.components = [];
+            var moreComponents = true;
+            while (moreComponents) {
+                flags = p.parseUShort();
+                var component = {
+                    glyphIndex: p.parseUShort(),
+                    xScale: 1,
+                    scale01: 0,
+                    scale10: 0,
+                    yScale: 1,
+                    dx: 0,
+                    dy: 0
+                };
+                if ((flags & 1) > 0) {
+                    // The arguments are words
+                    if ((flags & 2) > 0) {
+                        // values are offset
+                        component.dx = p.parseShort();
+                        component.dy = p.parseShort();
+                    } else {
+                        // values are matched points
+                        component.matchedPoints = [p.parseUShort(), p.parseUShort()];
+                    }
+
+                } else {
+                    // The arguments are bytes
+                    if ((flags & 2) > 0) {
+                        // values are offset
+                        component.dx = p.parseChar();
+                        component.dy = p.parseChar();
+                    } else {
+                        // values are matched points
+                        component.matchedPoints = [p.parseByte(), p.parseByte()];
+                    }
+                }
+
+                if ((flags & 8) > 0) {
+                    // We have a scale
+                    component.xScale = component.yScale = p.parseF2Dot14();
+                } else if ((flags & 64) > 0) {
+                    // We have an X / Y scale
+                    component.xScale = p.parseF2Dot14();
+                    component.yScale = p.parseF2Dot14();
+                } else if ((flags & 128) > 0) {
+                    // We have a 2x2 transformation
+                    component.xScale = p.parseF2Dot14();
+                    component.scale01 = p.parseF2Dot14();
+                    component.scale10 = p.parseF2Dot14();
+                    component.yScale = p.parseF2Dot14();
+                }
+
+                glyph.components.push(component);
+                moreComponents = !!(flags & 32);
+            }
+            if (flags & 0x100) {
+                // We have instructions
+                glyph.instructionLength = p.parseUShort();
+                glyph.instructions = [];
+                for (var i$6 = 0; i$6 < glyph.instructionLength; i$6 += 1) {
+                    glyph.instructions.push(p.parseByte());
+                }
+            }
+        }
+    }
+
+    // Transform an array of points and return a new array.
+    function transformPoints(points, transform) {
+        var newPoints = [];
+        for (var i = 0; i < points.length; i += 1) {
+            var pt = points[i];
+            var newPt = {
+                x: transform.xScale * pt.x + transform.scale01 * pt.y + transform.dx,
+                y: transform.scale10 * pt.x + transform.yScale * pt.y + transform.dy,
+                onCurve: pt.onCurve,
+                lastPointOfContour: pt.lastPointOfContour
+            };
+            newPoints.push(newPt);
+        }
+
+        return newPoints;
+    }
+
+    function getContours(points) {
+        var contours = [];
+        var currentContour = [];
+        for (var i = 0; i < points.length; i += 1) {
+            var pt = points[i];
+            currentContour.push(pt);
+            if (pt.lastPointOfContour) {
+                contours.push(currentContour);
+                currentContour = [];
+            }
+        }
+
+        check.argument(currentContour.length === 0, 'There are still points left in the current contour.');
+        return contours;
+    }
+
+    // Convert the TrueType glyph outline to a Path.
+    function getPath(points) {
+        var p = new Path();
+        if (!points) {
+            return p;
+        }
+
+        var contours = getContours(points);
+
+        for (var contourIndex = 0; contourIndex < contours.length; ++contourIndex) {
+            var contour = contours[contourIndex];
+
+            var prev = null;
+            var curr = contour[contour.length - 1];
+            var next = contour[0];
+
+            if (curr.onCurve) {
+                p.moveTo(curr.x, curr.y);
+            } else {
+                if (next.onCurve) {
+                    p.moveTo(next.x, next.y);
+                } else {
+                    // If both first and last points are off-curve, start at their middle.
+                    var start = {x: (curr.x + next.x) * 0.5, y: (curr.y + next.y) * 0.5};
+                    p.moveTo(start.x, start.y);
+                }
+            }
+
+            for (var i = 0; i < contour.length; ++i) {
+                prev = curr;
+                curr = next;
+                next = contour[(i + 1) % contour.length];
+
+                if (curr.onCurve) {
+                    // This is a straight line.
+                    p.lineTo(curr.x, curr.y);
+                } else {
+                    var prev2 = prev;
+                    var next2 = next;
+
+                    if (!prev.onCurve) {
+                        prev2 = { x: (curr.x + prev.x) * 0.5, y: (curr.y + prev.y) * 0.5 };
+                        p.lineTo(prev2.x, prev2.y);
+                    }
+
+                    if (!next.onCurve) {
+                        next2 = { x: (curr.x + next.x) * 0.5, y: (curr.y + next.y) * 0.5 };
+                    }
+
+                    p.lineTo(prev2.x, prev2.y);
+                    p.quadraticCurveTo(curr.x, curr.y, next2.x, next2.y);
+                }
+            }
+
+            p.closePath();
+        }
+        return p;
+    }
+
+    function buildPath(glyphs, glyph) {
+        if (glyph.isComposite) {
+            for (var j = 0; j < glyph.components.length; j += 1) {
+                var component = glyph.components[j];
+                var componentGlyph = glyphs.get(component.glyphIndex);
+                // Force the ttfGlyphLoader to parse the glyph.
+                componentGlyph.getPath();
+                if (componentGlyph.points) {
+                    var transformedPoints = (void 0);
+                    if (component.matchedPoints === undefined) {
+                        // component positioned by offset
+                        transformedPoints = transformPoints(componentGlyph.points, component);
+                    } else {
+                        // component positioned by matched points
+                        if ((component.matchedPoints[0] > glyph.points.length - 1) ||
+                            (component.matchedPoints[1] > componentGlyph.points.length - 1)) {
+                            throw Error('Matched points out of range in ' + glyph.name);
+                        }
+                        var firstPt = glyph.points[component.matchedPoints[0]];
+                        var secondPt = componentGlyph.points[component.matchedPoints[1]];
+                        var transform = {
+                            xScale: component.xScale, scale01: component.scale01,
+                            scale10: component.scale10, yScale: component.yScale,
+                            dx: 0, dy: 0
+                        };
+                        secondPt = transformPoints([secondPt], transform)[0];
+                        transform.dx = firstPt.x - secondPt.x;
+                        transform.dy = firstPt.y - secondPt.y;
+                        transformedPoints = transformPoints(componentGlyph.points, transform);
+                    }
+                    glyph.points = glyph.points.concat(transformedPoints);
+                }
+            }
+        }
+
+        return getPath(glyph.points);
+    }
+
+    // Parse all the glyphs according to the offsets from the `loca` table.
+    function parseGlyfTable(data, start, loca, font) {
+        var glyphs = new glyphset.GlyphSet(font);
+
+        // The last element of the loca table is invalid.
+        for (var i = 0; i < loca.length - 1; i += 1) {
+            var offset = loca[i];
+            var nextOffset = loca[i + 1];
+            if (offset !== nextOffset) {
+                glyphs.push(i, glyphset.ttfGlyphLoader(font, i, parseGlyph, data, start + offset, buildPath));
+            } else {
+                glyphs.push(i, glyphset.glyphLoader(font, i));
+            }
+        }
+
+        return glyphs;
+    }
+
+    var glyf = { getPath: getPath, parse: parseGlyfTable };
+
+    // The Glyph object
+
+    function getPathDefinition(glyph, path) {
+        var _path = path || {commands: []};
+        return {
+            configurable: true,
+
+            get: function() {
+                if (typeof _path === 'function') {
+                    _path = _path();
+                }
+
+                return _path;
+            },
+
+            set: function(p) {
+                _path = p;
+            }
+        };
+    }
+    /**
+     * @typedef GlyphOptions
+     * @type Object
+     * @property {string} [name] - The glyph name
+     * @property {number} [unicode]
+     * @property {Array} [unicodes]
+     * @property {number} [xMin]
+     * @property {number} [yMin]
+     * @property {number} [xMax]
+     * @property {number} [yMax]
+     * @property {number} [advanceWidth]
+     */
+
+    // A Glyph is an individual mark that often corresponds to a character.
+    // Some glyphs, such as ligatures, are a combination of many characters.
+    // Glyphs are the basic building blocks of a font.
+    //
+    // The `Glyph` class contains utility methods for drawing the path and its points.
+    /**
+     * @exports opentype.Glyph
+     * @class
+     * @param {GlyphOptions}
+     * @constructor
+     */
+    function Glyph(options) {
+        // By putting all the code on a prototype function (which is only declared once)
+        // we reduce the memory requirements for larger fonts by some 2%
+        this.bindConstructorValues(options);
+    }
+
+    /**
+     * @param  {GlyphOptions}
+     */
+    Glyph.prototype.bindConstructorValues = function(options) {
+        this.index = options.index || 0;
+
+        // These three values cannot be deferred for memory optimization:
+        this.name = options.name || null;
+        this.unicode = options.unicode || undefined;
+        this.unicodes = options.unicodes || options.unicode !== undefined ? [options.unicode] : [];
+
+        // But by binding these values only when necessary, we reduce can
+        // the memory requirements by almost 3% for larger fonts.
+        if (options.xMin) {
+            this.xMin = options.xMin;
+        }
+
+        if (options.yMin) {
+            this.yMin = options.yMin;
+        }
+
+        if (options.xMax) {
+            this.xMax = options.xMax;
+        }
+
+        if (options.yMax) {
+            this.yMax = options.yMax;
+        }
+
+        if (options.advanceWidth) {
+            this.advanceWidth = options.advanceWidth;
+        }
+
+        // The path for a glyph is the most memory intensive, and is bound as a value
+        // with a getter/setter to ensure we actually do path parsing only once the
+        // path is actually needed by anything.
+        Object.defineProperty(this, 'path', getPathDefinition(this, options.path));
+    };
+
+    /**
+     * @param {number}
+     */
+    Glyph.prototype.addUnicode = function(unicode) {
+        if (this.unicodes.length === 0) {
+            this.unicode = unicode;
+        }
+
+        this.unicodes.push(unicode);
+    };
+
+    /**
+     * Calculate the minimum bounding box for this glyph.
+     * @return {opentype.BoundingBox}
+     */
+    Glyph.prototype.getBoundingBox = function() {
+        return this.path.getBoundingBox();
+    };
+
+    /**
+     * Convert the glyph to a Path we can draw on a drawing context.
+     * @param  {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     * @param  {Object=} options - xScale, yScale to stretch the glyph.
+     * @param  {opentype.Font} if hinting is to be used, the font
+     * @return {opentype.Path}
+     */
+    Glyph.prototype.getPath = function(x, y, fontSize, options, font) {
+        x = x !== undefined ? x : 0;
+        y = y !== undefined ? y : 0;
+        fontSize = fontSize !== undefined ? fontSize : 72;
+        var commands;
+        var hPoints;
+        if (!options) { options = { }; }
+        var xScale = options.xScale;
+        var yScale = options.yScale;
+
+        if (options.hinting && font && font.hinting) {
+            // in case of hinting, the hinting engine takes care
+            // of scaling the points (not the path) before hinting.
+            hPoints = this.path && font.hinting.exec(this, fontSize);
+            // in case the hinting engine failed hPoints is undefined
+            // and thus reverts to plain rending
+        }
+
+        if (hPoints) {
+            commands = glyf.getPath(hPoints).commands;
+            x = Math.round(x);
+            y = Math.round(y);
+            // TODO in case of hinting xyScaling is not yet supported
+            xScale = yScale = 1;
+        } else {
+            commands = this.path.commands;
+            var scale = 1 / this.path.unitsPerEm * fontSize;
+            if (xScale === undefined) { xScale = scale; }
+            if (yScale === undefined) { yScale = scale; }
+        }
+
+        var p = new Path();
+        for (var i = 0; i < commands.length; i += 1) {
+            var cmd = commands[i];
+            if (cmd.type === 'M') {
+                p.moveTo(x + (cmd.x * xScale), y + (-cmd.y * yScale));
+            } else if (cmd.type === 'L') {
+                p.lineTo(x + (cmd.x * xScale), y + (-cmd.y * yScale));
+            } else if (cmd.type === 'Q') {
+                p.quadraticCurveTo(x + (cmd.x1 * xScale), y + (-cmd.y1 * yScale),
+                                   x + (cmd.x * xScale), y + (-cmd.y * yScale));
+            } else if (cmd.type === 'C') {
+                p.curveTo(x + (cmd.x1 * xScale), y + (-cmd.y1 * yScale),
+                          x + (cmd.x2 * xScale), y + (-cmd.y2 * yScale),
+                          x + (cmd.x * xScale), y + (-cmd.y * yScale));
+            } else if (cmd.type === 'Z') {
+                p.closePath();
+            }
+        }
+
+        return p;
+    };
+
+    /**
+     * Split the glyph into contours.
+     * This function is here for backwards compatibility, and to
+     * provide raw access to the TrueType glyph outlines.
+     * @return {Array}
+     */
+    Glyph.prototype.getContours = function() {
+        var this$1 = this;
+
+        if (this.points === undefined) {
+            return [];
+        }
+
+        var contours = [];
+        var currentContour = [];
+        for (var i = 0; i < this.points.length; i += 1) {
+            var pt = this$1.points[i];
+            currentContour.push(pt);
+            if (pt.lastPointOfContour) {
+                contours.push(currentContour);
+                currentContour = [];
+            }
+        }
+
+        check.argument(currentContour.length === 0, 'There are still points left in the current contour.');
+        return contours;
+    };
+
+    /**
+     * Calculate the xMin/yMin/xMax/yMax/lsb/rsb for a Glyph.
+     * @return {Object}
+     */
+    Glyph.prototype.getMetrics = function() {
+        var commands = this.path.commands;
+        var xCoords = [];
+        var yCoords = [];
+        for (var i = 0; i < commands.length; i += 1) {
+            var cmd = commands[i];
+            if (cmd.type !== 'Z') {
+                xCoords.push(cmd.x);
+                yCoords.push(cmd.y);
+            }
+
+            if (cmd.type === 'Q' || cmd.type === 'C') {
+                xCoords.push(cmd.x1);
+                yCoords.push(cmd.y1);
+            }
+
+            if (cmd.type === 'C') {
+                xCoords.push(cmd.x2);
+                yCoords.push(cmd.y2);
+            }
+        }
+
+        var metrics = {
+            xMin: Math.min.apply(null, xCoords),
+            yMin: Math.min.apply(null, yCoords),
+            xMax: Math.max.apply(null, xCoords),
+            yMax: Math.max.apply(null, yCoords),
+            leftSideBearing: this.leftSideBearing
+        };
+
+        if (!isFinite(metrics.xMin)) {
+            metrics.xMin = 0;
+        }
+
+        if (!isFinite(metrics.xMax)) {
+            metrics.xMax = this.advanceWidth;
+        }
+
+        if (!isFinite(metrics.yMin)) {
+            metrics.yMin = 0;
+        }
+
+        if (!isFinite(metrics.yMax)) {
+            metrics.yMax = 0;
+        }
+
+        metrics.rightSideBearing = this.advanceWidth - metrics.leftSideBearing - (metrics.xMax - metrics.xMin);
+        return metrics;
+    };
+
+    /**
+     * Draw the glyph on the given context.
+     * @param  {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+     * @param  {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     * @param  {Object=} options - xScale, yScale to stretch the glyph.
+     */
+    Glyph.prototype.draw = function(ctx, x, y, fontSize, options) {
+        this.getPath(x, y, fontSize, options).draw(ctx);
+    };
+
+    /**
+     * Draw the points of the glyph.
+     * On-curve points will be drawn in blue, off-curve points will be drawn in red.
+     * @param  {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+     * @param  {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     */
+    Glyph.prototype.drawPoints = function(ctx, x, y, fontSize) {
+        function drawCircles(l, x, y, scale) {
+            var PI_SQ = Math.PI * 2;
+            ctx.beginPath();
+            for (var j = 0; j < l.length; j += 1) {
+                ctx.moveTo(x + (l[j].x * scale), y + (l[j].y * scale));
+                ctx.arc(x + (l[j].x * scale), y + (l[j].y * scale), 2, 0, PI_SQ, false);
+            }
+
+            ctx.closePath();
+            ctx.fill();
+        }
+
+        x = x !== undefined ? x : 0;
+        y = y !== undefined ? y : 0;
+        fontSize = fontSize !== undefined ? fontSize : 24;
+        var scale = 1 / this.path.unitsPerEm * fontSize;
+
+        var blueCircles = [];
+        var redCircles = [];
+        var path = this.path;
+        for (var i = 0; i < path.commands.length; i += 1) {
+            var cmd = path.commands[i];
+            if (cmd.x !== undefined) {
+                blueCircles.push({x: cmd.x, y: -cmd.y});
+            }
+
+            if (cmd.x1 !== undefined) {
+                redCircles.push({x: cmd.x1, y: -cmd.y1});
+            }
+
+            if (cmd.x2 !== undefined) {
+                redCircles.push({x: cmd.x2, y: -cmd.y2});
+            }
+        }
+
+        ctx.fillStyle = 'blue';
+        drawCircles(blueCircles, x, y, scale);
+        ctx.fillStyle = 'red';
+        drawCircles(redCircles, x, y, scale);
+    };
+
+    /**
+     * Draw lines indicating important font measurements.
+     * Black lines indicate the origin of the coordinate system (point 0,0).
+     * Blue lines indicate the glyph bounding box.
+     * Green line indicates the advance width of the glyph.
+     * @param  {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+     * @param  {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     */
+    Glyph.prototype.drawMetrics = function(ctx, x, y, fontSize) {
+        var scale;
+        x = x !== undefined ? x : 0;
+        y = y !== undefined ? y : 0;
+        fontSize = fontSize !== undefined ? fontSize : 24;
+        scale = 1 / this.path.unitsPerEm * fontSize;
+        ctx.lineWidth = 1;
+
+        // Draw the origin
+        ctx.strokeStyle = 'black';
+        draw.line(ctx, x, -10000, x, 10000);
+        draw.line(ctx, -10000, y, 10000, y);
+
+        // This code is here due to memory optimization: by not using
+        // defaults in the constructor, we save a notable amount of memory.
+        var xMin = this.xMin || 0;
+        var yMin = this.yMin || 0;
+        var xMax = this.xMax || 0;
+        var yMax = this.yMax || 0;
+        var advanceWidth = this.advanceWidth || 0;
+
+        // Draw the glyph box
+        ctx.strokeStyle = 'blue';
+        draw.line(ctx, x + (xMin * scale), -10000, x + (xMin * scale), 10000);
+        draw.line(ctx, x + (xMax * scale), -10000, x + (xMax * scale), 10000);
+        draw.line(ctx, -10000, y + (-yMin * scale), 10000, y + (-yMin * scale));
+        draw.line(ctx, -10000, y + (-yMax * scale), 10000, y + (-yMax * scale));
+
+        // Draw the advance width
+        ctx.strokeStyle = 'green';
+        draw.line(ctx, x + (advanceWidth * scale), -10000, x + (advanceWidth * scale), 10000);
+    };
+
+    // The GlyphSet object
+
+    // Define a property on the glyph that depends on the path being loaded.
+    function defineDependentProperty(glyph, externalName, internalName) {
+        Object.defineProperty(glyph, externalName, {
+            get: function() {
+                // Request the path property to make sure the path is loaded.
+                glyph.path; // jshint ignore:line
+                return glyph[internalName];
+            },
+            set: function(newValue) {
+                glyph[internalName] = newValue;
+            },
+            enumerable: true,
+            configurable: true
+        });
+    }
+
+    /**
+     * A GlyphSet represents all glyphs available in the font, but modelled using
+     * a deferred glyph loader, for retrieving glyphs only once they are absolutely
+     * necessary, to keep the memory footprint down.
+     * @exports opentype.GlyphSet
+     * @class
+     * @param {opentype.Font}
+     * @param {Array}
+     */
+    function GlyphSet(font, glyphs) {
+        var this$1 = this;
+
+        this.font = font;
+        this.glyphs = {};
+        if (Array.isArray(glyphs)) {
+            for (var i = 0; i < glyphs.length; i++) {
+                this$1.glyphs[i] = glyphs[i];
+            }
+        }
+
+        this.length = (glyphs && glyphs.length) || 0;
+    }
+
+    /**
+     * @param  {number} index
+     * @return {opentype.Glyph}
+     */
+    GlyphSet.prototype.get = function(index) {
+        if (typeof this.glyphs[index] === 'function') {
+            this.glyphs[index] = this.glyphs[index]();
+        }
+
+        return this.glyphs[index];
+    };
+
+    /**
+     * @param  {number} index
+     * @param  {Object}
+     */
+    GlyphSet.prototype.push = function(index, loader) {
+        this.glyphs[index] = loader;
+        this.length++;
+    };
+
+    /**
+     * @alias opentype.glyphLoader
+     * @param  {opentype.Font} font
+     * @param  {number} index
+     * @return {opentype.Glyph}
+     */
+    function glyphLoader(font, index) {
+        return new Glyph({index: index, font: font});
+    }
+
+    /**
+     * Generate a stub glyph that can be filled with all metadata *except*
+     * the "points" and "path" properties, which must be loaded only once
+     * the glyph's path is actually requested for text shaping.
+     * @alias opentype.ttfGlyphLoader
+     * @param  {opentype.Font} font
+     * @param  {number} index
+     * @param  {Function} parseGlyph
+     * @param  {Object} data
+     * @param  {number} position
+     * @param  {Function} buildPath
+     * @return {opentype.Glyph}
+     */
+    function ttfGlyphLoader(font, index, parseGlyph, data, position, buildPath) {
+        return function() {
+            var glyph = new Glyph({index: index, font: font});
+
+            glyph.path = function() {
+                parseGlyph(glyph, data, position);
+                var path = buildPath(font.glyphs, glyph);
+                path.unitsPerEm = font.unitsPerEm;
+                return path;
+            };
+
+            defineDependentProperty(glyph, 'xMin', '_xMin');
+            defineDependentProperty(glyph, 'xMax', '_xMax');
+            defineDependentProperty(glyph, 'yMin', '_yMin');
+            defineDependentProperty(glyph, 'yMax', '_yMax');
+
+            return glyph;
+        };
+    }
+    /**
+     * @alias opentype.cffGlyphLoader
+     * @param  {opentype.Font} font
+     * @param  {number} index
+     * @param  {Function} parseCFFCharstring
+     * @param  {string} charstring
+     * @return {opentype.Glyph}
+     */
+    function cffGlyphLoader(font, index, parseCFFCharstring, charstring) {
+        return function() {
+            var glyph = new Glyph({index: index, font: font});
+
+            glyph.path = function() {
+                var path = parseCFFCharstring(font, glyph, charstring);
+                path.unitsPerEm = font.unitsPerEm;
+                return path;
+            };
+
+            return glyph;
+        };
+    }
+
+    var glyphset = { GlyphSet: GlyphSet, glyphLoader: glyphLoader, ttfGlyphLoader: ttfGlyphLoader, cffGlyphLoader: cffGlyphLoader };
+
+    // The `CFF` table contains the glyph outlines in PostScript format.
+    // https://www.microsoft.com/typography/OTSPEC/cff.htm
+    // http://download.microsoft.com/download/8/0/1/801a191c-029d-4af3-9642-555f6fe514ee/cff.pdf
+    // http://download.microsoft.com/download/8/0/1/801a191c-029d-4af3-9642-555f6fe514ee/type2.pdf
+
+    // Custom equals function that can also check lists.
+    function equals(a, b) {
+        if (a === b) {
+            return true;
+        } else if (Array.isArray(a) && Array.isArray(b)) {
+            if (a.length !== b.length) {
+                return false;
+            }
+
+            for (var i = 0; i < a.length; i += 1) {
+                if (!equals(a[i], b[i])) {
+                    return false;
+                }
+            }
+
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    // Subroutines are encoded using the negative half of the number space.
+    // See type 2 chapter 4.7 "Subroutine operators".
+    function calcCFFSubroutineBias(subrs) {
+        var bias;
+        if (subrs.length < 1240) {
+            bias = 107;
+        } else if (subrs.length < 33900) {
+            bias = 1131;
+        } else {
+            bias = 32768;
+        }
+
+        return bias;
+    }
+
+    // Parse a `CFF` INDEX array.
+    // An index array consists of a list of offsets, then a list of objects at those offsets.
+    function parseCFFIndex(data, start, conversionFn) {
+        var offsets = [];
+        var objects = [];
+        var count = parse.getCard16(data, start);
+        var objectOffset;
+        var endOffset;
+        if (count !== 0) {
+            var offsetSize = parse.getByte(data, start + 2);
+            objectOffset = start + ((count + 1) * offsetSize) + 2;
+            var pos = start + 3;
+            for (var i = 0; i < count + 1; i += 1) {
+                offsets.push(parse.getOffset(data, pos, offsetSize));
+                pos += offsetSize;
+            }
+
+            // The total size of the index array is 4 header bytes + the value of the last offset.
+            endOffset = objectOffset + offsets[count];
+        } else {
+            endOffset = start + 2;
+        }
+
+        for (var i$1 = 0; i$1 < offsets.length - 1; i$1 += 1) {
+            var value = parse.getBytes(data, objectOffset + offsets[i$1], objectOffset + offsets[i$1 + 1]);
+            if (conversionFn) {
+                value = conversionFn(value);
+            }
+
+            objects.push(value);
+        }
+
+        return {objects: objects, startOffset: start, endOffset: endOffset};
+    }
+
+    // Parse a `CFF` DICT real value.
+    function parseFloatOperand(parser) {
+        var s = '';
+        var eof = 15;
+        var lookup = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', 'E', 'E-', null, '-'];
+        while (true) {
+            var b = parser.parseByte();
+            var n1 = b >> 4;
+            var n2 = b & 15;
+
+            if (n1 === eof) {
+                break;
+            }
+
+            s += lookup[n1];
+
+            if (n2 === eof) {
+                break;
+            }
+
+            s += lookup[n2];
+        }
+
+        return parseFloat(s);
+    }
+
+    // Parse a `CFF` DICT operand.
+    function parseOperand(parser, b0) {
+        var b1;
+        var b2;
+        var b3;
+        var b4;
+        if (b0 === 28) {
+            b1 = parser.parseByte();
+            b2 = parser.parseByte();
+            return b1 << 8 | b2;
+        }
+
+        if (b0 === 29) {
+            b1 = parser.parseByte();
+            b2 = parser.parseByte();
+            b3 = parser.parseByte();
+            b4 = parser.parseByte();
+            return b1 << 24 | b2 << 16 | b3 << 8 | b4;
+        }
+
+        if (b0 === 30) {
+            return parseFloatOperand(parser);
+        }
+
+        if (b0 >= 32 && b0 <= 246) {
+            return b0 - 139;
+        }
+
+        if (b0 >= 247 && b0 <= 250) {
+            b1 = parser.parseByte();
+            return (b0 - 247) * 256 + b1 + 108;
+        }
+
+        if (b0 >= 251 && b0 <= 254) {
+            b1 = parser.parseByte();
+            return -(b0 - 251) * 256 - b1 - 108;
+        }
+
+        throw new Error('Invalid b0 ' + b0);
+    }
+
+    // Convert the entries returned by `parseDict` to a proper dictionary.
+    // If a value is a list of one, it is unpacked.
+    function entriesToObject(entries) {
+        var o = {};
+        for (var i = 0; i < entries.length; i += 1) {
+            var key = entries[i][0];
+            var values = entries[i][1];
+            var value = (void 0);
+            if (values.length === 1) {
+                value = values[0];
+            } else {
+                value = values;
+            }
+
+            if (o.hasOwnProperty(key) && !isNaN(o[key])) {
+                throw new Error('Object ' + o + ' already has key ' + key);
+            }
+
+            o[key] = value;
+        }
+
+        return o;
+    }
+
+    // Parse a `CFF` DICT object.
+    // A dictionary contains key-value pairs in a compact tokenized format.
+    function parseCFFDict(data, start, size) {
+        start = start !== undefined ? start : 0;
+        var parser = new parse.Parser(data, start);
+        var entries = [];
+        var operands = [];
+        size = size !== undefined ? size : data.length;
+
+        while (parser.relativeOffset < size) {
+            var op = parser.parseByte();
+
+            // The first byte for each dict item distinguishes between operator (key) and operand (value).
+            // Values <= 21 are operators.
+            if (op <= 21) {
+                // Two-byte operators have an initial escape byte of 12.
+                if (op === 12) {
+                    op = 1200 + parser.parseByte();
+                }
+
+                entries.push([op, operands]);
+                operands = [];
+            } else {
+                // Since the operands (values) come before the operators (keys), we store all operands in a list
+                // until we encounter an operator.
+                operands.push(parseOperand(parser, op));
+            }
+        }
+
+        return entriesToObject(entries);
+    }
+
+    // Given a String Index (SID), return the value of the string.
+    // Strings below index 392 are standard CFF strings and are not encoded in the font.
+    function getCFFString(strings, index) {
+        if (index <= 390) {
+            index = cffStandardStrings[index];
+        } else {
+            index = strings[index - 391];
+        }
+
+        return index;
+    }
+
+    // Interpret a dictionary and return a new dictionary with readable keys and values for missing entries.
+    // This function takes `meta` which is a list of objects containing `operand`, `name` and `default`.
+    function interpretDict(dict, meta, strings) {
+        var newDict = {};
+        var value;
+
+        // Because we also want to include missing values, we start out from the meta list
+        // and lookup values in the dict.
+        for (var i = 0; i < meta.length; i += 1) {
+            var m = meta[i];
+
+            if (Array.isArray(m.type)) {
+                var values = [];
+                values.length = m.type.length;
+                for (var j = 0; j < m.type.length; j++) {
+                    value = dict[m.op] !== undefined ? dict[m.op][j] : undefined;
+                    if (value === undefined) {
+                        value = m.value !== undefined && m.value[j] !== undefined ? m.value[j] : null;
+                    }
+                    if (m.type[j] === 'SID') {
+                        value = getCFFString(strings, value);
+                    }
+                    values[j] = value;
+                }
+                newDict[m.name] = values;
+            } else {
+                value = dict[m.op];
+                if (value === undefined) {
+                    value = m.value !== undefined ? m.value : null;
+                }
+
+                if (m.type === 'SID') {
+                    value = getCFFString(strings, value);
+                }
+                newDict[m.name] = value;
+            }
+        }
+
+        return newDict;
+    }
+
+    // Parse the CFF header.
+    function parseCFFHeader(data, start) {
+        var header = {};
+        header.formatMajor = parse.getCard8(data, start);
+        header.formatMinor = parse.getCard8(data, start + 1);
+        header.size = parse.getCard8(data, start + 2);
+        header.offsetSize = parse.getCard8(data, start + 3);
+        header.startOffset = start;
+        header.endOffset = start + 4;
+        return header;
+    }
+
+    var TOP_DICT_META = [
+        {name: 'version', op: 0, type: 'SID'},
+        {name: 'notice', op: 1, type: 'SID'},
+        {name: 'copyright', op: 1200, type: 'SID'},
+        {name: 'fullName', op: 2, type: 'SID'},
+        {name: 'familyName', op: 3, type: 'SID'},
+        {name: 'weight', op: 4, type: 'SID'},
+        {name: 'isFixedPitch', op: 1201, type: 'number', value: 0},
+        {name: 'italicAngle', op: 1202, type: 'number', value: 0},
+        {name: 'underlinePosition', op: 1203, type: 'number', value: -100},
+        {name: 'underlineThickness', op: 1204, type: 'number', value: 50},
+        {name: 'paintType', op: 1205, type: 'number', value: 0},
+        {name: 'charstringType', op: 1206, type: 'number', value: 2},
+        {
+            name: 'fontMatrix',
+            op: 1207,
+            type: ['real', 'real', 'real', 'real', 'real', 'real'],
+            value: [0.001, 0, 0, 0.001, 0, 0]
+        },
+        {name: 'uniqueId', op: 13, type: 'number'},
+        {name: 'fontBBox', op: 5, type: ['number', 'number', 'number', 'number'], value: [0, 0, 0, 0]},
+        {name: 'strokeWidth', op: 1208, type: 'number', value: 0},
+        {name: 'xuid', op: 14, type: [], value: null},
+        {name: 'charset', op: 15, type: 'offset', value: 0},
+        {name: 'encoding', op: 16, type: 'offset', value: 0},
+        {name: 'charStrings', op: 17, type: 'offset', value: 0},
+        {name: 'private', op: 18, type: ['number', 'offset'], value: [0, 0]},
+        {name: 'ros', op: 1230, type: ['SID', 'SID', 'number']},
+        {name: 'cidFontVersion', op: 1231, type: 'number', value: 0},
+        {name: 'cidFontRevision', op: 1232, type: 'number', value: 0},
+        {name: 'cidFontType', op: 1233, type: 'number', value: 0},
+        {name: 'cidCount', op: 1234, type: 'number', value: 8720},
+        {name: 'uidBase', op: 1235, type: 'number'},
+        {name: 'fdArray', op: 1236, type: 'offset'},
+        {name: 'fdSelect', op: 1237, type: 'offset'},
+        {name: 'fontName', op: 1238, type: 'SID'}
+    ];
+
+    var PRIVATE_DICT_META = [
+        {name: 'subrs', op: 19, type: 'offset', value: 0},
+        {name: 'defaultWidthX', op: 20, type: 'number', value: 0},
+        {name: 'nominalWidthX', op: 21, type: 'number', value: 0}
+    ];
+
+    // Parse the CFF top dictionary. A CFF table can contain multiple fonts, each with their own top dictionary.
+    // The top dictionary contains the essential metadata for the font, together with the private dictionary.
+    function parseCFFTopDict(data, strings) {
+        var dict = parseCFFDict(data, 0, data.byteLength);
+        return interpretDict(dict, TOP_DICT_META, strings);
+    }
+
+    // Parse the CFF private dictionary. We don't fully parse out all the values, only the ones we need.
+    function parseCFFPrivateDict(data, start, size, strings) {
+        var dict = parseCFFDict(data, start, size);
+        return interpretDict(dict, PRIVATE_DICT_META, strings);
+    }
+
+    // Returns a list of "Top DICT"s found using an INDEX list.
+    // Used to read both the usual high-level Top DICTs and also the FDArray
+    // discovered inside CID-keyed fonts.  When a Top DICT has a reference to
+    // a Private DICT that is read and saved into the Top DICT.
+    //
+    // In addition to the expected/optional values as outlined in TOP_DICT_META
+    // the following values might be saved into the Top DICT.
+    //
+    //    _subrs []        array of local CFF subroutines from Private DICT
+    //    _subrsBias       bias value computed from number of subroutines
+    //                      (see calcCFFSubroutineBias() and parseCFFCharstring())
+    //    _defaultWidthX   default widths for CFF characters
+    //    _nominalWidthX   bias added to width embedded within glyph description
+    //
+    //    _privateDict     saved copy of parsed Private DICT from Top DICT
+    function gatherCFFTopDicts(data, start, cffIndex, strings) {
+        var topDictArray = [];
+        for (var iTopDict = 0; iTopDict < cffIndex.length; iTopDict += 1) {
+            var topDictData = new DataView(new Uint8Array(cffIndex[iTopDict]).buffer);
+            var topDict = parseCFFTopDict(topDictData, strings);
+            topDict._subrs = [];
+            topDict._subrsBias = 0;
+            var privateSize = topDict.private[0];
+            var privateOffset = topDict.private[1];
+            if (privateSize !== 0 && privateOffset !== 0) {
+                var privateDict = parseCFFPrivateDict(data, privateOffset + start, privateSize, strings);
+                topDict._defaultWidthX = privateDict.defaultWidthX;
+                topDict._nominalWidthX = privateDict.nominalWidthX;
+                if (privateDict.subrs !== 0) {
+                    var subrOffset = privateOffset + privateDict.subrs;
+                    var subrIndex = parseCFFIndex(data, subrOffset + start);
+                    topDict._subrs = subrIndex.objects;
+                    topDict._subrsBias = calcCFFSubroutineBias(topDict._subrs);
+                }
+                topDict._privateDict = privateDict;
+            }
+            topDictArray.push(topDict);
+        }
+        return topDictArray;
+    }
+
+    // Parse the CFF charset table, which contains internal names for all the glyphs.
+    // This function will return a list of glyph names.
+    // See Adobe TN #5176 chapter 13, "Charsets".
+    function parseCFFCharset(data, start, nGlyphs, strings) {
+        var sid;
+        var count;
+        var parser = new parse.Parser(data, start);
+
+        // The .notdef glyph is not included, so subtract 1.
+        nGlyphs -= 1;
+        var charset = ['.notdef'];
+
+        var format = parser.parseCard8();
+        if (format === 0) {
+            for (var i = 0; i < nGlyphs; i += 1) {
+                sid = parser.parseSID();
+                charset.push(getCFFString(strings, sid));
+            }
+        } else if (format === 1) {
+            while (charset.length <= nGlyphs) {
+                sid = parser.parseSID();
+                count = parser.parseCard8();
+                for (var i$1 = 0; i$1 <= count; i$1 += 1) {
+                    charset.push(getCFFString(strings, sid));
+                    sid += 1;
+                }
+            }
+        } else if (format === 2) {
+            while (charset.length <= nGlyphs) {
+                sid = parser.parseSID();
+                count = parser.parseCard16();
+                for (var i$2 = 0; i$2 <= count; i$2 += 1) {
+                    charset.push(getCFFString(strings, sid));
+                    sid += 1;
+                }
+            }
+        } else {
+            throw new Error('Unknown charset format ' + format);
+        }
+
+        return charset;
+    }
+
+    // Parse the CFF encoding data. Only one encoding can be specified per font.
+    // See Adobe TN #5176 chapter 12, "Encodings".
+    function parseCFFEncoding(data, start, charset) {
+        var code;
+        var enc = {};
+        var parser = new parse.Parser(data, start);
+        var format = parser.parseCard8();
+        if (format === 0) {
+            var nCodes = parser.parseCard8();
+            for (var i = 0; i < nCodes; i += 1) {
+                code = parser.parseCard8();
+                enc[code] = i;
+            }
+        } else if (format === 1) {
+            var nRanges = parser.parseCard8();
+            code = 1;
+            for (var i$1 = 0; i$1 < nRanges; i$1 += 1) {
+                var first = parser.parseCard8();
+                var nLeft = parser.parseCard8();
+                for (var j = first; j <= first + nLeft; j += 1) {
+                    enc[j] = code;
+                    code += 1;
+                }
+            }
+        } else {
+            throw new Error('Unknown encoding format ' + format);
+        }
+
+        return new CffEncoding(enc, charset);
+    }
+
+    // Take in charstring code and return a Glyph object.
+    // The encoding is described in the Type 2 Charstring Format
+    // https://www.microsoft.com/typography/OTSPEC/charstr2.htm
+    function parseCFFCharstring(font, glyph, code) {
+        var c1x;
+        var c1y;
+        var c2x;
+        var c2y;
+        var p = new Path();
+        var stack = [];
+        var nStems = 0;
+        var haveWidth = false;
+        var open = false;
+        var x = 0;
+        var y = 0;
+        var subrs;
+        var subrsBias;
+        var defaultWidthX;
+        var nominalWidthX;
+        if (font.isCIDFont) {
+            var fdIndex = font.tables.cff.topDict._fdSelect[glyph.index];
+            var fdDict = font.tables.cff.topDict._fdArray[fdIndex];
+            subrs = fdDict._subrs;
+            subrsBias = fdDict._subrsBias;
+            defaultWidthX = fdDict._defaultWidthX;
+            nominalWidthX = fdDict._nominalWidthX;
+        } else {
+            subrs = font.tables.cff.topDict._subrs;
+            subrsBias = font.tables.cff.topDict._subrsBias;
+            defaultWidthX = font.tables.cff.topDict._defaultWidthX;
+            nominalWidthX = font.tables.cff.topDict._nominalWidthX;
+        }
+        var width = defaultWidthX;
+
+        function newContour(x, y) {
+            if (open) {
+                p.closePath();
+            }
+
+            p.moveTo(x, y);
+            open = true;
+        }
+
+        function parseStems() {
+            var hasWidthArg;
+
+            // The number of stem operators on the stack is always even.
+            // If the value is uneven, that means a width is specified.
+            hasWidthArg = stack.length % 2 !== 0;
+            if (hasWidthArg && !haveWidth) {
+                width = stack.shift() + nominalWidthX;
+            }
+
+            nStems += stack.length >> 1;
+            stack.length = 0;
+            haveWidth = true;
+        }
+
+        function parse$$1(code) {
+            var b1;
+            var b2;
+            var b3;
+            var b4;
+            var codeIndex;
+            var subrCode;
+            var jpx;
+            var jpy;
+            var c3x;
+            var c3y;
+            var c4x;
+            var c4y;
+
+            var i = 0;
+            while (i < code.length) {
+                var v = code[i];
+                i += 1;
+                switch (v) {
+                    case 1: // hstem
+                        parseStems();
+                        break;
+                    case 3: // vstem
+                        parseStems();
+                        break;
+                    case 4: // vmoveto
+                        if (stack.length > 1 && !haveWidth) {
+                            width = stack.shift() + nominalWidthX;
+                            haveWidth = true;
+                        }
+
+                        y += stack.pop();
+                        newContour(x, y);
+                        break;
+                    case 5: // rlineto
+                        while (stack.length > 0) {
+                            x += stack.shift();
+                            y += stack.shift();
+                            p.lineTo(x, y);
+                        }
+
+                        break;
+                    case 6: // hlineto
+                        while (stack.length > 0) {
+                            x += stack.shift();
+                            p.lineTo(x, y);
+                            if (stack.length === 0) {
+                                break;
+                            }
+
+                            y += stack.shift();
+                            p.lineTo(x, y);
+                        }
+
+                        break;
+                    case 7: // vlineto
+                        while (stack.length > 0) {
+                            y += stack.shift();
+                            p.lineTo(x, y);
+                            if (stack.length === 0) {
+                                break;
+                            }
+
+                            x += stack.shift();
+                            p.lineTo(x, y);
+                        }
+
+                        break;
+                    case 8: // rrcurveto
+                        while (stack.length > 0) {
+                            c1x = x + stack.shift();
+                            c1y = y + stack.shift();
+                            c2x = c1x + stack.shift();
+                            c2y = c1y + stack.shift();
+                            x = c2x + stack.shift();
+                            y = c2y + stack.shift();
+                            p.curveTo(c1x, c1y, c2x, c2y, x, y);
+                        }
+
+                        break;
+                    case 10: // callsubr
+                        codeIndex = stack.pop() + subrsBias;
+                        subrCode = subrs[codeIndex];
+                        if (subrCode) {
+                            parse$$1(subrCode);
+                        }
+
+                        break;
+                    case 11: // return
+                        return;
+                    case 12: // flex operators
+                        v = code[i];
+                        i += 1;
+                        switch (v) {
+                            case 35: // flex
+                                // |- dx1 dy1 dx2 dy2 dx3 dy3 dx4 dy4 dx5 dy5 dx6 dy6 fd flex (12 35) |-
+                                c1x = x   + stack.shift();    // dx1
+                                c1y = y   + stack.shift();    // dy1
+                                c2x = c1x + stack.shift();    // dx2
+                                c2y = c1y + stack.shift();    // dy2
+                                jpx = c2x + stack.shift();    // dx3
+                                jpy = c2y + stack.shift();    // dy3
+                                c3x = jpx + stack.shift();    // dx4
+                                c3y = jpy + stack.shift();    // dy4
+                                c4x = c3x + stack.shift();    // dx5
+                                c4y = c3y + stack.shift();    // dy5
+                                x = c4x   + stack.shift();    // dx6
+                                y = c4y   + stack.shift();    // dy6
+                                stack.shift();                // flex depth
+                                p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
+                                p.curveTo(c3x, c3y, c4x, c4y, x, y);
+                                break;
+                            case 34: // hflex
+                                // |- dx1 dx2 dy2 dx3 dx4 dx5 dx6 hflex (12 34) |-
+                                c1x = x   + stack.shift();    // dx1
+                                c1y = y;                      // dy1
+                                c2x = c1x + stack.shift();    // dx2
+                                c2y = c1y + stack.shift();    // dy2
+                                jpx = c2x + stack.shift();    // dx3
+                                jpy = c2y;                    // dy3
+                                c3x = jpx + stack.shift();    // dx4
+                                c3y = c2y;                    // dy4
+                                c4x = c3x + stack.shift();    // dx5
+                                c4y = y;                      // dy5
+                                x = c4x + stack.shift();      // dx6
+                                p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
+                                p.curveTo(c3x, c3y, c4x, c4y, x, y);
+                                break;
+                            case 36: // hflex1
+                                // |- dx1 dy1 dx2 dy2 dx3 dx4 dx5 dy5 dx6 hflex1 (12 36) |-
+                                c1x = x   + stack.shift();    // dx1
+                                c1y = y   + stack.shift();    // dy1
+                                c2x = c1x + stack.shift();    // dx2
+                                c2y = c1y + stack.shift();    // dy2
+                                jpx = c2x + stack.shift();    // dx3
+                                jpy = c2y;                    // dy3
+                                c3x = jpx + stack.shift();    // dx4
+                                c3y = c2y;                    // dy4
+                                c4x = c3x + stack.shift();    // dx5
+                                c4y = c3y + stack.shift();    // dy5
+                                x = c4x + stack.shift();      // dx6
+                                p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
+                                p.curveTo(c3x, c3y, c4x, c4y, x, y);
+                                break;
+                            case 37: // flex1
+                                // |- dx1 dy1 dx2 dy2 dx3 dy3 dx4 dy4 dx5 dy5 d6 flex1 (12 37) |-
+                                c1x = x   + stack.shift();    // dx1
+                                c1y = y   + stack.shift();    // dy1
+                                c2x = c1x + stack.shift();    // dx2
+                                c2y = c1y + stack.shift();    // dy2
+                                jpx = c2x + stack.shift();    // dx3
+                                jpy = c2y + stack.shift();    // dy3
+                                c3x = jpx + stack.shift();    // dx4
+                                c3y = jpy + stack.shift();    // dy4
+                                c4x = c3x + stack.shift();    // dx5
+                                c4y = c3y + stack.shift();    // dy5
+                                if (Math.abs(c4x - x) > Math.abs(c4y - y)) {
+                                    x = c4x + stack.shift();
+                                } else {
+                                    y = c4y + stack.shift();
+                                }
+
+                                p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
+                                p.curveTo(c3x, c3y, c4x, c4y, x, y);
+                                break;
+                            default:
+                                console.log('Glyph ' + glyph.index + ': unknown operator ' + 1200 + v);
+                                stack.length = 0;
+                        }
+                        break;
+                    case 14: // endchar
+                        if (stack.length > 0 && !haveWidth) {
+                            width = stack.shift() + nominalWidthX;
+                            haveWidth = true;
+                        }
+
+                        if (open) {
+                            p.closePath();
+                            open = false;
+                        }
+
+                        break;
+                    case 18: // hstemhm
+                        parseStems();
+                        break;
+                    case 19: // hintmask
+                    case 20: // cntrmask
+                        parseStems();
+                        i += (nStems + 7) >> 3;
+                        break;
+                    case 21: // rmoveto
+                        if (stack.length > 2 && !haveWidth) {
+                            width = stack.shift() + nominalWidthX;
+                            haveWidth = true;
+                        }
+
+                        y += stack.pop();
+                        x += stack.pop();
+                        newContour(x, y);
+                        break;
+                    case 22: // hmoveto
+                        if (stack.length > 1 && !haveWidth) {
+                            width = stack.shift() + nominalWidthX;
+                            haveWidth = true;
+                        }
+
+                        x += stack.pop();
+                        newContour(x, y);
+                        break;
+                    case 23: // vstemhm
+                        parseStems();
+                        break;
+                    case 24: // rcurveline
+                        while (stack.length > 2) {
+                            c1x = x + stack.shift();
+                            c1y = y + stack.shift();
+                            c2x = c1x + stack.shift();
+                            c2y = c1y + stack.shift();
+                            x = c2x + stack.shift();
+                            y = c2y + stack.shift();
+                            p.curveTo(c1x, c1y, c2x, c2y, x, y);
+                        }
+
+                        x += stack.shift();
+                        y += stack.shift();
+                        p.lineTo(x, y);
+                        break;
+                    case 25: // rlinecurve
+                        while (stack.length > 6) {
+                            x += stack.shift();
+                            y += stack.shift();
+                            p.lineTo(x, y);
+                        }
+
+                        c1x = x + stack.shift();
+                        c1y = y + stack.shift();
+                        c2x = c1x + stack.shift();
+                        c2y = c1y + stack.shift();
+                        x = c2x + stack.shift();
+                        y = c2y + stack.shift();
+                        p.curveTo(c1x, c1y, c2x, c2y, x, y);
+                        break;
+                    case 26: // vvcurveto
+                        if (stack.length % 2) {
+                            x += stack.shift();
+                        }
+
+                        while (stack.length > 0) {
+                            c1x = x;
+                            c1y = y + stack.shift();
+                            c2x = c1x + stack.shift();
+                            c2y = c1y + stack.shift();
+                            x = c2x;
+                            y = c2y + stack.shift();
+                            p.curveTo(c1x, c1y, c2x, c2y, x, y);
+                        }
+
+                        break;
+                    case 27: // hhcurveto
+                        if (stack.length % 2) {
+                            y += stack.shift();
+                        }
+
+                        while (stack.length > 0) {
+                            c1x = x + stack.shift();
+                            c1y = y;
+                            c2x = c1x + stack.shift();
+                            c2y = c1y + stack.shift();
+                            x = c2x + stack.shift();
+                            y = c2y;
+                            p.curveTo(c1x, c1y, c2x, c2y, x, y);
+                        }
+
+                        break;
+                    case 28: // shortint
+                        b1 = code[i];
+                        b2 = code[i + 1];
+                        stack.push(((b1 << 24) | (b2 << 16)) >> 16);
+                        i += 2;
+                        break;
+                    case 29: // callgsubr
+                        codeIndex = stack.pop() + font.gsubrsBias;
+                        subrCode = font.gsubrs[codeIndex];
+                        if (subrCode) {
+                            parse$$1(subrCode);
+                        }
+
+                        break;
+                    case 30: // vhcurveto
+                        while (stack.length > 0) {
+                            c1x = x;
+                            c1y = y + stack.shift();
+                            c2x = c1x + stack.shift();
+                            c2y = c1y + stack.shift();
+                            x = c2x + stack.shift();
+                            y = c2y + (stack.length === 1 ? stack.shift() : 0);
+                            p.curveTo(c1x, c1y, c2x, c2y, x, y);
+                            if (stack.length === 0) {
+                                break;
+                            }
+
+                            c1x = x + stack.shift();
+                            c1y = y;
+                            c2x = c1x + stack.shift();
+                            c2y = c1y + stack.shift();
+                            y = c2y + stack.shift();
+                            x = c2x + (stack.length === 1 ? stack.shift() : 0);
+                            p.curveTo(c1x, c1y, c2x, c2y, x, y);
+                        }
+
+                        break;
+                    case 31: // hvcurveto
+                        while (stack.length > 0) {
+                            c1x = x + stack.shift();
+                            c1y = y;
+                            c2x = c1x + stack.shift();
+                            c2y = c1y + stack.shift();
+                            y = c2y + stack.shift();
+                            x = c2x + (stack.length === 1 ? stack.shift() : 0);
+                            p.curveTo(c1x, c1y, c2x, c2y, x, y);
+                            if (stack.length === 0) {
+                                break;
+                            }
+
+                            c1x = x;
+                            c1y = y + stack.shift();
+                            c2x = c1x + stack.shift();
+                            c2y = c1y + stack.shift();
+                            x = c2x + stack.shift();
+                            y = c2y + (stack.length === 1 ? stack.shift() : 0);
+                            p.curveTo(c1x, c1y, c2x, c2y, x, y);
+                        }
+
+                        break;
+                    default:
+                        if (v < 32) {
+                            console.log('Glyph ' + glyph.index + ': unknown operator ' + v);
+                        } else if (v < 247) {
+                            stack.push(v - 139);
+                        } else if (v < 251) {
+                            b1 = code[i];
+                            i += 1;
+                            stack.push((v - 247) * 256 + b1 + 108);
+                        } else if (v < 255) {
+                            b1 = code[i];
+                            i += 1;
+                            stack.push(-(v - 251) * 256 - b1 - 108);
+                        } else {
+                            b1 = code[i];
+                            b2 = code[i + 1];
+                            b3 = code[i + 2];
+                            b4 = code[i + 3];
+                            i += 4;
+                            stack.push(((b1 << 24) | (b2 << 16) | (b3 << 8) | b4) / 65536);
+                        }
+                }
+            }
+        }
+
+        parse$$1(code);
+
+        glyph.advanceWidth = width;
+        return p;
+    }
+
+    function parseCFFFDSelect(data, start, nGlyphs, fdArrayCount) {
+        var fdSelect = [];
+        var fdIndex;
+        var parser = new parse.Parser(data, start);
+        var format = parser.parseCard8();
+        if (format === 0) {
+            // Simple list of nGlyphs elements
+            for (var iGid = 0; iGid < nGlyphs; iGid++) {
+                fdIndex = parser.parseCard8();
+                if (fdIndex >= fdArrayCount) {
+                    throw new Error('CFF table CID Font FDSelect has bad FD index value ' + fdIndex + ' (FD count ' + fdArrayCount + ')');
+                }
+                fdSelect.push(fdIndex);
+            }
+        } else if (format === 3) {
+            // Ranges
+            var nRanges = parser.parseCard16();
+            var first = parser.parseCard16();
+            if (first !== 0) {
+                throw new Error('CFF Table CID Font FDSelect format 3 range has bad initial GID ' + first);
+            }
+            var next;
+            for (var iRange = 0; iRange < nRanges; iRange++) {
+                fdIndex = parser.parseCard8();
+                next = parser.parseCard16();
+                if (fdIndex >= fdArrayCount) {
+                    throw new Error('CFF table CID Font FDSelect has bad FD index value ' + fdIndex + ' (FD count ' + fdArrayCount + ')');
+                }
+                if (next > nGlyphs) {
+                    throw new Error('CFF Table CID Font FDSelect format 3 range has bad GID ' + next);
+                }
+                for (; first < next; first++) {
+                    fdSelect.push(fdIndex);
+                }
+                first = next;
+            }
+            if (next !== nGlyphs) {
+                throw new Error('CFF Table CID Font FDSelect format 3 range has bad final GID ' + next);
+            }
+        } else {
+            throw new Error('CFF Table CID Font FDSelect table has unsupported format ' + format);
+        }
+        return fdSelect;
+    }
+
+    // Parse the `CFF` table, which contains the glyph outlines in PostScript format.
+    function parseCFFTable(data, start, font) {
+        font.tables.cff = {};
+        var header = parseCFFHeader(data, start);
+        var nameIndex = parseCFFIndex(data, header.endOffset, parse.bytesToString);
+        var topDictIndex = parseCFFIndex(data, nameIndex.endOffset);
+        var stringIndex = parseCFFIndex(data, topDictIndex.endOffset, parse.bytesToString);
+        var globalSubrIndex = parseCFFIndex(data, stringIndex.endOffset);
+        font.gsubrs = globalSubrIndex.objects;
+        font.gsubrsBias = calcCFFSubroutineBias(font.gsubrs);
+
+        var topDictArray = gatherCFFTopDicts(data, start, topDictIndex.objects, stringIndex.objects);
+        if (topDictArray.length !== 1) {
+            throw new Error('CFF table has too many fonts in \'FontSet\' - count of fonts NameIndex.length = ' + topDictArray.length);
+        }
+
+        var topDict = topDictArray[0];
+        font.tables.cff.topDict = topDict;
+
+        if (topDict._privateDict) {
+            font.defaultWidthX = topDict._privateDict.defaultWidthX;
+            font.nominalWidthX = topDict._privateDict.nominalWidthX;
+        }
+
+        if (topDict.ros[0] !== undefined && topDict.ros[1] !== undefined) {
+            font.isCIDFont = true;
+        }
+
+        if (font.isCIDFont) {
+            var fdArrayOffset = topDict.fdArray;
+            var fdSelectOffset = topDict.fdSelect;
+            if (fdArrayOffset === 0 || fdSelectOffset === 0) {
+                throw new Error('Font is marked as a CID font, but FDArray and/or FDSelect information is missing');
+            }
+            fdArrayOffset += start;
+            var fdArrayIndex = parseCFFIndex(data, fdArrayOffset);
+            var fdArray = gatherCFFTopDicts(data, start, fdArrayIndex.objects, stringIndex.objects);
+            topDict._fdArray = fdArray;
+            fdSelectOffset += start;
+            topDict._fdSelect = parseCFFFDSelect(data, fdSelectOffset, font.numGlyphs, fdArray.length);
+        }
+
+        var privateDictOffset = start + topDict.private[1];
+        var privateDict = parseCFFPrivateDict(data, privateDictOffset, topDict.private[0], stringIndex.objects);
+        font.defaultWidthX = privateDict.defaultWidthX;
+        font.nominalWidthX = privateDict.nominalWidthX;
+
+        if (privateDict.subrs !== 0) {
+            var subrOffset = privateDictOffset + privateDict.subrs;
+            var subrIndex = parseCFFIndex(data, subrOffset);
+            font.subrs = subrIndex.objects;
+            font.subrsBias = calcCFFSubroutineBias(font.subrs);
+        } else {
+            font.subrs = [];
+            font.subrsBias = 0;
+        }
+
+        // Offsets in the top dict are relative to the beginning of the CFF data, so add the CFF start offset.
+        var charStringsIndex = parseCFFIndex(data, start + topDict.charStrings);
+        font.nGlyphs = charStringsIndex.objects.length;
+
+        var charset = parseCFFCharset(data, start + topDict.charset, font.nGlyphs, stringIndex.objects);
+        if (topDict.encoding === 0) { // Standard encoding
+            font.cffEncoding = new CffEncoding(cffStandardEncoding, charset);
+        } else if (topDict.encoding === 1) { // Expert encoding
+            font.cffEncoding = new CffEncoding(cffExpertEncoding, charset);
+        } else {
+            font.cffEncoding = parseCFFEncoding(data, start + topDict.encoding, charset);
+        }
+
+        // Prefer the CMAP encoding to the CFF encoding.
+        font.encoding = font.encoding || font.cffEncoding;
+
+        font.glyphs = new glyphset.GlyphSet(font);
+        for (var i = 0; i < font.nGlyphs; i += 1) {
+            var charString = charStringsIndex.objects[i];
+            font.glyphs.push(i, glyphset.cffGlyphLoader(font, i, parseCFFCharstring, charString));
+        }
+    }
+
+    // Convert a string to a String ID (SID).
+    // The list of strings is modified in place.
+    function encodeString(s, strings) {
+        var sid;
+
+        // Is the string in the CFF standard strings?
+        var i = cffStandardStrings.indexOf(s);
+        if (i >= 0) {
+            sid = i;
+        }
+
+        // Is the string already in the string index?
+        i = strings.indexOf(s);
+        if (i >= 0) {
+            sid = i + cffStandardStrings.length;
+        } else {
+            sid = cffStandardStrings.length + strings.length;
+            strings.push(s);
+        }
+
+        return sid;
+    }
+
+    function makeHeader() {
+        return new table.Record('Header', [
+            {name: 'major', type: 'Card8', value: 1},
+            {name: 'minor', type: 'Card8', value: 0},
+            {name: 'hdrSize', type: 'Card8', value: 4},
+            {name: 'major', type: 'Card8', value: 1}
+        ]);
+    }
+
+    function makeNameIndex(fontNames) {
+        var t = new table.Record('Name INDEX', [
+            {name: 'names', type: 'INDEX', value: []}
+        ]);
+        t.names = [];
+        for (var i = 0; i < fontNames.length; i += 1) {
+            t.names.push({name: 'name_' + i, type: 'NAME', value: fontNames[i]});
+        }
+
+        return t;
+    }
+
+    // Given a dictionary's metadata, create a DICT structure.
+    function makeDict(meta, attrs, strings) {
+        var m = {};
+        for (var i = 0; i < meta.length; i += 1) {
+            var entry = meta[i];
+            var value = attrs[entry.name];
+            if (value !== undefined && !equals(value, entry.value)) {
+                if (entry.type === 'SID') {
+                    value = encodeString(value, strings);
+                }
+
+                m[entry.op] = {name: entry.name, type: entry.type, value: value};
+            }
+        }
+
+        return m;
+    }
+
+    // The Top DICT houses the global font attributes.
+    function makeTopDict(attrs, strings) {
+        var t = new table.Record('Top DICT', [
+            {name: 'dict', type: 'DICT', value: {}}
+        ]);
+        t.dict = makeDict(TOP_DICT_META, attrs, strings);
+        return t;
+    }
+
+    function makeTopDictIndex(topDict) {
+        var t = new table.Record('Top DICT INDEX', [
+            {name: 'topDicts', type: 'INDEX', value: []}
+        ]);
+        t.topDicts = [{name: 'topDict_0', type: 'TABLE', value: topDict}];
+        return t;
+    }
+
+    function makeStringIndex(strings) {
+        var t = new table.Record('String INDEX', [
+            {name: 'strings', type: 'INDEX', value: []}
+        ]);
+        t.strings = [];
+        for (var i = 0; i < strings.length; i += 1) {
+            t.strings.push({name: 'string_' + i, type: 'STRING', value: strings[i]});
+        }
+
+        return t;
+    }
+
+    function makeGlobalSubrIndex() {
+        // Currently we don't use subroutines.
+        return new table.Record('Global Subr INDEX', [
+            {name: 'subrs', type: 'INDEX', value: []}
+        ]);
+    }
+
+    function makeCharsets(glyphNames, strings) {
+        var t = new table.Record('Charsets', [
+            {name: 'format', type: 'Card8', value: 0}
+        ]);
+        for (var i = 0; i < glyphNames.length; i += 1) {
+            var glyphName = glyphNames[i];
+            var glyphSID = encodeString(glyphName, strings);
+            t.fields.push({name: 'glyph_' + i, type: 'SID', value: glyphSID});
+        }
+
+        return t;
+    }
+
+    function glyphToOps(glyph) {
+        var ops = [];
+        var path = glyph.path;
+        ops.push({name: 'width', type: 'NUMBER', value: glyph.advanceWidth});
+        var x = 0;
+        var y = 0;
+        for (var i = 0; i < path.commands.length; i += 1) {
+            var dx = (void 0);
+            var dy = (void 0);
+            var cmd = path.commands[i];
+            if (cmd.type === 'Q') {
+                // CFF only supports bézier curves, so convert the quad to a bézier.
+                var _13 = 1 / 3;
+                var _23 = 2 / 3;
+
+                // We're going to create a new command so we don't change the original path.
+                cmd = {
+                    type: 'C',
+                    x: cmd.x,
+                    y: cmd.y,
+                    x1: _13 * x + _23 * cmd.x1,
+                    y1: _13 * y + _23 * cmd.y1,
+                    x2: _13 * cmd.x + _23 * cmd.x1,
+                    y2: _13 * cmd.y + _23 * cmd.y1
+                };
+            }
+
+            if (cmd.type === 'M') {
+                dx = Math.round(cmd.x - x);
+                dy = Math.round(cmd.y - y);
+                ops.push({name: 'dx', type: 'NUMBER', value: dx});
+                ops.push({name: 'dy', type: 'NUMBER', value: dy});
+                ops.push({name: 'rmoveto', type: 'OP', value: 21});
+                x = Math.round(cmd.x);
+                y = Math.round(cmd.y);
+            } else if (cmd.type === 'L') {
+                dx = Math.round(cmd.x - x);
+                dy = Math.round(cmd.y - y);
+                ops.push({name: 'dx', type: 'NUMBER', value: dx});
+                ops.push({name: 'dy', type: 'NUMBER', value: dy});
+                ops.push({name: 'rlineto', type: 'OP', value: 5});
+                x = Math.round(cmd.x);
+                y = Math.round(cmd.y);
+            } else if (cmd.type === 'C') {
+                var dx1 = Math.round(cmd.x1 - x);
+                var dy1 = Math.round(cmd.y1 - y);
+                var dx2 = Math.round(cmd.x2 - cmd.x1);
+                var dy2 = Math.round(cmd.y2 - cmd.y1);
+                dx = Math.round(cmd.x - cmd.x2);
+                dy = Math.round(cmd.y - cmd.y2);
+                ops.push({name: 'dx1', type: 'NUMBER', value: dx1});
+                ops.push({name: 'dy1', type: 'NUMBER', value: dy1});
+                ops.push({name: 'dx2', type: 'NUMBER', value: dx2});
+                ops.push({name: 'dy2', type: 'NUMBER', value: dy2});
+                ops.push({name: 'dx', type: 'NUMBER', value: dx});
+                ops.push({name: 'dy', type: 'NUMBER', value: dy});
+                ops.push({name: 'rrcurveto', type: 'OP', value: 8});
+                x = Math.round(cmd.x);
+                y = Math.round(cmd.y);
+            }
+
+            // Contours are closed automatically.
+        }
+
+        ops.push({name: 'endchar', type: 'OP', value: 14});
+        return ops;
+    }
+
+    function makeCharStringsIndex(glyphs) {
+        var t = new table.Record('CharStrings INDEX', [
+            {name: 'charStrings', type: 'INDEX', value: []}
+        ]);
+
+        for (var i = 0; i < glyphs.length; i += 1) {
+            var glyph = glyphs.get(i);
+            var ops = glyphToOps(glyph);
+            t.charStrings.push({name: glyph.name, type: 'CHARSTRING', value: ops});
+        }
+
+        return t;
+    }
+
+    function makePrivateDict(attrs, strings) {
+        var t = new table.Record('Private DICT', [
+            {name: 'dict', type: 'DICT', value: {}}
+        ]);
+        t.dict = makeDict(PRIVATE_DICT_META, attrs, strings);
+        return t;
+    }
+
+    function makeCFFTable(glyphs, options) {
+        var t = new table.Table('CFF ', [
+            {name: 'header', type: 'RECORD'},
+            {name: 'nameIndex', type: 'RECORD'},
+            {name: 'topDictIndex', type: 'RECORD'},
+            {name: 'stringIndex', type: 'RECORD'},
+            {name: 'globalSubrIndex', type: 'RECORD'},
+            {name: 'charsets', type: 'RECORD'},
+            {name: 'charStringsIndex', type: 'RECORD'},
+            {name: 'privateDict', type: 'RECORD'}
+        ]);
+
+        var fontScale = 1 / options.unitsPerEm;
+        // We use non-zero values for the offsets so that the DICT encodes them.
+        // This is important because the size of the Top DICT plays a role in offset calculation,
+        // and the size shouldn't change after we've written correct offsets.
+        var attrs = {
+            version: options.version,
+            fullName: options.fullName,
+            familyName: options.familyName,
+            weight: options.weightName,
+            fontBBox: options.fontBBox || [0, 0, 0, 0],
+            fontMatrix: [fontScale, 0, 0, fontScale, 0, 0],
+            charset: 999,
+            encoding: 0,
+            charStrings: 999,
+            private: [0, 999]
+        };
+
+        var privateAttrs = {};
+
+        var glyphNames = [];
+        var glyph;
+
+        // Skip first glyph (.notdef)
+        for (var i = 1; i < glyphs.length; i += 1) {
+            glyph = glyphs.get(i);
+            glyphNames.push(glyph.name);
+        }
+
+        var strings = [];
+
+        t.header = makeHeader();
+        t.nameIndex = makeNameIndex([options.postScriptName]);
+        var topDict = makeTopDict(attrs, strings);
+        t.topDictIndex = makeTopDictIndex(topDict);
+        t.globalSubrIndex = makeGlobalSubrIndex();
+        t.charsets = makeCharsets(glyphNames, strings);
+        t.charStringsIndex = makeCharStringsIndex(glyphs);
+        t.privateDict = makePrivateDict(privateAttrs, strings);
+
+        // Needs to come at the end, to encode all custom strings used in the font.
+        t.stringIndex = makeStringIndex(strings);
+
+        var startOffset = t.header.sizeOf() +
+            t.nameIndex.sizeOf() +
+            t.topDictIndex.sizeOf() +
+            t.stringIndex.sizeOf() +
+            t.globalSubrIndex.sizeOf();
+        attrs.charset = startOffset;
+
+        // We use the CFF standard encoding; proper encoding will be handled in cmap.
+        attrs.encoding = 0;
+        attrs.charStrings = attrs.charset + t.charsets.sizeOf();
+        attrs.private[1] = attrs.charStrings + t.charStringsIndex.sizeOf();
+
+        // Recreate the Top DICT INDEX with the correct offsets.
+        topDict = makeTopDict(attrs, strings);
+        t.topDictIndex = makeTopDictIndex(topDict);
+
+        return t;
+    }
+
+    var cff = { parse: parseCFFTable, make: makeCFFTable };
+
+    // The `head` table contains global information about the font.
+    // https://www.microsoft.com/typography/OTSPEC/head.htm
+
+    // Parse the header `head` table
+    function parseHeadTable(data, start) {
+        var head = {};
+        var p = new parse.Parser(data, start);
+        head.version = p.parseVersion();
+        head.fontRevision = Math.round(p.parseFixed() * 1000) / 1000;
+        head.checkSumAdjustment = p.parseULong();
+        head.magicNumber = p.parseULong();
+        check.argument(head.magicNumber === 0x5F0F3CF5, 'Font header has wrong magic number.');
+        head.flags = p.parseUShort();
+        head.unitsPerEm = p.parseUShort();
+        head.created = p.parseLongDateTime();
+        head.modified = p.parseLongDateTime();
+        head.xMin = p.parseShort();
+        head.yMin = p.parseShort();
+        head.xMax = p.parseShort();
+        head.yMax = p.parseShort();
+        head.macStyle = p.parseUShort();
+        head.lowestRecPPEM = p.parseUShort();
+        head.fontDirectionHint = p.parseShort();
+        head.indexToLocFormat = p.parseShort();
+        head.glyphDataFormat = p.parseShort();
+        return head;
+    }
+
+    function makeHeadTable(options) {
+        // Apple Mac timestamp epoch is 01/01/1904 not 01/01/1970
+        var timestamp = Math.round(new Date().getTime() / 1000) + 2082844800;
+        var createdTimestamp = timestamp;
+
+        if (options.createdTimestamp) {
+            createdTimestamp = options.createdTimestamp + 2082844800;
+        }
+
+        return new table.Table('head', [
+            {name: 'version', type: 'FIXED', value: 0x00010000},
+            {name: 'fontRevision', type: 'FIXED', value: 0x00010000},
+            {name: 'checkSumAdjustment', type: 'ULONG', value: 0},
+            {name: 'magicNumber', type: 'ULONG', value: 0x5F0F3CF5},
+            {name: 'flags', type: 'USHORT', value: 0},
+            {name: 'unitsPerEm', type: 'USHORT', value: 1000},
+            {name: 'created', type: 'LONGDATETIME', value: createdTimestamp},
+            {name: 'modified', type: 'LONGDATETIME', value: timestamp},
+            {name: 'xMin', type: 'SHORT', value: 0},
+            {name: 'yMin', type: 'SHORT', value: 0},
+            {name: 'xMax', type: 'SHORT', value: 0},
+            {name: 'yMax', type: 'SHORT', value: 0},
+            {name: 'macStyle', type: 'USHORT', value: 0},
+            {name: 'lowestRecPPEM', type: 'USHORT', value: 0},
+            {name: 'fontDirectionHint', type: 'SHORT', value: 2},
+            {name: 'indexToLocFormat', type: 'SHORT', value: 0},
+            {name: 'glyphDataFormat', type: 'SHORT', value: 0}
+        ], options);
+    }
+
+    var head = { parse: parseHeadTable, make: makeHeadTable };
+
+    // The `hhea` table contains information for horizontal layout.
+    // https://www.microsoft.com/typography/OTSPEC/hhea.htm
+
+    // Parse the horizontal header `hhea` table
+    function parseHheaTable(data, start) {
+        var hhea = {};
+        var p = new parse.Parser(data, start);
+        hhea.version = p.parseVersion();
+        hhea.ascender = p.parseShort();
+        hhea.descender = p.parseShort();
+        hhea.lineGap = p.parseShort();
+        hhea.advanceWidthMax = p.parseUShort();
+        hhea.minLeftSideBearing = p.parseShort();
+        hhea.minRightSideBearing = p.parseShort();
+        hhea.xMaxExtent = p.parseShort();
+        hhea.caretSlopeRise = p.parseShort();
+        hhea.caretSlopeRun = p.parseShort();
+        hhea.caretOffset = p.parseShort();
+        p.relativeOffset += 8;
+        hhea.metricDataFormat = p.parseShort();
+        hhea.numberOfHMetrics = p.parseUShort();
+        return hhea;
+    }
+
+    function makeHheaTable(options) {
+        return new table.Table('hhea', [
+            {name: 'version', type: 'FIXED', value: 0x00010000},
+            {name: 'ascender', type: 'FWORD', value: 0},
+            {name: 'descender', type: 'FWORD', value: 0},
+            {name: 'lineGap', type: 'FWORD', value: 0},
+            {name: 'advanceWidthMax', type: 'UFWORD', value: 0},
+            {name: 'minLeftSideBearing', type: 'FWORD', value: 0},
+            {name: 'minRightSideBearing', type: 'FWORD', value: 0},
+            {name: 'xMaxExtent', type: 'FWORD', value: 0},
+            {name: 'caretSlopeRise', type: 'SHORT', value: 1},
+            {name: 'caretSlopeRun', type: 'SHORT', value: 0},
+            {name: 'caretOffset', type: 'SHORT', value: 0},
+            {name: 'reserved1', type: 'SHORT', value: 0},
+            {name: 'reserved2', type: 'SHORT', value: 0},
+            {name: 'reserved3', type: 'SHORT', value: 0},
+            {name: 'reserved4', type: 'SHORT', value: 0},
+            {name: 'metricDataFormat', type: 'SHORT', value: 0},
+            {name: 'numberOfHMetrics', type: 'USHORT', value: 0}
+        ], options);
+    }
+
+    var hhea = { parse: parseHheaTable, make: makeHheaTable };
+
+    // The `hmtx` table contains the horizontal metrics for all glyphs.
+    // https://www.microsoft.com/typography/OTSPEC/hmtx.htm
+
+    // Parse the `hmtx` table, which contains the horizontal metrics for all glyphs.
+    // This function augments the glyph array, adding the advanceWidth and leftSideBearing to each glyph.
+    function parseHmtxTable(data, start, numMetrics, numGlyphs, glyphs) {
+        var advanceWidth;
+        var leftSideBearing;
+        var p = new parse.Parser(data, start);
+        for (var i = 0; i < numGlyphs; i += 1) {
+            // If the font is monospaced, only one entry is needed. This last entry applies to all subsequent glyphs.
+            if (i < numMetrics) {
+                advanceWidth = p.parseUShort();
+                leftSideBearing = p.parseShort();
+            }
+
+            var glyph = glyphs.get(i);
+            glyph.advanceWidth = advanceWidth;
+            glyph.leftSideBearing = leftSideBearing;
+        }
+    }
+
+    function makeHmtxTable(glyphs) {
+        var t = new table.Table('hmtx', []);
+        for (var i = 0; i < glyphs.length; i += 1) {
+            var glyph = glyphs.get(i);
+            var advanceWidth = glyph.advanceWidth || 0;
+            var leftSideBearing = glyph.leftSideBearing || 0;
+            t.fields.push({name: 'advanceWidth_' + i, type: 'USHORT', value: advanceWidth});
+            t.fields.push({name: 'leftSideBearing_' + i, type: 'SHORT', value: leftSideBearing});
+        }
+
+        return t;
+    }
+
+    var hmtx = { parse: parseHmtxTable, make: makeHmtxTable };
+
+    // The `ltag` table stores IETF BCP-47 language tags. It allows supporting
+    // languages for which TrueType does not assign a numeric code.
+    // https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6ltag.html
+    // http://www.w3.org/International/articles/language-tags/
+    // http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
+
+    function makeLtagTable(tags) {
+        var result = new table.Table('ltag', [
+            {name: 'version', type: 'ULONG', value: 1},
+            {name: 'flags', type: 'ULONG', value: 0},
+            {name: 'numTags', type: 'ULONG', value: tags.length}
+        ]);
+
+        var stringPool = '';
+        var stringPoolOffset = 12 + tags.length * 4;
+        for (var i = 0; i < tags.length; ++i) {
+            var pos = stringPool.indexOf(tags[i]);
+            if (pos < 0) {
+                pos = stringPool.length;
+                stringPool += tags[i];
+            }
+
+            result.fields.push({name: 'offset ' + i, type: 'USHORT', value: stringPoolOffset + pos});
+            result.fields.push({name: 'length ' + i, type: 'USHORT', value: tags[i].length});
+        }
+
+        result.fields.push({name: 'stringPool', type: 'CHARARRAY', value: stringPool});
+        return result;
+    }
+
+    function parseLtagTable(data, start) {
+        var p = new parse.Parser(data, start);
+        var tableVersion = p.parseULong();
+        check.argument(tableVersion === 1, 'Unsupported ltag table version.');
+        // The 'ltag' specification does not define any flags; skip the field.
+        p.skip('uLong', 1);
+        var numTags = p.parseULong();
+
+        var tags = [];
+        for (var i = 0; i < numTags; i++) {
+            var tag = '';
+            var offset = start + p.parseUShort();
+            var length = p.parseUShort();
+            for (var j = offset; j < offset + length; ++j) {
+                tag += String.fromCharCode(data.getInt8(j));
+            }
+
+            tags.push(tag);
+        }
+
+        return tags;
+    }
+
+    var ltag = { make: makeLtagTable, parse: parseLtagTable };
+
+    // The `maxp` table establishes the memory requirements for the font.
+    // We need it just to get the number of glyphs in the font.
+    // https://www.microsoft.com/typography/OTSPEC/maxp.htm
+
+    // Parse the maximum profile `maxp` table.
+    function parseMaxpTable(data, start) {
+        var maxp = {};
+        var p = new parse.Parser(data, start);
+        maxp.version = p.parseVersion();
+        maxp.numGlyphs = p.parseUShort();
+        if (maxp.version === 1.0) {
+            maxp.maxPoints = p.parseUShort();
+            maxp.maxContours = p.parseUShort();
+            maxp.maxCompositePoints = p.parseUShort();
+            maxp.maxCompositeContours = p.parseUShort();
+            maxp.maxZones = p.parseUShort();
+            maxp.maxTwilightPoints = p.parseUShort();
+            maxp.maxStorage = p.parseUShort();
+            maxp.maxFunctionDefs = p.parseUShort();
+            maxp.maxInstructionDefs = p.parseUShort();
+            maxp.maxStackElements = p.parseUShort();
+            maxp.maxSizeOfInstructions = p.parseUShort();
+            maxp.maxComponentElements = p.parseUShort();
+            maxp.maxComponentDepth = p.parseUShort();
+        }
+
+        return maxp;
+    }
+
+    function makeMaxpTable(numGlyphs) {
+        return new table.Table('maxp', [
+            {name: 'version', type: 'FIXED', value: 0x00005000},
+            {name: 'numGlyphs', type: 'USHORT', value: numGlyphs}
+        ]);
+    }
+
+    var maxp = { parse: parseMaxpTable, make: makeMaxpTable };
+
+    // The `name` naming table.
+    // https://www.microsoft.com/typography/OTSPEC/name.htm
+
+    // NameIDs for the name table.
+    var nameTableNames = [
+        'copyright',              // 0
+        'fontFamily',             // 1
+        'fontSubfamily',          // 2
+        'uniqueID',               // 3
+        'fullName',               // 4
+        'version',                // 5
+        'postScriptName',         // 6
+        'trademark',              // 7
+        'manufacturer',           // 8
+        'designer',               // 9
+        'description',            // 10
+        'manufacturerURL',        // 11
+        'designerURL',            // 12
+        'license',                // 13
+        'licenseURL',             // 14
+        'reserved',               // 15
+        'preferredFamily',        // 16
+        'preferredSubfamily',     // 17
+        'compatibleFullName',     // 18
+        'sampleText',             // 19
+        'postScriptFindFontName', // 20
+        'wwsFamily',              // 21
+        'wwsSubfamily'            // 22
+    ];
+
+    var macLanguages = {
+        0: 'en',
+        1: 'fr',
+        2: 'de',
+        3: 'it',
+        4: 'nl',
+        5: 'sv',
+        6: 'es',
+        7: 'da',
+        8: 'pt',
+        9: 'no',
+        10: 'he',
+        11: 'ja',
+        12: 'ar',
+        13: 'fi',
+        14: 'el',
+        15: 'is',
+        16: 'mt',
+        17: 'tr',
+        18: 'hr',
+        19: 'zh-Hant',
+        20: 'ur',
+        21: 'hi',
+        22: 'th',
+        23: 'ko',
+        24: 'lt',
+        25: 'pl',
+        26: 'hu',
+        27: 'es',
+        28: 'lv',
+        29: 'se',
+        30: 'fo',
+        31: 'fa',
+        32: 'ru',
+        33: 'zh',
+        34: 'nl-BE',
+        35: 'ga',
+        36: 'sq',
+        37: 'ro',
+        38: 'cz',
+        39: 'sk',
+        40: 'si',
+        41: 'yi',
+        42: 'sr',
+        43: 'mk',
+        44: 'bg',
+        45: 'uk',
+        46: 'be',
+        47: 'uz',
+        48: 'kk',
+        49: 'az-Cyrl',
+        50: 'az-Arab',
+        51: 'hy',
+        52: 'ka',
+        53: 'mo',
+        54: 'ky',
+        55: 'tg',
+        56: 'tk',
+        57: 'mn-CN',
+        58: 'mn',
+        59: 'ps',
+        60: 'ks',
+        61: 'ku',
+        62: 'sd',
+        63: 'bo',
+        64: 'ne',
+        65: 'sa',
+        66: 'mr',
+        67: 'bn',
+        68: 'as',
+        69: 'gu',
+        70: 'pa',
+        71: 'or',
+        72: 'ml',
+        73: 'kn',
+        74: 'ta',
+        75: 'te',
+        76: 'si',
+        77: 'my',
+        78: 'km',
+        79: 'lo',
+        80: 'vi',
+        81: 'id',
+        82: 'tl',
+        83: 'ms',
+        84: 'ms-Arab',
+        85: 'am',
+        86: 'ti',
+        87: 'om',
+        88: 'so',
+        89: 'sw',
+        90: 'rw',
+        91: 'rn',
+        92: 'ny',
+        93: 'mg',
+        94: 'eo',
+        128: 'cy',
+        129: 'eu',
+        130: 'ca',
+        131: 'la',
+        132: 'qu',
+        133: 'gn',
+        134: 'ay',
+        135: 'tt',
+        136: 'ug',
+        137: 'dz',
+        138: 'jv',
+        139: 'su',
+        140: 'gl',
+        141: 'af',
+        142: 'br',
+        143: 'iu',
+        144: 'gd',
+        145: 'gv',
+        146: 'ga',
+        147: 'to',
+        148: 'el-polyton',
+        149: 'kl',
+        150: 'az',
+        151: 'nn'
+    };
+
+    // MacOS language ID → MacOS script ID
+    //
+    // Note that the script ID is not sufficient to determine what encoding
+    // to use in TrueType files. For some languages, MacOS used a modification
+    // of a mainstream script. For example, an Icelandic name would be stored
+    // with smRoman in the TrueType naming table, but the actual encoding
+    // is a special Icelandic version of the normal Macintosh Roman encoding.
+    // As another example, Inuktitut uses an 8-bit encoding for Canadian Aboriginal
+    // Syllables but MacOS had run out of available script codes, so this was
+    // done as a (pretty radical) "modification" of Ethiopic.
+    //
+    // http://unicode.org/Public/MAPPINGS/VENDORS/APPLE/Readme.txt
+    var macLanguageToScript = {
+        0: 0,  // langEnglish → smRoman
+        1: 0,  // langFrench → smRoman
+        2: 0,  // langGerman → smRoman
+        3: 0,  // langItalian → smRoman
+        4: 0,  // langDutch → smRoman
+        5: 0,  // langSwedish → smRoman
+        6: 0,  // langSpanish → smRoman
+        7: 0,  // langDanish → smRoman
+        8: 0,  // langPortuguese → smRoman
+        9: 0,  // langNorwegian → smRoman
+        10: 5,  // langHebrew → smHebrew
+        11: 1,  // langJapanese → smJapanese
+        12: 4,  // langArabic → smArabic
+        13: 0,  // langFinnish → smRoman
+        14: 6,  // langGreek → smGreek
+        15: 0,  // langIcelandic → smRoman (modified)
+        16: 0,  // langMaltese → smRoman
+        17: 0,  // langTurkish → smRoman (modified)
+        18: 0,  // langCroatian → smRoman (modified)
+        19: 2,  // langTradChinese → smTradChinese
+        20: 4,  // langUrdu → smArabic
+        21: 9,  // langHindi → smDevanagari
+        22: 21,  // langThai → smThai
+        23: 3,  // langKorean → smKorean
+        24: 29,  // langLithuanian → smCentralEuroRoman
+        25: 29,  // langPolish → smCentralEuroRoman
+        26: 29,  // langHungarian → smCentralEuroRoman
+        27: 29,  // langEstonian → smCentralEuroRoman
+        28: 29,  // langLatvian → smCentralEuroRoman
+        29: 0,  // langSami → smRoman
+        30: 0,  // langFaroese → smRoman (modified)
+        31: 4,  // langFarsi → smArabic (modified)
+        32: 7,  // langRussian → smCyrillic
+        33: 25,  // langSimpChinese → smSimpChinese
+        34: 0,  // langFlemish → smRoman
+        35: 0,  // langIrishGaelic → smRoman (modified)
+        36: 0,  // langAlbanian → smRoman
+        37: 0,  // langRomanian → smRoman (modified)
+        38: 29,  // langCzech → smCentralEuroRoman
+        39: 29,  // langSlovak → smCentralEuroRoman
+        40: 0,  // langSlovenian → smRoman (modified)
+        41: 5,  // langYiddish → smHebrew
+        42: 7,  // langSerbian → smCyrillic
+        43: 7,  // langMacedonian → smCyrillic
+        44: 7,  // langBulgarian → smCyrillic
+        45: 7,  // langUkrainian → smCyrillic (modified)
+        46: 7,  // langByelorussian → smCyrillic
+        47: 7,  // langUzbek → smCyrillic
+        48: 7,  // langKazakh → smCyrillic
+        49: 7,  // langAzerbaijani → smCyrillic
+        50: 4,  // langAzerbaijanAr → smArabic
+        51: 24,  // langArmenian → smArmenian
+        52: 23,  // langGeorgian → smGeorgian
+        53: 7,  // langMoldavian → smCyrillic
+        54: 7,  // langKirghiz → smCyrillic
+        55: 7,  // langTajiki → smCyrillic
+        56: 7,  // langTurkmen → smCyrillic
+        57: 27,  // langMongolian → smMongolian
+        58: 7,  // langMongolianCyr → smCyrillic
+        59: 4,  // langPashto → smArabic
+        60: 4,  // langKurdish → smArabic
+        61: 4,  // langKashmiri → smArabic
+        62: 4,  // langSindhi → smArabic
+        63: 26,  // langTibetan → smTibetan
+        64: 9,  // langNepali → smDevanagari
+        65: 9,  // langSanskrit → smDevanagari
+        66: 9,  // langMarathi → smDevanagari
+        67: 13,  // langBengali → smBengali
+        68: 13,  // langAssamese → smBengali
+        69: 11,  // langGujarati → smGujarati
+        70: 10,  // langPunjabi → smGurmukhi
+        71: 12,  // langOriya → smOriya
+        72: 17,  // langMalayalam → smMalayalam
+        73: 16,  // langKannada → smKannada
+        74: 14,  // langTamil → smTamil
+        75: 15,  // langTelugu → smTelugu
+        76: 18,  // langSinhalese → smSinhalese
+        77: 19,  // langBurmese → smBurmese
+        78: 20,  // langKhmer → smKhmer
+        79: 22,  // langLao → smLao
+        80: 30,  // langVietnamese → smVietnamese
+        81: 0,  // langIndonesian → smRoman
+        82: 0,  // langTagalog → smRoman
+        83: 0,  // langMalayRoman → smRoman
+        84: 4,  // langMalayArabic → smArabic
+        85: 28,  // langAmharic → smEthiopic
+        86: 28,  // langTigrinya → smEthiopic
+        87: 28,  // langOromo → smEthiopic
+        88: 0,  // langSomali → smRoman
+        89: 0,  // langSwahili → smRoman
+        90: 0,  // langKinyarwanda → smRoman
+        91: 0,  // langRundi → smRoman
+        92: 0,  // langNyanja → smRoman
+        93: 0,  // langMalagasy → smRoman
+        94: 0,  // langEsperanto → smRoman
+        128: 0,  // langWelsh → smRoman (modified)
+        129: 0,  // langBasque → smRoman
+        130: 0,  // langCatalan → smRoman
+        131: 0,  // langLatin → smRoman
+        132: 0,  // langQuechua → smRoman
+        133: 0,  // langGuarani → smRoman
+        134: 0,  // langAymara → smRoman
+        135: 7,  // langTatar → smCyrillic
+        136: 4,  // langUighur → smArabic
+        137: 26,  // langDzongkha → smTibetan
+        138: 0,  // langJavaneseRom → smRoman
+        139: 0,  // langSundaneseRom → smRoman
+        140: 0,  // langGalician → smRoman
+        141: 0,  // langAfrikaans → smRoman
+        142: 0,  // langBreton → smRoman (modified)
+        143: 28,  // langInuktitut → smEthiopic (modified)
+        144: 0,  // langScottishGaelic → smRoman (modified)
+        145: 0,  // langManxGaelic → smRoman (modified)
+        146: 0,  // langIrishGaelicScript → smRoman (modified)
+        147: 0,  // langTongan → smRoman
+        148: 6,  // langGreekAncient → smRoman
+        149: 0,  // langGreenlandic → smRoman
+        150: 0,  // langAzerbaijanRoman → smRoman
+        151: 0   // langNynorsk → smRoman
+    };
+
+    // While Microsoft indicates a region/country for all its language
+    // IDs, we omit the region code if it's equal to the "most likely
+    // region subtag" according to Unicode CLDR. For scripts, we omit
+    // the subtag if it is equal to the Suppress-Script entry in the
+    // IANA language subtag registry for IETF BCP 47.
+    //
+    // For example, Microsoft states that its language code 0x041A is
+    // Croatian in Croatia. We transform this to the BCP 47 language code 'hr'
+    // and not 'hr-HR' because Croatia is the default country for Croatian,
+    // according to Unicode CLDR. As another example, Microsoft states
+    // that 0x101A is Croatian (Latin) in Bosnia-Herzegovina. We transform
+    // this to 'hr-BA' and not 'hr-Latn-BA' because Latin is the default script
+    // for the Croatian language, according to IANA.
+    //
+    // http://www.unicode.org/cldr/charts/latest/supplemental/likely_subtags.html
+    // http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
+    var windowsLanguages = {
+        0x0436: 'af',
+        0x041C: 'sq',
+        0x0484: 'gsw',
+        0x045E: 'am',
+        0x1401: 'ar-DZ',
+        0x3C01: 'ar-BH',
+        0x0C01: 'ar',
+        0x0801: 'ar-IQ',
+        0x2C01: 'ar-JO',
+        0x3401: 'ar-KW',
+        0x3001: 'ar-LB',
+        0x1001: 'ar-LY',
+        0x1801: 'ary',
+        0x2001: 'ar-OM',
+        0x4001: 'ar-QA',
+        0x0401: 'ar-SA',
+        0x2801: 'ar-SY',
+        0x1C01: 'aeb',
+        0x3801: 'ar-AE',
+        0x2401: 'ar-YE',
+        0x042B: 'hy',
+        0x044D: 'as',
+        0x082C: 'az-Cyrl',
+        0x042C: 'az',
+        0x046D: 'ba',
+        0x042D: 'eu',
+        0x0423: 'be',
+        0x0845: 'bn',
+        0x0445: 'bn-IN',
+        0x201A: 'bs-Cyrl',
+        0x141A: 'bs',
+        0x047E: 'br',
+        0x0402: 'bg',
+        0x0403: 'ca',
+        0x0C04: 'zh-HK',
+        0x1404: 'zh-MO',
+        0x0804: 'zh',
+        0x1004: 'zh-SG',
+        0x0404: 'zh-TW',
+        0x0483: 'co',
+        0x041A: 'hr',
+        0x101A: 'hr-BA',
+        0x0405: 'cs',
+        0x0406: 'da',
+        0x048C: 'prs',
+        0x0465: 'dv',
+        0x0813: 'nl-BE',
+        0x0413: 'nl',
+        0x0C09: 'en-AU',
+        0x2809: 'en-BZ',
+        0x1009: 'en-CA',
+        0x2409: 'en-029',
+        0x4009: 'en-IN',
+        0x1809: 'en-IE',
+        0x2009: 'en-JM',
+        0x4409: 'en-MY',
+        0x1409: 'en-NZ',
+        0x3409: 'en-PH',
+        0x4809: 'en-SG',
+        0x1C09: 'en-ZA',
+        0x2C09: 'en-TT',
+        0x0809: 'en-GB',
+        0x0409: 'en',
+        0x3009: 'en-ZW',
+        0x0425: 'et',
+        0x0438: 'fo',
+        0x0464: 'fil',
+        0x040B: 'fi',
+        0x080C: 'fr-BE',
+        0x0C0C: 'fr-CA',
+        0x040C: 'fr',
+        0x140C: 'fr-LU',
+        0x180C: 'fr-MC',
+        0x100C: 'fr-CH',
+        0x0462: 'fy',
+        0x0456: 'gl',
+        0x0437: 'ka',
+        0x0C07: 'de-AT',
+        0x0407: 'de',
+        0x1407: 'de-LI',
+        0x1007: 'de-LU',
+        0x0807: 'de-CH',
+        0x0408: 'el',
+        0x046F: 'kl',
+        0x0447: 'gu',
+        0x0468: 'ha',
+        0x040D: 'he',
+        0x0439: 'hi',
+        0x040E: 'hu',
+        0x040F: 'is',
+        0x0470: 'ig',
+        0x0421: 'id',
+        0x045D: 'iu',
+        0x085D: 'iu-Latn',
+        0x083C: 'ga',
+        0x0434: 'xh',
+        0x0435: 'zu',
+        0x0410: 'it',
+        0x0810: 'it-CH',
+        0x0411: 'ja',
+        0x044B: 'kn',
+        0x043F: 'kk',
+        0x0453: 'km',
+        0x0486: 'quc',
+        0x0487: 'rw',
+        0x0441: 'sw',
+        0x0457: 'kok',
+        0x0412: 'ko',
+        0x0440: 'ky',
+        0x0454: 'lo',
+        0x0426: 'lv',
+        0x0427: 'lt',
+        0x082E: 'dsb',
+        0x046E: 'lb',
+        0x042F: 'mk',
+        0x083E: 'ms-BN',
+        0x043E: 'ms',
+        0x044C: 'ml',
+        0x043A: 'mt',
+        0x0481: 'mi',
+        0x047A: 'arn',
+        0x044E: 'mr',
+        0x047C: 'moh',
+        0x0450: 'mn',
+        0x0850: 'mn-CN',
+        0x0461: 'ne',
+        0x0414: 'nb',
+        0x0814: 'nn',
+        0x0482: 'oc',
+        0x0448: 'or',
+        0x0463: 'ps',
+        0x0415: 'pl',
+        0x0416: 'pt',
+        0x0816: 'pt-PT',
+        0x0446: 'pa',
+        0x046B: 'qu-BO',
+        0x086B: 'qu-EC',
+        0x0C6B: 'qu',
+        0x0418: 'ro',
+        0x0417: 'rm',
+        0x0419: 'ru',
+        0x243B: 'smn',
+        0x103B: 'smj-NO',
+        0x143B: 'smj',
+        0x0C3B: 'se-FI',
+        0x043B: 'se',
+        0x083B: 'se-SE',
+        0x203B: 'sms',
+        0x183B: 'sma-NO',
+        0x1C3B: 'sms',
+        0x044F: 'sa',
+        0x1C1A: 'sr-Cyrl-BA',
+        0x0C1A: 'sr',
+        0x181A: 'sr-Latn-BA',
+        0x081A: 'sr-Latn',
+        0x046C: 'nso',
+        0x0432: 'tn',
+        0x045B: 'si',
+        0x041B: 'sk',
+        0x0424: 'sl',
+        0x2C0A: 'es-AR',
+        0x400A: 'es-BO',
+        0x340A: 'es-CL',
+        0x240A: 'es-CO',
+        0x140A: 'es-CR',
+        0x1C0A: 'es-DO',
+        0x300A: 'es-EC',
+        0x440A: 'es-SV',
+        0x100A: 'es-GT',
+        0x480A: 'es-HN',
+        0x080A: 'es-MX',
+        0x4C0A: 'es-NI',
+        0x180A: 'es-PA',
+        0x3C0A: 'es-PY',
+        0x280A: 'es-PE',
+        0x500A: 'es-PR',
+
+        // Microsoft has defined two different language codes for
+        // “Spanish with modern sorting” and “Spanish with traditional
+        // sorting”. This makes sense for collation APIs, and it would be
+        // possible to express this in BCP 47 language tags via Unicode
+        // extensions (eg., es-u-co-trad is Spanish with traditional
+        // sorting). However, for storing names in fonts, the distinction
+        // does not make sense, so we give “es” in both cases.
+        0x0C0A: 'es',
+        0x040A: 'es',
+
+        0x540A: 'es-US',
+        0x380A: 'es-UY',
+        0x200A: 'es-VE',
+        0x081D: 'sv-FI',
+        0x041D: 'sv',
+        0x045A: 'syr',
+        0x0428: 'tg',
+        0x085F: 'tzm',
+        0x0449: 'ta',
+        0x0444: 'tt',
+        0x044A: 'te',
+        0x041E: 'th',
+        0x0451: 'bo',
+        0x041F: 'tr',
+        0x0442: 'tk',
+        0x0480: 'ug',
+        0x0422: 'uk',
+        0x042E: 'hsb',
+        0x0420: 'ur',
+        0x0843: 'uz-Cyrl',
+        0x0443: 'uz',
+        0x042A: 'vi',
+        0x0452: 'cy',
+        0x0488: 'wo',
+        0x0485: 'sah',
+        0x0478: 'ii',
+        0x046A: 'yo'
+    };
+
+    // Returns a IETF BCP 47 language code, for example 'zh-Hant'
+    // for 'Chinese in the traditional script'.
+    function getLanguageCode(platformID, languageID, ltag) {
+        switch (platformID) {
+            case 0:  // Unicode
+                if (languageID === 0xFFFF) {
+                    return 'und';
+                } else if (ltag) {
+                    return ltag[languageID];
+                }
+
+                break;
+
+            case 1:  // Macintosh
+                return macLanguages[languageID];
+
+            case 3:  // Windows
+                return windowsLanguages[languageID];
+        }
+
+        return undefined;
+    }
+
+    var utf16 = 'utf-16';
+
+    // MacOS script ID → encoding. This table stores the default case,
+    // which can be overridden by macLanguageEncodings.
+    var macScriptEncodings = {
+        0: 'macintosh',           // smRoman
+        1: 'x-mac-japanese',      // smJapanese
+        2: 'x-mac-chinesetrad',   // smTradChinese
+        3: 'x-mac-korean',        // smKorean
+        6: 'x-mac-greek',         // smGreek
+        7: 'x-mac-cyrillic',      // smCyrillic
+        9: 'x-mac-devanagai',     // smDevanagari
+        10: 'x-mac-gurmukhi',     // smGurmukhi
+        11: 'x-mac-gujarati',     // smGujarati
+        12: 'x-mac-oriya',        // smOriya
+        13: 'x-mac-bengali',      // smBengali
+        14: 'x-mac-tamil',        // smTamil
+        15: 'x-mac-telugu',       // smTelugu
+        16: 'x-mac-kannada',      // smKannada
+        17: 'x-mac-malayalam',    // smMalayalam
+        18: 'x-mac-sinhalese',    // smSinhalese
+        19: 'x-mac-burmese',      // smBurmese
+        20: 'x-mac-khmer',        // smKhmer
+        21: 'x-mac-thai',         // smThai
+        22: 'x-mac-lao',          // smLao
+        23: 'x-mac-georgian',     // smGeorgian
+        24: 'x-mac-armenian',     // smArmenian
+        25: 'x-mac-chinesesimp',  // smSimpChinese
+        26: 'x-mac-tibetan',      // smTibetan
+        27: 'x-mac-mongolian',    // smMongolian
+        28: 'x-mac-ethiopic',     // smEthiopic
+        29: 'x-mac-ce',           // smCentralEuroRoman
+        30: 'x-mac-vietnamese',   // smVietnamese
+        31: 'x-mac-extarabic'     // smExtArabic
+    };
+
+    // MacOS language ID → encoding. This table stores the exceptional
+    // cases, which override macScriptEncodings. For writing MacOS naming
+    // tables, we need to emit a MacOS script ID. Therefore, we cannot
+    // merge macScriptEncodings into macLanguageEncodings.
+    //
+    // http://unicode.org/Public/MAPPINGS/VENDORS/APPLE/Readme.txt
+    var macLanguageEncodings = {
+        15: 'x-mac-icelandic',    // langIcelandic
+        17: 'x-mac-turkish',      // langTurkish
+        18: 'x-mac-croatian',     // langCroatian
+        24: 'x-mac-ce',           // langLithuanian
+        25: 'x-mac-ce',           // langPolish
+        26: 'x-mac-ce',           // langHungarian
+        27: 'x-mac-ce',           // langEstonian
+        28: 'x-mac-ce',           // langLatvian
+        30: 'x-mac-icelandic',    // langFaroese
+        37: 'x-mac-romanian',     // langRomanian
+        38: 'x-mac-ce',           // langCzech
+        39: 'x-mac-ce',           // langSlovak
+        40: 'x-mac-ce',           // langSlovenian
+        143: 'x-mac-inuit',       // langInuktitut
+        146: 'x-mac-gaelic'       // langIrishGaelicScript
+    };
+
+    function getEncoding(platformID, encodingID, languageID) {
+        switch (platformID) {
+            case 0:  // Unicode
+                return utf16;
+
+            case 1:  // Apple Macintosh
+                return macLanguageEncodings[languageID] || macScriptEncodings[encodingID];
+
+            case 3:  // Microsoft Windows
+                if (encodingID === 1 || encodingID === 10) {
+                    return utf16;
+                }
+
+                break;
+        }
+
+        return undefined;
+    }
+
+    // Parse the naming `name` table.
+    // FIXME: Format 1 additional fields are not supported yet.
+    // ltag is the content of the `ltag' table, such as ['en', 'zh-Hans', 'de-CH-1904'].
+    function parseNameTable(data, start, ltag) {
+        var name = {};
+        var p = new parse.Parser(data, start);
+        var format = p.parseUShort();
+        var count = p.parseUShort();
+        var stringOffset = p.offset + p.parseUShort();
+        for (var i = 0; i < count; i++) {
+            var platformID = p.parseUShort();
+            var encodingID = p.parseUShort();
+            var languageID = p.parseUShort();
+            var nameID = p.parseUShort();
+            var property = nameTableNames[nameID] || nameID;
+            var byteLength = p.parseUShort();
+            var offset = p.parseUShort();
+            var language = getLanguageCode(platformID, languageID, ltag);
+            var encoding = getEncoding(platformID, encodingID, languageID);
+            if (encoding !== undefined && language !== undefined) {
+                var text = (void 0);
+                if (encoding === utf16) {
+                    text = decode.UTF16(data, stringOffset + offset, byteLength);
+                } else {
+                    text = decode.MACSTRING(data, stringOffset + offset, byteLength, encoding);
+                }
+
+                if (text) {
+                    var translations = name[property];
+                    if (translations === undefined) {
+                        translations = name[property] = {};
+                    }
+
+                    translations[language] = text;
+                }
+            }
+        }
+
+        var langTagCount = 0;
+        if (format === 1) {
+            // FIXME: Also handle Microsoft's 'name' table 1.
+            langTagCount = p.parseUShort();
+        }
+
+        return name;
+    }
+
+    // {23: 'foo'} → {'foo': 23}
+    // ['bar', 'baz'] → {'bar': 0, 'baz': 1}
+    function reverseDict(dict) {
+        var result = {};
+        for (var key in dict) {
+            result[dict[key]] = parseInt(key);
+        }
+
+        return result;
+    }
+
+    function makeNameRecord(platformID, encodingID, languageID, nameID, length, offset) {
+        return new table.Record('NameRecord', [
+            {name: 'platformID', type: 'USHORT', value: platformID},
+            {name: 'encodingID', type: 'USHORT', value: encodingID},
+            {name: 'languageID', type: 'USHORT', value: languageID},
+            {name: 'nameID', type: 'USHORT', value: nameID},
+            {name: 'length', type: 'USHORT', value: length},
+            {name: 'offset', type: 'USHORT', value: offset}
+        ]);
+    }
+
+    // Finds the position of needle in haystack, or -1 if not there.
+    // Like String.indexOf(), but for arrays.
+    function findSubArray(needle, haystack) {
+        var needleLength = needle.length;
+        var limit = haystack.length - needleLength + 1;
+
+        loop:
+        for (var pos = 0; pos < limit; pos++) {
+            for (; pos < limit; pos++) {
+                for (var k = 0; k < needleLength; k++) {
+                    if (haystack[pos + k] !== needle[k]) {
+                        continue loop;
+                    }
+                }
+
+                return pos;
+            }
+        }
+
+        return -1;
+    }
+
+    function addStringToPool(s, pool) {
+        var offset = findSubArray(s, pool);
+        if (offset < 0) {
+            offset = pool.length;
+            var i = 0;
+            var len = s.length;
+            for (; i < len; ++i) {
+                pool.push(s[i]);
+            }
+
+        }
+
+        return offset;
+    }
+
+    function makeNameTable(names, ltag) {
+        var nameID;
+        var nameIDs = [];
+
+        var namesWithNumericKeys = {};
+        var nameTableIds = reverseDict(nameTableNames);
+        for (var key in names) {
+            var id = nameTableIds[key];
+            if (id === undefined) {
+                id = key;
+            }
+
+            nameID = parseInt(id);
+
+            if (isNaN(nameID)) {
+                throw new Error('Name table entry "' + key + '" does not exist, see nameTableNames for complete list.');
+            }
+
+            namesWithNumericKeys[nameID] = names[key];
+            nameIDs.push(nameID);
+        }
+
+        var macLanguageIds = reverseDict(macLanguages);
+        var windowsLanguageIds = reverseDict(windowsLanguages);
+
+        var nameRecords = [];
+        var stringPool = [];
+
+        for (var i = 0; i < nameIDs.length; i++) {
+            nameID = nameIDs[i];
+            var translations = namesWithNumericKeys[nameID];
+            for (var lang in translations) {
+                var text = translations[lang];
+
+                // For MacOS, we try to emit the name in the form that was introduced
+                // in the initial version of the TrueType spec (in the late 1980s).
+                // However, this can fail for various reasons: the requested BCP 47
+                // language code might not have an old-style Mac equivalent;
+                // we might not have a codec for the needed character encoding;
+                // or the name might contain characters that cannot be expressed
+                // in the old-style Macintosh encoding. In case of failure, we emit
+                // the name in a more modern fashion (Unicode encoding with BCP 47
+                // language tags) that is recognized by MacOS 10.5, released in 2009.
+                // If fonts were only read by operating systems, we could simply
+                // emit all names in the modern form; this would be much easier.
+                // However, there are many applications and libraries that read
+                // 'name' tables directly, and these will usually only recognize
+                // the ancient form (silently skipping the unrecognized names).
+                var macPlatform = 1;  // Macintosh
+                var macLanguage = macLanguageIds[lang];
+                var macScript = macLanguageToScript[macLanguage];
+                var macEncoding = getEncoding(macPlatform, macScript, macLanguage);
+                var macName = encode.MACSTRING(text, macEncoding);
+                if (macName === undefined) {
+                    macPlatform = 0;  // Unicode
+                    macLanguage = ltag.indexOf(lang);
+                    if (macLanguage < 0) {
+                        macLanguage = ltag.length;
+                        ltag.push(lang);
+                    }
+
+                    macScript = 4;  // Unicode 2.0 and later
+                    macName = encode.UTF16(text);
+                }
+
+                var macNameOffset = addStringToPool(macName, stringPool);
+                nameRecords.push(makeNameRecord(macPlatform, macScript, macLanguage,
+                                                nameID, macName.length, macNameOffset));
+
+                var winLanguage = windowsLanguageIds[lang];
+                if (winLanguage !== undefined) {
+                    var winName = encode.UTF16(text);
+                    var winNameOffset = addStringToPool(winName, stringPool);
+                    nameRecords.push(makeNameRecord(3, 1, winLanguage,
+                                                    nameID, winName.length, winNameOffset));
+                }
+            }
+        }
+
+        nameRecords.sort(function(a, b) {
+            return ((a.platformID - b.platformID) ||
+                    (a.encodingID - b.encodingID) ||
+                    (a.languageID - b.languageID) ||
+                    (a.nameID - b.nameID));
+        });
+
+        var t = new table.Table('name', [
+            {name: 'format', type: 'USHORT', value: 0},
+            {name: 'count', type: 'USHORT', value: nameRecords.length},
+            {name: 'stringOffset', type: 'USHORT', value: 6 + nameRecords.length * 12}
+        ]);
+
+        for (var r = 0; r < nameRecords.length; r++) {
+            t.fields.push({name: 'record_' + r, type: 'RECORD', value: nameRecords[r]});
+        }
+
+        t.fields.push({name: 'strings', type: 'LITERAL', value: stringPool});
+        return t;
+    }
+
+    var _name = { parse: parseNameTable, make: makeNameTable };
+
+    // The `OS/2` table contains metrics required in OpenType fonts.
+    // https://www.microsoft.com/typography/OTSPEC/os2.htm
+
+    var unicodeRanges = [
+        {begin: 0x0000, end: 0x007F}, // Basic Latin
+        {begin: 0x0080, end: 0x00FF}, // Latin-1 Supplement
+        {begin: 0x0100, end: 0x017F}, // Latin Extended-A
+        {begin: 0x0180, end: 0x024F}, // Latin Extended-B
+        {begin: 0x0250, end: 0x02AF}, // IPA Extensions
+        {begin: 0x02B0, end: 0x02FF}, // Spacing Modifier Letters
+        {begin: 0x0300, end: 0x036F}, // Combining Diacritical Marks
+        {begin: 0x0370, end: 0x03FF}, // Greek and Coptic
+        {begin: 0x2C80, end: 0x2CFF}, // Coptic
+        {begin: 0x0400, end: 0x04FF}, // Cyrillic
+        {begin: 0x0530, end: 0x058F}, // Armenian
+        {begin: 0x0590, end: 0x05FF}, // Hebrew
+        {begin: 0xA500, end: 0xA63F}, // Vai
+        {begin: 0x0600, end: 0x06FF}, // Arabic
+        {begin: 0x07C0, end: 0x07FF}, // NKo
+        {begin: 0x0900, end: 0x097F}, // Devanagari
+        {begin: 0x0980, end: 0x09FF}, // Bengali
+        {begin: 0x0A00, end: 0x0A7F}, // Gurmukhi
+        {begin: 0x0A80, end: 0x0AFF}, // Gujarati
+        {begin: 0x0B00, end: 0x0B7F}, // Oriya
+        {begin: 0x0B80, end: 0x0BFF}, // Tamil
+        {begin: 0x0C00, end: 0x0C7F}, // Telugu
+        {begin: 0x0C80, end: 0x0CFF}, // Kannada
+        {begin: 0x0D00, end: 0x0D7F}, // Malayalam
+        {begin: 0x0E00, end: 0x0E7F}, // Thai
+        {begin: 0x0E80, end: 0x0EFF}, // Lao
+        {begin: 0x10A0, end: 0x10FF}, // Georgian
+        {begin: 0x1B00, end: 0x1B7F}, // Balinese
+        {begin: 0x1100, end: 0x11FF}, // Hangul Jamo
+        {begin: 0x1E00, end: 0x1EFF}, // Latin Extended Additional
+        {begin: 0x1F00, end: 0x1FFF}, // Greek Extended
+        {begin: 0x2000, end: 0x206F}, // General Punctuation
+        {begin: 0x2070, end: 0x209F}, // Superscripts And Subscripts
+        {begin: 0x20A0, end: 0x20CF}, // Currency Symbol
+        {begin: 0x20D0, end: 0x20FF}, // Combining Diacritical Marks For Symbols
+        {begin: 0x2100, end: 0x214F}, // Letterlike Symbols
+        {begin: 0x2150, end: 0x218F}, // Number Forms
+        {begin: 0x2190, end: 0x21FF}, // Arrows
+        {begin: 0x2200, end: 0x22FF}, // Mathematical Operators
+        {begin: 0x2300, end: 0x23FF}, // Miscellaneous Technical
+        {begin: 0x2400, end: 0x243F}, // Control Pictures
+        {begin: 0x2440, end: 0x245F}, // Optical Character Recognition
+        {begin: 0x2460, end: 0x24FF}, // Enclosed Alphanumerics
+        {begin: 0x2500, end: 0x257F}, // Box Drawing
+        {begin: 0x2580, end: 0x259F}, // Block Elements
+        {begin: 0x25A0, end: 0x25FF}, // Geometric Shapes
+        {begin: 0x2600, end: 0x26FF}, // Miscellaneous Symbols
+        {begin: 0x2700, end: 0x27BF}, // Dingbats
+        {begin: 0x3000, end: 0x303F}, // CJK Symbols And Punctuation
+        {begin: 0x3040, end: 0x309F}, // Hiragana
+        {begin: 0x30A0, end: 0x30FF}, // Katakana
+        {begin: 0x3100, end: 0x312F}, // Bopomofo
+        {begin: 0x3130, end: 0x318F}, // Hangul Compatibility Jamo
+        {begin: 0xA840, end: 0xA87F}, // Phags-pa
+        {begin: 0x3200, end: 0x32FF}, // Enclosed CJK Letters And Months
+        {begin: 0x3300, end: 0x33FF}, // CJK Compatibility
+        {begin: 0xAC00, end: 0xD7AF}, // Hangul Syllables
+        {begin: 0xD800, end: 0xDFFF}, // Non-Plane 0 *
+        {begin: 0x10900, end: 0x1091F}, // Phoenicia
+        {begin: 0x4E00, end: 0x9FFF}, // CJK Unified Ideographs
+        {begin: 0xE000, end: 0xF8FF}, // Private Use Area (plane 0)
+        {begin: 0x31C0, end: 0x31EF}, // CJK Strokes
+        {begin: 0xFB00, end: 0xFB4F}, // Alphabetic Presentation Forms
+        {begin: 0xFB50, end: 0xFDFF}, // Arabic Presentation Forms-A
+        {begin: 0xFE20, end: 0xFE2F}, // Combining Half Marks
+        {begin: 0xFE10, end: 0xFE1F}, // Vertical Forms
+        {begin: 0xFE50, end: 0xFE6F}, // Small Form Variants
+        {begin: 0xFE70, end: 0xFEFF}, // Arabic Presentation Forms-B
+        {begin: 0xFF00, end: 0xFFEF}, // Halfwidth And Fullwidth Forms
+        {begin: 0xFFF0, end: 0xFFFF}, // Specials
+        {begin: 0x0F00, end: 0x0FFF}, // Tibetan
+        {begin: 0x0700, end: 0x074F}, // Syriac
+        {begin: 0x0780, end: 0x07BF}, // Thaana
+        {begin: 0x0D80, end: 0x0DFF}, // Sinhala
+        {begin: 0x1000, end: 0x109F}, // Myanmar
+        {begin: 0x1200, end: 0x137F}, // Ethiopic
+        {begin: 0x13A0, end: 0x13FF}, // Cherokee
+        {begin: 0x1400, end: 0x167F}, // Unified Canadian Aboriginal Syllabics
+        {begin: 0x1680, end: 0x169F}, // Ogham
+        {begin: 0x16A0, end: 0x16FF}, // Runic
+        {begin: 0x1780, end: 0x17FF}, // Khmer
+        {begin: 0x1800, end: 0x18AF}, // Mongolian
+        {begin: 0x2800, end: 0x28FF}, // Braille Patterns
+        {begin: 0xA000, end: 0xA48F}, // Yi Syllables
+        {begin: 0x1700, end: 0x171F}, // Tagalog
+        {begin: 0x10300, end: 0x1032F}, // Old Italic
+        {begin: 0x10330, end: 0x1034F}, // Gothic
+        {begin: 0x10400, end: 0x1044F}, // Deseret
+        {begin: 0x1D000, end: 0x1D0FF}, // Byzantine Musical Symbols
+        {begin: 0x1D400, end: 0x1D7FF}, // Mathematical Alphanumeric Symbols
+        {begin: 0xFF000, end: 0xFFFFD}, // Private Use (plane 15)
+        {begin: 0xFE00, end: 0xFE0F}, // Variation Selectors
+        {begin: 0xE0000, end: 0xE007F}, // Tags
+        {begin: 0x1900, end: 0x194F}, // Limbu
+        {begin: 0x1950, end: 0x197F}, // Tai Le
+        {begin: 0x1980, end: 0x19DF}, // New Tai Lue
+        {begin: 0x1A00, end: 0x1A1F}, // Buginese
+        {begin: 0x2C00, end: 0x2C5F}, // Glagolitic
+        {begin: 0x2D30, end: 0x2D7F}, // Tifinagh
+        {begin: 0x4DC0, end: 0x4DFF}, // Yijing Hexagram Symbols
+        {begin: 0xA800, end: 0xA82F}, // Syloti Nagri
+        {begin: 0x10000, end: 0x1007F}, // Linear B Syllabary
+        {begin: 0x10140, end: 0x1018F}, // Ancient Greek Numbers
+        {begin: 0x10380, end: 0x1039F}, // Ugaritic
+        {begin: 0x103A0, end: 0x103DF}, // Old Persian
+        {begin: 0x10450, end: 0x1047F}, // Shavian
+        {begin: 0x10480, end: 0x104AF}, // Osmanya
+        {begin: 0x10800, end: 0x1083F}, // Cypriot Syllabary
+        {begin: 0x10A00, end: 0x10A5F}, // Kharoshthi
+        {begin: 0x1D300, end: 0x1D35F}, // Tai Xuan Jing Symbols
+        {begin: 0x12000, end: 0x123FF}, // Cuneiform
+        {begin: 0x1D360, end: 0x1D37F}, // Counting Rod Numerals
+        {begin: 0x1B80, end: 0x1BBF}, // Sundanese
+        {begin: 0x1C00, end: 0x1C4F}, // Lepcha
+        {begin: 0x1C50, end: 0x1C7F}, // Ol Chiki
+        {begin: 0xA880, end: 0xA8DF}, // Saurashtra
+        {begin: 0xA900, end: 0xA92F}, // Kayah Li
+        {begin: 0xA930, end: 0xA95F}, // Rejang
+        {begin: 0xAA00, end: 0xAA5F}, // Cham
+        {begin: 0x10190, end: 0x101CF}, // Ancient Symbols
+        {begin: 0x101D0, end: 0x101FF}, // Phaistos Disc
+        {begin: 0x102A0, end: 0x102DF}, // Carian
+        {begin: 0x1F030, end: 0x1F09F}  // Domino Tiles
+    ];
+
+    function getUnicodeRange(unicode) {
+        for (var i = 0; i < unicodeRanges.length; i += 1) {
+            var range = unicodeRanges[i];
+            if (unicode >= range.begin && unicode < range.end) {
+                return i;
+            }
+        }
+
+        return -1;
+    }
+
+    // Parse the OS/2 and Windows metrics `OS/2` table
+    function parseOS2Table(data, start) {
+        var os2 = {};
+        var p = new parse.Parser(data, start);
+        os2.version = p.parseUShort();
+        os2.xAvgCharWidth = p.parseShort();
+        os2.usWeightClass = p.parseUShort();
+        os2.usWidthClass = p.parseUShort();
+        os2.fsType = p.parseUShort();
+        os2.ySubscriptXSize = p.parseShort();
+        os2.ySubscriptYSize = p.parseShort();
+        os2.ySubscriptXOffset = p.parseShort();
+        os2.ySubscriptYOffset = p.parseShort();
+        os2.ySuperscriptXSize = p.parseShort();
+        os2.ySuperscriptYSize = p.parseShort();
+        os2.ySuperscriptXOffset = p.parseShort();
+        os2.ySuperscriptYOffset = p.parseShort();
+        os2.yStrikeoutSize = p.parseShort();
+        os2.yStrikeoutPosition = p.parseShort();
+        os2.sFamilyClass = p.parseShort();
+        os2.panose = [];
+        for (var i = 0; i < 10; i++) {
+            os2.panose[i] = p.parseByte();
+        }
+
+        os2.ulUnicodeRange1 = p.parseULong();
+        os2.ulUnicodeRange2 = p.parseULong();
+        os2.ulUnicodeRange3 = p.parseULong();
+        os2.ulUnicodeRange4 = p.parseULong();
+        os2.achVendID = String.fromCharCode(p.parseByte(), p.parseByte(), p.parseByte(), p.parseByte());
+        os2.fsSelection = p.parseUShort();
+        os2.usFirstCharIndex = p.parseUShort();
+        os2.usLastCharIndex = p.parseUShort();
+        os2.sTypoAscender = p.parseShort();
+        os2.sTypoDescender = p.parseShort();
+        os2.sTypoLineGap = p.parseShort();
+        os2.usWinAscent = p.parseUShort();
+        os2.usWinDescent = p.parseUShort();
+        if (os2.version >= 1) {
+            os2.ulCodePageRange1 = p.parseULong();
+            os2.ulCodePageRange2 = p.parseULong();
+        }
+
+        if (os2.version >= 2) {
+            os2.sxHeight = p.parseShort();
+            os2.sCapHeight = p.parseShort();
+            os2.usDefaultChar = p.parseUShort();
+            os2.usBreakChar = p.parseUShort();
+            os2.usMaxContent = p.parseUShort();
+        }
+
+        return os2;
+    }
+
+    function makeOS2Table(options) {
+        return new table.Table('OS/2', [
+            {name: 'version', type: 'USHORT', value: 0x0003},
+            {name: 'xAvgCharWidth', type: 'SHORT', value: 0},
+            {name: 'usWeightClass', type: 'USHORT', value: 0},
+            {name: 'usWidthClass', type: 'USHORT', value: 0},
+            {name: 'fsType', type: 'USHORT', value: 0},
+            {name: 'ySubscriptXSize', type: 'SHORT', value: 650},
+            {name: 'ySubscriptYSize', type: 'SHORT', value: 699},
+            {name: 'ySubscriptXOffset', type: 'SHORT', value: 0},
+            {name: 'ySubscriptYOffset', type: 'SHORT', value: 140},
+            {name: 'ySuperscriptXSize', type: 'SHORT', value: 650},
+            {name: 'ySuperscriptYSize', type: 'SHORT', value: 699},
+            {name: 'ySuperscriptXOffset', type: 'SHORT', value: 0},
+            {name: 'ySuperscriptYOffset', type: 'SHORT', value: 479},
+            {name: 'yStrikeoutSize', type: 'SHORT', value: 49},
+            {name: 'yStrikeoutPosition', type: 'SHORT', value: 258},
+            {name: 'sFamilyClass', type: 'SHORT', value: 0},
+            {name: 'bFamilyType', type: 'BYTE', value: 0},
+            {name: 'bSerifStyle', type: 'BYTE', value: 0},
+            {name: 'bWeight', type: 'BYTE', value: 0},
+            {name: 'bProportion', type: 'BYTE', value: 0},
+            {name: 'bContrast', type: 'BYTE', value: 0},
+            {name: 'bStrokeVariation', type: 'BYTE', value: 0},
+            {name: 'bArmStyle', type: 'BYTE', value: 0},
+            {name: 'bLetterform', type: 'BYTE', value: 0},
+            {name: 'bMidline', type: 'BYTE', value: 0},
+            {name: 'bXHeight', type: 'BYTE', value: 0},
+            {name: 'ulUnicodeRange1', type: 'ULONG', value: 0},
+            {name: 'ulUnicodeRange2', type: 'ULONG', value: 0},
+            {name: 'ulUnicodeRange3', type: 'ULONG', value: 0},
+            {name: 'ulUnicodeRange4', type: 'ULONG', value: 0},
+            {name: 'achVendID', type: 'CHARARRAY', value: 'XXXX'},
+            {name: 'fsSelection', type: 'USHORT', value: 0},
+            {name: 'usFirstCharIndex', type: 'USHORT', value: 0},
+            {name: 'usLastCharIndex', type: 'USHORT', value: 0},
+            {name: 'sTypoAscender', type: 'SHORT', value: 0},
+            {name: 'sTypoDescender', type: 'SHORT', value: 0},
+            {name: 'sTypoLineGap', type: 'SHORT', value: 0},
+            {name: 'usWinAscent', type: 'USHORT', value: 0},
+            {name: 'usWinDescent', type: 'USHORT', value: 0},
+            {name: 'ulCodePageRange1', type: 'ULONG', value: 0},
+            {name: 'ulCodePageRange2', type: 'ULONG', value: 0},
+            {name: 'sxHeight', type: 'SHORT', value: 0},
+            {name: 'sCapHeight', type: 'SHORT', value: 0},
+            {name: 'usDefaultChar', type: 'USHORT', value: 0},
+            {name: 'usBreakChar', type: 'USHORT', value: 0},
+            {name: 'usMaxContext', type: 'USHORT', value: 0}
+        ], options);
+    }
+
+    var os2 = { parse: parseOS2Table, make: makeOS2Table, unicodeRanges: unicodeRanges, getUnicodeRange: getUnicodeRange };
+
+    // The `post` table stores additional PostScript information, such as glyph names.
+    // https://www.microsoft.com/typography/OTSPEC/post.htm
+
+    // Parse the PostScript `post` table
+    function parsePostTable(data, start) {
+        var post = {};
+        var p = new parse.Parser(data, start);
+        post.version = p.parseVersion();
+        post.italicAngle = p.parseFixed();
+        post.underlinePosition = p.parseShort();
+        post.underlineThickness = p.parseShort();
+        post.isFixedPitch = p.parseULong();
+        post.minMemType42 = p.parseULong();
+        post.maxMemType42 = p.parseULong();
+        post.minMemType1 = p.parseULong();
+        post.maxMemType1 = p.parseULong();
+        switch (post.version) {
+            case 1:
+                post.names = standardNames.slice();
+                break;
+            case 2:
+                post.numberOfGlyphs = p.parseUShort();
+                post.glyphNameIndex = new Array(post.numberOfGlyphs);
+                for (var i = 0; i < post.numberOfGlyphs; i++) {
+                    post.glyphNameIndex[i] = p.parseUShort();
+                }
+
+                post.names = [];
+                for (var i$1 = 0; i$1 < post.numberOfGlyphs; i$1++) {
+                    if (post.glyphNameIndex[i$1] >= standardNames.length) {
+                        var nameLength = p.parseChar();
+                        post.names.push(p.parseString(nameLength));
+                    }
+                }
+
+                break;
+            case 2.5:
+                post.numberOfGlyphs = p.parseUShort();
+                post.offset = new Array(post.numberOfGlyphs);
+                for (var i$2 = 0; i$2 < post.numberOfGlyphs; i$2++) {
+                    post.offset[i$2] = p.parseChar();
+                }
+
+                break;
+        }
+        return post;
+    }
+
+    function makePostTable() {
+        return new table.Table('post', [
+            {name: 'version', type: 'FIXED', value: 0x00030000},
+            {name: 'italicAngle', type: 'FIXED', value: 0},
+            {name: 'underlinePosition', type: 'FWORD', value: 0},
+            {name: 'underlineThickness', type: 'FWORD', value: 0},
+            {name: 'isFixedPitch', type: 'ULONG', value: 0},
+            {name: 'minMemType42', type: 'ULONG', value: 0},
+            {name: 'maxMemType42', type: 'ULONG', value: 0},
+            {name: 'minMemType1', type: 'ULONG', value: 0},
+            {name: 'maxMemType1', type: 'ULONG', value: 0}
+        ]);
+    }
+
+    var post = { parse: parsePostTable, make: makePostTable };
+
+    // The `GSUB` table contains ligatures, among other things.
+    // https://www.microsoft.com/typography/OTSPEC/gsub.htm
+
+    var subtableParsers = new Array(9);         // subtableParsers[0] is unused
+
+    // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#SS
+    subtableParsers[1] = function parseLookup1() {
+        var start = this.offset + this.relativeOffset;
+        var substFormat = this.parseUShort();
+        if (substFormat === 1) {
+            return {
+                substFormat: 1,
+                coverage: this.parsePointer(Parser.coverage),
+                deltaGlyphId: this.parseUShort()
+            };
+        } else if (substFormat === 2) {
+            return {
+                substFormat: 2,
+                coverage: this.parsePointer(Parser.coverage),
+                substitute: this.parseOffset16List()
+            };
+        }
+        check.assert(false, '0x' + start.toString(16) + ': lookup type 1 format must be 1 or 2.');
+    };
+
+    // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#MS
+    subtableParsers[2] = function parseLookup2() {
+        var substFormat = this.parseUShort();
+        check.argument(substFormat === 1, 'GSUB Multiple Substitution Subtable identifier-format must be 1');
+        return {
+            substFormat: substFormat,
+            coverage: this.parsePointer(Parser.coverage),
+            sequences: this.parseListOfLists()
+        };
+    };
+
+    // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#AS
+    subtableParsers[3] = function parseLookup3() {
+        var substFormat = this.parseUShort();
+        check.argument(substFormat === 1, 'GSUB Alternate Substitution Subtable identifier-format must be 1');
+        return {
+            substFormat: substFormat,
+            coverage: this.parsePointer(Parser.coverage),
+            alternateSets: this.parseListOfLists()
+        };
+    };
+
+    // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#LS
+    subtableParsers[4] = function parseLookup4() {
+        var substFormat = this.parseUShort();
+        check.argument(substFormat === 1, 'GSUB ligature table identifier-format must be 1');
+        return {
+            substFormat: substFormat,
+            coverage: this.parsePointer(Parser.coverage),
+            ligatureSets: this.parseListOfLists(function() {
+                return {
+                    ligGlyph: this.parseUShort(),
+                    components: this.parseUShortList(this.parseUShort() - 1)
+                };
+            })
+        };
+    };
+
+    var lookupRecordDesc = {
+        sequenceIndex: Parser.uShort,
+        lookupListIndex: Parser.uShort
+    };
+
+    // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#CSF
+    subtableParsers[5] = function parseLookup5() {
+        var start = this.offset + this.relativeOffset;
+        var substFormat = this.parseUShort();
+
+        if (substFormat === 1) {
+            return {
+                substFormat: substFormat,
+                coverage: this.parsePointer(Parser.coverage),
+                ruleSets: this.parseListOfLists(function() {
+                    var glyphCount = this.parseUShort();
+                    var substCount = this.parseUShort();
+                    return {
+                        input: this.parseUShortList(glyphCount - 1),
+                        lookupRecords: this.parseRecordList(substCount, lookupRecordDesc)
+                    };
+                })
+            };
+        } else if (substFormat === 2) {
+            return {
+                substFormat: substFormat,
+                coverage: this.parsePointer(Parser.coverage),
+                classDef: this.parsePointer(Parser.classDef),
+                classSets: this.parseListOfLists(function() {
+                    var glyphCount = this.parseUShort();
+                    var substCount = this.parseUShort();
+                    return {
+                        classes: this.parseUShortList(glyphCount - 1),
+                        lookupRecords: this.parseRecordList(substCount, lookupRecordDesc)
+                    };
+                })
+            };
+        } else if (substFormat === 3) {
+            var glyphCount = this.parseUShort();
+            var substCount = this.parseUShort();
+            return {
+                substFormat: substFormat,
+                coverages: this.parseList(glyphCount, Parser.pointer(Parser.coverage)),
+                lookupRecords: this.parseRecordList(substCount, lookupRecordDesc)
+            };
+        }
+        check.assert(false, '0x' + start.toString(16) + ': lookup type 5 format must be 1, 2 or 3.');
+    };
+
+    // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#CC
+    subtableParsers[6] = function parseLookup6() {
+        var start = this.offset + this.relativeOffset;
+        var substFormat = this.parseUShort();
+        if (substFormat === 1) {
+            return {
+                substFormat: 1,
+                coverage: this.parsePointer(Parser.coverage),
+                chainRuleSets: this.parseListOfLists(function() {
+                    return {
+                        backtrack: this.parseUShortList(),
+                        input: this.parseUShortList(this.parseShort() - 1),
+                        lookahead: this.parseUShortList(),
+                        lookupRecords: this.parseRecordList(lookupRecordDesc)
+                    };
+                })
+            };
+        } else if (substFormat === 2) {
+            return {
+                substFormat: 2,
+                coverage: this.parsePointer(Parser.coverage),
+                backtrackClassDef: this.parsePointer(Parser.classDef),
+                inputClassDef: this.parsePointer(Parser.classDef),
+                lookaheadClassDef: this.parsePointer(Parser.classDef),
+                chainClassSet: this.parseListOfLists(function() {
+                    return {
+                        backtrack: this.parseUShortList(),
+                        input: this.parseUShortList(this.parseShort() - 1),
+                        lookahead: this.parseUShortList(),
+                        lookupRecords: this.parseRecordList(lookupRecordDesc)
+                    };
+                })
+            };
+        } else if (substFormat === 3) {
+            return {
+                substFormat: 3,
+                backtrackCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+                inputCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+                lookaheadCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+                lookupRecords: this.parseRecordList(lookupRecordDesc)
+            };
+        }
+        check.assert(false, '0x' + start.toString(16) + ': lookup type 6 format must be 1, 2 or 3.');
+    };
+
+    // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#ES
+    subtableParsers[7] = function parseLookup7() {
+        // Extension Substitution subtable
+        var substFormat = this.parseUShort();
+        check.argument(substFormat === 1, 'GSUB Extension Substitution subtable identifier-format must be 1');
+        var extensionLookupType = this.parseUShort();
+        var extensionParser = new Parser(this.data, this.offset + this.parseULong());
+        return {
+            substFormat: 1,
+            lookupType: extensionLookupType,
+            extension: subtableParsers[extensionLookupType].call(extensionParser)
+        };
+    };
+
+    // https://www.microsoft.com/typography/OTSPEC/GSUB.htm#RCCS
+    subtableParsers[8] = function parseLookup8() {
+        var substFormat = this.parseUShort();
+        check.argument(substFormat === 1, 'GSUB Reverse Chaining Contextual Single Substitution Subtable identifier-format must be 1');
+        return {
+            substFormat: substFormat,
+            coverage: this.parsePointer(Parser.coverage),
+            backtrackCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+            lookaheadCoverage: this.parseList(Parser.pointer(Parser.coverage)),
+            substitutes: this.parseUShortList()
+        };
+    };
+
+    // https://www.microsoft.com/typography/OTSPEC/gsub.htm
+    function parseGsubTable(data, start) {
+        start = start || 0;
+        var p = new Parser(data, start);
+        var tableVersion = p.parseVersion();
+        check.argument(tableVersion === 1, 'Unsupported GSUB table version.');
+        return {
+            version: tableVersion,
+            scripts: p.parseScriptList(),
+            features: p.parseFeatureList(),
+            lookups: p.parseLookupList(subtableParsers)
+        };
+    }
+
+    // GSUB Writing //////////////////////////////////////////////
+    var subtableMakers = new Array(9);
+
+    subtableMakers[1] = function makeLookup1(subtable) {
+        if (subtable.substFormat === 1) {
+            return new table.Table('substitutionTable', [
+                {name: 'substFormat', type: 'USHORT', value: 1},
+                {name: 'coverage', type: 'TABLE', value: new table.Coverage(subtable.coverage)},
+                {name: 'deltaGlyphID', type: 'USHORT', value: subtable.deltaGlyphId}
+            ]);
+        } else {
+            return new table.Table('substitutionTable', [
+                {name: 'substFormat', type: 'USHORT', value: 2},
+                {name: 'coverage', type: 'TABLE', value: new table.Coverage(subtable.coverage)}
+            ].concat(table.ushortList('substitute', subtable.substitute)));
+        }
+        check.fail('Lookup type 1 substFormat must be 1 or 2.');
+    };
+
+    subtableMakers[3] = function makeLookup3(subtable) {
+        check.assert(subtable.substFormat === 1, 'Lookup type 3 substFormat must be 1.');
+        return new table.Table('substitutionTable', [
+            {name: 'substFormat', type: 'USHORT', value: 1},
+            {name: 'coverage', type: 'TABLE', value: new table.Coverage(subtable.coverage)}
+        ].concat(table.tableList('altSet', subtable.alternateSets, function(alternateSet) {
+            return new table.Table('alternateSetTable', table.ushortList('alternate', alternateSet));
+        })));
+    };
+
+    subtableMakers[4] = function makeLookup4(subtable) {
+        check.assert(subtable.substFormat === 1, 'Lookup type 4 substFormat must be 1.');
+        return new table.Table('substitutionTable', [
+            {name: 'substFormat', type: 'USHORT', value: 1},
+            {name: 'coverage', type: 'TABLE', value: new table.Coverage(subtable.coverage)}
+        ].concat(table.tableList('ligSet', subtable.ligatureSets, function(ligatureSet) {
+            return new table.Table('ligatureSetTable', table.tableList('ligature', ligatureSet, function(ligature) {
+                return new table.Table('ligatureTable',
+                    [{name: 'ligGlyph', type: 'USHORT', value: ligature.ligGlyph}]
+                    .concat(table.ushortList('component', ligature.components, ligature.components.length + 1))
+                );
+            }));
+        })));
+    };
+
+    function makeGsubTable(gsub) {
+        return new table.Table('GSUB', [
+            {name: 'version', type: 'ULONG', value: 0x10000},
+            {name: 'scripts', type: 'TABLE', value: new table.ScriptList(gsub.scripts)},
+            {name: 'features', type: 'TABLE', value: new table.FeatureList(gsub.features)},
+            {name: 'lookups', type: 'TABLE', value: new table.LookupList(gsub.lookups, subtableMakers)}
+        ]);
+    }
+
+    var gsub = { parse: parseGsubTable, make: makeGsubTable };
+
+    // The `GPOS` table contains kerning pairs, among other things.
+    // https://www.microsoft.com/typography/OTSPEC/gpos.htm
+
+    // Parse the metadata `meta` table.
+    // https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6meta.html
+    function parseMetaTable(data, start) {
+        var p = new parse.Parser(data, start);
+        var tableVersion = p.parseULong();
+        check.argument(tableVersion === 1, 'Unsupported META table version.');
+        p.parseULong(); // flags - currently unused and set to 0
+        p.parseULong(); // tableOffset
+        var numDataMaps = p.parseULong();
+
+        var tags = {};
+        for (var i = 0; i < numDataMaps; i++) {
+            var tag = p.parseTag();
+            var dataOffset = p.parseULong();
+            var dataLength = p.parseULong();
+            var text = decode.UTF8(data, start + dataOffset, dataLength);
+
+            tags[tag] = text;
+        }
+        return tags;
+    }
+
+    function makeMetaTable(tags) {
+        var numTags = Object.keys(tags).length;
+        var stringPool = '';
+        var stringPoolOffset = 16 + numTags * 12;
+
+        var result = new table.Table('meta', [
+            {name: 'version', type: 'ULONG', value: 1},
+            {name: 'flags', type: 'ULONG', value: 0},
+            {name: 'offset', type: 'ULONG', value: stringPoolOffset},
+            {name: 'numTags', type: 'ULONG', value: numTags}
+        ]);
+
+        for (var tag in tags) {
+            var pos = stringPool.length;
+            stringPool += tags[tag];
+
+            result.fields.push({name: 'tag ' + tag, type: 'TAG', value: tag});
+            result.fields.push({name: 'offset ' + tag, type: 'ULONG', value: stringPoolOffset + pos});
+            result.fields.push({name: 'length ' + tag, type: 'ULONG', value: tags[tag].length});
+        }
+
+        result.fields.push({name: 'stringPool', type: 'CHARARRAY', value: stringPool});
+
+        return result;
+    }
+
+    var meta = { parse: parseMetaTable, make: makeMetaTable };
+
+    // The `sfnt` wrapper provides organization for the tables in the font.
+    // It is the top-level data structure in a font.
+    // https://www.microsoft.com/typography/OTSPEC/otff.htm
+    // Recommendations for creating OpenType Fonts:
+    // http://www.microsoft.com/typography/otspec140/recom.htm
+
+    function log2(v) {
+        return Math.log(v) / Math.log(2) | 0;
+    }
+
+    function computeCheckSum(bytes) {
+        while (bytes.length % 4 !== 0) {
+            bytes.push(0);
+        }
+
+        var sum = 0;
+        for (var i = 0; i < bytes.length; i += 4) {
+            sum += (bytes[i] << 24) +
+                (bytes[i + 1] << 16) +
+                (bytes[i + 2] << 8) +
+                (bytes[i + 3]);
+        }
+
+        sum %= Math.pow(2, 32);
+        return sum;
+    }
+
+    function makeTableRecord(tag, checkSum, offset, length) {
+        return new table.Record('Table Record', [
+            {name: 'tag', type: 'TAG', value: tag !== undefined ? tag : ''},
+            {name: 'checkSum', type: 'ULONG', value: checkSum !== undefined ? checkSum : 0},
+            {name: 'offset', type: 'ULONG', value: offset !== undefined ? offset : 0},
+            {name: 'length', type: 'ULONG', value: length !== undefined ? length : 0}
+        ]);
+    }
+
+    function makeSfntTable(tables) {
+        var sfnt = new table.Table('sfnt', [
+            {name: 'version', type: 'TAG', value: 'OTTO'},
+            {name: 'numTables', type: 'USHORT', value: 0},
+            {name: 'searchRange', type: 'USHORT', value: 0},
+            {name: 'entrySelector', type: 'USHORT', value: 0},
+            {name: 'rangeShift', type: 'USHORT', value: 0}
+        ]);
+        sfnt.tables = tables;
+        sfnt.numTables = tables.length;
+        var highestPowerOf2 = Math.pow(2, log2(sfnt.numTables));
+        sfnt.searchRange = 16 * highestPowerOf2;
+        sfnt.entrySelector = log2(highestPowerOf2);
+        sfnt.rangeShift = sfnt.numTables * 16 - sfnt.searchRange;
+
+        var recordFields = [];
+        var tableFields = [];
+
+        var offset = sfnt.sizeOf() + (makeTableRecord().sizeOf() * sfnt.numTables);
+        while (offset % 4 !== 0) {
+            offset += 1;
+            tableFields.push({name: 'padding', type: 'BYTE', value: 0});
+        }
+
+        for (var i = 0; i < tables.length; i += 1) {
+            var t = tables[i];
+            check.argument(t.tableName.length === 4, 'Table name' + t.tableName + ' is invalid.');
+            var tableLength = t.sizeOf();
+            var tableRecord = makeTableRecord(t.tableName, computeCheckSum(t.encode()), offset, tableLength);
+            recordFields.push({name: tableRecord.tag + ' Table Record', type: 'RECORD', value: tableRecord});
+            tableFields.push({name: t.tableName + ' table', type: 'RECORD', value: t});
+            offset += tableLength;
+            check.argument(!isNaN(offset), 'Something went wrong calculating the offset.');
+            while (offset % 4 !== 0) {
+                offset += 1;
+                tableFields.push({name: 'padding', type: 'BYTE', value: 0});
+            }
+        }
+
+        // Table records need to be sorted alphabetically.
+        recordFields.sort(function(r1, r2) {
+            if (r1.value.tag > r2.value.tag) {
+                return 1;
+            } else {
+                return -1;
+            }
+        });
+
+        sfnt.fields = sfnt.fields.concat(recordFields);
+        sfnt.fields = sfnt.fields.concat(tableFields);
+        return sfnt;
+    }
+
+    // Get the metrics for a character. If the string has more than one character
+    // this function returns metrics for the first available character.
+    // You can provide optional fallback metrics if no characters are available.
+    function metricsForChar(font, chars, notFoundMetrics) {
+        for (var i = 0; i < chars.length; i += 1) {
+            var glyphIndex = font.charToGlyphIndex(chars[i]);
+            if (glyphIndex > 0) {
+                var glyph = font.glyphs.get(glyphIndex);
+                return glyph.getMetrics();
+            }
+        }
+
+        return notFoundMetrics;
+    }
+
+    function average(vs) {
+        var sum = 0;
+        for (var i = 0; i < vs.length; i += 1) {
+            sum += vs[i];
+        }
+
+        return sum / vs.length;
+    }
+
+    // Convert the font object to a SFNT data structure.
+    // This structure contains all the necessary tables and metadata to create a binary OTF file.
+    function fontToSfntTable(font) {
+        var xMins = [];
+        var yMins = [];
+        var xMaxs = [];
+        var yMaxs = [];
+        var advanceWidths = [];
+        var leftSideBearings = [];
+        var rightSideBearings = [];
+        var firstCharIndex;
+        var lastCharIndex = 0;
+        var ulUnicodeRange1 = 0;
+        var ulUnicodeRange2 = 0;
+        var ulUnicodeRange3 = 0;
+        var ulUnicodeRange4 = 0;
+
+        for (var i = 0; i < font.glyphs.length; i += 1) {
+            var glyph = font.glyphs.get(i);
+            var unicode = glyph.unicode | 0;
+
+            if (isNaN(glyph.advanceWidth)) {
+                throw new Error('Glyph ' + glyph.name + ' (' + i + '): advanceWidth is not a number.');
+            }
+
+            if (firstCharIndex > unicode || firstCharIndex === undefined) {
+                // ignore .notdef char
+                if (unicode > 0) {
+                    firstCharIndex = unicode;
+                }
+            }
+
+            if (lastCharIndex < unicode) {
+                lastCharIndex = unicode;
+            }
+
+            var position = os2.getUnicodeRange(unicode);
+            if (position < 32) {
+                ulUnicodeRange1 |= 1 << position;
+            } else if (position < 64) {
+                ulUnicodeRange2 |= 1 << position - 32;
+            } else if (position < 96) {
+                ulUnicodeRange3 |= 1 << position - 64;
+            } else if (position < 123) {
+                ulUnicodeRange4 |= 1 << position - 96;
+            } else {
+                throw new Error('Unicode ranges bits > 123 are reserved for internal usage');
+            }
+            // Skip non-important characters.
+            if (glyph.name === '.notdef') { continue; }
+            var metrics = glyph.getMetrics();
+            xMins.push(metrics.xMin);
+            yMins.push(metrics.yMin);
+            xMaxs.push(metrics.xMax);
+            yMaxs.push(metrics.yMax);
+            leftSideBearings.push(metrics.leftSideBearing);
+            rightSideBearings.push(metrics.rightSideBearing);
+            advanceWidths.push(glyph.advanceWidth);
+        }
+
+        var globals = {
+            xMin: Math.min.apply(null, xMins),
+            yMin: Math.min.apply(null, yMins),
+            xMax: Math.max.apply(null, xMaxs),
+            yMax: Math.max.apply(null, yMaxs),
+            advanceWidthMax: Math.max.apply(null, advanceWidths),
+            advanceWidthAvg: average(advanceWidths),
+            minLeftSideBearing: Math.min.apply(null, leftSideBearings),
+            maxLeftSideBearing: Math.max.apply(null, leftSideBearings),
+            minRightSideBearing: Math.min.apply(null, rightSideBearings)
+        };
+        globals.ascender = font.ascender;
+        globals.descender = font.descender;
+
+        var headTable = head.make({
+            flags: 3, // 00000011 (baseline for font at y=0; left sidebearing point at x=0)
+            unitsPerEm: font.unitsPerEm,
+            xMin: globals.xMin,
+            yMin: globals.yMin,
+            xMax: globals.xMax,
+            yMax: globals.yMax,
+            lowestRecPPEM: 3,
+            createdTimestamp: font.createdTimestamp
+        });
+
+        var hheaTable = hhea.make({
+            ascender: globals.ascender,
+            descender: globals.descender,
+            advanceWidthMax: globals.advanceWidthMax,
+            minLeftSideBearing: globals.minLeftSideBearing,
+            minRightSideBearing: globals.minRightSideBearing,
+            xMaxExtent: globals.maxLeftSideBearing + (globals.xMax - globals.xMin),
+            numberOfHMetrics: font.glyphs.length
+        });
+
+        var maxpTable = maxp.make(font.glyphs.length);
+
+        var os2Table = os2.make({
+            xAvgCharWidth: Math.round(globals.advanceWidthAvg),
+            usWeightClass: font.tables.os2.usWeightClass,
+            usWidthClass: font.tables.os2.usWidthClass,
+            usFirstCharIndex: firstCharIndex,
+            usLastCharIndex: lastCharIndex,
+            ulUnicodeRange1: ulUnicodeRange1,
+            ulUnicodeRange2: ulUnicodeRange2,
+            ulUnicodeRange3: ulUnicodeRange3,
+            ulUnicodeRange4: ulUnicodeRange4,
+            fsSelection: font.tables.os2.fsSelection, // REGULAR
+            // See http://typophile.com/node/13081 for more info on vertical metrics.
+            // We get metrics for typical characters (such as "x" for xHeight).
+            // We provide some fallback characters if characters are unavailable: their
+            // ordering was chosen experimentally.
+            sTypoAscender: globals.ascender,
+            sTypoDescender: globals.descender,
+            sTypoLineGap: 0,
+            usWinAscent: globals.yMax,
+            usWinDescent: Math.abs(globals.yMin),
+            ulCodePageRange1: 1, // FIXME: hard-code Latin 1 support for now
+            sxHeight: metricsForChar(font, 'xyvw', {yMax: Math.round(globals.ascender / 2)}).yMax,
+            sCapHeight: metricsForChar(font, 'HIKLEFJMNTZBDPRAGOQSUVWXY', globals).yMax,
+            usDefaultChar: font.hasChar(' ') ? 32 : 0, // Use space as the default character, if available.
+            usBreakChar: font.hasChar(' ') ? 32 : 0 // Use space as the break character, if available.
+        });
+
+        var hmtxTable = hmtx.make(font.glyphs);
+        var cmapTable = cmap.make(font.glyphs);
+
+        var englishFamilyName = font.getEnglishName('fontFamily');
+        var englishStyleName = font.getEnglishName('fontSubfamily');
+        var englishFullName = englishFamilyName + ' ' + englishStyleName;
+        var postScriptName = font.getEnglishName('postScriptName');
+        if (!postScriptName) {
+            postScriptName = englishFamilyName.replace(/\s/g, '') + '-' + englishStyleName;
+        }
+
+        var names = {};
+        for (var n in font.names) {
+            names[n] = font.names[n];
+        }
+
+        if (!names.uniqueID) {
+            names.uniqueID = {en: font.getEnglishName('manufacturer') + ':' + englishFullName};
+        }
+
+        if (!names.postScriptName) {
+            names.postScriptName = {en: postScriptName};
+        }
+
+        if (!names.preferredFamily) {
+            names.preferredFamily = font.names.fontFamily;
+        }
+
+        if (!names.preferredSubfamily) {
+            names.preferredSubfamily = font.names.fontSubfamily;
+        }
+
+        var languageTags = [];
+        var nameTable = _name.make(names, languageTags);
+        var ltagTable = (languageTags.length > 0 ? ltag.make(languageTags) : undefined);
+
+        var postTable = post.make();
+        var cffTable = cff.make(font.glyphs, {
+            version: font.getEnglishName('version'),
+            fullName: englishFullName,
+            familyName: englishFamilyName,
+            weightName: englishStyleName,
+            postScriptName: postScriptName,
+            unitsPerEm: font.unitsPerEm,
+            fontBBox: [0, globals.yMin, globals.ascender, globals.advanceWidthMax]
+        });
+
+        var metaTable = (font.metas && Object.keys(font.metas).length > 0) ? meta.make(font.metas) : undefined;
+
+        // The order does not matter because makeSfntTable() will sort them.
+        var tables = [headTable, hheaTable, maxpTable, os2Table, nameTable, cmapTable, postTable, cffTable, hmtxTable];
+        if (ltagTable) {
+            tables.push(ltagTable);
+        }
+        // Optional tables
+        if (font.tables.gsub) {
+            tables.push(gsub.make(font.tables.gsub));
+        }
+        if (metaTable) {
+            tables.push(metaTable);
+        }
+
+        var sfntTable = makeSfntTable(tables);
+
+        // Compute the font's checkSum and store it in head.checkSumAdjustment.
+        var bytes = sfntTable.encode();
+        var checkSum = computeCheckSum(bytes);
+        var tableFields = sfntTable.fields;
+        var checkSumAdjusted = false;
+        for (var i$1 = 0; i$1 < tableFields.length; i$1 += 1) {
+            if (tableFields[i$1].name === 'head table') {
+                tableFields[i$1].value.checkSumAdjustment = 0xB1B0AFBA - checkSum;
+                checkSumAdjusted = true;
+                break;
+            }
+        }
+
+        if (!checkSumAdjusted) {
+            throw new Error('Could not find head table with checkSum to adjust.');
+        }
+
+        return sfntTable;
+    }
+
+    var sfnt = { make: makeSfntTable, fontToTable: fontToSfntTable, computeCheckSum: computeCheckSum };
+
+    // The Layout object is the prototype of Substitution objects, and provides
+    // utility methods to manipulate common layout tables (GPOS, GSUB, GDEF...)
+
+    function searchTag(arr, tag) {
+        /* jshint bitwise: false */
+        var imin = 0;
+        var imax = arr.length - 1;
+        while (imin <= imax) {
+            var imid = (imin + imax) >>> 1;
+            var val = arr[imid].tag;
+            if (val === tag) {
+                return imid;
+            } else if (val < tag) {
+                imin = imid + 1;
+            } else { imax = imid - 1; }
+        }
+        // Not found: return -1-insertion point
+        return -imin - 1;
+    }
+
+    function binSearch(arr, value) {
+        /* jshint bitwise: false */
+        var imin = 0;
+        var imax = arr.length - 1;
+        while (imin <= imax) {
+            var imid = (imin + imax) >>> 1;
+            var val = arr[imid];
+            if (val === value) {
+                return imid;
+            } else if (val < value) {
+                imin = imid + 1;
+            } else { imax = imid - 1; }
+        }
+        // Not found: return -1-insertion point
+        return -imin - 1;
+    }
+
+    /**
+     * @exports opentype.Layout
+     * @class
+     */
+    function Layout(font, tableName) {
+        this.font = font;
+        this.tableName = tableName;
+    }
+
+    Layout.prototype = {
+
+        /**
+         * Binary search an object by "tag" property
+         * @instance
+         * @function searchTag
+         * @memberof opentype.Layout
+         * @param  {Array} arr
+         * @param  {string} tag
+         * @return {number}
+         */
+        searchTag: searchTag,
+
+        /**
+         * Binary search in a list of numbers
+         * @instance
+         * @function binSearch
+         * @memberof opentype.Layout
+         * @param  {Array} arr
+         * @param  {number} value
+         * @return {number}
+         */
+        binSearch: binSearch,
+
+        /**
+         * Get or create the Layout table (GSUB, GPOS etc).
+         * @param  {boolean} create - Whether to create a new one.
+         * @return {Object} The GSUB or GPOS table.
+         */
+        getTable: function(create) {
+            var layout = this.font.tables[this.tableName];
+            if (!layout && create) {
+                layout = this.font.tables[this.tableName] = this.createDefaultTable();
+            }
+            return layout;
+        },
+
+        /**
+         * Returns all scripts in the substitution table.
+         * @instance
+         * @return {Array}
+         */
+        getScriptNames: function() {
+            var layout = this.getTable();
+            if (!layout) { return []; }
+            return layout.scripts.map(function(script) {
+                return script.tag;
+            });
+        },
+
+        /**
+         * Returns the best bet for a script name.
+         * Returns 'DFLT' if it exists.
+         * If not, returns 'latn' if it exists.
+         * If neither exist, returns undefined.
+         */
+        getDefaultScriptName: function() {
+            var layout = this.getTable();
+            if (!layout) { return; }
+            var hasLatn = false;
+            for (var i = 0; i < layout.scripts.length; i++) {
+                var name = layout.scripts[i].tag;
+                if (name === 'DFLT') { return name; }
+                if (name === 'latn') { hasLatn = true; }
+            }
+            if (hasLatn) { return 'latn'; }
+        },
+
+        /**
+         * Returns all LangSysRecords in the given script.
+         * @instance
+         * @param {string} [script='DFLT']
+         * @param {boolean} create - forces the creation of this script table if it doesn't exist.
+         * @return {Object} An object with tag and script properties.
+         */
+        getScriptTable: function(script, create) {
+            var layout = this.getTable(create);
+            if (layout) {
+                script = script || 'DFLT';
+                var scripts = layout.scripts;
+                var pos = searchTag(layout.scripts, script);
+                if (pos >= 0) {
+                    return scripts[pos].script;
+                } else if (create) {
+                    var scr = {
+                        tag: script,
+                        script: {
+                            defaultLangSys: {reserved: 0, reqFeatureIndex: 0xffff, featureIndexes: []},
+                            langSysRecords: []
+                        }
+                    };
+                    scripts.splice(-1 - pos, 0, scr);
+                    return scr.script;
+                }
+            }
+        },
+
+        /**
+         * Returns a language system table
+         * @instance
+         * @param {string} [script='DFLT']
+         * @param {string} [language='dlft']
+         * @param {boolean} create - forces the creation of this langSysTable if it doesn't exist.
+         * @return {Object}
+         */
+        getLangSysTable: function(script, language, create) {
+            var scriptTable = this.getScriptTable(script, create);
+            if (scriptTable) {
+                if (!language || language === 'dflt' || language === 'DFLT') {
+                    return scriptTable.defaultLangSys;
+                }
+                var pos = searchTag(scriptTable.langSysRecords, language);
+                if (pos >= 0) {
+                    return scriptTable.langSysRecords[pos].langSys;
+                } else if (create) {
+                    var langSysRecord = {
+                        tag: language,
+                        langSys: {reserved: 0, reqFeatureIndex: 0xffff, featureIndexes: []}
+                    };
+                    scriptTable.langSysRecords.splice(-1 - pos, 0, langSysRecord);
+                    return langSysRecord.langSys;
+                }
+            }
+        },
+
+        /**
+         * Get a specific feature table.
+         * @instance
+         * @param {string} [script='DFLT']
+         * @param {string} [language='dlft']
+         * @param {string} feature - One of the codes listed at https://www.microsoft.com/typography/OTSPEC/featurelist.htm
+         * @param {boolean} create - forces the creation of the feature table if it doesn't exist.
+         * @return {Object}
+         */
+        getFeatureTable: function(script, language, feature, create) {
+            var langSysTable = this.getLangSysTable(script, language, create);
+            if (langSysTable) {
+                var featureRecord;
+                var featIndexes = langSysTable.featureIndexes;
+                var allFeatures = this.font.tables[this.tableName].features;
+                // The FeatureIndex array of indices is in arbitrary order,
+                // even if allFeatures is sorted alphabetically by feature tag.
+                for (var i = 0; i < featIndexes.length; i++) {
+                    featureRecord = allFeatures[featIndexes[i]];
+                    if (featureRecord.tag === feature) {
+                        return featureRecord.feature;
+                    }
+                }
+                if (create) {
+                    var index = allFeatures.length;
+                    // Automatic ordering of features would require to shift feature indexes in the script list.
+                    check.assert(index === 0 || feature >= allFeatures[index - 1].tag, 'Features must be added in alphabetical order.');
+                    featureRecord = {
+                        tag: feature,
+                        feature: { params: 0, lookupListIndexes: [] }
+                    };
+                    allFeatures.push(featureRecord);
+                    featIndexes.push(index);
+                    return featureRecord.feature;
+                }
+            }
+        },
+
+        /**
+         * Get the lookup tables of a given type for a script/language/feature.
+         * @instance
+         * @param {string} [script='DFLT']
+         * @param {string} [language='dlft']
+         * @param {string} feature - 4-letter feature code
+         * @param {number} lookupType - 1 to 8
+         * @param {boolean} create - forces the creation of the lookup table if it doesn't exist, with no subtables.
+         * @return {Object[]}
+         */
+        getLookupTables: function(script, language, feature, lookupType, create) {
+            var featureTable = this.getFeatureTable(script, language, feature, create);
+            var tables = [];
+            if (featureTable) {
+                var lookupTable;
+                var lookupListIndexes = featureTable.lookupListIndexes;
+                var allLookups = this.font.tables[this.tableName].lookups;
+                // lookupListIndexes are in no particular order, so use naive search.
+                for (var i = 0; i < lookupListIndexes.length; i++) {
+                    lookupTable = allLookups[lookupListIndexes[i]];
+                    if (lookupTable.lookupType === lookupType) {
+                        tables.push(lookupTable);
+                    }
+                }
+                if (tables.length === 0 && create) {
+                    lookupTable = {
+                        lookupType: lookupType,
+                        lookupFlag: 0,
+                        subtables: [],
+                        markFilteringSet: undefined
+                    };
+                    var index = allLookups.length;
+                    allLookups.push(lookupTable);
+                    lookupListIndexes.push(index);
+                    return [lookupTable];
+                }
+            }
+            return tables;
+        },
+
+        /**
+         * Returns the list of glyph indexes of a coverage table.
+         * Format 1: the list is stored raw
+         * Format 2: compact list as range records.
+         * @instance
+         * @param  {Object} coverageTable
+         * @return {Array}
+         */
+        expandCoverage: function(coverageTable) {
+            if (coverageTable.format === 1) {
+                return coverageTable.glyphs;
+            } else {
+                var glyphs = [];
+                var ranges = coverageTable.ranges;
+                for (var i = 0; i < ranges.length; i++) {
+                    var range = ranges[i];
+                    var start = range.start;
+                    var end = range.end;
+                    for (var j = start; j <= end; j++) {
+                        glyphs.push(j);
+                    }
+                }
+                return glyphs;
+            }
+        }
+
+    };
+
+    // The Substitution object provides utility methods to manipulate
+    // the GSUB substitution table.
+
+    /**
+     * @exports opentype.Substitution
+     * @class
+     * @extends opentype.Layout
+     * @param {opentype.Font}
+     * @constructor
+     */
+    function Substitution(font) {
+        Layout.call(this, font, 'gsub');
+    }
+
+    // Check if 2 arrays of primitives are equal.
+    function arraysEqual(ar1, ar2) {
+        var n = ar1.length;
+        if (n !== ar2.length) { return false; }
+        for (var i = 0; i < n; i++) {
+            if (ar1[i] !== ar2[i]) { return false; }
+        }
+        return true;
+    }
+
+    // Find the first subtable of a lookup table in a particular format.
+    function getSubstFormat(lookupTable, format, defaultSubtable) {
+        var subtables = lookupTable.subtables;
+        for (var i = 0; i < subtables.length; i++) {
+            var subtable = subtables[i];
+            if (subtable.substFormat === format) {
+                return subtable;
+            }
+        }
+        if (defaultSubtable) {
+            subtables.push(defaultSubtable);
+            return defaultSubtable;
+        }
+        return undefined;
+    }
+
+    Substitution.prototype = Layout.prototype;
+
+    /**
+     * Create a default GSUB table.
+     * @return {Object} gsub - The GSUB table.
+     */
+    Substitution.prototype.createDefaultTable = function() {
+        // Generate a default empty GSUB table with just a DFLT script and dflt lang sys.
+        return {
+            version: 1,
+            scripts: [{
+                tag: 'DFLT',
+                script: {
+                    defaultLangSys: { reserved: 0, reqFeatureIndex: 0xffff, featureIndexes: [] },
+                    langSysRecords: []
+                }
+            }],
+            features: [],
+            lookups: []
+        };
+    };
+
+    /**
+     * List all single substitutions (lookup type 1) for a given script, language, and feature.
+     * @param {string} [script='DFLT']
+     * @param {string} [language='dflt']
+     * @param {string} feature - 4-character feature name ('aalt', 'salt', 'ss01'...)
+     * @return {Array} substitutions - The list of substitutions.
+     */
+    Substitution.prototype.getSingle = function(feature, script, language) {
+        var this$1 = this;
+
+        var substitutions = [];
+        var lookupTables = this.getLookupTables(script, language, feature, 1);
+        for (var idx = 0; idx < lookupTables.length; idx++) {
+            var subtables = lookupTables[idx].subtables;
+            for (var i = 0; i < subtables.length; i++) {
+                var subtable = subtables[i];
+                var glyphs = this$1.expandCoverage(subtable.coverage);
+                var j = (void 0);
+                if (subtable.substFormat === 1) {
+                    var delta = subtable.deltaGlyphId;
+                    for (j = 0; j < glyphs.length; j++) {
+                        var glyph = glyphs[j];
+                        substitutions.push({ sub: glyph, by: glyph + delta });
+                    }
+                } else {
+                    var substitute = subtable.substitute;
+                    for (j = 0; j < glyphs.length; j++) {
+                        substitutions.push({ sub: glyphs[j], by: substitute[j] });
+                    }
+                }
+            }
+        }
+        return substitutions;
+    };
+
+    /**
+     * List all alternates (lookup type 3) for a given script, language, and feature.
+     * @param {string} [script='DFLT']
+     * @param {string} [language='dflt']
+     * @param {string} feature - 4-character feature name ('aalt', 'salt'...)
+     * @return {Array} alternates - The list of alternates
+     */
+    Substitution.prototype.getAlternates = function(feature, script, language) {
+        var this$1 = this;
+
+        var alternates = [];
+        var lookupTables = this.getLookupTables(script, language, feature, 3);
+        for (var idx = 0; idx < lookupTables.length; idx++) {
+            var subtables = lookupTables[idx].subtables;
+            for (var i = 0; i < subtables.length; i++) {
+                var subtable = subtables[i];
+                var glyphs = this$1.expandCoverage(subtable.coverage);
+                var alternateSets = subtable.alternateSets;
+                for (var j = 0; j < glyphs.length; j++) {
+                    alternates.push({ sub: glyphs[j], by: alternateSets[j] });
+                }
+            }
+        }
+        return alternates;
+    };
+
+    /**
+     * List all ligatures (lookup type 4) for a given script, language, and feature.
+     * The result is an array of ligature objects like { sub: [ids], by: id }
+     * @param {string} feature - 4-letter feature name ('liga', 'rlig', 'dlig'...)
+     * @param {string} [script='DFLT']
+     * @param {string} [language='dflt']
+     * @return {Array} ligatures - The list of ligatures.
+     */
+    Substitution.prototype.getLigatures = function(feature, script, language) {
+        var this$1 = this;
+
+        var ligatures = [];
+        var lookupTables = this.getLookupTables(script, language, feature, 4);
+        for (var idx = 0; idx < lookupTables.length; idx++) {
+            var subtables = lookupTables[idx].subtables;
+            for (var i = 0; i < subtables.length; i++) {
+                var subtable = subtables[i];
+                var glyphs = this$1.expandCoverage(subtable.coverage);
+                var ligatureSets = subtable.ligatureSets;
+                for (var j = 0; j < glyphs.length; j++) {
+                    var startGlyph = glyphs[j];
+                    var ligSet = ligatureSets[j];
+                    for (var k = 0; k < ligSet.length; k++) {
+                        var lig = ligSet[k];
+                        ligatures.push({
+                            sub: [startGlyph].concat(lig.components),
+                            by: lig.ligGlyph
+                        });
+                    }
+                }
+            }
+        }
+        return ligatures;
+    };
+
+    /**
+     * Add or modify a single substitution (lookup type 1)
+     * Format 2, more flexible, is always used.
+     * @param {string} feature - 4-letter feature name ('liga', 'rlig', 'dlig'...)
+     * @param {Object} substitution - { sub: id, delta: number } for format 1 or { sub: id, by: id } for format 2.
+     * @param {string} [script='DFLT']
+     * @param {string} [language='dflt']
+     */
+    Substitution.prototype.addSingle = function(feature, substitution, script, language) {
+        var lookupTable = this.getLookupTables(script, language, feature, 1, true)[0];
+        var subtable = getSubstFormat(lookupTable, 2, {                // lookup type 1 subtable, format 2, coverage format 1
+            substFormat: 2,
+            coverage: {format: 1, glyphs: []},
+            substitute: []
+        });
+        check.assert(subtable.coverage.format === 1, 'Ligature: unable to modify coverage table format ' + subtable.coverage.format);
+        var coverageGlyph = substitution.sub;
+        var pos = this.binSearch(subtable.coverage.glyphs, coverageGlyph);
+        if (pos < 0) {
+            pos = -1 - pos;
+            subtable.coverage.glyphs.splice(pos, 0, coverageGlyph);
+            subtable.substitute.splice(pos, 0, 0);
+        }
+        subtable.substitute[pos] = substitution.by;
+    };
+
+    /**
+     * Add or modify an alternate substitution (lookup type 1)
+     * @param {string} feature - 4-letter feature name ('liga', 'rlig', 'dlig'...)
+     * @param {Object} substitution - { sub: id, by: [ids] }
+     * @param {string} [script='DFLT']
+     * @param {string} [language='dflt']
+     */
+    Substitution.prototype.addAlternate = function(feature, substitution, script, language) {
+        var lookupTable = this.getLookupTables(script, language, feature, 3, true)[0];
+        var subtable = getSubstFormat(lookupTable, 1, {                // lookup type 3 subtable, format 1, coverage format 1
+            substFormat: 1,
+            coverage: {format: 1, glyphs: []},
+            alternateSets: []
+        });
+        check.assert(subtable.coverage.format === 1, 'Ligature: unable to modify coverage table format ' + subtable.coverage.format);
+        var coverageGlyph = substitution.sub;
+        var pos = this.binSearch(subtable.coverage.glyphs, coverageGlyph);
+        if (pos < 0) {
+            pos = -1 - pos;
+            subtable.coverage.glyphs.splice(pos, 0, coverageGlyph);
+            subtable.alternateSets.splice(pos, 0, 0);
+        }
+        subtable.alternateSets[pos] = substitution.by;
+    };
+
+    /**
+     * Add a ligature (lookup type 4)
+     * Ligatures with more components must be stored ahead of those with fewer components in order to be found
+     * @param {string} feature - 4-letter feature name ('liga', 'rlig', 'dlig'...)
+     * @param {Object} ligature - { sub: [ids], by: id }
+     * @param {string} [script='DFLT']
+     * @param {string} [language='dflt']
+     */
+    Substitution.prototype.addLigature = function(feature, ligature, script, language) {
+        var lookupTable = this.getLookupTables(script, language, feature, 4, true)[0];
+        var subtable = lookupTable.subtables[0];
+        if (!subtable) {
+            subtable = {                // lookup type 4 subtable, format 1, coverage format 1
+                substFormat: 1,
+                coverage: { format: 1, glyphs: [] },
+                ligatureSets: []
+            };
+            lookupTable.subtables[0] = subtable;
+        }
+        check.assert(subtable.coverage.format === 1, 'Ligature: unable to modify coverage table format ' + subtable.coverage.format);
+        var coverageGlyph = ligature.sub[0];
+        var ligComponents = ligature.sub.slice(1);
+        var ligatureTable = {
+            ligGlyph: ligature.by,
+            components: ligComponents
+        };
+        var pos = this.binSearch(subtable.coverage.glyphs, coverageGlyph);
+        if (pos >= 0) {
+            // ligatureSet already exists
+            var ligatureSet = subtable.ligatureSets[pos];
+            for (var i = 0; i < ligatureSet.length; i++) {
+                // If ligature already exists, return.
+                if (arraysEqual(ligatureSet[i].components, ligComponents)) {
+                    return;
+                }
+            }
+            // ligature does not exist: add it.
+            ligatureSet.push(ligatureTable);
+        } else {
+            // Create a new ligatureSet and add coverage for the first glyph.
+            pos = -1 - pos;
+            subtable.coverage.glyphs.splice(pos, 0, coverageGlyph);
+            subtable.ligatureSets.splice(pos, 0, [ligatureTable]);
+        }
+    };
+
+    /**
+     * List all feature data for a given script and language.
+     * @param {string} feature - 4-letter feature name
+     * @param {string} [script='DFLT']
+     * @param {string} [language='dflt']
+     * @return {Array} substitutions - The list of substitutions.
+     */
+    Substitution.prototype.getFeature = function(feature, script, language) {
+        if (/ss\d\d/.test(feature)) {               // ss01 - ss20
+            return this.getSingle(feature, script, language);
+        }
+        switch (feature) {
+            case 'aalt':
+            case 'salt':
+                return this.getSingle(feature, script, language)
+                        .concat(this.getAlternates(feature, script, language));
+            case 'dlig':
+            case 'liga':
+            case 'rlig': return this.getLigatures(feature, script, language);
+        }
+        return undefined;
+    };
+
+    /**
+     * Add a substitution to a feature for a given script and language.
+     * @param {string} feature - 4-letter feature name
+     * @param {Object} sub - the substitution to add (an object like { sub: id or [ids], by: id or [ids] })
+     * @param {string} [script='DFLT']
+     * @param {string} [language='dflt']
+     */
+    Substitution.prototype.add = function(feature, sub, script, language) {
+        if (/ss\d\d/.test(feature)) {               // ss01 - ss20
+            return this.addSingle(feature, sub, script, language);
+        }
+        switch (feature) {
+            case 'aalt':
+            case 'salt':
+                if (typeof sub.by === 'number') {
+                    return this.addSingle(feature, sub, script, language);
+                }
+                return this.addAlternate(feature, sub, script, language);
+            case 'dlig':
+            case 'liga':
+            case 'rlig':
+                return this.addLigature(feature, sub, script, language);
+        }
+        return undefined;
+    };
+
+    function isBrowser() {
+        return typeof window !== 'undefined';
+    }
+
+    function nodeBufferToArrayBuffer(buffer) {
+        var ab = new ArrayBuffer(buffer.length);
+        var view = new Uint8Array(ab);
+        for (var i = 0; i < buffer.length; ++i) {
+            view[i] = buffer[i];
+        }
+
+        return ab;
+    }
+
+    function arrayBufferToNodeBuffer(ab) {
+        var buffer = new Buffer(ab.byteLength);
+        var view = new Uint8Array(ab);
+        for (var i = 0; i < buffer.length; ++i) {
+            buffer[i] = view[i];
+        }
+
+        return buffer;
+    }
+
+    function checkArgument(expression, message) {
+        if (!expression) {
+            throw message;
+        }
+    }
+
+    /* A TrueType font hinting interpreter.
+    *
+    * (c) 2017 Axel Kittenberger
+    *
+    * This interpreter has been implemented according to this documentation:
+    * https://developer.apple.com/fonts/TrueType-Reference-Manual/RM05/Chap5.html
+    *
+    * According to the documentation F24DOT6 values are used for pixels.
+    * That means calculation is 1/64 pixel accurate and uses integer operations.
+    * However, Javascript has floating point operations by default and only
+    * those are available. One could make a case to simulate the 1/64 accuracy
+    * exactly by truncating after every division operation
+    * (for example with << 0) to get pixel exactly results as other TrueType
+    * implementations. It may make sense since some fonts are pixel optimized
+    * by hand using DELTAP instructions. The current implementation doesn't
+    * and rather uses full floating point precision.
+    *
+    * xScale, yScale and rotation is currently ignored.
+    *
+    * A few non-trivial instructions are missing as I didn't encounter yet
+    * a font that used them to test a possible implementation.
+    *
+    * Some fonts seem to use undocumented features regarding the twilight zone.
+    * Only some of them are implemented as they were encountered.
+    *
+    * The exports.DEBUG statements are removed on the minified distribution file.
+    */
+    var instructionTable;
+    var exec;
+    var execGlyph;
+    var execComponent;
+
+    /*
+    * Creates a hinting object.
+    *
+    * There ought to be exactly one
+    * for each truetype font that is used for hinting.
+    */
+    function Hinting(font) {
+        // the font this hinting object is for
+        this.font = font;
+
+        // cached states
+        this._fpgmState  =
+        this._prepState  =
+            undefined;
+
+        // errorState
+        // 0 ... all okay
+        // 1 ... had an error in a glyf,
+        //       continue working but stop spamming
+        //       the console
+        // 2 ... error at prep, stop hinting at this ppem
+        // 3 ... error at fpeg, stop hinting for this font at all
+        this._errorState = 0;
+    }
+
+    /*
+    * Not rounding.
+    */
+    function roundOff(v) {
+        return v;
+    }
+
+    /*
+    * Rounding to grid.
+    */
+    function roundToGrid(v) {
+        //Rounding in TT is supposed to "symmetrical around zero"
+        return Math.sign(v) * Math.round(Math.abs(v));
+    }
+
+    /*
+    * Rounding to double grid.
+    */
+    function roundToDoubleGrid(v) {
+        return Math.sign(v) * Math.round(Math.abs(v * 2)) / 2;
+    }
+
+    /*
+    * Rounding to half grid.
+    */
+    function roundToHalfGrid(v) {
+        return Math.sign(v) * (Math.round(Math.abs(v) + 0.5) - 0.5);
+    }
+
+    /*
+    * Rounding to up to grid.
+    */
+    function roundUpToGrid(v) {
+        return Math.sign(v) * Math.ceil(Math.abs(v));
+    }
+
+    /*
+    * Rounding to down to grid.
+    */
+    function roundDownToGrid(v) {
+        return Math.sign(v) * Math.floor(Math.abs(v));
+    }
+
+    /*
+    * Super rounding.
+    */
+    var roundSuper = function (v) {
+        var period = this.srPeriod;
+        var phase = this.srPhase;
+        var threshold = this.srThreshold;
+        var sign = 1;
+
+        if (v < 0) {
+            v = -v;
+            sign = -1;
+        }
+
+        v += threshold - phase;
+
+        v = Math.trunc(v / period) * period;
+
+        v += phase;
+
+        // according to http://xgridfit.sourceforge.net/round.html
+        if (sign > 0 && v < 0) { return phase; }
+        if (sign < 0 && v > 0) { return -phase; }
+
+        return v * sign;
+    };
+
+    /*
+    * Unit vector of x-axis.
+    */
+    var xUnitVector = {
+        x: 1,
+
+        y: 0,
+
+        axis: 'x',
+
+        // Gets the projected distance between two points.
+        // o1/o2 ... if true, respective original position is used.
+        distance: function (p1, p2, o1, o2) {
+            return (o1 ? p1.xo : p1.x) - (o2 ? p2.xo : p2.x);
+        },
+
+        // Moves point p so the moved position has the same relative
+        // position to the moved positions of rp1 and rp2 than the
+        // original positions had.
+        //
+        // See APPENDIX on INTERPOLATE at the bottom of this file.
+        interpolate: function (p, rp1, rp2, pv) {
+            var do1;
+            var do2;
+            var doa1;
+            var doa2;
+            var dm1;
+            var dm2;
+            var dt;
+
+            if (!pv || pv === this) {
+                do1 = p.xo - rp1.xo;
+                do2 = p.xo - rp2.xo;
+                dm1 = rp1.x - rp1.xo;
+                dm2 = rp2.x - rp2.xo;
+                doa1 = Math.abs(do1);
+                doa2 = Math.abs(do2);
+                dt = doa1 + doa2;
+
+                if (dt === 0) {
+                    p.x = p.xo + (dm1 + dm2) / 2;
+                    return;
+                }
+
+                p.x = p.xo + (dm1 * doa2 + dm2 * doa1) / dt;
+                return;
+            }
+
+            do1 = pv.distance(p, rp1, true, true);
+            do2 = pv.distance(p, rp2, true, true);
+            dm1 = pv.distance(rp1, rp1, false, true);
+            dm2 = pv.distance(rp2, rp2, false, true);
+            doa1 = Math.abs(do1);
+            doa2 = Math.abs(do2);
+            dt = doa1 + doa2;
+
+            if (dt === 0) {
+                xUnitVector.setRelative(p, p, (dm1 + dm2) / 2, pv, true);
+                return;
+            }
+
+            xUnitVector.setRelative(p, p, (dm1 * doa2 + dm2 * doa1) / dt, pv, true);
+        },
+
+        // Slope of line normal to this
+        normalSlope: Number.NEGATIVE_INFINITY,
+
+        // Sets the point 'p' relative to point 'rp'
+        // by the distance 'd'.
+        //
+        // See APPENDIX on SETRELATIVE at the bottom of this file.
+        //
+        // p   ... point to set
+        // rp  ... reference point
+        // d   ... distance on projection vector
+        // pv  ... projection vector (undefined = this)
+        // org ... if true, uses the original position of rp as reference.
+        setRelative: function (p, rp, d, pv, org) {
+            if (!pv || pv === this) {
+                p.x = (org ? rp.xo : rp.x) + d;
+                return;
+            }
+
+            var rpx = org ? rp.xo : rp.x;
+            var rpy = org ? rp.yo : rp.y;
+            var rpdx = rpx + d * pv.x;
+            var rpdy = rpy + d * pv.y;
+
+            p.x = rpdx + (p.y - rpdy) / pv.normalSlope;
+        },
+
+        // Slope of vector line.
+        slope: 0,
+
+        // Touches the point p.
+        touch: function (p) {
+            p.xTouched = true;
+        },
+
+        // Tests if a point p is touched.
+        touched: function (p) {
+            return p.xTouched;
+        },
+
+        // Untouches the point p.
+        untouch: function (p) {
+            p.xTouched = false;
+        }
+    };
+
+    /*
+    * Unit vector of y-axis.
+    */
+    var yUnitVector = {
+        x: 0,
+
+        y: 1,
+
+        axis: 'y',
+
+        // Gets the projected distance between two points.
+        // o1/o2 ... if true, respective original position is used.
+        distance: function (p1, p2, o1, o2) {
+            return (o1 ? p1.yo : p1.y) - (o2 ? p2.yo : p2.y);
+        },
+
+        // Moves point p so the moved position has the same relative
+        // position to the moved positions of rp1 and rp2 than the
+        // original positions had.
+        //
+        // See APPENDIX on INTERPOLATE at the bottom of this file.
+        interpolate: function (p, rp1, rp2, pv) {
+            var do1;
+            var do2;
+            var doa1;
+            var doa2;
+            var dm1;
+            var dm2;
+            var dt;
+
+            if (!pv || pv === this) {
+                do1 = p.yo - rp1.yo;
+                do2 = p.yo - rp2.yo;
+                dm1 = rp1.y - rp1.yo;
+                dm2 = rp2.y - rp2.yo;
+                doa1 = Math.abs(do1);
+                doa2 = Math.abs(do2);
+                dt = doa1 + doa2;
+
+                if (dt === 0) {
+                    p.y = p.yo + (dm1 + dm2) / 2;
+                    return;
+                }
+
+                p.y = p.yo + (dm1 * doa2 + dm2 * doa1) / dt;
+                return;
+            }
+
+            do1 = pv.distance(p, rp1, true, true);
+            do2 = pv.distance(p, rp2, true, true);
+            dm1 = pv.distance(rp1, rp1, false, true);
+            dm2 = pv.distance(rp2, rp2, false, true);
+            doa1 = Math.abs(do1);
+            doa2 = Math.abs(do2);
+            dt = doa1 + doa2;
+
+            if (dt === 0) {
+                yUnitVector.setRelative(p, p, (dm1 + dm2) / 2, pv, true);
+                return;
+            }
+
+            yUnitVector.setRelative(p, p, (dm1 * doa2 + dm2 * doa1) / dt, pv, true);
+        },
+
+        // Slope of line normal to this.
+        normalSlope: 0,
+
+        // Sets the point 'p' relative to point 'rp'
+        // by the distance 'd'
+        //
+        // See APPENDIX on SETRELATIVE at the bottom of this file.
+        //
+        // p   ... point to set
+        // rp  ... reference point
+        // d   ... distance on projection vector
+        // pv  ... projection vector (undefined = this)
+        // org ... if true, uses the original position of rp as reference.
+        setRelative: function (p, rp, d, pv, org) {
+            if (!pv || pv === this) {
+                p.y = (org ? rp.yo : rp.y) + d;
+                return;
+            }
+
+            var rpx = org ? rp.xo : rp.x;
+            var rpy = org ? rp.yo : rp.y;
+            var rpdx = rpx + d * pv.x;
+            var rpdy = rpy + d * pv.y;
+
+            p.y = rpdy + pv.normalSlope * (p.x - rpdx);
+        },
+
+        // Slope of vector line.
+        slope: Number.POSITIVE_INFINITY,
+
+        // Touches the point p.
+        touch: function (p) {
+            p.yTouched = true;
+        },
+
+        // Tests if a point p is touched.
+        touched: function (p) {
+            return p.yTouched;
+        },
+
+        // Untouches the point p.
+        untouch: function (p) {
+            p.yTouched = false;
+        }
+    };
+
+    Object.freeze(xUnitVector);
+    Object.freeze(yUnitVector);
+
+    /*
+    * Creates a unit vector that is not x- or y-axis.
+    */
+    function UnitVector(x, y) {
+        this.x = x;
+        this.y = y;
+        this.axis = undefined;
+        this.slope = y / x;
+        this.normalSlope = -x / y;
+        Object.freeze(this);
+    }
+
+    /*
+    * Gets the projected distance between two points.
+    * o1/o2 ... if true, respective original position is used.
+    */
+    UnitVector.prototype.distance = function(p1, p2, o1, o2) {
+        return (
+            this.x * xUnitVector.distance(p1, p2, o1, o2) +
+            this.y * yUnitVector.distance(p1, p2, o1, o2)
+        );
+    };
+
+    /*
+    * Moves point p so the moved position has the same relative
+    * position to the moved positions of rp1 and rp2 than the
+    * original positions had.
+    *
+    * See APPENDIX on INTERPOLATE at the bottom of this file.
+    */
+    UnitVector.prototype.interpolate = function(p, rp1, rp2, pv) {
+        var dm1;
+        var dm2;
+        var do1;
+        var do2;
+        var doa1;
+        var doa2;
+        var dt;
+
+        do1 = pv.distance(p, rp1, true, true);
+        do2 = pv.distance(p, rp2, true, true);
+        dm1 = pv.distance(rp1, rp1, false, true);
+        dm2 = pv.distance(rp2, rp2, false, true);
+        doa1 = Math.abs(do1);
+        doa2 = Math.abs(do2);
+        dt = doa1 + doa2;
+
+        if (dt === 0) {
+            this.setRelative(p, p, (dm1 + dm2) / 2, pv, true);
+            return;
+        }
+
+        this.setRelative(p, p, (dm1 * doa2 + dm2 * doa1) / dt, pv, true);
+    };
+
+    /*
+    * Sets the point 'p' relative to point 'rp'
+    * by the distance 'd'
+    *
+    * See APPENDIX on SETRELATIVE at the bottom of this file.
+    *
+    * p   ...  point to set
+    * rp  ... reference point
+    * d   ... distance on projection vector
+    * pv  ... projection vector (undefined = this)
+    * org ... if true, uses the original position of rp as reference.
+    */
+    UnitVector.prototype.setRelative = function(p, rp, d, pv, org) {
+        pv = pv || this;
+
+        var rpx = org ? rp.xo : rp.x;
+        var rpy = org ? rp.yo : rp.y;
+        var rpdx = rpx + d * pv.x;
+        var rpdy = rpy + d * pv.y;
+
+        var pvns = pv.normalSlope;
+        var fvs = this.slope;
+
+        var px = p.x;
+        var py = p.y;
+
+        p.x = (fvs * px - pvns * rpdx + rpdy - py) / (fvs - pvns);
+        p.y = fvs * (p.x - px) + py;
+    };
+
+    /*
+    * Touches the point p.
+    */
+    UnitVector.prototype.touch = function(p) {
+        p.xTouched = true;
+        p.yTouched = true;
+    };
+
+    /*
+    * Returns a unit vector with x/y coordinates.
+    */
+    function getUnitVector(x, y) {
+        var d = Math.sqrt(x * x + y * y);
+
+        x /= d;
+        y /= d;
+
+        if (x === 1 && y === 0) { return xUnitVector; }
+        else if (x === 0 && y === 1) { return yUnitVector; }
+        else { return new UnitVector(x, y); }
+    }
+
+    /*
+    * Creates a point in the hinting engine.
+    */
+    function HPoint(
+        x,
+        y,
+        lastPointOfContour,
+        onCurve
+    ) {
+        this.x = this.xo = Math.round(x * 64) / 64; // hinted x value and original x-value
+        this.y = this.yo = Math.round(y * 64) / 64; // hinted y value and original y-value
+
+        this.lastPointOfContour = lastPointOfContour;
+        this.onCurve = onCurve;
+        this.prevPointOnContour = undefined;
+        this.nextPointOnContour = undefined;
+        this.xTouched = false;
+        this.yTouched = false;
+
+        Object.preventExtensions(this);
+    }
+
+    /*
+    * Returns the next touched point on the contour.
+    *
+    * v  ... unit vector to test touch axis.
+    */
+    HPoint.prototype.nextTouched = function(v) {
+        var p = this.nextPointOnContour;
+
+        while (!v.touched(p) && p !== this) { p = p.nextPointOnContour; }
+
+        return p;
+    };
+
+    /*
+    * Returns the previous touched point on the contour
+    *
+    * v  ... unit vector to test touch axis.
+    */
+    HPoint.prototype.prevTouched = function(v) {
+        var p = this.prevPointOnContour;
+
+        while (!v.touched(p) && p !== this) { p = p.prevPointOnContour; }
+
+        return p;
+    };
+
+    /*
+    * The zero point.
+    */
+    var HPZero = Object.freeze(new HPoint(0, 0));
+
+    /*
+    * The default state of the interpreter.
+    *
+    * Note: Freezing the defaultState and then deriving from it
+    * makes the V8 Javascript engine going awkward,
+    * so this is avoided, albeit the defaultState shouldn't
+    * ever change.
+    */
+    var defaultState = {
+        cvCutIn: 17 / 16,    // control value cut in
+        deltaBase: 9,
+        deltaShift: 0.125,
+        loop: 1,             // loops some instructions
+        minDis: 1,           // minimum distance
+        autoFlip: true
+    };
+
+    /*
+    * The current state of the interpreter.
+    *
+    * env  ... 'fpgm' or 'prep' or 'glyf'
+    * prog ... the program
+    */
+    function State(env, prog) {
+        this.env = env;
+        this.stack = [];
+        this.prog = prog;
+
+        switch (env) {
+            case 'glyf' :
+                this.zp0 = this.zp1 = this.zp2 = 1;
+                this.rp0 = this.rp1 = this.rp2 = 0;
+                /* fall through */
+            case 'prep' :
+                this.fv = this.pv = this.dpv = xUnitVector;
+                this.round = roundToGrid;
+        }
+    }
+
+    /*
+    * Executes a glyph program.
+    *
+    * This does the hinting for each glyph.
+    *
+    * Returns an array of moved points.
+    *
+    * glyph: the glyph to hint
+    * ppem: the size the glyph is rendered for
+    */
+    Hinting.prototype.exec = function(glyph, ppem) {
+        if (typeof ppem !== 'number') {
+            throw new Error('Point size is not a number!');
+        }
+
+        // Received a fatal error, don't do any hinting anymore.
+        if (this._errorState > 2) { return; }
+
+        var font = this.font;
+        var prepState = this._prepState;
+
+        if (!prepState || prepState.ppem !== ppem) {
+            var fpgmState = this._fpgmState;
+
+            if (!fpgmState) {
+                // Executes the fpgm state.
+                // This is used by fonts to define functions.
+                State.prototype = defaultState;
+
+                fpgmState =
+                this._fpgmState =
+                    new State('fpgm', font.tables.fpgm);
+
+                fpgmState.funcs = [ ];
+                fpgmState.font = font;
+
+                if (exports.DEBUG) {
+                    console.log('---EXEC FPGM---');
+                    fpgmState.step = -1;
+                }
+
+                try {
+                    exec(fpgmState);
+                } catch (e) {
+                    console.log('Hinting error in FPGM:' + e);
+                    this._errorState = 3;
+                    return;
+                }
+            }
+
+            // Executes the prep program for this ppem setting.
+            // This is used by fonts to set cvt values
+            // depending on to be rendered font size.
+
+            State.prototype = fpgmState;
+            prepState =
+            this._prepState =
+                new State('prep', font.tables.prep);
+
+            prepState.ppem = ppem;
+
+            // Creates a copy of the cvt table
+            // and scales it to the current ppem setting.
+            var oCvt = font.tables.cvt;
+            if (oCvt) {
+                var cvt = prepState.cvt = new Array(oCvt.length);
+                var scale = ppem / font.unitsPerEm;
+                for (var c = 0; c < oCvt.length; c++) {
+                    cvt[c] = oCvt[c] * scale;
+                }
+            } else {
+                prepState.cvt = [];
+            }
+
+            if (exports.DEBUG) {
+                console.log('---EXEC PREP---');
+                prepState.step = -1;
+            }
+
+            try {
+                exec(prepState);
+            } catch (e) {
+                if (this._errorState < 2) {
+                    console.log('Hinting error in PREP:' + e);
+                }
+                this._errorState = 2;
+            }
+        }
+
+        if (this._errorState > 1) { return; }
+
+        try {
+            return execGlyph(glyph, prepState);
+        } catch (e) {
+            if (this._errorState < 1) {
+                console.log('Hinting error:' + e);
+                console.log('Note: further hinting errors are silenced');
+            }
+            this._errorState = 1;
+            return undefined;
+        }
+    };
+
+    /*
+    * Executes the hinting program for a glyph.
+    */
+    execGlyph = function(glyph, prepState) {
+        // original point positions
+        var xScale = prepState.ppem / prepState.font.unitsPerEm;
+        var yScale = xScale;
+        var components = glyph.components;
+        var contours;
+        var gZone;
+        var state;
+
+        State.prototype = prepState;
+        if (!components) {
+            state = new State('glyf', glyph.instructions);
+            if (exports.DEBUG) {
+                console.log('---EXEC GLYPH---');
+                state.step = -1;
+            }
+            execComponent(glyph, state, xScale, yScale);
+            gZone = state.gZone;
+        } else {
+            var font = prepState.font;
+            gZone = [];
+            contours = [];
+            for (var i = 0; i < components.length; i++) {
+                var c = components[i];
+                var cg = font.glyphs.get(c.glyphIndex);
+
+                state = new State('glyf', cg.instructions);
+
+                if (exports.DEBUG) {
+                    console.log('---EXEC COMP ' + i + '---');
+                    state.step = -1;
+                }
+
+                execComponent(cg, state, xScale, yScale);
+                // appends the computed points to the result array
+                // post processes the component points
+                var dx = Math.round(c.dx * xScale);
+                var dy = Math.round(c.dy * yScale);
+                var gz = state.gZone;
+                var cc = state.contours;
+                for (var pi = 0; pi < gz.length; pi++) {
+                    var p = gz[pi];
+                    p.xTouched = p.yTouched = false;
+                    p.xo = p.x = p.x + dx;
+                    p.yo = p.y = p.y + dy;
+                }
+
+                var gLen = gZone.length;
+                gZone.push.apply(gZone, gz);
+                for (var j = 0; j < cc.length; j++) {
+                    contours.push(cc[j] + gLen);
+                }
+            }
+
+            if (glyph.instructions && !state.inhibitGridFit) {
+                // the composite has instructions on its own
+                state = new State('glyf', glyph.instructions);
+
+                state.gZone = state.z0 = state.z1 = state.z2 = gZone;
+
+                state.contours = contours;
+
+                // note: HPZero cannot be used here, since
+                //       the point might be modified
+                gZone.push(
+                    new HPoint(0, 0),
+                    new HPoint(Math.round(glyph.advanceWidth * xScale), 0)
+                );
+
+                if (exports.DEBUG) {
+                    console.log('---EXEC COMPOSITE---');
+                    state.step = -1;
+                }
+
+                exec(state);
+
+                gZone.length -= 2;
+            }
+        }
+
+        return gZone;
+    };
+
+    /*
+    * Executes the hinting program for a component of a multi-component glyph
+    * or of the glyph itself by a non-component glyph.
+    */
+    execComponent = function(glyph, state, xScale, yScale)
+    {
+        var points = glyph.points || [];
+        var pLen = points.length;
+        var gZone = state.gZone = state.z0 = state.z1 = state.z2 = [];
+        var contours = state.contours = [];
+
+        // Scales the original points and
+        // makes copies for the hinted points.
+        var cp; // current point
+        for (var i = 0; i < pLen; i++) {
+            cp = points[i];
+
+            gZone[i] = new HPoint(
+                cp.x * xScale,
+                cp.y * yScale,
+                cp.lastPointOfContour,
+                cp.onCurve
+            );
+        }
+
+        // Chain links the contours.
+        var sp; // start point
+        var np; // next point
+
+        for (var i$1 = 0; i$1 < pLen; i$1++) {
+            cp = gZone[i$1];
+
+            if (!sp) {
+                sp = cp;
+                contours.push(i$1);
+            }
+
+            if (cp.lastPointOfContour) {
+                cp.nextPointOnContour = sp;
+                sp.prevPointOnContour = cp;
+                sp = undefined;
+            } else {
+                np = gZone[i$1 + 1];
+                cp.nextPointOnContour = np;
+                np.prevPointOnContour = cp;
+            }
+        }
+
+        if (state.inhibitGridFit) { return; }
+
+        gZone.push(
+            new HPoint(0, 0),
+            new HPoint(Math.round(glyph.advanceWidth * xScale), 0)
+        );
+
+        exec(state);
+
+        // Removes the extra points.
+        gZone.length -= 2;
+
+        if (exports.DEBUG) {
+            console.log('FINISHED GLYPH', state.stack);
+            for (var i$2 = 0; i$2 < pLen; i$2++) {
+                console.log(i$2, gZone[i$2].x, gZone[i$2].y);
+            }
+        }
+    };
+
+    /*
+    * Executes the program loaded in state.
+    */
+    exec = function(state) {
+        var prog = state.prog;
+
+        if (!prog) { return; }
+
+        var pLen = prog.length;
+        var ins;
+
+        for (state.ip = 0; state.ip < pLen; state.ip++) {
+            if (exports.DEBUG) { state.step++; }
+            ins = instructionTable[prog[state.ip]];
+
+            if (!ins) {
+                throw new Error(
+                    'unknown instruction: 0x' +
+                    Number(prog[state.ip]).toString(16)
+                );
+            }
+
+            ins(state);
+
+            // very extensive debugging for each step
+            /*
+            if (exports.DEBUG) {
+                var da;
+                if (state.gZone) {
+                    da = [];
+                    for (let i = 0; i < state.gZone.length; i++)
+                    {
+                        da.push(i + ' ' +
+                            state.gZone[i].x * 64 + ' ' +
+                            state.gZone[i].y * 64 + ' ' +
+                            (state.gZone[i].xTouched ? 'x' : '') +
+                            (state.gZone[i].yTouched ? 'y' : '')
+                        );
+                    }
+                    console.log('GZ', da);
+                }
+
+                if (state.tZone) {
+                    da = [];
+                    for (let i = 0; i < state.tZone.length; i++) {
+                        da.push(i + ' ' +
+                            state.tZone[i].x * 64 + ' ' +
+                            state.tZone[i].y * 64 + ' ' +
+                            (state.tZone[i].xTouched ? 'x' : '') +
+                            (state.tZone[i].yTouched ? 'y' : '')
+                        );
+                    }
+                    console.log('TZ', da);
+                }
+
+                if (state.stack.length > 10) {
+                    console.log(
+                        state.stack.length,
+                        '...', state.stack.slice(state.stack.length - 10)
+                    );
+                } else {
+                    console.log(state.stack.length, state.stack);
+                }
+            }
+            */
+        }
+    };
+
+    /*
+    * Initializes the twilight zone.
+    *
+    * This is only done if a SZPx instruction
+    * refers to the twilight zone.
+    */
+    function initTZone(state)
+    {
+        var tZone = state.tZone = new Array(state.gZone.length);
+
+        // no idea if this is actually correct...
+        for (var i = 0; i < tZone.length; i++)
+        {
+            tZone[i] = new HPoint(0, 0);
+        }
+    }
+
+    /*
+    * Skips the instruction pointer ahead over an IF/ELSE block.
+    * handleElse .. if true breaks on matching ELSE
+    */
+    function skip(state, handleElse)
+    {
+        var prog = state.prog;
+        var ip = state.ip;
+        var nesting = 1;
+        var ins;
+
+        do {
+            ins = prog[++ip];
+            if (ins === 0x58) // IF
+                { nesting++; }
+            else if (ins === 0x59) // EIF
+                { nesting--; }
+            else if (ins === 0x40) // NPUSHB
+                { ip += prog[ip + 1] + 1; }
+            else if (ins === 0x41) // NPUSHW
+                { ip += 2 * prog[ip + 1] + 1; }
+            else if (ins >= 0xB0 && ins <= 0xB7) // PUSHB
+                { ip += ins - 0xB0 + 1; }
+            else if (ins >= 0xB8 && ins <= 0xBF) // PUSHW
+                { ip += (ins - 0xB8 + 1) * 2; }
+            else if (handleElse && nesting === 1 && ins === 0x1B) // ELSE
+                { break; }
+        } while (nesting > 0);
+
+        state.ip = ip;
+    }
+
+    /*----------------------------------------------------------*
+    *          And then a lot of instructions...                *
+    *----------------------------------------------------------*/
+
+    // SVTCA[a] Set freedom and projection Vectors To Coordinate Axis
+    // 0x00-0x01
+    function SVTCA(v, state) {
+        if (exports.DEBUG) { console.log(state.step, 'SVTCA[' + v.axis + ']'); }
+
+        state.fv = state.pv = state.dpv = v;
+    }
+
+    // SPVTCA[a] Set Projection Vector to Coordinate Axis
+    // 0x02-0x03
+    function SPVTCA(v, state) {
+        if (exports.DEBUG) { console.log(state.step, 'SPVTCA[' + v.axis + ']'); }
+
+        state.pv = state.dpv = v;
+    }
+
+    // SFVTCA[a] Set Freedom Vector to Coordinate Axis
+    // 0x04-0x05
+    function SFVTCA(v, state) {
+        if (exports.DEBUG) { console.log(state.step, 'SFVTCA[' + v.axis + ']'); }
+
+        state.fv = v;
+    }
+
+    // SPVTL[a] Set Projection Vector To Line
+    // 0x06-0x07
+    function SPVTL(a, state) {
+        var stack = state.stack;
+        var p2i = stack.pop();
+        var p1i = stack.pop();
+        var p2 = state.z2[p2i];
+        var p1 = state.z1[p1i];
+
+        if (exports.DEBUG) { console.log('SPVTL[' + a + ']', p2i, p1i); }
+
+        var dx;
+        var dy;
+
+        if (!a) {
+            dx = p1.x - p2.x;
+            dy = p1.y - p2.y;
+        } else {
+            dx = p2.y - p1.y;
+            dy = p1.x - p2.x;
+        }
+
+        state.pv = state.dpv = getUnitVector(dx, dy);
+    }
+
+    // SFVTL[a] Set Freedom Vector To Line
+    // 0x08-0x09
+    function SFVTL(a, state) {
+        var stack = state.stack;
+        var p2i = stack.pop();
+        var p1i = stack.pop();
+        var p2 = state.z2[p2i];
+        var p1 = state.z1[p1i];
+
+        if (exports.DEBUG) { console.log('SFVTL[' + a + ']', p2i, p1i); }
+
+        var dx;
+        var dy;
+
+        if (!a) {
+            dx = p1.x - p2.x;
+            dy = p1.y - p2.y;
+        } else {
+            dx = p2.y - p1.y;
+            dy = p1.x - p2.x;
+        }
+
+        state.fv = getUnitVector(dx, dy);
+    }
+
+    // SPVFS[] Set Projection Vector From Stack
+    // 0x0A
+    function SPVFS(state) {
+        var stack = state.stack;
+        var y = stack.pop();
+        var x = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SPVFS[]', y, x); }
+
+        state.pv = state.dpv = getUnitVector(x, y);
+    }
+
+    // SFVFS[] Set Freedom Vector From Stack
+    // 0x0B
+    function SFVFS(state) {
+        var stack = state.stack;
+        var y = stack.pop();
+        var x = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SPVFS[]', y, x); }
+
+        state.fv = getUnitVector(x, y);
+    }
+
+    // GPV[] Get Projection Vector
+    // 0x0C
+    function GPV(state) {
+        var stack = state.stack;
+        var pv = state.pv;
+
+        if (exports.DEBUG) { console.log(state.step, 'GPV[]'); }
+
+        stack.push(pv.x * 0x4000);
+        stack.push(pv.y * 0x4000);
+    }
+
+    // GFV[] Get Freedom Vector
+    // 0x0C
+    function GFV(state) {
+        var stack = state.stack;
+        var fv = state.fv;
+
+        if (exports.DEBUG) { console.log(state.step, 'GFV[]'); }
+
+        stack.push(fv.x * 0x4000);
+        stack.push(fv.y * 0x4000);
+    }
+
+    // SFVTPV[] Set Freedom Vector To Projection Vector
+    // 0x0E
+    function SFVTPV(state) {
+        state.fv = state.pv;
+
+        if (exports.DEBUG) { console.log(state.step, 'SFVTPV[]'); }
+    }
+
+    // ISECT[] moves point p to the InterSECTion of two lines
+    // 0x0F
+    function ISECT(state)
+    {
+        var stack = state.stack;
+        var pa0i = stack.pop();
+        var pa1i = stack.pop();
+        var pb0i = stack.pop();
+        var pb1i = stack.pop();
+        var pi = stack.pop();
+        var z0 = state.z0;
+        var z1 = state.z1;
+        var pa0 = z0[pa0i];
+        var pa1 = z0[pa1i];
+        var pb0 = z1[pb0i];
+        var pb1 = z1[pb1i];
+        var p = state.z2[pi];
+
+        if (exports.DEBUG) { console.log('ISECT[], ', pa0i, pa1i, pb0i, pb1i, pi); }
+
+        // math from
+        // en.wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line
+
+        var x1 = pa0.x;
+        var y1 = pa0.y;
+        var x2 = pa1.x;
+        var y2 = pa1.y;
+        var x3 = pb0.x;
+        var y3 = pb0.y;
+        var x4 = pb1.x;
+        var y4 = pb1.y;
+
+        var div = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+        var f1 = x1 * y2 - y1 * x2;
+        var f2 = x3 * y4 - y3 * x4;
+
+        p.x = (f1 * (x3 - x4) - f2 * (x1 - x2)) / div;
+        p.y = (f1 * (y3 - y4) - f2 * (y1 - y2)) / div;
+    }
+
+    // SRP0[] Set Reference Point 0
+    // 0x10
+    function SRP0(state) {
+        state.rp0 = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SRP0[]', state.rp0); }
+    }
+
+    // SRP1[] Set Reference Point 1
+    // 0x11
+    function SRP1(state) {
+        state.rp1 = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SRP1[]', state.rp1); }
+    }
+
+    // SRP1[] Set Reference Point 2
+    // 0x12
+    function SRP2(state) {
+        state.rp2 = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SRP2[]', state.rp2); }
+    }
+
+    // SZP0[] Set Zone Pointer 0
+    // 0x13
+    function SZP0(state) {
+        var n = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SZP0[]', n); }
+
+        state.zp0 = n;
+
+        switch (n) {
+            case 0:
+                if (!state.tZone) { initTZone(state); }
+                state.z0 = state.tZone;
+                break;
+            case 1 :
+                state.z0 = state.gZone;
+                break;
+            default :
+                throw new Error('Invalid zone pointer');
+        }
+    }
+
+    // SZP1[] Set Zone Pointer 1
+    // 0x14
+    function SZP1(state) {
+        var n = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SZP1[]', n); }
+
+        state.zp1 = n;
+
+        switch (n) {
+            case 0:
+                if (!state.tZone) { initTZone(state); }
+                state.z1 = state.tZone;
+                break;
+            case 1 :
+                state.z1 = state.gZone;
+                break;
+            default :
+                throw new Error('Invalid zone pointer');
+        }
+    }
+
+    // SZP2[] Set Zone Pointer 2
+    // 0x15
+    function SZP2(state) {
+        var n = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SZP2[]', n); }
+
+        state.zp2 = n;
+
+        switch (n) {
+            case 0:
+                if (!state.tZone) { initTZone(state); }
+                state.z2 = state.tZone;
+                break;
+            case 1 :
+                state.z2 = state.gZone;
+                break;
+            default :
+                throw new Error('Invalid zone pointer');
+        }
+    }
+
+    // SZPS[] Set Zone PointerS
+    // 0x16
+    function SZPS(state) {
+        var n = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SZPS[]', n); }
+
+        state.zp0 = state.zp1 = state.zp2 = n;
+
+        switch (n) {
+            case 0:
+                if (!state.tZone) { initTZone(state); }
+                state.z0 = state.z1 = state.z2 = state.tZone;
+                break;
+            case 1 :
+                state.z0 = state.z1 = state.z2 = state.gZone;
+                break;
+            default :
+                throw new Error('Invalid zone pointer');
+        }
+    }
+
+    // SLOOP[] Set LOOP variable
+    // 0x17
+    function SLOOP(state) {
+        state.loop = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SLOOP[]', state.loop); }
+    }
+
+    // RTG[] Round To Grid
+    // 0x18
+    function RTG(state) {
+        if (exports.DEBUG) { console.log(state.step, 'RTG[]'); }
+
+        state.round = roundToGrid;
+    }
+
+    // RTHG[] Round To Half Grid
+    // 0x19
+    function RTHG(state) {
+        if (exports.DEBUG) { console.log(state.step, 'RTHG[]'); }
+
+        state.round = roundToHalfGrid;
+    }
+
+    // SMD[] Set Minimum Distance
+    // 0x1A
+    function SMD(state) {
+        var d = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SMD[]', d); }
+
+        state.minDis = d / 0x40;
+    }
+
+    // ELSE[] ELSE clause
+    // 0x1B
+    function ELSE(state) {
+        // This instruction has been reached by executing a then branch
+        // so it just skips ahead until matching EIF.
+        //
+        // In case the IF was negative the IF[] instruction already
+        // skipped forward over the ELSE[]
+
+        if (exports.DEBUG) { console.log(state.step, 'ELSE[]'); }
+
+        skip(state, false);
+    }
+
+    // JMPR[] JuMP Relative
+    // 0x1C
+    function JMPR(state) {
+        var o = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'JMPR[]', o); }
+
+        // A jump by 1 would do nothing.
+        state.ip += o - 1;
+    }
+
+    // SCVTCI[] Set Control Value Table Cut-In
+    // 0x1D
+    function SCVTCI(state) {
+        var n = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SCVTCI[]', n); }
+
+        state.cvCutIn = n / 0x40;
+    }
+
+    // DUP[] DUPlicate top stack element
+    // 0x20
+    function DUP(state) {
+        var stack = state.stack;
+
+        if (exports.DEBUG) { console.log(state.step, 'DUP[]'); }
+
+        stack.push(stack[stack.length - 1]);
+    }
+
+    // POP[] POP top stack element
+    // 0x21
+    function POP(state) {
+        if (exports.DEBUG) { console.log(state.step, 'POP[]'); }
+
+        state.stack.pop();
+    }
+
+    // CLEAR[] CLEAR the stack
+    // 0x22
+    function CLEAR(state) {
+        if (exports.DEBUG) { console.log(state.step, 'CLEAR[]'); }
+
+        state.stack.length = 0;
+    }
+
+    // SWAP[] SWAP the top two elements on the stack
+    // 0x23
+    function SWAP(state) {
+        var stack = state.stack;
+
+        var a = stack.pop();
+        var b = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SWAP[]'); }
+
+        stack.push(a);
+        stack.push(b);
+    }
+
+    // DEPTH[] DEPTH of the stack
+    // 0x24
+    function DEPTH(state) {
+        var stack = state.stack;
+
+        if (exports.DEBUG) { console.log(state.step, 'DEPTH[]'); }
+
+        stack.push(stack.length);
+    }
+
+    // LOOPCALL[] LOOPCALL function
+    // 0x2A
+    function LOOPCALL(state) {
+        var stack = state.stack;
+        var fn = stack.pop();
+        var c = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'LOOPCALL[]', fn, c); }
+
+        // saves callers program
+        var cip = state.ip;
+        var cprog = state.prog;
+
+        state.prog = state.funcs[fn];
+
+        // executes the function
+        for (var i = 0; i < c; i++) {
+            exec(state);
+
+            if (exports.DEBUG) { console.log(
+                ++state.step,
+                i + 1 < c ? 'next loopcall' : 'done loopcall',
+                i
+            ); }
+        }
+
+        // restores the callers program
+        state.ip = cip;
+        state.prog = cprog;
+    }
+
+    // CALL[] CALL function
+    // 0x2B
+    function CALL(state) {
+        var fn = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'CALL[]', fn); }
+
+        // saves callers program
+        var cip = state.ip;
+        var cprog = state.prog;
+
+        state.prog = state.funcs[fn];
+
+        // executes the function
+        exec(state);
+
+        // restores the callers program
+        state.ip = cip;
+        state.prog = cprog;
+
+        if (exports.DEBUG) { console.log(++state.step, 'returning from', fn); }
+    }
+
+    // CINDEX[] Copy the INDEXed element to the top of the stack
+    // 0x25
+    function CINDEX(state) {
+        var stack = state.stack;
+        var k = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'CINDEX[]', k); }
+
+        // In case of k == 1, it copies the last element after popping
+        // thus stack.length - k.
+        stack.push(stack[stack.length - k]);
+    }
+
+    // MINDEX[] Move the INDEXed element to the top of the stack
+    // 0x26
+    function MINDEX(state) {
+        var stack = state.stack;
+        var k = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'MINDEX[]', k); }
+
+        stack.push(stack.splice(stack.length - k, 1)[0]);
+    }
+
+    // FDEF[] Function DEFinition
+    // 0x2C
+    function FDEF(state) {
+        if (state.env !== 'fpgm') { throw new Error('FDEF not allowed here'); }
+        var stack = state.stack;
+        var prog = state.prog;
+        var ip = state.ip;
+
+        var fn = stack.pop();
+        var ipBegin = ip;
+
+        if (exports.DEBUG) { console.log(state.step, 'FDEF[]', fn); }
+
+        while (prog[++ip] !== 0x2D){  }
+
+        state.ip = ip;
+        state.funcs[fn] = prog.slice(ipBegin + 1, ip);
+    }
+
+    // MDAP[a] Move Direct Absolute Point
+    // 0x2E-0x2F
+    function MDAP(round, state) {
+        var pi = state.stack.pop();
+        var p = state.z0[pi];
+        var fv = state.fv;
+        var pv = state.pv;
+
+        if (exports.DEBUG) { console.log(state.step, 'MDAP[' + round + ']', pi); }
+
+        var d = pv.distance(p, HPZero);
+
+        if (round) { d = state.round(d); }
+
+        fv.setRelative(p, HPZero, d, pv);
+        fv.touch(p);
+
+        state.rp0 = state.rp1 = pi;
+    }
+
+    // IUP[a] Interpolate Untouched Points through the outline
+    // 0x30
+    function IUP(v, state) {
+        var z2 = state.z2;
+        var pLen = z2.length - 2;
+        var cp;
+        var pp;
+        var np;
+
+        if (exports.DEBUG) { console.log(state.step, 'IUP[' + v.axis + ']'); }
+
+        for (var i = 0; i < pLen; i++) {
+            cp = z2[i]; // current point
+
+            // if this point has been touched go on
+            if (v.touched(cp)) { continue; }
+
+            pp = cp.prevTouched(v);
+
+            // no point on the contour has been touched?
+            if (pp === cp) { continue; }
+
+            np = cp.nextTouched(v);
+
+            if (pp === np) {
+                // only one point on the contour has been touched
+                // so simply moves the point like that
+
+                v.setRelative(cp, cp, v.distance(pp, pp, false, true), v, true);
+            }
+
+            v.interpolate(cp, pp, np, v);
+        }
+    }
+
+    // SHP[] SHift Point using reference point
+    // 0x32-0x33
+    function SHP(a, state) {
+        var stack = state.stack;
+        var rpi = a ? state.rp1 : state.rp2;
+        var rp = (a ? state.z0 : state.z1)[rpi];
+        var fv = state.fv;
+        var pv = state.pv;
+        var loop = state.loop;
+        var z2 = state.z2;
+
+        while (loop--)
+        {
+            var pi = stack.pop();
+            var p = z2[pi];
+
+            var d = pv.distance(rp, rp, false, true);
+            fv.setRelative(p, p, d, pv);
+            fv.touch(p);
+
+            if (exports.DEBUG) {
+                console.log(
+                    state.step,
+                    (state.loop > 1 ?
+                       'loop ' + (state.loop - loop) + ': ' :
+                       ''
+                    ) +
+                    'SHP[' + (a ? 'rp1' : 'rp2') + ']', pi
+                );
+            }
+        }
+
+        state.loop = 1;
+    }
+
+    // SHC[] SHift Contour using reference point
+    // 0x36-0x37
+    function SHC(a, state) {
+        var stack = state.stack;
+        var rpi = a ? state.rp1 : state.rp2;
+        var rp = (a ? state.z0 : state.z1)[rpi];
+        var fv = state.fv;
+        var pv = state.pv;
+        var ci = stack.pop();
+        var sp = state.z2[state.contours[ci]];
+        var p = sp;
+
+        if (exports.DEBUG) { console.log(state.step, 'SHC[' + a + ']', ci); }
+
+        var d = pv.distance(rp, rp, false, true);
+
+        do {
+            if (p !== rp) { fv.setRelative(p, p, d, pv); }
+            p = p.nextPointOnContour;
+        } while (p !== sp);
+    }
+
+    // SHZ[] SHift Zone using reference point
+    // 0x36-0x37
+    function SHZ(a, state) {
+        var stack = state.stack;
+        var rpi = a ? state.rp1 : state.rp2;
+        var rp = (a ? state.z0 : state.z1)[rpi];
+        var fv = state.fv;
+        var pv = state.pv;
+
+        var e = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SHZ[' + a + ']', e); }
+
+        var z;
+        switch (e) {
+            case 0 : z = state.tZone; break;
+            case 1 : z = state.gZone; break;
+            default : throw new Error('Invalid zone');
+        }
+
+        var p;
+        var d = pv.distance(rp, rp, false, true);
+        var pLen = z.length - 2;
+        for (var i = 0; i < pLen; i++)
+        {
+            p = z[i];
+            if (p !== rp) { fv.setRelative(p, p, d, pv); }
+        }
+    }
+
+    // SHPIX[] SHift point by a PIXel amount
+    // 0x38
+    function SHPIX(state) {
+        var stack = state.stack;
+        var loop = state.loop;
+        var fv = state.fv;
+        var d = stack.pop() / 0x40;
+        var z2 = state.z2;
+
+        while (loop--) {
+            var pi = stack.pop();
+            var p = z2[pi];
+
+            if (exports.DEBUG) {
+                console.log(
+                    state.step,
+                    (state.loop > 1 ? 'loop ' + (state.loop - loop) + ': ' : '') +
+                    'SHPIX[]', pi, d
+                );
+            }
+
+            fv.setRelative(p, p, d);
+            fv.touch(p);
+        }
+
+        state.loop = 1;
+    }
+
+    // IP[] Interpolate Point
+    // 0x39
+    function IP(state) {
+        var stack = state.stack;
+        var rp1i = state.rp1;
+        var rp2i = state.rp2;
+        var loop = state.loop;
+        var rp1 = state.z0[rp1i];
+        var rp2 = state.z1[rp2i];
+        var fv = state.fv;
+        var pv = state.dpv;
+        var z2 = state.z2;
+
+        while (loop--) {
+            var pi = stack.pop();
+            var p = z2[pi];
+
+            if (exports.DEBUG) {
+                console.log(
+                    state.step,
+                    (state.loop > 1 ? 'loop ' + (state.loop - loop) + ': ' : '') +
+                    'IP[]', pi, rp1i, '<->', rp2i
+                );
+            }
+
+            fv.interpolate(p, rp1, rp2, pv);
+
+            fv.touch(p);
+        }
+
+        state.loop = 1;
+    }
+
+    // MSIRP[a] Move Stack Indirect Relative Point
+    // 0x3A-0x3B
+    function MSIRP(a, state) {
+        var stack = state.stack;
+        var d = stack.pop() / 64;
+        var pi = stack.pop();
+        var p = state.z1[pi];
+        var rp0 = state.z0[state.rp0];
+        var fv = state.fv;
+        var pv = state.pv;
+
+        fv.setRelative(p, rp0, d, pv);
+        fv.touch(p);
+
+        if (exports.DEBUG) { console.log(state.step, 'MSIRP[' + a + ']', d, pi); }
+
+        state.rp1 = state.rp0;
+        state.rp2 = pi;
+        if (a) { state.rp0 = pi; }
+    }
+
+    // ALIGNRP[] Align to reference point.
+    // 0x3C
+    function ALIGNRP(state) {
+        var stack = state.stack;
+        var rp0i = state.rp0;
+        var rp0 = state.z0[rp0i];
+        var loop = state.loop;
+        var fv = state.fv;
+        var pv = state.pv;
+        var z1 = state.z1;
+
+        while (loop--) {
+            var pi = stack.pop();
+            var p = z1[pi];
+
+            if (exports.DEBUG) {
+                console.log(
+                    state.step,
+                    (state.loop > 1 ? 'loop ' + (state.loop - loop) + ': ' : '') +
+                    'ALIGNRP[]', pi
+                );
+            }
+
+            fv.setRelative(p, rp0, 0, pv);
+            fv.touch(p);
+        }
+
+        state.loop = 1;
+    }
+
+    // RTG[] Round To Double Grid
+    // 0x3D
+    function RTDG(state) {
+        if (exports.DEBUG) { console.log(state.step, 'RTDG[]'); }
+
+        state.round = roundToDoubleGrid;
+    }
+
+    // MIAP[a] Move Indirect Absolute Point
+    // 0x3E-0x3F
+    function MIAP(round, state) {
+        var stack = state.stack;
+        var n = stack.pop();
+        var pi = stack.pop();
+        var p = state.z0[pi];
+        var fv = state.fv;
+        var pv = state.pv;
+        var cv = state.cvt[n];
+
+        // TODO cvtcutin should be considered here
+        if (round) { cv = state.round(cv); }
+
+        if (exports.DEBUG) {
+            console.log(
+                state.step,
+                'MIAP[' + round + ']',
+                n, '(', cv, ')', pi
+            );
+        }
+
+        fv.setRelative(p, HPZero, cv, pv);
+
+        if (state.zp0 === 0) {
+            p.xo = p.x;
+            p.yo = p.y;
+        }
+
+        fv.touch(p);
+
+        state.rp0 = state.rp1 = pi;
+    }
+
+    // NPUSB[] PUSH N Bytes
+    // 0x40
+    function NPUSHB(state) {
+        var prog = state.prog;
+        var ip = state.ip;
+        var stack = state.stack;
+
+        var n = prog[++ip];
+
+        if (exports.DEBUG) { console.log(state.step, 'NPUSHB[]', n); }
+
+        for (var i = 0; i < n; i++) { stack.push(prog[++ip]); }
+
+        state.ip = ip;
+    }
+
+    // NPUSHW[] PUSH N Words
+    // 0x41
+    function NPUSHW(state) {
+        var ip = state.ip;
+        var prog = state.prog;
+        var stack = state.stack;
+        var n = prog[++ip];
+
+        if (exports.DEBUG) { console.log(state.step, 'NPUSHW[]', n); }
+
+        for (var i = 0; i < n; i++) {
+            var w = (prog[++ip] << 8) | prog[++ip];
+            if (w & 0x8000) { w = -((w ^ 0xffff) + 1); }
+            stack.push(w);
+        }
+
+        state.ip = ip;
+    }
+
+    // WS[] Write Store
+    // 0x42
+    function WS(state) {
+        var stack = state.stack;
+        var store = state.store;
+
+        if (!store) { store = state.store = []; }
+
+        var v = stack.pop();
+        var l = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'WS', v, l); }
+
+        store[l] = v;
+    }
+
+    // RS[] Read Store
+    // 0x43
+    function RS(state) {
+        var stack = state.stack;
+        var store = state.store;
+
+        var l = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'RS', l); }
+
+        var v = (store && store[l]) || 0;
+
+        stack.push(v);
+    }
+
+    // WCVTP[] Write Control Value Table in Pixel units
+    // 0x44
+    function WCVTP(state) {
+        var stack = state.stack;
+
+        var v = stack.pop();
+        var l = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'WCVTP', v, l); }
+
+        state.cvt[l] = v / 0x40;
+    }
+
+    // RCVT[] Read Control Value Table entry
+    // 0x45
+    function RCVT(state) {
+        var stack = state.stack;
+        var cvte = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'RCVT', cvte); }
+
+        stack.push(state.cvt[cvte] * 0x40);
+    }
+
+    // GC[] Get Coordinate projected onto the projection vector
+    // 0x46-0x47
+    function GC(a, state) {
+        var stack = state.stack;
+        var pi = stack.pop();
+        var p = state.z2[pi];
+
+        if (exports.DEBUG) { console.log(state.step, 'GC[' + a + ']', pi); }
+
+        stack.push(state.dpv.distance(p, HPZero, a, false) * 0x40);
+    }
+
+    // MD[a] Measure Distance
+    // 0x49-0x4A
+    function MD(a, state) {
+        var stack = state.stack;
+        var pi2 = stack.pop();
+        var pi1 = stack.pop();
+        var p2 = state.z1[pi2];
+        var p1 = state.z0[pi1];
+        var d = state.dpv.distance(p1, p2, a, a);
+
+        if (exports.DEBUG) { console.log(state.step, 'MD[' + a + ']', pi2, pi1, '->', d); }
+
+        state.stack.push(Math.round(d * 64));
+    }
+
+    // MPPEM[] Measure Pixels Per EM
+    // 0x4B
+    function MPPEM(state) {
+        if (exports.DEBUG) { console.log(state.step, 'MPPEM[]'); }
+        state.stack.push(state.ppem);
+    }
+
+    // FLIPON[] set the auto FLIP Boolean to ON
+    // 0x4D
+    function FLIPON(state) {
+        if (exports.DEBUG) { console.log(state.step, 'FLIPON[]'); }
+        state.autoFlip = true;
+    }
+
+    // LT[] Less Than
+    // 0x50
+    function LT(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'LT[]', e2, e1); }
+
+        stack.push(e1 < e2 ? 1 : 0);
+    }
+
+    // LTEQ[] Less Than or EQual
+    // 0x53
+    function LTEQ(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'LTEQ[]', e2, e1); }
+
+        stack.push(e1 <= e2 ? 1 : 0);
+    }
+
+    // GTEQ[] Greater Than
+    // 0x52
+    function GT(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'GT[]', e2, e1); }
+
+        stack.push(e1 > e2 ? 1 : 0);
+    }
+
+    // GTEQ[] Greater Than or EQual
+    // 0x53
+    function GTEQ(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'GTEQ[]', e2, e1); }
+
+        stack.push(e1 >= e2 ? 1 : 0);
+    }
+
+    // EQ[] EQual
+    // 0x54
+    function EQ(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'EQ[]', e2, e1); }
+
+        stack.push(e2 === e1 ? 1 : 0);
+    }
+
+    // NEQ[] Not EQual
+    // 0x55
+    function NEQ(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'NEQ[]', e2, e1); }
+
+        stack.push(e2 !== e1 ? 1 : 0);
+    }
+
+    // ODD[] ODD
+    // 0x56
+    function ODD(state) {
+        var stack = state.stack;
+        var n = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'ODD[]', n); }
+
+        stack.push(Math.trunc(n) % 2 ? 1 : 0);
+    }
+
+    // EVEN[] EVEN
+    // 0x57
+    function EVEN(state) {
+        var stack = state.stack;
+        var n = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'EVEN[]', n); }
+
+        stack.push(Math.trunc(n) % 2 ? 0 : 1);
+    }
+
+    // IF[] IF test
+    // 0x58
+    function IF(state) {
+        var test = state.stack.pop();
+        var ins;
+
+        if (exports.DEBUG) { console.log(state.step, 'IF[]', test); }
+
+        // if test is true it just continues
+        // if not the ip is skipped until matching ELSE or EIF
+        if (!test) {
+            skip(state, true);
+
+            if (exports.DEBUG) { console.log(state.step, ins === 0x1B ? 'ELSE[]' : 'EIF[]'); }
+        }
+    }
+
+    // EIF[] End IF
+    // 0x59
+    function EIF(state) {
+        // this can be reached normally when
+        // executing an else branch.
+        // -> just ignore it
+
+        if (exports.DEBUG) { console.log(state.step, 'EIF[]'); }
+    }
+
+    // AND[] logical AND
+    // 0x5A
+    function AND(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'AND[]', e2, e1); }
+
+        stack.push(e2 && e1 ? 1 : 0);
+    }
+
+    // OR[] logical OR
+    // 0x5B
+    function OR(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'OR[]', e2, e1); }
+
+        stack.push(e2 || e1 ? 1 : 0);
+    }
+
+    // NOT[] logical NOT
+    // 0x5C
+    function NOT(state) {
+        var stack = state.stack;
+        var e = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'NOT[]', e); }
+
+        stack.push(e ? 0 : 1);
+    }
+
+    // DELTAP1[] DELTA exception P1
+    // DELTAP2[] DELTA exception P2
+    // DELTAP3[] DELTA exception P3
+    // 0x5D, 0x71, 0x72
+    function DELTAP123(b, state) {
+        var stack = state.stack;
+        var n = stack.pop();
+        var fv = state.fv;
+        var pv = state.pv;
+        var ppem = state.ppem;
+        var base = state.deltaBase + (b - 1) * 16;
+        var ds = state.deltaShift;
+        var z0 = state.z0;
+
+        if (exports.DEBUG) { console.log(state.step, 'DELTAP[' + b + ']', n, stack); }
+
+        for (var i = 0; i < n; i++)
+        {
+            var pi = stack.pop();
+            var arg = stack.pop();
+            var appem = base + ((arg & 0xF0) >> 4);
+            if (appem !== ppem) { continue; }
+
+            var mag = (arg & 0x0F) - 8;
+            if (mag >= 0) { mag++; }
+            if (exports.DEBUG) { console.log(state.step, 'DELTAPFIX', pi, 'by', mag * ds); }
+
+            var p = z0[pi];
+            fv.setRelative(p, p, mag * ds, pv);
+        }
+    }
+
+    // SDB[] Set Delta Base in the graphics state
+    // 0x5E
+    function SDB(state) {
+        var stack = state.stack;
+        var n = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SDB[]', n); }
+
+        state.deltaBase = n;
+    }
+
+    // SDS[] Set Delta Shift in the graphics state
+    // 0x5F
+    function SDS(state) {
+        var stack = state.stack;
+        var n = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SDS[]', n); }
+
+        state.deltaShift = Math.pow(0.5, n);
+    }
+
+    // ADD[] ADD
+    // 0x60
+    function ADD(state) {
+        var stack = state.stack;
+        var n2 = stack.pop();
+        var n1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'ADD[]', n2, n1); }
+
+        stack.push(n1 + n2);
+    }
+
+    // SUB[] SUB
+    // 0x61
+    function SUB(state) {
+        var stack = state.stack;
+        var n2 = stack.pop();
+        var n1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SUB[]', n2, n1); }
+
+        stack.push(n1 - n2);
+    }
+
+    // DIV[] DIV
+    // 0x62
+    function DIV(state) {
+        var stack = state.stack;
+        var n2 = stack.pop();
+        var n1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'DIV[]', n2, n1); }
+
+        stack.push(n1 * 64 / n2);
+    }
+
+    // MUL[] MUL
+    // 0x63
+    function MUL(state) {
+        var stack = state.stack;
+        var n2 = stack.pop();
+        var n1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'MUL[]', n2, n1); }
+
+        stack.push(n1 * n2 / 64);
+    }
+
+    // ABS[] ABSolute value
+    // 0x64
+    function ABS(state) {
+        var stack = state.stack;
+        var n = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'ABS[]', n); }
+
+        stack.push(Math.abs(n));
+    }
+
+    // NEG[] NEGate
+    // 0x65
+    function NEG(state) {
+        var stack = state.stack;
+        var n = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'NEG[]', n); }
+
+        stack.push(-n);
+    }
+
+    // FLOOR[] FLOOR
+    // 0x66
+    function FLOOR(state) {
+        var stack = state.stack;
+        var n = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'FLOOR[]', n); }
+
+        stack.push(Math.floor(n / 0x40) * 0x40);
+    }
+
+    // CEILING[] CEILING
+    // 0x67
+    function CEILING(state) {
+        var stack = state.stack;
+        var n = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'CEILING[]', n); }
+
+        stack.push(Math.ceil(n / 0x40) * 0x40);
+    }
+
+    // ROUND[ab] ROUND value
+    // 0x68-0x6B
+    function ROUND(dt, state) {
+        var stack = state.stack;
+        var n = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'ROUND[]'); }
+
+        stack.push(state.round(n / 0x40) * 0x40);
+    }
+
+    // WCVTF[] Write Control Value Table in Funits
+    // 0x70
+    function WCVTF(state) {
+        var stack = state.stack;
+        var v = stack.pop();
+        var l = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'WCVTF[]', v, l); }
+
+        state.cvt[l] = v * state.ppem / state.font.unitsPerEm;
+    }
+
+    // DELTAC1[] DELTA exception C1
+    // DELTAC2[] DELTA exception C2
+    // DELTAC3[] DELTA exception C3
+    // 0x73, 0x74, 0x75
+    function DELTAC123(b, state) {
+        var stack = state.stack;
+        var n = stack.pop();
+        var ppem = state.ppem;
+        var base = state.deltaBase + (b - 1) * 16;
+        var ds = state.deltaShift;
+
+        if (exports.DEBUG) { console.log(state.step, 'DELTAC[' + b + ']', n, stack); }
+
+        for (var i = 0; i < n; i++) {
+            var c = stack.pop();
+            var arg = stack.pop();
+            var appem = base + ((arg & 0xF0) >> 4);
+            if (appem !== ppem) { continue; }
+
+            var mag = (arg & 0x0F) - 8;
+            if (mag >= 0) { mag++; }
+
+            var delta = mag * ds;
+
+            if (exports.DEBUG) { console.log(state.step, 'DELTACFIX', c, 'by', delta); }
+
+            state.cvt[c] += delta;
+        }
+    }
+
+    // SROUND[] Super ROUND
+    // 0x76
+    function SROUND(state) {
+        var n = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'SROUND[]', n); }
+
+        state.round = roundSuper;
+
+        var period;
+
+        switch (n & 0xC0) {
+            case 0x00:
+                period = 0.5;
+                break;
+            case 0x40:
+                period = 1;
+                break;
+            case 0x80:
+                period = 2;
+                break;
+            default:
+                throw new Error('invalid SROUND value');
+        }
+
+        state.srPeriod = period;
+
+        switch (n & 0x30) {
+            case 0x00:
+                state.srPhase = 0;
+                break;
+            case 0x10:
+                state.srPhase = 0.25 * period;
+                break;
+            case 0x20:
+                state.srPhase = 0.5  * period;
+                break;
+            case 0x30:
+                state.srPhase = 0.75 * period;
+                break;
+            default: throw new Error('invalid SROUND value');
+        }
+
+        n &= 0x0F;
+
+        if (n === 0) { state.srThreshold = 0; }
+        else { state.srThreshold = (n / 8 - 0.5) * period; }
+    }
+
+    // S45ROUND[] Super ROUND 45 degrees
+    // 0x77
+    function S45ROUND(state) {
+        var n = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'S45ROUND[]', n); }
+
+        state.round = roundSuper;
+
+        var period;
+
+        switch (n & 0xC0) {
+            case 0x00:
+                period = Math.sqrt(2) / 2;
+                break;
+            case 0x40:
+                period = Math.sqrt(2);
+                break;
+            case 0x80:
+                period = 2 * Math.sqrt(2);
+                break;
+            default:
+                throw new Error('invalid S45ROUND value');
+        }
+
+        state.srPeriod = period;
+
+        switch (n & 0x30) {
+            case 0x00:
+                state.srPhase = 0;
+                break;
+            case 0x10:
+                state.srPhase = 0.25 * period;
+                break;
+            case 0x20:
+                state.srPhase = 0.5  * period;
+                break;
+            case 0x30:
+                state.srPhase = 0.75 * period;
+                break;
+            default:
+                throw new Error('invalid S45ROUND value');
+        }
+
+        n &= 0x0F;
+
+        if (n === 0) { state.srThreshold = 0; }
+        else { state.srThreshold = (n / 8 - 0.5) * period; }
+    }
+
+    // ROFF[] Round Off
+    // 0x7A
+    function ROFF(state) {
+        if (exports.DEBUG) { console.log(state.step, 'ROFF[]'); }
+
+        state.round = roundOff;
+    }
+
+    // RUTG[] Round Up To Grid
+    // 0x7C
+    function RUTG(state) {
+        if (exports.DEBUG) { console.log(state.step, 'RUTG[]'); }
+
+        state.round = roundUpToGrid;
+    }
+
+    // RDTG[] Round Down To Grid
+    // 0x7D
+    function RDTG(state) {
+        if (exports.DEBUG) { console.log(state.step, 'RDTG[]'); }
+
+        state.round = roundDownToGrid;
+    }
+
+    // SCANCTRL[] SCAN conversion ConTRoL
+    // 0x85
+    function SCANCTRL(state) {
+        var n = state.stack.pop();
+
+        // ignored by opentype.js
+
+        if (exports.DEBUG) { console.log(state.step, 'SCANCTRL[]', n); }
+    }
+
+    // SDPVTL[a] Set Dual Projection Vector To Line
+    // 0x86-0x87
+    function SDPVTL(a, state) {
+        var stack = state.stack;
+        var p2i = stack.pop();
+        var p1i = stack.pop();
+        var p2 = state.z2[p2i];
+        var p1 = state.z1[p1i];
+
+        if (exports.DEBUG) { console.log('SDPVTL[' + a + ']', p2i, p1i); }
+
+        var dx;
+        var dy;
+
+        if (!a) {
+            dx = p1.x - p2.x;
+            dy = p1.y - p2.y;
+        } else {
+            dx = p2.y - p1.y;
+            dy = p1.x - p2.x;
+        }
+
+        state.dpv = getUnitVector(dx, dy);
+    }
+
+    // GETINFO[] GET INFOrmation
+    // 0x88
+    function GETINFO(state) {
+        var stack = state.stack;
+        var sel = stack.pop();
+        var r = 0;
+
+        if (exports.DEBUG) { console.log(state.step, 'GETINFO[]', sel); }
+
+        // v35 as in no subpixel hinting
+        if (sel & 0x01) { r = 35; }
+
+        // TODO rotation and stretch currently not supported
+        // and thus those GETINFO are always 0.
+
+        // opentype.js is always gray scaling
+        if (sel & 0x20) { r |= 0x1000; }
+
+        stack.push(r);
+    }
+
+    // ROLL[] ROLL the top three stack elements
+    // 0x8A
+    function ROLL(state) {
+        var stack = state.stack;
+        var a = stack.pop();
+        var b = stack.pop();
+        var c = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'ROLL[]'); }
+
+        stack.push(b);
+        stack.push(a);
+        stack.push(c);
+    }
+
+    // MAX[] MAXimum of top two stack elements
+    // 0x8B
+    function MAX(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'MAX[]', e2, e1); }
+
+        stack.push(Math.max(e1, e2));
+    }
+
+    // MIN[] MINimum of top two stack elements
+    // 0x8C
+    function MIN(state) {
+        var stack = state.stack;
+        var e2 = stack.pop();
+        var e1 = stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'MIN[]', e2, e1); }
+
+        stack.push(Math.min(e1, e2));
+    }
+
+    // SCANTYPE[] SCANTYPE
+    // 0x8D
+    function SCANTYPE(state) {
+        var n = state.stack.pop();
+        // ignored by opentype.js
+        if (exports.DEBUG) { console.log(state.step, 'SCANTYPE[]', n); }
+    }
+
+    // INSTCTRL[] INSTCTRL
+    // 0x8D
+    function INSTCTRL(state) {
+        var s = state.stack.pop();
+        var v = state.stack.pop();
+
+        if (exports.DEBUG) { console.log(state.step, 'INSTCTRL[]', s, v); }
+
+        switch (s) {
+            case 1 : state.inhibitGridFit = !!v; return;
+            case 2 : state.ignoreCvt = !!v; return;
+            default: throw new Error('invalid INSTCTRL[] selector');
+        }
+    }
+
+    // PUSHB[abc] PUSH Bytes
+    // 0xB0-0xB7
+    function PUSHB(n, state) {
+        var stack = state.stack;
+        var prog = state.prog;
+        var ip = state.ip;
+
+        if (exports.DEBUG) { console.log(state.step, 'PUSHB[' + n + ']'); }
+
+        for (var i = 0; i < n; i++) { stack.push(prog[++ip]); }
+
+        state.ip = ip;
+    }
+
+    // PUSHW[abc] PUSH Words
+    // 0xB8-0xBF
+    function PUSHW(n, state) {
+        var ip = state.ip;
+        var prog = state.prog;
+        var stack = state.stack;
+
+        if (exports.DEBUG) { console.log(state.ip, 'PUSHW[' + n + ']'); }
+
+        for (var i = 0; i < n; i++) {
+            var w = (prog[++ip] << 8) | prog[++ip];
+            if (w & 0x8000) { w = -((w ^ 0xffff) + 1); }
+            stack.push(w);
+        }
+
+        state.ip = ip;
+    }
+
+    // MDRP[abcde] Move Direct Relative Point
+    // 0xD0-0xEF
+    // (if indirect is 0)
+    //
+    // and
+    //
+    // MIRP[abcde] Move Indirect Relative Point
+    // 0xE0-0xFF
+    // (if indirect is 1)
+
+    function MDRP_MIRP(indirect, setRp0, keepD, ro, dt, state) {
+        var stack = state.stack;
+        var cvte = indirect && stack.pop();
+        var pi = stack.pop();
+        var rp0i = state.rp0;
+        var rp = state.z0[rp0i];
+        var p = state.z1[pi];
+
+        var md = state.minDis;
+        var fv = state.fv;
+        var pv = state.dpv;
+        var od; // original distance
+        var d; // moving distance
+        var sign; // sign of distance
+        var cv;
+
+        d = od = pv.distance(p, rp, true, true);
+        sign = d >= 0 ? 1 : -1; // Math.sign would be 0 in case of 0
+
+        // TODO consider autoFlip
+        d = Math.abs(d);
+
+        if (indirect) {
+            cv = state.cvt[cvte];
+
+            if (ro && Math.abs(d - cv) < state.cvCutIn) { d = cv; }
+        }
+
+        if (keepD && d < md) { d = md; }
+
+        if (ro) { d = state.round(d); }
+
+        fv.setRelative(p, rp, sign * d, pv);
+        fv.touch(p);
+
+        if (exports.DEBUG) {
+            console.log(
+                state.step,
+                (indirect ? 'MIRP[' : 'MDRP[') +
+                (setRp0 ? 'M' : 'm') +
+                (keepD ? '>' : '_') +
+                (ro ? 'R' : '_') +
+                (dt === 0 ? 'Gr' : (dt === 1 ? 'Bl' : (dt === 2 ? 'Wh' : ''))) +
+                ']',
+                indirect ?
+                    cvte + '(' + state.cvt[cvte] + ',' +  cv + ')' :
+                    '',
+                pi,
+                '(d =', od, '->', sign * d, ')'
+            );
+        }
+
+        state.rp1 = state.rp0;
+        state.rp2 = pi;
+        if (setRp0) { state.rp0 = pi; }
+    }
+
+    /*
+    * The instruction table.
+    */
+    instructionTable = [
+        /* 0x00 */ SVTCA.bind(undefined, yUnitVector),
+        /* 0x01 */ SVTCA.bind(undefined, xUnitVector),
+        /* 0x02 */ SPVTCA.bind(undefined, yUnitVector),
+        /* 0x03 */ SPVTCA.bind(undefined, xUnitVector),
+        /* 0x04 */ SFVTCA.bind(undefined, yUnitVector),
+        /* 0x05 */ SFVTCA.bind(undefined, xUnitVector),
+        /* 0x06 */ SPVTL.bind(undefined, 0),
+        /* 0x07 */ SPVTL.bind(undefined, 1),
+        /* 0x08 */ SFVTL.bind(undefined, 0),
+        /* 0x09 */ SFVTL.bind(undefined, 1),
+        /* 0x0A */ SPVFS,
+        /* 0x0B */ SFVFS,
+        /* 0x0C */ GPV,
+        /* 0x0D */ GFV,
+        /* 0x0E */ SFVTPV,
+        /* 0x0F */ ISECT,
+        /* 0x10 */ SRP0,
+        /* 0x11 */ SRP1,
+        /* 0x12 */ SRP2,
+        /* 0x13 */ SZP0,
+        /* 0x14 */ SZP1,
+        /* 0x15 */ SZP2,
+        /* 0x16 */ SZPS,
+        /* 0x17 */ SLOOP,
+        /* 0x18 */ RTG,
+        /* 0x19 */ RTHG,
+        /* 0x1A */ SMD,
+        /* 0x1B */ ELSE,
+        /* 0x1C */ JMPR,
+        /* 0x1D */ SCVTCI,
+        /* 0x1E */ undefined,   // TODO SSWCI
+        /* 0x1F */ undefined,   // TODO SSW
+        /* 0x20 */ DUP,
+        /* 0x21 */ POP,
+        /* 0x22 */ CLEAR,
+        /* 0x23 */ SWAP,
+        /* 0x24 */ DEPTH,
+        /* 0x25 */ CINDEX,
+        /* 0x26 */ MINDEX,
+        /* 0x27 */ undefined,   // TODO ALIGNPTS
+        /* 0x28 */ undefined,
+        /* 0x29 */ undefined,   // TODO UTP
+        /* 0x2A */ LOOPCALL,
+        /* 0x2B */ CALL,
+        /* 0x2C */ FDEF,
+        /* 0x2D */ undefined,   // ENDF (eaten by FDEF)
+        /* 0x2E */ MDAP.bind(undefined, 0),
+        /* 0x2F */ MDAP.bind(undefined, 1),
+        /* 0x30 */ IUP.bind(undefined, yUnitVector),
+        /* 0x31 */ IUP.bind(undefined, xUnitVector),
+        /* 0x32 */ SHP.bind(undefined, 0),
+        /* 0x33 */ SHP.bind(undefined, 1),
+        /* 0x34 */ SHC.bind(undefined, 0),
+        /* 0x35 */ SHC.bind(undefined, 1),
+        /* 0x36 */ SHZ.bind(undefined, 0),
+        /* 0x37 */ SHZ.bind(undefined, 1),
+        /* 0x38 */ SHPIX,
+        /* 0x39 */ IP,
+        /* 0x3A */ MSIRP.bind(undefined, 0),
+        /* 0x3B */ MSIRP.bind(undefined, 1),
+        /* 0x3C */ ALIGNRP,
+        /* 0x3D */ RTDG,
+        /* 0x3E */ MIAP.bind(undefined, 0),
+        /* 0x3F */ MIAP.bind(undefined, 1),
+        /* 0x40 */ NPUSHB,
+        /* 0x41 */ NPUSHW,
+        /* 0x42 */ WS,
+        /* 0x43 */ RS,
+        /* 0x44 */ WCVTP,
+        /* 0x45 */ RCVT,
+        /* 0x46 */ GC.bind(undefined, 0),
+        /* 0x47 */ GC.bind(undefined, 1),
+        /* 0x48 */ undefined,   // TODO SCFS
+        /* 0x49 */ MD.bind(undefined, 0),
+        /* 0x4A */ MD.bind(undefined, 1),
+        /* 0x4B */ MPPEM,
+        /* 0x4C */ undefined,   // TODO MPS
+        /* 0x4D */ FLIPON,
+        /* 0x4E */ undefined,   // TODO FLIPOFF
+        /* 0x4F */ undefined,   // TODO DEBUG
+        /* 0x50 */ LT,
+        /* 0x51 */ LTEQ,
+        /* 0x52 */ GT,
+        /* 0x53 */ GTEQ,
+        /* 0x54 */ EQ,
+        /* 0x55 */ NEQ,
+        /* 0x56 */ ODD,
+        /* 0x57 */ EVEN,
+        /* 0x58 */ IF,
+        /* 0x59 */ EIF,
+        /* 0x5A */ AND,
+        /* 0x5B */ OR,
+        /* 0x5C */ NOT,
+        /* 0x5D */ DELTAP123.bind(undefined, 1),
+        /* 0x5E */ SDB,
+        /* 0x5F */ SDS,
+        /* 0x60 */ ADD,
+        /* 0x61 */ SUB,
+        /* 0x62 */ DIV,
+        /* 0x63 */ MUL,
+        /* 0x64 */ ABS,
+        /* 0x65 */ NEG,
+        /* 0x66 */ FLOOR,
+        /* 0x67 */ CEILING,
+        /* 0x68 */ ROUND.bind(undefined, 0),
+        /* 0x69 */ ROUND.bind(undefined, 1),
+        /* 0x6A */ ROUND.bind(undefined, 2),
+        /* 0x6B */ ROUND.bind(undefined, 3),
+        /* 0x6C */ undefined,   // TODO NROUND[ab]
+        /* 0x6D */ undefined,   // TODO NROUND[ab]
+        /* 0x6E */ undefined,   // TODO NROUND[ab]
+        /* 0x6F */ undefined,   // TODO NROUND[ab]
+        /* 0x70 */ WCVTF,
+        /* 0x71 */ DELTAP123.bind(undefined, 2),
+        /* 0x72 */ DELTAP123.bind(undefined, 3),
+        /* 0x73 */ DELTAC123.bind(undefined, 1),
+        /* 0x74 */ DELTAC123.bind(undefined, 2),
+        /* 0x75 */ DELTAC123.bind(undefined, 3),
+        /* 0x76 */ SROUND,
+        /* 0x77 */ S45ROUND,
+        /* 0x78 */ undefined,   // TODO JROT[]
+        /* 0x79 */ undefined,   // TODO JROF[]
+        /* 0x7A */ ROFF,
+        /* 0x7B */ undefined,
+        /* 0x7C */ RUTG,
+        /* 0x7D */ RDTG,
+        /* 0x7E */ POP, // actually SANGW, supposed to do only a pop though
+        /* 0x7F */ POP, // actually AA, supposed to do only a pop though
+        /* 0x80 */ undefined,   // TODO FLIPPT
+        /* 0x81 */ undefined,   // TODO FLIPRGON
+        /* 0x82 */ undefined,   // TODO FLIPRGOFF
+        /* 0x83 */ undefined,
+        /* 0x84 */ undefined,
+        /* 0x85 */ SCANCTRL,
+        /* 0x86 */ SDPVTL.bind(undefined, 0),
+        /* 0x87 */ SDPVTL.bind(undefined, 1),
+        /* 0x88 */ GETINFO,
+        /* 0x89 */ undefined,   // TODO IDEF
+        /* 0x8A */ ROLL,
+        /* 0x8B */ MAX,
+        /* 0x8C */ MIN,
+        /* 0x8D */ SCANTYPE,
+        /* 0x8E */ INSTCTRL,
+        /* 0x8F */ undefined,
+        /* 0x90 */ undefined,
+        /* 0x91 */ undefined,
+        /* 0x92 */ undefined,
+        /* 0x93 */ undefined,
+        /* 0x94 */ undefined,
+        /* 0x95 */ undefined,
+        /* 0x96 */ undefined,
+        /* 0x97 */ undefined,
+        /* 0x98 */ undefined,
+        /* 0x99 */ undefined,
+        /* 0x9A */ undefined,
+        /* 0x9B */ undefined,
+        /* 0x9C */ undefined,
+        /* 0x9D */ undefined,
+        /* 0x9E */ undefined,
+        /* 0x9F */ undefined,
+        /* 0xA0 */ undefined,
+        /* 0xA1 */ undefined,
+        /* 0xA2 */ undefined,
+        /* 0xA3 */ undefined,
+        /* 0xA4 */ undefined,
+        /* 0xA5 */ undefined,
+        /* 0xA6 */ undefined,
+        /* 0xA7 */ undefined,
+        /* 0xA8 */ undefined,
+        /* 0xA9 */ undefined,
+        /* 0xAA */ undefined,
+        /* 0xAB */ undefined,
+        /* 0xAC */ undefined,
+        /* 0xAD */ undefined,
+        /* 0xAE */ undefined,
+        /* 0xAF */ undefined,
+        /* 0xB0 */ PUSHB.bind(undefined, 1),
+        /* 0xB1 */ PUSHB.bind(undefined, 2),
+        /* 0xB2 */ PUSHB.bind(undefined, 3),
+        /* 0xB3 */ PUSHB.bind(undefined, 4),
+        /* 0xB4 */ PUSHB.bind(undefined, 5),
+        /* 0xB5 */ PUSHB.bind(undefined, 6),
+        /* 0xB6 */ PUSHB.bind(undefined, 7),
+        /* 0xB7 */ PUSHB.bind(undefined, 8),
+        /* 0xB8 */ PUSHW.bind(undefined, 1),
+        /* 0xB9 */ PUSHW.bind(undefined, 2),
+        /* 0xBA */ PUSHW.bind(undefined, 3),
+        /* 0xBB */ PUSHW.bind(undefined, 4),
+        /* 0xBC */ PUSHW.bind(undefined, 5),
+        /* 0xBD */ PUSHW.bind(undefined, 6),
+        /* 0xBE */ PUSHW.bind(undefined, 7),
+        /* 0xBF */ PUSHW.bind(undefined, 8),
+        /* 0xC0 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 0, 0),
+        /* 0xC1 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 0, 1),
+        /* 0xC2 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 0, 2),
+        /* 0xC3 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 0, 3),
+        /* 0xC4 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 1, 0),
+        /* 0xC5 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 1, 1),
+        /* 0xC6 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 1, 2),
+        /* 0xC7 */ MDRP_MIRP.bind(undefined, 0, 0, 0, 1, 3),
+        /* 0xC8 */ MDRP_MIRP.bind(undefined, 0, 0, 1, 0, 0),
+        /* 0xC9 */ MDRP_MIRP.bind(undefined, 0, 0, 1, 0, 1),
+        /* 0xCA */ MDRP_MIRP.bind(undefined, 0, 0, 1, 0, 2),
+        /* 0xCB */ MDRP_MIRP.bind(undefined, 0, 0, 1, 0, 3),
+        /* 0xCC */ MDRP_MIRP.bind(undefined, 0, 0, 1, 1, 0),
+        /* 0xCD */ MDRP_MIRP.bind(undefined, 0, 0, 1, 1, 1),
+        /* 0xCE */ MDRP_MIRP.bind(undefined, 0, 0, 1, 1, 2),
+        /* 0xCF */ MDRP_MIRP.bind(undefined, 0, 0, 1, 1, 3),
+        /* 0xD0 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 0, 0),
+        /* 0xD1 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 0, 1),
+        /* 0xD2 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 0, 2),
+        /* 0xD3 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 0, 3),
+        /* 0xD4 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 1, 0),
+        /* 0xD5 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 1, 1),
+        /* 0xD6 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 1, 2),
+        /* 0xD7 */ MDRP_MIRP.bind(undefined, 0, 1, 0, 1, 3),
+        /* 0xD8 */ MDRP_MIRP.bind(undefined, 0, 1, 1, 0, 0),
+        /* 0xD9 */ MDRP_MIRP.bind(undefined, 0, 1, 1, 0, 1),
+        /* 0xDA */ MDRP_MIRP.bind(undefined, 0, 1, 1, 0, 2),
+        /* 0xDB */ MDRP_MIRP.bind(undefined, 0, 1, 1, 0, 3),
+        /* 0xDC */ MDRP_MIRP.bind(undefined, 0, 1, 1, 1, 0),
+        /* 0xDD */ MDRP_MIRP.bind(undefined, 0, 1, 1, 1, 1),
+        /* 0xDE */ MDRP_MIRP.bind(undefined, 0, 1, 1, 1, 2),
+        /* 0xDF */ MDRP_MIRP.bind(undefined, 0, 1, 1, 1, 3),
+        /* 0xE0 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 0, 0),
+        /* 0xE1 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 0, 1),
+        /* 0xE2 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 0, 2),
+        /* 0xE3 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 0, 3),
+        /* 0xE4 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 1, 0),
+        /* 0xE5 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 1, 1),
+        /* 0xE6 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 1, 2),
+        /* 0xE7 */ MDRP_MIRP.bind(undefined, 1, 0, 0, 1, 3),
+        /* 0xE8 */ MDRP_MIRP.bind(undefined, 1, 0, 1, 0, 0),
+        /* 0xE9 */ MDRP_MIRP.bind(undefined, 1, 0, 1, 0, 1),
+        /* 0xEA */ MDRP_MIRP.bind(undefined, 1, 0, 1, 0, 2),
+        /* 0xEB */ MDRP_MIRP.bind(undefined, 1, 0, 1, 0, 3),
+        /* 0xEC */ MDRP_MIRP.bind(undefined, 1, 0, 1, 1, 0),
+        /* 0xED */ MDRP_MIRP.bind(undefined, 1, 0, 1, 1, 1),
+        /* 0xEE */ MDRP_MIRP.bind(undefined, 1, 0, 1, 1, 2),
+        /* 0xEF */ MDRP_MIRP.bind(undefined, 1, 0, 1, 1, 3),
+        /* 0xF0 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 0, 0),
+        /* 0xF1 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 0, 1),
+        /* 0xF2 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 0, 2),
+        /* 0xF3 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 0, 3),
+        /* 0xF4 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 1, 0),
+        /* 0xF5 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 1, 1),
+        /* 0xF6 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 1, 2),
+        /* 0xF7 */ MDRP_MIRP.bind(undefined, 1, 1, 0, 1, 3),
+        /* 0xF8 */ MDRP_MIRP.bind(undefined, 1, 1, 1, 0, 0),
+        /* 0xF9 */ MDRP_MIRP.bind(undefined, 1, 1, 1, 0, 1),
+        /* 0xFA */ MDRP_MIRP.bind(undefined, 1, 1, 1, 0, 2),
+        /* 0xFB */ MDRP_MIRP.bind(undefined, 1, 1, 1, 0, 3),
+        /* 0xFC */ MDRP_MIRP.bind(undefined, 1, 1, 1, 1, 0),
+        /* 0xFD */ MDRP_MIRP.bind(undefined, 1, 1, 1, 1, 1),
+        /* 0xFE */ MDRP_MIRP.bind(undefined, 1, 1, 1, 1, 2),
+        /* 0xFF */ MDRP_MIRP.bind(undefined, 1, 1, 1, 1, 3)
+    ];
+
+
+
+    /*****************************
+      Mathematical Considerations
+    ******************************
+
+    fv ... refers to freedom vector
+    pv ... refers to projection vector
+    rp ... refers to reference point
+    p  ... refers to to point being operated on
+    d  ... refers to distance
+
+    SETRELATIVE:
+    ============
+
+    case freedom vector == x-axis:
+    ------------------------------
+
+                            (pv)
+                         .-'
+                  rpd .-'
+                   .-*
+              d .-'90°'
+             .-'       '
+          .-'           '
+       *-'               ' b
+      rp                  '
+                           '
+                            '
+                p *----------*-------------- (fv)
+                              pm
+
+      rpdx = rpx + d * pv.x
+      rpdy = rpy + d * pv.y
+
+      equation of line b
+
+       y - rpdy = pvns * (x- rpdx)
+
+       y = p.y
+
+       x = rpdx + ( p.y - rpdy ) / pvns
+
+
+    case freedom vector == y-axis:
+    ------------------------------
+
+        * pm
+        |\
+        | \
+        |  \
+        |   \
+        |    \
+        |     \
+        |      \
+        |       \
+        |        \
+        |         \ b
+        |          \
+        |           \
+        |            \    .-' (pv)
+        |         90° \.-'
+        |           .-'* rpd
+        |        .-'
+        *     *-'  d
+        p     rp
+
+      rpdx = rpx + d * pv.x
+      rpdy = rpy + d * pv.y
+
+      equation of line b:
+               pvns ... normal slope to pv
+
+       y - rpdy = pvns * (x - rpdx)
+
+       x = p.x
+
+       y = rpdy +  pvns * (p.x - rpdx)
+
+
+
+    generic case:
+    -------------
+
+
+                                  .'(fv)
+                                .'
+                              .* pm
+                            .' !
+                          .'    .
+                        .'      !
+                      .'         . b
+                    .'           !
+                   *              .
+                  p               !
+                             90°   .    ... (pv)
+                               ...-*-'''
+                      ...---'''    rpd
+             ...---'''   d
+       *--'''
+      rp
+
+        rpdx = rpx + d * pv.x
+        rpdy = rpy + d * pv.y
+
+     equation of line b:
+        pvns... normal slope to pv
+
+        y - rpdy = pvns * (x - rpdx)
+
+     equation of freedom vector line:
+        fvs ... slope of freedom vector (=fy/fx)
+
+        y - py = fvs * (x - px)
+
+
+      on pm both equations are true for same x/y
+
+        y - rpdy = pvns * (x - rpdx)
+
+        y - py = fvs * (x - px)
+
+      form to y and set equal:
+
+        pvns * (x - rpdx) + rpdy = fvs * (x - px) + py
+
+      expand:
+
+        pvns * x - pvns * rpdx + rpdy = fvs * x - fvs * px + py
+
+      switch:
+
+        fvs * x - fvs * px + py = pvns * x - pvns * rpdx + rpdy
+
+      solve for x:
+
+        fvs * x - pvns * x = fvs * px - pvns * rpdx - py + rpdy
+
+
+
+              fvs * px - pvns * rpdx + rpdy - py
+        x =  -----------------------------------
+                     fvs - pvns
+
+      and:
+
+        y = fvs * (x - px) + py
+
+
+
+    INTERPOLATE:
+    ============
+
+    Examples of point interpolation.
+
+    The weight of the movement of the reference point gets bigger
+    the further the other reference point is away, thus the safest
+    option (that is avoiding 0/0 divisions) is to weight the
+    original distance of the other point by the sum of both distances.
+
+    If the sum of both distances is 0, then move the point by the
+    arithmetic average of the movement of both reference points.
+
+
+
+
+               (+6)
+        rp1o *---->*rp1
+             .     .                          (+12)
+             .     .                  rp2o *---------->* rp2
+             .     .                       .           .
+             .     .                       .           .
+             .    10          20           .           .
+             |.........|...................|           .
+                   .   .                               .
+                   .   . (+8)                          .
+                    po *------>*p                      .
+                   .           .                       .
+                   .    12     .          24           .
+                   |...........|.......................|
+                                      36
+
+
+    -------
+
+
+
+               (+10)
+        rp1o *-------->*rp1
+             .         .                      (-10)
+             .         .              rp2 *<---------* rpo2
+             .         .                   .         .
+             .         .                   .         .
+             .    10   .          30       .         .
+             |.........|.............................|
+                       .                   .
+                       . (+5)              .
+                    po *--->* p            .
+                       .    .              .
+                       .    .   20         .
+                       |....|..............|
+                         5        15
+
+
+    -------
+
+
+               (+10)
+        rp1o *-------->*rp1
+             .         .
+             .         .
+        rp2o *-------->*rp2
+
+
+                                   (+10)
+                              po *-------->* p
+
+    -------
+
+
+               (+10)
+        rp1o *-------->*rp1
+             .         .
+             .         .(+30)
+        rp2o *---------------------------->*rp2
+
+
+                                            (+25)
+                              po *----------------------->* p
+
+
+
+    vim: set ts=4 sw=4 expandtab:
+    *****/
+
+    // The Font object
+
+    /**
+     * @typedef FontOptions
+     * @type Object
+     * @property {Boolean} empty - whether to create a new empty font
+     * @property {string} familyName
+     * @property {string} styleName
+     * @property {string=} fullName
+     * @property {string=} postScriptName
+     * @property {string=} designer
+     * @property {string=} designerURL
+     * @property {string=} manufacturer
+     * @property {string=} manufacturerURL
+     * @property {string=} license
+     * @property {string=} licenseURL
+     * @property {string=} version
+     * @property {string=} description
+     * @property {string=} copyright
+     * @property {string=} trademark
+     * @property {Number} unitsPerEm
+     * @property {Number} ascender
+     * @property {Number} descender
+     * @property {Number} createdTimestamp
+     * @property {string=} weightClass
+     * @property {string=} widthClass
+     * @property {string=} fsSelection
+     */
+
+    /**
+     * A Font represents a loaded OpenType font file.
+     * It contains a set of glyphs and methods to draw text on a drawing context,
+     * or to get a path representing the text.
+     * @exports opentype.Font
+     * @class
+     * @param {FontOptions}
+     * @constructor
+     */
+    function Font(options) {
+        options = options || {};
+
+        if (!options.empty) {
+            // Check that we've provided the minimum set of names.
+            checkArgument(options.familyName, 'When creating a new Font object, familyName is required.');
+            checkArgument(options.styleName, 'When creating a new Font object, styleName is required.');
+            checkArgument(options.unitsPerEm, 'When creating a new Font object, unitsPerEm is required.');
+            checkArgument(options.ascender, 'When creating a new Font object, ascender is required.');
+            checkArgument(options.descender, 'When creating a new Font object, descender is required.');
+            checkArgument(options.descender < 0, 'Descender should be negative (e.g. -512).');
+
+            // OS X will complain if the names are empty, so we put a single space everywhere by default.
+            this.names = {
+                fontFamily: {en: options.familyName || ' '},
+                fontSubfamily: {en: options.styleName || ' '},
+                fullName: {en: options.fullName || options.familyName + ' ' + options.styleName},
+                postScriptName: {en: options.postScriptName || options.familyName + options.styleName},
+                designer: {en: options.designer || ' '},
+                designerURL: {en: options.designerURL || ' '},
+                manufacturer: {en: options.manufacturer || ' '},
+                manufacturerURL: {en: options.manufacturerURL || ' '},
+                license: {en: options.license || ' '},
+                licenseURL: {en: options.licenseURL || ' '},
+                version: {en: options.version || 'Version 0.1'},
+                description: {en: options.description || ' '},
+                copyright: {en: options.copyright || ' '},
+                trademark: {en: options.trademark || ' '}
+            };
+            this.unitsPerEm = options.unitsPerEm || 1000;
+            this.ascender = options.ascender;
+            this.descender = options.descender;
+            this.createdTimestamp = options.createdTimestamp;
+            this.tables = { os2: {
+                usWeightClass: options.weightClass || this.usWeightClasses.MEDIUM,
+                usWidthClass: options.widthClass || this.usWidthClasses.MEDIUM,
+                fsSelection: options.fsSelection || this.fsSelectionValues.REGULAR
+            } };
+        }
+
+        this.supported = true; // Deprecated: parseBuffer will throw an error if font is not supported.
+        this.glyphs = new glyphset.GlyphSet(this, options.glyphs || []);
+        this.encoding = new DefaultEncoding(this);
+        this.substitution = new Substitution(this);
+        this.tables = this.tables || {};
+
+        Object.defineProperty(this, 'hinting', {
+            get: function() {
+                if (this._hinting) { return this._hinting; }
+                if (this.outlinesFormat === 'truetype') {
+                    return (this._hinting = new Hinting(this));
+                }
+            }
+        });
+    }
+
+    /**
+     * Check if the font has a glyph for the given character.
+     * @param  {string}
+     * @return {Boolean}
+     */
+    Font.prototype.hasChar = function(c) {
+        return this.encoding.charToGlyphIndex(c) !== null;
+    };
+
+    /**
+     * Convert the given character to a single glyph index.
+     * Note that this function assumes that there is a one-to-one mapping between
+     * the given character and a glyph; for complex scripts this might not be the case.
+     * @param  {string}
+     * @return {Number}
+     */
+    Font.prototype.charToGlyphIndex = function(s) {
+        return this.encoding.charToGlyphIndex(s);
+    };
+
+    /**
+     * Convert the given character to a single Glyph object.
+     * Note that this function assumes that there is a one-to-one mapping between
+     * the given character and a glyph; for complex scripts this might not be the case.
+     * @param  {string}
+     * @return {opentype.Glyph}
+     */
+    Font.prototype.charToGlyph = function(c) {
+        var glyphIndex = this.charToGlyphIndex(c);
+        var glyph = this.glyphs.get(glyphIndex);
+        if (!glyph) {
+            // .notdef
+            glyph = this.glyphs.get(0);
+        }
+
+        return glyph;
+    };
+
+    /**
+     * Convert the given text to a list of Glyph objects.
+     * Note that there is no strict one-to-one mapping between characters and
+     * glyphs, so the list of returned glyphs can be larger or smaller than the
+     * length of the given string.
+     * @param  {string}
+     * @param  {GlyphRenderOptions} [options]
+     * @return {opentype.Glyph[]}
+     */
+    Font.prototype.stringToGlyphs = function(s, options) {
+        var this$1 = this;
+
+        options = options || this.defaultRenderOptions;
+        // Get glyph indexes
+        var indexes = [];
+        for (var i = 0; i < s.length; i += 1) {
+            var c = s[i];
+            indexes.push(this$1.charToGlyphIndex(c));
+        }
+        var length = indexes.length;
+
+        // Apply substitutions on glyph indexes
+        if (options.features) {
+            var script = options.script || this.substitution.getDefaultScriptName();
+            var manyToOne = [];
+            if (options.features.liga) { manyToOne = manyToOne.concat(this.substitution.getFeature('liga', script, options.language)); }
+            if (options.features.rlig) { manyToOne = manyToOne.concat(this.substitution.getFeature('rlig', script, options.language)); }
+            for (var i$1 = 0; i$1 < length; i$1 += 1) {
+                for (var j = 0; j < manyToOne.length; j++) {
+                    var ligature = manyToOne[j];
+                    var components = ligature.sub;
+                    var compCount = components.length;
+                    var k = 0;
+                    while (k < compCount && components[k] === indexes[i$1 + k]) { k++; }
+                    if (k === compCount) {
+                        indexes.splice(i$1, compCount, ligature.by);
+                        length = length - compCount + 1;
+                    }
+                }
+            }
+        }
+
+        // convert glyph indexes to glyph objects
+        var glyphs = new Array(length);
+        var notdef = this.glyphs.get(0);
+        for (var i$2 = 0; i$2 < length; i$2 += 1) {
+            glyphs[i$2] = this$1.glyphs.get(indexes[i$2]) || notdef;
+        }
+        return glyphs;
+    };
+
+    /**
+     * @param  {string}
+     * @return {Number}
+     */
+    Font.prototype.nameToGlyphIndex = function(name) {
+        return this.glyphNames.nameToGlyphIndex(name);
+    };
+
+    /**
+     * @param  {string}
+     * @return {opentype.Glyph}
+     */
+    Font.prototype.nameToGlyph = function(name) {
+        var glyphIndex = this.nameToGlyphIndex(name);
+        var glyph = this.glyphs.get(glyphIndex);
+        if (!glyph) {
+            // .notdef
+            glyph = this.glyphs.get(0);
+        }
+
+        return glyph;
+    };
+
+    /**
+     * @param  {Number}
+     * @return {String}
+     */
+    Font.prototype.glyphIndexToName = function(gid) {
+        if (!this.glyphNames.glyphIndexToName) {
+            return '';
+        }
+
+        return this.glyphNames.glyphIndexToName(gid);
+    };
+
+    /**
+     * Retrieve the value of the kerning pair between the left glyph (or its index)
+     * and the right glyph (or its index). If no kerning pair is found, return 0.
+     * The kerning value gets added to the advance width when calculating the spacing
+     * between glyphs.
+     * @param  {opentype.Glyph} leftGlyph
+     * @param  {opentype.Glyph} rightGlyph
+     * @return {Number}
+     */
+    Font.prototype.getKerningValue = function(leftGlyph, rightGlyph) {
+        leftGlyph = leftGlyph.index || leftGlyph;
+        rightGlyph = rightGlyph.index || rightGlyph;
+        var gposKerning = this.getGposKerningValue;
+        return gposKerning ? gposKerning(leftGlyph, rightGlyph) :
+            (this.kerningPairs[leftGlyph + ',' + rightGlyph] || 0);
+    };
+
+    /**
+     * @typedef GlyphRenderOptions
+     * @type Object
+     * @property {string} [script] - script used to determine which features to apply. By default, 'DFLT' or 'latn' is used.
+     *                               See https://www.microsoft.com/typography/otspec/scripttags.htm
+     * @property {string} [language='dflt'] - language system used to determine which features to apply.
+     *                                        See https://www.microsoft.com/typography/developers/opentype/languagetags.aspx
+     * @property {boolean} [kerning=true] - whether to include kerning values
+     * @property {object} [features] - OpenType Layout feature tags. Used to enable or disable the features of the given script/language system.
+     *                                 See https://www.microsoft.com/typography/otspec/featuretags.htm
+     */
+    Font.prototype.defaultRenderOptions = {
+        kerning: true,
+        features: {
+            liga: true,
+            rlig: true
+        }
+    };
+
+    /**
+     * Helper function that invokes the given callback for each glyph in the given text.
+     * The callback gets `(glyph, x, y, fontSize, options)`.* @param  {string} text
+     * @param {string} text - The text to apply.
+     * @param  {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     * @param  {GlyphRenderOptions=} options
+     * @param  {Function} callback
+     */
+    Font.prototype.forEachGlyph = function(text, x, y, fontSize, options, callback) {
+        var this$1 = this;
+
+        x = x !== undefined ? x : 0;
+        y = y !== undefined ? y : 0;
+        fontSize = fontSize !== undefined ? fontSize : 72;
+        options = options || this.defaultRenderOptions;
+        var fontScale = 1 / this.unitsPerEm * fontSize;
+        var glyphs = this.stringToGlyphs(text, options);
+        for (var i = 0; i < glyphs.length; i += 1) {
+            var glyph = glyphs[i];
+            callback.call(this$1, glyph, x, y, fontSize, options);
+            if (glyph.advanceWidth) {
+                x += glyph.advanceWidth * fontScale;
+            }
+
+            if (options.kerning && i < glyphs.length - 1) {
+                var kerningValue = this$1.getKerningValue(glyph, glyphs[i + 1]);
+                x += kerningValue * fontScale;
+            }
+
+            if (options.letterSpacing) {
+                x += options.letterSpacing * fontSize;
+            } else if (options.tracking) {
+                x += (options.tracking / 1000) * fontSize;
+            }
+        }
+        return x;
+    };
+
+    /**
+     * Create a Path object that represents the given text.
+     * @param  {string} text - The text to create.
+     * @param  {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     * @param  {GlyphRenderOptions=} options
+     * @return {opentype.Path}
+     */
+    Font.prototype.getPath = function(text, x, y, fontSize, options) {
+        var fullPath = new Path();
+        this.forEachGlyph(text, x, y, fontSize, options, function(glyph, gX, gY, gFontSize) {
+            var glyphPath = glyph.getPath(gX, gY, gFontSize, options, this);
+            fullPath.extend(glyphPath);
+        });
+        return fullPath;
+    };
+
+    /**
+     * Create an array of Path objects that represent the glyphs of a given text.
+     * @param  {string} text - The text to create.
+     * @param  {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     * @param  {GlyphRenderOptions=} options
+     * @return {opentype.Path[]}
+     */
+    Font.prototype.getPaths = function(text, x, y, fontSize, options) {
+        var glyphPaths = [];
+        this.forEachGlyph(text, x, y, fontSize, options, function(glyph, gX, gY, gFontSize) {
+            var glyphPath = glyph.getPath(gX, gY, gFontSize, options, this);
+            glyphPaths.push(glyphPath);
+        });
+
+        return glyphPaths;
+    };
+
+    /**
+     * Returns the advance width of a text.
+     *
+     * This is something different than Path.getBoundingBox() as for example a
+     * suffixed whitespace increases the advanceWidth but not the bounding box
+     * or an overhanging letter like a calligraphic 'f' might have a quite larger
+     * bounding box than its advance width.
+     *
+     * This corresponds to canvas2dContext.measureText(text).width
+     *
+     * @param  {string} text - The text to create.
+     * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     * @param  {GlyphRenderOptions=} options
+     * @return advance width
+     */
+    Font.prototype.getAdvanceWidth = function(text, fontSize, options) {
+        return this.forEachGlyph(text, 0, 0, fontSize, options, function() {});
+    };
+
+    /**
+     * Draw the text on the given drawing context.
+     * @param  {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+     * @param  {string} text - The text to create.
+     * @param  {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     * @param  {GlyphRenderOptions=} options
+     */
+    Font.prototype.draw = function(ctx, text, x, y, fontSize, options) {
+        this.getPath(text, x, y, fontSize, options).draw(ctx);
+    };
+
+    /**
+     * Draw the points of all glyphs in the text.
+     * On-curve points will be drawn in blue, off-curve points will be drawn in red.
+     * @param {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+     * @param {string} text - The text to create.
+     * @param {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     * @param {GlyphRenderOptions=} options
+     */
+    Font.prototype.drawPoints = function(ctx, text, x, y, fontSize, options) {
+        this.forEachGlyph(text, x, y, fontSize, options, function(glyph, gX, gY, gFontSize) {
+            glyph.drawPoints(ctx, gX, gY, gFontSize);
+        });
+    };
+
+    /**
+     * Draw lines indicating important font measurements for all glyphs in the text.
+     * Black lines indicate the origin of the coordinate system (point 0,0).
+     * Blue lines indicate the glyph bounding box.
+     * Green line indicates the advance width of the glyph.
+     * @param {CanvasRenderingContext2D} ctx - A 2D drawing context, like Canvas.
+     * @param {string} text - The text to create.
+     * @param {number} [x=0] - Horizontal position of the beginning of the text.
+     * @param {number} [y=0] - Vertical position of the *baseline* of the text.
+     * @param {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
+     * @param {GlyphRenderOptions=} options
+     */
+    Font.prototype.drawMetrics = function(ctx, text, x, y, fontSize, options) {
+        this.forEachGlyph(text, x, y, fontSize, options, function(glyph, gX, gY, gFontSize) {
+            glyph.drawMetrics(ctx, gX, gY, gFontSize);
+        });
+    };
+
+    /**
+     * @param  {string}
+     * @return {string}
+     */
+    Font.prototype.getEnglishName = function(name) {
+        var translations = this.names[name];
+        if (translations) {
+            return translations.en;
+        }
+    };
+
+    /**
+     * Validate
+     */
+    Font.prototype.validate = function() {
+        var warnings = [];
+        var _this = this;
+
+        function assert(predicate, message) {
+            if (!predicate) {
+                warnings.push(message);
+            }
+        }
+
+        function assertNamePresent(name) {
+            var englishName = _this.getEnglishName(name);
+            assert(englishName && englishName.trim().length > 0,
+                   'No English ' + name + ' specified.');
+        }
+
+        // Identification information
+        assertNamePresent('fontFamily');
+        assertNamePresent('weightName');
+        assertNamePresent('manufacturer');
+        assertNamePresent('copyright');
+        assertNamePresent('version');
+
+        // Dimension information
+        assert(this.unitsPerEm > 0, 'No unitsPerEm specified.');
+    };
+
+    /**
+     * Convert the font object to a SFNT data structure.
+     * This structure contains all the necessary tables and metadata to create a binary OTF file.
+     * @return {opentype.Table}
+     */
+    Font.prototype.toTables = function() {
+        return sfnt.fontToTable(this);
+    };
+    /**
+     * @deprecated Font.toBuffer is deprecated. Use Font.toArrayBuffer instead.
+     */
+    Font.prototype.toBuffer = function() {
+        console.warn('Font.toBuffer is deprecated. Use Font.toArrayBuffer instead.');
+        return this.toArrayBuffer();
+    };
+    /**
+     * Converts a `opentype.Font` into an `ArrayBuffer`
+     * @return {ArrayBuffer}
+     */
+    Font.prototype.toArrayBuffer = function() {
+        var sfntTable = this.toTables();
+        var bytes = sfntTable.encode();
+        var buffer = new ArrayBuffer(bytes.length);
+        var intArray = new Uint8Array(buffer);
+        for (var i = 0; i < bytes.length; i++) {
+            intArray[i] = bytes[i];
+        }
+
+        return buffer;
+    };
+
+    /**
+     * Initiate a download of the OpenType font.
+     */
+    Font.prototype.download = function(fileName) {
+        var familyName = this.getEnglishName('fontFamily');
+        var styleName = this.getEnglishName('fontSubfamily');
+        fileName = fileName || familyName.replace(/\s/g, '') + '-' + styleName + '.otf';
+        var arrayBuffer = this.toArrayBuffer();
+
+        if (isBrowser()) {
+            window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
+            window.requestFileSystem(window.TEMPORARY, arrayBuffer.byteLength, function(fs) {
+                fs.root.getFile(fileName, {create: true}, function(fileEntry) {
+                    fileEntry.createWriter(function(writer) {
+                        var dataView = new DataView(arrayBuffer);
+                        var blob = new Blob([dataView], {type: 'font/opentype'});
+                        writer.write(blob);
+
+                        writer.addEventListener('writeend', function() {
+                            // Navigating to the file will download it.
+                            location.href = fileEntry.toURL();
+                        }, false);
+                    });
+                });
+            },
+            function(err) {
+                throw new Error(err.name + ': ' + err.message);
+            });
+        } else {
+            var fs = _dereq_('fs');
+            var buffer = arrayBufferToNodeBuffer(arrayBuffer);
+            fs.writeFileSync(fileName, buffer);
+        }
+    };
+    /**
+     * @private
+     */
+    Font.prototype.fsSelectionValues = {
+        ITALIC:              0x001, //1
+        UNDERSCORE:          0x002, //2
+        NEGATIVE:            0x004, //4
+        OUTLINED:            0x008, //8
+        STRIKEOUT:           0x010, //16
+        BOLD:                0x020, //32
+        REGULAR:             0x040, //64
+        USER_TYPO_METRICS:   0x080, //128
+        WWS:                 0x100, //256
+        OBLIQUE:             0x200  //512
+    };
+
+    /**
+     * @private
+     */
+    Font.prototype.usWidthClasses = {
+        ULTRA_CONDENSED: 1,
+        EXTRA_CONDENSED: 2,
+        CONDENSED: 3,
+        SEMI_CONDENSED: 4,
+        MEDIUM: 5,
+        SEMI_EXPANDED: 6,
+        EXPANDED: 7,
+        EXTRA_EXPANDED: 8,
+        ULTRA_EXPANDED: 9
+    };
+
+    /**
+     * @private
+     */
+    Font.prototype.usWeightClasses = {
+        THIN: 100,
+        EXTRA_LIGHT: 200,
+        LIGHT: 300,
+        NORMAL: 400,
+        MEDIUM: 500,
+        SEMI_BOLD: 600,
+        BOLD: 700,
+        EXTRA_BOLD: 800,
+        BLACK:    900
+    };
+
+    // The `fvar` table stores font variation axes and instances.
+    // https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6fvar.html
+
+    function addName(name, names) {
+        var nameString = JSON.stringify(name);
+        var nameID = 256;
+        for (var nameKey in names) {
+            var n = parseInt(nameKey);
+            if (!n || n < 256) {
+                continue;
+            }
+
+            if (JSON.stringify(names[nameKey]) === nameString) {
+                return n;
+            }
+
+            if (nameID <= n) {
+                nameID = n + 1;
+            }
+        }
+
+        names[nameID] = name;
+        return nameID;
+    }
+
+    function makeFvarAxis(n, axis, names) {
+        var nameID = addName(axis.name, names);
+        return [
+            {name: 'tag_' + n, type: 'TAG', value: axis.tag},
+            {name: 'minValue_' + n, type: 'FIXED', value: axis.minValue << 16},
+            {name: 'defaultValue_' + n, type: 'FIXED', value: axis.defaultValue << 16},
+            {name: 'maxValue_' + n, type: 'FIXED', value: axis.maxValue << 16},
+            {name: 'flags_' + n, type: 'USHORT', value: 0},
+            {name: 'nameID_' + n, type: 'USHORT', value: nameID}
+        ];
+    }
+
+    function parseFvarAxis(data, start, names) {
+        var axis = {};
+        var p = new parse.Parser(data, start);
+        axis.tag = p.parseTag();
+        axis.minValue = p.parseFixed();
+        axis.defaultValue = p.parseFixed();
+        axis.maxValue = p.parseFixed();
+        p.skip('uShort', 1);  // reserved for flags; no values defined
+        axis.name = names[p.parseUShort()] || {};
+        return axis;
+    }
+
+    function makeFvarInstance(n, inst, axes, names) {
+        var nameID = addName(inst.name, names);
+        var fields = [
+            {name: 'nameID_' + n, type: 'USHORT', value: nameID},
+            {name: 'flags_' + n, type: 'USHORT', value: 0}
+        ];
+
+        for (var i = 0; i < axes.length; ++i) {
+            var axisTag = axes[i].tag;
+            fields.push({
+                name: 'axis_' + n + ' ' + axisTag,
+                type: 'FIXED',
+                value: inst.coordinates[axisTag] << 16
+            });
+        }
+
+        return fields;
+    }
+
+    function parseFvarInstance(data, start, axes, names) {
+        var inst = {};
+        var p = new parse.Parser(data, start);
+        inst.name = names[p.parseUShort()] || {};
+        p.skip('uShort', 1);  // reserved for flags; no values defined
+
+        inst.coordinates = {};
+        for (var i = 0; i < axes.length; ++i) {
+            inst.coordinates[axes[i].tag] = p.parseFixed();
+        }
+
+        return inst;
+    }
+
+    function makeFvarTable(fvar, names) {
+        var result = new table.Table('fvar', [
+            {name: 'version', type: 'ULONG', value: 0x10000},
+            {name: 'offsetToData', type: 'USHORT', value: 0},
+            {name: 'countSizePairs', type: 'USHORT', value: 2},
+            {name: 'axisCount', type: 'USHORT', value: fvar.axes.length},
+            {name: 'axisSize', type: 'USHORT', value: 20},
+            {name: 'instanceCount', type: 'USHORT', value: fvar.instances.length},
+            {name: 'instanceSize', type: 'USHORT', value: 4 + fvar.axes.length * 4}
+        ]);
+        result.offsetToData = result.sizeOf();
+
+        for (var i = 0; i < fvar.axes.length; i++) {
+            result.fields = result.fields.concat(makeFvarAxis(i, fvar.axes[i], names));
+        }
+
+        for (var j = 0; j < fvar.instances.length; j++) {
+            result.fields = result.fields.concat(makeFvarInstance(j, fvar.instances[j], fvar.axes, names));
+        }
+
+        return result;
+    }
+
+    function parseFvarTable(data, start, names) {
+        var p = new parse.Parser(data, start);
+        var tableVersion = p.parseULong();
+        check.argument(tableVersion === 0x00010000, 'Unsupported fvar table version.');
+        var offsetToData = p.parseOffset16();
+        // Skip countSizePairs.
+        p.skip('uShort', 1);
+        var axisCount = p.parseUShort();
+        var axisSize = p.parseUShort();
+        var instanceCount = p.parseUShort();
+        var instanceSize = p.parseUShort();
+
+        var axes = [];
+        for (var i = 0; i < axisCount; i++) {
+            axes.push(parseFvarAxis(data, start + offsetToData + i * axisSize, names));
+        }
+
+        var instances = [];
+        var instanceStart = start + offsetToData + axisCount * axisSize;
+        for (var j = 0; j < instanceCount; j++) {
+            instances.push(parseFvarInstance(data, instanceStart + j * instanceSize, axes, names));
+        }
+
+        return {axes: axes, instances: instances};
+    }
+
+    var fvar = { make: makeFvarTable, parse: parseFvarTable };
+
+    // The `GPOS` table contains kerning pairs, among other things.
+    // https://www.microsoft.com/typography/OTSPEC/gpos.htm
+
+    // Parse ScriptList and FeatureList tables of GPOS, GSUB, GDEF, BASE, JSTF tables.
+    // These lists are unused by now, this function is just the basis for a real parsing.
+    function parseTaggedListTable(data, start) {
+        var p = new parse.Parser(data, start);
+        var n = p.parseUShort();
+        var list = [];
+        for (var i = 0; i < n; i++) {
+            list[p.parseTag()] = { offset: p.parseUShort() };
+        }
+
+        return list;
+    }
+
+    // Parse a coverage table in a GSUB, GPOS or GDEF table.
+    // Format 1 is a simple list of glyph ids,
+    // Format 2 is a list of ranges. It is expanded in a list of glyphs, maybe not the best idea.
+    function parseCoverageTable(data, start) {
+        var p = new parse.Parser(data, start);
+        var format = p.parseUShort();
+        var count = p.parseUShort();
+        if (format === 1) {
+            return p.parseUShortList(count);
+        } else if (format === 2) {
+            var coverage = [];
+            for (; count--;) {
+                var begin = p.parseUShort();
+                var end = p.parseUShort();
+                var index = p.parseUShort();
+                for (var i = begin; i <= end; i++) {
+                    coverage[index++] = i;
+                }
+            }
+
+            return coverage;
+        }
+    }
+
+    // Parse a Class Definition Table in a GSUB, GPOS or GDEF table.
+    // Returns a function that gets a class value from a glyph ID.
+    function parseClassDefTable(data, start) {
+        var p = new parse.Parser(data, start);
+        var format = p.parseUShort();
+        if (format === 1) {
+            // Format 1 specifies a range of consecutive glyph indices, one class per glyph ID.
+            var startGlyph = p.parseUShort();
+            var glyphCount = p.parseUShort();
+            var classes = p.parseUShortList(glyphCount);
+            return function(glyphID) {
+                return classes[glyphID - startGlyph] || 0;
+            };
+        } else if (format === 2) {
+            // Format 2 defines multiple groups of glyph indices that belong to the same class.
+            var rangeCount = p.parseUShort();
+            var startGlyphs = [];
+            var endGlyphs = [];
+            var classValues = [];
+            for (var i = 0; i < rangeCount; i++) {
+                startGlyphs[i] = p.parseUShort();
+                endGlyphs[i] = p.parseUShort();
+                classValues[i] = p.parseUShort();
+            }
+
+            return function(glyphID) {
+                var l = 0;
+                var r = startGlyphs.length - 1;
+                while (l < r) {
+                    var c = (l + r + 1) >> 1;
+                    if (glyphID < startGlyphs[c]) {
+                        r = c - 1;
+                    } else {
+                        l = c;
+                    }
+                }
+
+                if (startGlyphs[l] <= glyphID && glyphID <= endGlyphs[l]) {
+                    return classValues[l] || 0;
+                }
+
+                return 0;
+            };
+        }
+    }
+
+    // Parse a pair adjustment positioning subtable, format 1 or format 2
+    // The subtable is returned in the form of a lookup function.
+    function parsePairPosSubTable(data, start) {
+        var p = new parse.Parser(data, start);
+        // This part is common to format 1 and format 2 subtables
+        var format = p.parseUShort();
+        var coverageOffset = p.parseUShort();
+        var coverage = parseCoverageTable(data, start + coverageOffset);
+        // valueFormat 4: XAdvance only, 1: XPlacement only, 0: no ValueRecord for second glyph
+        // Only valueFormat1=4 and valueFormat2=0 is supported.
+        var valueFormat1 = p.parseUShort();
+        var valueFormat2 = p.parseUShort();
+        var value1;
+        var value2;
+        if (valueFormat1 !== 4 || valueFormat2 !== 0) { return; }
+        var sharedPairSets = {};
+        if (format === 1) {
+            // Pair Positioning Adjustment: Format 1
+            var pairSetCount = p.parseUShort();
+            var pairSet = [];
+            // Array of offsets to PairSet tables-from beginning of PairPos subtable-ordered by Coverage Index
+            var pairSetOffsets = p.parseOffset16List(pairSetCount);
+            for (var firstGlyph = 0; firstGlyph < pairSetCount; firstGlyph++) {
+                var pairSetOffset = pairSetOffsets[firstGlyph];
+                var sharedPairSet = sharedPairSets[pairSetOffset];
+                if (!sharedPairSet) {
+                    // Parse a pairset table in a pair adjustment subtable format 1
+                    sharedPairSet = {};
+                    p.relativeOffset = pairSetOffset;
+                    var pairValueCount = p.parseUShort();
+                    for (; pairValueCount--;) {
+                        var secondGlyph = p.parseUShort();
+                        if (valueFormat1) { value1 = p.parseShort(); }
+                        if (valueFormat2) { value2 = p.parseShort(); }
+                        // We only support valueFormat1 = 4 and valueFormat2 = 0,
+                        // so value1 is the XAdvance and value2 is empty.
+                        sharedPairSet[secondGlyph] = value1;
+                    }
+                }
+
+                pairSet[coverage[firstGlyph]] = sharedPairSet;
+            }
+
+            return function(leftGlyph, rightGlyph) {
+                var pairs = pairSet[leftGlyph];
+                if (pairs) { return pairs[rightGlyph]; }
+            };
+        } else if (format === 2) {
+            // Pair Positioning Adjustment: Format 2
+            var classDef1Offset = p.parseUShort();
+            var classDef2Offset = p.parseUShort();
+            var class1Count = p.parseUShort();
+            var class2Count = p.parseUShort();
+            var getClass1 = parseClassDefTable(data, start + classDef1Offset);
+            var getClass2 = parseClassDefTable(data, start + classDef2Offset);
+
+            // Parse kerning values by class pair.
+            var kerningMatrix = [];
+            for (var i = 0; i < class1Count; i++) {
+                var kerningRow = kerningMatrix[i] = [];
+                for (var j = 0; j < class2Count; j++) {
+                    if (valueFormat1) { value1 = p.parseShort(); }
+                    if (valueFormat2) { value2 = p.parseShort(); }
+                    // We only support valueFormat1 = 4 and valueFormat2 = 0,
+                    // so value1 is the XAdvance and value2 is empty.
+                    kerningRow[j] = value1;
+                }
+            }
+
+            // Convert coverage list to a hash
+            var covered = {};
+            for (var i$1 = 0; i$1 < coverage.length; i$1++) {
+                covered[coverage[i$1]] = 1;
+            }
+
+            // Get the kerning value for a specific glyph pair.
+            return function(leftGlyph, rightGlyph) {
+                if (!covered[leftGlyph]) { return; }
+                var class1 = getClass1(leftGlyph);
+                var class2 = getClass2(rightGlyph);
+                var kerningRow = kerningMatrix[class1];
+
+                if (kerningRow) {
+                    return kerningRow[class2];
+                }
+            };
+        }
+    }
+
+    // Parse a LookupTable (present in of GPOS, GSUB, GDEF, BASE, JSTF tables).
+    function parseLookupTable(data, start) {
+        var p = new parse.Parser(data, start);
+        var lookupType = p.parseUShort();
+        var lookupFlag = p.parseUShort();
+        var useMarkFilteringSet = lookupFlag & 0x10;
+        var subTableCount = p.parseUShort();
+        var subTableOffsets = p.parseOffset16List(subTableCount);
+        var table = {
+            lookupType: lookupType,
+            lookupFlag: lookupFlag,
+            markFilteringSet: useMarkFilteringSet ? p.parseUShort() : -1
+        };
+        // LookupType 2, Pair adjustment
+        if (lookupType === 2) {
+            var subtables = [];
+            for (var i = 0; i < subTableCount; i++) {
+                var pairPosSubTable = parsePairPosSubTable(data, start + subTableOffsets[i]);
+                if (pairPosSubTable) { subtables.push(pairPosSubTable); }
+            }
+            // Return a function which finds the kerning values in the subtables.
+            table.getKerningValue = function(leftGlyph, rightGlyph) {
+                for (var i = subtables.length; i--;) {
+                    var value = subtables[i](leftGlyph, rightGlyph);
+                    if (value !== undefined) { return value; }
+                }
+
+                return 0;
+            };
+        }
+
+        return table;
+    }
+
+    // Parse the `GPOS` table which contains, among other things, kerning pairs.
+    // https://www.microsoft.com/typography/OTSPEC/gpos.htm
+    function parseGposTable(data, start, font) {
+        var p = new parse.Parser(data, start);
+        var tableVersion = p.parseFixed();
+        check.argument(tableVersion === 1, 'Unsupported GPOS table version.');
+
+        // ScriptList and FeatureList - ignored for now
+        parseTaggedListTable(data, start + p.parseUShort());
+        // 'kern' is the feature we are looking for.
+        parseTaggedListTable(data, start + p.parseUShort());
+
+        // LookupList
+        var lookupListOffset = p.parseUShort();
+        p.relativeOffset = lookupListOffset;
+        var lookupCount = p.parseUShort();
+        var lookupTableOffsets = p.parseOffset16List(lookupCount);
+        var lookupListAbsoluteOffset = start + lookupListOffset;
+        for (var i = 0; i < lookupCount; i++) {
+            var table = parseLookupTable(data, lookupListAbsoluteOffset + lookupTableOffsets[i]);
+            if (table.lookupType === 2 && !font.getGposKerningValue) { font.getGposKerningValue = table.getKerningValue; }
+        }
+    }
+
+    var gpos = { parse: parseGposTable };
+
+    // The `kern` table contains kerning pairs.
+    // Note that some fonts use the GPOS OpenType layout table to specify kerning.
+    // https://www.microsoft.com/typography/OTSPEC/kern.htm
+
+    function parseWindowsKernTable(p) {
+        var pairs = {};
+        // Skip nTables.
+        p.skip('uShort');
+        var subtableVersion = p.parseUShort();
+        check.argument(subtableVersion === 0, 'Unsupported kern sub-table version.');
+        // Skip subtableLength, subtableCoverage
+        p.skip('uShort', 2);
+        var nPairs = p.parseUShort();
+        // Skip searchRange, entrySelector, rangeShift.
+        p.skip('uShort', 3);
+        for (var i = 0; i < nPairs; i += 1) {
+            var leftIndex = p.parseUShort();
+            var rightIndex = p.parseUShort();
+            var value = p.parseShort();
+            pairs[leftIndex + ',' + rightIndex] = value;
+        }
+        return pairs;
+    }
+
+    function parseMacKernTable(p) {
+        var pairs = {};
+        // The Mac kern table stores the version as a fixed (32 bits) but we only loaded the first 16 bits.
+        // Skip the rest.
+        p.skip('uShort');
+        var nTables = p.parseULong();
+        //check.argument(nTables === 1, 'Only 1 subtable is supported (got ' + nTables + ').');
+        if (nTables > 1) {
+            console.warn('Only the first kern subtable is supported.');
+        }
+        p.skip('uLong');
+        var coverage = p.parseUShort();
+        var subtableVersion = coverage & 0xFF;
+        p.skip('uShort');
+        if (subtableVersion === 0) {
+            var nPairs = p.parseUShort();
+            // Skip searchRange, entrySelector, rangeShift.
+            p.skip('uShort', 3);
+            for (var i = 0; i < nPairs; i += 1) {
+                var leftIndex = p.parseUShort();
+                var rightIndex = p.parseUShort();
+                var value = p.parseShort();
+                pairs[leftIndex + ',' + rightIndex] = value;
+            }
+        }
+        return pairs;
+    }
+
+    // Parse the `kern` table which contains kerning pairs.
+    function parseKernTable(data, start) {
+        var p = new parse.Parser(data, start);
+        var tableVersion = p.parseUShort();
+        if (tableVersion === 0) {
+            return parseWindowsKernTable(p);
+        } else if (tableVersion === 1) {
+            return parseMacKernTable(p);
+        } else {
+            throw new Error('Unsupported kern table version (' + tableVersion + ').');
+        }
+    }
+
+    var kern = { parse: parseKernTable };
+
+    // The `loca` table stores the offsets to the locations of the glyphs in the font.
+    // https://www.microsoft.com/typography/OTSPEC/loca.htm
+
+    // Parse the `loca` table. This table stores the offsets to the locations of the glyphs in the font,
+    // relative to the beginning of the glyphData table.
+    // The number of glyphs stored in the `loca` table is specified in the `maxp` table (under numGlyphs)
+    // The loca table has two versions: a short version where offsets are stored as uShorts, and a long
+    // version where offsets are stored as uLongs. The `head` table specifies which version to use
+    // (under indexToLocFormat).
+    function parseLocaTable(data, start, numGlyphs, shortVersion) {
+        var p = new parse.Parser(data, start);
+        var parseFn = shortVersion ? p.parseUShort : p.parseULong;
+        // There is an extra entry after the last index element to compute the length of the last glyph.
+        // That's why we use numGlyphs + 1.
+        var glyphOffsets = [];
+        for (var i = 0; i < numGlyphs + 1; i += 1) {
+            var glyphOffset = parseFn.call(p);
+            if (shortVersion) {
+                // The short table version stores the actual offset divided by 2.
+                glyphOffset *= 2;
+            }
+
+            glyphOffsets.push(glyphOffset);
+        }
+
+        return glyphOffsets;
+    }
+
+    var loca = { parse: parseLocaTable };
+
+    // opentype.js
+    // https://github.com/nodebox/opentype.js
+    // (c) 2015 Frederik De Bleser
+    // opentype.js may be freely distributed under the MIT license.
+
+    /* global DataView, Uint8Array, XMLHttpRequest  */
+
+    /**
+     * The opentype library.
+     * @namespace opentype
+     */
+
+    // File loaders /////////////////////////////////////////////////////////
+    /**
+     * Loads a font from a file. The callback throws an error message as the first parameter if it fails
+     * and the font as an ArrayBuffer in the second parameter if it succeeds.
+     * @param  {string} path - The path of the file
+     * @param  {Function} callback - The function to call when the font load completes
+     */
+    function loadFromFile(path, callback) {
+        var fs = _dereq_('fs');
+        fs.readFile(path, function(err, buffer) {
+            if (err) {
+                return callback(err.message);
+            }
+
+            callback(null, nodeBufferToArrayBuffer(buffer));
+        });
+    }
+    /**
+     * Loads a font from a URL. The callback throws an error message as the first parameter if it fails
+     * and the font as an ArrayBuffer in the second parameter if it succeeds.
+     * @param  {string} url - The URL of the font file.
+     * @param  {Function} callback - The function to call when the font load completes
+     */
+    function loadFromUrl(url, callback) {
+        var request = new XMLHttpRequest();
+        request.open('get', url, true);
+        request.responseType = 'arraybuffer';
+        request.onload = function() {
+            if (request.status !== 200) {
+                return callback('Font could not be loaded: ' + request.statusText);
+            }
+
+            return callback(null, request.response);
+        };
+
+        request.onerror = function () {
+            callback('Font could not be loaded');
+        };
+
+        request.send();
+    }
+
+    // Table Directory Entries //////////////////////////////////////////////
+    /**
+     * Parses OpenType table entries.
+     * @param  {DataView}
+     * @param  {Number}
+     * @return {Object[]}
+     */
+    function parseOpenTypeTableEntries(data, numTables) {
+        var tableEntries = [];
+        var p = 12;
+        for (var i = 0; i < numTables; i += 1) {
+            var tag = parse.getTag(data, p);
+            var checksum = parse.getULong(data, p + 4);
+            var offset = parse.getULong(data, p + 8);
+            var length = parse.getULong(data, p + 12);
+            tableEntries.push({tag: tag, checksum: checksum, offset: offset, length: length, compression: false});
+            p += 16;
+        }
+
+        return tableEntries;
+    }
+
+    /**
+     * Parses WOFF table entries.
+     * @param  {DataView}
+     * @param  {Number}
+     * @return {Object[]}
+     */
+    function parseWOFFTableEntries(data, numTables) {
+        var tableEntries = [];
+        var p = 44; // offset to the first table directory entry.
+        for (var i = 0; i < numTables; i += 1) {
+            var tag = parse.getTag(data, p);
+            var offset = parse.getULong(data, p + 4);
+            var compLength = parse.getULong(data, p + 8);
+            var origLength = parse.getULong(data, p + 12);
+            var compression = (void 0);
+            if (compLength < origLength) {
+                compression = 'WOFF';
+            } else {
+                compression = false;
+            }
+
+            tableEntries.push({tag: tag, offset: offset, compression: compression,
+                compressedLength: compLength, length: origLength});
+            p += 20;
+        }
+
+        return tableEntries;
+    }
+
+    /**
+     * @typedef TableData
+     * @type Object
+     * @property {DataView} data - The DataView
+     * @property {number} offset - The data offset.
+     */
+
+    /**
+     * @param  {DataView}
+     * @param  {Object}
+     * @return {TableData}
+     */
+    function uncompressTable(data, tableEntry) {
+        if (tableEntry.compression === 'WOFF') {
+            var inBuffer = new Uint8Array(data.buffer, tableEntry.offset + 2, tableEntry.compressedLength - 2);
+            var outBuffer = new Uint8Array(tableEntry.length);
+            index(inBuffer, outBuffer);
+            if (outBuffer.byteLength !== tableEntry.length) {
+                throw new Error('Decompression error: ' + tableEntry.tag + ' decompressed length doesn\'t match recorded length');
+            }
+
+            var view = new DataView(outBuffer.buffer, 0);
+            return {data: view, offset: 0};
+        } else {
+            return {data: data, offset: tableEntry.offset};
+        }
+    }
+
+    // Public API ///////////////////////////////////////////////////////////
+
+    /**
+     * Parse the OpenType file data (as an ArrayBuffer) and return a Font object.
+     * Throws an error if the font could not be parsed.
+     * @param  {ArrayBuffer}
+     * @return {opentype.Font}
+     */
+    function parseBuffer(buffer) {
+        var indexToLocFormat;
+        var ltagTable;
+
+        // Since the constructor can also be called to create new fonts from scratch, we indicate this
+        // should be an empty font that we'll fill with our own data.
+        var font = new Font({empty: true});
+
+        // OpenType fonts use big endian byte ordering.
+        // We can't rely on typed array view types, because they operate with the endianness of the host computer.
+        // Instead we use DataViews where we can specify endianness.
+        var data = new DataView(buffer, 0);
+        var numTables;
+        var tableEntries = [];
+        var signature = parse.getTag(data, 0);
+        if (signature === String.fromCharCode(0, 1, 0, 0) || signature === 'true' || signature === 'typ1') {
+            font.outlinesFormat = 'truetype';
+            numTables = parse.getUShort(data, 4);
+            tableEntries = parseOpenTypeTableEntries(data, numTables);
+        } else if (signature === 'OTTO') {
+            font.outlinesFormat = 'cff';
+            numTables = parse.getUShort(data, 4);
+            tableEntries = parseOpenTypeTableEntries(data, numTables);
+        } else if (signature === 'wOFF') {
+            var flavor = parse.getTag(data, 4);
+            if (flavor === String.fromCharCode(0, 1, 0, 0)) {
+                font.outlinesFormat = 'truetype';
+            } else if (flavor === 'OTTO') {
+                font.outlinesFormat = 'cff';
+            } else {
+                throw new Error('Unsupported OpenType flavor ' + signature);
+            }
+
+            numTables = parse.getUShort(data, 12);
+            tableEntries = parseWOFFTableEntries(data, numTables);
+        } else {
+            throw new Error('Unsupported OpenType signature ' + signature);
+        }
+
+        var cffTableEntry;
+        var fvarTableEntry;
+        var glyfTableEntry;
+        var gposTableEntry;
+        var gsubTableEntry;
+        var hmtxTableEntry;
+        var kernTableEntry;
+        var locaTableEntry;
+        var nameTableEntry;
+        var metaTableEntry;
+        var p;
+
+        for (var i = 0; i < numTables; i += 1) {
+            var tableEntry = tableEntries[i];
+            var table = (void 0);
+            switch (tableEntry.tag) {
+                case 'cmap':
+                    table = uncompressTable(data, tableEntry);
+                    font.tables.cmap = cmap.parse(table.data, table.offset);
+                    font.encoding = new CmapEncoding(font.tables.cmap);
+                    break;
+                case 'cvt ' :
+                    table = uncompressTable(data, tableEntry);
+                    p = new parse.Parser(table.data, table.offset);
+                    font.tables.cvt = p.parseShortList(tableEntry.length / 2);
+                    break;
+                case 'fvar':
+                    fvarTableEntry = tableEntry;
+                    break;
+                case 'fpgm' :
+                    table = uncompressTable(data, tableEntry);
+                    p = new parse.Parser(table.data, table.offset);
+                    font.tables.fpgm = p.parseByteList(tableEntry.length);
+                    break;
+                case 'head':
+                    table = uncompressTable(data, tableEntry);
+                    font.tables.head = head.parse(table.data, table.offset);
+                    font.unitsPerEm = font.tables.head.unitsPerEm;
+                    indexToLocFormat = font.tables.head.indexToLocFormat;
+                    break;
+                case 'hhea':
+                    table = uncompressTable(data, tableEntry);
+                    font.tables.hhea = hhea.parse(table.data, table.offset);
+                    font.ascender = font.tables.hhea.ascender;
+                    font.descender = font.tables.hhea.descender;
+                    font.numberOfHMetrics = font.tables.hhea.numberOfHMetrics;
+                    break;
+                case 'hmtx':
+                    hmtxTableEntry = tableEntry;
+                    break;
+                case 'ltag':
+                    table = uncompressTable(data, tableEntry);
+                    ltagTable = ltag.parse(table.data, table.offset);
+                    break;
+                case 'maxp':
+                    table = uncompressTable(data, tableEntry);
+                    font.tables.maxp = maxp.parse(table.data, table.offset);
+                    font.numGlyphs = font.tables.maxp.numGlyphs;
+                    break;
+                case 'name':
+                    nameTableEntry = tableEntry;
+                    break;
+                case 'OS/2':
+                    table = uncompressTable(data, tableEntry);
+                    font.tables.os2 = os2.parse(table.data, table.offset);
+                    break;
+                case 'post':
+                    table = uncompressTable(data, tableEntry);
+                    font.tables.post = post.parse(table.data, table.offset);
+                    font.glyphNames = new GlyphNames(font.tables.post);
+                    break;
+                case 'prep' :
+                    table = uncompressTable(data, tableEntry);
+                    p = new parse.Parser(table.data, table.offset);
+                    font.tables.prep = p.parseByteList(tableEntry.length);
+                    break;
+                case 'glyf':
+                    glyfTableEntry = tableEntry;
+                    break;
+                case 'loca':
+                    locaTableEntry = tableEntry;
+                    break;
+                case 'CFF ':
+                    cffTableEntry = tableEntry;
+                    break;
+                case 'kern':
+                    kernTableEntry = tableEntry;
+                    break;
+                case 'GPOS':
+                    gposTableEntry = tableEntry;
+                    break;
+                case 'GSUB':
+                    gsubTableEntry = tableEntry;
+                    break;
+                case 'meta':
+                    metaTableEntry = tableEntry;
+                    break;
+            }
+        }
+
+        var nameTable = uncompressTable(data, nameTableEntry);
+        font.tables.name = _name.parse(nameTable.data, nameTable.offset, ltagTable);
+        font.names = font.tables.name;
+
+        if (glyfTableEntry && locaTableEntry) {
+            var shortVersion = indexToLocFormat === 0;
+            var locaTable = uncompressTable(data, locaTableEntry);
+            var locaOffsets = loca.parse(locaTable.data, locaTable.offset, font.numGlyphs, shortVersion);
+            var glyfTable = uncompressTable(data, glyfTableEntry);
+            font.glyphs = glyf.parse(glyfTable.data, glyfTable.offset, locaOffsets, font);
+        } else if (cffTableEntry) {
+            var cffTable = uncompressTable(data, cffTableEntry);
+            cff.parse(cffTable.data, cffTable.offset, font);
+        } else {
+            throw new Error('Font doesn\'t contain TrueType or CFF outlines.');
+        }
+
+        var hmtxTable = uncompressTable(data, hmtxTableEntry);
+        hmtx.parse(hmtxTable.data, hmtxTable.offset, font.numberOfHMetrics, font.numGlyphs, font.glyphs);
+        addGlyphNames(font);
+
+        if (kernTableEntry) {
+            var kernTable = uncompressTable(data, kernTableEntry);
+            font.kerningPairs = kern.parse(kernTable.data, kernTable.offset);
+        } else {
+            font.kerningPairs = {};
+        }
+
+        if (gposTableEntry) {
+            var gposTable = uncompressTable(data, gposTableEntry);
+            gpos.parse(gposTable.data, gposTable.offset, font);
+        }
+
+        if (gsubTableEntry) {
+            var gsubTable = uncompressTable(data, gsubTableEntry);
+            font.tables.gsub = gsub.parse(gsubTable.data, gsubTable.offset);
+        }
+
+        if (fvarTableEntry) {
+            var fvarTable = uncompressTable(data, fvarTableEntry);
+            font.tables.fvar = fvar.parse(fvarTable.data, fvarTable.offset, font.names);
+        }
+
+        if (metaTableEntry) {
+            var metaTable = uncompressTable(data, metaTableEntry);
+            font.tables.meta = meta.parse(metaTable.data, metaTable.offset);
+            font.metas = font.tables.meta;
+        }
+
+        return font;
+    }
+
+    /**
+     * Asynchronously load the font from a URL or a filesystem. When done, call the callback
+     * with two arguments `(err, font)`. The `err` will be null on success,
+     * the `font` is a Font object.
+     * We use the node.js callback convention so that
+     * opentype.js can integrate with frameworks like async.js.
+     * @alias opentype.load
+     * @param  {string} url - The URL of the font to load.
+     * @param  {Function} callback - The callback.
+     */
+    function load(url, callback) {
+        var isNode$$1 = typeof window === 'undefined';
+        var loadFn = isNode$$1 ? loadFromFile : loadFromUrl;
+        loadFn(url, function(err, arrayBuffer) {
+            if (err) {
+                return callback(err);
+            }
+            var font;
+            try {
+                font = parseBuffer(arrayBuffer);
+            } catch (e) {
+                return callback(e, null);
+            }
+            return callback(null, font);
+        });
+    }
+
+    /**
+     * Synchronously load the font from a URL or file.
+     * When done, returns the font object or throws an error.
+     * @alias opentype.loadSync
+     * @param  {string} url - The URL of the font to load.
+     * @return {opentype.Font}
+     */
+    function loadSync(url) {
+        var fs = _dereq_('fs');
+        var buffer = fs.readFileSync(url);
+        return parseBuffer(nodeBufferToArrayBuffer(buffer));
+    }
+
+    exports.Font = Font;
+    exports.Glyph = Glyph;
+    exports.Path = Path;
+    exports.BoundingBox = BoundingBox;
+    exports._parse = parse;
+    exports.parse = parseBuffer;
+    exports.load = load;
+    exports.loadSync = loadSync;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+    })));
+
+
+    }).call(this,_dereq_("buffer").Buffer)
+    },{"buffer":4,"fs":3}],11:[function(_dereq_,module,exports){
+    // shim for using process in browser
+    var process = module.exports = {};
+
+    // cached from whatever global is present so that test runners that stub it
+    // don't break things.  But we need to wrap it in a try catch in case it is
+    // wrapped in strict mode code which doesn't define any globals.  It's inside a
+    // function because try/catches deoptimize in certain engines.
+
+    var cachedSetTimeout;
+    var cachedClearTimeout;
+
+    function defaultSetTimout() {
+        throw new Error('setTimeout has not been defined');
+    }
+    function defaultClearTimeout () {
+        throw new Error('clearTimeout has not been defined');
+    }
+    (function () {
+        try {
+            if (typeof setTimeout === 'function') {
+                cachedSetTimeout = setTimeout;
+            } else {
+                cachedSetTimeout = defaultSetTimout;
+            }
+        } catch (e) {
+            cachedSetTimeout = defaultSetTimout;
+        }
+        try {
+            if (typeof clearTimeout === 'function') {
+                cachedClearTimeout = clearTimeout;
+            } else {
+                cachedClearTimeout = defaultClearTimeout;
+            }
+        } catch (e) {
+            cachedClearTimeout = defaultClearTimeout;
+        }
+    } ())
+    function runTimeout(fun) {
+        if (cachedSetTimeout === setTimeout) {
+            //normal enviroments in sane situations
+            return setTimeout(fun, 0);
+        }
+        // if setTimeout wasn't available but was latter defined
+        if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
+            cachedSetTimeout = setTimeout;
+            return setTimeout(fun, 0);
+        }
+        try {
+            // when when somebody has screwed with setTimeout but no I.E. maddness
+            return cachedSetTimeout(fun, 0);
+        } catch(e){
+            try {
+                // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
+                return cachedSetTimeout.call(null, fun, 0);
+            } catch(e){
+                // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
+                return cachedSetTimeout.call(this, fun, 0);
+            }
+        }
+
+
+    }
+    function runClearTimeout(marker) {
+        if (cachedClearTimeout === clearTimeout) {
+            //normal enviroments in sane situations
+            return clearTimeout(marker);
+        }
+        // if clearTimeout wasn't available but was latter defined
+        if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
+            cachedClearTimeout = clearTimeout;
+            return clearTimeout(marker);
+        }
+        try {
+            // when when somebody has screwed with setTimeout but no I.E. maddness
+            return cachedClearTimeout(marker);
+        } catch (e){
+            try {
+                // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
+                return cachedClearTimeout.call(null, marker);
+            } catch (e){
+                // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
+                // Some versions of I.E. have different rules for clearTimeout vs setTimeout
+                return cachedClearTimeout.call(this, marker);
+            }
+        }
+
+
+
+    }
+    var queue = [];
+    var draining = false;
+    var currentQueue;
+    var queueIndex = -1;
+
+    function cleanUpNextTick() {
+        if (!draining || !currentQueue) {
+            return;
+        }
+        draining = false;
+        if (currentQueue.length) {
+            queue = currentQueue.concat(queue);
+        } else {
+            queueIndex = -1;
+        }
+        if (queue.length) {
+            drainQueue();
+        }
+    }
+
+    function drainQueue() {
+        if (draining) {
+            return;
+        }
+        var timeout = runTimeout(cleanUpNextTick);
+        draining = true;
+
+        var len = queue.length;
+        while(len) {
+            currentQueue = queue;
+            queue = [];
+            while (++queueIndex < len) {
+                if (currentQueue) {
+                    currentQueue[queueIndex].run();
+                }
+            }
+            queueIndex = -1;
+            len = queue.length;
+        }
+        currentQueue = null;
+        draining = false;
+        runClearTimeout(timeout);
+    }
+
+    process.nextTick = function (fun) {
+        var args = new Array(arguments.length - 1);
+        if (arguments.length > 1) {
+            for (var i = 1; i < arguments.length; i++) {
+                args[i - 1] = arguments[i];
+            }
+        }
+        queue.push(new Item(fun, args));
+        if (queue.length === 1 && !draining) {
+            runTimeout(drainQueue);
+        }
+    };
+
+    // v8 likes predictible objects
+    function Item(fun, array) {
+        this.fun = fun;
+        this.array = array;
+    }
+    Item.prototype.run = function () {
+        this.fun.apply(null, this.array);
+    };
+    process.title = 'browser';
+    process.browser = true;
+    process.env = {};
+    process.argv = [];
+    process.version = ''; // empty string to avoid regexp issues
+    process.versions = {};
+
+    function noop() {}
+
+    process.on = noop;
+    process.addListener = noop;
+    process.once = noop;
+    process.off = noop;
+    process.removeListener = noop;
+    process.removeAllListeners = noop;
+    process.emit = noop;
+    process.prependListener = noop;
+    process.prependOnceListener = noop;
+
+    process.listeners = function (name) { return [] }
+
+    process.binding = function (name) {
+        throw new Error('process.binding is not supported');
+    };
+
+    process.cwd = function () { return '/' };
+    process.chdir = function (dir) {
+        throw new Error('process.chdir is not supported');
+    };
+    process.umask = function() { return 0; };
+
+    },{}],12:[function(_dereq_,module,exports){
+    (function(self) {
+      'use strict';
+
+      if (self.fetch) {
+        return
+      }
+
+      var support = {
+        searchParams: 'URLSearchParams' in self,
+        iterable: 'Symbol' in self && 'iterator' in Symbol,
+        blob: 'FileReader' in self && 'Blob' in self && (function() {
+          try {
+            new Blob()
+            return true
+          } catch(e) {
+            return false
+          }
+        })(),
+        formData: 'FormData' in self,
+        arrayBuffer: 'ArrayBuffer' in self
+      }
+
+      if (support.arrayBuffer) {
+        var viewClasses = [
+          '[object Int8Array]',
+          '[object Uint8Array]',
+          '[object Uint8ClampedArray]',
+          '[object Int16Array]',
+          '[object Uint16Array]',
+          '[object Int32Array]',
+          '[object Uint32Array]',
+          '[object Float32Array]',
+          '[object Float64Array]'
+        ]
+
+        var isDataView = function(obj) {
+          return obj && DataView.prototype.isPrototypeOf(obj)
+        }
+
+        var isArrayBufferView = ArrayBuffer.isView || function(obj) {
+          return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1
+        }
+      }
+
+      function normalizeName(name) {
+        if (typeof name !== 'string') {
+          name = String(name)
+        }
+        if (/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(name)) {
+          throw new TypeError('Invalid character in header field name')
+        }
+        return name.toLowerCase()
+      }
+
+      function normalizeValue(value) {
+        if (typeof value !== 'string') {
+          value = String(value)
+        }
+        return value
+      }
+
+      // Build a destructive iterator for the value list
+      function iteratorFor(items) {
+        var iterator = {
+          next: function() {
+            var value = items.shift()
+            return {done: value === undefined, value: value}
+          }
+        }
+
+        if (support.iterable) {
+          iterator[Symbol.iterator] = function() {
+            return iterator
+          }
+        }
+
+        return iterator
+      }
+
+      function Headers(headers) {
+        this.map = {}
+
+        if (headers instanceof Headers) {
+          headers.forEach(function(value, name) {
+            this.append(name, value)
+          }, this)
+        } else if (Array.isArray(headers)) {
+          headers.forEach(function(header) {
+            this.append(header[0], header[1])
+          }, this)
+        } else if (headers) {
+          Object.getOwnPropertyNames(headers).forEach(function(name) {
+            this.append(name, headers[name])
+          }, this)
+        }
+      }
+
+      Headers.prototype.append = function(name, value) {
+        name = normalizeName(name)
+        value = normalizeValue(value)
+        var oldValue = this.map[name]
+        this.map[name] = oldValue ? oldValue+','+value : value
+      }
+
+      Headers.prototype['delete'] = function(name) {
+        delete this.map[normalizeName(name)]
+      }
+
+      Headers.prototype.get = function(name) {
+        name = normalizeName(name)
+        return this.has(name) ? this.map[name] : null
+      }
+
+      Headers.prototype.has = function(name) {
+        return this.map.hasOwnProperty(normalizeName(name))
+      }
+
+      Headers.prototype.set = function(name, value) {
+        this.map[normalizeName(name)] = normalizeValue(value)
+      }
+
+      Headers.prototype.forEach = function(callback, thisArg) {
+        for (var name in this.map) {
+          if (this.map.hasOwnProperty(name)) {
+            callback.call(thisArg, this.map[name], name, this)
+          }
+        }
+      }
+
+      Headers.prototype.keys = function() {
+        var items = []
+        this.forEach(function(value, name) { items.push(name) })
+        return iteratorFor(items)
+      }
+
+      Headers.prototype.values = function() {
+        var items = []
+        this.forEach(function(value) { items.push(value) })
+        return iteratorFor(items)
+      }
+
+      Headers.prototype.entries = function() {
+        var items = []
+        this.forEach(function(value, name) { items.push([name, value]) })
+        return iteratorFor(items)
+      }
+
+      if (support.iterable) {
+        Headers.prototype[Symbol.iterator] = Headers.prototype.entries
+      }
+
+      function consumed(body) {
+        if (body.bodyUsed) {
+          return Promise.reject(new TypeError('Already read'))
+        }
+        body.bodyUsed = true
+      }
+
+      function fileReaderReady(reader) {
+        return new Promise(function(resolve, reject) {
+          reader.onload = function() {
+            resolve(reader.result)
+          }
+          reader.onerror = function() {
+            reject(reader.error)
+          }
+        })
+      }
+
+      function readBlobAsArrayBuffer(blob) {
+        var reader = new FileReader()
+        var promise = fileReaderReady(reader)
+        reader.readAsArrayBuffer(blob)
+        return promise
+      }
+
+      function readBlobAsText(blob) {
+        var reader = new FileReader()
+        var promise = fileReaderReady(reader)
+        reader.readAsText(blob)
+        return promise
+      }
+
+      function readArrayBufferAsText(buf) {
+        var view = new Uint8Array(buf)
+        var chars = new Array(view.length)
+
+        for (var i = 0; i < view.length; i++) {
+          chars[i] = String.fromCharCode(view[i])
+        }
+        return chars.join('')
+      }
+
+      function bufferClone(buf) {
+        if (buf.slice) {
+          return buf.slice(0)
+        } else {
+          var view = new Uint8Array(buf.byteLength)
+          view.set(new Uint8Array(buf))
+          return view.buffer
+        }
+      }
+
+      function Body() {
+        this.bodyUsed = false
+
+        this._initBody = function(body) {
+          this._bodyInit = body
+          if (!body) {
+            this._bodyText = ''
+          } else if (typeof body === 'string') {
+            this._bodyText = body
+          } else if (support.blob && Blob.prototype.isPrototypeOf(body)) {
+            this._bodyBlob = body
+          } else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
+            this._bodyFormData = body
+          } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
+            this._bodyText = body.toString()
+          } else if (support.arrayBuffer && support.blob && isDataView(body)) {
+            this._bodyArrayBuffer = bufferClone(body.buffer)
+            // IE 10-11 can't handle a DataView body.
+            this._bodyInit = new Blob([this._bodyArrayBuffer])
+          } else if (support.arrayBuffer && (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body))) {
+            this._bodyArrayBuffer = bufferClone(body)
+          } else {
+            throw new Error('unsupported BodyInit type')
+          }
+
+          if (!this.headers.get('content-type')) {
+            if (typeof body === 'string') {
+              this.headers.set('content-type', 'text/plain;charset=UTF-8')
+            } else if (this._bodyBlob && this._bodyBlob.type) {
+              this.headers.set('content-type', this._bodyBlob.type)
+            } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
+              this.headers.set('content-type', 'application/x-www-form-urlencoded;charset=UTF-8')
+            }
+          }
+        }
+
+        if (support.blob) {
+          this.blob = function() {
+            var rejected = consumed(this)
+            if (rejected) {
+              return rejected
+            }
+
+            if (this._bodyBlob) {
+              return Promise.resolve(this._bodyBlob)
+            } else if (this._bodyArrayBuffer) {
+              return Promise.resolve(new Blob([this._bodyArrayBuffer]))
+            } else if (this._bodyFormData) {
+              throw new Error('could not read FormData body as blob')
+            } else {
+              return Promise.resolve(new Blob([this._bodyText]))
+            }
+          }
+
+          this.arrayBuffer = function() {
+            if (this._bodyArrayBuffer) {
+              return consumed(this) || Promise.resolve(this._bodyArrayBuffer)
+            } else {
+              return this.blob().then(readBlobAsArrayBuffer)
+            }
+          }
+        }
+
+        this.text = function() {
+          var rejected = consumed(this)
+          if (rejected) {
+            return rejected
+          }
+
+          if (this._bodyBlob) {
+            return readBlobAsText(this._bodyBlob)
+          } else if (this._bodyArrayBuffer) {
+            return Promise.resolve(readArrayBufferAsText(this._bodyArrayBuffer))
+          } else if (this._bodyFormData) {
+            throw new Error('could not read FormData body as text')
+          } else {
+            return Promise.resolve(this._bodyText)
+          }
+        }
+
+        if (support.formData) {
+          this.formData = function() {
+            return this.text().then(decode)
+          }
+        }
+
+        this.json = function() {
+          return this.text().then(JSON.parse)
+        }
+
+        return this
+      }
+
+      // HTTP methods whose capitalization should be normalized
+      var methods = ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'POST', 'PUT']
+
+      function normalizeMethod(method) {
+        var upcased = method.toUpperCase()
+        return (methods.indexOf(upcased) > -1) ? upcased : method
+      }
+
+      function Request(input, options) {
+        options = options || {}
+        var body = options.body
+
+        if (input instanceof Request) {
+          if (input.bodyUsed) {
+            throw new TypeError('Already read')
+          }
+          this.url = input.url
+          this.credentials = input.credentials
+          if (!options.headers) {
+            this.headers = new Headers(input.headers)
+          }
+          this.method = input.method
+          this.mode = input.mode
+          if (!body && input._bodyInit != null) {
+            body = input._bodyInit
+            input.bodyUsed = true
+          }
+        } else {
+          this.url = String(input)
+        }
+
+        this.credentials = options.credentials || this.credentials || 'omit'
+        if (options.headers || !this.headers) {
+          this.headers = new Headers(options.headers)
+        }
+        this.method = normalizeMethod(options.method || this.method || 'GET')
+        this.mode = options.mode || this.mode || null
+        this.referrer = null
+
+        if ((this.method === 'GET' || this.method === 'HEAD') && body) {
+          throw new TypeError('Body not allowed for GET or HEAD requests')
+        }
+        this._initBody(body)
+      }
+
+      Request.prototype.clone = function() {
+        return new Request(this, { body: this._bodyInit })
+      }
+
+      function decode(body) {
+        var form = new FormData()
+        body.trim().split('&').forEach(function(bytes) {
+          if (bytes) {
+            var split = bytes.split('=')
+            var name = split.shift().replace(/\+/g, ' ')
+            var value = split.join('=').replace(/\+/g, ' ')
+            form.append(decodeURIComponent(name), decodeURIComponent(value))
+          }
+        })
+        return form
+      }
+
+      function parseHeaders(rawHeaders) {
+        var headers = new Headers()
+        rawHeaders.split(/\r?\n/).forEach(function(line) {
+          var parts = line.split(':')
+          var key = parts.shift().trim()
+          if (key) {
+            var value = parts.join(':').trim()
+            headers.append(key, value)
+          }
+        })
+        return headers
+      }
+
+      Body.call(Request.prototype)
+
+      function Response(bodyInit, options) {
+        if (!options) {
+          options = {}
+        }
+
+        this.type = 'default'
+        this.status = 'status' in options ? options.status : 200
+        this.ok = this.status >= 200 && this.status < 300
+        this.statusText = 'statusText' in options ? options.statusText : 'OK'
+        this.headers = new Headers(options.headers)
+        this.url = options.url || ''
+        this._initBody(bodyInit)
+      }
+
+      Body.call(Response.prototype)
+
+      Response.prototype.clone = function() {
+        return new Response(this._bodyInit, {
+          status: this.status,
+          statusText: this.statusText,
+          headers: new Headers(this.headers),
+          url: this.url
+        })
+      }
+
+      Response.error = function() {
+        var response = new Response(null, {status: 0, statusText: ''})
+        response.type = 'error'
+        return response
+      }
+
+      var redirectStatuses = [301, 302, 303, 307, 308]
+
+      Response.redirect = function(url, status) {
+        if (redirectStatuses.indexOf(status) === -1) {
+          throw new RangeError('Invalid status code')
+        }
+
+        return new Response(null, {status: status, headers: {location: url}})
+      }
+
+      self.Headers = Headers
+      self.Request = Request
+      self.Response = Response
+
+      self.fetch = function(input, init) {
+        return new Promise(function(resolve, reject) {
+          var request = new Request(input, init)
+          var xhr = new XMLHttpRequest()
+
+          xhr.onload = function() {
+            var options = {
+              status: xhr.status,
+              statusText: xhr.statusText,
+              headers: parseHeaders(xhr.getAllResponseHeaders() || '')
+            }
+            options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')
+            var body = 'response' in xhr ? xhr.response : xhr.responseText
+            resolve(new Response(body, options))
+          }
+
+          xhr.onerror = function() {
+            reject(new TypeError('Network request failed'))
+          }
+
+          xhr.ontimeout = function() {
+            reject(new TypeError('Network request failed'))
+          }
+
+          xhr.open(request.method, request.url, true)
+
+          if (request.credentials === 'include') {
+            xhr.withCredentials = true
+          }
+
+          if ('responseType' in xhr && support.blob) {
+            xhr.responseType = 'blob'
+          }
+
+          request.headers.forEach(function(value, name) {
+            xhr.setRequestHeader(name, value)
+          })
+
+          xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit)
+        })
+      }
+      self.fetch.polyfill = true
+    })(typeof self !== 'undefined' ? self : this);
+
+    },{}],13:[function(_dereq_,module,exports){
+    'use strict';
+
+    var p5 = _dereq_('./core/core');
+    _dereq_('./color/p5.Color');
+    _dereq_('./core/p5.Element');
+    _dereq_('./typography/p5.Font');
+    _dereq_('./core/p5.Graphics');
+    _dereq_('./core/p5.Renderer2D');
+
+    _dereq_('./image/p5.Image');
+    _dereq_('./math/p5.Vector');
+    _dereq_('./io/p5.TableRow');
+    _dereq_('./io/p5.Table');
+    _dereq_('./io/p5.XML');
+
+    _dereq_('./color/creating_reading');
+    _dereq_('./color/setting');
+    _dereq_('./core/constants');
+    _dereq_('./utilities/conversion');
+    _dereq_('./utilities/array_functions');
+    _dereq_('./utilities/string_functions');
+    _dereq_('./core/environment');
+    _dereq_('./image/image');
+    _dereq_('./image/loading_displaying');
+    _dereq_('./image/pixels');
+    _dereq_('./io/files');
+    _dereq_('./events/keyboard');
+    _dereq_('./events/acceleration'); //john
+    _dereq_('./events/mouse');
+    _dereq_('./utilities/time_date');
+    _dereq_('./events/touch');
+    _dereq_('./math/math');
+    _dereq_('./math/calculation');
+    _dereq_('./math/random');
+    _dereq_('./math/noise');
+    _dereq_('./math/trigonometry');
+    _dereq_('./core/rendering');
+    _dereq_('./core/2d_primitives');
+
+    _dereq_('./core/attributes');
+    _dereq_('./core/curves');
+    _dereq_('./core/vertex');
+    _dereq_('./core/structure');
+    _dereq_('./core/transform');
+    _dereq_('./typography/attributes');
+    _dereq_('./typography/loading_displaying');
+
+    _dereq_('./data/p5.TypedDict');
+
+    _dereq_('./webgl/p5.RendererGL');
+    _dereq_('./webgl/p5.Geometry');
+    _dereq_('./webgl/p5.RendererGL.Retained');
+    _dereq_('./webgl/p5.RendererGL.Immediate');
+    _dereq_('./webgl/primitives');
+    _dereq_('./webgl/loading');
+    _dereq_('./webgl/p5.Matrix');
+    _dereq_('./webgl/material');
+    _dereq_('./webgl/light');
+    _dereq_('./webgl/p5.Shader');
+    _dereq_('./webgl/camera');
+    _dereq_('./webgl/interaction');
+
+    _dereq_('./core/init.js');
+
+    module.exports = p5;
+
+    },{"./color/creating_reading":15,"./color/p5.Color":16,"./color/setting":17,"./core/2d_primitives":18,"./core/attributes":19,"./core/constants":21,"./core/core":22,"./core/curves":23,"./core/environment":24,"./core/init.js":26,"./core/p5.Element":27,"./core/p5.Graphics":28,"./core/p5.Renderer2D":30,"./core/rendering":31,"./core/structure":33,"./core/transform":34,"./core/vertex":35,"./data/p5.TypedDict":36,"./events/acceleration":37,"./events/keyboard":38,"./events/mouse":39,"./events/touch":40,"./image/image":42,"./image/loading_displaying":43,"./image/p5.Image":44,"./image/pixels":45,"./io/files":46,"./io/p5.Table":47,"./io/p5.TableRow":48,"./io/p5.XML":49,"./math/calculation":50,"./math/math":51,"./math/noise":52,"./math/p5.Vector":53,"./math/random":55,"./math/trigonometry":56,"./typography/attributes":57,"./typography/loading_displaying":58,"./typography/p5.Font":59,"./utilities/array_functions":60,"./utilities/conversion":61,"./utilities/string_functions":62,"./utilities/time_date":63,"./webgl/camera":64,"./webgl/interaction":65,"./webgl/light":66,"./webgl/loading":67,"./webgl/material":68,"./webgl/p5.Geometry":69,"./webgl/p5.Matrix":70,"./webgl/p5.RendererGL":73,"./webgl/p5.RendererGL.Immediate":71,"./webgl/p5.RendererGL.Retained":72,"./webgl/p5.Shader":74,"./webgl/primitives":76}],14:[function(_dereq_,module,exports){
+    /**
+     * @module Conversion
+     * @submodule Color Conversion
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    /**
+     * Conversions adapted from .
+     *
+     * In these functions, hue is always in the range [0,1); all other components
+     * are in the range [0,1]. 'Brightness' and 'value' are used interchangeably.
+     */
+
+    var p5 = _dereq_('../core/core');
+    p5.ColorConversion = {};
+
+    /**
+     * Convert an HSBA array to HSLA.
+     */
+    p5.ColorConversion._hsbaToHSLA = function(hsba) {
+      var hue = hsba[0];
+      var sat = hsba[1];
+      var val = hsba[2];
+
+      // Calculate lightness.
+      var li = (2 - sat) * val / 2;
+
+      // Convert saturation.
+      if (li !== 0) {
+        if (li === 1) {
+          sat = 0;
+        } else if (li < 0.5) {
+          sat = sat / (2 - sat);
+        } else {
+          sat = sat * val / (2 - li * 2);
+        }
+      }
+
+      // Hue and alpha stay the same.
+      return [hue, sat, li, hsba[3]];
+    };
+
+    /**
+     * Convert an HSBA array to RGBA.
+     */
+    p5.ColorConversion._hsbaToRGBA = function(hsba) {
+      var hue = hsba[0] * 6; // We will split hue into 6 sectors.
+      var sat = hsba[1];
+      var val = hsba[2];
+
+      var RGBA = [];
+
+      if (sat === 0) {
+        RGBA = [val, val, val, hsba[3]]; // Return early if grayscale.
+      } else {
+        var sector = Math.floor(hue);
+        var tint1 = val * (1 - sat);
+        var tint2 = val * (1 - sat * (hue - sector));
+        var tint3 = val * (1 - sat * (1 + sector - hue));
+        var red, green, blue;
+        if (sector === 1) {
+          // Yellow to green.
+          red = tint2;
+          green = val;
+          blue = tint1;
+        } else if (sector === 2) {
+          // Green to cyan.
+          red = tint1;
+          green = val;
+          blue = tint3;
+        } else if (sector === 3) {
+          // Cyan to blue.
+          red = tint1;
+          green = tint2;
+          blue = val;
+        } else if (sector === 4) {
+          // Blue to magenta.
+          red = tint3;
+          green = tint1;
+          blue = val;
+        } else if (sector === 5) {
+          // Magenta to red.
+          red = val;
+          green = tint1;
+          blue = tint2;
+        } else {
+          // Red to yellow (sector could be 0 or 6).
+          red = val;
+          green = tint3;
+          blue = tint1;
+        }
+        RGBA = [red, green, blue, hsba[3]];
+      }
+
+      return RGBA;
+    };
+
+    /**
+     * Convert an HSLA array to HSBA.
+     */
+    p5.ColorConversion._hslaToHSBA = function(hsla) {
+      var hue = hsla[0];
+      var sat = hsla[1];
+      var li = hsla[2];
+
+      // Calculate brightness.
+      var val;
+      if (li < 0.5) {
+        val = (1 + sat) * li;
+      } else {
+        val = li + sat - li * sat;
+      }
+
+      // Convert saturation.
+      sat = 2 * (val - li) / val;
+
+      // Hue and alpha stay the same.
+      return [hue, sat, val, hsla[3]];
+    };
+
+    /**
+     * Convert an HSLA array to RGBA.
+     *
+     * We need to change basis from HSLA to something that can be more easily be
+     * projected onto RGBA. We will choose hue and brightness as our first two
+     * components, and pick a convenient third one ('zest') so that we don't need
+     * to calculate formal HSBA saturation.
+     */
+    p5.ColorConversion._hslaToRGBA = function(hsla) {
+      var hue = hsla[0] * 6; // We will split hue into 6 sectors.
+      var sat = hsla[1];
+      var li = hsla[2];
+
+      var RGBA = [];
+
+      if (sat === 0) {
+        RGBA = [li, li, li, hsla[3]]; // Return early if grayscale.
+      } else {
+        // Calculate brightness.
+        var val;
+        if (li < 0.5) {
+          val = (1 + sat) * li;
+        } else {
+          val = li + sat - li * sat;
+        }
+
+        // Define zest.
+        var zest = 2 * li - val;
+
+        // Implement projection (project onto green by default).
+        var hzvToRGB = function(hue, zest, val) {
+          if (hue < 0) {
+            // Hue must wrap to allow projection onto red and blue.
+            hue += 6;
+          } else if (hue >= 6) {
+            hue -= 6;
+          }
+          if (hue < 1) {
+            // Red to yellow (increasing green).
+            return zest + (val - zest) * hue;
+          } else if (hue < 3) {
+            // Yellow to cyan (greatest green).
+            return val;
+          } else if (hue < 4) {
+            // Cyan to blue (decreasing green).
+            return zest + (val - zest) * (4 - hue);
+          } else {
+            // Blue to red (least green).
+            return zest;
+          }
+        };
+
+        // Perform projections, offsetting hue as necessary.
+        RGBA = [
+          hzvToRGB(hue + 2, zest, val),
+          hzvToRGB(hue, zest, val),
+          hzvToRGB(hue - 2, zest, val),
+          hsla[3]
+        ];
+      }
+
+      return RGBA;
+    };
+
+    /**
+     * Convert an RGBA array to HSBA.
+     */
+    p5.ColorConversion._rgbaToHSBA = function(rgba) {
+      var red = rgba[0];
+      var green = rgba[1];
+      var blue = rgba[2];
+
+      var val = Math.max(red, green, blue);
+      var chroma = val - Math.min(red, green, blue);
+
+      var hue, sat;
+      if (chroma === 0) {
+        // Return early if grayscale.
+        hue = 0;
+        sat = 0;
+      } else {
+        sat = chroma / val;
+        if (red === val) {
+          // Magenta to yellow.
+          hue = (green - blue) / chroma;
+        } else if (green === val) {
+          // Yellow to cyan.
+          hue = 2 + (blue - red) / chroma;
+        } else if (blue === val) {
+          // Cyan to magenta.
+          hue = 4 + (red - green) / chroma;
+        }
+        if (hue < 0) {
+          // Confine hue to the interval [0, 1).
+          hue += 6;
+        } else if (hue >= 6) {
+          hue -= 6;
+        }
+      }
+
+      return [hue / 6, sat, val, rgba[3]];
+    };
+
+    /**
+     * Convert an RGBA array to HSLA.
+     */
+    p5.ColorConversion._rgbaToHSLA = function(rgba) {
+      var red = rgba[0];
+      var green = rgba[1];
+      var blue = rgba[2];
+
+      var val = Math.max(red, green, blue);
+      var min = Math.min(red, green, blue);
+      var li = val + min; // We will halve this later.
+      var chroma = val - min;
+
+      var hue, sat;
+      if (chroma === 0) {
+        // Return early if grayscale.
+        hue = 0;
+        sat = 0;
+      } else {
+        if (li < 1) {
+          sat = chroma / li;
+        } else {
+          sat = chroma / (2 - li);
+        }
+        if (red === val) {
+          // Magenta to yellow.
+          hue = (green - blue) / chroma;
+        } else if (green === val) {
+          // Yellow to cyan.
+          hue = 2 + (blue - red) / chroma;
+        } else if (blue === val) {
+          // Cyan to magenta.
+          hue = 4 + (red - green) / chroma;
+        }
+        if (hue < 0) {
+          // Confine hue to the interval [0, 1).
+          hue += 6;
+        } else if (hue >= 6) {
+          hue -= 6;
+        }
+      }
+
+      return [hue / 6, sat, li / 2, rgba[3]];
+    };
+
+    module.exports = p5.ColorConversion;
+
+    },{"../core/core":22}],15:[function(_dereq_,module,exports){
+    /**
+     * @module Color
+     * @submodule Creating & Reading
+     * @for p5
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var constants = _dereq_('../core/constants');
+    _dereq_('./p5.Color');
+    _dereq_('../core/error_helpers');
+
+    /**
+     * Extracts the alpha value from a color or pixel array.
+     *
+     * @method alpha
+     * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+     *                                         or CSS color
+     * @return {Number} the alpha value
+     * @example
+     * 

+     * 
+     * noStroke();
+     * var c = color(0, 126, 255, 102);
+     * fill(c);
+     * rect(15, 15, 35, 70);
+     * var value = alpha(c); // Sets 'value' to 102
+     * fill(value);
+     * rect(50, 15, 35, 70);
+     * 
+     * 

+     *
+     * @alt
+     * Left half of canvas light blue and right half light charcoal grey.
+     * Left half of canvas light purple and right half a royal blue.
+     * Left half of canvas salmon pink and the right half white.
+     * Yellow rect in middle right of canvas, with 55 pixel width and height.
+     * Yellow ellipse in top left canvas, black ellipse in bottom right,both 80x80.
+     * Bright fuschia rect in middle of canvas, 60 pixel width and height.
+     * Two bright green rects on opposite sides of the canvas, both 45x80.
+     * Four blue rects in each corner of the canvas, each are 35x35.
+     * Bright sea green rect on left and darker rect on right of canvas, both 45x80.
+     * Dark green rect on left and light green rect on right of canvas, both 45x80.
+     * Dark blue rect on left and light teal rect on right of canvas, both 45x80.
+     * blue rect on left and green on right, both with black outlines & 35x60.
+     * salmon pink rect on left and black on right, both 35x60.
+     * 4 rects, tan, brown, brownish purple and purple, with white outlines & 20x60.
+     * light pastel green rect on left and dark grey rect on right, both 35x60.
+     * yellow rect on left and red rect on right, both with black outlines & 35x60.
+     * grey canvas
+     * deep pink rect on left and grey rect on right, both 35x60.
+     */
+    p5.prototype.alpha = function(c) {
+      p5._validateParameters('alpha', arguments);
+      return this.color(c)._getAlpha();
+    };
+
+    /**
+     * Extracts the blue value from a color or pixel array.
+     *
+     * @method blue
+     * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+     *                                         or CSS color
+     * @return {Number} the blue value
+     * @example
+     * 

+     * 
+     * var c = color(175, 100, 220); // Define color 'c'
+     * fill(c); // Use color variable 'c' as fill color
+     * rect(15, 20, 35, 60); // Draw left rectangle
+     *
+     * var blueValue = blue(c); // Get blue in 'c'
+     * print(blueValue); // Prints "220.0"
+     * fill(0, 0, blueValue); // Use 'blueValue' in new fill
+     * rect(50, 20, 35, 60); // Draw right rectangle
+     * 
+     * 

+     *
+     * @alt
+     * Left half of canvas light purple and right half a royal blue.
+     *
+     */
+    p5.prototype.blue = function(c) {
+      p5._validateParameters('blue', arguments);
+      return this.color(c)._getBlue();
+    };
+
+    /**
+     * Extracts the HSB brightness value from a color or pixel array.
+     *
+     * @method brightness
+     * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+     *                                         or CSS color
+     * @return {Number} the brightness value
+     * @example
+     * 

+     * 
+     * noStroke();
+     * colorMode(HSB, 255);
+     * var c = color(0, 126, 255);
+     * fill(c);
+     * rect(15, 20, 35, 60);
+     * var value = brightness(c); // Sets 'value' to 255
+     * fill(value);
+     * rect(50, 20, 35, 60);
+     * 
+     * 

+     *
+     * @alt
+     * Left half of canvas salmon pink and the right half white.
+     *
+     */
+    p5.prototype.brightness = function(c) {
+      p5._validateParameters('brightness', arguments);
+      return this.color(c)._getBrightness();
+    };
+
+    /**
+     * Creates colors for storing in variables of the color datatype. The
+     * parameters are interpreted as RGB or HSB values depending on the
+     * current colorMode(). The default mode is RGB values from 0 to 255
+     * and, therefore, the function call color(255, 204, 0) will return a
+     * bright yellow color.
+     * 


+     * Note that if only one value is provided to color(), it will be interpreted
+     * as a grayscale value. Add a second value, and it will be used for alpha
+     * transparency. When three values are specified, they are interpreted as
+     * either RGB or HSB values. Adding a fourth value applies alpha
+     * transparency.
+     * 


+     * If a single string argument is provided, RGB, RGBA and Hex CSS color
+     * strings and all named color strings are supported. In this case, an alpha
+     * number value as a second argument is not supported, the RGBA form should be
+     * used.
+     *
+     * @method color
+     * @param  {Number}        gray    number specifying value between white
+     *                                 and black.
+     * @param  {Number}        [alpha] alpha value relative to current color range
+     *                                 (default is 0-255)
+     * @return {p5.Color}              resulting color
+     *
+     * @example
+     * 

+     * 
+     * var c = color(255, 204, 0); // Define color 'c'
+     * fill(c); // Use color variable 'c' as fill color
+     * noStroke(); // Don't draw a stroke around shapes
+     * rect(30, 20, 55, 55); // Draw rectangle
+     * 
+     * 

+     *
+     * 

+     * 
+     * var c = color(255, 204, 0); // Define color 'c'
+     * fill(c); // Use color variable 'c' as fill color
+     * noStroke(); // Don't draw a stroke around shapes
+     * ellipse(25, 25, 80, 80); // Draw left circle
+     *
+     * // Using only one value with color()
+     * // generates a grayscale value.
+     * c = color(65); // Update 'c' with grayscale value
+     * fill(c); // Use updated 'c' as fill color
+     * ellipse(75, 75, 80, 80); // Draw right circle
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Named SVG & CSS colors may be used,
+     * var c = color('magenta');
+     * fill(c); // Use 'c' as fill color
+     * noStroke(); // Don't draw a stroke around shapes
+     * rect(20, 20, 60, 60); // Draw rectangle
+     * 
+     * 

+     *
+     * 

+     * 
+     * // as can hex color codes:
+     * noStroke(); // Don't draw a stroke around shapes
+     * var c = color('#0f0');
+     * fill(c); // Use 'c' as fill color
+     * rect(0, 10, 45, 80); // Draw rectangle
+     *
+     * c = color('#00ff00');
+     * fill(c); // Use updated 'c' as fill color
+     * rect(55, 10, 45, 80); // Draw rectangle
+     * 
+     * 

+     *
+     * 

+     * 
+     * // RGB and RGBA color strings are also supported:
+     * // these all set to the same color (solid blue)
+     * var c;
+     * noStroke(); // Don't draw a stroke around shapes
+     * c = color('rgb(0,0,255)');
+     * fill(c); // Use 'c' as fill color
+     * rect(10, 10, 35, 35); // Draw rectangle
+     *
+     * c = color('rgb(0%, 0%, 100%)');
+     * fill(c); // Use updated 'c' as fill color
+     * rect(55, 10, 35, 35); // Draw rectangle
+     *
+     * c = color('rgba(0, 0, 255, 1)');
+     * fill(c); // Use updated 'c' as fill color
+     * rect(10, 55, 35, 35); // Draw rectangle
+     *
+     * c = color('rgba(0%, 0%, 100%, 1)');
+     * fill(c); // Use updated 'c' as fill color
+     * rect(55, 55, 35, 35); // Draw rectangle
+     * 
+     * 

+     *
+     * 

+     * 
+     * // HSL color is also supported and can be specified
+     * // by value
+     * var c;
+     * noStroke(); // Don't draw a stroke around shapes
+     * c = color('hsl(160, 100%, 50%)');
+     * fill(c); // Use 'c' as fill color
+     * rect(0, 10, 45, 80); // Draw rectangle
+     *
+     * c = color('hsla(160, 100%, 50%, 0.5)');
+     * fill(c); // Use updated 'c' as fill color
+     * rect(55, 10, 45, 80); // Draw rectangle
+     * 
+     * 

+     *
+     * 

+     * 
+     * // HSB color is also supported and can be specified
+     * // by value
+     * var c;
+     * noStroke(); // Don't draw a stroke around shapes
+     * c = color('hsb(160, 100%, 50%)');
+     * fill(c); // Use 'c' as fill color
+     * rect(0, 10, 45, 80); // Draw rectangle
+     *
+     * c = color('hsba(160, 100%, 50%, 0.5)');
+     * fill(c); // Use updated 'c' as fill color
+     * rect(55, 10, 45, 80); // Draw rectangle
+     * 
+     * 

+     *
+     * 

+     * 
+     * var c; // Declare color 'c'
+     * noStroke(); // Don't draw a stroke around shapes
+     *
+     * // If no colorMode is specified, then the
+     * // default of RGB with scale of 0-255 is used.
+     * c = color(50, 55, 100); // Create a color for 'c'
+     * fill(c); // Use color variable 'c' as fill color
+     * rect(0, 10, 45, 80); // Draw left rect
+     *
+     * colorMode(HSB, 100); // Use HSB with scale of 0-100
+     * c = color(50, 55, 100); // Update 'c' with new color
+     * fill(c); // Use updated 'c' as fill color
+     * rect(55, 10, 45, 80); // Draw right rect
+     * 
+     * 

+     *
+     * @alt
+     * Yellow rect in middle right of canvas, with 55 pixel width and height.
+     * Yellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.
+     * Bright fuschia rect in middle of canvas, 60 pixel width and height.
+     * Two bright green rects on opposite sides of the canvas, both 45x80.
+     * Four blue rects in each corner of the canvas, each are 35x35.
+     * Bright sea green rect on left and darker rect on right of canvas, both 45x80.
+     * Dark green rect on left and lighter green rect on right of canvas, both 45x80.
+     * Dark blue rect on left and light teal rect on right of canvas, both 45x80.
+     *
+     */
+    /**
+     * @method color
+     * @param  {Number}        v1      red or hue value relative to
+     *                                 the current color range
+     * @param  {Number}        v2      green or saturation value
+     *                                 relative to the current color range
+     * @param  {Number}        v3      blue or brightness value
+     *                                 relative to the current color range
+     * @param  {Number}        [alpha]
+     * @return {p5.Color}
+     */
+
+    /**
+     * @method color
+     * @param  {String}        value   a color string
+     * @param  {Number}        [alpha]
+     * @return {p5.Color}
+     */
+    /**
+     * @method color
+     * @param  {Number[]}      values  an array containing the red,green,blue &
+     *                                 and alpha components of the color
+     * @return {p5.Color}
+     */
+    /**
+     * @method color
+     * @param  {p5.Color}     color
+     * @return {p5.Color}
+     */
+
+    p5.prototype.color = function() {
+      p5._validateParameters('color', arguments);
+      if (arguments[0] instanceof p5.Color) {
+        return arguments[0]; // Do nothing if argument is already a color object.
+      }
+
+      var args = arguments[0] instanceof Array ? arguments[0] : arguments;
+      return new p5.Color(this, args);
+    };
+
+    /**
+     * Extracts the green value from a color or pixel array.
+     *
+     * @method green
+     * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+     *                                         or CSS color
+     * @return {Number} the green value
+     * @example
+     * 

+     * 
+     * var c = color(20, 75, 200); // Define color 'c'
+     * fill(c); // Use color variable 'c' as fill color
+     * rect(15, 20, 35, 60); // Draw left rectangle
+     *
+     * var greenValue = green(c); // Get green in 'c'
+     * print(greenValue); // Print "75.0"
+     * fill(0, greenValue, 0); // Use 'greenValue' in new fill
+     * rect(50, 20, 35, 60); // Draw right rectangle
+     * 
+     * 

+     *
+     * @alt
+     * blue rect on left and green on right, both with black outlines & 35x60.
+     *
+     */
+
+    p5.prototype.green = function(c) {
+      p5._validateParameters('green', arguments);
+      return this.color(c)._getGreen();
+    };
+
+    /**
+     * Extracts the hue value from a color or pixel array.
+     *
+     * Hue exists in both HSB and HSL. This function will return the
+     * HSB-normalized hue when supplied with an HSB color object (or when supplied
+     * with a pixel array while the color mode is HSB), but will default to the
+     * HSL-normalized hue otherwise. (The values will only be different if the
+     * maximum hue setting for each system is different.)
+     *
+     * @method hue
+     * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+     *                                         or CSS color
+     * @return {Number} the hue
+     * @example
+     * 

+     * 
+     * noStroke();
+     * colorMode(HSB, 255);
+     * var c = color(0, 126, 255);
+     * fill(c);
+     * rect(15, 20, 35, 60);
+     * var value = hue(c); // Sets 'value' to "0"
+     * fill(value);
+     * rect(50, 20, 35, 60);
+     * 
+     * 

+     *
+     * @alt
+     * salmon pink rect on left and black on right, both 35x60.
+     *
+     */
+
+    p5.prototype.hue = function(c) {
+      p5._validateParameters('hue', arguments);
+      return this.color(c)._getHue();
+    };
+
+    /**
+     * Blends two colors to find a third color somewhere between them. The amt
+     * parameter is the amount to interpolate between the two values where 0.0
+     * equal to the first color, 0.1 is very near the first color, 0.5 is halfway
+     * in between, etc. An amount below 0 will be treated as 0. Likewise, amounts
+     * above 1 will be capped at 1. This is different from the behavior of lerp(),
+     * but necessary because otherwise numbers outside the range will produce
+     * strange and unexpected colors.
+     * 


+     * The way that colours are interpolated depends on the current color mode.
+     *
+     * @method lerpColor
+     * @param  {p5.Color} c1  interpolate from this color
+     * @param  {p5.Color} c2  interpolate to this color
+     * @param  {Number}       amt number between 0 and 1
+     * @return {p5.Color}     interpolated color
+     * @example
+     * 

+     * 
+     * colorMode(RGB);
+     * stroke(255);
+     * background(51);
+     * var from = color(218, 165, 32);
+     * var to = color(72, 61, 139);
+     * colorMode(RGB); // Try changing to HSB.
+     * var interA = lerpColor(from, to, 0.33);
+     * var interB = lerpColor(from, to, 0.66);
+     * fill(from);
+     * rect(10, 20, 20, 60);
+     * fill(interA);
+     * rect(30, 20, 20, 60);
+     * fill(interB);
+     * rect(50, 20, 20, 60);
+     * fill(to);
+     * rect(70, 20, 20, 60);
+     * 
+     * 

+     *
+     * @alt
+     * 4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60
+     *
+     */
+
+    p5.prototype.lerpColor = function(c1, c2, amt) {
+      p5._validateParameters('lerpColor', arguments);
+      var mode = this._colorMode;
+      var maxes = this._colorMaxes;
+      var l0, l1, l2, l3;
+      var fromArray, toArray;
+
+      if (mode === constants.RGB) {
+        fromArray = c1.levels.map(function(level) {
+          return level / 255;
+        });
+        toArray = c2.levels.map(function(level) {
+          return level / 255;
+        });
+      } else if (mode === constants.HSB) {
+        c1._getBrightness(); // Cache hsba so it definitely exists.
+        c2._getBrightness();
+        fromArray = c1.hsba;
+        toArray = c2.hsba;
+      } else if (mode === constants.HSL) {
+        c1._getLightness(); // Cache hsla so it definitely exists.
+        c2._getLightness();
+        fromArray = c1.hsla;
+        toArray = c2.hsla;
+      } else {
+        throw new Error(mode + 'cannot be used for interpolation.');
+      }
+
+      // Prevent extrapolation.
+      amt = Math.max(Math.min(amt, 1), 0);
+
+      // Define lerp here itself if user isn't using math module.
+      // Maintains the definition as found in math/calculation.js
+      if (typeof this.lerp === 'undefined') {
+        this.lerp = function(start, stop, amt) {
+          return amt * (stop - start) + start;
+        };
+      }
+
+      // Perform interpolation.
+      l0 = this.lerp(fromArray[0], toArray[0], amt);
+      l1 = this.lerp(fromArray[1], toArray[1], amt);
+      l2 = this.lerp(fromArray[2], toArray[2], amt);
+      l3 = this.lerp(fromArray[3], toArray[3], amt);
+
+      // Scale components.
+      l0 *= maxes[mode][0];
+      l1 *= maxes[mode][1];
+      l2 *= maxes[mode][2];
+      l3 *= maxes[mode][3];
+
+      return this.color(l0, l1, l2, l3);
+    };
+
+    /**
+     * Extracts the HSL lightness value from a color or pixel array.
+     *
+     * @method lightness
+     * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+     *                                         or CSS color
+     * @return {Number} the lightness
+     * @example
+     * 

+     * 
+     * noStroke();
+     * colorMode(HSL);
+     * var c = color(156, 100, 50, 1);
+     * fill(c);
+     * rect(15, 20, 35, 60);
+     * var value = lightness(c); // Sets 'value' to 50
+     * fill(value);
+     * rect(50, 20, 35, 60);
+     * 
+     * 

+     *
+     * @alt
+     * light pastel green rect on left and dark grey rect on right, both 35x60.
+     *
+     */
+    p5.prototype.lightness = function(c) {
+      p5._validateParameters('lightness', arguments);
+      return this.color(c)._getLightness();
+    };
+
+    /**
+     * Extracts the red value from a color or pixel array.
+     *
+     * @method red
+     * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+     *                                         or CSS color
+     * @return {Number} the red value
+     * @example
+     * 

+     * 
+     * var c = color(255, 204, 0); // Define color 'c'
+     * fill(c); // Use color variable 'c' as fill color
+     * rect(15, 20, 35, 60); // Draw left rectangle
+     *
+     * var redValue = red(c); // Get red in 'c'
+     * print(redValue); // Print "255.0"
+     * fill(redValue, 0, 0); // Use 'redValue' in new fill
+     * rect(50, 20, 35, 60); // Draw right rectangle
+     * 
+     * 

+     *
+     * 

+     * 
+     * colorMode(RGB, 255);
+     * var c = color(127, 255, 0);
+     * colorMode(RGB, 1);
+     * var myColor = red(c);
+     * print(myColor);
+     * 
+     * 

+     *
+     * @alt
+     * yellow rect on left and red rect on right, both with black outlines and 35x60.
+     * grey canvas
+     */
+    p5.prototype.red = function(c) {
+      p5._validateParameters('red', arguments);
+      return this.color(c)._getRed();
+    };
+
+    /**
+     * Extracts the saturation value from a color or pixel array.
+     *
+     * Saturation is scaled differently in HSB and HSL. This function will return
+     * the HSB saturation when supplied with an HSB color object (or when supplied
+     * with a pixel array while the color mode is HSB), but will default to the
+     * HSL saturation otherwise.
+     *
+     * @method saturation
+     * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+     *                                         or CSS color
+     * @return {Number} the saturation value
+     * @example
+     * 

+     * 
+     * noStroke();
+     * colorMode(HSB, 255);
+     * var c = color(0, 126, 255);
+     * fill(c);
+     * rect(15, 20, 35, 60);
+     * var value = saturation(c); // Sets 'value' to 126
+     * fill(value);
+     * rect(50, 20, 35, 60);
+     * 
+     * 

+     *
+     * @alt
+     *deep pink rect on left and grey rect on right, both 35x60.
+     *
+     */
+
+    p5.prototype.saturation = function(c) {
+      p5._validateParameters('saturation', arguments);
+      return this.color(c)._getSaturation();
+    };
+
+    module.exports = p5;
+
+    },{"../core/constants":21,"../core/core":22,"../core/error_helpers":25,"./p5.Color":16}],16:[function(_dereq_,module,exports){
+    /**
+     * @module Color
+     * @submodule Creating & Reading
+     * @for p5
+     * @requires core
+     * @requires constants
+     * @requires color_conversion
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var constants = _dereq_('../core/constants');
+    var color_conversion = _dereq_('./color_conversion');
+
+    /**
+     * Each color stores the color mode and level maxes that applied at the
+     * time of its construction. These are used to interpret the input arguments
+     * (at construction and later for that instance of color) and to format the
+     * output e.g. when saturation() is requested.
+     *
+     * Internally we store an array representing the ideal RGBA values in floating
+     * point form, normalized from 0 to 1. From this we calculate the closest
+     * screen color (RGBA levels from 0 to 255) and expose this to the renderer.
+     *
+     * We also cache normalized, floating point components of the color in various
+     * representations as they are calculated. This is done to prevent repeating a
+     * conversion that has already been performed.
+     *
+     * @class p5.Color
+     * @constructor
+     */
+    p5.Color = function(pInst, vals) {
+      // Record color mode and maxes at time of construction.
+      this._storeModeAndMaxes(pInst._colorMode, pInst._colorMaxes);
+
+      // Calculate normalized RGBA values.
+      if (
+        this.mode !== constants.RGB &&
+        this.mode !== constants.HSL &&
+        this.mode !== constants.HSB
+      ) {
+        throw new Error(this.mode + ' is an invalid colorMode.');
+      } else {
+        this._array = p5.Color._parseInputs.apply(this, vals);
+      }
+
+      // Expose closest screen color.
+      this._calculateLevels();
+      this.name = 'p5.Color'; // for friendly debugger system
+      return this;
+    };
+
+    /**
+     * @method toString
+     * @return {String}
+     * @example
+     * 

+     * 
+     * var myColor;
+     * function setup() {
+     *   createCanvas(200, 200);
+     *   stroke(255);
+     *   myColor = color(100, 100, 250);
+     *   fill(myColor);
+     * }
+     *
+     * function draw() {
+     *   text(myColor.toString(), 10, 10);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * canvas with text representation of color
+     */
+    p5.Color.prototype.toString = function() {
+      var a = this.levels;
+      var alpha = this._array[3]; // String representation uses normalized alpha.
+      return 'rgba(' + a[0] + ',' + a[1] + ',' + a[2] + ',' + alpha + ')';
+    };
+
+    /**
+     * @method setRed
+     * @param {Number} red the new red value
+     * @example
+     * 

+     * 
+     * var backgroundColor;
+     *
+     * function setup() {
+     *   backgroundColor = color(100, 50, 150);
+     * }
+     *
+     * function draw() {
+     *   backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
+     *   background(backgroundColor);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * canvas with gradually changing background color
+     */
+    p5.Color.prototype.setRed = function(new_red) {
+      this._array[0] = new_red / this.maxes[constants.RGB][0];
+      this._calculateLevels();
+    };
+
+    /**
+     * @method setGreen
+     * @param {Number} green the new green value
+     * @example
+     * 

+     * 
+     * var backgroundColor;
+     *
+     * function setup() {
+     *   backgroundColor = color(100, 50, 150);
+     * }
+     *
+     * function draw() {
+     *   backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
+     *   background(backgroundColor);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * canvas with gradually changing background color
+     **/
+    p5.Color.prototype.setGreen = function(new_green) {
+      this._array[1] = new_green / this.maxes[constants.RGB][1];
+      this._calculateLevels();
+    };
+
+    /**
+     * @method setBlue
+     * @param {Number} blue the new blue value
+     * @example
+     * 

+     * 
+     * var backgroundColor;
+     *
+     * function setup() {
+     *   backgroundColor = color(100, 50, 150);
+     * }
+     *
+     * function draw() {
+     *   backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
+     *   background(backgroundColor);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * canvas with gradually changing background color
+     **/
+    p5.Color.prototype.setBlue = function(new_blue) {
+      this._array[2] = new_blue / this.maxes[constants.RGB][2];
+      this._calculateLevels();
+    };
+
+    /**
+     * @method setAlpha
+     * @param {Number} alpha the new alpha value
+     * @example
+     * 

+     * 
+     * var squareColor;
+     *
+     * function setup() {
+     *   ellipseMode(CORNERS);
+     *   strokeWeight(4);
+     *   squareColor = color(100, 50, 150);
+     * }
+     *
+     * function draw() {
+     *   background(255);
+     *
+     *   noFill();
+     *   stroke(0);
+     *   ellipse(10, 10, width - 10, height - 10);
+     *
+     *   squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
+     *   fill(squareColor);
+     *   noStroke();
+     *   rect(13, 13, width - 26, height - 26);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * circle behind a square with gradually changing opacity
+     **/
+    p5.Color.prototype.setAlpha = function(new_alpha) {
+      this._array[3] = new_alpha / this.maxes[this.mode][3];
+      this._calculateLevels();
+    };
+
+    // calculates and stores the closest screen levels
+    p5.Color.prototype._calculateLevels = function() {
+      this.levels = this._array.map(function(level) {
+        return Math.round(level * 255);
+      });
+    };
+
+    p5.Color.prototype._getAlpha = function() {
+      return this._array[3] * this.maxes[this.mode][3];
+    };
+
+    // stores the color mode and maxes in this instance of Color
+    // for later use (by _parseInputs())
+    p5.Color.prototype._storeModeAndMaxes = function(new_mode, new_maxes) {
+      this.mode = new_mode;
+      this.maxes = new_maxes;
+    };
+
+    p5.Color.prototype._getMode = function() {
+      return this.mode;
+    };
+
+    p5.Color.prototype._getMaxes = function() {
+      return this.maxes;
+    };
+
+    p5.Color.prototype._getBlue = function() {
+      return this._array[2] * this.maxes[constants.RGB][2];
+    };
+
+    p5.Color.prototype._getBrightness = function() {
+      if (!this.hsba) {
+        this.hsba = color_conversion._rgbaToHSBA(this._array);
+      }
+      return this.hsba[2] * this.maxes[constants.HSB][2];
+    };
+
+    p5.Color.prototype._getGreen = function() {
+      return this._array[1] * this.maxes[constants.RGB][1];
+    };
+
+    /**
+     * Hue is the same in HSB and HSL, but the maximum value may be different.
+     * This function will return the HSB-normalized saturation when supplied with
+     * an HSB color object, but will default to the HSL-normalized saturation
+     * otherwise.
+     */
+    p5.Color.prototype._getHue = function() {
+      if (this.mode === constants.HSB) {
+        if (!this.hsba) {
+          this.hsba = color_conversion._rgbaToHSBA(this._array);
+        }
+        return this.hsba[0] * this.maxes[constants.HSB][0];
+      } else {
+        if (!this.hsla) {
+          this.hsla = color_conversion._rgbaToHSLA(this._array);
+        }
+        return this.hsla[0] * this.maxes[constants.HSL][0];
+      }
+    };
+
+    p5.Color.prototype._getLightness = function() {
+      if (!this.hsla) {
+        this.hsla = color_conversion._rgbaToHSLA(this._array);
+      }
+      return this.hsla[2] * this.maxes[constants.HSL][2];
+    };
+
+    p5.Color.prototype._getRed = function() {
+      return this._array[0] * this.maxes[constants.RGB][0];
+    };
+
+    /**
+     * Saturation is scaled differently in HSB and HSL. This function will return
+     * the HSB saturation when supplied with an HSB color object, but will default
+     * to the HSL saturation otherwise.
+     */
+    p5.Color.prototype._getSaturation = function() {
+      if (this.mode === constants.HSB) {
+        if (!this.hsba) {
+          this.hsba = color_conversion._rgbaToHSBA(this._array);
+        }
+        return this.hsba[1] * this.maxes[constants.HSB][1];
+      } else {
+        if (!this.hsla) {
+          this.hsla = color_conversion._rgbaToHSLA(this._array);
+        }
+        return this.hsla[1] * this.maxes[constants.HSL][1];
+      }
+    };
+
+    /**
+     * CSS named colors.
+     */
+    var namedColors = {
+      aliceblue: '#f0f8ff',
+      antiquewhite: '#faebd7',
+      aqua: '#00ffff',
+      aquamarine: '#7fffd4',
+      azure: '#f0ffff',
+      beige: '#f5f5dc',
+      bisque: '#ffe4c4',
+      black: '#000000',
+      blanchedalmond: '#ffebcd',
+      blue: '#0000ff',
+      blueviolet: '#8a2be2',
+      brown: '#a52a2a',
+      burlywood: '#deb887',
+      cadetblue: '#5f9ea0',
+      chartreuse: '#7fff00',
+      chocolate: '#d2691e',
+      coral: '#ff7f50',
+      cornflowerblue: '#6495ed',
+      cornsilk: '#fff8dc',
+      crimson: '#dc143c',
+      cyan: '#00ffff',
+      darkblue: '#00008b',
+      darkcyan: '#008b8b',
+      darkgoldenrod: '#b8860b',
+      darkgray: '#a9a9a9',
+      darkgreen: '#006400',
+      darkgrey: '#a9a9a9',
+      darkkhaki: '#bdb76b',
+      darkmagenta: '#8b008b',
+      darkolivegreen: '#556b2f',
+      darkorange: '#ff8c00',
+      darkorchid: '#9932cc',
+      darkred: '#8b0000',
+      darksalmon: '#e9967a',
+      darkseagreen: '#8fbc8f',
+      darkslateblue: '#483d8b',
+      darkslategray: '#2f4f4f',
+      darkslategrey: '#2f4f4f',
+      darkturquoise: '#00ced1',
+      darkviolet: '#9400d3',
+      deeppink: '#ff1493',
+      deepskyblue: '#00bfff',
+      dimgray: '#696969',
+      dimgrey: '#696969',
+      dodgerblue: '#1e90ff',
+      firebrick: '#b22222',
+      floralwhite: '#fffaf0',
+      forestgreen: '#228b22',
+      fuchsia: '#ff00ff',
+      gainsboro: '#dcdcdc',
+      ghostwhite: '#f8f8ff',
+      gold: '#ffd700',
+      goldenrod: '#daa520',
+      gray: '#808080',
+      green: '#008000',
+      greenyellow: '#adff2f',
+      grey: '#808080',
+      honeydew: '#f0fff0',
+      hotpink: '#ff69b4',
+      indianred: '#cd5c5c',
+      indigo: '#4b0082',
+      ivory: '#fffff0',
+      khaki: '#f0e68c',
+      lavender: '#e6e6fa',
+      lavenderblush: '#fff0f5',
+      lawngreen: '#7cfc00',
+      lemonchiffon: '#fffacd',
+      lightblue: '#add8e6',
+      lightcoral: '#f08080',
+      lightcyan: '#e0ffff',
+      lightgoldenrodyellow: '#fafad2',
+      lightgray: '#d3d3d3',
+      lightgreen: '#90ee90',
+      lightgrey: '#d3d3d3',
+      lightpink: '#ffb6c1',
+      lightsalmon: '#ffa07a',
+      lightseagreen: '#20b2aa',
+      lightskyblue: '#87cefa',
+      lightslategray: '#778899',
+      lightslategrey: '#778899',
+      lightsteelblue: '#b0c4de',
+      lightyellow: '#ffffe0',
+      lime: '#00ff00',
+      limegreen: '#32cd32',
+      linen: '#faf0e6',
+      magenta: '#ff00ff',
+      maroon: '#800000',
+      mediumaquamarine: '#66cdaa',
+      mediumblue: '#0000cd',
+      mediumorchid: '#ba55d3',
+      mediumpurple: '#9370db',
+      mediumseagreen: '#3cb371',
+      mediumslateblue: '#7b68ee',
+      mediumspringgreen: '#00fa9a',
+      mediumturquoise: '#48d1cc',
+      mediumvioletred: '#c71585',
+      midnightblue: '#191970',
+      mintcream: '#f5fffa',
+      mistyrose: '#ffe4e1',
+      moccasin: '#ffe4b5',
+      navajowhite: '#ffdead',
+      navy: '#000080',
+      oldlace: '#fdf5e6',
+      olive: '#808000',
+      olivedrab: '#6b8e23',
+      orange: '#ffa500',
+      orangered: '#ff4500',
+      orchid: '#da70d6',
+      palegoldenrod: '#eee8aa',
+      palegreen: '#98fb98',
+      paleturquoise: '#afeeee',
+      palevioletred: '#db7093',
+      papayawhip: '#ffefd5',
+      peachpuff: '#ffdab9',
+      peru: '#cd853f',
+      pink: '#ffc0cb',
+      plum: '#dda0dd',
+      powderblue: '#b0e0e6',
+      purple: '#800080',
+      red: '#ff0000',
+      rosybrown: '#bc8f8f',
+      royalblue: '#4169e1',
+      saddlebrown: '#8b4513',
+      salmon: '#fa8072',
+      sandybrown: '#f4a460',
+      seagreen: '#2e8b57',
+      seashell: '#fff5ee',
+      sienna: '#a0522d',
+      silver: '#c0c0c0',
+      skyblue: '#87ceeb',
+      slateblue: '#6a5acd',
+      slategray: '#708090',
+      slategrey: '#708090',
+      snow: '#fffafa',
+      springgreen: '#00ff7f',
+      steelblue: '#4682b4',
+      tan: '#d2b48c',
+      teal: '#008080',
+      thistle: '#d8bfd8',
+      tomato: '#ff6347',
+      turquoise: '#40e0d0',
+      violet: '#ee82ee',
+      wheat: '#f5deb3',
+      white: '#ffffff',
+      whitesmoke: '#f5f5f5',
+      yellow: '#ffff00',
+      yellowgreen: '#9acd32'
+    };
+
+    /**
+     * These regular expressions are used to build up the patterns for matching
+     * viable CSS color strings: fragmenting the regexes in this way increases the
+     * legibility and comprehensibility of the code.
+     *
+     * Note that RGB values of .9 are not parsed by IE, but are supported here for
+     * color string consistency.
+     */
+    var WHITESPACE = /\s*/; // Match zero or more whitespace characters.
+    var INTEGER = /(\d{1,3})/; // Match integers: 79, 255, etc.
+    var DECIMAL = /((?:\d+(?:\.\d+)?)|(?:\.\d+))/; // Match 129.6, 79, .9, etc.
+    var PERCENT = new RegExp(DECIMAL.source + '%'); // Match 12.9%, 79%, .9%, etc.
+
+    /**
+     * Full color string patterns. The capture groups are necessary.
+     */
+    var colorPatterns = {
+      // Match colors in format #XXX, e.g. #416.
+      HEX3: /^#([a-f0-9])([a-f0-9])([a-f0-9])$/i,
+
+      // Match colors in format #XXXX, e.g. #5123.
+      HEX4: /^#([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])$/i,
+
+      // Match colors in format #XXXXXX, e.g. #b4d455.
+      HEX6: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
+
+      // Match colors in format #XXXXXXXX, e.g. #b4d45535.
+      HEX8: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
+
+      // Match colors in format rgb(R, G, B), e.g. rgb(255, 0, 128).
+      RGB: new RegExp(
+        [
+          '^rgb\\(',
+          INTEGER.source,
+          ',',
+          INTEGER.source,
+          ',',
+          INTEGER.source,
+          '\\)$'
+        ].join(WHITESPACE.source),
+        'i'
+      ),
+
+      // Match colors in format rgb(R%, G%, B%), e.g. rgb(100%, 0%, 28.9%).
+      RGB_PERCENT: new RegExp(
+        [
+          '^rgb\\(',
+          PERCENT.source,
+          ',',
+          PERCENT.source,
+          ',',
+          PERCENT.source,
+          '\\)$'
+        ].join(WHITESPACE.source),
+        'i'
+      ),
+
+      // Match colors in format rgb(R, G, B, A), e.g. rgb(255, 0, 128, 0.25).
+      RGBA: new RegExp(
+        [
+          '^rgba\\(',
+          INTEGER.source,
+          ',',
+          INTEGER.source,
+          ',',
+          INTEGER.source,
+          ',',
+          DECIMAL.source,
+          '\\)$'
+        ].join(WHITESPACE.source),
+        'i'
+      ),
+
+      // Match colors in format rgb(R%, G%, B%, A), e.g. rgb(100%, 0%, 28.9%, 0.5).
+      RGBA_PERCENT: new RegExp(
+        [
+          '^rgba\\(',
+          PERCENT.source,
+          ',',
+          PERCENT.source,
+          ',',
+          PERCENT.source,
+          ',',
+          DECIMAL.source,
+          '\\)$'
+        ].join(WHITESPACE.source),
+        'i'
+      ),
+
+      // Match colors in format hsla(H, S%, L%), e.g. hsl(100, 40%, 28.9%).
+      HSL: new RegExp(
+        [
+          '^hsl\\(',
+          INTEGER.source,
+          ',',
+          PERCENT.source,
+          ',',
+          PERCENT.source,
+          '\\)$'
+        ].join(WHITESPACE.source),
+        'i'
+      ),
+
+      // Match colors in format hsla(H, S%, L%, A), e.g. hsla(100, 40%, 28.9%, 0.5).
+      HSLA: new RegExp(
+        [
+          '^hsla\\(',
+          INTEGER.source,
+          ',',
+          PERCENT.source,
+          ',',
+          PERCENT.source,
+          ',',
+          DECIMAL.source,
+          '\\)$'
+        ].join(WHITESPACE.source),
+        'i'
+      ),
+
+      // Match colors in format hsb(H, S%, B%), e.g. hsb(100, 40%, 28.9%).
+      HSB: new RegExp(
+        [
+          '^hsb\\(',
+          INTEGER.source,
+          ',',
+          PERCENT.source,
+          ',',
+          PERCENT.source,
+          '\\)$'
+        ].join(WHITESPACE.source),
+        'i'
+      ),
+
+      // Match colors in format hsba(H, S%, B%, A), e.g. hsba(100, 40%, 28.9%, 0.5).
+      HSBA: new RegExp(
+        [
+          '^hsba\\(',
+          INTEGER.source,
+          ',',
+          PERCENT.source,
+          ',',
+          PERCENT.source,
+          ',',
+          DECIMAL.source,
+          '\\)$'
+        ].join(WHITESPACE.source),
+        'i'
+      )
+    };
+
+    /**
+     * For a number of different inputs, returns a color formatted as [r, g, b, a]
+     * arrays, with each component normalized between 0 and 1.
+     *
+     * @private
+     * @param {Array} [...args] An 'array-like' object that represents a list of
+     *                          arguments
+     * @return {Number[]}       a color formatted as [r, g, b, a]
+     *                          Example:
+     *                          input        ==> output
+     *                          g            ==> [g, g, g, 255]
+     *                          g,a          ==> [g, g, g, a]
+     *                          r, g, b      ==> [r, g, b, 255]
+     *                          r, g, b, a   ==> [r, g, b, a]
+     *                          [g]          ==> [g, g, g, 255]
+     *                          [g, a]       ==> [g, g, g, a]
+     *                          [r, g, b]    ==> [r, g, b, 255]
+     *                          [r, g, b, a] ==> [r, g, b, a]
+     * @example
+     * 

+     * 
+     * // todo
+     * 
+     * 

+     *
+     * @alt
+     * //todo
+     *
+     */
+    p5.Color._parseInputs = function(r, g, b, a) {
+      var numArgs = arguments.length;
+      var mode = this.mode;
+      var maxes = this.maxes;
+      var results = [];
+
+      if (numArgs >= 3) {
+        // Argument is a list of component values.
+
+        results[0] = r / maxes[mode][0];
+        results[1] = g / maxes[mode][1];
+        results[2] = b / maxes[mode][2];
+
+        // Alpha may be undefined, so default it to 100%.
+        if (typeof a === 'number') {
+          results[3] = a / maxes[mode][3];
+        } else {
+          results[3] = 1;
+        }
+
+        // Constrain components to the range [0,1].
+        results = results.map(function(value) {
+          return Math.max(Math.min(value, 1), 0);
+        });
+
+        // Convert to RGBA and return.
+        if (mode === constants.HSL) {
+          return color_conversion._hslaToRGBA(results);
+        } else if (mode === constants.HSB) {
+          return color_conversion._hsbaToRGBA(results);
+        } else {
+          return results;
+        }
+      } else if (numArgs === 1 && typeof r === 'string') {
+        var str = r.trim().toLowerCase();
+
+        // Return if string is a named colour.
+        if (namedColors[str]) {
+          return p5.Color._parseInputs.call(this, namedColors[str]);
+        }
+
+        // Try RGBA pattern matching.
+        if (colorPatterns.HEX3.test(str)) {
+          // #rgb
+          results = colorPatterns.HEX3.exec(str)
+            .slice(1)
+            .map(function(color) {
+              return parseInt(color + color, 16) / 255;
+            });
+          results[3] = 1;
+          return results;
+        } else if (colorPatterns.HEX6.test(str)) {
+          // #rrggbb
+          results = colorPatterns.HEX6.exec(str)
+            .slice(1)
+            .map(function(color) {
+              return parseInt(color, 16) / 255;
+            });
+          results[3] = 1;
+          return results;
+        } else if (colorPatterns.HEX4.test(str)) {
+          // #rgba
+          results = colorPatterns.HEX4.exec(str)
+            .slice(1)
+            .map(function(color) {
+              return parseInt(color + color, 16) / 255;
+            });
+          return results;
+        } else if (colorPatterns.HEX8.test(str)) {
+          // #rrggbbaa
+          results = colorPatterns.HEX8.exec(str)
+            .slice(1)
+            .map(function(color) {
+              return parseInt(color, 16) / 255;
+            });
+          return results;
+        } else if (colorPatterns.RGB.test(str)) {
+          // rgb(R,G,B)
+          results = colorPatterns.RGB.exec(str)
+            .slice(1)
+            .map(function(color) {
+              return color / 255;
+            });
+          results[3] = 1;
+          return results;
+        } else if (colorPatterns.RGB_PERCENT.test(str)) {
+          // rgb(R%,G%,B%)
+          results = colorPatterns.RGB_PERCENT.exec(str)
+            .slice(1)
+            .map(function(color) {
+              return parseFloat(color) / 100;
+            });
+          results[3] = 1;
+          return results;
+        } else if (colorPatterns.RGBA.test(str)) {
+          // rgba(R,G,B,A)
+          results = colorPatterns.RGBA.exec(str)
+            .slice(1)
+            .map(function(color, idx) {
+              if (idx === 3) {
+                return parseFloat(color);
+              }
+              return color / 255;
+            });
+          return results;
+        } else if (colorPatterns.RGBA_PERCENT.test(str)) {
+          // rgba(R%,G%,B%,A%)
+          results = colorPatterns.RGBA_PERCENT.exec(str)
+            .slice(1)
+            .map(function(color, idx) {
+              if (idx === 3) {
+                return parseFloat(color);
+              }
+              return parseFloat(color) / 100;
+            });
+          return results;
+        }
+
+        // Try HSLA pattern matching.
+        if (colorPatterns.HSL.test(str)) {
+          // hsl(H,S,L)
+          results = colorPatterns.HSL.exec(str)
+            .slice(1)
+            .map(function(color, idx) {
+              if (idx === 0) {
+                return parseInt(color, 10) / 360;
+              }
+              return parseInt(color, 10) / 100;
+            });
+          results[3] = 1;
+        } else if (colorPatterns.HSLA.test(str)) {
+          // hsla(H,S,L,A)
+          results = colorPatterns.HSLA.exec(str)
+            .slice(1)
+            .map(function(color, idx) {
+              if (idx === 0) {
+                return parseInt(color, 10) / 360;
+              } else if (idx === 3) {
+                return parseFloat(color);
+              }
+              return parseInt(color, 10) / 100;
+            });
+        }
+        results = results.map(function(value) {
+          return Math.max(Math.min(value, 1), 0);
+        });
+        if (results.length) {
+          return color_conversion._hslaToRGBA(results);
+        }
+
+        // Try HSBA pattern matching.
+        if (colorPatterns.HSB.test(str)) {
+          // hsb(H,S,B)
+          results = colorPatterns.HSB.exec(str)
+            .slice(1)
+            .map(function(color, idx) {
+              if (idx === 0) {
+                return parseInt(color, 10) / 360;
+              }
+              return parseInt(color, 10) / 100;
+            });
+          results[3] = 1;
+        } else if (colorPatterns.HSBA.test(str)) {
+          // hsba(H,S,B,A)
+          results = colorPatterns.HSBA.exec(str)
+            .slice(1)
+            .map(function(color, idx) {
+              if (idx === 0) {
+                return parseInt(color, 10) / 360;
+              } else if (idx === 3) {
+                return parseFloat(color);
+              }
+              return parseInt(color, 10) / 100;
+            });
+        }
+        results = results.map(function(value) {
+          return Math.max(Math.min(value, 1), 0);
+        });
+
+        if (results.length) {
+          return color_conversion._hsbaToRGBA(results);
+        }
+
+        // Input did not match any CSS color pattern: default to white.
+        results = [1, 1, 1, 1];
+      } else if ((numArgs === 1 || numArgs === 2) && typeof r === 'number') {
+        // 'Grayscale' mode.
+
+        /**
+         * For HSB and HSL, interpret the gray level as a brightness/lightness
+         * value (they are equivalent when chroma is zero). For RGB, normalize the
+         * gray level according to the blue maximum.
+         */
+        results[0] = r / maxes[mode][2];
+        results[1] = r / maxes[mode][2];
+        results[2] = r / maxes[mode][2];
+
+        // Alpha may be undefined, so default it to 100%.
+        if (typeof g === 'number') {
+          results[3] = g / maxes[mode][3];
+        } else {
+          results[3] = 1;
+        }
+
+        // Constrain components to the range [0,1].
+        results = results.map(function(value) {
+          return Math.max(Math.min(value, 1), 0);
+        });
+      } else {
+        throw new Error(arguments + 'is not a valid color representation.');
+      }
+
+      return results;
+    };
+
+    module.exports = p5.Color;
+
+    },{"../core/constants":21,"../core/core":22,"./color_conversion":14}],17:[function(_dereq_,module,exports){
+    /**
+     * @module Color
+     * @submodule Setting
+     * @for p5
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var constants = _dereq_('../core/constants');
+    _dereq_('./p5.Color');
+
+    /**
+     * The background() function sets the color used for the background of the
+     * p5.js canvas. The default background is light gray. This function is
+     * typically used within draw() to clear the display window at the beginning
+     * of each frame, but it can be used inside setup() to set the background on
+     * the first frame of animation or if the background need only be set once.
+     * 


+     * The color is either specified in terms of the RGB, HSB, or HSL color
+     * depending on the current colorMode. (The default color space is RGB, with
+     * each value in the range from 0 to 255). The alpha range by default is also 0 to 255.
+     * 


+     * If a single string argument is provided, RGB, RGBA and Hex CSS color strings
+     * and all named color strings are supported. In this case, an alpha number
+     * value as a second argument is not supported, the RGBA form should be used.
+     * 


+     * A p5.Color object can also be provided to set the background color.
+     * 


+     * A p5.Image can also be provided to set the background iamge.
+     *
+     * @method background
+     * @param {p5.Color} color     any value created by the color() function
+     * @chainable
+     *
+     * @example
+     * 

+     * 
+     * // Grayscale integer value
+     * background(51);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // R, G & B integer values
+     * background(255, 204, 0);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // H, S & B integer values
+     * colorMode(HSB);
+     * background(255, 204, 100);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Named SVG/CSS color string
+     * background('red');
+     * 
+     * 

+     *
+     * 

+     * 
+     * // three-digit hexadecimal RGB notation
+     * background('#fae');
+     * 
+     * 

+     *
+     * 

+     * 
+     * // six-digit hexadecimal RGB notation
+     * background('#222222');
+     * 
+     * 

+     *
+     * 

+     * 
+     * // integer RGB notation
+     * background('rgb(0,255,0)');
+     * 
+     * 

+     *
+     * 

+     * 
+     * // integer RGBA notation
+     * background('rgba(0,255,0, 0.25)');
+     * 
+     * 

+     *
+     * 

+     * 
+     * // percentage RGB notation
+     * background('rgb(100%,0%,10%)');
+     * 
+     * 

+     *
+     * 

+     * 
+     * // percentage RGBA notation
+     * background('rgba(100%,0%,100%,0.5)');
+     * 
+     * 

+     *
+     * 

+     * 
+     * // p5 Color object
+     * background(color(0, 0, 255));
+     * 
+     * 

+     *
+     * @alt
+     * canvas with darkest charcoal grey background.
+     * canvas with yellow background.
+     * canvas with royal blue background.
+     * canvas with red background.
+     * canvas with pink background.
+     * canvas with black background.
+     * canvas with bright green background.
+     * canvas with soft green background.
+     * canvas with red background.
+     * canvas with light purple background.
+     * canvas with blue background.
+     */
+
+    /**
+     * @method background
+     * @param {String} colorstring color string, possible formats include: integer
+     *                         rgb() or rgba(), percentage rgb() or rgba(),
+     *                         3-digit hex, 6-digit hex
+     * @param {Number} [a]         opacity of the background relative to current
+     *                             color range (default is 0-255)
+     * @chainable
+     */
+
+    /**
+     * @method background
+     * @param {Number} gray   specifies a value between white and black
+     * @param {Number} [a]
+     * @chainable
+     */
+
+    /**
+     * @method background
+     * @param {Number} v1     red or hue value (depending on the current color
+     *                        mode)
+     * @param {Number} v2     green or saturation value (depending on the current
+     *                        color mode)
+     * @param {Number} v3     blue or brightness value (depending on the current
+     *                        color mode)
+     * @param  {Number} [a]
+     * @chainable
+     */
+
+    /**
+     * @method background
+     * @param  {Number[]}      values  an array containing the red,green,blue &
+     *                                 and alpha components of the color
+     * @chainable
+     */
+
+    /**
+     * @method background
+     * @param {p5.Image} image     image created with loadImage() or createImage(),
+     *                             to set as background
+     *                             (must be same size as the sketch window)
+     * @param  {Number}  [a]
+     * @chainable
+     */
+
+    p5.prototype.background = function() {
+      if (arguments[0] instanceof p5.Image) {
+        this.image(arguments[0], 0, 0, this.width, this.height);
+      } else {
+        this._renderer.background.apply(this._renderer, arguments);
+      }
+      return this;
+    };
+
+    /**
+     * Clears the pixels within a buffer. This function only works on p5.Canvas
+     * objects created with the createCanvas() function; it won't work with the
+     * main display window. Unlike the main graphics context, pixels in
+     * additional graphics areas created with createGraphics() can be entirely
+     * or partially transparent. This function clears everything to make all of
+     * the pixels 100% transparent.
+     *
+     * @method clear
+     * @chainable
+     * @example
+     * 

+     * 
+     * // Clear the screen on mouse press.
+     * function setup() {
+     *   createCanvas(100, 100);
+     * }
+     *
+     * function draw() {
+     *   ellipse(mouseX, mouseY, 20, 20);
+     * }
+     *
+     * function mousePressed() {
+     *   clear();
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 20x20 white ellipses are continually drawn at mouse x and y coordinates.
+     *
+     */
+
+    p5.prototype.clear = function() {
+      this._renderer.clear();
+      return this;
+    };
+
+    /**
+     * colorMode() changes the way p5.js interprets color data. By default, the
+     * parameters for fill(), stroke(), background(), and color() are defined by
+     * values between 0 and 255 using the RGB color model. This is equivalent to
+     * setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB
+     * system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You
+     * can also use HSL.
+     * 


+     * Note: existing color objects remember the mode that they were created in,
+     * so you can change modes as you like without affecting their appearance.
+     *
+     *
+     * @method colorMode
+     * @param {Constant} mode   either RGB, HSB or HSL, corresponding to
+     *                          Red/Green/Blue and Hue/Saturation/Brightness
+     *                          (or Lightness)
+     * @param {Number}  [max]  range for all values
+     * @chainable
+     *
+     * @example
+     * 

+     * 
+     * noStroke();
+     * colorMode(RGB, 100);
+     * for (var i = 0; i < 100; i++) {
+     *   for (var j = 0; j < 100; j++) {
+     *     stroke(i, j, 0);
+     *     point(i, j);
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * noStroke();
+     * colorMode(HSB, 100);
+     * for (var i = 0; i < 100; i++) {
+     *   for (var j = 0; j < 100; j++) {
+     *     stroke(i, j, 100);
+     *     point(i, j);
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * colorMode(RGB, 255);
+     * var c = color(127, 255, 0);
+     *
+     * colorMode(RGB, 1);
+     * var myColor = c._getRed();
+     * text(myColor, 10, 10, 80, 80);
+     * 
+     * 

+     *
+     * 

+     * 
+     * noFill();
+     * colorMode(RGB, 255, 255, 255, 1);
+     * background(255);
+     *
+     * strokeWeight(4);
+     * stroke(255, 0, 10, 0.3);
+     * ellipse(40, 40, 50, 50);
+     * ellipse(50, 50, 40, 40);
+     * 
+     * 

+     *
+     * @alt
+     *Green to red gradient from bottom L to top R. shading originates from top left.
+     *Rainbow gradient from left to right. Brightness increasing to white at top.
+     *unknown image.
+     *50x50 ellipse at middle L & 40x40 ellipse at center. Transluscent pink outlines.
+     *
+     */
+    /**
+     * @method colorMode
+     * @param {Constant} mode
+     * @param {Number} max1     range for the red or hue depending on the
+     *                              current color mode
+     * @param {Number} max2     range for the green or saturation depending
+     *                              on the current color mode
+     * @param {Number} max3     range for the blue or brightness/lighntess
+     *                              depending on the current color mode
+     * @param {Number} [maxA]   range for the alpha
+     * @chainable
+     */
+    p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
+      p5._validateParameters('colorMode', arguments);
+      if (
+        mode === constants.RGB ||
+        mode === constants.HSB ||
+        mode === constants.HSL
+      ) {
+        // Set color mode.
+        this._colorMode = mode;
+
+        // Set color maxes.
+        var maxes = this._colorMaxes[mode];
+        if (arguments.length === 2) {
+          maxes[0] = max1; // Red
+          maxes[1] = max1; // Green
+          maxes[2] = max1; // Blue
+          maxes[3] = max1; // Alpha
+        } else if (arguments.length === 4) {
+          maxes[0] = max1; // Red
+          maxes[1] = max2; // Green
+          maxes[2] = max3; // Blue
+        } else if (arguments.length === 5) {
+          maxes[0] = max1; // Red
+          maxes[1] = max2; // Green
+          maxes[2] = max3; // Blue
+          maxes[3] = maxA; // Alpha
+        }
+      }
+
+      return this;
+    };
+
+    /**
+     * Sets the color used to fill shapes. For example, if you run
+     * fill(204, 102, 0), all subsequent shapes will be filled with orange. This
+     * color is either specified in terms of the RGB or HSB color depending on
+     * the current colorMode(). (The default color space is RGB, with each value
+     * in the range from 0 to 255). The alpha range by default is also 0 to 255.
+     * 


+     * If a single string argument is provided, RGB, RGBA and Hex CSS color strings
+     * and all named color strings are supported. In this case, an alpha number
+     * value as a second argument is not supported, the RGBA form should be used.
+     * 


+     * A p5 Color object can also be provided to set the fill color.
+     *
+     * @method fill
+     * @param  {Number}        v1      red or hue value relative to
+     *                                 the current color range
+     * @param  {Number}        v2      green or saturation value
+     *                                 relative to the current color range
+     * @param  {Number}        v3      blue or brightness value
+     *                                 relative to the current color range
+     * @param  {Number}        [alpha]
+     * @chainable
+     * @example
+     * 

+     * 
+     * // Grayscale integer value
+     * fill(51);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // R, G & B integer values
+     * fill(255, 204, 0);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // H, S & B integer values
+     * colorMode(HSB);
+     * fill(255, 204, 100);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Named SVG/CSS color string
+     * fill('red');
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // three-digit hexadecimal RGB notation
+     * fill('#fae');
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // six-digit hexadecimal RGB notation
+     * fill('#222222');
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // integer RGB notation
+     * fill('rgb(0,255,0)');
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // integer RGBA notation
+     * fill('rgba(0,255,0, 0.25)');
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // percentage RGB notation
+     * fill('rgb(100%,0%,10%)');
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // percentage RGBA notation
+     * fill('rgba(100%,0%,100%,0.5)');
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // p5 Color object
+     * fill(color(0, 0, 255));
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     * @alt
+     * 60x60 dark charcoal grey rect with black outline in center of canvas.
+     * 60x60 yellow rect with black outline in center of canvas.
+     * 60x60 royal blue rect with black outline in center of canvas.
+     * 60x60 red rect with black outline in center of canvas.
+     * 60x60 pink rect with black outline in center of canvas.
+     * 60x60 black rect with black outline in center of canvas.
+     * 60x60 light green rect with black outline in center of canvas.
+     * 60x60 soft green rect with black outline in center of canvas.
+     * 60x60 red rect with black outline in center of canvas.
+     * 60x60 dark fushcia rect with black outline in center of canvas.
+     * 60x60 blue rect with black outline in center of canvas.
+     */
+
+    /**
+     * @method fill
+     * @param  {String}        value   a color string
+     * @param  {Number}        [alpha]
+     * @chainable
+     */
+
+    /**
+     * @method fill
+     * @param  {Number[]}      values  an array containing the red,green,blue &
+     *                                 and alpha components of the color
+     * @chainable
+     */
+
+    /**
+     * @method fill
+     * @param  {p5.Color}      color   the fill color
+     * @chainable
+     */
+    p5.prototype.fill = function() {
+      this._renderer._setProperty('_fillSet', true);
+      this._renderer._setProperty('_doFill', true);
+      this._renderer.fill.apply(this._renderer, arguments);
+      return this;
+    };
+
+    /**
+     * Disables filling geometry. If both noStroke() and noFill() are called,
+     * nothing will be drawn to the screen.
+     *
+     * @method noFill
+     * @chainable
+     * @example
+     * 

+     * 
+     * rect(15, 10, 55, 55);
+     * noFill();
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(0);
+     *   noFill();
+     *   stroke(100, 100, 240);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   box(45, 45, 45);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * white rect top middle and noFill rect center. Both 60x60 with black outlines.
+     * black canvas with purple cube wireframe spinning
+     */
+    p5.prototype.noFill = function() {
+      this._renderer._setProperty('_doFill', false);
+      return this;
+    };
+
+    /**
+     * Disables drawing the stroke (outline). If both noStroke() and noFill()
+     * are called, nothing will be drawn to the screen.
+     *
+     * @method noStroke
+     * @chainable
+     * @example
+     * 

+     * 
+     * noStroke();
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(0);
+     *   noStroke();
+     *   fill(240, 150, 150);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   box(45, 45, 45);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 60x60 white rect at center. no outline.
+     * black canvas with pink cube spinning
+     */
+    p5.prototype.noStroke = function() {
+      this._renderer._setProperty('_doStroke', false);
+      return this;
+    };
+
+    /**
+     * Sets the color used to draw lines and borders around shapes. This color
+     * is either specified in terms of the RGB or HSB color depending on the
+     * current colorMode() (the default color space is RGB, with each value in
+     * the range from 0 to 255). The alpha range by default is also 0 to 255.
+     * 


+     * If a single string argument is provided, RGB, RGBA and Hex CSS color
+     * strings and all named color strings are supported. In this case, an alpha
+     * number value as a second argument is not supported, the RGBA form should be
+     * used.
+     * 


+     * A p5 Color object can also be provided to set the stroke color.
+     *
+     *
+     * @method stroke
+     * @param  {Number}        v1      red or hue value relative to
+     *                                 the current color range
+     * @param  {Number}        v2      green or saturation value
+     *                                 relative to the current color range
+     * @param  {Number}        v3      blue or brightness value
+     *                                 relative to the current color range
+     * @param  {Number}        [alpha]
+     * @chainable
+     *
+     * @example
+     * 

+     * 
+     * // Grayscale integer value
+     * strokeWeight(4);
+     * stroke(51);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // R, G & B integer values
+     * stroke(255, 204, 0);
+     * strokeWeight(4);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // H, S & B integer values
+     * colorMode(HSB);
+     * strokeWeight(4);
+     * stroke(255, 204, 100);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Named SVG/CSS color string
+     * stroke('red');
+     * strokeWeight(4);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // three-digit hexadecimal RGB notation
+     * stroke('#fae');
+     * strokeWeight(4);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // six-digit hexadecimal RGB notation
+     * stroke('#222222');
+     * strokeWeight(4);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // integer RGB notation
+     * stroke('rgb(0,255,0)');
+     * strokeWeight(4);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // integer RGBA notation
+     * stroke('rgba(0,255,0,0.25)');
+     * strokeWeight(4);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // percentage RGB notation
+     * stroke('rgb(100%,0%,10%)');
+     * strokeWeight(4);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // percentage RGBA notation
+     * stroke('rgba(100%,0%,100%,0.5)');
+     * strokeWeight(4);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // p5 Color object
+     * stroke(color(0, 0, 255));
+     * strokeWeight(4);
+     * rect(20, 20, 60, 60);
+     * 
+     * 

+     *
+     * @alt
+     * 60x60 white rect at center. Dark charcoal grey outline.
+     * 60x60 white rect at center. Yellow outline.
+     * 60x60 white rect at center. Royal blue outline.
+     * 60x60 white rect at center. Red outline.
+     * 60x60 white rect at center. Pink outline.
+     * 60x60 white rect at center. Black outline.
+     * 60x60 white rect at center. Bright green outline.
+     * 60x60 white rect at center. Soft green outline.
+     * 60x60 white rect at center. Red outline.
+     * 60x60 white rect at center. Dark fushcia outline.
+     * 60x60 white rect at center. Blue outline.
+     */
+
+    /**
+     * @method stroke
+     * @param  {String}        value   a color string
+     * @param  {Number}        [alpha]
+     * @chainable
+     */
+
+    /**
+     * @method stroke
+     * @param  {Number[]}      values  an array containing the red,green,blue &
+     *                                 and alpha components of the color
+     * @chainable
+     */
+
+    /**
+     * @method stroke
+     * @param  {p5.Color}      color   the stroke color
+     * @chainable
+     */
+
+    p5.prototype.stroke = function() {
+      this._renderer._setProperty('_strokeSet', true);
+      this._renderer._setProperty('_doStroke', true);
+      this._renderer.stroke.apply(this._renderer, arguments);
+      return this;
+    };
+
+    module.exports = p5;
+
+    },{"../core/constants":21,"../core/core":22,"./p5.Color":16}],18:[function(_dereq_,module,exports){
+    /**
+     * @module Shape
+     * @submodule 2D Primitives
+     * @for p5
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var constants = _dereq_('./constants');
+    var canvas = _dereq_('./canvas');
+    _dereq_('./error_helpers');
+
+    /**
+     * Draw an arc to the screen. If called with only x, y, w, h, start, and
+     * stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc
+     * will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The
+     * origin may be changed with the ellipseMode() function.


+     * Note that drawing a full circle (ex: 0 to TWO_PI) will appear blank
+     * because 0 and TWO_PI are the same position on the unit circle. The
+     * best way to handle this is by using the ellipse() function instead
+     * to create a closed ellipse, and to use the arc() function
+     * only to draw parts of an ellipse.
+     *
+     * @method arc
+     * @param  {Number} x      x-coordinate of the arc's ellipse
+     * @param  {Number} y      y-coordinate of the arc's ellipse
+     * @param  {Number} w      width of the arc's ellipse by default
+     * @param  {Number} h      height of the arc's ellipse by default
+     * @param  {Number} start  angle to start the arc, specified in radians
+     * @param  {Number} stop   angle to stop the arc, specified in radians
+     * @param  {Constant} [mode] optional parameter to determine the way of drawing
+     *                         the arc. either CHORD, PIE or OPEN
+     * @chainable
+     * @example
+     * 

+     * 
+     * arc(50, 55, 50, 50, 0, HALF_PI);
+     * noFill();
+     * arc(50, 55, 60, 60, HALF_PI, PI);
+     * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+     * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+     * 
+     * 

+     *
+     * 

+     * 
+     * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+     * 
+     * 

+     *
+     * 

+     * 
+     * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+     * 
+     * 

+     *
+     * 

+     * 
+     * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+     * 
+     * 

+     *
+     * 

+     * 
+     * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+     * 
+     * 

+     *
+     * @alt
+     *shattered outline of an ellipse with a quarter of a white circle bottom-right.
+     *white ellipse with top right quarter missing.
+     *white ellipse with black outline with top right missing.
+     *white ellipse with top right missing with black outline around shape.
+     *white ellipse with top right quarter missing with black outline around the shape.
+     *
+     */
+    p5.prototype.arc = function(x, y, w, h, start, stop, mode) {
+      p5._validateParameters('arc', arguments);
+      if (!this._renderer._doStroke && !this._renderer._doFill) {
+        return this;
+      }
+      if (this._angleMode === constants.DEGREES) {
+        start = this.radians(start);
+        stop = this.radians(stop);
+      }
+
+      // Make all angles positive...
+      while (start < 0) {
+        start += constants.TWO_PI;
+      }
+      while (stop < 0) {
+        stop += constants.TWO_PI;
+      }
+      // ...and confine them to the interval [0,TWO_PI).
+      start %= constants.TWO_PI;
+      stop %= constants.TWO_PI;
+
+      // account for full circle
+      if (stop === start) {
+        stop += constants.TWO_PI;
+      }
+
+      // Adjust angles to counter linear scaling.
+      if (start <= constants.HALF_PI) {
+        start = Math.atan(w / h * Math.tan(start));
+      } else if (start > constants.HALF_PI && start <= 3 * constants.HALF_PI) {
+        start = Math.atan(w / h * Math.tan(start)) + constants.PI;
+      } else {
+        start = Math.atan(w / h * Math.tan(start)) + constants.TWO_PI;
+      }
+      if (stop <= constants.HALF_PI) {
+        stop = Math.atan(w / h * Math.tan(stop));
+      } else if (stop > constants.HALF_PI && stop <= 3 * constants.HALF_PI) {
+        stop = Math.atan(w / h * Math.tan(stop)) + constants.PI;
+      } else {
+        stop = Math.atan(w / h * Math.tan(stop)) + constants.TWO_PI;
+      }
+
+      // Exceed the interval if necessary in order to preserve the size and
+      // orientation of the arc.
+      if (start > stop) {
+        stop += constants.TWO_PI;
+      }
+      // p5 supports negative width and heights for ellipses
+      w = Math.abs(w);
+      h = Math.abs(h);
+      this._renderer.arc(x, y, w, h, start, stop, mode);
+      return this;
+    };
+
+    /**
+     * Draws an ellipse (oval) to the screen. An ellipse with equal width and
+     * height is a circle. By default, the first two parameters set the location,
+     * and the third and fourth parameters set the shape's width and height. If
+     * no height is specified, the value of width is used for both the width and
+     * height. If a negative height or width is specified, the absolute value is taken.
+     * The origin may be changed with the ellipseMode() function.
+     *
+     * @method ellipse
+     * @param  {Number} x x-coordinate of the ellipse.
+     * @param  {Number} y y-coordinate of the ellipse.
+     * @param  {Number} w width of the ellipse.
+     * @param  {Number} [h] height of the ellipse.
+     * @chainable
+     * @example
+     * 

+     * 
+     * ellipse(56, 46, 55, 55);
+     * 
+     * 

+     *
+     * @alt
+     *white ellipse with black outline in middle-right of canvas that is 55x55.
+     *
+     */
+    /**
+     * @method ellipse
+     * @param  {Number} x
+     * @param  {Number} y
+     * @param  {Number} w
+     * @param  {Number} h
+     * @param  {Integer} detailX number of segments in the x-direction
+     * @param  {Integer} [detailY] number of segments in the y-direction
+     */
+    p5.prototype.ellipse = function(x, y, w, h, detailX, detailY) {
+      p5._validateParameters('ellipse', arguments);
+
+      // p5 supports negative width and heights for rects
+      if (w < 0) {
+        w = Math.abs(w);
+      }
+
+      if (typeof h === 'undefined') {
+        // Duplicate 3rd argument if only 3 given.
+        h = w;
+      } else if (h < 0) {
+        h = Math.abs(h);
+      }
+
+      if (this._renderer._doStroke || this._renderer._doFill) {
+        var vals = canvas.modeAdjust(x, y, w, h, this._renderer._ellipseMode);
+        this._renderer.ellipse([vals.x, vals.y, vals.w, vals.h, detailX, detailY]);
+      }
+
+      return this;
+    };
+    /**
+     * Draws a line (a direct path between two points) to the screen. The version
+     * of line() with four parameters draws the line in 2D. To color a line, use
+     * the stroke() function. A line cannot be filled, therefore the fill()
+     * function will not affect the color of a line. 2D lines are drawn with a
+     * width of one pixel by default, but this can be changed with the
+     * strokeWeight() function.
+     *
+     * @method line
+     * @param  {Number} x1 the x-coordinate of the first point
+     * @param  {Number} y1 the y-coordinate of the first point
+     * @param  {Number} x2 the x-coordinate of the second point
+     * @param  {Number} y2 the y-coordinate of the second point
+     * @chainable
+     * @example
+     * 

+     * 
+     * line(30, 20, 85, 75);
+     * 
+     * 

+     *
+     * 

+     * 
+     * line(30, 20, 85, 20);
+     * stroke(126);
+     * line(85, 20, 85, 75);
+     * stroke(255);
+     * line(85, 75, 30, 75);
+     * 
+     * 

+     *
+     * @alt
+     *line 78 pixels long running from mid-top to bottom-right of canvas.
+     *3 lines of various stroke sizes. Form top, bottom and right sides of a square.
+     *
+     */
+    /**
+     * @method line
+     * @param  {Number} x1
+     * @param  {Number} y1
+     * @param  {Number} z1 the z-coordinate of the first point
+     * @param  {Number} x2
+     * @param  {Number} y2
+     * @param  {Number} z2 the z-coordinate of the second point
+     * @chainable
+     */
+    p5.prototype.line = function() {
+      p5._validateParameters('line', arguments);
+
+      if (this._renderer._doStroke) {
+        this._renderer.line.apply(this._renderer, arguments);
+      }
+
+      return this;
+    };
+
+    /**
+     * Draws a point, a coordinate in space at the dimension of one pixel.
+     * The first parameter is the horizontal value for the point, the second
+     * value is the vertical value for the point. The color of the point is
+     * determined by the current stroke.
+     *
+     * @method point
+     * @param  {Number} x the x-coordinate
+     * @param  {Number} y the y-coordinate
+     * @param  {Number} [z] the z-coordinate (for WEBGL mode)
+     * @chainable
+     * @example
+     * 

+     * 
+     * point(30, 20);
+     * point(85, 20);
+     * point(85, 75);
+     * point(30, 75);
+     * 
+     * 

+     *
+     * @alt
+     *4 points centered in the middle-right of the canvas.
+     *
+     */
+    p5.prototype.point = function() {
+      p5._validateParameters('point', arguments);
+
+      if (this._renderer._doStroke) {
+        this._renderer.point.apply(this._renderer, arguments);
+      }
+
+      return this;
+    };
+
+    /**
+     * Draw a quad. A quad is a quadrilateral, a four sided polygon. It is
+     * similar to a rectangle, but the angles between its edges are not
+     * constrained to ninety degrees. The first pair of parameters (x1,y1)
+     * sets the first vertex and the subsequent pairs should proceed
+     * clockwise or counter-clockwise around the defined shape.
+     *
+     * @method quad
+     * @param {Number} x1 the x-coordinate of the first point
+     * @param {Number} y1 the y-coordinate of the first point
+     * @param {Number} x2 the x-coordinate of the second point
+     * @param {Number} y2 the y-coordinate of the second point
+     * @param {Number} x3 the x-coordinate of the third point
+     * @param {Number} y3 the y-coordinate of the third point
+     * @param {Number} x4 the x-coordinate of the fourth point
+     * @param {Number} y4 the y-coordinate of the fourth point
+     * @chainable
+     * @example
+     * 

+     * 
+     * quad(38, 31, 86, 20, 69, 63, 30, 76);
+     * 
+     * 

+     *
+     * @alt
+     *irregular white quadrilateral shape with black outline mid-right of canvas.
+     *
+     */
+    /**
+     * @method quad
+     * @param {Number} x1
+     * @param {Number} y1
+     * @param {Number} z1
+     * @param {Number} x2
+     * @param {Number} y2
+     * @param {Number} z2
+     * @param {Number} x3
+     * @param {Number} y3
+     * @param {Number} z3
+     * @param {Number} x4
+     * @param {Number} y4
+     * @param {Number} z4
+     * @chainable
+     */
+    p5.prototype.quad = function() {
+      p5._validateParameters('quad', arguments);
+
+      if (this._renderer._doStroke || this._renderer._doFill) {
+        this._renderer.quad.apply(this._renderer, arguments);
+      }
+
+      return this;
+    };
+
+    /**
+     * Draws a rectangle to the screen. A rectangle is a four-sided shape with
+     * every angle at ninety degrees. By default, the first two parameters set
+     * the location of the upper-left corner, the third sets the width, and the
+     * fourth sets the height. The way these parameters are interpreted, however,
+     * may be changed with the rectMode() function.
+     * 


+     * The fifth, sixth, seventh and eighth parameters, if specified,
+     * determine corner radius for the top-right, top-left, lower-right and
+     * lower-left corners, respectively. An omitted corner radius parameter is set
+     * to the value of the previously specified radius value in the parameter list.
+     *
+     * @method rect
+     * @param  {Number} x  x-coordinate of the rectangle.
+     * @param  {Number} y  y-coordinate of the rectangle.
+     * @param  {Number} w  width of the rectangle.
+     * @param  {Number} h  height of the rectangle.
+     * @param  {Number} [tl] optional radius of top-left corner.
+     * @param  {Number} [tr] optional radius of top-right corner.
+     * @param  {Number} [br] optional radius of bottom-right corner.
+     * @param  {Number} [bl] optional radius of bottom-left corner.
+     * @chainable
+     * @example
+     * 

+     * 
+     * // Draw a rectangle at location (30, 20) with a width and height of 55.
+     * rect(30, 20, 55, 55);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Draw a rectangle with rounded corners, each having a radius of 20.
+     * rect(30, 20, 55, 55, 20);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Draw a rectangle with rounded corners having the following radii:
+     * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
+     * rect(30, 20, 55, 55, 20, 15, 10, 5);
+     * 
+     * 

+     *
+     * @alt
+     * 55x55 white rect with black outline in mid-right of canvas.
+     * 55x55 white rect with black outline and rounded edges in mid-right of canvas.
+     * 55x55 white rect with black outline and rounded edges of different radii.
+     */
+    /**
+     * @method rect
+     * @param  {Number} x
+     * @param  {Number} y
+     * @param  {Number} w
+     * @param  {Number} h
+     * @param  {Integer} [detailX] number of segments in the x-direction
+     * @param  {Integer} [detailY] number of segments in the y-direction
+     * @chainable
+     */
+    p5.prototype.rect = function(x, y, w, h, detailX, detailY) {
+      p5._validateParameters('rect', arguments);
+
+      if (this._renderer._doStroke || this._renderer._doFill) {
+        var vals = canvas.modeAdjust(x, y, w, h, this._renderer._rectMode);
+        this._renderer.rect([vals.x, vals.y, vals.w, vals.h, detailX, detailY]);
+      }
+
+      return this;
+    };
+
+    /**
+     * A triangle is a plane created by connecting three points. The first two
+     * arguments specify the first point, the middle two arguments specify the
+     * second point, and the last two arguments specify the third point.
+     *
+     * @method triangle
+     * @param  {Number} x1 x-coordinate of the first point
+     * @param  {Number} y1 y-coordinate of the first point
+     * @param  {Number} x2 x-coordinate of the second point
+     * @param  {Number} y2 y-coordinate of the second point
+     * @param  {Number} x3 x-coordinate of the third point
+     * @param  {Number} y3 y-coordinate of the third point
+     * @chainable
+     * @example
+     * 

+     * 
+     * triangle(30, 75, 58, 20, 86, 75);
+     * 
+     * 

+     *
+     *@alt
+     * white triangle with black outline in mid-right of canvas.
+     *
+     */
+    p5.prototype.triangle = function() {
+      p5._validateParameters('triangle', arguments);
+
+      if (this._renderer._doStroke || this._renderer._doFill) {
+        this._renderer.triangle(arguments);
+      }
+
+      return this;
+    };
+
+    module.exports = p5;
+
+    },{"./canvas":20,"./constants":21,"./core":22,"./error_helpers":25}],19:[function(_dereq_,module,exports){
+    /**
+     * @module Shape
+     * @submodule Attributes
+     * @for p5
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var constants = _dereq_('./constants');
+
+    /**
+     * Modifies the location from which ellipses are drawn by changing the way
+     * in which parameters given to ellipse() are interpreted.
+     * 


+     * The default mode is ellipseMode(CENTER), which interprets the first two
+     * parameters of ellipse() as the shape's center point, while the third and
+     * fourth parameters are its width and height.
+     * 


+     * ellipseMode(RADIUS) also uses the first two parameters of ellipse() as
+     * the shape's center point, but uses the third and fourth parameters to
+     * specify half of the shapes's width and height.
+     * 


+     * ellipseMode(CORNER) interprets the first two parameters of ellipse() as
+     * the upper-left corner of the shape, while the third and fourth parameters
+     * are its width and height.
+     * 


+     * ellipseMode(CORNERS) interprets the first two parameters of ellipse() as
+     * the location of one corner of the ellipse's bounding box, and the third
+     * and fourth parameters as the location of the opposite corner.
+     * 


+     * The parameter must be written in ALL CAPS because Javascript is a
+     * case-sensitive language.
+     *
+     * @method ellipseMode
+     * @param  {Constant} mode either CENTER, RADIUS, CORNER, or CORNERS
+     * @chainable
+     * @example
+     * 

+     * 
+     * ellipseMode(RADIUS); // Set ellipseMode to RADIUS
+     * fill(255); // Set fill to white
+     * ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode
+     *
+     * ellipseMode(CENTER); // Set ellipseMode to CENTER
+     * fill(100); // Set fill to gray
+     * ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode
+     * 
+     * 

+     *
+     * 

+     * 
+     * ellipseMode(CORNER); // Set ellipseMode is CORNER
+     * fill(255); // Set fill to white
+     * ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode
+     *
+     * ellipseMode(CORNERS); // Set ellipseMode to CORNERS
+     * fill(100); // Set fill to gray
+     * ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
+     * 
+     * 

+     *
+     * @alt
+     * 60x60 white ellipse and 30x30 grey ellipse with black outlines at center.
+     * 60x60 white ellipse @center and 30x30 grey ellipse top-right, black outlines.
+     *
+     */
+    p5.prototype.ellipseMode = function(m) {
+      p5._validateParameters('ellipseMode', arguments);
+      if (
+        m === constants.CORNER ||
+        m === constants.CORNERS ||
+        m === constants.RADIUS ||
+        m === constants.CENTER
+      ) {
+        this._renderer._ellipseMode = m;
+      }
+      return this;
+    };
+
+    /**
+     * Draws all geometry with jagged (aliased) edges. Note that smooth() is
+     * active by default, so it is necessary to call noSmooth() to disable
+     * smoothing of geometry, images, and fonts.
+     *
+     * @method noSmooth
+     * @chainable
+     * @example
+     * 

+     * 
+     * background(0);
+     * noStroke();
+     * smooth();
+     * ellipse(30, 48, 36, 36);
+     * noSmooth();
+     * ellipse(70, 48, 36, 36);
+     * 
+     * 

+     *
+     * @alt
+     * 2 pixelated 36x36 white ellipses to left & right of center, black background
+     *
+     */
+    p5.prototype.noSmooth = function() {
+      this._renderer.noSmooth();
+      return this;
+    };
+
+    /**
+     * Modifies the location from which rectangles are drawn by changing the way
+     * in which parameters given to rect() are interpreted.
+     * 


+     * The default mode is rectMode(CORNER), which interprets the first two
+     * parameters of rect() as the upper-left corner of the shape, while the
+     * third and fourth parameters are its width and height.
+     * 


+     * rectMode(CORNERS) interprets the first two parameters of rect() as the
+     * location of one corner, and the third and fourth parameters as the
+     * location of the opposite corner.
+     * 


+     * rectMode(CENTER) interprets the first two parameters of rect() as the
+     * shape's center point, while the third and fourth parameters are its
+     * width and height.
+     * 


+     * rectMode(RADIUS) also uses the first two parameters of rect() as the
+     * shape's center point, but uses the third and fourth parameters to specify
+     * half of the shapes's width and height.
+     * 


+     * The parameter must be written in ALL CAPS because Javascript is a
+     * case-sensitive language.
+     *
+     * @method rectMode
+     * @param  {Constant} mode either CORNER, CORNERS, CENTER, or RADIUS
+     * @chainable
+     * @example
+     * 

+     * 
+     * rectMode(CORNER); // Default rectMode is CORNER
+     * fill(255); // Set fill to white
+     * rect(25, 25, 50, 50); // Draw white rect using CORNER mode
+     *
+     * rectMode(CORNERS); // Set rectMode to CORNERS
+     * fill(100); // Set fill to gray
+     * rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode
+     * 
+     * 

+     *
+     * 

+     * 
+     * rectMode(RADIUS); // Set rectMode to RADIUS
+     * fill(255); // Set fill to white
+     * rect(50, 50, 30, 30); // Draw white rect using RADIUS mode
+     *
+     * rectMode(CENTER); // Set rectMode to CENTER
+     * fill(100); // Set fill to gray
+     * rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 white rect at center and 25x25 grey rect in the top left of the other.
+     * 50x50 white rect at center and 25x25 grey rect in the center of the other.
+     *
+     */
+    p5.prototype.rectMode = function(m) {
+      p5._validateParameters('rectMode', arguments);
+      if (
+        m === constants.CORNER ||
+        m === constants.CORNERS ||
+        m === constants.RADIUS ||
+        m === constants.CENTER
+      ) {
+        this._renderer._rectMode = m;
+      }
+      return this;
+    };
+
+    /**
+     * Draws all geometry with smooth (anti-aliased) edges. smooth() will also
+     * improve image quality of resized images. Note that smooth() is active by
+     * default; noSmooth() can be used to disable smoothing of geometry,
+     * images, and fonts.
+     *
+     * @method smooth
+     * @chainable
+     * @example
+     * 

+     * 
+     * background(0);
+     * noStroke();
+     * smooth();
+     * ellipse(30, 48, 36, 36);
+     * noSmooth();
+     * ellipse(70, 48, 36, 36);
+     * 
+     * 

+     *
+     * @alt
+     * 2 pixelated 36x36 white ellipses one left one right of center. On black.
+     *
+     */
+    p5.prototype.smooth = function() {
+      this._renderer.smooth();
+      return this;
+    };
+
+    /**
+     * Sets the style for rendering line endings. These ends are either squared,
+     * extended, or rounded, each of which specified with the corresponding
+     * parameters: SQUARE, PROJECT, and ROUND. The default cap is ROUND.
+     *
+     * @method strokeCap
+     * @param  {Constant} cap either SQUARE, PROJECT, or ROUND
+     * @chainable
+     * @example
+     * 

+     * 
+     * strokeWeight(12.0);
+     * strokeCap(ROUND);
+     * line(20, 30, 80, 30);
+     * strokeCap(SQUARE);
+     * line(20, 50, 80, 50);
+     * strokeCap(PROJECT);
+     * line(20, 70, 80, 70);
+     * 
+     * 

+     *
+     * @alt
+     * 3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.
+     *
+     */
+    p5.prototype.strokeCap = function(cap) {
+      p5._validateParameters('strokeCap', arguments);
+      if (
+        cap === constants.ROUND ||
+        cap === constants.SQUARE ||
+        cap === constants.PROJECT
+      ) {
+        this._renderer.strokeCap(cap);
+      }
+      return this;
+    };
+
+    /**
+     * Sets the style of the joints which connect line segments. These joints
+     * are either mitered, beveled, or rounded and specified with the
+     * corresponding parameters MITER, BEVEL, and ROUND. The default joint is
+     * MITER.
+     *
+     * @method strokeJoin
+     * @param  {Constant} join either MITER, BEVEL, ROUND
+     * @chainable
+     * @example
+     * 

+     * 
+     * noFill();
+     * strokeWeight(10.0);
+     * strokeJoin(MITER);
+     * beginShape();
+     * vertex(35, 20);
+     * vertex(65, 50);
+     * vertex(35, 80);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * noFill();
+     * strokeWeight(10.0);
+     * strokeJoin(BEVEL);
+     * beginShape();
+     * vertex(35, 20);
+     * vertex(65, 50);
+     * vertex(35, 80);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * noFill();
+     * strokeWeight(10.0);
+     * strokeJoin(ROUND);
+     * beginShape();
+     * vertex(35, 20);
+     * vertex(65, 50);
+     * vertex(35, 80);
+     * endShape();
+     * 
+     * 

+     *
+     * @alt
+     * Right-facing arrowhead shape with pointed tip in center of canvas.
+     * Right-facing arrowhead shape with flat tip in center of canvas.
+     * Right-facing arrowhead shape with rounded tip in center of canvas.
+     *
+     */
+    p5.prototype.strokeJoin = function(join) {
+      p5._validateParameters('strokeJoin', arguments);
+      if (
+        join === constants.ROUND ||
+        join === constants.BEVEL ||
+        join === constants.MITER
+      ) {
+        this._renderer.strokeJoin(join);
+      }
+      return this;
+    };
+
+    /**
+     * Sets the width of the stroke used for lines, points, and the border
+     * around shapes. All widths are set in units of pixels.
+     *
+     * @method strokeWeight
+     * @param  {Number} weight the weight (in pixels) of the stroke
+     * @chainable
+     * @example
+     * 

+     * 
+     * strokeWeight(1); // Default
+     * line(20, 20, 80, 20);
+     * strokeWeight(4); // Thicker
+     * line(20, 40, 80, 40);
+     * strokeWeight(10); // Beastly
+     * line(20, 70, 80, 70);
+     * 
+     * 

+     *
+     * @alt
+     * 3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.
+     *
+     */
+    p5.prototype.strokeWeight = function(w) {
+      p5._validateParameters('strokeWeight', arguments);
+      this._renderer.strokeWeight(w);
+      return this;
+    };
+
+    module.exports = p5;
+
+    },{"./constants":21,"./core":22}],20:[function(_dereq_,module,exports){
+    /**
+     * @requires constants
+     */
+
+    'use strict';
+
+    var constants = _dereq_('./constants');
+
+    module.exports = {
+      modeAdjust: function(a, b, c, d, mode) {
+        if (mode === constants.CORNER) {
+          return { x: a, y: b, w: c, h: d };
+        } else if (mode === constants.CORNERS) {
+          return { x: a, y: b, w: c - a, h: d - b };
+        } else if (mode === constants.RADIUS) {
+          return { x: a - c, y: b - d, w: 2 * c, h: 2 * d };
+        } else if (mode === constants.CENTER) {
+          return { x: a - c * 0.5, y: b - d * 0.5, w: c, h: d };
+        }
+      },
+
+      arcModeAdjust: function(a, b, c, d, mode) {
+        if (mode === constants.CORNER) {
+          return { x: a + c * 0.5, y: b + d * 0.5, w: c, h: d };
+        } else if (mode === constants.CORNERS) {
+          return { x: a, y: b, w: c + a, h: d + b };
+        } else if (mode === constants.RADIUS) {
+          return { x: a, y: b, w: 2 * c, h: 2 * d };
+        } else if (mode === constants.CENTER) {
+          return { x: a, y: b, w: c, h: d };
+        }
+      }
+    };
+
+    },{"./constants":21}],21:[function(_dereq_,module,exports){
+    /**
+     * @module Constants
+     * @submodule Constants
+     * @for p5
+     */
+
+    'use strict';
+
+    var PI = Math.PI;
+
+    module.exports = {
+      // GRAPHICS RENDERER
+      /**
+       * @property {String} P2D
+       * @final
+       */
+      P2D: 'p2d',
+      /**
+       * @property {String} WEBGL
+       * @final
+       */
+      WEBGL: 'webgl',
+
+      // ENVIRONMENT
+      ARROW: 'default',
+      CROSS: 'crosshair',
+      HAND: 'pointer',
+      MOVE: 'move',
+      TEXT: 'text',
+      WAIT: 'wait',
+
+      // TRIGONOMETRY
+
+      /**
+       * HALF_PI is a mathematical constant with the value
+       * 1.57079632679489661923. It is half the ratio of the
+       * circumference of a circle to its diameter. It is useful in
+       * combination with the trigonometric functions sin() and cos().
+       *
+       * @property {Number} HALF_PI
+       * @final
+       *
+       * @example
+       * 

+       * arc(50, 50, 80, 80, 0, HALF_PI);
+       * 

+       *
+       * @alt
+       * 80x80 white quarter-circle with curve toward bottom right of canvas.
+       *
+       */
+      HALF_PI: PI / 2,
+      /**
+       * PI is a mathematical constant with the value
+       * 3.14159265358979323846. It is the ratio of the circumference
+       * of a circle to its diameter. It is useful in combination with
+       * the trigonometric functions sin() and cos().
+       *
+       * @property {Number} PI
+       * @final
+       *
+       * @example
+       * 

+       * arc(50, 50, 80, 80, 0, PI);
+       * 

+       *
+       * @alt
+       * white half-circle with curve toward bottom of canvas.
+       *
+       */
+      PI: PI,
+      /**
+       * QUARTER_PI is a mathematical constant with the value 0.7853982.
+       * It is one quarter the ratio of the circumference of a circle to
+       * its diameter. It is useful in combination with the trigonometric
+       * functions sin() and cos().
+       *
+       * @property {Number} QUARTER_PI
+       * @final
+       *
+       * @example
+       * 

+       * arc(50, 50, 80, 80, 0, QUARTER_PI);
+       * 

+       *
+       * @alt
+       * white eighth-circle rotated about 40 degrees with curve bottom right canvas.
+       *
+       */
+      QUARTER_PI: PI / 4,
+      /**
+       * TAU is an alias for TWO_PI, a mathematical constant with the
+       * value 6.28318530717958647693. It is twice the ratio of the
+       * circumference of a circle to its diameter. It is useful in
+       * combination with the trigonometric functions sin() and cos().
+       *
+       * @property {Number} TAU
+       * @final
+       *
+       * @example
+       * 

+       * arc(50, 50, 80, 80, 0, TAU);
+       * 

+       *
+       * @alt
+       * 80x80 white ellipse shape in center of canvas.
+       *
+       */
+      TAU: PI * 2,
+      /**
+       * TWO_PI is a mathematical constant with the value
+       * 6.28318530717958647693. It is twice the ratio of the
+       * circumference of a circle to its diameter. It is useful in
+       * combination with the trigonometric functions sin() and cos().
+       *
+       * @property {Number} TWO_PI
+       * @final
+       *
+       * @example
+       * 

+       * arc(50, 50, 80, 80, 0, TWO_PI);
+       * 

+       *
+       * @alt
+       * 80x80 white ellipse shape in center of canvas.
+       *
+       */
+      TWO_PI: PI * 2,
+      /**
+       * Constant to be used with angleMode() function, to set the mode which
+       * p5.js interprates and calculates angles (either DEGREES or RADIANS).
+       * @property {String} DEGREES
+       * @final
+       *
+       * @example
+       * 

+       * function setup() {
+       *   angleMode(DEGREES);
+       * }
+       * 

+       */
+      DEGREES: 'degrees',
+      /**
+       * Constant to be used with angleMode() function, to set the mode which
+       * p5.js interprates and calculates angles (either RADIANS or DEGREES).
+       * @property {String} RADIANS
+       * @final
+       *
+       * @example
+       * 

+       * function setup() {
+       *   angleMode(RADIANS);
+       * }
+       * 

+       */
+      RADIANS: 'radians',
+      DEG_TO_RAD: PI / 180.0,
+      RAD_TO_DEG: 180.0 / PI,
+
+      // SHAPE
+      /**
+       * @property {String} CORNER
+       * @final
+       */
+      CORNER: 'corner',
+      /**
+       * @property {String} CORNERS
+       * @final
+       */
+      CORNERS: 'corners',
+      /**
+       * @property {String} RADIUS
+       * @final
+       */
+      RADIUS: 'radius',
+      /**
+       * @property {String} RIGHT
+       * @final
+       */
+      RIGHT: 'right',
+      /**
+       * @property {String} LEFT
+       * @final
+       */
+      LEFT: 'left',
+      /**
+       * @property {String} CENTER
+       * @final
+       */
+      CENTER: 'center',
+      /**
+       * @property {String} TOP
+       * @final
+       */
+      TOP: 'top',
+      /**
+       * @property {String} BOTTOM
+       * @final
+       */
+      BOTTOM: 'bottom',
+      /**
+       * @property {String} BASELINE
+       * @final
+       * @default alphabetic
+       */
+      BASELINE: 'alphabetic',
+      /**
+       * @property {Number} POINTS
+       * @final
+       * @default 0x0000
+       */
+      POINTS: 0x0000,
+      /**
+       * @property {Number} LINES
+       * @final
+       * @default 0x0001
+       */
+      LINES: 0x0001,
+      /**
+       * @property {Number} LINE_STRIP
+       * @final
+       * @default 0x0003
+       */
+      LINE_STRIP: 0x0003,
+      /**
+       * @property {Number} LINE_LOOP
+       * @final
+       * @default 0x0002
+       */
+      LINE_LOOP: 0x0002,
+      /**
+       * @property {Number} TRIANGLES
+       * @final
+       * @default 0x0004
+       */
+      TRIANGLES: 0x0004,
+      /**
+       * @property {Number} TRIANGLE_FAN
+       * @final
+       * @default 0x0006
+       */
+      TRIANGLE_FAN: 0x0006,
+      /**
+       * @property {Number} TRIANGLE_STRIP
+       * @final
+       * @default 0x0005
+       */
+      TRIANGLE_STRIP: 0x0005,
+      /**
+       * @property {String} QUADS
+       * @final
+       */
+      QUADS: 'quads',
+      /**
+       * @property {String} QUAD_STRIP
+       * @final
+       * @default quad_strip
+       */
+      QUAD_STRIP: 'quad_strip',
+      /**
+       * @property {String} CLOSE
+       * @final
+       */
+      CLOSE: 'close',
+      /**
+       * @property {String} OPEN
+       * @final
+       */
+      OPEN: 'open',
+      /**
+       * @property {String} CHORD
+       * @final
+       */
+      CHORD: 'chord',
+      /**
+       * @property {String} PIE
+       * @final
+       */
+      PIE: 'pie',
+      /**
+       * @property {String} PROJECT
+       * @final
+       * @default square
+       */
+      PROJECT: 'square', // PEND: careful this is counterintuitive
+      /**
+       * @property {String} SQUARE
+       * @final
+       * @default butt
+       */
+      SQUARE: 'butt',
+      /**
+       * @property {String} ROUND
+       * @final
+       */
+      ROUND: 'round',
+      /**
+       * @property {String} BEVEL
+       * @final
+       */
+      BEVEL: 'bevel',
+      /**
+       * @property {String} MITER
+       * @final
+       */
+      MITER: 'miter',
+
+      // COLOR
+      /**
+       * @property {String} RGB
+       * @final
+       */
+      RGB: 'rgb',
+      /**
+       * @property {String} HSB
+       * @final
+       */
+      HSB: 'hsb',
+      /**
+       * @property {String} HSL
+       * @final
+       */
+      HSL: 'hsl',
+
+      // DOM EXTENSION
+      AUTO: 'auto',
+
+      // INPUT
+      ALT: 18,
+      BACKSPACE: 8,
+      CONTROL: 17,
+      DELETE: 46,
+      DOWN_ARROW: 40,
+      ENTER: 13,
+      ESCAPE: 27,
+      LEFT_ARROW: 37,
+      OPTION: 18,
+      RETURN: 13,
+      RIGHT_ARROW: 39,
+      SHIFT: 16,
+      TAB: 9,
+      UP_ARROW: 38,
+
+      // RENDERING
+      /**
+       * @property {String} BLEND
+       * @final
+       * @default source-over
+       */
+      BLEND: 'source-over',
+      /**
+       * @property {String} ADD
+       * @final
+       * @default lighter
+       */
+      ADD: 'lighter',
+      //ADD: 'add', //
+      //SUBTRACT: 'subtract', //
+      /**
+       * @property {String} DARKEST
+       * @final
+       */
+      DARKEST: 'darken',
+      /**
+       * @property {String} LIGHTEST
+       * @final
+       * @default lighten
+       */
+      LIGHTEST: 'lighten',
+      /**
+       * @property {String} DIFFERENCE
+       * @final
+       */
+      DIFFERENCE: 'difference',
+      /**
+       * @property {String} EXCLUSION
+       * @final
+       */
+      EXCLUSION: 'exclusion',
+      /**
+       * @property {String} MULTIPLY
+       * @final
+       */
+      MULTIPLY: 'multiply',
+      /**
+       * @property {String} SCREEN
+       * @final
+       */
+      SCREEN: 'screen',
+      /**
+       * @property {String} REPLACE
+       * @final
+       * @default copy
+       */
+      REPLACE: 'copy',
+      /**
+       * @property {String} OVERLAY
+       * @final
+       */
+      OVERLAY: 'overlay',
+      /**
+       * @property {String} HARD_LIGHT
+       * @final
+       */
+      HARD_LIGHT: 'hard-light',
+      /**
+       * @property {String} SOFT_LIGHT
+       * @final
+       */
+      SOFT_LIGHT: 'soft-light',
+      /**
+       * @property {String} DODGE
+       * @final
+       * @default color-dodge
+       */
+      DODGE: 'color-dodge',
+      /**
+       * @property {String} BURN
+       * @final
+       * @default color-burn
+       */
+      BURN: 'color-burn',
+
+      // FILTERS
+      /**
+       * @property {String} THRESHOLD
+       * @final
+       */
+      THRESHOLD: 'threshold',
+      /**
+       * @property {String} GRAY
+       * @final
+       */
+      GRAY: 'gray',
+      /**
+       * @property {String} OPAQUE
+       * @final
+       */
+      OPAQUE: 'opaque',
+      /**
+       * @property {String} INVERT
+       * @final
+       */
+      INVERT: 'invert',
+      /**
+       * @property {String} POSTERIZE
+       * @final
+       */
+      POSTERIZE: 'posterize',
+      /**
+       * @property {String} DILATE
+       * @final
+       */
+      DILATE: 'dilate',
+      /**
+       * @property {String} ERODE
+       * @final
+       */
+      ERODE: 'erode',
+      /**
+       * @property {String} BLUR
+       * @final
+       */
+      BLUR: 'blur',
+
+      // TYPOGRAPHY
+      /**
+       * @property {String} NORMAL
+       * @final
+       */
+      NORMAL: 'normal',
+      /**
+       * @property {String} ITALIC
+       * @final
+       */
+      ITALIC: 'italic',
+      /**
+       * @property {String} BOLD
+       * @final
+       */
+      BOLD: 'bold',
+
+      // TYPOGRAPHY-INTERNAL
+      _DEFAULT_TEXT_FILL: '#000000',
+      _DEFAULT_LEADMULT: 1.25,
+      _CTX_MIDDLE: 'middle',
+
+      // VERTICES
+      LINEAR: 'linear',
+      QUADRATIC: 'quadratic',
+      BEZIER: 'bezier',
+      CURVE: 'curve',
+
+      // WEBGL DRAWMODES
+      STROKE: 'stroke',
+      FILL: 'fill',
+      TEXTURE: 'texture',
+      IMMEDIATE: 'immediate',
+
+      // DEVICE-ORIENTATION
+      /**
+       * @property {String} LANDSCAPE
+       * @final
+       */
+      LANDSCAPE: 'landscape',
+      /**
+       * @property {String} PORTRAIT
+       * @final
+       */
+      PORTRAIT: 'portrait',
+
+      // DEFAULTS
+      _DEFAULT_STROKE: '#000000',
+      _DEFAULT_FILL: '#FFFFFF'
+    };
+
+    },{}],22:[function(_dereq_,module,exports){
+    /**
+     * @module Structure
+     * @submodule Structure
+     * @for p5
+     * @requires constants
+     */
+
+    'use strict';
+
+    _dereq_('./shim');
+
+    // Core needs the PVariables object
+    var constants = _dereq_('./constants');
+
+    /**
+     * This is the p5 instance constructor.
+     *
+     * A p5 instance holds all the properties and methods related to
+     * a p5 sketch.  It expects an incoming sketch closure and it can also
+     * take an optional node parameter for attaching the generated p5 canvas
+     * to a node.  The sketch closure takes the newly created p5 instance as
+     * its sole argument and may optionally set preload(), setup(), and/or
+     * draw() properties on it for running a sketch.
+     *
+     * A p5 sketch can run in "global" or "instance" mode:
+     * "global"   - all properties and methods are attached to the window
+     * "instance" - all properties and methods are bound to this p5 object
+     *
+     * @class p5
+     * @constructor
+     * @param  {function}    sketch a closure that can set optional preload(),
+     *                              setup(), and/or draw() properties on the
+     *                              given p5 instance
+     * @param  {HTMLElement|Boolean} [node] element to attach canvas to, if a
+     *                                      boolean is passed in use it as sync
+     * @param  {Boolean}     [sync] start synchronously (optional)
+     * @return {p5}                 a p5 instance
+     */
+    var p5 = function(sketch, node, sync) {
+      if (typeof node === 'boolean' && typeof sync === 'undefined') {
+        sync = node;
+        node = undefined;
+      }
+
+      //////////////////////////////////////////////
+      // PUBLIC p5 PROPERTIES AND METHODS
+      //////////////////////////////////////////////
+
+      /**
+       * Called directly before setup(), the preload() function is used to handle
+       * asynchronous loading of external files. If a preload function is
+       * defined, setup() will wait until any load calls within have finished.
+       * Nothing besides load calls should be inside preload (loadImage,
+       * loadJSON, loadFont, loadStrings, etc).


+       * By default the text "loading..." will be displayed. To make your own
+       * loading page, include an HTML element with id "p5_loading" in your
+       * page. More information here.
+       *
+       * @method preload
+       * @example
+       * 

+       * var img;
+       * var c;
+       * function preload() {
+      // preload() runs once
+       *   img = loadImage('assets/laDefense.jpg');
+       * }
+       *
+       * function setup() {
+      // setup() waits until preload() is done
+       *   img.loadPixels();
+       *   // get color of middle pixel
+       *   c = img.get(img.width / 2, img.height / 2);
+       * }
+       *
+       * function draw() {
+       *   background(c);
+       *   image(img, 25, 25, 50, 50);
+       * }
+       * 

+       *
+       * @alt
+       * nothing displayed
+       *
+       */
+
+      /**
+       * The setup() function is called once when the program starts. It's used to
+       * define initial environment properties such as screen size and background
+       * color and to load media such as images and fonts as the program starts.
+       * There can only be one setup() function for each program and it shouldn't
+       * be called again after its initial execution.
+       * 


+       * Note: Variables declared within setup() are not accessible within other
+       * functions, including draw().
+       *
+       * @method setup
+       * @example
+       * 

+       * var a = 0;
+       *
+       * function setup() {
+       *   background(0);
+       *   noStroke();
+       *   fill(102);
+       * }
+       *
+       * function draw() {
+       *   rect(a++ % width, 10, 2, 80);
+       * }
+       * 

+       *
+       * @alt
+       * nothing displayed
+       *
+       */
+
+      /**
+       * Called directly after setup(), the draw() function continuously executes
+       * the lines of code contained inside its block until the program is stopped
+       * or noLoop() is called. Note if noLoop() is called in setup(), draw() will
+       * still be executed once before stopping. draw() is called automatically and
+       * should never be called explicitly.
+       * 


+       * It should always be controlled with noLoop(), redraw() and loop(). After
+       * noLoop() stops the code in draw() from executing, redraw() causes the
+       * code inside draw() to execute once, and loop() will cause the code
+       * inside draw() to resume executing continuously.
+       * 


+       * The number of times draw() executes in each second may be controlled with
+       * the frameRate() function.
+       * 


+       * There can only be one draw() function for each sketch, and draw() must
+       * exist if you want the code to run continuously, or to process events such
+       * as mousePressed(). Sometimes, you might have an empty call to draw() in
+       * your program, as shown in the above example.
+       * 


+       * It is important to note that the drawing coordinate system will be reset
+       * at the beginning of each draw() call. If any transformations are performed
+       * within draw() (ex: scale, rotate, translate, their effects will be
+       * undone at the beginning of draw(), so transformations will not accumulate
+       * over time. On the other hand, styling applied (ex: fill, stroke, etc) will
+       * remain in effect.
+       *
+       * @method draw
+       * @example
+       * 

+       * var yPos = 0;
+       * function setup() {
+      // setup() runs once
+       *   frameRate(30);
+       * }
+       * function draw() {
+      // draw() loops forever, until stopped
+       *   background(204);
+       *   yPos = yPos - 1;
+       *   if (yPos < 0) {
+       *     yPos = height;
+       *   }
+       *   line(0, yPos, width, yPos);
+       * }
+       * 

+       *
+       * @alt
+       * nothing displayed
+       *
+       */
+
+      //////////////////////////////////////////////
+      // PRIVATE p5 PROPERTIES AND METHODS
+      //////////////////////////////////////////////
+
+      this._setupDone = false;
+      // for handling hidpi
+      this._pixelDensity = Math.ceil(window.devicePixelRatio) || 1;
+      this._userNode = node;
+      this._curElement = null;
+      this._elements = [];
+      this._requestAnimId = 0;
+      this._preloadCount = 0;
+      this._isGlobal = false;
+      this._loop = true;
+      this._initializeInstanceVariables();
+      this._defaultCanvasSize = {
+        width: 100,
+        height: 100
+      };
+      this._events = {
+        // keep track of user-events for unregistering later
+        mousemove: null,
+        mousedown: null,
+        mouseup: null,
+        dragend: null,
+        dragover: null,
+        click: null,
+        dblclick: null,
+        mouseover: null,
+        mouseout: null,
+        keydown: null,
+        keyup: null,
+        keypress: null,
+        touchstart: null,
+        touchmove: null,
+        touchend: null,
+        resize: null,
+        blur: null
+      };
+
+      this._events.wheel = null;
+      this._loadingScreenId = 'p5_loading';
+
+      // Allows methods to be registered on an instance that
+      // are instance-specific.
+      this._registeredMethods = {};
+      var methods = Object.getOwnPropertyNames(p5.prototype._registeredMethods);
+      for (var i = 0; i < methods.length; i++) {
+        var prop = methods[i];
+        this._registeredMethods[prop] = p5.prototype._registeredMethods[
+          prop
+        ].slice();
+      }
+
+      if (window.DeviceOrientationEvent) {
+        this._events.deviceorientation = null;
+      }
+      if (window.DeviceMotionEvent && !window._isNodeWebkit) {
+        this._events.devicemotion = null;
+      }
+
+      this._start = function() {
+        // Find node if id given
+        if (this._userNode) {
+          if (typeof this._userNode === 'string') {
+            this._userNode = document.getElementById(this._userNode);
+          }
+        }
+
+        var userPreload = this.preload || window.preload; // look for "preload"
+        if (userPreload) {
+          // Setup loading screen
+          // Set loading scfeen into dom if not present
+          // Otherwise displays and removes user provided loading screen
+          var loadingScreen = document.getElementById(this._loadingScreenId);
+          if (!loadingScreen) {
+            loadingScreen = document.createElement('div');
+            loadingScreen.innerHTML = 'Loading...';
+            loadingScreen.style.position = 'absolute';
+            loadingScreen.id = this._loadingScreenId;
+            var node = this._userNode || document.body;
+            node.appendChild(loadingScreen);
+          }
+          // var methods = this._preloadMethods;
+          for (var method in this._preloadMethods) {
+            // default to p5 if no object defined
+            this._preloadMethods[method] = this._preloadMethods[method] || p5;
+            var obj = this._preloadMethods[method];
+            //it's p5, check if it's global or instance
+            if (obj === p5.prototype || obj === p5) {
+              obj = this._isGlobal ? window : this;
+            }
+            this._registeredPreloadMethods[method] = obj[method];
+            obj[method] = this._wrapPreload(obj, method);
+          }
+
+          userPreload();
+          this._runIfPreloadsAreDone();
+        } else {
+          this._setup();
+          this._runFrames();
+          this._draw();
+        }
+      }.bind(this);
+
+      this._runIfPreloadsAreDone = function() {
+        var context = this._isGlobal ? window : this;
+        if (context._preloadCount === 0) {
+          var loadingScreen = document.getElementById(context._loadingScreenId);
+          if (loadingScreen) {
+            loadingScreen.parentNode.removeChild(loadingScreen);
+          }
+          context._setup();
+          context._runFrames();
+          context._draw();
+        }
+      };
+
+      this._decrementPreload = function() {
+        var context = this._isGlobal ? window : this;
+        if (typeof context.preload === 'function') {
+          context._setProperty('_preloadCount', context._preloadCount - 1);
+          context._runIfPreloadsAreDone();
+        }
+      };
+
+      this._wrapPreload = function(obj, fnName) {
+        return function() {
+          //increment counter
+          this._incrementPreload();
+          //call original function
+          return this._registeredPreloadMethods[fnName].apply(obj, arguments);
+        }.bind(this);
+      };
+
+      this._incrementPreload = function() {
+        var context = this._isGlobal ? window : this;
+        context._setProperty('_preloadCount', context._preloadCount + 1);
+      };
+
+      this._setup = function() {
+        // Always create a default canvas.
+        // Later on if the user calls createCanvas, this default one
+        // will be replaced
+        this.createCanvas(
+          this._defaultCanvasSize.width,
+          this._defaultCanvasSize.height,
+          'p2d'
+        );
+
+        // return preload functions to their normal vals if switched by preload
+        var context = this._isGlobal ? window : this;
+        if (typeof context.preload === 'function') {
+          for (var f in this._preloadMethods) {
+            context[f] = this._preloadMethods[f][f];
+            if (context[f] && this) {
+              context[f] = context[f].bind(this);
+            }
+          }
+        }
+
+        // Short-circuit on this, in case someone used the library in "global"
+        // mode earlier
+        if (typeof context.setup === 'function') {
+          context.setup();
+        }
+
+        // unhide any hidden canvases that were created
+        var canvases = document.getElementsByTagName('canvas');
+        for (var i = 0; i < canvases.length; i++) {
+          var k = canvases[i];
+          if (k.dataset.hidden === 'true') {
+            k.style.visibility = '';
+            delete k.dataset.hidden;
+          }
+        }
+        this._setupDone = true;
+      }.bind(this);
+
+      this._draw = function() {
+        var now = window.performance.now();
+        var time_since_last = now - this._lastFrameTime;
+        var target_time_between_frames = 1000 / this._targetFrameRate;
+
+        // only draw if we really need to; don't overextend the browser.
+        // draw if we're within 5ms of when our next frame should paint
+        // (this will prevent us from giving up opportunities to draw
+        // again when it's really about time for us to do so). fixes an
+        // issue where the frameRate is too low if our refresh loop isn't
+        // in sync with the browser. note that we have to draw once even
+        // if looping is off, so we bypass the time delay if that
+        // is the case.
+        var epsilon = 5;
+        if (
+          !this._loop ||
+          time_since_last >= target_time_between_frames - epsilon
+        ) {
+          //mandatory update values(matrixs and stack)
+
+          this.redraw();
+          this._frameRate = 1000.0 / (now - this._lastFrameTime);
+          this._lastFrameTime = now;
+
+          // If the user is actually using mouse module, then update
+          // coordinates, otherwise skip. We can test this by simply
+          // checking if any of the mouse functions are available or not.
+          // NOTE : This reflects only in complete build or modular build.
+          if (typeof this._updateMouseCoords !== 'undefined') {
+            this._updateMouseCoords();
+          }
+        }
+
+        // get notified the next time the browser gives us
+        // an opportunity to draw.
+        if (this._loop) {
+          this._requestAnimId = window.requestAnimationFrame(this._draw);
+        }
+      }.bind(this);
+
+      this._runFrames = function() {
+        if (this._updateInterval) {
+          clearInterval(this._updateInterval);
+        }
+      }.bind(this);
+
+      this._setProperty = function(prop, value) {
+        this[prop] = value;
+        if (this._isGlobal) {
+          window[prop] = value;
+        }
+      }.bind(this);
+
+      /**
+       * Removes the entire p5 sketch. This will remove the canvas and any
+       * elements created by p5.js. It will also stop the draw loop and unbind
+       * any properties or methods from the window global scope. It will
+       * leave a variable p5 in case you wanted to create a new p5 sketch.
+       * If you like, you can set p5 = null to erase it. While all functions and
+       * variables and objects created by the p5 library will be removed, any
+       * other global variables created by your code will remain.
+       *
+       * @method remove
+       * @example
+       * 

+       * function draw() {
+       *   ellipse(50, 50, 10, 10);
+       * }
+       *
+       * function mousePressed() {
+       *   remove(); // remove whole sketch on mouse press
+       * }
+       * 

+       *
+       * @alt
+       * nothing displayed
+       *
+       */
+      this.remove = function() {
+        if (this._curElement) {
+          // stop draw
+          this._loop = false;
+          if (this._requestAnimId) {
+            window.cancelAnimationFrame(this._requestAnimId);
+          }
+
+          // unregister events sketch-wide
+          for (var ev in this._events) {
+            window.removeEventListener(ev, this._events[ev]);
+          }
+
+          // remove DOM elements created by p5, and listeners
+          for (var i = 0; i < this._elements.length; i++) {
+            var e = this._elements[i];
+            if (e.elt.parentNode) {
+              e.elt.parentNode.removeChild(e.elt);
+            }
+            for (var elt_ev in e._events) {
+              e.elt.removeEventListener(elt_ev, e._events[elt_ev]);
+            }
+          }
+
+          // call any registered remove functions
+          var self = this;
+          this._registeredMethods.remove.forEach(function(f) {
+            if (typeof f !== 'undefined') {
+              f.call(self);
+            }
+          });
+
+          // remove window bound properties and methods
+          if (this._isGlobal) {
+            for (var p in p5.prototype) {
+              try {
+                delete window[p];
+              } catch (x) {
+                window[p] = undefined;
+              }
+            }
+            for (var p2 in this) {
+              if (this.hasOwnProperty(p2)) {
+                try {
+                  delete window[p2];
+                } catch (x) {
+                  window[p2] = undefined;
+                }
+              }
+            }
+          }
+        }
+        // window.p5 = undefined;
+      }.bind(this);
+
+      // call any registered init functions
+      this._registeredMethods.init.forEach(function(f) {
+        if (typeof f !== 'undefined') {
+          f.call(this);
+        }
+      }, this);
+
+      var friendlyBindGlobal = this._createFriendlyGlobalFunctionBinder();
+
+      // If the user has created a global setup or draw function,
+      // assume "global" mode and make everything global (i.e. on the window)
+      if (!sketch) {
+        this._isGlobal = true;
+        p5.instance = this;
+        // Loop through methods on the prototype and attach them to the window
+        for (var p in p5.prototype) {
+          if (typeof p5.prototype[p] === 'function') {
+            var ev = p.substring(2);
+            if (!this._events.hasOwnProperty(ev)) {
+              if (Math.hasOwnProperty(p) && Math[p] === p5.prototype[p]) {
+                // Multiple p5 methods are just native Math functions. These can be
+                // called without any binding.
+                friendlyBindGlobal(p, p5.prototype[p]);
+              } else {
+                friendlyBindGlobal(p, p5.prototype[p].bind(this));
+              }
+            }
+          } else {
+            friendlyBindGlobal(p, p5.prototype[p]);
+          }
+        }
+        // Attach its properties to the window
+        for (var p2 in this) {
+          if (this.hasOwnProperty(p2)) {
+            friendlyBindGlobal(p2, this[p2]);
+          }
+        }
+      } else {
+        // Else, the user has passed in a sketch closure that may set
+        // user-provided 'setup', 'draw', etc. properties on this instance of p5
+        sketch(this);
+      }
+
+      // Bind events to window (not using container div bc key events don't work)
+
+      for (var e in this._events) {
+        var f = this['_on' + e];
+        if (f) {
+          var m = f.bind(this);
+          window.addEventListener(e, m, { passive: false });
+          this._events[e] = m;
+        }
+      }
+
+      var focusHandler = function() {
+        this._setProperty('focused', true);
+      }.bind(this);
+      var blurHandler = function() {
+        this._setProperty('focused', false);
+      }.bind(this);
+      window.addEventListener('focus', focusHandler);
+      window.addEventListener('blur', blurHandler);
+      this.registerMethod('remove', function() {
+        window.removeEventListener('focus', focusHandler);
+        window.removeEventListener('blur', blurHandler);
+      });
+
+      if (sync) {
+        this._start();
+      } else {
+        if (document.readyState === 'complete') {
+          this._start();
+        } else {
+          window.addEventListener('load', this._start.bind(this), false);
+        }
+      }
+    };
+
+    p5.prototype._initializeInstanceVariables = function() {
+      this._styles = [];
+
+      this._bezierDetail = 20;
+      this._curveDetail = 20;
+
+      this._colorMode = constants.RGB;
+      this._colorMaxes = {
+        rgb: [255, 255, 255, 255],
+        hsb: [360, 100, 100, 1],
+        hsl: [360, 100, 100, 1]
+      };
+    };
+
+    // This is a pointer to our global mode p5 instance, if we're in
+    // global mode.
+    p5.instance = null;
+
+    // Allows for the friendly error system to be turned off when creating a sketch,
+    // which can give a significant boost to performance when needed.
+    p5.disableFriendlyErrors = false;
+
+    // attach constants to p5 prototype
+    for (var k in constants) {
+      p5.prototype[k] = constants[k];
+    }
+
+    // functions that cause preload to wait
+    // more can be added by using registerPreloadMethod(func)
+    p5.prototype._preloadMethods = {
+      loadJSON: p5.prototype,
+      loadImage: p5.prototype,
+      loadStrings: p5.prototype,
+      loadXML: p5.prototype,
+      loadShape: p5.prototype,
+      loadTable: p5.prototype,
+      loadFont: p5.prototype,
+      loadModel: p5.prototype,
+      loadShader: p5.prototype
+    };
+
+    p5.prototype._registeredMethods = { init: [], pre: [], post: [], remove: [] };
+
+    p5.prototype._registeredPreloadMethods = {};
+
+    p5.prototype.registerPreloadMethod = function(fnString, obj) {
+      // obj = obj || p5.prototype;
+      if (!p5.prototype._preloadMethods.hasOwnProperty(fnString)) {
+        p5.prototype._preloadMethods[fnString] = obj;
+      }
+    };
+
+    p5.prototype.registerMethod = function(name, m) {
+      var target = this || p5.prototype;
+      if (!target._registeredMethods.hasOwnProperty(name)) {
+        target._registeredMethods[name] = [];
+      }
+      target._registeredMethods[name].push(m);
+    };
+
+    p5.prototype._createFriendlyGlobalFunctionBinder = function(options) {
+      options = options || {};
+
+      var globalObject = options.globalObject || window;
+      var log = options.log || console.log.bind(console);
+      var propsToForciblyOverwrite = {
+        // p5.print actually always overwrites an existing global function,
+        // albeit one that is very unlikely to be used:
+        //
+        //   https://developer.mozilla.org/en-US/docs/Web/API/Window/print
+        print: true
+      };
+
+      return function(prop, value) {
+        if (
+          !p5.disableFriendlyErrors &&
+          typeof IS_MINIFIED === 'undefined' &&
+          typeof value === 'function' &&
+          !(prop in p5.prototype._preloadMethods)
+        ) {
+          try {
+            // Because p5 has so many common function names, it's likely
+            // that users may accidentally overwrite global p5 functions with
+            // their own variables. Let's allow this but log a warning to
+            // help users who may be doing this unintentionally.
+            //
+            // For more information, see:
+            //
+            //   https://github.com/processing/p5.js/issues/1317
+
+            if (prop in globalObject && !(prop in propsToForciblyOverwrite)) {
+              throw new Error('global "' + prop + '" already exists');
+            }
+
+            // It's possible that this might throw an error because there
+            // are a lot of edge-cases in which `Object.defineProperty` might
+            // not succeed; since this functionality is only intended to
+            // help beginners anyways, we'll just catch such an exception
+            // if it occurs, and fall back to legacy behavior.
+            Object.defineProperty(globalObject, prop, {
+              configurable: true,
+              enumerable: true,
+              get: function() {
+                return value;
+              },
+              set: function(newValue) {
+                Object.defineProperty(globalObject, prop, {
+                  configurable: true,
+                  enumerable: true,
+                  value: newValue,
+                  writable: true
+                });
+                log(
+                  'You just changed the value of "' +
+                    prop +
+                    '", which was ' +
+                    "a p5 function. This could cause problems later if you're " +
+                    'not careful.'
+                );
+              }
+            });
+          } catch (e) {
+            log(
+              'p5 had problems creating the global function "' +
+                prop +
+                '", ' +
+                'possibly because your code is already using that name as ' +
+                'a variable. You may want to rename your variable to something ' +
+                'else.'
+            );
+            globalObject[prop] = value;
+          }
+        } else {
+          globalObject[prop] = value;
+        }
+      };
+    };
+
+    module.exports = p5;
+
+    },{"./constants":21,"./shim":32}],23:[function(_dereq_,module,exports){
+    /**
+     * @module Shape
+     * @submodule Curves
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    _dereq_('./error_helpers');
+
+    /**
+     * Draws a cubic Bezier curve on the screen. These curves are defined by a
+     * series of anchor and control points. The first two parameters specify
+     * the first anchor point and the last two parameters specify the other
+     * anchor point, which become the first and last points on the curve. The
+     * middle parameters specify the two control points which define the shape
+     * of the curve. Approximately speaking, control points "pull" the curve
+     * towards them.

Bezier curves were developed by French
+     * automotive engineer Pierre Bezier, and are commonly used in computer
+     * graphics to define gently sloping curves. See also curve().
+     *
+     * @method bezier
+     * @param  {Number} x1 x-coordinate for the first anchor point
+     * @param  {Number} y1 y-coordinate for the first anchor point
+     * @param  {Number} x2 x-coordinate for the first control point
+     * @param  {Number} y2 y-coordinate for the first control point
+     * @param  {Number} x3 x-coordinate for the second control point
+     * @param  {Number} y3 y-coordinate for the second control point
+     * @param  {Number} x4 x-coordinate for the second anchor point
+     * @param  {Number} y4 y-coordinate for the second anchor point
+     * @chainable
+     * @example
+     * 

+     * 
+     * noFill();
+     * stroke(255, 102, 0);
+     * line(85, 20, 10, 10);
+     * line(90, 90, 15, 80);
+     * stroke(0, 0, 0);
+     * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+     * 
+     * 

+     *
+     * 

+     * 
+     * background(0, 0, 0);
+     * noFill();
+     * stroke(255);
+     * bezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);
+     * 
+     * 

+     *
+     * @alt
+     * stretched black s-shape in center with orange lines extending from end points.
+     * stretched black s-shape with 10 5x5 white ellipses along the shape.
+     * stretched black s-shape with 7 5x5 ellipses and orange lines along the shape.
+     * stretched black s-shape with 17 small orange lines extending from under shape.
+     * horseshoe shape with orange ends facing left and black curved center.
+     * horseshoe shape with orange ends facing left and black curved center.
+     * Line shaped like right-facing arrow,points move with mouse-x and warp shape.
+     * horizontal line that hooks downward on the right and 13 5x5 ellipses along it.
+     * right curving line mid-right of canvas with 7 short lines radiating from it.
+     */
+    /**
+     * @method bezier
+     * @param  {Number} x1
+     * @param  {Number} y1
+     * @param  {Number} z1 z-coordinate for the first anchor point
+     * @param  {Number} x2
+     * @param  {Number} y2
+     * @param  {Number} z2 z-coordinate for the first control point
+     * @param  {Number} x3
+     * @param  {Number} y3
+     * @param  {Number} z3 z-coordinate for the second control point
+     * @param  {Number} x4
+     * @param  {Number} y4
+     * @param  {Number} z4 z-coordinate for the second anchor point
+     * @chainable
+     */
+    p5.prototype.bezier = function() {
+      p5._validateParameters('bezier', arguments);
+
+      if (this._renderer._doStroke || this._renderer._doFill) {
+        this._renderer.bezier.apply(this._renderer, arguments);
+      }
+
+      return this;
+    };
+
+    /**
+     * Sets the resolution at which Beziers display.
+     *
+     * The default value is 20.
+     *
+     * @method bezierDetail
+     * @param {Number} detail resolution of the curves
+     * @chainable
+     * @example
+     * 

+     * 
+     * background(204);
+     * bezierDetail(50);
+     * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+     * 
+     * 

+     *
+     * @alt
+     * stretched black s-shape with 7 5x5 ellipses and orange lines along the shape.
+     *
+     */
+    p5.prototype.bezierDetail = function(d) {
+      p5._validateParameters('bezierDetail', arguments);
+      this._bezierDetail = d;
+      return this;
+    };
+
+    /**
+     * Evaluates the Bezier at position t for points a, b, c, d.
+     * The parameters a and d are the first and last points
+     * on the curve, and b and c are the control points.
+     * The final parameter t varies between 0 and 1.
+     * This can be done once with the x coordinates and a second time
+     * with the y coordinates to get the location of a bezier curve at t.
+     *
+     * @method bezierPoint
+     * @param {Number} a coordinate of first point on the curve
+     * @param {Number} b coordinate of first control point
+     * @param {Number} c coordinate of second control point
+     * @param {Number} d coordinate of second point on the curve
+     * @param {Number} t value between 0 and 1
+     * @return {Number} the value of the Bezier at position t
+     * @example
+     * 

+     * 
+     * noFill();
+     * var x1 = 85,
+      x2 = 10,
+      x3 = 90,
+      x4 = 15;
+     * var y1 = 20,
+      y2 = 10,
+      y3 = 90,
+      y4 = 80;
+     * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+     * fill(255);
+     * var steps = 10;
+     * for (var i = 0; i <= steps; i++) {
+     *   var t = i / steps;
+     *   var x = bezierPoint(x1, x2, x3, x4, t);
+     *   var y = bezierPoint(y1, y2, y3, y4, t);
+     *   ellipse(x, y, 5, 5);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * stretched black s-shape with 17 small orange lines extending from under shape.
+     *
+     */
+    p5.prototype.bezierPoint = function(a, b, c, d, t) {
+      p5._validateParameters('bezierPoint', arguments);
+
+      var adjustedT = 1 - t;
+      return (
+        Math.pow(adjustedT, 3) * a +
+        3 * Math.pow(adjustedT, 2) * t * b +
+        3 * adjustedT * Math.pow(t, 2) * c +
+        Math.pow(t, 3) * d
+      );
+    };
+
+    /**
+     * Evaluates the tangent to the Bezier at position t for points a, b, c, d.
+     * The parameters a and d are the first and last points
+     * on the curve, and b and c are the control points.
+     * The final parameter t varies between 0 and 1.
+     *
+     * @method bezierTangent
+     * @param {Number} a coordinate of first point on the curve
+     * @param {Number} b coordinate of first control point
+     * @param {Number} c coordinate of second control point
+     * @param {Number} d coordinate of second point on the curve
+     * @param {Number} t value between 0 and 1
+     * @return {Number} the tangent at position t
+     * @example
+     * 

+     * 
+     * noFill();
+     * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+     * var steps = 6;
+     * fill(255);
+     * for (var i = 0; i <= steps; i++) {
+     *   var t = i / steps;
+     *   // Get the location of the point
+     *   var x = bezierPoint(85, 10, 90, 15, t);
+     *   var y = bezierPoint(20, 10, 90, 80, t);
+     *   // Get the tangent points
+     *   var tx = bezierTangent(85, 10, 90, 15, t);
+     *   var ty = bezierTangent(20, 10, 90, 80, t);
+     *   // Calculate an angle from the tangent points
+     *   var a = atan2(ty, tx);
+     *   a += PI;
+     *   stroke(255, 102, 0);
+     *   line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);
+     *   // The following line of code makes a line
+     *   // inverse of the above line
+     *   //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);
+     *   stroke(0);
+     *   ellipse(x, y, 5, 5);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * noFill();
+     * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+     * stroke(255, 102, 0);
+     * var steps = 16;
+     * for (var i = 0; i <= steps; i++) {
+     *   var t = i / steps;
+     *   var x = bezierPoint(85, 10, 90, 15, t);
+     *   var y = bezierPoint(20, 10, 90, 80, t);
+     *   var tx = bezierTangent(85, 10, 90, 15, t);
+     *   var ty = bezierTangent(20, 10, 90, 80, t);
+     *   var a = atan2(ty, tx);
+     *   a -= HALF_PI;
+     *   line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * s-shaped line with 17 short orange lines extending from underside of shape
+     *
+     */
+    p5.prototype.bezierTangent = function(a, b, c, d, t) {
+      p5._validateParameters('bezierTangent', arguments);
+
+      var adjustedT = 1 - t;
+      return (
+        3 * d * Math.pow(t, 2) -
+        3 * c * Math.pow(t, 2) +
+        6 * c * adjustedT * t -
+        6 * b * adjustedT * t +
+        3 * b * Math.pow(adjustedT, 2) -
+        3 * a * Math.pow(adjustedT, 2)
+      );
+    };
+
+    /**
+     * Draws a curved line on the screen between two points, given as the
+     * middle four parameters. The first two parameters are a control point, as
+     * if the curve came from this point even though it's not drawn. The last
+     * two parameters similarly describe the other control point. 


+     * Longer curves can be created by putting a series of curve() functions
+     * together or using curveVertex(). An additional function called
+     * curveTightness() provides control for the visual quality of the curve.
+     * The curve() function is an implementation of Catmull-Rom splines.
+     *
+     * @method curve
+     * @param  {Number} x1 x-coordinate for the beginning control point
+     * @param  {Number} y1 y-coordinate for the beginning control point
+     * @param  {Number} x2 x-coordinate for the first point
+     * @param  {Number} y2 y-coordinate for the first point
+     * @param  {Number} x3 x-coordinate for the second point
+     * @param  {Number} y3 y-coordinate for the second point
+     * @param  {Number} x4 x-coordinate for the ending control point
+     * @param  {Number} y4 y-coordinate for the ending control point
+     * @chainable
+     * @example
+     * 

+     * 
+     * noFill();
+     * stroke(255, 102, 0);
+     * curve(5, 26, 5, 26, 73, 24, 73, 61);
+     * stroke(0);
+     * curve(5, 26, 73, 24, 73, 61, 15, 65);
+     * stroke(255, 102, 0);
+     * curve(73, 24, 73, 61, 15, 65, 15, 65);
+     * 
+     * 

+     * 

+     * 
+     * // Define the curve points as JavaScript objects
+     * var p1 = { x: 5, y: 26 },
+      p2 = { x: 73, y: 24 };
+     * var p3 = { x: 73, y: 61 },
+      p4 = { x: 15, y: 65 };
+     * noFill();
+     * stroke(255, 102, 0);
+     * curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
+     * stroke(0);
+     * curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
+     * stroke(255, 102, 0);
+     * curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);
+     * 
+     * 

+     * 

+     * 
+     * noFill();
+     * stroke(255, 102, 0);
+     * curve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);
+     * stroke(0);
+     * curve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);
+     * stroke(255, 102, 0);
+     * curve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);
+     * 
+     * 

+     *
+     * @alt
+     * horseshoe shape with orange ends facing left and black curved center.
+     * horseshoe shape with orange ends facing left and black curved center.
+     * curving black and orange lines.
+     */
+    /**
+     * @method curve
+     * @param  {Number} x1
+     * @param  {Number} y1
+     * @param  {Number} z1 z-coordinate for the beginning control point
+     * @param  {Number} x2
+     * @param  {Number} y2
+     * @param  {Number} z2 z-coordinate for the first point
+     * @param  {Number} x3
+     * @param  {Number} y3
+     * @param  {Number} z3 z-coordinate for the second point
+     * @param  {Number} x4
+     * @param  {Number} y4
+     * @param  {Number} z4 z-coordinate for the ending control point
+     * @chainable
+     */
+    p5.prototype.curve = function() {
+      p5._validateParameters('curve', arguments);
+
+      if (this._renderer._doStroke) {
+        this._renderer.curve.apply(this._renderer, arguments);
+      }
+
+      return this;
+    };
+
+    /**
+     * Sets the resolution at which curves display.
+     *
+     * The default value is 20.
+     *
+     * @method curveDetail
+     * @param {Number} resolution of the curves
+     * @chainable
+     * @example
+     * 

+     * 
+     * background(204);
+     * curveDetail(20);
+     * curve(5, 26, 5, 26, 73, 24, 73, 61);
+     * 
+     * 

+     *
+     * @alt
+     * white arch shape in top-mid canvas.
+     *
+     */
+    p5.prototype.curveDetail = function(d) {
+      p5._validateParameters('curveDetail', arguments);
+      this._curveDetail = d;
+      return this;
+    };
+
+    /**
+     * Modifies the quality of forms created with curve() and curveVertex().
+     * The parameter tightness determines how the curve fits to the vertex
+     * points. The value 0.0 is the default value for tightness (this value
+     * defines the curves to be Catmull-Rom splines) and the value 1.0 connects
+     * all the points with straight lines. Values within the range -5.0 and 5.0
+     * will deform the curves but will leave them recognizable and as values
+     * increase in magnitude, they will continue to deform.
+     *
+     * @method curveTightness
+     * @param {Number} amount of deformation from the original vertices
+     * @chainable
+     * @example
+     * 

+     * 
+     * // Move the mouse left and right to see the curve change
+     *
+     * function setup() {
+     *   createCanvas(100, 100);
+     *   noFill();
+     * }
+     *
+     * function draw() {
+     *   background(204);
+     *   var t = map(mouseX, 0, width, -5, 5);
+     *   curveTightness(t);
+     *   beginShape();
+     *   curveVertex(10, 26);
+     *   curveVertex(10, 26);
+     *   curveVertex(83, 24);
+     *   curveVertex(83, 61);
+     *   curveVertex(25, 65);
+     *   curveVertex(25, 65);
+     *   endShape();
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * Line shaped like right-facing arrow,points move with mouse-x and warp shape.
+     */
+    p5.prototype.curveTightness = function(t) {
+      p5._validateParameters('curveTightness', arguments);
+      this._renderer._curveTightness = t;
+    };
+
+    /**
+     * Evaluates the curve at position t for points a, b, c, d.
+     * The parameter t varies between 0 and 1, a and d are points
+     * on the curve, and b and c are the control points.
+     * This can be done once with the x coordinates and a second time
+     * with the y coordinates to get the location of a curve at t.
+     *
+     * @method curvePoint
+     * @param {Number} a coordinate of first point on the curve
+     * @param {Number} b coordinate of first control point
+     * @param {Number} c coordinate of second control point
+     * @param {Number} d coordinate of second point on the curve
+     * @param {Number} t value between 0 and 1
+     * @return {Number} bezier value at position t
+     * @example
+     * 

+     * 
+     * noFill();
+     * curve(5, 26, 5, 26, 73, 24, 73, 61);
+     * curve(5, 26, 73, 24, 73, 61, 15, 65);
+     * fill(255);
+     * ellipseMode(CENTER);
+     * var steps = 6;
+     * for (var i = 0; i <= steps; i++) {
+     *   var t = i / steps;
+     *   var x = curvePoint(5, 5, 73, 73, t);
+     *   var y = curvePoint(26, 26, 24, 61, t);
+     *   ellipse(x, y, 5, 5);
+     *   x = curvePoint(5, 73, 73, 15, t);
+     *   y = curvePoint(26, 24, 61, 65, t);
+     *   ellipse(x, y, 5, 5);
+     * }
+     * 
+     * 

+     *
+     *line hooking down to right-bottom with 13 5x5 white ellipse points
+     */
+    p5.prototype.curvePoint = function(a, b, c, d, t) {
+      p5._validateParameters('curvePoint', arguments);
+
+      var t3 = t * t * t,
+        t2 = t * t,
+        f1 = -0.5 * t3 + t2 - 0.5 * t,
+        f2 = 1.5 * t3 - 2.5 * t2 + 1.0,
+        f3 = -1.5 * t3 + 2.0 * t2 + 0.5 * t,
+        f4 = 0.5 * t3 - 0.5 * t2;
+      return a * f1 + b * f2 + c * f3 + d * f4;
+    };
+
+    /**
+     * Evaluates the tangent to the curve at position t for points a, b, c, d.
+     * The parameter t varies between 0 and 1, a and d are points on the curve,
+     * and b and c are the control points.
+     *
+     * @method curveTangent
+     * @param {Number} a coordinate of first point on the curve
+     * @param {Number} b coordinate of first control point
+     * @param {Number} c coordinate of second control point
+     * @param {Number} d coordinate of second point on the curve
+     * @param {Number} t value between 0 and 1
+     * @return {Number} the tangent at position t
+     * @example
+     * 

+     * 
+     * noFill();
+     * curve(5, 26, 73, 24, 73, 61, 15, 65);
+     * var steps = 6;
+     * for (var i = 0; i <= steps; i++) {
+     *   var t = i / steps;
+     *   var x = curvePoint(5, 73, 73, 15, t);
+     *   var y = curvePoint(26, 24, 61, 65, t);
+     *   //ellipse(x, y, 5, 5);
+     *   var tx = curveTangent(5, 73, 73, 15, t);
+     *   var ty = curveTangent(26, 24, 61, 65, t);
+     *   var a = atan2(ty, tx);
+     *   a -= PI / 2.0;
+     *   line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     *right curving line mid-right of canvas with 7 short lines radiating from it.
+     */
+    p5.prototype.curveTangent = function(a, b, c, d, t) {
+      p5._validateParameters('curveTangent', arguments);
+
+      var t2 = t * t,
+        f1 = -3 * t2 / 2 + 2 * t - 0.5,
+        f2 = 9 * t2 / 2 - 5 * t,
+        f3 = -9 * t2 / 2 + 4 * t + 0.5,
+        f4 = 3 * t2 / 2 - t;
+      return a * f1 + b * f2 + c * f3 + d * f4;
+    };
+
+    module.exports = p5;
+
+    },{"./core":22,"./error_helpers":25}],24:[function(_dereq_,module,exports){
+    /**
+     * @module Environment
+     * @submodule Environment
+     * @for p5
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var C = _dereq_('./constants');
+
+    var standardCursors = [C.ARROW, C.CROSS, C.HAND, C.MOVE, C.TEXT, C.WAIT];
+
+    p5.prototype._frameRate = 0;
+    p5.prototype._lastFrameTime = window.performance.now();
+    p5.prototype._targetFrameRate = 60;
+
+    var _windowPrint = window.print;
+
+    /**
+     * The print() function writes to the console area of your browser.
+     * This function is often helpful for looking at the data a program is
+     * producing. This function creates a new line of text for each call to
+     * the function. Individual elements can be
+     * separated with quotes ("") and joined with the addition operator (+).
+     *
+     * @method print
+     * @param {Any} contents any combination of Number, String, Object, Boolean,
+     *                       Array to print
+     * @example
+     * 

+     * var x = 10;
+     * print('The value of x is ' + x);
+     * // prints "The value of x is 10"
+     * 

+     * @alt
+     * default grey canvas
+     */
+    p5.prototype.print = function(args) {
+      if (typeof args === 'undefined') {
+        _windowPrint();
+      } else {
+        console.log.apply(console, arguments);
+      }
+    };
+
+    /**
+     * The system variable frameCount contains the number of frames that have
+     * been displayed since the program started. Inside setup() the value is 0,
+     * after the first iteration of draw it is 1, etc.
+     *
+     * @property {Integer} frameCount
+     * @readOnly
+     * @example
+     *   

+     * function setup() {
+     *   frameRate(30);
+     *   textSize(20);
+     *   textSize(30);
+     *   textAlign(CENTER);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   text(frameCount, width / 2, height / 2);
+     * }
+    

+     *
+     * @alt
+     * numbers rapidly counting upward with frame count set to 30.
+     *
+     */
+    p5.prototype.frameCount = 0;
+
+    /**
+     * Confirms if the window a p5.js program is in is "focused," meaning that
+     * the sketch will accept mouse or keyboard input. This variable is
+     * "true" if the window is focused and "false" if not.
+     *
+     * @property {Boolean} focused
+     * @readOnly
+     * @example
+     * 

+     * // To demonstrate, put two windows side by side.
+     * // Click on the window that the p5 sketch isn't in!
+     * function draw() {
+     *   background(200);
+     *   noStroke();
+     *   fill(0, 200, 0);
+     *   ellipse(25, 25, 50, 50);
+     *
+     *   if (!focused) {
+        // or "if (focused === false)"
+     *     stroke(200, 0, 0);
+     *     line(0, 0, 100, 100);
+     *     line(100, 0, 0, 100);
+     *   }
+     * }
+     * 

+     *
+     * @alt
+     * green 50x50 ellipse at top left. Red X covers canvas when page focus changes
+     *
+     */
+    p5.prototype.focused = document.hasFocus();
+
+    /**
+     * Sets the cursor to a predefined symbol or an image, or makes it visible
+     * if already hidden. If you are trying to set an image as the cursor, the
+     * recommended size is 16x16 or 32x32 pixels. It is not possible to load an
+     * image as the cursor if you are exporting your program for the Web, and not
+     * all MODES work with all browsers. The values for parameters x and y must
+     * be less than the dimensions of the image.
+     *
+     * @method cursor
+     * @param {String|Constant} type either ARROW, CROSS, HAND, MOVE, TEXT, or
+     *                               WAIT, or path for image
+     * @param {Number}          [x]  the horizontal active spot of the cursor
+     * @param {Number}          [y]  the vertical active spot of the cursor
+     * @example
+     * 

+     * // Move the mouse left and right across the image
+     * // to see the cursor change from a cross to a hand
+     * function draw() {
+     *   line(width / 2, 0, width / 2, height);
+     *   if (mouseX < 50) {
+     *     cursor(CROSS);
+     *   } else {
+     *     cursor(HAND);
+     *   }
+     * }
+     * 

+     *
+     * @alt
+     * horizontal line divides canvas. cursor on left is a cross, right is hand.
+     *
+     */
+    p5.prototype.cursor = function(type, x, y) {
+      var cursor = 'auto';
+      var canvas = this._curElement.elt;
+      if (standardCursors.indexOf(type) > -1) {
+        // Standard css cursor
+        cursor = type;
+      } else if (typeof type === 'string') {
+        var coords = '';
+        if (x && y && (typeof x === 'number' && typeof y === 'number')) {
+          // Note that x and y values must be unit-less positive integers < 32
+          // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+          coords = x + ' ' + y;
+        }
+        if (
+          type.substring(0, 7) === 'http://' ||
+          type.substring(0, 8) === 'https://'
+        ) {
+          // Image (absolute url)
+          cursor = 'url(' + type + ') ' + coords + ', auto';
+        } else if (/\.(cur|jpg|jpeg|gif|png|CUR|JPG|JPEG|GIF|PNG)$/.test(type)) {
+          // Image file (relative path) - Separated for performance reasons
+          cursor = 'url(' + type + ') ' + coords + ', auto';
+        } else {
+          // Any valid string for the css cursor property
+          cursor = type;
+        }
+      }
+      canvas.style.cursor = cursor;
+    };
+
+    /**
+     * Specifies the number of frames to be displayed every second. For example,
+     * the function call frameRate(30) will attempt to refresh 30 times a second.
+     * If the processor is not fast enough to maintain the specified rate, the
+     * frame rate will not be achieved. Setting the frame rate within setup() is
+     * recommended. The default rate is 60 frames per second. This is the same as
+     * setFrameRate(val).
+     * 


+     * Calling frameRate() with no arguments returns the current framerate. The
+     * draw function must run at least once before it will return a value. This
+     * is the same as getFrameRate().
+     * 


+     * Calling frameRate() with arguments that are not of the type numbers
+     * or are non positive also returns current framerate.
+     *
+     * @method frameRate
+     * @param  {Number} fps number of frames to be displayed every second
+     * @chainable
+     *
+     * @example
+     *
+     * 

+     * var rectX = 0;
+     * var fr = 30; //starting FPS
+     * var clr;
+     *
+     * function setup() {
+     *   background(200);
+     *   frameRate(fr); // Attempt to refresh at starting FPS
+     *   clr = color(255, 0, 0);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   rectX = rectX += 1; // Move Rectangle
+     *
+     *   if (rectX >= width) {
+        // If you go off screen.
+     *     if (fr === 30) {
+     *       clr = color(0, 0, 255);
+     *       fr = 10;
+     *       frameRate(fr); // make frameRate 10 FPS
+     *     } else {
+     *       clr = color(255, 0, 0);
+     *       fr = 30;
+     *       frameRate(fr); // make frameRate 30 FPS
+     *     }
+     *     rectX = 0;
+     *   }
+     *   fill(clr);
+     *   rect(rectX, 40, 20, 20);
+     * }
+     * 

+     *
+     * @alt
+     * blue rect moves left to right, followed by red rect moving faster. Loops.
+     *
+     */
+    /**
+     * @method frameRate
+     * @return {Number}       current frameRate
+     */
+    p5.prototype.frameRate = function(fps) {
+      p5._validateParameters('frameRate', arguments);
+      if (typeof fps !== 'number' || fps < 0) {
+        return this._frameRate;
+      } else {
+        this._setProperty('_targetFrameRate', fps);
+        this._runFrames();
+        return this;
+      }
+    };
+    /**
+     * Returns the current framerate.
+     *
+     * @private
+     * @return {Number} current frameRate
+     */
+    p5.prototype.getFrameRate = function() {
+      return this.frameRate();
+    };
+
+    /**
+     * Specifies the number of frames to be displayed every second. For example,
+     * the function call frameRate(30) will attempt to refresh 30 times a second.
+     * If the processor is not fast enough to maintain the specified rate, the
+     * frame rate will not be achieved. Setting the frame rate within setup() is
+     * recommended. The default rate is 60 frames per second.
+     *
+     * Calling frameRate() with no arguments returns the current framerate.
+     *
+     * @private
+     * @param {Number} [fps] number of frames to be displayed every second
+     */
+    p5.prototype.setFrameRate = function(fps) {
+      return this.frameRate(fps);
+    };
+
+    /**
+     * Hides the cursor from view.
+     *
+     * @method noCursor
+     * @example
+     * 

+     * function setup() {
+     *   noCursor();
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   ellipse(mouseX, mouseY, 10, 10);
+     * }
+     * 

+     *
+     *
+     * @alt
+     * cursor becomes 10x 10 white ellipse the moves with mouse x and y.
+     *
+     */
+    p5.prototype.noCursor = function() {
+      this._curElement.elt.style.cursor = 'none';
+    };
+
+    /**
+     * System variable that stores the width of the entire screen display. This
+     * is used to run a full-screen program on any display size.
+     *
+     * @property {Number} displayWidth
+     * @readOnly
+     * @example
+     * 

+     * createCanvas(displayWidth, displayHeight);
+     * 

+     *
+     * @alt
+     * cursor becomes 10x 10 white ellipse the moves with mouse x and y.
+     *
+     */
+    p5.prototype.displayWidth = screen.width;
+
+    /**
+     * System variable that stores the height of the entire screen display. This
+     * is used to run a full-screen program on any display size.
+     *
+     * @property {Number} displayHeight
+     * @readOnly
+     * @example
+     * 

+     * createCanvas(displayWidth, displayHeight);
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.prototype.displayHeight = screen.height;
+
+    /**
+     * System variable that stores the width of the inner window, it maps to
+     * window.innerWidth.
+     *
+     * @property {Number} windowWidth
+     * @readOnly
+     * @example
+     * 

+     * createCanvas(windowWidth, windowHeight);
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.prototype.windowWidth = getWindowWidth();
+    /**
+     * System variable that stores the height of the inner window, it maps to
+     * window.innerHeight.
+     *
+     * @property {Number} windowHeight
+     * @readOnly
+     * @example
+     * 

+     * createCanvas(windowWidth, windowHeight);
+     * 

+     *@alt
+     * no display.
+     *
+     */
+    p5.prototype.windowHeight = getWindowHeight();
+
+    /**
+     * The windowResized() function is called once every time the browser window
+     * is resized. This is a good place to resize the canvas or do any other
+     * adjustments to accommodate the new window size.
+     *
+     * @method windowResized
+     * @example
+     * 

+     * function setup() {
+     *   createCanvas(windowWidth, windowHeight);
+     * }
+     *
+     * function draw() {
+     *   background(0, 100, 200);
+     * }
+     *
+     * function windowResized() {
+     *   resizeCanvas(windowWidth, windowHeight);
+     * }
+     * 

+     * @alt
+     * no display.
+     */
+    p5.prototype._onresize = function(e) {
+      this._setProperty('windowWidth', getWindowWidth());
+      this._setProperty('windowHeight', getWindowHeight());
+      var context = this._isGlobal ? window : this;
+      var executeDefault;
+      if (typeof context.windowResized === 'function') {
+        executeDefault = context.windowResized(e);
+        if (executeDefault !== undefined && !executeDefault) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    function getWindowWidth() {
+      return (
+        window.innerWidth ||
+        (document.documentElement && document.documentElement.clientWidth) ||
+        (document.body && document.body.clientWidth) ||
+        0
+      );
+    }
+
+    function getWindowHeight() {
+      return (
+        window.innerHeight ||
+        (document.documentElement && document.documentElement.clientHeight) ||
+        (document.body && document.body.clientHeight) ||
+        0
+      );
+    }
+
+    /**
+     * System variable that stores the width of the drawing canvas. This value
+     * is set by the first parameter of the createCanvas() function.
+     * For example, the function call createCanvas(320, 240) sets the width
+     * variable to the value 320. The value of width defaults to 100 if
+     * createCanvas() is not used in a program.
+     *
+     * @property {Number} width
+     * @readOnly
+     */
+    p5.prototype.width = 0;
+
+    /**
+     * System variable that stores the height of the drawing canvas. This value
+     * is set by the second parameter of the createCanvas() function. For
+     * example, the function call createCanvas(320, 240) sets the height
+     * variable to the value 240. The value of height defaults to 100 if
+     * createCanvas() is not used in a program.
+     *
+     * @property {Number} height
+     * @readOnly
+     */
+    p5.prototype.height = 0;
+
+    /**
+     * If argument is given, sets the sketch to fullscreen or not based on the
+     * value of the argument. If no argument is given, returns the current
+     * fullscreen state. Note that due to browser restrictions this can only
+     * be called on user input, for example, on mouse press like the example
+     * below.
+     *
+     * @method fullscreen
+     * @param  {Boolean} [val] whether the sketch should be in fullscreen mode
+     * or not
+     * @return {Boolean} current fullscreen state
+     * @example
+     * 

+     * 
+     * // Clicking in the box toggles fullscreen on and off.
+     * function setup() {
+     *   background(200);
+     * }
+     * function mousePressed() {
+     *   if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+     *     var fs = fullscreen();
+     *     fullscreen(!fs);
+     *   }
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.prototype.fullscreen = function(val) {
+      p5._validateParameters('fullscreen', arguments);
+      // no arguments, return fullscreen or not
+      if (typeof val === 'undefined') {
+        return (
+          document.fullscreenElement ||
+          document.webkitFullscreenElement ||
+          document.mozFullScreenElement ||
+          document.msFullscreenElement
+        );
+      } else {
+        // otherwise set to fullscreen or not
+        if (val) {
+          launchFullscreen(document.documentElement);
+        } else {
+          exitFullscreen();
+        }
+      }
+    };
+
+    /**
+     * Sets the pixel scaling for high pixel density displays. By default
+     * pixel density is set to match display density, call pixelDensity(1)
+     * to turn this off. Calling pixelDensity() with no arguments returns
+     * the current pixel density of the sketch.
+     *
+     *
+     * @method pixelDensity
+     * @param  {Number} [val] whether or how much the sketch should scale
+     * @returns {Number} current pixel density of the sketch
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   pixelDensity(1);
+     *   createCanvas(100, 100);
+     *   background(200);
+     *   ellipse(width / 2, height / 2, 50, 50);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * function setup() {
+     *   pixelDensity(3.0);
+     *   createCanvas(100, 100);
+     *   background(200);
+     *   ellipse(width / 2, height / 2, 50, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * fuzzy 50x50 white ellipse with black outline in center of canvas.
+     * sharp 50x50 white ellipse with black outline in center of canvas.
+     */
+    p5.prototype.pixelDensity = function(val) {
+      p5._validateParameters('pixelDensity', arguments);
+      if (typeof val === 'number') {
+        this._pixelDensity = val;
+      } else {
+        return this._pixelDensity;
+      }
+      this.resizeCanvas(this.width, this.height, true);
+    };
+
+    /**
+     * Returns the pixel density of the current display the sketch is running on.
+     *
+     * @method displayDensity
+     * @returns {Number} current pixel density of the display
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var density = displayDensity();
+     *   pixelDensity(density);
+     *   createCanvas(100, 100);
+     *   background(200);
+     *   ellipse(width / 2, height / 2, 50, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 white ellipse with black outline in center of canvas.
+     */
+    p5.prototype.displayDensity = function() {
+      return window.devicePixelRatio;
+    };
+
+    function launchFullscreen(element) {
+      var enabled =
+        document.fullscreenEnabled ||
+        document.webkitFullscreenEnabled ||
+        document.mozFullScreenEnabled ||
+        document.msFullscreenEnabled;
+      if (!enabled) {
+        throw new Error('Fullscreen not enabled in this browser.');
+      }
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+      }
+    }
+
+    function exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+    }
+
+    /**
+     * Gets the current URL.
+     * @method getURL
+     * @return {String} url
+     * @example
+     * 

+     * 
+     * var url;
+     * var x = 100;
+     *
+     * function setup() {
+     *   fill(0);
+     *   noStroke();
+     *   url = getURL();
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   text(url, x, height / 2);
+     *   x--;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * current url (http://p5js.org/reference/#/p5/getURL) moves right to left.
+     *
+     */
+    p5.prototype.getURL = function() {
+      return location.href;
+    };
+    /**
+     * Gets the current URL path as an array.
+     * @method getURLPath
+     * @return {String[]} path components
+     * @example
+     * 

+     * function setup() {
+     *   var urlPath = getURLPath();
+     *   for (var i = 0; i < urlPath.length; i++) {
+     *     text(urlPath[i], 10, i * 20 + 20);
+     *   }
+     * }
+     * 

+     *
+     * @alt
+     *no display
+     *
+     */
+    p5.prototype.getURLPath = function() {
+      return location.pathname.split('/').filter(function(v) {
+        return v !== '';
+      });
+    };
+    /**
+     * Gets the current URL params as an Object.
+     * @method getURLParams
+     * @return {Object} URL params
+     * @example
+     * 

+     * 
+     * // Example: http://p5js.org?year=2014&month=May&day=15
+     *
+     * function setup() {
+     *   var params = getURLParams();
+     *   text(params.day, 10, 20);
+     *   text(params.month, 10, 40);
+     *   text(params.year, 10, 60);
+     * }
+     * 
+     * 

+     * @alt
+     * no display.
+     *
+     */
+    p5.prototype.getURLParams = function() {
+      var re = /[?&]([^&=]+)(?:[&=])([^&=]+)/gim;
+      var m;
+      var v = {};
+      while ((m = re.exec(location.search)) != null) {
+        if (m.index === re.lastIndex) {
+          re.lastIndex++;
+        }
+        v[m[1]] = m[2];
+      }
+      return v;
+    };
+
+    module.exports = p5;
+
+    },{"./constants":21,"./core":22}],25:[function(_dereq_,module,exports){
+    /**
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var constants = _dereq_('./constants');
+
+    if (typeof IS_MINIFIED !== 'undefined') {
+      p5._validateParameters = p5._friendlyFileLoadError = function() {};
+    } else {
+      var doFriendlyWelcome = false; // TEMP until we get it all working LM
+      // for parameter validation
+      var dataDoc = _dereq_('../../docs/reference/data.json');
+      var arrDoc = JSON.parse(JSON.stringify(dataDoc));
+
+      // -- Borrowed from jQuery 1.11.3 --
+      var class2type = {};
+      var toString = class2type.toString;
+      var names = [
+        'Boolean',
+        'Number',
+        'String',
+        'Function',
+        'Array',
+        'Date',
+        'RegExp',
+        'Object',
+        'Error'
+      ];
+      for (var n = 0; n < names.length; n++) {
+        class2type['[object ' + names[n] + ']'] = names[n].toLowerCase();
+      }
+      var getType = function(obj) {
+        if (obj == null) {
+          return obj + '';
+        }
+        return typeof obj === 'object' || typeof obj === 'function'
+          ? class2type[toString.call(obj)] || 'object'
+          : typeof obj;
+      };
+
+      // -- End borrow --
+
+      var friendlyWelcome = function() {
+        // p5.js brand - magenta: #ED225D
+        //var astrixBgColor = 'transparent';
+        //var astrixTxtColor = '#ED225D';
+        //var welcomeBgColor = '#ED225D';
+        //var welcomeTextColor = 'white';
+        console.log(
+          '    _ \n' +
+            ' /\\| |/\\ \n' +
+            " \\ ` ' /  \n" +
+            ' / , . \\  \n' +
+            ' \\/|_|\\/ ' +
+            '\n\n> p5.js says: Welcome! ' +
+            'This is your friendly debugger. ' +
+            'To turn me off switch to using “p5.min.js”.'
+        );
+      };
+
+      /**
+       * Prints out a fancy, colorful message to the console log
+       *
+       * @private
+       * @param  {String}               message the words to be said
+       * @param  {String}               func    the name of the function to link
+       * @param  {Number|String} color   CSS color string or error type
+       *
+       * @return console logs
+       */
+      // Wrong number of params, undefined param, wrong type
+      var FILE_LOAD = 3;
+      var ERR_PARAMS = 3;
+      // p5.js blue, p5.js orange, auto dark green; fallback p5.js darkened magenta
+      // See testColors below for all the color codes and names
+      var typeColors = ['#2D7BB6', '#EE9900', '#4DB200', '#C83C00'];
+      var report = function(message, func, color) {
+        if (doFriendlyWelcome) {
+          friendlyWelcome();
+          doFriendlyWelcome = false;
+        }
+        if ('undefined' === getType(color)) {
+          color = '#B40033'; // dark magenta
+        } else if (getType(color) === 'number') {
+          // Type to color
+          color = typeColors[color];
+        }
+        if (func.substring(0, 4) === 'load') {
+          console.log(
+            '> p5.js says: ' +
+              message +
+              '[https://github.com/processing/p5.js/wiki/Local-server]'
+          );
+        } else {
+          console.log(
+            '> p5.js says: ' +
+              message +
+              ' [http://p5js.org/reference/#p5/' +
+              func +
+              ']'
+          );
+        }
+      };
+
+      var errorCases = {
+        '0': {
+          fileType: 'image',
+          method: 'loadImage',
+          message: ' hosting the image online,'
+        },
+        '1': {
+          fileType: 'XML file',
+          method: 'loadXML'
+        },
+        '2': {
+          fileType: 'table file',
+          method: 'loadTable'
+        },
+        '3': {
+          fileType: 'text file',
+          method: 'loadStrings'
+        },
+        '4': {
+          fileType: 'font',
+          method: 'loadFont',
+          message: ' hosting the font online,'
+        }
+      };
+      p5._friendlyFileLoadError = function(errorType, filePath) {
+        var errorInfo = errorCases[errorType];
+        var message =
+          'It looks like there was a problem' +
+          ' loading your ' +
+          errorInfo.fileType +
+          '.' +
+          ' Try checking if the file path [' +
+          filePath +
+          '] is correct,' +
+          (errorInfo.message || '') +
+          ' or running a local server.';
+        report(message, errorInfo.method, FILE_LOAD);
+      };
+
+      var docCache = {};
+      var builtinTypes = [
+        'number',
+        'string',
+        'boolean',
+        'constant',
+        'function',
+        'any',
+        'integer'
+      ];
+
+      // validateParameters() helper functions:
+      // lookupParamDoc() for querying data.json
+      var lookupParamDoc = function(func) {
+        var queryResult = arrDoc.classitems.filter(function(x) {
+          return x.name === func;
+        });
+        // different JSON structure for funct with multi-format
+        var overloads = [];
+        if (queryResult[0].hasOwnProperty('overloads')) {
+          for (var i = 0; i < queryResult[0].overloads.length; i++) {
+            overloads.push(queryResult[0].overloads[i].params);
+          }
+        } else {
+          overloads.push(queryResult[0].params);
+        }
+
+        var mapConstants = {};
+        var maxParams = 0;
+        overloads.forEach(function(formats) {
+          if (maxParams < formats.length) {
+            maxParams = formats.length;
+          }
+          formats.forEach(function(format) {
+            format.types = format.type.split('|').map(function ct(type) {
+              // array
+              if (type.substr(type.length - 2, 2) === '[]') {
+                return {
+                  name: type,
+                  array: ct(type.substr(0, type.length - 2))
+                };
+              }
+
+              var lowerType = type.toLowerCase();
+
+              // contant
+              if (lowerType === 'constant') {
+                var constant;
+                if (mapConstants.hasOwnProperty(format.name)) {
+                  constant = mapConstants[format.name];
+                } else {
+                  // parse possible constant values from description
+                  var myRe = /either\s+(?:[A-Z0-9_]+\s*,?\s*(?:or)?\s*)+/g;
+                  var values = {};
+                  var names = [];
+
+                  constant = mapConstants[format.name] = {
+                    values: values,
+                    names: names
+                  };
+
+                  var myArray = myRe.exec(format.description);
+                  if (func === 'endShape' && format.name === 'mode') {
+                    values[constants.CLOSE] = true;
+                    names.push('CLOSE');
+                  } else {
+                    var match = myArray[0];
+                    var reConst = /[A-Z0-9_]+/g;
+                    var matchConst;
+                    while ((matchConst = reConst.exec(match)) !== null) {
+                      var name = matchConst[0];
+                      if (constants.hasOwnProperty(name)) {
+                        values[constants[name]] = true;
+                        names.push(name);
+                      }
+                    }
+                  }
+                }
+                return {
+                  name: type,
+                  builtin: lowerType,
+                  names: constant.names,
+                  values: constant.values
+                };
+              }
+
+              // function
+              if (lowerType.substr(0, 'function'.length) === 'function') {
+                lowerType = 'function';
+              }
+              // builtin
+              if (builtinTypes.indexOf(lowerType) >= 0) {
+                return { name: type, builtin: lowerType };
+              }
+
+              // p5 class type
+              var t = window;
+              type.split('.').forEach(function(p) {
+                t = t && t[p];
+              });
+              if (t) {
+                return { name: type, prototype: t };
+              }
+
+              return { name: type, type: lowerType };
+            });
+          });
+        });
+        return {
+          overloads: overloads,
+          maxParams: maxParams
+        };
+      };
+
+      var testParamType = function(param, type) {
+        var isArray = param instanceof Array;
+        if (type.array && isArray) {
+          for (var i = 0; i < param.length; i++) {
+            if (!testParamType(param[i], type.array)) {
+              return false;
+            }
+          }
+          return true;
+        } else if (type.prototype) {
+          return param instanceof type.prototype;
+        } else if (type.builtin) {
+          switch (type.builtin) {
+            case 'number':
+              return typeof param === 'number' || (!!param && !isNaN(param));
+            case 'integer':
+              return (
+                (typeof param === 'number' || (!!param && !isNaN(param))) &&
+                Number(param) === Math.floor(param)
+              );
+            case 'boolean':
+            case 'any':
+              return true;
+            case 'array':
+              return isArray;
+            case 'string':
+              return typeof param === 'number' || typeof param === 'string';
+            case 'constant':
+              return type.values.hasOwnProperty(param);
+            case 'function':
+              return param instanceof Function;
+          }
+        }
+
+        return typeof param === type.t;
+      };
+
+      // testType() for non-object type parameter validation
+      // Returns true if PASS, false if FAIL
+      var testParamTypes = function(param, types) {
+        for (var i = 0; i < types.length; i++) {
+          if (testParamType(param, types[i])) {
+            return true;
+          }
+        }
+        return false;
+      };
+
+      var testParamFormat = function(args, formats) {
+        var errorArray = [];
+        for (var p = 0; p < formats.length; p++) {
+          var arg = args[p];
+          var format = formats[p];
+          var argType = typeof arg;
+          if ('undefined' === argType || null === arg) {
+            if (format.optional !== true) {
+              errorArray.push({
+                type: 'EMPTY_VAR',
+                position: p,
+                format: format
+              });
+            }
+          } else if (!testParamTypes(arg, format.types)) {
+            errorArray.push({
+              type: 'WRONG_TYPE',
+              position: p,
+              format: format,
+              arg: arg
+            });
+          }
+        }
+        return errorArray;
+      };
+
+      // function for generating console.log() msg
+      p5._friendlyParamError = function(errorObj, func) {
+        var message;
+
+        function formatType() {
+          var format = errorObj.format;
+          return format.types
+            .map(function(type) {
+              return type.names ? type.names.join('|') : type.name;
+            })
+            .join('|');
+        }
+
+        switch (errorObj.type) {
+          case 'EMPTY_VAR':
+            message =
+              func +
+              '() was expecting ' +
+              formatType() +
+              ' for parameter #' +
+              errorObj.position +
+              ' (zero-based index), received an empty variable instead.' +
+              ' If not intentional, this is often a problem with scope:' +
+              ' [https://p5js.org/examples/data-variable-scope.html]';
+            break;
+          case 'WRONG_TYPE':
+            var arg = errorObj.arg;
+            var argType = arg instanceof Array ? 'array' : arg.name || typeof arg;
+            message =
+              func +
+              '() was expecting ' +
+              formatType() +
+              ' for parameter #' +
+              errorObj.position +
+              ' (zero-based index), received ' +
+              argType +
+              ' instead';
+            break;
+          case 'WRONG_ARGUMENT_COUNT':
+            message =
+              func +
+              '() was expecting ' +
+              errorObj.maxParams +
+              ' arguments, but received ' +
+              errorObj.argCount;
+            break;
+        }
+
+        if (message) {
+          try {
+            var re = /Function\.validateParameters.*[\r\n].*[\r\n].*\(([^)]*)/;
+            var location = re.exec(new Error().stack)[1];
+            if (location) {
+              message += ' at ' + location;
+            }
+          } catch (err) {}
+
+          report(message + '.', func, ERR_PARAMS);
+        }
+      };
+
+      /**
+       * Validates parameters
+       * param  {String}               func    the name of the function
+       * param  {Array}                args    user input arguments
+       *
+       * example:
+       *  var a;
+       *  ellipse(10,10,a,5);
+       * console ouput:
+       *  "It looks like ellipse received an empty variable in spot #2."
+       *
+       * example:
+       *  ellipse(10,"foo",5,5);
+       * console output:
+       *  "ellipse was expecting a number for parameter #1,
+       *           received "foo" instead."
+       */
+      p5._validateParameters = function validateParameters(func, args) {
+        if (p5.disableFriendlyErrors) {
+          return; // skip FES
+        }
+
+        var docs = docCache[func] || (docCache[func] = lookupParamDoc(func));
+        var errorArray = [];
+        var minErrCount = 999999;
+        var overloads = docs.overloads;
+        for (var i = 0; i < overloads.length; i++) {
+          var arrError = testParamFormat(args, overloads[i]);
+          // see if this is the format with min number of err
+          if (minErrCount > arrError.length) {
+            minErrCount = arrError.length;
+            errorArray = arrError;
+          }
+          if (arrError.length === 0) {
+            break; // no error
+          }
+        }
+
+        if (!errorArray.length && args.length > docs.maxParams) {
+          errorArray.push({
+            type: 'WRONG_ARGUMENT_COUNT',
+            argCount: args.length,
+            maxParams: docs.maxParams
+          });
+        }
+
+        // generate err msg
+        for (var n = 0; n < errorArray.length; n++) {
+          p5._friendlyParamError(errorArray[n], func);
+        }
+      };
+
+      /**
+       * Prints out all the colors in the color pallete with white text.
+       * For color blindness testing.
+       */
+      /* function testColors() {
+        var str = 'A box of biscuits, a box of mixed biscuits and a biscuit mixer';
+        report(str, 'print', '#ED225D'); // p5.js magenta
+        report(str, 'print', '#2D7BB6'); // p5.js blue
+        report(str, 'print', '#EE9900'); // p5.js orange
+        report(str, 'print', '#A67F59'); // p5.js light brown
+        report(str, 'print', '#704F21'); // p5.js gold
+        report(str, 'print', '#1CC581'); // auto cyan
+        report(str, 'print', '#FF6625'); // auto orange
+        report(str, 'print', '#79EB22'); // auto green
+        report(str, 'print', '#B40033'); // p5.js darkened magenta
+        report(str, 'print', '#084B7F'); // p5.js darkened blue
+        report(str, 'print', '#945F00'); // p5.js darkened orange
+        report(str, 'print', '#6B441D'); // p5.js darkened brown
+        report(str, 'print', '#2E1B00'); // p5.js darkened gold
+        report(str, 'print', '#008851'); // auto dark cyan
+        report(str, 'print', '#C83C00'); // auto dark orange
+        report(str, 'print', '#4DB200'); // auto dark green
+      } */
+
+      p5.prototype._validateParameters = p5.validateParameters;
+    }
+
+    // This is a lazily-defined list of p5 symbols that may be
+    // misused by beginners at top-level code, outside of setup/draw. We'd like
+    // to detect these errors and help the user by suggesting they move them
+    // into setup/draw.
+    //
+    // For more details, see https://github.com/processing/p5.js/issues/1121.
+    var misusedAtTopLevelCode = null;
+    var FAQ_URL =
+      'https://github.com/processing/p5.js/wiki/' +
+      'Frequently-Asked-Questions' +
+      '#why-cant-i-assign-variables-using-p5-functions-and-' +
+      'variables-before-setup';
+
+    var defineMisusedAtTopLevelCode = function() {
+      var uniqueNamesFound = {};
+
+      var getSymbols = function(obj) {
+        return Object.getOwnPropertyNames(obj)
+          .filter(function(name) {
+            if (name[0] === '_') {
+              return false;
+            }
+            if (name in uniqueNamesFound) {
+              return false;
+            }
+
+            uniqueNamesFound[name] = true;
+
+            return true;
+          })
+          .map(function(name) {
+            var type;
+
+            if (typeof obj[name] === 'function') {
+              type = 'function';
+            } else if (name === name.toUpperCase()) {
+              type = 'constant';
+            } else {
+              type = 'variable';
+            }
+
+            return { name: name, type: type };
+          });
+      };
+
+      misusedAtTopLevelCode = [].concat(
+        getSymbols(p5.prototype),
+        // At present, p5 only adds its constants to p5.prototype during
+        // construction, which may not have happened at the time a
+        // ReferenceError is thrown, so we'll manually add them to our list.
+        getSymbols(_dereq_('./constants'))
+      );
+
+      // This will ultimately ensure that we report the most specific error
+      // possible to the user, e.g. advising them about HALF_PI instead of PI
+      // when their code misuses the former.
+      misusedAtTopLevelCode.sort(function(a, b) {
+        return b.name.length - a.name.length;
+      });
+    };
+
+    var helpForMisusedAtTopLevelCode = function(e, log) {
+      if (!log) {
+        log = console.log.bind(console);
+      }
+
+      if (!misusedAtTopLevelCode) {
+        defineMisusedAtTopLevelCode();
+      }
+
+      // If we find that we're logging lots of false positives, we can
+      // uncomment the following code to avoid displaying anything if the
+      // user's code isn't likely to be using p5's global mode. (Note that
+      // setup/draw are more likely to be defined due to JS function hoisting.)
+      //
+      //if (!('setup' in window || 'draw' in window)) {
+      //  return;
+      //}
+
+      misusedAtTopLevelCode.some(function(symbol) {
+        // Note that while just checking for the occurrence of the
+        // symbol name in the error message could result in false positives,
+        // a more rigorous test is difficult because different browsers
+        // log different messages, and the format of those messages may
+        // change over time.
+        //
+        // For example, if the user uses 'PI' in their code, it may result
+        // in any one of the following messages:
+        //
+        //   * 'PI' is undefined                           (Microsoft Edge)
+        //   * ReferenceError: PI is undefined             (Firefox)
+        //   * Uncaught ReferenceError: PI is not defined  (Chrome)
+
+        if (e.message && e.message.match('\\W?' + symbol.name + '\\W') !== null) {
+          log(
+            "Did you just try to use p5.js's " +
+              symbol.name +
+              (symbol.type === 'function' ? '() ' : ' ') +
+              symbol.type +
+              '? If so, you may want to ' +
+              "move it into your sketch's setup() function.\n\n" +
+              'For more details, see: ' +
+              FAQ_URL
+          );
+          return true;
+        }
+      });
+    };
+
+    // Exposing this primarily for unit testing.
+    p5.prototype._helpForMisusedAtTopLevelCode = helpForMisusedAtTopLevelCode;
+
+    if (document.readyState !== 'complete') {
+      window.addEventListener('error', helpForMisusedAtTopLevelCode, false);
+
+      // Our job is only to catch ReferenceErrors that are thrown when
+      // global (non-instance mode) p5 APIs are used at the top-level
+      // scope of a file, so we'll unbind our error listener now to make
+      // sure we don't log false positives later.
+      window.addEventListener('load', function() {
+        window.removeEventListener('error', helpForMisusedAtTopLevelCode, false);
+      });
+    }
+
+    module.exports = p5;
+
+    },{"../../docs/reference/data.json":1,"./constants":21,"./core":22}],26:[function(_dereq_,module,exports){
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * _globalInit
+     *
+     * TODO: ???
+     * if sketch is on window
+     * assume "global" mode
+     * and instantiate p5 automatically
+     * otherwise do nothing
+     *
+     * @private
+     * @return {Undefined}
+     */
+    var _globalInit = function() {
+      if (!window.PHANTOMJS && !window.mocha) {
+        // If there is a setup or draw function on the window
+        // then instantiate p5 in "global" mode
+        if (
+          ((window.setup && typeof window.setup === 'function') ||
+            (window.draw && typeof window.draw === 'function')) &&
+          !p5.instance
+        ) {
+          new p5();
+        }
+      }
+    };
+
+    // TODO: ???
+    if (document.readyState === 'complete') {
+      _globalInit();
+    } else {
+      window.addEventListener('load', _globalInit, false);
+    }
+
+    },{"../core/core":22}],27:[function(_dereq_,module,exports){
+    /**
+     * @module DOM
+     * @submodule DOM
+     * @for p5.Element
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+
+    /**
+     * Base class for all elements added to a sketch, including canvas,
+     * graphics buffers, and other HTML elements. Methods in blue are
+     * included in the core functionality, methods in brown are added
+     * with the p5.dom
+     * library.
+     * It is not called directly, but p5.Element
+     * objects are created by calling createCanvas, createGraphics,
+     * or in the p5.dom library, createDiv, createImg, createInput, etc.
+     *
+     * @class p5.Element
+     * @constructor
+     * @param {String} elt DOM node that is wrapped
+     * @param {p5} [pInst] pointer to p5 instance
+     */
+    p5.Element = function(elt, pInst) {
+      /**
+       * Underlying HTML element. All normal HTML methods can be called on this.
+       * @example
+       * 

+       * 
+       * createCanvas(300, 500);
+       * background(0, 0, 0, 0);
+       * var input = createInput();
+       * input.position(20, 225);
+       * var inputElem = new p5.Element(input.elt);
+       * inputElem.style('width:450px;');
+       * inputElem.value('some string');
+       * 
+       * 

+       *
+       * @property elt
+       * @readOnly
+       */
+      this.elt = elt;
+      this._pInst = pInst;
+      this._events = {};
+      this.width = this.elt.offsetWidth;
+      this.height = this.elt.offsetHeight;
+      this.name = 'p5.Element'; // for friendly debugger system
+    };
+
+    /**
+     *
+     * Attaches the element to the parent specified. A way of setting
+     * the container for the element. Accepts either a string ID, DOM
+     * node, or p5.Element. If no arguments given, parent node is returned.
+     * For more ways to position the canvas, see the
+     * 
+     * positioning the canvas wiki page.
+     *
+     * @method parent
+     * @param  {String|p5.Element|Object} parent the ID, DOM node, or p5.Element
+     *                         of desired parent element
+     * @chainable
+     *
+     * @example
+     * 

+     * // in the html file:
+     * // <div id="myContainer"></div>
+     *
+     * // in the js file:
+     * var cnv = createCanvas(100, 100);
+     * cnv.parent('myContainer');
+     * 

+     * 

+     * var div0 = createDiv('this is the parent');
+     * var div1 = createDiv('this is the child');
+     * div1.parent(div0); // use p5.Element
+     * 

+     * 

+     * var div0 = createDiv('this is the parent');
+     * div0.id('apples');
+     * var div1 = createDiv('this is the child');
+     * div1.parent('apples'); // use id
+     * 

+     * 

+     * var elt = document.getElementById('myParentDiv');
+     * var div1 = createDiv('this is the child');
+     * div1.parent(elt); // use element from page
+     * 

+     *
+     * @alt
+     * no display.
+     */
+    /**
+     * @method parent
+     * @return {p5.Element}
+     *
+     */
+    p5.Element.prototype.parent = function(p) {
+      if (typeof p === 'undefined') {
+        return this.elt.parentNode;
+      }
+
+      if (typeof p === 'string') {
+        if (p[0] === '#') {
+          p = p.substring(1);
+        }
+        p = document.getElementById(p);
+      } else if (p instanceof p5.Element) {
+        p = p.elt;
+      }
+      p.appendChild(this.elt);
+      return this;
+    };
+
+    /**
+     *
+     * Sets the ID of the element. If no ID argument is passed in, it instead
+     * returns the current ID of the element.
+     *
+     * @method id
+     * @param  {String} id ID of the element
+     * @chainable
+     *
+     * @example
+     * 

+     * function setup() {
+     *   var cnv = createCanvas(100, 100);
+     *   // Assigns a CSS selector ID to
+     *   // the canvas element.
+     *   cnv.id('mycanvas');
+     * }
+     * 

+     *
+     * @alt
+     * no display.
+     */
+    /**
+     * @method id
+     * @return {String} the id of the element
+     */
+    p5.Element.prototype.id = function(id) {
+      if (typeof id === 'undefined') {
+        return this.elt.id;
+      }
+
+      this.elt.id = id;
+      this.width = this.elt.offsetWidth;
+      this.height = this.elt.offsetHeight;
+      return this;
+    };
+
+    /**
+     *
+     * Adds given class to the element. If no class argument is passed in, it
+     * instead returns a string containing the current class(es) of the element.
+     *
+     * @method class
+     * @param  {String} class class to add
+     * @chainable
+     *
+     * @example
+     * 

+     * function setup() {
+     *   var cnv = createCanvas(100, 100);
+     *   // Assigns a CSS selector class 'small'
+     *   // to the canvas element.
+     *   cnv.class('small');
+     * }
+     * 

+     *
+     * @alt
+     * no display.
+     */
+    /**
+     * @method class
+     * @return {String} the class of the element
+     */
+    p5.Element.prototype.class = function(c) {
+      if (typeof c === 'undefined') {
+        return this.elt.className;
+      }
+
+      this.elt.className = c;
+      return this;
+    };
+
+    /**
+     * The .mousePressed() function is called once after every time a
+     * mouse button is pressed over the element. This can be used to
+     * attach element specific event listeners.
+     *
+     * @method mousePressed
+     * @param  {Function|Boolean} fxn function to be fired when mouse is
+     *                                pressed over the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var cnv;
+     * var d;
+     * var g;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.mousePressed(changeGray); // attach listener for
+     *   // canvas click only
+     *   d = 10;
+     *   g = 100;
+     * }
+     *
+     * function draw() {
+     *   background(g);
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * // this function fires with any click anywhere
+     * function mousePressed() {
+     *   d = d + 10;
+     * }
+     *
+     * // this function fires only when cnv is clicked
+     * function changeGray() {
+     *   g = random(0, 255);
+     * }
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.mousePressed = function(fxn) {
+      adjustListener('mousedown', fxn, this);
+      adjustListener('touchstart', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .doubleClicked() function is called once after every time a
+     * mouse button is pressed twice over the element. This can be used to
+     * attach element and action specific event listeners.
+     *
+     * @method doubleClicked
+     * @param  {Function|Boolean} fxn function to be fired when mouse is
+     *                                double clicked over the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @return {p5.Element}
+     * @example
+     * 

+     * var cnv;
+     * var d;
+     * var g;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.doubleClicked(changeGray); // attach listener for
+     *   // canvas double click only
+     *   d = 10;
+     *   g = 100;
+     * }
+     *
+     * function draw() {
+     *   background(g);
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * // this function fires with any double click anywhere
+     * function doubleClicked() {
+     *   d = d + 10;
+     * }
+     *
+     * // this function fires only when cnv is double clicked
+     * function changeGray() {
+     *   g = random(0, 255);
+     * }
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.doubleClicked = function(fxn) {
+      adjustListener('dblclick', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .mouseWheel() function is called once after every time a
+     * mouse wheel is scrolled over the element. This can be used to
+     * attach element specific event listeners.
+     * 


+     * The function accepts a callback function as argument which will be executed
+     * when the `wheel` event is triggered on the element, the callback function is
+     * passed one argument `event`. The `event.deltaY` property returns negative
+     * values if the mouse wheel is rotated up or away from the user and positive
+     * in the other direction. The `event.deltaX` does the same as `event.deltaY`
+     * except it reads the horizontal wheel scroll of the mouse wheel.
+     * 


+     * On OS X with "natural" scrolling enabled, the `event.deltaY` values are
+     * reversed.
+     *
+     * @method mouseWheel
+     * @param  {Function|Boolean} fxn function to be fired when mouse is
+     *                                scrolled over the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var cnv;
+     * var d;
+     * var g;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.mouseWheel(changeSize); // attach listener for
+     *   // activity on canvas only
+     *   d = 10;
+     *   g = 100;
+     * }
+     *
+     * function draw() {
+     *   background(g);
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * // this function fires with mousewheel movement
+     * // anywhere on screen
+     * function mouseWheel() {
+     *   g = g + 10;
+     * }
+     *
+     * // this function fires with mousewheel movement
+     * // over canvas only
+     * function changeSize(event) {
+     *   if (event.deltaY > 0) {
+     *     d = d + 10;
+     *   } else {
+     *     d = d - 10;
+     *   }
+     * }
+     * 

+     *
+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.mouseWheel = function(fxn) {
+      adjustListener('wheel', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .mouseReleased() function is called once after every time a
+     * mouse button is released over the element. This can be used to
+     * attach element specific event listeners.
+     *
+     * @method mouseReleased
+     * @param  {Function|Boolean} fxn function to be fired when mouse is
+     *                                released over the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var cnv;
+     * var d;
+     * var g;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.mouseReleased(changeGray); // attach listener for
+     *   // activity on canvas only
+     *   d = 10;
+     *   g = 100;
+     * }
+     *
+     * function draw() {
+     *   background(g);
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * // this function fires after the mouse has been
+     * // released
+     * function mouseReleased() {
+     *   d = d + 10;
+     * }
+     *
+     * // this function fires after the mouse has been
+     * // released while on canvas
+     * function changeGray() {
+     *   g = random(0, 255);
+     * }
+     * 

+     *
+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.mouseReleased = function(fxn) {
+      adjustListener('mouseup', fxn, this);
+      adjustListener('touchend', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .mouseClicked() function is called once after a mouse button is
+     * pressed and released over the element. This can be used to
+     * attach element specific event listeners.
+     *
+     * @method mouseClicked
+     * @param  {Function|Boolean} fxn function to be fired when mouse is
+     *                                clicked over the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * 
+     * var cnv;
+     * var d;
+     * var g;
+     *
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.mouseClicked(changeGray); // attach listener for
+     *   // activity on canvas only
+     *   d = 10;
+     *   g = 100;
+     * }
+     *
+     * function draw() {
+     *   background(g);
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * // this function fires after the mouse has been
+     * // clicked anywhere
+     * function mouseClicked() {
+     *   d = d + 10;
+     * }
+     *
+     * // this function fires after the mouse has been
+     * // clicked on canvas
+     * function changeGray() {
+     *   g = random(0, 255);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.mouseClicked = function(fxn) {
+      adjustListener('click', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .mouseMoved() function is called once every time a
+     * mouse moves over the element. This can be used to attach an
+     * element specific event listener.
+     *
+     * @method mouseMoved
+     * @param  {Function|Boolean} fxn function to be fired when a mouse moves
+     *                                over the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var cnv;
+     * var d = 30;
+     * var g;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.mouseMoved(changeSize); // attach listener for
+     *   // activity on canvas only
+     *   d = 10;
+     *   g = 100;
+     * }
+     *
+     * function draw() {
+     *   background(g);
+     *   fill(200);
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * // this function fires when mouse moves anywhere on
+     * // page
+     * function mouseMoved() {
+     *   g = g + 5;
+     *   if (g > 255) {
+     *     g = 0;
+     *   }
+     * }
+     *
+     * // this function fires when mouse moves over canvas
+     * function changeSize() {
+     *   d = d + 2;
+     *   if (d > 100) {
+     *     d = 0;
+     *   }
+     * }
+     * 

+     *
+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.mouseMoved = function(fxn) {
+      adjustListener('mousemove', fxn, this);
+      adjustListener('touchmove', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .mouseOver() function is called once after every time a
+     * mouse moves onto the element. This can be used to attach an
+     * element specific event listener.
+     *
+     * @method mouseOver
+     * @param  {Function|Boolean} fxn function to be fired when a mouse moves
+     *                                onto the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var cnv;
+     * var d;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.mouseOver(changeGray);
+     *   d = 10;
+     * }
+     *
+     * function draw() {
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * function changeGray() {
+     *   d = d + 10;
+     *   if (d > 100) {
+     *     d = 0;
+     *   }
+     * }
+     * 

+     *
+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.mouseOver = function(fxn) {
+      adjustListener('mouseover', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .changed() function is called when the value of an
+     * element changes.
+     * This can be used to attach an element specific event listener.
+     *
+     * @method changed
+     * @param  {Function|Boolean} fxn function to be fired when the value of
+     *                                an element changes.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var sel;
+     *
+     * function setup() {
+     *   textAlign(CENTER);
+     *   background(200);
+     *   sel = createSelect();
+     *   sel.position(10, 10);
+     *   sel.option('pear');
+     *   sel.option('kiwi');
+     *   sel.option('grape');
+     *   sel.changed(mySelectEvent);
+     * }
+     *
+     * function mySelectEvent() {
+     *   var item = sel.value();
+     *   background(200);
+     *   text("it's a " + item + '!', 50, 50);
+     * }
+     * 

+     * 

+     * var checkbox;
+     * var cnv;
+     *
+     * function setup() {
+     *   checkbox = createCheckbox(' fill');
+     *   checkbox.changed(changeFill);
+     *   cnv = createCanvas(100, 100);
+     *   cnv.position(0, 30);
+     *   noFill();
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   ellipse(50, 50, 50, 50);
+     * }
+     *
+     * function changeFill() {
+     *   if (checkbox.checked()) {
+     *     fill(0);
+     *   } else {
+     *     noFill();
+     *   }
+     * }
+     * 

+     *
+     * @alt
+     * dropdown: pear, kiwi, grape. When selected text "its a" + selection shown.
+     *
+     */
+    p5.Element.prototype.changed = function(fxn) {
+      adjustListener('change', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .input() function is called when any user input is
+     * detected with an element. The input event is often used
+     * to detect keystrokes in a input element, or changes on a
+     * slider element. This can be used to attach an element specific
+     * event listener.
+     *
+     * @method input
+     * @param  {Function|Boolean} fxn function to be fired when any user input is
+     *                                detected within the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * // Open your console to see the output
+     * function setup() {
+     *   var inp = createInput('');
+     *   inp.input(myInputEvent);
+     * }
+     *
+     * function myInputEvent() {
+     *   console.log('you are typing: ', this.value());
+     * }
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.input = function(fxn) {
+      adjustListener('input', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .mouseOut() function is called once after every time a
+     * mouse moves off the element. This can be used to attach an
+     * element specific event listener.
+     *
+     * @method mouseOut
+     * @param  {Function|Boolean} fxn function to be fired when a mouse
+     *                                moves off of an element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var cnv;
+     * var d;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.mouseOut(changeGray);
+     *   d = 10;
+     * }
+     *
+     * function draw() {
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * function changeGray() {
+     *   d = d + 10;
+     *   if (d > 100) {
+     *     d = 0;
+     *   }
+     * }
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.mouseOut = function(fxn) {
+      adjustListener('mouseout', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .touchStarted() function is called once after every time a touch is
+     * registered. This can be used to attach element specific event listeners.
+     *
+     * @method touchStarted
+     * @param  {Function|Boolean} fxn function to be fired when a touch
+     *                                starts over the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var cnv;
+     * var d;
+     * var g;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.touchStarted(changeGray); // attach listener for
+     *   // canvas click only
+     *   d = 10;
+     *   g = 100;
+     * }
+     *
+     * function draw() {
+     *   background(g);
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * // this function fires with any touch anywhere
+     * function touchStarted() {
+     *   d = d + 10;
+     * }
+     *
+     * // this function fires only when cnv is clicked
+     * function changeGray() {
+     *   g = random(0, 255);
+     * }
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.touchStarted = function(fxn) {
+      adjustListener('touchstart', fxn, this);
+      adjustListener('mousedown', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .touchMoved() function is called once after every time a touch move is
+     * registered. This can be used to attach element specific event listeners.
+     *
+     * @method touchMoved
+     * @param  {Function|Boolean} fxn function to be fired when a touch moves over
+     *                                the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var cnv;
+     * var g;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.touchMoved(changeGray); // attach listener for
+     *   // canvas click only
+     *   g = 100;
+     * }
+     *
+     * function draw() {
+     *   background(g);
+     * }
+     *
+     * // this function fires only when cnv is clicked
+     * function changeGray() {
+     *   g = random(0, 255);
+     * }
+     * 

+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.touchMoved = function(fxn) {
+      adjustListener('touchmove', fxn, this);
+      adjustListener('mousemove', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .touchEnded() function is called once after every time a touch is
+     * registered. This can be used to attach element specific event listeners.
+     *
+     * @method touchEnded
+     * @param  {Function|Boolean} fxn function to be fired when a touch ends
+     *                                over the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * var cnv;
+     * var d;
+     * var g;
+     * function setup() {
+     *   cnv = createCanvas(100, 100);
+     *   cnv.touchEnded(changeGray); // attach listener for
+     *   // canvas click only
+     *   d = 10;
+     *   g = 100;
+     * }
+     *
+     * function draw() {
+     *   background(g);
+     *   ellipse(width / 2, height / 2, d, d);
+     * }
+     *
+     * // this function fires with any touch anywhere
+     * function touchEnded() {
+     *   d = d + 10;
+     * }
+     *
+     * // this function fires only when cnv is clicked
+     * function changeGray() {
+     *   g = random(0, 255);
+     * }
+     * 

+     *
+     *
+     * @alt
+     * no display.
+     *
+     */
+    p5.Element.prototype.touchEnded = function(fxn) {
+      adjustListener('touchend', fxn, this);
+      adjustListener('mouseup', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .dragOver() function is called once after every time a
+     * file is dragged over the element. This can be used to attach an
+     * element specific event listener.
+     *
+     * @method dragOver
+     * @param  {Function|Boolean} fxn function to be fired when a file is
+     *                                dragged over the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * // To test this sketch, simply drag a
+     * // file over the canvas
+     * function setup() {
+     *   var c = createCanvas(100, 100);
+     *   background(200);
+     *   textAlign(CENTER);
+     *   text('Drag file', width / 2, height / 2);
+     *   c.dragOver(dragOverCallback);
+     * }
+     *
+     * // This function will be called whenever
+     * // a file is dragged over the canvas
+     * function dragOverCallback() {
+     *   background(240);
+     *   text('Dragged over', width / 2, height / 2);
+     * }
+     * 

+     * @alt
+     * nothing displayed
+     */
+    p5.Element.prototype.dragOver = function(fxn) {
+      adjustListener('dragover', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .dragLeave() function is called once after every time a
+     * dragged file leaves the element area. This can be used to attach an
+     * element specific event listener.
+     *
+     * @method dragLeave
+     * @param  {Function|Boolean} fxn function to be fired when a file is
+     *                                dragged off the element.
+     *                                if `false` is passed instead, the previously
+     *                                firing function will no longer fire.
+     * @chainable
+     * @example
+     * 

+     * // To test this sketch, simply drag a file
+     * // over and then out of the canvas area
+     * function setup() {
+     *   var c = createCanvas(100, 100);
+     *   background(200);
+     *   textAlign(CENTER);
+     *   text('Drag file', width / 2, height / 2);
+     *   c.dragLeave(dragLeaveCallback);
+     * }
+     *
+     * // This function will be called whenever
+     * // a file is dragged out of the canvas
+     * function dragLeaveCallback() {
+     *   background(240);
+     *   text('Dragged off', width / 2, height / 2);
+     * }
+     * 

+     * @alt
+     * nothing displayed
+     */
+    p5.Element.prototype.dragLeave = function(fxn) {
+      adjustListener('dragleave', fxn, this);
+      return this;
+    };
+
+    /**
+     * The .drop() function is called for each file dropped on the element.
+     * It requires a callback that is passed a p5.File object.  You can
+     * optionally pass two callbacks, the first one (required) is triggered
+     * for each file dropped when the file is loaded.  The second (optional)
+     * is triggered just once when a file (or files) are dropped.
+     *
+     * @method drop
+     * @param  {Function} callback  callback triggered when files are dropped.
+     * @param  {Function} [fxn]       callback to receive loaded file.
+     * @chainable
+     * @example
+     * 

+     * function setup() {
+     *   var c = createCanvas(100, 100);
+     *   background(200);
+     *   textAlign(CENTER);
+     *   text('drop image', width / 2, height / 2);
+     *   c.drop(gotFile);
+     * }
+     *
+     * function gotFile(file) {
+     *   var img = createImg(file.data).hide();
+     *   // Draw the image onto the canvas
+     *   image(img, 0, 0, width, height);
+     * }
+     * 

+     *
+     * @alt
+     * Canvas turns into whatever image is dragged/dropped onto it.
+     *
+     */
+    p5.Element.prototype.drop = function(callback, fxn) {
+      // Make a file loader callback and trigger user's callback
+      function makeLoader(theFile) {
+        // Making a p5.File object
+        var p5file = new p5.File(theFile);
+        return function(e) {
+          p5file.data = e.target.result;
+          callback(p5file);
+        };
+      }
+
+      // Is the file stuff supported?
+      if (window.File && window.FileReader && window.FileList && window.Blob) {
+        // If you want to be able to drop you've got to turn off
+        // a lot of default behavior
+        attachListener(
+          'dragover',
+          function(evt) {
+            evt.stopPropagation();
+            evt.preventDefault();
+          },
+          this
+        );
+
+        // If this is a drag area we need to turn off the default behavior
+        attachListener(
+          'dragleave',
+          function(evt) {
+            evt.stopPropagation();
+            evt.preventDefault();
+          },
+          this
+        );
+
+        // If just one argument it's the callback for the files
+        if (typeof fxn !== 'undefined') {
+          attachListener('drop', fxn, this);
+        }
+
+        // Deal with the files
+        attachListener(
+          'drop',
+          function(evt) {
+            evt.stopPropagation();
+            evt.preventDefault();
+
+            // A FileList
+            var files = evt.dataTransfer.files;
+
+            // Load each one and trigger the callback
+            for (var i = 0; i < files.length; i++) {
+              var f = files[i];
+              var reader = new FileReader();
+              reader.onload = makeLoader(f);
+
+              // Text or data?
+              // This should likely be improved
+              if (f.type.indexOf('text') > -1) {
+                reader.readAsText(f);
+              } else {
+                reader.readAsDataURL(f);
+              }
+            }
+          },
+          this
+        );
+      } else {
+        console.log('The File APIs are not fully supported in this browser.');
+      }
+
+      return this;
+    };
+
+    // General handler for event attaching and detaching
+    function adjustListener(ev, fxn, ctx) {
+      if (fxn === false) {
+        detachListener(ev, ctx);
+      } else {
+        attachListener(ev, fxn, ctx);
+      }
+      return this;
+    }
+
+    function attachListener(ev, fxn, ctx) {
+      // LM removing, not sure why we had this?
+      // var _this = ctx;
+      // var f = function (e) { fxn(e, _this); };
+
+      // detach the old listener if there was one
+      if (ctx._events[ev]) {
+        detachListener(ev, ctx);
+      }
+      var f = fxn.bind(ctx);
+      ctx.elt.addEventListener(ev, f, false);
+      ctx._events[ev] = f;
+    }
+
+    function detachListener(ev, ctx) {
+      var f = ctx._events[ev];
+      ctx.elt.removeEventListener(ev, f, false);
+      ctx._events[ev] = null;
+    }
+
+    /**
+     * Helper fxn for sharing pixel methods
+     *
+     */
+    p5.Element.prototype._setProperty = function(prop, value) {
+      this[prop] = value;
+    };
+
+    module.exports = p5.Element;
+
+    },{"./core":22}],28:[function(_dereq_,module,exports){
+    /**
+     * @module Rendering
+     * @submodule Rendering
+     * @for p5
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var constants = _dereq_('./constants');
+
+    /**
+     * Thin wrapper around a renderer, to be used for creating a
+     * graphics buffer object. Use this class if you need
+     * to draw into an off-screen graphics buffer. The two parameters define the
+     * width and height in pixels. The fields and methods for this class are
+     * extensive, but mirror the normal drawing API for p5.
+     *
+     * @class p5.Graphics
+     * @constructor
+     * @extends p5.Element
+     * @param {Number} w            width
+     * @param {Number} h            height
+     * @param {Constant} renderer   the renderer to use, either P2D or WEBGL
+     * @param {p5} [pInst]          pointer to p5 instance
+     */
+    p5.Graphics = function(w, h, renderer, pInst) {
+      var r = renderer || constants.P2D;
+
+      this.canvas = document.createElement('canvas');
+      var node = pInst._userNode || document.body;
+      node.appendChild(this.canvas);
+
+      p5.Element.call(this, this.canvas, pInst, false);
+
+      // bind methods and props of p5 to the new object
+      for (var p in p5.prototype) {
+        if (!this[p]) {
+          if (typeof p5.prototype[p] === 'function') {
+            this[p] = p5.prototype[p].bind(this);
+          } else {
+            this[p] = p5.prototype[p];
+          }
+        }
+      }
+
+      p5.prototype._initializeInstanceVariables.apply(this);
+      this.width = w;
+      this.height = h;
+      this._pixelDensity = pInst._pixelDensity;
+
+      if (r === constants.WEBGL) {
+        this._renderer = new p5.RendererGL(this.canvas, this, false);
+      } else {
+        this._renderer = new p5.Renderer2D(this.canvas, this, false);
+      }
+      pInst._elements.push(this);
+
+      this._renderer.resize(w, h);
+      this._renderer._applyDefaults();
+
+      this.name = 'p5.Graphics'; // for friendly debugger system
+      return this;
+    };
+
+    p5.Graphics.prototype = Object.create(p5.Element.prototype);
+
+    /**
+     * @method remove
+     */
+    p5.Graphics.prototype.remove = function() {
+      if (this.elt.parentNode) {
+        this.elt.parentNode.removeChild(this.elt);
+      }
+      for (var elt_ev in this._events) {
+        this.elt.removeEventListener(elt_ev, this._events[elt_ev]);
+      }
+    };
+
+    module.exports = p5.Graphics;
+
+    },{"./constants":21,"./core":22}],29:[function(_dereq_,module,exports){
+    /**
+     * @module Rendering
+     * @submodule Rendering
+     * @for p5
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var constants = _dereq_('../core/constants');
+
+    /**
+     * Main graphics and rendering context, as well as the base API
+     * implementation for p5.js "core". To be used as the superclass for
+     * Renderer2D and Renderer3D classes, respecitvely.
+     *
+     * @class p5.Renderer
+     * @constructor
+     * @extends p5.Element
+     * @param {String} elt DOM node that is wrapped
+     * @param {p5} [pInst] pointer to p5 instance
+     * @param {Boolean} [isMainCanvas] whether we're using it as main canvas
+     */
+    p5.Renderer = function(elt, pInst, isMainCanvas) {
+      p5.Element.call(this, elt, pInst);
+      this.name = 'p5.Renderer'; // for friendly debugger system
+      this.canvas = elt;
+      this._pInst = pInst;
+      if (isMainCanvas) {
+        this._isMainCanvas = true;
+        // for pixel method sharing with pimage
+        this._pInst._setProperty('_curElement', this);
+        this._pInst._setProperty('canvas', this.canvas);
+        this._pInst._setProperty('width', this.width);
+        this._pInst._setProperty('height', this.height);
+      } else {
+        // hide if offscreen buffer by default
+        this.canvas.style.display = 'none';
+        this._styles = []; // non-main elt styles stored in p5.Renderer
+      }
+
+      this._textSize = 12;
+      this._textLeading = 15;
+      this._textFont = 'sans-serif';
+      this._textStyle = constants.NORMAL;
+      this._textAscent = null;
+      this._textDescent = null;
+
+      this._rectMode = constants.CORNER;
+      this._ellipseMode = constants.CENTER;
+      this._curveTightness = 0;
+      this._imageMode = constants.CORNER;
+
+      this._tint = null;
+      this._doStroke = true;
+      this._doFill = true;
+      this._strokeSet = false;
+      this._fillSet = false;
+    };
+
+    p5.Renderer.prototype = Object.create(p5.Element.prototype);
+
+    /**
+     * Resize our canvas element.
+     */
+    p5.Renderer.prototype.resize = function(w, h) {
+      this.width = w;
+      this.height = h;
+      this.elt.width = w * this._pInst._pixelDensity;
+      this.elt.height = h * this._pInst._pixelDensity;
+      this.elt.style.width = w + 'px';
+      this.elt.style.height = h + 'px';
+      if (this._isMainCanvas) {
+        this._pInst._setProperty('width', this.width);
+        this._pInst._setProperty('height', this.height);
+      }
+    };
+
+    p5.Renderer.prototype.textLeading = function(l) {
+      if (typeof l === 'number') {
+        this._setProperty('_textLeading', l);
+        return this;
+      }
+
+      return this._textLeading;
+    };
+
+    p5.Renderer.prototype.textSize = function(s) {
+      if (typeof s === 'number') {
+        this._setProperty('_textSize', s);
+        this._setProperty('_textLeading', s * constants._DEFAULT_LEADMULT);
+        return this._applyTextProperties();
+      }
+
+      return this._textSize;
+    };
+
+    p5.Renderer.prototype.textStyle = function(s) {
+      if (s) {
+        if (
+          s === constants.NORMAL ||
+          s === constants.ITALIC ||
+          s === constants.BOLD
+        ) {
+          this._setProperty('_textStyle', s);
+        }
+
+        return this._applyTextProperties();
+      }
+
+      return this._textStyle;
+    };
+
+    p5.Renderer.prototype.textAscent = function() {
+      if (this._textAscent === null) {
+        this._updateTextMetrics();
+      }
+      return this._textAscent;
+    };
+
+    p5.Renderer.prototype.textDescent = function() {
+      if (this._textDescent === null) {
+        this._updateTextMetrics();
+      }
+      return this._textDescent;
+    };
+
+    p5.Renderer.prototype._applyDefaults = function() {
+      return this;
+    };
+
+    /**
+     * Helper fxn to check font type (system or otf)
+     */
+    p5.Renderer.prototype._isOpenType = function(f) {
+      f = f || this._textFont;
+      return typeof f === 'object' && f.font && f.font.supported;
+    };
+
+    p5.Renderer.prototype._updateTextMetrics = function() {
+      if (this._isOpenType()) {
+        this._setProperty('_textAscent', this._textFont._textAscent());
+        this._setProperty('_textDescent', this._textFont._textDescent());
+        return this;
+      }
+
+      // Adapted from http://stackoverflow.com/a/25355178
+      var text = document.createElement('span');
+      text.style.fontFamily = this._textFont;
+      text.style.fontSize = this._textSize + 'px';
+      text.innerHTML = 'ABCjgq|';
+
+      var block = document.createElement('div');
+      block.style.display = 'inline-block';
+      block.style.width = '1px';
+      block.style.height = '0px';
+
+      var container = document.createElement('div');
+      container.appendChild(text);
+      container.appendChild(block);
+
+      container.style.height = '0px';
+      container.style.overflow = 'hidden';
+      document.body.appendChild(container);
+
+      block.style.verticalAlign = 'baseline';
+      var blockOffset = calculateOffset(block);
+      var textOffset = calculateOffset(text);
+      var ascent = blockOffset[1] - textOffset[1];
+
+      block.style.verticalAlign = 'bottom';
+      blockOffset = calculateOffset(block);
+      textOffset = calculateOffset(text);
+      var height = blockOffset[1] - textOffset[1];
+      var descent = height - ascent;
+
+      document.body.removeChild(container);
+
+      this._setProperty('_textAscent', ascent);
+      this._setProperty('_textDescent', descent);
+
+      return this;
+    };
+
+    /**
+     * Helper fxn to measure ascent and descent.
+     * Adapted from http://stackoverflow.com/a/25355178
+     */
+    function calculateOffset(object) {
+      var currentLeft = 0,
+        currentTop = 0;
+      if (object.offsetParent) {
+        do {
+          currentLeft += object.offsetLeft;
+          currentTop += object.offsetTop;
+        } while ((object = object.offsetParent));
+      } else {
+        currentLeft += object.offsetLeft;
+        currentTop += object.offsetTop;
+      }
+      return [currentLeft, currentTop];
+    }
+
+    module.exports = p5.Renderer;
+
+    },{"../core/constants":21,"./core":22}],30:[function(_dereq_,module,exports){
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var canvas = _dereq_('./canvas');
+    var constants = _dereq_('./constants');
+    var filters = _dereq_('../image/filters');
+
+    _dereq_('./p5.Renderer');
+
+    /**
+     * p5.Renderer2D
+     * The 2D graphics canvas renderer class.
+     * extends p5.Renderer
+     */
+    var styleEmpty = 'rgba(0,0,0,0)';
+    // var alphaThreshold = 0.00125; // minimum visible
+
+    p5.Renderer2D = function(elt, pInst, isMainCanvas) {
+      p5.Renderer.call(this, elt, pInst, isMainCanvas);
+      this.name = 'p5.Renderer2D'; // for friendly debugger system
+      this.drawingContext = this.canvas.getContext('2d');
+      this._pInst._setProperty('drawingContext', this.drawingContext);
+      return this;
+    };
+
+    p5.Renderer2D.prototype = Object.create(p5.Renderer.prototype);
+
+    p5.Renderer2D.prototype._applyDefaults = function() {
+      this._cachedFillStyle = this._cachedStrokeStyle = undefined;
+      this._setFill(constants._DEFAULT_FILL);
+      this._setStroke(constants._DEFAULT_STROKE);
+      this.drawingContext.lineCap = constants.ROUND;
+      this.drawingContext.font = 'normal 12px sans-serif';
+    };
+
+    p5.Renderer2D.prototype.resize = function(w, h) {
+      p5.Renderer.prototype.resize.call(this, w, h);
+      this.drawingContext.scale(
+        this._pInst._pixelDensity,
+        this._pInst._pixelDensity
+      );
+    };
+
+    //////////////////////////////////////////////
+    // COLOR | Setting
+    //////////////////////////////////////////////
+
+    p5.Renderer2D.prototype.background = function() {
+      this.drawingContext.save();
+      this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
+      this.drawingContext.scale(
+        this._pInst._pixelDensity,
+        this._pInst._pixelDensity
+      );
+
+      if (arguments[0] instanceof p5.Image) {
+        this._pInst.image(arguments[0], 0, 0, this.width, this.height);
+      } else {
+        var curFill = this._getFill();
+        // create background rect
+        var color = this._pInst.color.apply(this._pInst, arguments);
+        var newFill = color.toString();
+        this._setFill(newFill);
+        this.drawingContext.fillRect(0, 0, this.width, this.height);
+        // reset fill
+        this._setFill(curFill);
+      }
+      this.drawingContext.restore();
+    };
+
+    p5.Renderer2D.prototype.clear = function() {
+      this.drawingContext.clearRect(0, 0, this.width, this.height);
+    };
+
+    p5.Renderer2D.prototype.fill = function() {
+      var color = this._pInst.color.apply(this._pInst, arguments);
+      this._setFill(color.toString());
+    };
+
+    p5.Renderer2D.prototype.stroke = function() {
+      var color = this._pInst.color.apply(this._pInst, arguments);
+      this._setStroke(color.toString());
+    };
+
+    //////////////////////////////////////////////
+    // IMAGE | Loading & Displaying
+    //////////////////////////////////////////////
+
+    p5.Renderer2D.prototype.image = function(
+      img,
+      sx,
+      sy,
+      sWidth,
+      sHeight,
+      dx,
+      dy,
+      dWidth,
+      dHeight
+    ) {
+      var cnv;
+      try {
+        if (this._tint) {
+          if (p5.MediaElement && img instanceof p5.MediaElement) {
+            img.loadPixels();
+          }
+          if (img.canvas) {
+            cnv = this._getTintedImageCanvas(img);
+          }
+        }
+        if (!cnv) {
+          cnv = img.canvas || img.elt;
+        }
+        this.drawingContext.drawImage(
+          cnv,
+          sx,
+          sy,
+          sWidth,
+          sHeight,
+          dx,
+          dy,
+          dWidth,
+          dHeight
+        );
+      } catch (e) {
+        if (e.name !== 'NS_ERROR_NOT_AVAILABLE') {
+          throw e;
+        }
+      }
+    };
+
+    p5.Renderer2D.prototype._getTintedImageCanvas = function(img) {
+      if (!img.canvas) {
+        return img;
+      }
+      var pixels = filters._toPixels(img.canvas);
+      var tmpCanvas = document.createElement('canvas');
+      tmpCanvas.width = img.canvas.width;
+      tmpCanvas.height = img.canvas.height;
+      var tmpCtx = tmpCanvas.getContext('2d');
+      var id = tmpCtx.createImageData(img.canvas.width, img.canvas.height);
+      var newPixels = id.data;
+      for (var i = 0; i < pixels.length; i += 4) {
+        var r = pixels[i];
+        var g = pixels[i + 1];
+        var b = pixels[i + 2];
+        var a = pixels[i + 3];
+        newPixels[i] = r * this._tint[0] / 255;
+        newPixels[i + 1] = g * this._tint[1] / 255;
+        newPixels[i + 2] = b * this._tint[2] / 255;
+        newPixels[i + 3] = a * this._tint[3] / 255;
+      }
+      tmpCtx.putImageData(id, 0, 0);
+      return tmpCanvas;
+    };
+
+    //////////////////////////////////////////////
+    // IMAGE | Pixels
+    //////////////////////////////////////////////
+
+    p5.Renderer2D.prototype.blendMode = function(mode) {
+      this.drawingContext.globalCompositeOperation = mode;
+    };
+    p5.Renderer2D.prototype.blend = function() {
+      var currBlend = this.drawingContext.globalCompositeOperation;
+      var blendMode = arguments[arguments.length - 1];
+
+      var copyArgs = Array.prototype.slice.call(arguments, 0, arguments.length - 1);
+
+      this.drawingContext.globalCompositeOperation = blendMode;
+      if (this._pInst) {
+        this._pInst.copy.apply(this._pInst, copyArgs);
+      } else {
+        this.copy.apply(this, copyArgs);
+      }
+      this.drawingContext.globalCompositeOperation = currBlend;
+    };
+
+    p5.Renderer2D.prototype.copy = function() {
+      var srcImage, sx, sy, sw, sh, dx, dy, dw, dh;
+      if (arguments.length === 9) {
+        srcImage = arguments[0];
+        sx = arguments[1];
+        sy = arguments[2];
+        sw = arguments[3];
+        sh = arguments[4];
+        dx = arguments[5];
+        dy = arguments[6];
+        dw = arguments[7];
+        dh = arguments[8];
+      } else if (arguments.length === 8) {
+        srcImage = this._pInst;
+        sx = arguments[0];
+        sy = arguments[1];
+        sw = arguments[2];
+        sh = arguments[3];
+        dx = arguments[4];
+        dy = arguments[5];
+        dw = arguments[6];
+        dh = arguments[7];
+      } else {
+        throw new Error('Signature not supported');
+      }
+      p5.Renderer2D._copyHelper(this, srcImage, sx, sy, sw, sh, dx, dy, dw, dh);
+    };
+
+    p5.Renderer2D._copyHelper = function(
+      dstImage,
+      srcImage,
+      sx,
+      sy,
+      sw,
+      sh,
+      dx,
+      dy,
+      dw,
+      dh
+    ) {
+      srcImage.loadPixels();
+      var s = srcImage.canvas.width / srcImage.width;
+      dstImage.drawingContext.drawImage(
+        srcImage.canvas,
+        s * sx,
+        s * sy,
+        s * sw,
+        s * sh,
+        dx,
+        dy,
+        dw,
+        dh
+      );
+    };
+
+    p5.Renderer2D.prototype.get = function(x, y, w, h) {
+      if (
+        x === undefined &&
+        y === undefined &&
+        w === undefined &&
+        h === undefined
+      ) {
+        x = 0;
+        y = 0;
+        w = this.width;
+        h = this.height;
+      } else if (w === undefined && h === undefined) {
+        w = 1;
+        h = 1;
+      }
+
+      // if the section does not overlap the canvas
+      if (x + w < 0 || y + h < 0 || x > this.width || y > this.height) {
+        return [0, 0, 0, 255];
+      }
+
+      var ctx = this._pInst || this;
+      ctx.loadPixels();
+
+      var pd = ctx._pixelDensity;
+
+      // round down to get integer numbers
+      x = Math.floor(x);
+      y = Math.floor(y);
+      w = Math.floor(w);
+      h = Math.floor(h);
+
+      var sx = x * pd;
+      var sy = y * pd;
+      if (w === 1 && h === 1 && !(this instanceof p5.RendererGL)) {
+        var imageData = this.drawingContext.getImageData(sx, sy, 1, 1).data;
+        //imageData = [0,0,0,0];
+        return [imageData[0], imageData[1], imageData[2], imageData[3]];
+      } else {
+        //auto constrain the width and height to
+        //dimensions of the source image
+        var dw = Math.min(w, ctx.width);
+        var dh = Math.min(h, ctx.height);
+        var sw = dw * pd;
+        var sh = dh * pd;
+
+        var region = new p5.Image(dw, dh);
+        region.canvas
+          .getContext('2d')
+          .drawImage(this.canvas, sx, sy, sw, sh, 0, 0, dw, dh);
+
+        return region;
+      }
+    };
+
+    p5.Renderer2D.prototype.loadPixels = function() {
+      var pd = this._pixelDensity || this._pInst._pixelDensity;
+      var w = this.width * pd;
+      var h = this.height * pd;
+      var imageData = this.drawingContext.getImageData(0, 0, w, h);
+      // @todo this should actually set pixels per object, so diff buffers can
+      // have diff pixel arrays.
+      if (this._pInst) {
+        this._pInst._setProperty('imageData', imageData);
+        this._pInst._setProperty('pixels', imageData.data);
+      } else {
+        // if called by p5.Image
+        this._setProperty('imageData', imageData);
+        this._setProperty('pixels', imageData.data);
+      }
+    };
+
+    p5.Renderer2D.prototype.set = function(x, y, imgOrCol) {
+      // round down to get integer numbers
+      x = Math.floor(x);
+      y = Math.floor(y);
+      if (imgOrCol instanceof p5.Image) {
+        this.drawingContext.save();
+        this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
+        this.drawingContext.scale(
+          this._pInst._pixelDensity,
+          this._pInst._pixelDensity
+        );
+        this.drawingContext.drawImage(imgOrCol.canvas, x, y);
+        this.loadPixels.call(this._pInst);
+        this.drawingContext.restore();
+      } else {
+        var ctx = this._pInst || this;
+        var r = 0,
+          g = 0,
+          b = 0,
+          a = 0;
+        var idx =
+          4 *
+          (y * ctx._pixelDensity * (this.width * ctx._pixelDensity) +
+            x * ctx._pixelDensity);
+        if (!ctx.imageData) {
+          ctx.loadPixels.call(ctx);
+        }
+        if (typeof imgOrCol === 'number') {
+          if (idx < ctx.pixels.length) {
+            r = imgOrCol;
+            g = imgOrCol;
+            b = imgOrCol;
+            a = 255;
+            //this.updatePixels.call(this);
+          }
+        } else if (imgOrCol instanceof Array) {
+          if (imgOrCol.length < 4) {
+            throw new Error('pixel array must be of the form [R, G, B, A]');
+          }
+          if (idx < ctx.pixels.length) {
+            r = imgOrCol[0];
+            g = imgOrCol[1];
+            b = imgOrCol[2];
+            a = imgOrCol[3];
+            //this.updatePixels.call(this);
+          }
+        } else if (imgOrCol instanceof p5.Color) {
+          if (idx < ctx.pixels.length) {
+            r = imgOrCol.levels[0];
+            g = imgOrCol.levels[1];
+            b = imgOrCol.levels[2];
+            a = imgOrCol.levels[3];
+            //this.updatePixels.call(this);
+          }
+        }
+        // loop over pixelDensity * pixelDensity
+        for (var i = 0; i < ctx._pixelDensity; i++) {
+          for (var j = 0; j < ctx._pixelDensity; j++) {
+            // loop over
+            idx =
+              4 *
+              ((y * ctx._pixelDensity + j) * this.width * ctx._pixelDensity +
+                (x * ctx._pixelDensity + i));
+            ctx.pixels[idx] = r;
+            ctx.pixels[idx + 1] = g;
+            ctx.pixels[idx + 2] = b;
+            ctx.pixels[idx + 3] = a;
+          }
+        }
+      }
+    };
+
+    p5.Renderer2D.prototype.updatePixels = function(x, y, w, h) {
+      var pd = this._pixelDensity || this._pInst._pixelDensity;
+      if (
+        x === undefined &&
+        y === undefined &&
+        w === undefined &&
+        h === undefined
+      ) {
+        x = 0;
+        y = 0;
+        w = this.width;
+        h = this.height;
+      }
+      w *= pd;
+      h *= pd;
+
+      if (this._pInst) {
+        this.drawingContext.putImageData(this._pInst.imageData, x, y, 0, 0, w, h);
+      } else {
+        this.drawingContext.putImageData(this.imageData, x, y, 0, 0, w, h);
+      }
+    };
+
+    //////////////////////////////////////////////
+    // SHAPE | 2D Primitives
+    //////////////////////////////////////////////
+
+    /**
+     * Generate a cubic Bezier representing an arc on the unit circle of total
+     * angle `size` radians, beginning `start` radians above the x-axis. Up to
+     * four of these curves are combined to make a full arc.
+     *
+     * See www.joecridge.me/bezier.pdf for an explanation of the method.
+     */
+    p5.Renderer2D.prototype._acuteArcToBezier = function _acuteArcToBezier(
+      start,
+      size
+    ) {
+      // Evauate constants.
+      var alpha = size / 2.0,
+        cos_alpha = Math.cos(alpha),
+        sin_alpha = Math.sin(alpha),
+        cot_alpha = 1.0 / Math.tan(alpha),
+        phi = start + alpha, // This is how far the arc needs to be rotated.
+        cos_phi = Math.cos(phi),
+        sin_phi = Math.sin(phi),
+        lambda = (4.0 - cos_alpha) / 3.0,
+        mu = sin_alpha + (cos_alpha - lambda) * cot_alpha;
+
+      // Return rotated waypoints.
+      return {
+        ax: Math.cos(start),
+        ay: Math.sin(start),
+        bx: lambda * cos_phi + mu * sin_phi,
+        by: lambda * sin_phi - mu * cos_phi,
+        cx: lambda * cos_phi - mu * sin_phi,
+        cy: lambda * sin_phi + mu * cos_phi,
+        dx: Math.cos(start + size),
+        dy: Math.sin(start + size)
+      };
+    };
+
+    p5.Renderer2D.prototype.arc = function(x, y, w, h, start, stop, mode) {
+      var ctx = this.drawingContext;
+      var vals = canvas.arcModeAdjust(x, y, w, h, this._ellipseMode);
+      var rx = vals.w / 2.0;
+      var ry = vals.h / 2.0;
+      var epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
+      var arcToDraw = 0;
+      var curves = [];
+
+      // Create curves
+      while (stop - start > epsilon) {
+        arcToDraw = Math.min(stop - start, constants.HALF_PI);
+        curves.push(this._acuteArcToBezier(start, arcToDraw));
+        start += arcToDraw;
+      }
+
+      // Fill curves
+      if (this._doFill) {
+        ctx.beginPath();
+        curves.forEach(function(curve, index) {
+          if (index === 0) {
+            ctx.moveTo(vals.x + curve.ax * rx, vals.y + curve.ay * ry);
+          }
+          // prettier-ignore
+          ctx.bezierCurveTo(vals.x + curve.bx * rx, vals.y + curve.by * ry,
+                              vals.x + curve.cx * rx, vals.y + curve.cy * ry,
+                              vals.x + curve.dx * rx, vals.y + curve.dy * ry);
+        });
+        if (mode === constants.PIE || mode == null) {
+          ctx.lineTo(vals.x, vals.y);
+        }
+        ctx.closePath();
+        ctx.fill();
+      }
+
+      // Stroke curves
+      if (this._doStroke) {
+        ctx.beginPath();
+        curves.forEach(function(curve, index) {
+          if (index === 0) {
+            ctx.moveTo(vals.x + curve.ax * rx, vals.y + curve.ay * ry);
+          }
+          // prettier-ignore
+          ctx.bezierCurveTo(vals.x + curve.bx * rx, vals.y + curve.by * ry,
+                              vals.x + curve.cx * rx, vals.y + curve.cy * ry,
+                              vals.x + curve.dx * rx, vals.y + curve.dy * ry);
+        });
+        if (mode === constants.PIE) {
+          ctx.lineTo(vals.x, vals.y);
+          ctx.closePath();
+        } else if (mode === constants.CHORD) {
+          ctx.closePath();
+        }
+        ctx.stroke();
+      }
+      return this;
+    };
+
+    p5.Renderer2D.prototype.ellipse = function(args) {
+      var ctx = this.drawingContext;
+      var doFill = this._doFill,
+        doStroke = this._doStroke;
+      var x = args[0],
+        y = args[1],
+        w = args[2],
+        h = args[3];
+      if (doFill && !doStroke) {
+        if (this._getFill() === styleEmpty) {
+          return this;
+        }
+      } else if (!doFill && doStroke) {
+        if (this._getStroke() === styleEmpty) {
+          return this;
+        }
+      }
+      var kappa = 0.5522847498,
+        ox = w / 2 * kappa, // control point offset horizontal
+        oy = h / 2 * kappa, // control point offset vertical
+        xe = x + w, // x-end
+        ye = y + h, // y-end
+        xm = x + w / 2, // x-middle
+        ym = y + h / 2; // y-middle
+      ctx.beginPath();
+      ctx.moveTo(x, ym);
+      ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+      ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+      ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+      ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+      ctx.closePath();
+      if (doFill) {
+        ctx.fill();
+      }
+      if (doStroke) {
+        ctx.stroke();
+      }
+    };
+
+    p5.Renderer2D.prototype.line = function(x1, y1, x2, y2) {
+      var ctx = this.drawingContext;
+      if (!this._doStroke) {
+        return this;
+      } else if (this._getStroke() === styleEmpty) {
+        return this;
+      }
+      // Translate the line by (0.5, 0.5) to draw it crisp
+      if (ctx.lineWidth % 2 === 1) {
+        ctx.translate(0.5, 0.5);
+      }
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+      if (ctx.lineWidth % 2 === 1) {
+        ctx.translate(-0.5, -0.5);
+      }
+      return this;
+    };
+
+    p5.Renderer2D.prototype.point = function(x, y) {
+      var ctx = this.drawingContext;
+      if (!this._doStroke) {
+        return this;
+      } else if (this._getStroke() === styleEmpty) {
+        return this;
+      }
+      var s = this._getStroke();
+      var f = this._getFill();
+      x = Math.round(x);
+      y = Math.round(y);
+      // swapping fill color to stroke and back after for correct point rendering
+      this._setFill(s);
+      if (ctx.lineWidth > 1) {
+        ctx.beginPath();
+        ctx.arc(x, y, ctx.lineWidth / 2, 0, constants.TWO_PI, false);
+        ctx.fill();
+      } else {
+        ctx.fillRect(x, y, 1, 1);
+      }
+      this._setFill(f);
+    };
+
+    p5.Renderer2D.prototype.quad = function(x1, y1, x2, y2, x3, y3, x4, y4) {
+      var ctx = this.drawingContext;
+      var doFill = this._doFill,
+        doStroke = this._doStroke;
+      if (doFill && !doStroke) {
+        if (this._getFill() === styleEmpty) {
+          return this;
+        }
+      } else if (!doFill && doStroke) {
+        if (this._getStroke() === styleEmpty) {
+          return this;
+        }
+      }
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.lineTo(x3, y3);
+      ctx.lineTo(x4, y4);
+      ctx.closePath();
+      if (doFill) {
+        ctx.fill();
+      }
+      if (doStroke) {
+        ctx.stroke();
+      }
+      return this;
+    };
+
+    p5.Renderer2D.prototype.rect = function(args) {
+      var x = args[0],
+        y = args[1],
+        w = args[2],
+        h = args[3],
+        tl = args[4],
+        tr = args[5],
+        br = args[6],
+        bl = args[7];
+      var ctx = this.drawingContext;
+      var doFill = this._doFill,
+        doStroke = this._doStroke;
+      if (doFill && !doStroke) {
+        if (this._getFill() === styleEmpty) {
+          return this;
+        }
+      } else if (!doFill && doStroke) {
+        if (this._getStroke() === styleEmpty) {
+          return this;
+        }
+      }
+      // Translate the line by (0.5, 0.5) to draw a crisp rectangle border
+      if (this._doStroke && ctx.lineWidth % 2 === 1) {
+        ctx.translate(0.5, 0.5);
+      }
+      ctx.beginPath();
+
+      if (typeof tl === 'undefined') {
+        // No rounded corners
+        ctx.rect(x, y, w, h);
+      } else {
+        // At least one rounded corner
+        // Set defaults when not specified
+        if (typeof tr === 'undefined') {
+          tr = tl;
+        }
+        if (typeof br === 'undefined') {
+          br = tr;
+        }
+        if (typeof bl === 'undefined') {
+          bl = br;
+        }
+
+        var hw = w / 2;
+        var hh = h / 2;
+
+        // Clip radii
+        if (w < 2 * tl) {
+          tl = hw;
+        }
+        if (h < 2 * tl) {
+          tl = hh;
+        }
+        if (w < 2 * tr) {
+          tr = hw;
+        }
+        if (h < 2 * tr) {
+          tr = hh;
+        }
+        if (w < 2 * br) {
+          br = hw;
+        }
+        if (h < 2 * br) {
+          br = hh;
+        }
+        if (w < 2 * bl) {
+          bl = hw;
+        }
+        if (h < 2 * bl) {
+          bl = hh;
+        }
+
+        // Draw shape
+        ctx.beginPath();
+        ctx.moveTo(x + tl, y);
+        ctx.arcTo(x + w, y, x + w, y + h, tr);
+        ctx.arcTo(x + w, y + h, x, y + h, br);
+        ctx.arcTo(x, y + h, x, y, bl);
+        ctx.arcTo(x, y, x + w, y, tl);
+        ctx.closePath();
+      }
+      if (this._doFill) {
+        ctx.fill();
+      }
+      if (this._doStroke) {
+        ctx.stroke();
+      }
+      if (this._doStroke && ctx.lineWidth % 2 === 1) {
+        ctx.translate(-0.5, -0.5);
+      }
+      return this;
+    };
+
+    p5.Renderer2D.prototype.triangle = function(args) {
+      var ctx = this.drawingContext;
+      var doFill = this._doFill,
+        doStroke = this._doStroke;
+      var x1 = args[0],
+        y1 = args[1];
+      var x2 = args[2],
+        y2 = args[3];
+      var x3 = args[4],
+        y3 = args[5];
+      if (doFill && !doStroke) {
+        if (this._getFill() === styleEmpty) {
+          return this;
+        }
+      } else if (!doFill && doStroke) {
+        if (this._getStroke() === styleEmpty) {
+          return this;
+        }
+      }
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.lineTo(x3, y3);
+      ctx.closePath();
+      if (doFill) {
+        ctx.fill();
+      }
+      if (doStroke) {
+        ctx.stroke();
+      }
+    };
+
+    p5.Renderer2D.prototype.endShape = function(
+      mode,
+      vertices,
+      isCurve,
+      isBezier,
+      isQuadratic,
+      isContour,
+      shapeKind
+    ) {
+      if (vertices.length === 0) {
+        return this;
+      }
+      if (!this._doStroke && !this._doFill) {
+        return this;
+      }
+      var closeShape = mode === constants.CLOSE;
+      var v;
+      if (closeShape && !isContour) {
+        vertices.push(vertices[0]);
+      }
+      var i, j;
+      var numVerts = vertices.length;
+      if (isCurve && (shapeKind === constants.POLYGON || shapeKind === null)) {
+        if (numVerts > 3) {
+          var b = [],
+            s = 1 - this._curveTightness;
+          this.drawingContext.beginPath();
+          this.drawingContext.moveTo(vertices[1][0], vertices[1][1]);
+          for (i = 1; i + 2 < numVerts; i++) {
+            v = vertices[i];
+            b[0] = [v[0], v[1]];
+            b[1] = [
+              v[0] + (s * vertices[i + 1][0] - s * vertices[i - 1][0]) / 6,
+              v[1] + (s * vertices[i + 1][1] - s * vertices[i - 1][1]) / 6
+            ];
+            b[2] = [
+              vertices[i + 1][0] +
+                (s * vertices[i][0] - s * vertices[i + 2][0]) / 6,
+              vertices[i + 1][1] + (s * vertices[i][1] - s * vertices[i + 2][1]) / 6
+            ];
+            b[3] = [vertices[i + 1][0], vertices[i + 1][1]];
+            this.drawingContext.bezierCurveTo(
+              b[1][0],
+              b[1][1],
+              b[2][0],
+              b[2][1],
+              b[3][0],
+              b[3][1]
+            );
+          }
+          if (closeShape) {
+            this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+          }
+          this._doFillStrokeClose();
+        }
+      } else if (
+        isBezier &&
+        (shapeKind === constants.POLYGON || shapeKind === null)
+      ) {
+        this.drawingContext.beginPath();
+        for (i = 0; i < numVerts; i++) {
+          if (vertices[i].isVert) {
+            if (vertices[i].moveTo) {
+              this.drawingContext.moveTo(vertices[i][0], vertices[i][1]);
+            } else {
+              this.drawingContext.lineTo(vertices[i][0], vertices[i][1]);
+            }
+          } else {
+            this.drawingContext.bezierCurveTo(
+              vertices[i][0],
+              vertices[i][1],
+              vertices[i][2],
+              vertices[i][3],
+              vertices[i][4],
+              vertices[i][5]
+            );
+          }
+        }
+        this._doFillStrokeClose();
+      } else if (
+        isQuadratic &&
+        (shapeKind === constants.POLYGON || shapeKind === null)
+      ) {
+        this.drawingContext.beginPath();
+        for (i = 0; i < numVerts; i++) {
+          if (vertices[i].isVert) {
+            if (vertices[i].moveTo) {
+              this.drawingContext.moveTo([0], vertices[i][1]);
+            } else {
+              this.drawingContext.lineTo(vertices[i][0], vertices[i][1]);
+            }
+          } else {
+            this.drawingContext.quadraticCurveTo(
+              vertices[i][0],
+              vertices[i][1],
+              vertices[i][2],
+              vertices[i][3]
+            );
+          }
+        }
+        this._doFillStrokeClose();
+      } else {
+        if (shapeKind === constants.POINTS) {
+          for (i = 0; i < numVerts; i++) {
+            v = vertices[i];
+            if (this._doStroke) {
+              this._pInst.stroke(v[6]);
+            }
+            this._pInst.point(v[0], v[1]);
+          }
+        } else if (shapeKind === constants.LINES) {
+          for (i = 0; i + 1 < numVerts; i += 2) {
+            v = vertices[i];
+            if (this._doStroke) {
+              this._pInst.stroke(vertices[i + 1][6]);
+            }
+            this._pInst.line(v[0], v[1], vertices[i + 1][0], vertices[i + 1][1]);
+          }
+        } else if (shapeKind === constants.TRIANGLES) {
+          for (i = 0; i + 2 < numVerts; i += 3) {
+            v = vertices[i];
+            this.drawingContext.beginPath();
+            this.drawingContext.moveTo(v[0], v[1]);
+            this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+            this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]);
+            this.drawingContext.lineTo(v[0], v[1]);
+            if (this._doFill) {
+              this._pInst.fill(vertices[i + 2][5]);
+              this.drawingContext.fill();
+            }
+            if (this._doStroke) {
+              this._pInst.stroke(vertices[i + 2][6]);
+              this.drawingContext.stroke();
+            }
+            this.drawingContext.closePath();
+          }
+        } else if (shapeKind === constants.TRIANGLE_STRIP) {
+          for (i = 0; i + 1 < numVerts; i++) {
+            v = vertices[i];
+            this.drawingContext.beginPath();
+            this.drawingContext.moveTo(vertices[i + 1][0], vertices[i + 1][1]);
+            this.drawingContext.lineTo(v[0], v[1]);
+            if (this._doStroke) {
+              this._pInst.stroke(vertices[i + 1][6]);
+            }
+            if (this._doFill) {
+              this._pInst.fill(vertices[i + 1][5]);
+            }
+            if (i + 2 < numVerts) {
+              this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]);
+              if (this._doStroke) {
+                this._pInst.stroke(vertices[i + 2][6]);
+              }
+              if (this._doFill) {
+                this._pInst.fill(vertices[i + 2][5]);
+              }
+            }
+            this._doFillStrokeClose();
+          }
+        } else if (shapeKind === constants.TRIANGLE_FAN) {
+          if (numVerts > 2) {
+            // For performance reasons, try to batch as many of the
+            // fill and stroke calls as possible.
+            this.drawingContext.beginPath();
+            for (i = 2; i < numVerts; i++) {
+              v = vertices[i];
+              this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
+              this.drawingContext.lineTo(vertices[i - 1][0], vertices[i - 1][1]);
+              this.drawingContext.lineTo(v[0], v[1]);
+              this.drawingContext.lineTo(vertices[0][0], vertices[0][1]);
+              // If the next colour is going to be different, stroke / fill now
+              if (i < numVerts - 1) {
+                if (
+                  (this._doFill && v[5] !== vertices[i + 1][5]) ||
+                  (this._doStroke && v[6] !== vertices[i + 1][6])
+                ) {
+                  if (this._doFill) {
+                    this._pInst.fill(v[5]);
+                    this.drawingContext.fill();
+                    this._pInst.fill(vertices[i + 1][5]);
+                  }
+                  if (this._doStroke) {
+                    this._pInst.stroke(v[6]);
+                    this.drawingContext.stroke();
+                    this._pInst.stroke(vertices[i + 1][6]);
+                  }
+                  this.drawingContext.closePath();
+                  this.drawingContext.beginPath(); // Begin the next one
+                }
+              }
+            }
+            this._doFillStrokeClose();
+          }
+        } else if (shapeKind === constants.QUADS) {
+          for (i = 0; i + 3 < numVerts; i += 4) {
+            v = vertices[i];
+            this.drawingContext.beginPath();
+            this.drawingContext.moveTo(v[0], v[1]);
+            for (j = 1; j < 4; j++) {
+              this.drawingContext.lineTo(vertices[i + j][0], vertices[i + j][1]);
+            }
+            this.drawingContext.lineTo(v[0], v[1]);
+            if (this._doFill) {
+              this._pInst.fill(vertices[i + 3][5]);
+            }
+            if (this._doStroke) {
+              this._pInst.stroke(vertices[i + 3][6]);
+            }
+            this._doFillStrokeClose();
+          }
+        } else if (shapeKind === constants.QUAD_STRIP) {
+          if (numVerts > 3) {
+            for (i = 0; i + 1 < numVerts; i += 2) {
+              v = vertices[i];
+              this.drawingContext.beginPath();
+              if (i + 3 < numVerts) {
+                this.drawingContext.moveTo(vertices[i + 2][0], vertices[i + 2][1]);
+                this.drawingContext.lineTo(v[0], v[1]);
+                this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+                this.drawingContext.lineTo(vertices[i + 3][0], vertices[i + 3][1]);
+                if (this._doFill) {
+                  this._pInst.fill(vertices[i + 3][5]);
+                }
+                if (this._doStroke) {
+                  this._pInst.stroke(vertices[i + 3][6]);
+                }
+              } else {
+                this.drawingContext.moveTo(v[0], v[1]);
+                this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
+              }
+              this._doFillStrokeClose();
+            }
+          }
+        } else {
+          this.drawingContext.beginPath();
+          this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
+          for (i = 1; i < numVerts; i++) {
+            v = vertices[i];
+            if (v.isVert) {
+              if (v.moveTo) {
+                this.drawingContext.moveTo(v[0], v[1]);
+              } else {
+                this.drawingContext.lineTo(v[0], v[1]);
+              }
+            }
+          }
+          this._doFillStrokeClose();
+        }
+      }
+      isCurve = false;
+      isBezier = false;
+      isQuadratic = false;
+      isContour = false;
+      if (closeShape) {
+        vertices.pop();
+      }
+      return this;
+    };
+    //////////////////////////////////////////////
+    // SHAPE | Attributes
+    //////////////////////////////////////////////
+
+    p5.Renderer2D.prototype.noSmooth = function() {
+      if ('imageSmoothingEnabled' in this.drawingContext) {
+        this.drawingContext.imageSmoothingEnabled = false;
+      }
+      return this;
+    };
+
+    p5.Renderer2D.prototype.smooth = function() {
+      if ('imageSmoothingEnabled' in this.drawingContext) {
+        this.drawingContext.imageSmoothingEnabled = true;
+      }
+      return this;
+    };
+
+    p5.Renderer2D.prototype.strokeCap = function(cap) {
+      if (
+        cap === constants.ROUND ||
+        cap === constants.SQUARE ||
+        cap === constants.PROJECT
+      ) {
+        this.drawingContext.lineCap = cap;
+      }
+      return this;
+    };
+
+    p5.Renderer2D.prototype.strokeJoin = function(join) {
+      if (
+        join === constants.ROUND ||
+        join === constants.BEVEL ||
+        join === constants.MITER
+      ) {
+        this.drawingContext.lineJoin = join;
+      }
+      return this;
+    };
+
+    p5.Renderer2D.prototype.strokeWeight = function(w) {
+      if (typeof w === 'undefined' || w === 0) {
+        // hack because lineWidth 0 doesn't work
+        this.drawingContext.lineWidth = 0.0001;
+      } else {
+        this.drawingContext.lineWidth = w;
+      }
+      return this;
+    };
+
+    p5.Renderer2D.prototype._getFill = function() {
+      if (!this._cachedFillStyle) {
+        this._cachedFillStyle = this.drawingContext.fillStyle;
+      }
+      return this._cachedFillStyle;
+    };
+
+    p5.Renderer2D.prototype._setFill = function(fillStyle) {
+      if (fillStyle !== this._cachedFillStyle) {
+        this.drawingContext.fillStyle = fillStyle;
+        this._cachedFillStyle = fillStyle;
+      }
+    };
+
+    p5.Renderer2D.prototype._getStroke = function() {
+      if (!this._cachedStrokeStyle) {
+        this._cachedStrokeStyle = this.drawingContext.strokeStyle;
+      }
+      return this._cachedStrokeStyle;
+    };
+
+    p5.Renderer2D.prototype._setStroke = function(strokeStyle) {
+      if (strokeStyle !== this._cachedStrokeStyle) {
+        this.drawingContext.strokeStyle = strokeStyle;
+        this._cachedStrokeStyle = strokeStyle;
+      }
+    };
+
+    //////////////////////////////////////////////
+    // SHAPE | Curves
+    //////////////////////////////////////////////
+    p5.Renderer2D.prototype.bezier = function(x1, y1, x2, y2, x3, y3, x4, y4) {
+      this._pInst.beginShape();
+      this._pInst.vertex(x1, y1);
+      this._pInst.bezierVertex(x2, y2, x3, y3, x4, y4);
+      this._pInst.endShape();
+      return this;
+    };
+
+    p5.Renderer2D.prototype.curve = function(x1, y1, x2, y2, x3, y3, x4, y4) {
+      this._pInst.beginShape();
+      this._pInst.curveVertex(x1, y1);
+      this._pInst.curveVertex(x2, y2);
+      this._pInst.curveVertex(x3, y3);
+      this._pInst.curveVertex(x4, y4);
+      this._pInst.endShape();
+      return this;
+    };
+
+    //////////////////////////////////////////////
+    // SHAPE | Vertex
+    //////////////////////////////////////////////
+
+    p5.Renderer2D.prototype._doFillStrokeClose = function() {
+      if (this._doFill) {
+        this.drawingContext.fill();
+      }
+      if (this._doStroke) {
+        this.drawingContext.stroke();
+      }
+      this.drawingContext.closePath();
+    };
+
+    //////////////////////////////////////////////
+    // TRANSFORM
+    //////////////////////////////////////////////
+
+    p5.Renderer2D.prototype.applyMatrix = function(a, b, c, d, e, f) {
+      this.drawingContext.transform(a, b, c, d, e, f);
+    };
+
+    p5.Renderer2D.prototype.resetMatrix = function() {
+      this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
+      this.drawingContext.scale(
+        this._pInst._pixelDensity,
+        this._pInst._pixelDensity
+      );
+      return this;
+    };
+
+    p5.Renderer2D.prototype.rotate = function(r) {
+      this.drawingContext.rotate(r);
+    };
+
+    p5.Renderer2D.prototype.scale = function(x, y) {
+      this.drawingContext.scale(x, y);
+      return this;
+    };
+
+    p5.Renderer2D.prototype.shearX = function(angle) {
+      if (this._pInst._angleMode === constants.DEGREES) {
+        // undoing here, because it gets redone in tan()
+        angle = this._pInst.degrees(angle);
+      }
+      this.drawingContext.transform(1, 0, this._pInst.tan(angle), 1, 0, 0);
+      return this;
+    };
+
+    p5.Renderer2D.prototype.shearY = function(angle) {
+      if (this._pInst._angleMode === constants.DEGREES) {
+        // undoing here, because it gets redone in tan()
+        angle = this._pInst.degrees(angle);
+      }
+      this.drawingContext.transform(1, this._pInst.tan(angle), 0, 1, 0, 0);
+      return this;
+    };
+
+    p5.Renderer2D.prototype.translate = function(x, y) {
+      this.drawingContext.translate(x, y);
+      return this;
+    };
+
+    //////////////////////////////////////////////
+    // TYPOGRAPHY
+    //
+    //////////////////////////////////////////////
+
+    p5.Renderer2D.prototype.text = function(str, x, y, maxWidth, maxHeight) {
+      var p = this._pInst,
+        cars,
+        n,
+        ii,
+        jj,
+        line,
+        testLine,
+        testWidth,
+        words,
+        totalHeight,
+        baselineHacked,
+        finalMaxHeight = Number.MAX_VALUE;
+
+      // baselineHacked: (HACK)
+      // A temporary fix to conform to Processing's implementation
+      // of BASELINE vertical alignment in a bounding box
+
+      if (!(this._doFill || this._doStroke)) {
+        return;
+      }
+
+      if (typeof str !== 'string') {
+        str = str.toString();
+      }
+
+      str = str.replace(/(\t)/g, '  ');
+      cars = str.split('\n');
+
+      if (typeof maxWidth !== 'undefined') {
+        totalHeight = 0;
+        for (ii = 0; ii < cars.length; ii++) {
+          line = '';
+          words = cars[ii].split(' ');
+          for (n = 0; n < words.length; n++) {
+            testLine = line + words[n] + ' ';
+            testWidth = this.textWidth(testLine);
+            if (testWidth > maxWidth) {
+              line = words[n] + ' ';
+              totalHeight += p.textLeading();
+            } else {
+              line = testLine;
+            }
+          }
+        }
+
+        if (this._rectMode === constants.CENTER) {
+          x -= maxWidth / 2;
+          y -= maxHeight / 2;
+        }
+
+        switch (this.drawingContext.textAlign) {
+          case constants.CENTER:
+            x += maxWidth / 2;
+            break;
+          case constants.RIGHT:
+            x += maxWidth;
+            break;
+        }
+
+        if (typeof maxHeight !== 'undefined') {
+          switch (this.drawingContext.textBaseline) {
+            case constants.BOTTOM:
+              y += maxHeight - totalHeight;
+              break;
+            case constants._CTX_MIDDLE: // CENTER?
+              y += (maxHeight - totalHeight) / 2;
+              break;
+            case constants.BASELINE:
+              baselineHacked = true;
+              this.drawingContext.textBaseline = constants.TOP;
+              break;
+          }
+
+          // remember the max-allowed y-position for any line (fix to #928)
+          finalMaxHeight = y + maxHeight - p.textAscent();
+        }
+
+        for (ii = 0; ii < cars.length; ii++) {
+          line = '';
+          words = cars[ii].split(' ');
+          for (n = 0; n < words.length; n++) {
+            testLine = line + words[n] + ' ';
+            testWidth = this.textWidth(testLine);
+            if (testWidth > maxWidth && line.length > 0) {
+              this._renderText(p, line, x, y, finalMaxHeight);
+              line = words[n] + ' ';
+              y += p.textLeading();
+            } else {
+              line = testLine;
+            }
+          }
+
+          this._renderText(p, line, x, y, finalMaxHeight);
+          y += p.textLeading();
+        }
+      } else {
+        // Offset to account for vertically centering multiple lines of text - no
+        // need to adjust anything for vertical align top or baseline
+        var offset = 0,
+          vAlign = p.textAlign().vertical;
+        if (vAlign === constants.CENTER) {
+          offset = (cars.length - 1) * p.textLeading() / 2;
+        } else if (vAlign === constants.BOTTOM) {
+          offset = (cars.length - 1) * p.textLeading();
+        }
+
+        for (jj = 0; jj < cars.length; jj++) {
+          this._renderText(p, cars[jj], x, y - offset, finalMaxHeight);
+          y += p.textLeading();
+        }
+      }
+
+      if (baselineHacked) {
+        this.drawingContext.textBaseline = constants.BASELINE;
+      }
+
+      return p;
+    };
+
+    p5.Renderer2D.prototype._renderText = function(p, line, x, y, maxY) {
+      if (y >= maxY) {
+        return; // don't render lines beyond our maxY position
+      }
+
+      p.push(); // fix to #803
+
+      if (!this._isOpenType()) {
+        // a system/browser font
+
+        // no stroke unless specified by user
+        if (this._doStroke && this._strokeSet) {
+          this.drawingContext.strokeText(line, x, y);
+        }
+
+        if (this._doFill) {
+          // if fill hasn't been set by user, use default text fill
+          if (!this._fillSet) {
+            this._setFill(constants._DEFAULT_TEXT_FILL);
+          }
+
+          this.drawingContext.fillText(line, x, y);
+        }
+      } else {
+        // an opentype font, let it handle the rendering
+
+        this._textFont._renderPath(line, x, y, { renderer: this });
+      }
+
+      p.pop();
+
+      return p;
+    };
+
+    p5.Renderer2D.prototype.textWidth = function(s) {
+      if (this._isOpenType()) {
+        return this._textFont._textWidth(s, this._textSize);
+      }
+
+      return this.drawingContext.measureText(s).width;
+    };
+
+    p5.Renderer2D.prototype.textAlign = function(h, v) {
+      if (typeof h !== 'undefined') {
+        if (
+          h === constants.LEFT ||
+          h === constants.RIGHT ||
+          h === constants.CENTER
+        ) {
+          this.drawingContext.textAlign = h;
+        }
+
+        if (
+          v === constants.TOP ||
+          v === constants.BOTTOM ||
+          v === constants.CENTER ||
+          v === constants.BASELINE
+        ) {
+          if (v === constants.CENTER) {
+            this.drawingContext.textBaseline = constants._CTX_MIDDLE;
+          } else {
+            this.drawingContext.textBaseline = v;
+          }
+        }
+
+        return this._pInst;
+      } else {
+        var valign = this.drawingContext.textBaseline;
+
+        if (valign === constants._CTX_MIDDLE) {
+          valign = constants.CENTER;
+        }
+
+        return {
+          horizontal: this.drawingContext.textAlign,
+          vertical: valign
+        };
+      }
+    };
+
+    p5.Renderer2D.prototype._applyTextProperties = function() {
+      var font,
+        p = this._pInst;
+
+      this._setProperty('_textAscent', null);
+      this._setProperty('_textDescent', null);
+
+      font = this._textFont;
+
+      if (this._isOpenType()) {
+        font = this._textFont.font.familyName;
+        this._setProperty('_textStyle', this._textFont.font.styleName);
+      }
+
+      this.drawingContext.font =
+        (this._textStyle || 'normal') +
+        ' ' +
+        (this._textSize || 12) +
+        'px ' +
+        (font || 'sans-serif');
+
+      return p;
+    };
+
+    //////////////////////////////////////////////
+    // STRUCTURE
+    //////////////////////////////////////////////
+
+    p5.Renderer2D.prototype.push = function() {
+      this.drawingContext.save();
+    };
+
+    p5.Renderer2D.prototype.pop = function() {
+      this.drawingContext.restore();
+      // Re-cache the fill / stroke state
+      this._cachedFillStyle = this.drawingContext.fillStyle;
+      this._cachedStrokeStyle = this.drawingContext.strokeStyle;
+    };
+
+    module.exports = p5.Renderer2D;
+
+    },{"../image/filters":41,"./canvas":20,"./constants":21,"./core":22,"./p5.Renderer":29}],31:[function(_dereq_,module,exports){
+    /**
+     * @module Rendering
+     * @submodule Rendering
+     * @for p5
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var constants = _dereq_('./constants');
+    _dereq_('./p5.Graphics');
+    _dereq_('./p5.Renderer2D');
+    _dereq_('../webgl/p5.RendererGL');
+    var defaultId = 'defaultCanvas0'; // this gets set again in createCanvas
+
+    /**
+     * Creates a canvas element in the document, and sets the dimensions of it
+     * in pixels. This method should be called only once at the start of setup.
+     * Calling createCanvas more than once in a sketch will result in very
+     * unpredictable behavior. If you want more than one drawing canvas
+     * you could use createGraphics (hidden by default but it can be shown).
+     * 


+     * The system variables width and height are set by the parameters passed
+     * to this function. If createCanvas() is not used, the window will be
+     * given a default size of 100x100 pixels.
+     * 


+     * For more ways to position the canvas, see the
+     * 
+     * positioning the canvas wiki page.
+     *
+     * @method createCanvas
+     * @param  {Number} w width of the canvas
+     * @param  {Number} h height of the canvas
+     * @param  {Constant} [renderer] either P2D or WEBGL
+     * @return {HTMLCanvasElement} canvas generated
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 50);
+     *   background(153);
+     *   line(0, 0, width, height);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * Black line extending from top-left of canvas to bottom right.
+     *
+     */
+
+    p5.prototype.createCanvas = function(w, h, renderer) {
+      p5._validateParameters('createCanvas', arguments);
+      //optional: renderer, otherwise defaults to p2d
+      var r = renderer || constants.P2D;
+      var c;
+
+      if (r === constants.WEBGL) {
+        c = document.getElementById(defaultId);
+        if (c) {
+          //if defaultCanvas already exists
+          c.parentNode.removeChild(c); //replace the existing defaultCanvas
+          var thisRenderer = this._renderer;
+          this._elements = this._elements.filter(function(e) {
+            return e !== thisRenderer;
+          });
+        }
+        c = document.createElement('canvas');
+        c.id = defaultId;
+      } else {
+        if (!this._defaultGraphicsCreated) {
+          c = document.createElement('canvas');
+          var i = 0;
+          while (document.getElementById('defaultCanvas' + i)) {
+            i++;
+          }
+          defaultId = 'defaultCanvas' + i;
+          c.id = defaultId;
+        } else {
+          // resize the default canvas if new one is created
+          c = this.canvas;
+        }
+      }
+
+      // set to invisible if still in setup (to prevent flashing with manipulate)
+      if (!this._setupDone) {
+        c.dataset.hidden = true; // tag to show later
+        c.style.visibility = 'hidden';
+      }
+
+      if (this._userNode) {
+        // user input node case
+        this._userNode.appendChild(c);
+      } else {
+        document.body.appendChild(c);
+      }
+
+      // Init our graphics renderer
+      //webgl mode
+      if (r === constants.WEBGL) {
+        this._setProperty('_renderer', new p5.RendererGL(c, this, true));
+        this._elements.push(this._renderer);
+      } else {
+        //P2D mode
+        if (!this._defaultGraphicsCreated) {
+          this._setProperty('_renderer', new p5.Renderer2D(c, this, true));
+          this._defaultGraphicsCreated = true;
+          this._elements.push(this._renderer);
+        }
+      }
+      this._renderer.resize(w, h);
+      this._renderer._applyDefaults();
+      return this._renderer;
+    };
+
+    /**
+     * Resizes the canvas to given width and height. The canvas will be cleared
+     * and draw will be called immediately, allowing the sketch to re-render itself
+     * in the resized canvas.
+     * @method resizeCanvas
+     * @param  {Number} w width of the canvas
+     * @param  {Number} h height of the canvas
+     * @param  {Boolean} [noRedraw] don't redraw the canvas immediately
+     * @example
+     * 

+     * function setup() {
+     *   createCanvas(windowWidth, windowHeight);
+     * }
+     *
+     * function draw() {
+     *   background(0, 100, 200);
+     * }
+     *
+     * function windowResized() {
+     *   resizeCanvas(windowWidth, windowHeight);
+     * }
+     * 

+     *
+     * @alt
+     * No image displayed.
+     *
+     */
+    p5.prototype.resizeCanvas = function(w, h, noRedraw) {
+      p5._validateParameters('resizeCanvas', arguments);
+      if (this._renderer) {
+        // save canvas properties
+        var props = {};
+        for (var key in this.drawingContext) {
+          var val = this.drawingContext[key];
+          if (typeof val !== 'object' && typeof val !== 'function') {
+            props[key] = val;
+          }
+        }
+        this._renderer.resize(w, h);
+        // reset canvas properties
+        for (var savedKey in props) {
+          try {
+            this.drawingContext[savedKey] = props[savedKey];
+          } catch (err) {
+            // ignore read-only property errors
+          }
+        }
+        if (!noRedraw) {
+          this.redraw();
+        }
+      }
+    };
+
+    /**
+     * Removes the default canvas for a p5 sketch that doesn't
+     * require a canvas
+     * @method noCanvas
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   noCanvas();
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.prototype.noCanvas = function() {
+      if (this.canvas) {
+        this.canvas.parentNode.removeChild(this.canvas);
+      }
+    };
+
+    /**
+     * Creates and returns a new p5.Renderer object. Use this class if you need
+     * to draw into an off-screen graphics buffer. The two parameters define the
+     * width and height in pixels.
+     *
+     * @method createGraphics
+     * @param  {Number} w width of the offscreen graphics buffer
+     * @param  {Number} h height of the offscreen graphics buffer
+     * @param  {Constant} [renderer] either P2D or WEBGL
+     * undefined defaults to p2d
+     * @return {p5.Graphics} offscreen graphics buffer
+     * @example
+     * 

+     * 
+     * var pg;
+     * function setup() {
+     *   createCanvas(100, 100);
+     *   pg = createGraphics(100, 100);
+     * }
+     * function draw() {
+     *   background(200);
+     *   pg.background(100);
+     *   pg.noStroke();
+     *   pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
+     *   image(pg, 50, 50);
+     *   image(pg, 0, 0, 50, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 4 grey squares alternating light and dark grey. White quarter circle mid-left.
+     *
+     */
+    p5.prototype.createGraphics = function(w, h, renderer) {
+      p5._validateParameters('createGraphics', arguments);
+      return new p5.Graphics(w, h, renderer, this);
+    };
+
+    /**
+     * Blends the pixels in the display window according to the defined mode.
+     * There is a choice of the following modes to blend the source pixels (A)
+     * with the ones of pixels already in the display window (B):
+     * 
    
+     * 
  • BLEND - linear interpolation of colours: C =
+     * A*factor + B. This is the default blending mode.
    • 
+     * 
  • ADD - sum of A and B
    • 
+     * 
  • DARKEST - only the darkest colour succeeds: C =
+     * min(A*factor, B).
    • 
+     * 
  • LIGHTEST - only the lightest colour succeeds: C =
+     * max(A*factor, B).
    • 
+     * 
  • DIFFERENCE - subtract colors from underlying image.
    • 
+     * 
  • EXCLUSION - similar to DIFFERENCE, but less
+     * extreme.
    • 
+     * 
  • MULTIPLY - multiply the colors, result will always be
+     * darker.
    • 
+     * 
  • SCREEN - opposite multiply, uses inverse values of the
+     * colors.
    • 
+     * 
  • REPLACE - the pixels entirely replace the others and
+     * don't utilize alpha (transparency) values.
    • 
+     * 
  • OVERLAY - mix of MULTIPLY and SCREEN
+     * . Multiplies dark values, and screens light values.
    • 
+     * 
  • HARD_LIGHT - SCREEN when greater than 50%
+     * gray, MULTIPLY when lower.
    • 
+     * 
  • SOFT_LIGHT - mix of DARKEST and
+     * LIGHTEST. Works like OVERLAY, but not as harsh.
+     * 
    • 
+     * 
  • DODGE - lightens light tones and increases contrast,
+     * ignores darks.
    • 
+     * 
  • BURN - darker areas are applied, increasing contrast,
+     * ignores lights.
    • 
+     * 

+     *
+     * @method blendMode
+     * @param  {Constant} mode blend mode to set for canvas.
+     *                either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
+     *                EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+     *                SOFT_LIGHT, DODGE, BURN, ADD or NORMAL
+     * @example
+     * 

+     * 
+     * blendMode(LIGHTEST);
+     * strokeWeight(30);
+     * stroke(80, 150, 255);
+     * line(25, 25, 75, 75);
+     * stroke(255, 50, 50);
+     * line(75, 25, 25, 75);
+     * 
+     * 

+     * 

+     * 
+     * blendMode(MULTIPLY);
+     * strokeWeight(30);
+     * stroke(80, 150, 255);
+     * line(25, 25, 75, 75);
+     * stroke(255, 50, 50);
+     * line(75, 25, 25, 75);
+     * 
+     * 

+     * @alt
+     * translucent image thick red & blue diagonal rounded lines intersecting center
+     * Thick red & blue diagonal rounded lines intersecting center. dark at overlap
+     *
+     */
+    p5.prototype.blendMode = function(mode) {
+      p5._validateParameters('blendMode', arguments);
+      if (
+        mode === constants.BLEND ||
+        mode === constants.DARKEST ||
+        mode === constants.LIGHTEST ||
+        mode === constants.DIFFERENCE ||
+        mode === constants.MULTIPLY ||
+        mode === constants.EXCLUSION ||
+        mode === constants.SCREEN ||
+        mode === constants.REPLACE ||
+        mode === constants.OVERLAY ||
+        mode === constants.HARD_LIGHT ||
+        mode === constants.SOFT_LIGHT ||
+        mode === constants.DODGE ||
+        mode === constants.BURN ||
+        mode === constants.ADD ||
+        mode === constants.NORMAL
+      ) {
+        this._renderer.blendMode(mode);
+      } else {
+        throw new Error('Mode ' + mode + ' not recognized.');
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../webgl/p5.RendererGL":73,"./constants":21,"./core":22,"./p5.Graphics":28,"./p5.Renderer2D":30}],32:[function(_dereq_,module,exports){
+    'use strict';
+
+    // requestAnim shim layer by Paul Irish
+    window.requestAnimationFrame = (function() {
+      return (
+        window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        window.oRequestAnimationFrame ||
+        window.msRequestAnimationFrame ||
+        function(callback, element) {
+          // should '60' here be framerate?
+          window.setTimeout(callback, 1000 / 60);
+        }
+      );
+    })();
+
+    // use window.performance() to get max fast and accurate time in milliseconds
+    window.performance = window.performance || {};
+    window.performance.now = (function() {
+      var load_date = Date.now();
+      return (
+        window.performance.now ||
+        window.performance.mozNow ||
+        window.performance.msNow ||
+        window.performance.oNow ||
+        window.performance.webkitNow ||
+        function() {
+          return Date.now() - load_date;
+        }
+      );
+    })();
+
+    /*
+    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+    // http://my.opera.com/emoller/blog/2011/12/20/
+    // requestanimationframe-for-smart-er-animating
+    // requestAnimationFrame polyfill by Erik Möller
+    // fixes from Paul Irish and Tino Zijdel
+    (function() {
+      var lastTime = 0;
+      var vendors = ['ms', 'moz', 'webkit', 'o'];
+      for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame =
+          window[vendors[x]+'RequestAnimationFrame'];
+        window.cancelAnimationFrame =
+          window[vendors[x]+'CancelAnimationFrame'] ||
+          window[vendors[x]+'CancelRequestAnimationFrame'];
+      }
+
+      if (!window.requestAnimationFrame) {
+        window.requestAnimationFrame = function(callback, element) {
+          var currTime = new Date().getTime();
+          var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+          var id = window.setTimeout(function()
+            { callback(currTime + timeToCall); }, timeToCall);
+          lastTime = currTime + timeToCall;
+          return id;
+        };
+      }
+
+      if (!window.cancelAnimationFrame) {
+        window.cancelAnimationFrame = function(id) {
+          clearTimeout(id);
+        };
+      }
+    }());
+    */
+
+    /**
+     * shim for Uint8ClampedArray.slice
+     * (allows arrayCopy to work with pixels[])
+     * with thanks to http://halfpapstudios.com/blog/tag/html5-canvas/
+     * Enumerable set to false to protect for...in from
+     * Uint8ClampedArray.prototype pollution.
+     */
+    (function() {
+      'use strict';
+      if (
+        typeof Uint8ClampedArray !== 'undefined' &&
+        !Uint8ClampedArray.prototype.slice
+      ) {
+        Object.defineProperty(Uint8ClampedArray.prototype, 'slice', {
+          value: Array.prototype.slice,
+          writable: true,
+          configurable: true,
+          enumerable: false
+        });
+      }
+    })();
+
+    },{}],33:[function(_dereq_,module,exports){
+    /**
+     * @module Structure
+     * @submodule Structure
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+
+    p5.prototype.exit = function() {
+      throw 'exit() not implemented, see remove()';
+    };
+    /**
+     * Stops p5.js from continuously executing the code within draw().
+     * If loop() is called, the code in draw() begins to run continuously again.
+     * If using noLoop() in setup(), it should be the last line inside the block.
+     * 


+     * When noLoop() is used, it's not possible to manipulate or access the
+     * screen inside event handling functions such as mousePressed() or
+     * keyPressed(). Instead, use those functions to call redraw() or loop(),
+     * which will run draw(), which can update the screen properly. This means
+     * that when noLoop() has been called, no drawing can happen, and functions
+     * like saveFrame() or loadPixels() may not be used.
+     * 


+     * Note that if the sketch is resized, redraw() will be called to update
+     * the sketch, even after noLoop() has been specified. Otherwise, the sketch
+     * would enter an odd state until loop() was called.
+     *
+     * @method noLoop
+     * @example
+     * 

+     * function setup() {
+     *   createCanvas(100, 100);
+     *   background(200);
+     *   noLoop();
+     * }
+
+     * function draw() {
+     *   line(10, 10, 90, 90);
+     * }
+     * 

+     *
+     * 

+     * var x = 0;
+     * function setup() {
+     *   createCanvas(100, 100);
+     * }
+     *
+     * function draw() {
+     *   background(204);
+     *   x = x + 0.1;
+     *   if (x > width) {
+     *     x = 0;
+     *   }
+     *   line(x, 0, x, height);
+     * }
+     *
+     * function mousePressed() {
+     *   noLoop();
+     * }
+     *
+     * function mouseReleased() {
+     *   loop();
+     * }
+     * 

+     *
+     * @alt
+     * 113 pixel long line extending from top-left to bottom right of canvas.
+     * horizontal line moves slowly from left. Loops but stops on mouse press.
+     *
+     */
+    p5.prototype.noLoop = function() {
+      this._loop = false;
+    };
+    /**
+     * By default, p5.js loops through draw() continuously, executing the code
+     * within it. However, the draw() loop may be stopped by calling noLoop().
+     * In that case, the draw() loop can be resumed with loop().
+     *
+     * @method loop
+     * @example
+     * 

+     * var x = 0;
+     * function setup() {
+     *   createCanvas(100, 100);
+     *   noLoop();
+     * }
+     *
+     * function draw() {
+     *   background(204);
+     *   x = x + 0.1;
+     *   if (x > width) {
+     *     x = 0;
+     *   }
+     *   line(x, 0, x, height);
+     * }
+     *
+     * function mousePressed() {
+     *   loop();
+     * }
+     *
+     * function mouseReleased() {
+     *   noLoop();
+     * }
+     * 

+     *
+     * @alt
+     * horizontal line moves slowly from left. Loops but stops on mouse press.
+     *
+     */
+
+    p5.prototype.loop = function() {
+      this._loop = true;
+      this._draw();
+    };
+
+    function assign(dest, varArgs) {
+      for (var index = 1; index < arguments.length; index++) {
+        var src = arguments[index];
+        if (src != null) {
+          for (var key in src) {
+            if (src.hasOwnProperty(key)) {
+              dest[key] = src[key];
+            }
+          }
+        }
+      }
+    }
+
+    /**
+     * The push() function saves the current drawing style settings and
+     * transformations, while pop() restores these settings. Note that these
+     * functions are always used together. They allow you to change the style
+     * and transformation settings and later return to what you had. When a new
+     * state is started with push(), it builds on the current style and transform
+     * information. The push() and pop() functions can be embedded to provide
+     * more control. (See the second example for a demonstration.)
+     * 


+     * push() stores information related to the current transformation state
+     * and style settings controlled by the following functions: fill(),
+     * stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),
+     * imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),
+     * textFont(), textMode(), textSize(), textLeading().
+     *
+     * @method push
+     * @example
+     * 

+     * 
+     * ellipse(0, 50, 33, 33); // Left circle
+     *
+     * push(); // Start a new drawing state
+     * strokeWeight(10);
+     * fill(204, 153, 0);
+     * translate(50, 0);
+     * ellipse(0, 50, 33, 33); // Middle circle
+     * pop(); // Restore original state
+     *
+     * ellipse(100, 50, 33, 33); // Right circle
+     * 
+     * 

+     * 

+     * 
+     * ellipse(0, 50, 33, 33); // Left circle
+     *
+     * push(); // Start a new drawing state
+     * strokeWeight(10);
+     * fill(204, 153, 0);
+     * ellipse(33, 50, 33, 33); // Left-middle circle
+     *
+     * push(); // Start another new drawing state
+     * stroke(0, 102, 153);
+     * ellipse(66, 50, 33, 33); // Right-middle circle
+     * pop(); // Restore previous state
+     *
+     * pop(); // Restore original state
+     *
+     * ellipse(100, 50, 33, 33); // Right circle
+     * 
+     * 

+     *
+     * @alt
+     * Gold ellipse + thick black outline @center 2 white ellipses on left and right.
+     * 2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
+     *
+     */
+    p5.prototype.push = function() {
+      this._renderer.push();
+      this._styles.push({
+        props: {
+          _colorMode: this._colorMode
+        },
+        renderer: {
+          _doStroke: this._renderer._doStroke,
+          _strokeSet: this._renderer._strokeSet,
+          _doFill: this._renderer._doFill,
+          _fillSet: this._renderer._fillSet,
+          _tint: this._renderer._tint,
+          _imageMode: this._renderer._imageMode,
+          _rectMode: this._renderer._rectMode,
+          _ellipseMode: this._renderer._ellipseMode,
+          _textFont: this._renderer._textFont,
+          _textLeading: this._renderer._textLeading,
+          _textSize: this._renderer._textSize,
+          _textStyle: this._renderer._textStyle
+        }
+      });
+    };
+
+    /**
+     * The push() function saves the current drawing style settings and
+     * transformations, while pop() restores these settings. Note that these
+     * functions are always used together. They allow you to change the style
+     * and transformation settings and later return to what you had. When a new
+     * state is started with push(), it builds on the current style and transform
+     * information. The push() and pop() functions can be embedded to provide
+     * more control. (See the second example for a demonstration.)
+     * 


+     * push() stores information related to the current transformation state
+     * and style settings controlled by the following functions: fill(),
+     * stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),
+     * imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),
+     * textFont(), textMode(), textSize(), textLeading().
+     *
+     * @method pop
+     * @example
+     * 

+     * 
+     * ellipse(0, 50, 33, 33); // Left circle
+     *
+     * push(); // Start a new drawing state
+     * translate(50, 0);
+     * strokeWeight(10);
+     * fill(204, 153, 0);
+     * ellipse(0, 50, 33, 33); // Middle circle
+     * pop(); // Restore original state
+     *
+     * ellipse(100, 50, 33, 33); // Right circle
+     * 
+     * 

+     * 

+     * 
+     * ellipse(0, 50, 33, 33); // Left circle
+     *
+     * push(); // Start a new drawing state
+     * strokeWeight(10);
+     * fill(204, 153, 0);
+     * ellipse(33, 50, 33, 33); // Left-middle circle
+     *
+     * push(); // Start another new drawing state
+     * stroke(0, 102, 153);
+     * ellipse(66, 50, 33, 33); // Right-middle circle
+     * pop(); // Restore previous state
+     *
+     * pop(); // Restore original state
+     *
+     * ellipse(100, 50, 33, 33); // Right circle
+     * 
+     * 

+     *
+     * @alt
+     * Gold ellipse + thick black outline @center 2 white ellipses on left and right.
+     * 2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
+     *
+     */
+    p5.prototype.pop = function() {
+      this._renderer.pop();
+      var lastS = this._styles.pop();
+      assign(this._renderer, lastS.renderer);
+      assign(this, lastS.props);
+    };
+
+    p5.prototype.pushStyle = function() {
+      throw new Error('pushStyle() not used, see push()');
+    };
+
+    p5.prototype.popStyle = function() {
+      throw new Error('popStyle() not used, see pop()');
+    };
+
+    /**
+     *
+     * Executes the code within draw() one time. This functions allows the
+     * program to update the display window only when necessary, for example
+     * when an event registered by mousePressed() or keyPressed() occurs.
+     * 


+     * In structuring a program, it only makes sense to call redraw() within
+     * events such as mousePressed(). This is because redraw() does not run
+     * draw() immediately (it only sets a flag that indicates an update is
+     * needed).
+     * 


+     * The redraw() function does not work properly when called inside draw().
+     * To enable/disable animations, use loop() and noLoop().
+     * 


+     * In addition you can set the number of redraws per method call. Just
+     * add an integer as single parameter for the number of redraws.
+     *
+     * @method redraw
+     * @param  {Integer} [n] Redraw for n-times. The default value is 1.
+     * @example
+     * 

+     * var x = 0;
+     *
+     * function setup() {
+     *   createCanvas(100, 100);
+     *   noLoop();
+     * }
+     *
+     * function draw() {
+     *   background(204);
+     *   line(x, 0, x, height);
+     * }
+     *
+     * function mousePressed() {
+     *   x += 1;
+     *   redraw();
+     * }
+     * 

+     *
+     * 

+     * var x = 0;
+     *
+     * function setup() {
+     *   createCanvas(100, 100);
+     *   noLoop();
+     * }
+     *
+     * function draw() {
+     *   background(204);
+     *   x += 1;
+     *   line(x, 0, x, height);
+     * }
+     *
+     * function mousePressed() {
+     *   redraw(5);
+     * }
+     * 

+     *
+     * @alt
+     * black line on far left of canvas
+     * black line on far left of canvas
+     *
+     */
+    p5.prototype.redraw = function(n) {
+      this.resetMatrix();
+      if (this._renderer.isP3D) {
+        this._renderer._update();
+      }
+
+      var numberOfRedraws = parseInt(n);
+      if (isNaN(numberOfRedraws) || numberOfRedraws < 1) {
+        numberOfRedraws = 1;
+      }
+
+      var userSetup = this.setup || window.setup;
+      var userDraw = this.draw || window.draw;
+      if (typeof userDraw === 'function') {
+        if (typeof userSetup === 'undefined') {
+          this.scale(this._pixelDensity, this._pixelDensity);
+        }
+        var self = this;
+        var callMethod = function(f) {
+          f.call(self);
+        };
+        for (var idxRedraw = 0; idxRedraw < numberOfRedraws; idxRedraw++) {
+          this._setProperty('frameCount', this.frameCount + 1);
+          this._registeredMethods.pre.forEach(callMethod);
+          userDraw();
+          this._registeredMethods.post.forEach(callMethod);
+        }
+      }
+    };
+
+    p5.prototype.size = function() {
+      var s = 'size() is not a valid p5 function, to set the size of the ';
+      s += 'drawing canvas, please use createCanvas() instead';
+      throw s;
+    };
+
+    module.exports = p5;
+
+    },{"./core":22}],34:[function(_dereq_,module,exports){
+    /**
+     * @module Transform
+     * @submodule Transform
+     * @for p5
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var constants = _dereq_('./constants');
+
+    /**
+     * Multiplies the current matrix by the one specified through the parameters.
+     * This is a powerful operation that can perform the equivalent of translate,
+     * scale, shear and rotate all at once. You can learn more about transformation
+     * matrices on 
+     * Wikipedia.
+     *
+     * The naming of the arguments here follows the naming of the 
+     * WHATWG specification and corresponds to a
+     * transformation matrix of the
+     * form:
+     *
+     * > The transformation matrix used when applyMatrix is called
+     *
+     * @method applyMatrix
+     * @param  {Number} a numbers which define the 2x3 matrix to be multiplied
+     * @param  {Number} b numbers which define the 2x3 matrix to be multiplied
+     * @param  {Number} c numbers which define the 2x3 matrix to be multiplied
+     * @param  {Number} d numbers which define the 2x3 matrix to be multiplied
+     * @param  {Number} e numbers which define the 2x3 matrix to be multiplied
+     * @param  {Number} f numbers which define the 2x3 matrix to be multiplied
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   frameRate(10);
+     *   rectMode(CENTER);
+     * }
+     *
+     * function draw() {
+     *   var step = frameCount % 20;
+     *   background(200);
+     *   // Equivalent to translate(x, y);
+     *   applyMatrix(1, 0, 0, 1, 40 + step, 50);
+     *   rect(0, 0, 50, 50);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * function setup() {
+     *   frameRate(10);
+     *   rectMode(CENTER);
+     * }
+     *
+     * function draw() {
+     *   var step = frameCount % 20;
+     *   background(200);
+     *   translate(50, 50);
+     *   // Equivalent to scale(x, y);
+     *   applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
+     *   rect(0, 0, 50, 50);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * function setup() {
+     *   frameRate(10);
+     *   rectMode(CENTER);
+     * }
+     *
+     * function draw() {
+     *   var step = frameCount % 20;
+     *   var angle = map(step, 0, 20, 0, TWO_PI);
+     *   var cos_a = cos(angle);
+     *   var sin_a = sin(angle);
+     *   background(200);
+     *   translate(50, 50);
+     *   // Equivalent to rotate(angle);
+     *   applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
+     *   rect(0, 0, 50, 50);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * function setup() {
+     *   frameRate(10);
+     *   rectMode(CENTER);
+     * }
+     *
+     * function draw() {
+     *   var step = frameCount % 20;
+     *   var angle = map(step, 0, 20, -PI / 4, PI / 4);
+     *   background(200);
+     *   translate(50, 50);
+     *   // equivalent to shearX(angle);
+     *   var shear_factor = 1 / tan(PI / 2 - angle);
+     *   applyMatrix(1, 0, shear_factor, 1, 0, 0);
+     *   rect(0, 0, 50, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * A rectangle translating to the right
+     * A rectangle shrinking to the center
+     * A rectangle rotating clockwise about the center
+     * A rectangle shearing
+     *
+     */
+    p5.prototype.applyMatrix = function(a, b, c, d, e, f) {
+      this._renderer.applyMatrix(a, b, c, d, e, f);
+      return this;
+    };
+
+    p5.prototype.popMatrix = function() {
+      throw new Error('popMatrix() not used, see pop()');
+    };
+
+    p5.prototype.printMatrix = function() {
+      throw new Error('printMatrix() not implemented');
+    };
+
+    p5.prototype.pushMatrix = function() {
+      throw new Error('pushMatrix() not used, see push()');
+    };
+
+    /**
+     * Replaces the current matrix with the identity matrix.
+     *
+     * @method resetMatrix
+     * @chainable
+     * @example
+     * 

+     * 
+     * translate(50, 50);
+     * applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+     * rect(0, 0, 20, 20);
+     * // Note that the translate is also reset.
+     * resetMatrix();
+     * rect(0, 0, 20, 20);
+     * 
+     * 

+     *
+     * @alt
+     * A rotated retangle in the center with another at the top left corner
+     *
+     */
+    p5.prototype.resetMatrix = function() {
+      this._renderer.resetMatrix();
+      return this;
+    };
+
+    /**
+     * Rotates a shape the amount specified by the angle parameter. This
+     * function accounts for angleMode, so angles can be entered in either
+     * RADIANS or DEGREES.
+     * 


+     * Objects are always rotated around their relative position to the
+     * origin and positive numbers rotate objects in a clockwise direction.
+     * Transformations apply to everything that happens after and subsequent
+     * calls to the function accumulates the effect. For example, calling
+     * rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).
+     * All tranformations are reset when draw() begins again.
+     * 


+     * Technically, rotate() multiplies the current transformation matrix
+     * by a rotation matrix. This function can be further controlled by
+     * the push() and pop().
+     *
+     * @method rotate
+     * @param  {Number} angle the angle of rotation, specified in radians
+     *                        or degrees, depending on current angleMode
+     * @param  {p5.Vector|Number[]} [axis] (in 3d) the axis to rotate around
+     * @chainable
+     * @example
+     * 

+     * 
+     * translate(width / 2, height / 2);
+     * rotate(PI / 3.0);
+     * rect(-26, -26, 52, 52);
+     * 
+     * 

+     *
+     * @alt
+     * white 52x52 rect with black outline at center rotated counter 45 degrees
+     *
+     */
+    p5.prototype.rotate = function(angle, axis) {
+      p5._validateParameters('rotate', arguments);
+      var r;
+      if (this._angleMode === constants.DEGREES) {
+        r = this.radians(angle);
+      } else if (this._angleMode === constants.RADIANS) {
+        r = angle;
+      }
+      this._renderer.rotate(r, axis);
+      return this;
+    };
+
+    /**
+     * Rotates around X axis.
+     * @method  rotateX
+     * @param  {Number} rad angles in radians
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     * function draw() {
+     *   background(255);
+     *   rotateX(millis() / 1000);
+     *   box();
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 3d box rotating around the x axis.
+     */
+    p5.prototype.rotateX = function(rad) {
+      p5._validateParameters('rotateX', arguments);
+      if (this._renderer.isP3D) {
+        this._renderer.rotateX(rad);
+      } else {
+        throw 'not supported in p2d. Please use webgl mode';
+      }
+      return this;
+    };
+
+    /**
+     * Rotates around Y axis.
+     * @method rotateY
+     * @param  {Number} rad angles in radians
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     * function draw() {
+     *   background(255);
+     *   rotateY(millis() / 1000);
+     *   box();
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 3d box rotating around the y axis.
+     */
+    p5.prototype.rotateY = function(rad) {
+      p5._validateParameters('rotateY', arguments);
+      if (this._renderer.isP3D) {
+        this._renderer.rotateY(rad);
+      } else {
+        throw 'not supported in p2d. Please use webgl mode';
+      }
+      return this;
+    };
+
+    /**
+     * Rotates around Z axis. Webgl mode only.
+     * @method rotateZ
+     * @param  {Number} rad angles in radians
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     * function draw() {
+     *   background(255);
+     *   rotateZ(millis() / 1000);
+     *   box();
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 3d box rotating around the z axis.
+     */
+    p5.prototype.rotateZ = function(rad) {
+      p5._validateParameters('rotateZ', arguments);
+      if (this._renderer.isP3D) {
+        this._renderer.rotateZ(rad);
+      } else {
+        throw 'not supported in p2d. Please use webgl mode';
+      }
+      return this;
+    };
+
+    /**
+     * Increases or decreases the size of a shape by expanding and contracting
+     * vertices. Objects always scale from their relative origin to the
+     * coordinate system. Scale values are specified as decimal percentages.
+     * For example, the function call scale(2.0) increases the dimension of a
+     * shape by 200%.
+     * 


+     * Transformations apply to everything that happens after and subsequent
+     * calls to the function multiply the effect. For example, calling scale(2.0)
+     * and then scale(1.5) is the same as scale(3.0). If scale() is called
+     * within draw(), the transformation is reset when the loop begins again.
+     * 


+     * Using this function with the z parameter is only available in WEBGL mode.
+     * This function can be further controlled with push() and pop().
+     *
+     * @method scale
+     * @param  {Number|p5.Vector|Number[]} s
+     *                      percent to scale the object, or percentage to
+     *                      scale the object in the x-axis if multiple arguments
+     *                      are given
+     * @param  {Number} [y] percent to scale the object in the y-axis
+     * @param  {Number} [z] percent to scale the object in the z-axis (webgl only)
+     * @chainable
+     * @example
+     * 

+     * 
+     * translate(width / 2, height / 2);
+     * rotate(PI / 3.0);
+     * rect(-26, -26, 52, 52);
+     * 
+     * 

+     *
+     * 

+     * 
+     * rect(30, 20, 50, 50);
+     * scale(0.5, 1.3);
+     * rect(30, 20, 50, 50);
+     * 
+     * 

+     *
+     * @alt
+     * white 52x52 rect with black outline at center rotated counter 45 degrees
+     * 2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left
+     *
+     */
+    /**
+     * @method scale
+     * @param  {p5.Vector|Number[]} scales per-axis percents to scale the object
+     * @chainable
+     */
+    p5.prototype.scale = function(x, y, z) {
+      p5._validateParameters('scale', arguments);
+      // Only check for Vector argument type if Vector is available
+      if (x instanceof p5.Vector) {
+        var v = x;
+        x = v.x;
+        y = v.y;
+        z = v.z;
+      } else if (x instanceof Array) {
+        var rg = x;
+        x = rg[0];
+        y = rg[1];
+        z = rg[2] || 1;
+      }
+      if (isNaN(y)) {
+        y = z = x;
+      } else if (isNaN(z)) {
+        z = 1;
+      }
+
+      this._renderer.scale.call(this._renderer, x, y, z);
+
+      return this;
+    };
+
+    /**
+     * Shears a shape around the x-axis the amount specified by the angle
+     * parameter. Angles should be specified in the current angleMode.
+     * Objects are always sheared around their relative position to the origin
+     * and positive numbers shear objects in a clockwise direction.
+     * 


+     * Transformations apply to everything that happens after and subsequent
+     * calls to the function accumulates the effect. For example, calling
+     * shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).
+     * If shearX() is called within the draw(), the transformation is reset when
+     * the loop begins again.
+     * 


+     * Technically, shearX() multiplies the current transformation matrix by a
+     * rotation matrix. This function can be further controlled by the
+     * push() and pop() functions.
+     *
+     * @method shearX
+     * @param  {Number} angle angle of shear specified in radians or degrees,
+     *                        depending on current angleMode
+     * @chainable
+     * @example
+     * 

+     * 
+     * translate(width / 4, height / 4);
+     * shearX(PI / 4.0);
+     * rect(0, 0, 30, 30);
+     * 
+     * 

+     *
+     * @alt
+     * white irregular quadrilateral with black outline at top middle.
+     *
+     */
+    p5.prototype.shearX = function(angle) {
+      p5._validateParameters('shearX', arguments);
+      if (this._angleMode === constants.DEGREES) {
+        angle = this.radians(angle);
+      }
+      this._renderer.shearX(angle);
+      return this;
+    };
+
+    /**
+     * Shears a shape around the y-axis the amount specified by the angle
+     * parameter. Angles should be specified in the current angleMode. Objects
+     * are always sheared around their relative position to the origin and
+     * positive numbers shear objects in a clockwise direction.
+     * 


+     * Transformations apply to everything that happens after and subsequent
+     * calls to the function accumulates the effect. For example, calling
+     * shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If
+     * shearY() is called within the draw(), the transformation is reset when
+     * the loop begins again.
+     * 


+     * Technically, shearY() multiplies the current transformation matrix by a
+     * rotation matrix. This function can be further controlled by the
+     * push() and pop() functions.
+     *
+     * @method shearY
+     * @param  {Number} angle angle of shear specified in radians or degrees,
+     *                        depending on current angleMode
+     * @chainable
+     * @example
+     * 

+     * 
+     * translate(width / 4, height / 4);
+     * shearY(PI / 4.0);
+     * rect(0, 0, 30, 30);
+     * 
+     * 

+     *
+     * @alt
+     * white irregular quadrilateral with black outline at middle bottom.
+     *
+     */
+    p5.prototype.shearY = function(angle) {
+      p5._validateParameters('shearY', arguments);
+      if (this._angleMode === constants.DEGREES) {
+        angle = this.radians(angle);
+      }
+      this._renderer.shearY(angle);
+      return this;
+    };
+
+    /**
+     * Specifies an amount to displace objects within the display window.
+     * The x parameter specifies left/right translation, the y parameter
+     * specifies up/down translation.
+     * 


+     * Transformations are cumulative and apply to everything that happens after
+     * and subsequent calls to the function accumulates the effect. For example,
+     * calling translate(50, 0) and then translate(20, 0) is the same as
+     * translate(70, 0). If translate() is called within draw(), the
+     * transformation is reset when the loop begins again. This function can be
+     * further controlled by using push() and pop().
+     *
+     * @method translate
+     * @param  {Number} x left/right translation
+     * @param  {Number} y up/down translation
+     * @param  {Number} [z] forward/backward translation (webgl only)
+     * @chainable
+     * @example
+     * 

+     * 
+     * translate(30, 20);
+     * rect(0, 0, 55, 55);
+     * 
+     * 

+     *
+     * 

+     * 
+     * rect(0, 0, 55, 55); // Draw rect at original 0,0
+     * translate(30, 20);
+     * rect(0, 0, 55, 55); // Draw rect at new 0,0
+     * translate(14, 14);
+     * rect(0, 0, 55, 55); // Draw rect at new 0,0
+     * 
+     * 

+     *
+     * @alt
+     * white 55x55 rect with black outline at center right.
+     * 3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.
+     *
+     */
+    p5.prototype.translate = function(x, y, z) {
+      p5._validateParameters('translate', arguments);
+      if (this._renderer.isP3D) {
+        this._renderer.translate(x, y, z);
+      } else {
+        this._renderer.translate(x, y);
+      }
+      return this;
+    };
+
+    module.exports = p5;
+
+    },{"./constants":21,"./core":22}],35:[function(_dereq_,module,exports){
+    /**
+     * @module Shape
+     * @submodule Vertex
+     * @for p5
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('./core');
+    var constants = _dereq_('./constants');
+    var shapeKind = null;
+    var vertices = [];
+    var contourVertices = [];
+    var isBezier = false;
+    var isCurve = false;
+    var isQuadratic = false;
+    var isContour = false;
+    var isFirstContour = true;
+
+    /**
+     * Use the beginContour() and endContour() functions to create negative
+     * shapes within shapes such as the center of the letter 'O'. beginContour()
+     * begins recording vertices for the shape and endContour() stops recording.
+     * The vertices that define a negative shape must "wind" in the opposite
+     * direction from the exterior shape. First draw vertices for the exterior
+     * clockwise order, then for internal shapes, draw vertices
+     * shape in counter-clockwise.
+     * 


+     * These functions can only be used within a beginShape()/endShape() pair and
+     * transformations such as translate(), rotate(), and scale() do not work
+     * within a beginContour()/endContour() pair. It is also not possible to use
+     * other shapes, such as ellipse() or rect() within.
+     *
+     * @method beginContour
+     * @chainable
+     * @example
+     * 

+     * 
+     * translate(50, 50);
+     * stroke(255, 0, 0);
+     * beginShape();
+     * // Exterior part of shape, clockwise winding
+     * vertex(-40, -40);
+     * vertex(40, -40);
+     * vertex(40, 40);
+     * vertex(-40, 40);
+     * // Interior part of shape, counter-clockwise winding
+     * beginContour();
+     * vertex(-20, -20);
+     * vertex(-20, 20);
+     * vertex(20, 20);
+     * vertex(20, -20);
+     * endContour();
+     * endShape(CLOSE);
+     * 
+     * 

+     *
+     * @alt
+     * white rect and smaller grey rect with red outlines in center of canvas.
+     *
+     */
+    p5.prototype.beginContour = function() {
+      contourVertices = [];
+      isContour = true;
+      return this;
+    };
+
+    /**
+     * Using the beginShape() and endShape() functions allow creating more
+     * complex forms. beginShape() begins recording vertices for a shape and
+     * endShape() stops recording. The value of the kind parameter tells it which
+     * types of shapes to create from the provided vertices. With no mode
+     * specified, the shape can be any irregular polygon.
+     * 


+     * The parameters available for beginShape() are POINTS, LINES, TRIANGLES,
+     * TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the
+     * beginShape() function, a series of vertex() commands must follow. To stop
+     * drawing the shape, call endShape(). Each shape will be outlined with the
+     * current stroke color and filled with the fill color.
+     * 


+     * Transformations such as translate(), rotate(), and scale() do not work
+     * within beginShape(). It is also not possible to use other shapes, such as
+     * ellipse() or rect() within beginShape().
+     *
+     * @method beginShape
+     * @param  {Constant} [kind] either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
+     *                                TRIANGLE_STRIP, QUADS, or QUAD_STRIP
+     * @chainable
+     * @example
+     * 

+     * 
+     * beginShape();
+     * vertex(30, 20);
+     * vertex(85, 20);
+     * vertex(85, 75);
+     * vertex(30, 75);
+     * endShape(CLOSE);
+     * 
+     * 

+     *
+     * 

+     * 
+     * beginShape(POINTS);
+     * vertex(30, 20);
+     * vertex(85, 20);
+     * vertex(85, 75);
+     * vertex(30, 75);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * beginShape(LINES);
+     * vertex(30, 20);
+     * vertex(85, 20);
+     * vertex(85, 75);
+     * vertex(30, 75);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * noFill();
+     * beginShape();
+     * vertex(30, 20);
+     * vertex(85, 20);
+     * vertex(85, 75);
+     * vertex(30, 75);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * noFill();
+     * beginShape();
+     * vertex(30, 20);
+     * vertex(85, 20);
+     * vertex(85, 75);
+     * vertex(30, 75);
+     * endShape(CLOSE);
+     * 
+     * 

+     *
+     * 

+     * 
+     * beginShape(TRIANGLES);
+     * vertex(30, 75);
+     * vertex(40, 20);
+     * vertex(50, 75);
+     * vertex(60, 20);
+     * vertex(70, 75);
+     * vertex(80, 20);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * beginShape(TRIANGLE_STRIP);
+     * vertex(30, 75);
+     * vertex(40, 20);
+     * vertex(50, 75);
+     * vertex(60, 20);
+     * vertex(70, 75);
+     * vertex(80, 20);
+     * vertex(90, 75);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * beginShape(TRIANGLE_FAN);
+     * vertex(57.5, 50);
+     * vertex(57.5, 15);
+     * vertex(92, 50);
+     * vertex(57.5, 85);
+     * vertex(22, 50);
+     * vertex(57.5, 15);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * beginShape(QUADS);
+     * vertex(30, 20);
+     * vertex(30, 75);
+     * vertex(50, 75);
+     * vertex(50, 20);
+     * vertex(65, 20);
+     * vertex(65, 75);
+     * vertex(85, 75);
+     * vertex(85, 20);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * beginShape(QUAD_STRIP);
+     * vertex(30, 20);
+     * vertex(30, 75);
+     * vertex(50, 20);
+     * vertex(50, 75);
+     * vertex(65, 20);
+     * vertex(65, 75);
+     * vertex(85, 20);
+     * vertex(85, 75);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * beginShape();
+     * vertex(20, 20);
+     * vertex(40, 20);
+     * vertex(40, 40);
+     * vertex(60, 40);
+     * vertex(60, 60);
+     * vertex(20, 60);
+     * endShape(CLOSE);
+     * 
+     * 

+     * @alt
+     * white square-shape with black outline in middle-right of canvas.
+     * 4 black points in a square shape in middle-right of canvas.
+     * 2 horizontal black lines. In the top-right and bottom-right of canvas.
+     * 3 line shape with horizontal on top, vertical in middle and horizontal bottom.
+     * square line shape in middle-right of canvas.
+     * 2 white triangle shapes mid-right canvas. left one pointing up and right down.
+     * 5 horizontal interlocking and alternating white triangles in mid-right canvas.
+     * 4 interlocking white triangles in 45 degree rotated square-shape.
+     * 2 white rectangle shapes in mid-right canvas. Both 20x55.
+     * 3 side-by-side white rectangles center rect is smaller in mid-right canvas.
+     * Thick white l-shape with black outline mid-top-left of canvas.
+     *
+     */
+    p5.prototype.beginShape = function(kind) {
+      if (this._renderer.isP3D) {
+        this._renderer.beginShape.apply(this._renderer, arguments);
+      } else {
+        if (
+          kind === constants.POINTS ||
+          kind === constants.LINES ||
+          kind === constants.TRIANGLES ||
+          kind === constants.TRIANGLE_FAN ||
+          kind === constants.TRIANGLE_STRIP ||
+          kind === constants.QUADS ||
+          kind === constants.QUAD_STRIP
+        ) {
+          shapeKind = kind;
+        } else {
+          shapeKind = null;
+        }
+
+        vertices = [];
+        contourVertices = [];
+      }
+      return this;
+    };
+
+    /**
+     * Specifies vertex coordinates for Bezier curves. Each call to
+     * bezierVertex() defines the position of two control points and
+     * one anchor point of a Bezier curve, adding a new segment to a
+     * line or shape.
+     * 


+     * The first time bezierVertex() is used within a
+     * beginShape() call, it must be prefaced with a call to vertex()
+     * to set the first anchor point. This function must be used between
+     * beginShape() and endShape() and only when there is no MODE
+     * parameter specified to beginShape().
+     *
+     * @method bezierVertex
+     * @param  {Number} x2 x-coordinate for the first control point
+     * @param  {Number} y2 y-coordinate for the first control point
+     * @param  {Number} x3 x-coordinate for the second control point
+     * @param  {Number} y3 y-coordinate for the second control point
+     * @param  {Number} x4 x-coordinate for the anchor point
+     * @param  {Number} y4 y-coordinate for the anchor point
+     * @chainable
+     * @example
+     * 

+     * 
+     * noFill();
+     * beginShape();
+     * vertex(30, 20);
+     * bezierVertex(80, 0, 80, 75, 30, 75);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * beginShape();
+     * vertex(30, 20);
+     * bezierVertex(80, 0, 80, 75, 30, 75);
+     * bezierVertex(50, 80, 60, 25, 30, 20);
+     * endShape();
+     * 
+     * 

+     *
+     * @alt
+     * crescent-shaped line in middle of canvas. Points facing left.
+     * white crescent shape in middle of canvas. Points facing left.
+     *
+     */
+    p5.prototype.bezierVertex = function(x2, y2, x3, y3, x4, y4) {
+      p5._validateParameters('bezierVertex', arguments);
+      if (vertices.length === 0) {
+        throw 'vertex() must be used once before calling bezierVertex()';
+      } else {
+        isBezier = true;
+        var vert = [];
+        for (var i = 0; i < arguments.length; i++) {
+          vert[i] = arguments[i];
+        }
+        vert.isVert = false;
+        if (isContour) {
+          contourVertices.push(vert);
+        } else {
+          vertices.push(vert);
+        }
+      }
+      return this;
+    };
+
+    /**
+     * Specifies vertex coordinates for curves. This function may only
+     * be used between beginShape() and endShape() and only when there
+     * is no MODE parameter specified to beginShape().
+     * 


+     * The first and last points in a series of curveVertex() lines will be used to
+     * guide the beginning and end of a the curve. A minimum of four
+     * points is required to draw a tiny curve between the second and
+     * third points. Adding a fifth point with curveVertex() will draw
+     * the curve between the second, third, and fourth points. The
+     * curveVertex() function is an implementation of Catmull-Rom
+     * splines.
+     *
+     * @method curveVertex
+     * @param {Number} x x-coordinate of the vertex
+     * @param {Number} y y-coordinate of the vertex
+     * @chainable
+     * @example
+     * 

+     * 
+     * noFill();
+     * beginShape();
+     * curveVertex(84, 91);
+     * curveVertex(84, 91);
+     * curveVertex(68, 19);
+     * curveVertex(21, 17);
+     * curveVertex(32, 100);
+     * curveVertex(32, 100);
+     * endShape();
+     * 
+     * 

+     *
+     * @alt
+     * Upside-down u-shape line, mid canvas. left point extends beyond canvas view.
+     *
+     */
+    p5.prototype.curveVertex = function(x, y) {
+      p5._validateParameters('curveVertex', arguments);
+      isCurve = true;
+      this.vertex(x, y);
+      return this;
+    };
+
+    /**
+     * Use the beginContour() and endContour() functions to create negative
+     * shapes within shapes such as the center of the letter 'O'. beginContour()
+     * begins recording vertices for the shape and endContour() stops recording.
+     * The vertices that define a negative shape must "wind" in the opposite
+     * direction from the exterior shape. First draw vertices for the exterior
+     * clockwise order, then for internal shapes, draw vertices
+     * shape in counter-clockwise.
+     * 


+     * These functions can only be used within a beginShape()/endShape() pair and
+     * transformations such as translate(), rotate(), and scale() do not work
+     * within a beginContour()/endContour() pair. It is also not possible to use
+     * other shapes, such as ellipse() or rect() within.
+     *
+     * @method endContour
+     * @chainable
+     * @example
+     * 

+     * 
+     * translate(50, 50);
+     * stroke(255, 0, 0);
+     * beginShape();
+     * // Exterior part of shape, clockwise winding
+     * vertex(-40, -40);
+     * vertex(40, -40);
+     * vertex(40, 40);
+     * vertex(-40, 40);
+     * // Interior part of shape, counter-clockwise winding
+     * beginContour();
+     * vertex(-20, -20);
+     * vertex(-20, 20);
+     * vertex(20, 20);
+     * vertex(20, -20);
+     * endContour();
+     * endShape(CLOSE);
+     * 
+     * 

+     *
+     * @alt
+     * white rect and smaller grey rect with red outlines in center of canvas.
+     *
+     */
+    p5.prototype.endContour = function() {
+      var vert = contourVertices[0].slice(); // copy all data
+      vert.isVert = contourVertices[0].isVert;
+      vert.moveTo = false;
+      contourVertices.push(vert);
+
+      // prevent stray lines with multiple contours
+      if (isFirstContour) {
+        vertices.push(vertices[0]);
+        isFirstContour = false;
+      }
+
+      for (var i = 0; i < contourVertices.length; i++) {
+        vertices.push(contourVertices[i]);
+      }
+      return this;
+    };
+
+    /**
+     * The endShape() function is the companion to beginShape() and may only be
+     * called after beginShape(). When endshape() is called, all of image data
+     * defined since the previous call to beginShape() is written into the image
+     * buffer. The constant CLOSE as the value for the MODE parameter to close
+     * the shape (to connect the beginning and the end).
+     *
+     * @method endShape
+     * @param  {Constant} [mode] use CLOSE to close the shape
+     * @chainable
+     * @example
+     * 

+     * 
+     * noFill();
+     *
+     * beginShape();
+     * vertex(20, 20);
+     * vertex(45, 20);
+     * vertex(45, 80);
+     * endShape(CLOSE);
+     *
+     * beginShape();
+     * vertex(50, 20);
+     * vertex(75, 20);
+     * vertex(75, 80);
+     * endShape();
+     * 
+     * 

+     *
+     * @alt
+     * Triangle line shape with smallest interior angle on bottom and upside-down L.
+     *
+     */
+    p5.prototype.endShape = function(mode) {
+      if (this._renderer.isP3D) {
+        this._renderer.endShape(
+          mode,
+          isCurve,
+          isBezier,
+          isQuadratic,
+          isContour,
+          shapeKind
+        );
+      } else {
+        if (vertices.length === 0) {
+          return this;
+        }
+        if (!this._renderer._doStroke && !this._renderer._doFill) {
+          return this;
+        }
+
+        var closeShape = mode === constants.CLOSE;
+
+        // if the shape is closed, the first element is also the last element
+        if (closeShape && !isContour) {
+          vertices.push(vertices[0]);
+        }
+
+        this._renderer.endShape(
+          mode,
+          vertices,
+          isCurve,
+          isBezier,
+          isQuadratic,
+          isContour,
+          shapeKind
+        );
+
+        // Reset some settings
+        isCurve = false;
+        isBezier = false;
+        isQuadratic = false;
+        isContour = false;
+        isFirstContour = true;
+
+        // If the shape is closed, the first element was added as last element.
+        // We must remove it again to prevent the list of vertices from growing
+        // over successive calls to endShape(CLOSE)
+        if (closeShape) {
+          vertices.pop();
+        }
+      }
+      return this;
+    };
+
+    /**
+     * Specifies vertex coordinates for quadratic Bezier curves. Each call to
+     * quadraticVertex() defines the position of one control points and one
+     * anchor point of a Bezier curve, adding a new segment to a line or shape.
+     * The first time quadraticVertex() is used within a beginShape() call, it
+     * must be prefaced with a call to vertex() to set the first anchor point.
+     * This function must be used between beginShape() and endShape() and only
+     * when there is no MODE parameter specified to beginShape().
+     *
+     * @method quadraticVertex
+     * @param  {Number} cx x-coordinate for the control point
+     * @param  {Number} cy y-coordinate for the control point
+     * @param  {Number} x3 x-coordinate for the anchor point
+     * @param  {Number} y3 y-coordinate for the anchor point
+     * @chainable
+     * @example
+     * 

+     * 
+     * noFill();
+     * strokeWeight(4);
+     * beginShape();
+     * vertex(20, 20);
+     * quadraticVertex(80, 20, 50, 50);
+     * endShape();
+     * 
+     * 

+     *
+     * 

+     * 
+     * noFill();
+     * strokeWeight(4);
+     * beginShape();
+     * vertex(20, 20);
+     * quadraticVertex(80, 20, 50, 50);
+     * quadraticVertex(20, 80, 80, 80);
+     * vertex(80, 60);
+     * endShape();
+     * 
+     * 

+     *
+     * @alt
+     * arched-shaped black line with 4 pixel thick stroke weight.
+     * backwards s-shaped black line with 4 pixel thick stroke weight.
+     *
+     */
+    p5.prototype.quadraticVertex = function(cx, cy, x3, y3) {
+      p5._validateParameters('quadraticVertex', arguments);
+      //if we're drawing a contour, put the points into an
+      // array for inside drawing
+      if (this._contourInited) {
+        var pt = {};
+        pt.x = cx;
+        pt.y = cy;
+        pt.x3 = x3;
+        pt.y3 = y3;
+        pt.type = constants.QUADRATIC;
+        this._contourVertices.push(pt);
+
+        return this;
+      }
+      if (vertices.length > 0) {
+        isQuadratic = true;
+        var vert = [];
+        for (var i = 0; i < arguments.length; i++) {
+          vert[i] = arguments[i];
+        }
+        vert.isVert = false;
+        if (isContour) {
+          contourVertices.push(vert);
+        } else {
+          vertices.push(vert);
+        }
+      } else {
+        throw 'vertex() must be used once before calling quadraticVertex()';
+      }
+      return this;
+    };
+
+    /**
+     * All shapes are constructed by connecting a series of vertices. vertex()
+     * is used to specify the vertex coordinates for points, lines, triangles,
+     * quads, and polygons. It is used exclusively within the beginShape() and
+     * endShape() functions.
+     *
+     * @method vertex
+     * @param  {Number} x x-coordinate of the vertex
+     * @param  {Number} y y-coordinate of the vertex
+     * @chainable
+     * @example
+     * 

+     * 
+     * beginShape(POINTS);
+     * vertex(30, 20);
+     * vertex(85, 20);
+     * vertex(85, 75);
+     * vertex(30, 75);
+     * endShape();
+     * 
+     * 

+     *
+     * @alt
+     * 4 black points in a square shape in middle-right of canvas.
+     *
+     */
+    /**
+     * @method vertex
+     * @param  {Number} x
+     * @param  {Number} y
+     * @param  {Number} [z] z-coordinate of the vertex
+     * @param  {Number} [u] the vertex's texture u-coordinate
+     * @param  {Number} [v] the vertex's texture v-coordinate
+     */
+    p5.prototype.vertex = function(x, y, moveTo, u, v) {
+      if (this._renderer.isP3D) {
+        this._renderer.vertex.apply(this._renderer, arguments);
+      } else {
+        var vert = [];
+        vert.isVert = true;
+        vert[0] = x;
+        vert[1] = y;
+        vert[2] = 0;
+        vert[3] = 0;
+        vert[4] = 0;
+        vert[5] = this._renderer._getFill();
+        vert[6] = this._renderer._getStroke();
+
+        if (moveTo) {
+          vert.moveTo = moveTo;
+        }
+        if (isContour) {
+          if (contourVertices.length === 0) {
+            vert.moveTo = true;
+          }
+          contourVertices.push(vert);
+        } else {
+          vertices.push(vert);
+        }
+      }
+      return this;
+    };
+
+    module.exports = p5;
+
+    },{"./constants":21,"./core":22}],36:[function(_dereq_,module,exports){
+    /**
+     * @module Data
+     * @submodule Dictionary
+     * @for p5.TypedDict
+     * @requires core
+     *
+     * This module defines the p5 methods for the p5 Dictionary classes
+     * these classes StringDict and NumberDict are for storing and working
+     * with key, value pairs
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     *
+     * Creates a new instance of p5.StringDict using the key, value pair
+     * or object you provide.
+     *
+     * @method createStringDict
+     * @for p5
+     * @param {String|Object} key or object
+     * @param {String} value
+     * @return {p5.StringDict}
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createStringDict('p5', 'js');
+     *   print(myDictionary.hasKey('p5')); // logs true to console
+     * }
+     * 

+     */
+
+    p5.prototype.createStringDict = function(key, value) {
+      return new p5.StringDict(key, value);
+    };
+
+    /**
+     *
+     * Creates a new instance of p5.NumberDict using the key, value pair
+     * or object you provide.
+     *
+     * @method createNumberDict
+     * @for p5
+     * @param {Number|Object} key or object
+     * @param {Number} value
+     * @return {p5.NumberDict}
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict('p5', 42);
+     *   print(myDictionary.hasKey('p5')); // logs true to console
+     * }
+     * 

+     */
+
+    p5.prototype.createNumberDict = function(key, value) {
+      return new p5.NumberDict(key, value);
+    };
+
+    /**
+     *
+     * Base class for all p5.Dictionary types. More specifically
+     * typed Dictionary objects inherit from this
+     *
+     * @class p5.TypedDict
+     * @constructor
+     *
+     */
+
+    p5.TypedDict = function(key, value) {
+      if (key instanceof Object) {
+        this.data = key;
+      } else {
+        this.data = {};
+        this.data[key] = value;
+      }
+      return this;
+    };
+
+    /**
+     * Returns the number of key-value pairs currently in Dictionary object
+     *
+     * @method size
+     * @return {Integer} the number of key-value pairs in Dictionary object
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict(1, 10);
+     *   myDictionary.create(2, 20);
+     *   myDictionary.create(3, 30);
+     *   print(myDictionary.size()); // value of amt is 3
+     * }
+     * 

+     *
+     */
+    p5.TypedDict.prototype.size = function() {
+      return Object.keys(this.data).length;
+    };
+
+    /**
+     * Returns true if key exists in Dictionary
+     * otherwise returns false
+     *
+     * @method hasKey
+     * @param {Number|String} key that you want to access
+     * @return {Boolean} whether that key exists in Dictionary
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createStringDict('p5', 'js');
+     *   print(myDictionary.hasKey('p5')); // logs true to console
+     * }
+     * 

+     *
+     */
+
+    p5.TypedDict.prototype.hasKey = function(key) {
+      return this.data.hasOwnProperty(key);
+    };
+
+    /**
+     * Returns value stored at supplied key.
+     *
+     * @method get
+     * @param {Number|String} key that you want to access
+     * @return {Number|String} the value stored at that key
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createStringDict('p5', 'js');
+     *   var myValue = myDictionary.get('p5');
+     *   print(myValue === 'js'); // logs true to console
+     * }
+     * 

+     *
+     */
+
+    p5.TypedDict.prototype.get = function(key) {
+      if (this.data.hasOwnProperty(key)) {
+        return this.data[key];
+      } else {
+        console.log(key + ' does not exist in this Dictionary');
+      }
+    };
+
+    /**
+     * Changes the value of key if in it already exists in
+     * in the Dictionary otherwise makes a new key-value pair
+     *
+     * @method set
+     * @param {Number|String} key
+     * @param {Number|String} value
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createStringDict('p5', 'js');
+     *   myDictionary.set('p5', 'JS');
+     *   myDictionary.print();
+     *   // above logs "key: p5 - value: JS" to console
+     * }
+     * 

+     *
+     */
+
+    p5.TypedDict.prototype.set = function(key, value) {
+      if (this._validate(value)) {
+        this.data[key] = value;
+      } else {
+        console.log('Those values dont work for this dictionary type.');
+      }
+    };
+
+    /**
+     * private helper function to handle the user passing objects in
+     * during construction or calls to create()
+     */
+
+    p5.TypedDict.prototype._addObj = function(obj) {
+      for (var key in obj) {
+        this.set(key, obj[key]);
+      }
+    };
+
+    /**
+     * Creates a key-value pair in the Dictionary
+     *
+     * @method create
+     * @param {Number|String} key
+     * @param {Number|String} value
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createStringDict('p5', 'js');
+     *   myDictionary.create('happy', 'coding');
+     *   myDictionary.print();
+     *   // above logs "key: p5 - value: js, key: happy - value: coding" to console
+     * }
+     * 

+     */
+    /**
+     * @method create
+     * @param {Object} obj key/value pair
+     */
+
+    p5.TypedDict.prototype.create = function(key, value) {
+      if (key instanceof Object && typeof value === 'undefined') {
+        this._addObj(key);
+      } else if (typeof key !== 'undefined') {
+        this.set(key, value);
+      } else {
+        console.log(
+          'In order to create a new Dictionary entry you must pass ' +
+            'an object or a key, value pair'
+        );
+      }
+    };
+
+    /**
+     * Empties Dictionary of all key-value pairs
+     * @method clear
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createStringDict('p5', 'js');
+     *   print(myDictionary.hasKey('p5')); // prints 'true'
+     *   myDictionary.clear();
+     *   print(myDictionary.hasKey('p5')); // prints 'false'
+     * }
+     * 
+     * 

+     */
+
+    p5.TypedDict.prototype.clear = function() {
+      this.data = {};
+    };
+
+    /**
+     * Removes a key-value pair in the Dictionary
+     *
+     * @method remove
+     * @param {Number|String} key for the pair to remove
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createStringDict('p5', 'js');
+     *   myDictionary.create('happy', 'coding');
+     *   myDictionary.print();
+     *   // above logs "key: p5 - value: js, key: happy - value: coding" to console
+     *   myDictionary.remove('p5');
+     *   myDictionary.print();
+     *   // above logs "key: happy value: coding" to console
+     * }
+     * 

+     *
+     */
+
+    p5.TypedDict.prototype.remove = function(key) {
+      if (this.data.hasOwnProperty(key)) {
+        delete this.data[key];
+      } else {
+        throw key + ' does not exist in this Dictionary';
+      }
+    };
+
+    /**
+     * Logs the list of items currently in the Dictionary to the console
+     *
+     * @method print
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createStringDict('p5', 'js');
+     *   myDictionary.create('happy', 'coding');
+     *   myDictionary.print();
+     *   // above logs "key: p5 - value: js, key: happy - value: coding" to console
+     * }
+     * 
+     * 

+     */
+
+    p5.TypedDict.prototype.print = function() {
+      for (var item in this.data) {
+        console.log('key:' + item + ' value:' + this.data[item]);
+      }
+    };
+
+    /**
+     * Converts the Dictionary into a CSV file for local
+     * storage.
+     *
+     * @method saveTable
+     * @example
+     * 

+     * 
+     * createButton('save')
+     *   .position(10, 10)
+     *   .mousePressed(function() {
+     *     createNumberDict({
+     *       john: 1940,
+          paul: 1942,
+          george: 1943,
+          ringo: 1940
+     *     }).saveTable('beatles');
+     *   });
+     * 
+     * 

+     */
+
+    p5.TypedDict.prototype.saveTable = function(filename) {
+      var output = '';
+
+      for (var key in this.data) {
+        output += key + ',' + this.data[key] + '\n';
+      }
+
+      var blob = new Blob([output], { type: 'text/csv' });
+      p5.prototype.downloadFile(blob, filename || 'mycsv', 'csv');
+    };
+
+    /**
+     * Converts the Dictionary into a JSON file for local
+     * storage.
+     *
+     * @method saveJSON
+     * @example
+     * 

+     * 
+     * createButton('save')
+     *   .position(10, 10)
+     *   .mousePressed(function() {
+     *     createNumberDict({
+     *       john: 1940,
+          paul: 1942,
+          george: 1943,
+          ringo: 1940
+     *     }).saveJSON('beatles');
+     *   });
+     * 
+     * 

+     */
+
+    p5.TypedDict.prototype.saveJSON = function(filename, opt) {
+      p5.prototype.saveJSON(this.data, filename, opt);
+    };
+
+    /**
+     * private helper function to ensure that the user passed in valid
+     * values for the Dictionary type
+     */
+
+    p5.TypedDict.prototype._validate = function(value) {
+      return true;
+    };
+
+    /**
+     *
+     * A  Dictionary class for Strings.
+     *
+     *
+     * @class p5.StringDict
+     * @constructor
+     * @extends p5.TypedDict
+     *
+     */
+
+    p5.StringDict = function() {
+      p5.TypedDict.apply(this, arguments);
+    };
+
+    p5.StringDict.prototype = Object.create(p5.TypedDict.prototype);
+
+    p5.StringDict.prototype._validate = function(value) {
+      return typeof value === 'string';
+    };
+
+    /**
+     *
+     * A simple Dictionary class for Numbers.
+     *
+     *
+     * @class p5.NumberDict
+     * @constructor
+     * @extends p5.TypedDict
+     *
+     */
+
+    p5.NumberDict = function() {
+      p5.TypedDict.apply(this, arguments);
+    };
+
+    p5.NumberDict.prototype = Object.create(p5.TypedDict.prototype);
+
+    /**
+     * private helper function to ensure that the user passed in valid
+     * values for the Dictionary type
+     */
+
+    p5.NumberDict.prototype._validate = function(value) {
+      return typeof value === 'number';
+    };
+
+    /**
+     * Add to a value stored at a certain key
+     * The sum is stored in that location in the Dictionary.
+     *
+     * @method add
+     * @param {Number} Key for value you wish to add to
+     * @param {Number} Amount to add to the value
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict(2, 5);
+     *   myDictionary.add(2, 2);
+     *   console.log(myDictionary.get(2)); // logs 7 to console.
+     * }
+     * 

+     *
+     *
+     */
+
+    p5.NumberDict.prototype.add = function(key, amount) {
+      if (this.data.hasOwnProperty(key)) {
+        this.data[key] += amount;
+      } else {
+        console.log('The key - ' + key + ' does not exist in this dictionary.');
+      }
+    };
+
+    /**
+     * Subtract from a value stored at a certain key
+     * The difference is stored in that location in the Dictionary.
+     *
+     * @method sub
+     * @param {Number} Key for value you wish to subtract from
+     * @param {Number} Amount to subtract from the value
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict(2, 5);
+     *   myDictionary.sub(2, 2);
+     *   console.log(myDictionary.get(2)); // logs 3 to console.
+     * }
+     * 

+     *
+     *
+     */
+
+    p5.NumberDict.prototype.sub = function(key, amount) {
+      this.add(key, -amount);
+    };
+
+    /**
+     * Multiply a value stored at a certain key
+     * The product is stored in that location in the Dictionary.
+     *
+     * @method mult
+     * @param {Number} Key for value you wish to multiply
+     * @param {Number} Amount to multiply the value by
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict(2, 4);
+     *   myDictionary.mult(2, 2);
+     *   console.log(myDictionary.get(2)); // logs 8 to console.
+     * }
+     * 

+     *
+     *
+     */
+
+    p5.NumberDict.prototype.mult = function(key, amount) {
+      if (this.data.hasOwnProperty(key)) {
+        this.data[key] *= amount;
+      } else {
+        console.log('The key - ' + key + ' does not exist in this dictionary.');
+      }
+    };
+
+    /**
+     * Divide a value stored at a certain key
+     * The quotient is stored in that location in the Dictionary.
+     *
+     * @method div
+     * @param {Number} Key for value you wish to divide
+     * @param {Number} Amount to divide the value by
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict(2, 8);
+     *   myDictionary.div(2, 2);
+     *   console.log(myDictionary.get(2)); // logs 4 to console.
+     * }
+     * 

+     *
+     *
+     */
+
+    p5.NumberDict.prototype.div = function(key, amount) {
+      if (this.data.hasOwnProperty(key)) {
+        this.data[key] /= amount;
+      } else {
+        console.log('The key - ' + key + ' does not exist in this dictionary.');
+      }
+    };
+
+    /**
+     * private helper function for finding lowest or highest value
+     * the argument 'flip' is used to flip the comparison arrow
+     * from 'less than' to 'greater than'
+     *
+     */
+
+    p5.NumberDict.prototype._valueTest = function(flip) {
+      if (Object.keys(this.data).length === 0) {
+        throw 'Unable to search for a minimum or maximum value on an empty NumberDict';
+      } else if (Object.keys(this.data).length === 1) {
+        return this.data[Object.keys(this.data)[0]];
+      } else {
+        var result = this.data[Object.keys(this.data)[0]];
+        for (var key in this.data) {
+          if (this.data[key] * flip < result * flip) {
+            result = this.data[key];
+          }
+        }
+        return result;
+      }
+    };
+
+    /**
+     * Return the lowest value.
+     *
+     * @method minValue
+     * @return {Number}
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+     *   var lowestValue = myDictionary.minValue(); // value is -10
+     *   print(lowestValue);
+     * }
+     * 

+     *
+     */
+
+    p5.NumberDict.prototype.minValue = function() {
+      return this._valueTest(1);
+    };
+
+    /**
+     * Return the highest value.
+     *
+     * @method maxValue
+     * @return {Number}
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+     *   var highestValue = myDictionary.maxValue(); // value is 3
+     *   print(highestValue);
+     * }
+     * 

+     *
+     */
+
+    p5.NumberDict.prototype.maxValue = function() {
+      return this._valueTest(-1);
+    };
+
+    /**
+     * private helper function for finding lowest or highest key
+     * the argument 'flip' is used to flip the comparison arrow
+     * from 'less than' to 'greater than'
+     *
+     */
+
+    p5.NumberDict.prototype._keyTest = function(flip) {
+      if (Object.keys(this.data).length === 0) {
+        throw 'Unable to use minValue on an empty NumberDict';
+      } else if (Object.keys(this.data).length === 1) {
+        return Object.keys(this.data)[0];
+      } else {
+        var result = Object.keys(this.data)[0];
+        for (var i = 1; i < Object.keys(this.data).length; i++) {
+          if (Object.keys(this.data)[i] * flip < result * flip) {
+            result = Object.keys(this.data)[i];
+          }
+        }
+        return result;
+      }
+    };
+
+    /**
+     * Return the lowest key.
+     *
+     * @method minKey
+     * @return {Number}
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+     *   var lowestKey = myDictionary.minKey(); // value is 1.2
+     *   print(lowestKey);
+     * }
+     * 

+     *
+     */
+
+    p5.NumberDict.prototype.minKey = function() {
+      return this._keyTest(1);
+    };
+
+    /**
+     * Return the highest key.
+     *
+     * @method maxKey
+     * @return {Number}
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+     *   var highestKey = myDictionary.maxKey(); // value is 4
+     *   print(highestKey);
+     * }
+     * 

+     *
+     */
+
+    p5.NumberDict.prototype.maxKey = function() {
+      return this._keyTest(-1);
+    };
+
+    module.exports = p5.TypedDict;
+
+    },{"../core/core":22}],37:[function(_dereq_,module,exports){
+    /**
+     * @module Events
+     * @submodule Acceleration
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * The system variable deviceOrientation always contains the orientation of
+     * the device. The value of this variable will either be set 'landscape'
+     * or 'portrait'. If no data is available it will be set to 'undefined'.
+     * either LANDSCAPE or PORTRAIT.
+     *
+     * @property {Constant} deviceOrientation
+     * @readOnly
+     */
+    p5.prototype.deviceOrientation = undefined;
+
+    /**
+     * The system variable accelerationX always contains the acceleration of the
+     * device along the x axis. Value is represented as meters per second squared.
+     *
+     * @property {Number} accelerationX
+     * @readOnly
+     */
+    p5.prototype.accelerationX = 0;
+
+    /**
+     * The system variable accelerationY always contains the acceleration of the
+     * device along the y axis. Value is represented as meters per second squared.
+     *
+     * @property {Number} accelerationY
+     * @readOnly
+     */
+    p5.prototype.accelerationY = 0;
+
+    /**
+     * The system variable accelerationZ always contains the acceleration of the
+     * device along the z axis. Value is represented as meters per second squared.
+     *
+     * @property {Number} accelerationZ
+     * @readOnly
+     */
+    p5.prototype.accelerationZ = 0;
+
+    /**
+     * The system variable pAccelerationX always contains the acceleration of the
+     * device along the x axis in the frame previous to the current frame. Value
+     * is represented as meters per second squared.
+     *
+     * @property {Number} pAccelerationX
+     * @readOnly
+     */
+    p5.prototype.pAccelerationX = 0;
+
+    /**
+     * The system variable pAccelerationY always contains the acceleration of the
+     * device along the y axis in the frame previous to the current frame. Value
+     * is represented as meters per second squared.
+     *
+     * @property {Number} pAccelerationY
+     * @readOnly
+     */
+    p5.prototype.pAccelerationY = 0;
+
+    /**
+     * The system variable pAccelerationZ always contains the acceleration of the
+     * device along the z axis in the frame previous to the current frame. Value
+     * is represented as meters per second squared.
+     *
+     * @property {Number} pAccelerationZ
+     * @readOnly
+     */
+    p5.prototype.pAccelerationZ = 0;
+
+    /**
+     * _updatePAccelerations updates the pAcceleration values
+     *
+     * @private
+     */
+    p5.prototype._updatePAccelerations = function() {
+      this._setProperty('pAccelerationX', this.accelerationX);
+      this._setProperty('pAccelerationY', this.accelerationY);
+      this._setProperty('pAccelerationZ', this.accelerationZ);
+    };
+
+    /**
+     * The system variable rotationX always contains the rotation of the
+     * device along the x axis. Value is represented as 0 to +/-180 degrees.
+     * 


+     * Note: The order the rotations are called is important, ie. if used
+     * together, it must be called in the order Z-X-Y or there might be
+     * unexpected behaviour.
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   //rotateZ(radians(rotationZ));
+     *   rotateX(radians(rotationX));
+     *   //rotateY(radians(rotationY));
+     *   box(200, 200, 200);
+     * }
+     * 
+     * 

+     *
+     * @property {Number} rotationX
+     * @readOnly
+     *
+     * @alt
+     * red horizontal line right, green vertical line bottom. black background.
+     *
+     */
+    p5.prototype.rotationX = 0;
+
+    /**
+     * The system variable rotationY always contains the rotation of the
+     * device along the y axis. Value is represented as 0 to +/-90 degrees.
+     * 


+     * Note: The order the rotations are called is important, ie. if used
+     * together, it must be called in the order Z-X-Y or there might be
+     * unexpected behaviour.
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   //rotateZ(radians(rotationZ));
+     *   //rotateX(radians(rotationX));
+     *   rotateY(radians(rotationY));
+     *   box(200, 200, 200);
+     * }
+     * 
+     * 

+     *
+     * @property {Number} rotationY
+     * @readOnly
+     *
+     * @alt
+     * red horizontal line right, green vertical line bottom. black background.
+     */
+    p5.prototype.rotationY = 0;
+
+    /**
+     * The system variable rotationZ always contains the rotation of the
+     * device along the z axis. Value is represented as 0 to 359 degrees.
+     * 


+     * Unlike rotationX and rotationY, this variable is available for devices
+     * with a built-in compass only.
+     * 


+     * Note: The order the rotations are called is important, ie. if used
+     * together, it must be called in the order Z-X-Y or there might be
+     * unexpected behaviour.
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   rotateZ(radians(rotationZ));
+     *   //rotateX(radians(rotationX));
+     *   //rotateY(radians(rotationY));
+     *   box(200, 200, 200);
+     * }
+     * 
+     * 

+     *
+     * @property {Number} rotationZ
+     * @readOnly
+     *
+     * @alt
+     * red horizontal line right, green vertical line bottom. black background.
+     */
+    p5.prototype.rotationZ = 0;
+
+    /**
+     * The system variable pRotationX always contains the rotation of the
+     * device along the x axis in the frame previous to the current frame. Value
+     * is represented as 0 to +/-180 degrees.
+     * 


+     * pRotationX can also be used with rotationX to determine the rotate
+     * direction of the device along the X-axis.
+     * @example
+     * 

+     * 
+     * // A simple if statement looking at whether
+     * // rotationX - pRotationX < 0 is true or not will be
+     * // sufficient for determining the rotate direction
+     * // in most cases.
+     *
+     * // Some extra logic is needed to account for cases where
+     * // the angles wrap around.
+     * var rotateDirection = 'clockwise';
+     *
+     * // Simple range conversion to make things simpler.
+     * // This is not absolutely necessary but the logic
+     * // will be different in that case.
+     *
+     * var rX = rotationX + 180;
+     * var pRX = pRotationX + 180;
+     *
+     * if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
+     *   rotateDirection = 'clockwise';
+     * } else if (rX - pRX < 0 || rX - pRX > 270) {
+     *   rotateDirection = 'counter-clockwise';
+     * }
+     *
+     * print(rotateDirection);
+     * 
+     * 

+     *
+     * @alt
+     * no image to display.
+     *
+     *
+     * @property {Number} pRotationX
+     * @readOnly
+     */
+    p5.prototype.pRotationX = 0;
+
+    /**
+     * The system variable pRotationY always contains the rotation of the
+     * device along the y axis in the frame previous to the current frame. Value
+     * is represented as 0 to +/-90 degrees.
+     * 


+     * pRotationY can also be used with rotationY to determine the rotate
+     * direction of the device along the Y-axis.
+     * @example
+     * 

+     * 
+     * // A simple if statement looking at whether
+     * // rotationY - pRotationY < 0 is true or not will be
+     * // sufficient for determining the rotate direction
+     * // in most cases.
+     *
+     * // Some extra logic is needed to account for cases where
+     * // the angles wrap around.
+     * var rotateDirection = 'clockwise';
+     *
+     * // Simple range conversion to make things simpler.
+     * // This is not absolutely necessary but the logic
+     * // will be different in that case.
+     *
+     * var rY = rotationY + 180;
+     * var pRY = pRotationY + 180;
+     *
+     * if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
+     *   rotateDirection = 'clockwise';
+     * } else if (rY - pRY < 0 || rY - pRY > 270) {
+     *   rotateDirection = 'counter-clockwise';
+     * }
+     * print(rotateDirection);
+     * 
+     * 

+     *
+     * @alt
+     * no image to display.
+     *
+     *
+     * @property {Number} pRotationY
+     * @readOnly
+     */
+    p5.prototype.pRotationY = 0;
+
+    /**
+     * The system variable pRotationZ always contains the rotation of the
+     * device along the z axis in the frame previous to the current frame. Value
+     * is represented as 0 to 359 degrees.
+     * 


+     * pRotationZ can also be used with rotationZ to determine the rotate
+     * direction of the device along the Z-axis.
+     * @example
+     * 

+     * 
+     * // A simple if statement looking at whether
+     * // rotationZ - pRotationZ < 0 is true or not will be
+     * // sufficient for determining the rotate direction
+     * // in most cases.
+     *
+     * // Some extra logic is needed to account for cases where
+     * // the angles wrap around.
+     * var rotateDirection = 'clockwise';
+     *
+     * if (
+     *   (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
+     *   rotationZ - pRotationZ < -270
+     * ) {
+     *   rotateDirection = 'clockwise';
+     * } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
+     *   rotateDirection = 'counter-clockwise';
+     * }
+     * print(rotateDirection);
+     * 
+     * 

+     *
+     * @alt
+     * no image to display.
+     *
+     *
+     * @property {Number} pRotationZ
+     * @readOnly
+     */
+    p5.prototype.pRotationZ = 0;
+
+    var startAngleX = 0;
+    var startAngleY = 0;
+    var startAngleZ = 0;
+
+    var rotateDirectionX = 'clockwise';
+    var rotateDirectionY = 'clockwise';
+    var rotateDirectionZ = 'clockwise';
+
+    var pRotateDirectionX;
+    var pRotateDirectionY;
+    var pRotateDirectionZ;
+
+    p5.prototype._updatePRotations = function() {
+      this._setProperty('pRotationX', this.rotationX);
+      this._setProperty('pRotationY', this.rotationY);
+      this._setProperty('pRotationZ', this.rotationZ);
+    };
+
+    /**
+     * @property {String} turnAxis
+     * @readOnly
+     */
+    p5.prototype.turnAxis = undefined;
+
+    var move_threshold = 0.5;
+    var shake_threshold = 30;
+
+    /**
+     * The setMoveThreshold() function is used to set the movement threshold for
+     * the deviceMoved() function. The default threshold is set to 0.5.
+     *
+     * @method setMoveThreshold
+     * @param {number} value The threshold value
+     */
+    p5.prototype.setMoveThreshold = function(val) {
+      if (typeof val === 'number') {
+        move_threshold = val;
+      }
+    };
+
+    /**
+     * The setShakeThreshold() function is used to set the movement threshold for
+     * the deviceShaken() function. The default threshold is set to 30.
+     *
+     * @method setShakeThreshold
+     * @param {number} value The threshold value
+     */
+    p5.prototype.setShakeThreshold = function(val) {
+      if (typeof val === 'number') {
+        shake_threshold = val;
+      }
+    };
+
+    /**
+     * The deviceMoved() function is called when the device is moved by more than
+     * the threshold value along X, Y or Z axis. The default threshold is set to
+     * 0.5.
+     * @method deviceMoved
+     * @example
+     * 

+     * 
+     * // Run this example on a mobile device
+     * // Move the device around
+     * // to change the value.
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function deviceMoved() {
+     *   value = value + 5;
+     *   if (value > 255) {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 black rect in center of canvas. turns white on mobile when device moves
+     *
+     */
+
+    /**
+     * The deviceTurned() function is called when the device rotates by
+     * more than 90 degrees continuously.
+     * 


+     * The axis that triggers the deviceTurned() method is stored in the turnAxis
+     * variable. The deviceTurned() method can be locked to trigger on any axis:
+     * X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
+     *
+     * @method deviceTurned
+     * @example
+     * 

+     * 
+     * // Run this example on a mobile device
+     * // Rotate the device by 90 degrees
+     * // to change the value.
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function deviceTurned() {
+     *   if (value === 0) {
+     *     value = 255;
+     *   } else if (value === 255) {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     * 

+     * 
+     * // Run this example on a mobile device
+     * // Rotate the device by 90 degrees in the
+     * // X-axis to change the value.
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function deviceTurned() {
+     *   if (turnAxis === 'X') {
+     *     if (value === 0) {
+     *       value = 255;
+     *     } else if (value === 255) {
+     *       value = 0;
+     *     }
+     *   }
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 black rect in center of canvas. turns white on mobile when device turns
+     * 50x50 black rect in center of canvas. turns white on mobile when x-axis turns
+     *
+     */
+
+    /**
+     * The deviceShaken() function is called when the device total acceleration
+     * changes of accelerationX and accelerationY values is more than
+     * the threshold value. The default threshold is set to 30.
+     * @method deviceShaken
+     * @example
+     * 

+     * 
+     * // Run this example on a mobile device
+     * // Shake the device to change the value.
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function deviceShaken() {
+     *   value = value + 5;
+     *   if (value > 255) {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 black rect in center of canvas. turns white on mobile when device shakes
+     *
+     */
+
+    p5.prototype._ondeviceorientation = function(e) {
+      this._updatePRotations();
+      this._setProperty('rotationX', e.beta);
+      this._setProperty('rotationY', e.gamma);
+      this._setProperty('rotationZ', e.alpha);
+      this._handleMotion();
+    };
+    p5.prototype._ondevicemotion = function(e) {
+      this._updatePAccelerations();
+      this._setProperty('accelerationX', e.acceleration.x * 2);
+      this._setProperty('accelerationY', e.acceleration.y * 2);
+      this._setProperty('accelerationZ', e.acceleration.z * 2);
+      this._handleMotion();
+    };
+    p5.prototype._handleMotion = function() {
+      if (window.orientation === 90 || window.orientation === -90) {
+        this._setProperty('deviceOrientation', 'landscape');
+      } else if (window.orientation === 0) {
+        this._setProperty('deviceOrientation', 'portrait');
+      } else if (window.orientation === undefined) {
+        this._setProperty('deviceOrientation', 'undefined');
+      }
+      var deviceMoved = this.deviceMoved || window.deviceMoved;
+      if (typeof deviceMoved === 'function') {
+        if (
+          Math.abs(this.accelerationX - this.pAccelerationX) > move_threshold ||
+          Math.abs(this.accelerationY - this.pAccelerationY) > move_threshold ||
+          Math.abs(this.accelerationZ - this.pAccelerationZ) > move_threshold
+        ) {
+          deviceMoved();
+        }
+      }
+      var deviceTurned = this.deviceTurned || window.deviceTurned;
+      if (typeof deviceTurned === 'function') {
+        // The angles given by rotationX etc is from range -180 to 180.
+        // The following will convert them to 0 to 360 for ease of calculation
+        // of cases when the angles wrapped around.
+        // _startAngleX will be converted back at the end and updated.
+        var wRX = this.rotationX + 180;
+        var wPRX = this.pRotationX + 180;
+        var wSAX = startAngleX + 180;
+        if ((wRX - wPRX > 0 && wRX - wPRX < 270) || wRX - wPRX < -270) {
+          rotateDirectionX = 'clockwise';
+        } else if (wRX - wPRX < 0 || wRX - wPRX > 270) {
+          rotateDirectionX = 'counter-clockwise';
+        }
+        if (rotateDirectionX !== pRotateDirectionX) {
+          wSAX = wRX;
+        }
+        if (Math.abs(wRX - wSAX) > 90 && Math.abs(wRX - wSAX) < 270) {
+          wSAX = wRX;
+          this._setProperty('turnAxis', 'X');
+          deviceTurned();
+        }
+        pRotateDirectionX = rotateDirectionX;
+        startAngleX = wSAX - 180;
+
+        // Y-axis is identical to X-axis except for changing some names.
+        var wRY = this.rotationY + 180;
+        var wPRY = this.pRotationY + 180;
+        var wSAY = startAngleY + 180;
+        if ((wRY - wPRY > 0 && wRY - wPRY < 270) || wRY - wPRY < -270) {
+          rotateDirectionY = 'clockwise';
+        } else if (wRY - wPRY < 0 || wRY - this.pRotationY > 270) {
+          rotateDirectionY = 'counter-clockwise';
+        }
+        if (rotateDirectionY !== pRotateDirectionY) {
+          wSAY = wRY;
+        }
+        if (Math.abs(wRY - wSAY) > 90 && Math.abs(wRY - wSAY) < 270) {
+          wSAY = wRY;
+          this._setProperty('turnAxis', 'Y');
+          deviceTurned();
+        }
+        pRotateDirectionY = rotateDirectionY;
+        startAngleY = wSAY - 180;
+
+        // Z-axis is already in the range 0 to 360
+        // so no conversion is needed.
+        if (
+          (this.rotationZ - this.pRotationZ > 0 &&
+            this.rotationZ - this.pRotationZ < 270) ||
+          this.rotationZ - this.pRotationZ < -270
+        ) {
+          rotateDirectionZ = 'clockwise';
+        } else if (
+          this.rotationZ - this.pRotationZ < 0 ||
+          this.rotationZ - this.pRotationZ > 270
+        ) {
+          rotateDirectionZ = 'counter-clockwise';
+        }
+        if (rotateDirectionZ !== pRotateDirectionZ) {
+          startAngleZ = this.rotationZ;
+        }
+        if (
+          Math.abs(this.rotationZ - startAngleZ) > 90 &&
+          Math.abs(this.rotationZ - startAngleZ) < 270
+        ) {
+          startAngleZ = this.rotationZ;
+          this._setProperty('turnAxis', 'Z');
+          deviceTurned();
+        }
+        pRotateDirectionZ = rotateDirectionZ;
+        this._setProperty('turnAxis', undefined);
+      }
+      var deviceShaken = this.deviceShaken || window.deviceShaken;
+      if (typeof deviceShaken === 'function') {
+        var accelerationChangeX;
+        var accelerationChangeY;
+        // Add accelerationChangeZ if acceleration change on Z is needed
+        if (this.pAccelerationX !== null) {
+          accelerationChangeX = Math.abs(this.accelerationX - this.pAccelerationX);
+          accelerationChangeY = Math.abs(this.accelerationY - this.pAccelerationY);
+        }
+        if (accelerationChangeX + accelerationChangeY > shake_threshold) {
+          deviceShaken();
+        }
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],38:[function(_dereq_,module,exports){
+    /**
+     * @module Events
+     * @submodule Keyboard
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Holds the key codes of currently pressed keys.
+     * @private
+     */
+    var downKeys = {};
+
+    /**
+     * The boolean system variable keyIsPressed is true if any key is pressed
+     * and false if no keys are pressed.
+     *
+     * @property {Boolean} keyIsPressed
+     * @readOnly
+     * @example
+     * 

+     * 
+     * function draw() {
+     *   if (keyIsPressed === true) {
+     *     fill(0);
+     *   } else {
+     *     fill(255);
+     *   }
+     *   rect(25, 25, 50, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 white rect that turns black on keypress.
+     *
+     */
+    p5.prototype.isKeyPressed = false;
+    p5.prototype.keyIsPressed = false; // khan
+
+    /**
+     * The system variable key always contains the value of the most recent
+     * key on the keyboard that was typed. To get the proper capitalization, it
+     * is best to use it within keyTyped(). For non-ASCII keys, use the keyCode
+     * variable.
+     *
+     * @property {String} key
+     * @readOnly
+     * @example
+     * 

+     * // Click any key to display it!
+     * // (Not Guaranteed to be Case Sensitive)
+     * function setup() {
+     *   fill(245, 123, 158);
+     *   textSize(50);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   text(key, 33, 65); // Display last key pressed.
+     * }
+     * 

+     *
+     * @alt
+     * canvas displays any key value that is pressed in pink font.
+     *
+     */
+    p5.prototype.key = '';
+
+    /**
+     * The variable keyCode is used to detect special keys such as BACKSPACE,
+     * DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,
+     * DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
+     * You can also check for custom keys by looking up the keyCode of any key
+     * on a site like this: keycode.info.
+     *
+     * @property {Integer} keyCode
+     * @readOnly
+     * @example
+     * 

+     * var fillVal = 126;
+     * function draw() {
+     *   fill(fillVal);
+     *   rect(25, 25, 50, 50);
+     * }
+     *
+     * function keyPressed() {
+     *   if (keyCode === UP_ARROW) {
+     *     fillVal = 255;
+     *   } else if (keyCode === DOWN_ARROW) {
+     *     fillVal = 0;
+     *   }
+     *   return false; // prevent default
+     * }
+     * 

+     *
+     * @alt
+     * Grey rect center. turns white when up arrow pressed and black when down
+     *
+     */
+    p5.prototype.keyCode = 0;
+
+    /**
+     * The keyPressed() function is called once every time a key is pressed. The
+     * keyCode for the key that was pressed is stored in the keyCode variable.
+     * 


+     * For non-ASCII keys, use the keyCode variable. You can check if the keyCode
+     * equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL,
+     * OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
+     * 


+     * For ASCII keys that was pressed is stored in the key variable. However, it
+     * does not distinguish between uppercase and lowercase. For this reason, it
+     * is recommended to use keyTyped() to read the key variable, in which the
+     * case of the variable will be distinguished.
+     * 


+     * Because of how operating systems handle key repeats, holding down a key
+     * may cause multiple calls to keyTyped() (and keyReleased() as well). The
+     * rate of repeat is set by the operating system and how each computer is
+     * configured.


+     * Browsers may have different default
+     * behaviors attached to various key events. To prevent any default
+     * behavior for this event, add "return false" to the end of the method.
+     *
+     * @method keyPressed
+     * @example
+     * 

+     * 
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function keyPressed() {
+     *   if (value === 0) {
+     *     value = 255;
+     *   } else {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     * 

+     * 
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function keyPressed() {
+     *   if (keyCode === LEFT_ARROW) {
+     *     value = 255;
+     *   } else if (keyCode === RIGHT_ARROW) {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     * 

+     * 
+     * function keyPressed() {
+     *   // Do something
+     *   return false; // prevent any default behaviour
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black rect center. turns white when key pressed and black when released
+     * black rect center. turns white when left arrow pressed and black when right.
+     *
+     */
+    p5.prototype._onkeydown = function(e) {
+      if (downKeys[e.which]) {
+        // prevent multiple firings
+        return;
+      }
+      this._setProperty('isKeyPressed', true);
+      this._setProperty('keyIsPressed', true);
+      this._setProperty('keyCode', e.which);
+      downKeys[e.which] = true;
+      var key = String.fromCharCode(e.which);
+      if (!key) {
+        key = e.which;
+      }
+      this._setProperty('key', key);
+      var keyPressed = this.keyPressed || window.keyPressed;
+      if (typeof keyPressed === 'function' && !e.charCode) {
+        var executeDefault = keyPressed(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+    /**
+     * The keyReleased() function is called once every time a key is released.
+     * See key and keyCode for more information.


+     * Browsers may have different default
+     * behaviors attached to various key events. To prevent any default
+     * behavior for this event, add "return false" to the end of the method.
+     *
+     * @method keyReleased
+     * @example
+     * 

+     * 
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function keyReleased() {
+     *   if (value === 0) {
+     *     value = 255;
+     *   } else {
+     *     value = 0;
+     *   }
+     *   return false; // prevent any default behavior
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black rect center. turns white when key pressed and black when pressed again
+     *
+     */
+    p5.prototype._onkeyup = function(e) {
+      var keyReleased = this.keyReleased || window.keyReleased;
+      downKeys[e.which] = false;
+
+      if (!areDownKeys()) {
+        this._setProperty('isKeyPressed', false);
+        this._setProperty('keyIsPressed', false);
+      }
+
+      this._setProperty('_lastKeyCodeTyped', null);
+
+      var key = String.fromCharCode(e.which);
+      if (!key) {
+        key = e.which;
+      }
+      this._setProperty('key', key);
+      this._setProperty('keyCode', e.which);
+      if (typeof keyReleased === 'function') {
+        var executeDefault = keyReleased(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    /**
+     * The keyTyped() function is called once every time a key is pressed, but
+     * action keys such as Ctrl, Shift, and Alt are ignored. The most recent
+     * key pressed will be stored in the key variable.
+     * 


+     * Because of how operating systems handle key repeats, holding down a key
+     * will cause multiple calls to keyTyped() (and keyReleased() as well). The
+     * rate of repeat is set by the operating system and how each computer is
+     * configured.


+     * Browsers may have different default behaviors attached to various key
+     * events. To prevent any default behavior for this event, add "return false"
+     * to the end of the method.
+     *
+     * @method keyTyped
+     * @example
+     * 

+     * 
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function keyTyped() {
+     *   if (key === 'a') {
+     *     value = 255;
+     *   } else if (key === 'b') {
+     *     value = 0;
+     *   }
+     *   // uncomment to prevent any default behavior
+     *   // return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black rect center. turns white when 'a' key typed and black when 'b' pressed
+     *
+     */
+    p5.prototype._onkeypress = function(e) {
+      if (e.which === this._lastKeyCodeTyped) {
+        // prevent multiple firings
+        return;
+      }
+      this._setProperty('keyCode', e.which);
+      this._setProperty('_lastKeyCodeTyped', e.which); // track last keyCode
+      this._setProperty('key', String.fromCharCode(e.which));
+      var keyTyped = this.keyTyped || window.keyTyped;
+      if (typeof keyTyped === 'function') {
+        var executeDefault = keyTyped(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+    /**
+     * The onblur function is called when the user is no longer focused
+     * on the p5 element. Because the keyup events will not fire if the user is
+     * not focused on the element we must assume all keys currently down have
+     * been released.
+     */
+    p5.prototype._onblur = function(e) {
+      downKeys = {};
+    };
+
+    /**
+     * The keyIsDown() function checks if the key is currently down, i.e. pressed.
+     * It can be used if you have an object that moves, and you want several keys
+     * to be able to affect its behaviour simultaneously, such as moving a
+     * sprite diagonally. You can put in any number representing the keyCode of
+     * the key, or use any of the variable keyCode names listed
+     * here.
+     *
+     * @method keyIsDown
+     * @param {Number}          code The key to check for.
+     * @return {Boolean}        whether key is down or not
+     * @example
+     * 

+     * var x = 100;
+     * var y = 100;
+     *
+     * function setup() {
+     *   createCanvas(512, 512);
+     * }
+     *
+     * function draw() {
+     *   if (keyIsDown(LEFT_ARROW)) {
+     *     x -= 5;
+     *   }
+     *
+     *   if (keyIsDown(RIGHT_ARROW)) {
+     *     x += 5;
+     *   }
+     *
+     *   if (keyIsDown(UP_ARROW)) {
+     *     y -= 5;
+     *   }
+     *
+     *   if (keyIsDown(DOWN_ARROW)) {
+     *     y += 5;
+     *   }
+     *
+     *   clear();
+     *   fill(255, 0, 0);
+     *   ellipse(x, y, 50, 50);
+     * }
+     * 

+     *
+     * @alt
+     * 50x50 red ellipse moves left, right, up and down with arrow presses.
+     *
+     */
+    p5.prototype.keyIsDown = function(code) {
+      p5._validateParameters('keyIsDown', arguments);
+      return downKeys[code];
+    };
+
+    /**
+     * The checkDownKeys function returns a boolean true if any keys pressed
+     * and a false if no keys are currently pressed.
+
+     * Helps avoid instances where a multiple keys are pressed simultaneously and
+     * releasing a single key will then switch the
+     * keyIsPressed property to true.
+     * @private
+    **/
+    function areDownKeys() {
+      for (var key in downKeys) {
+        if (downKeys.hasOwnProperty(key) && downKeys[key] === true) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    module.exports = p5;
+
+    },{"../core/core":22}],39:[function(_dereq_,module,exports){
+    /**
+     * @module Events
+     * @submodule Mouse
+     * @for p5
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var constants = _dereq_('../core/constants');
+
+    /*
+     * This is a flag which is false until the first time
+     * we receive a mouse event. The pmouseX and pmouseY
+     * values will match the mouseX and mouseY values until
+     * this interaction takes place.
+     */
+    p5.prototype._hasMouseInteracted = false;
+
+    /**
+     * The system variable mouseX always contains the current horizontal
+     * position of the mouse, relative to (0, 0) of the canvas. If touch is
+     * used instead of mouse input, mouseX will hold the x value of the most
+     * recent touch point.
+     *
+     * @property {Number} mouseX
+     * @readOnly
+     *
+     * @example
+     * 

+     * 
+     * // Move the mouse across the canvas
+     * function draw() {
+     *   background(244, 248, 252);
+     *   line(mouseX, 0, mouseX, 100);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * horizontal black line moves left and right with mouse x-position
+     *
+     */
+    p5.prototype.mouseX = 0;
+
+    /**
+     * The system variable mouseY always contains the current vertical position
+     * of the mouse, relative to (0, 0) of the canvas. If touch is
+     * used instead of mouse input, mouseY will hold the y value of the most
+     * recent touch point.
+     *
+     * @property {Number} mouseY
+     * @readOnly
+     *
+     * @example
+     * 

+     * 
+     * // Move the mouse across the canvas
+     * function draw() {
+     *   background(244, 248, 252);
+     *   line(0, mouseY, 100, mouseY);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * vertical black line moves up and down with mouse y-position
+     *
+     */
+    p5.prototype.mouseY = 0;
+
+    /**
+     * The system variable pmouseX always contains the horizontal position of
+     * the mouse or finger in the frame previous to the current frame, relative to
+     * (0, 0) of the canvas.
+     *
+     * @property {Number} pmouseX
+     * @readOnly
+     *
+     * @example
+     * 

+     * 
+     * // Move the mouse across the canvas to leave a trail
+     * function setup() {
+     *   //slow down the frameRate to make it more visible
+     *   frameRate(10);
+     * }
+     *
+     * function draw() {
+     *   background(244, 248, 252);
+     *   line(mouseX, mouseY, pmouseX, pmouseY);
+     *   print(pmouseX + ' -> ' + mouseX);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * line trail is created from cursor movements. faster movement make longer line.
+     *
+     */
+    p5.prototype.pmouseX = 0;
+
+    /**
+     * The system variable pmouseY always contains the vertical position of the
+     * mouse or finger in the frame previous to the current frame, relative to
+     * (0, 0) of the canvas.
+     *
+     * @property {Number} pmouseY
+     * @readOnly
+     *
+     * @example
+     * 

+     * 
+     * function draw() {
+     *   background(237, 34, 93);
+     *   fill(0);
+     *   //draw a square only if the mouse is not moving
+     *   if (mouseY === pmouseY && mouseX === pmouseX) {
+     *     rect(20, 20, 60, 60);
+     *   }
+     *
+     *   print(pmouseY + ' -> ' + mouseY);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 60x60 black rect center, fuschia background. rect flickers on mouse movement
+     *
+     */
+    p5.prototype.pmouseY = 0;
+
+    /**
+     * The system variable winMouseX always contains the current horizontal
+     * position of the mouse, relative to (0, 0) of the window.
+     *
+     * @property {Number} winMouseX
+     * @readOnly
+     *
+     * @example
+     * 

+     * 
+     * var myCanvas;
+     *
+     * function setup() {
+     *   //use a variable to store a pointer to the canvas
+     *   myCanvas = createCanvas(100, 100);
+     * }
+     *
+     * function draw() {
+     *   background(237, 34, 93);
+     *   fill(0);
+     *
+     *   //move the canvas to the horizontal mouse position
+     *   //rela                    tive to the window
+     *   myCanvas.position(winMouseX + 1, windowHeight / 2);
+     *
+     *   //the y of the square is relative to the canvas
+     *   rect(20, mouseY, 60, 60);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 60x60 black rect y moves with mouse y and fuschia canvas moves with mouse x
+     *
+     */
+    p5.prototype.winMouseX = 0;
+
+    /**
+     * The system variable winMouseY always contains the current vertical
+     * position of the mouse, relative to (0, 0) of the window.
+     *
+     * @property {Number} winMouseY
+     * @readOnly
+     *
+     * @example
+     * 

+     * 
+     * var myCanvas;
+     *
+     * function setup() {
+     *   //use a variable to store a pointer to the canvas
+     *   myCanvas = createCanvas(100, 100);
+     * }
+     *
+     * function draw() {
+     *   background(237, 34, 93);
+     *   fill(0);
+     *
+     *   //move the canvas to the vertical mouse position
+     *   //rel                    ative to the window
+     *   myCanvas.position(windowWidth / 2, winMouseY + 1);
+     *
+     *   //the x of the square is relative to the canvas
+     *   rect(mouseX, 20, 60, 60);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 60x60 black rect x moves with mouse x and fuschia canvas y moves with mouse y
+     *
+     */
+    p5.prototype.winMouseY = 0;
+
+    /**
+     * The system variable pwinMouseX always contains the horizontal position
+     * of the mouse in the frame previous to the current frame, relative to
+     * (0, 0) of the window.
+     *
+     * @property {Number} pwinMouseX
+     * @readOnly
+     *
+     * @example
+     * 

+     * 
+     * var myCanvas;
+     *
+     * function setup() {
+     *   //use a variable to store a pointer to the canvas
+     *   myCanvas = createCanvas(100, 100);
+     *   noStroke();
+     *   fill(237, 34, 93);
+     * }
+     *
+     * function draw() {
+     *   clear();
+     *   //the difference between previous and
+     *   //current x position is the horizontal mouse speed
+     *   var speed = abs(winMouseX - pwinMouseX);
+     *   //change the size of the circle
+     *   //according to the horizontal speed
+     *   ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
+     *   //move the canvas to the mouse position
+     *   myCanvas.position(winMouseX + 1, winMouseY + 1);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * fuschia ellipse moves with mouse x and y. Grows and shrinks with mouse speed
+     *
+     */
+    p5.prototype.pwinMouseX = 0;
+
+    /**
+     * The system variable pwinMouseY always contains the vertical position of
+     * the mouse in the frame previous to the current frame, relative to (0, 0)
+     * of the window.
+     *
+     * @property {Number} pwinMouseY
+     * @readOnly
+     *
+     *
+     * @example
+     * 

+     * 
+     * var myCanvas;
+     *
+     * function setup() {
+     *   //use a variable to store a pointer to the canvas
+     *   myCanvas = createCanvas(100, 100);
+     *   noStroke();
+     *   fill(237, 34, 93);
+     * }
+     *
+     * function draw() {
+     *   clear();
+     *   //the difference between previous and
+     *   //current y position is the vertical mouse speed
+     *   var speed = abs(winMouseY - pwinMouseY);
+     *   //change the size of the circle
+     *   //according to the vertical speed
+     *   ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
+     *   //move the canvas to the mouse position
+     *   myCanvas.position(winMouseX + 1, winMouseY + 1);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * fuschia ellipse moves with mouse x and y. Grows and shrinks with mouse speed
+     *
+     */
+    p5.prototype.pwinMouseY = 0;
+
+    /**
+     * Processing automatically tracks if the mouse button is pressed and which
+     * button is pressed. The value of the system variable mouseButton is either
+     * LEFT, RIGHT, or CENTER depending on which button was pressed last.
+     * Warning: different browsers may track mouseButton differently.
+     *
+     * @property {Constant} mouseButton
+     * @readOnly
+     *
+     * @example
+     * 

+     * 
+     * function draw() {
+     *   background(237, 34, 93);
+     *   fill(0);
+     *
+     *   if (mouseIsPressed) {
+     *     if (mouseButton === LEFT) {
+     *       ellipse(50, 50, 50, 50);
+     *     }
+     *     if (mouseButton === RIGHT) {
+     *       rect(25, 25, 50, 50);
+     *     }
+     *     if (mouseButton === CENTER) {
+     *       triangle(23, 75, 50, 20, 78, 75);
+     *     }
+     *   }
+     *
+     *   print(mouseButton);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 black ellipse appears on center of fuschia canvas on mouse click/press.
+     *
+     */
+    p5.prototype.mouseButton = 0;
+
+    /**
+     * The boolean system variable mouseIsPressed is true if the mouse is pressed
+     * and false if not.
+     *
+     * @property {Boolean} mouseIsPressed
+     * @readOnly
+     *
+     * @example
+     * 

+     * 
+     * function draw() {
+     *   background(237, 34, 93);
+     *   fill(0);
+     *
+     *   if (mouseIsPressed) {
+     *     ellipse(50, 50, 50, 50);
+     *   } else {
+     *     rect(25, 25, 50, 50);
+     *   }
+     *
+     *   print(mouseIsPressed);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black 50x50 rect becomes ellipse with mouse click/press. fuschia background.
+     *
+     */
+    p5.prototype.mouseIsPressed = false;
+
+    p5.prototype._updateNextMouseCoords = function(e) {
+      if (this._curElement !== null && (!e.touches || e.touches.length > 0)) {
+        var mousePos = getMousePos(
+          this._curElement.elt,
+          this.width,
+          this.height,
+          e
+        );
+        this._setProperty('mouseX', mousePos.x);
+        this._setProperty('mouseY', mousePos.y);
+        this._setProperty('winMouseX', mousePos.winX);
+        this._setProperty('winMouseY', mousePos.winY);
+      }
+      if (!this._hasMouseInteracted) {
+        // For first draw, make previous and next equal
+        this._updateMouseCoords();
+        this._setProperty('_hasMouseInteracted', true);
+      }
+    };
+
+    p5.prototype._updateMouseCoords = function() {
+      this._setProperty('pmouseX', this.mouseX);
+      this._setProperty('pmouseY', this.mouseY);
+      this._setProperty('pwinMouseX', this.winMouseX);
+      this._setProperty('pwinMouseY', this.winMouseY);
+    };
+
+    function getMousePos(canvas, w, h, evt) {
+      if (evt && !evt.clientX) {
+        // use touches if touch and not mouse
+        if (evt.touches) {
+          evt = evt.touches[0];
+        } else if (evt.changedTouches) {
+          evt = evt.changedTouches[0];
+        }
+      }
+      var rect = canvas.getBoundingClientRect();
+      var sx = canvas.scrollWidth / w;
+      var sy = canvas.scrollHeight / h;
+      return {
+        x: (evt.clientX - rect.left) / sx,
+        y: (evt.clientY - rect.top) / sy,
+        winX: evt.clientX,
+        winY: evt.clientY,
+        id: evt.identifier
+      };
+    }
+
+    p5.prototype._setMouseButton = function(e) {
+      if (e.button === 1) {
+        this._setProperty('mouseButton', constants.CENTER);
+      } else if (e.button === 2) {
+        this._setProperty('mouseButton', constants.RIGHT);
+      } else {
+        this._setProperty('mouseButton', constants.LEFT);
+      }
+    };
+
+    /**
+     * The mouseMoved() function is called every time the mouse moves and a mouse
+     * button is not pressed.


+     * Browsers may have different default
+     * behaviors attached to various mouse events. To prevent any default
+     * behavior for this event, add "return false" to the end of the method.
+     *
+     * @method mouseMoved
+     * @example
+     * 

+     * 
+     * // Move the mouse across the page
+     * // to change its value
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function mouseMoved() {
+     *   value = value + 5;
+     *   if (value > 255) {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * function mouseMoved() {
+     *   ellipse(mouseX, mouseY, 5, 5);
+     *   // prevent default
+     *   return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black 50x50 rect becomes lighter with mouse movements until white then resets
+     * no image displayed
+     *
+     */
+
+    /**
+     * The mouseDragged() function is called once every time the mouse moves and
+     * a mouse button is pressed. If no mouseDragged() function is defined, the
+     * touchMoved() function will be called instead if it is defined.


+     * Browsers may have different default
+     * behaviors attached to various mouse events. To prevent any default
+     * behavior for this event, add "return false" to the end of the method.
+     *
+     * @method mouseDragged
+     * @example
+     * 

+     * 
+     * // Drag the mouse across the page
+     * // to change its value
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function mouseDragged() {
+     *   value = value + 5;
+     *   if (value > 255) {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * function mouseDragged() {
+     *   ellipse(mouseX, mouseY, 5, 5);
+     *   // prevent default
+     *   return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black 50x50 rect turns lighter with mouse click and drag until white, resets
+     * no image displayed
+     *
+     */
+    p5.prototype._onmousemove = function(e) {
+      var context = this._isGlobal ? window : this;
+      var executeDefault;
+      this._updateNextMouseCoords(e);
+      if (!this.mouseIsPressed) {
+        if (typeof context.mouseMoved === 'function') {
+          executeDefault = context.mouseMoved(e);
+          if (executeDefault === false) {
+            e.preventDefault();
+          }
+        }
+      } else {
+        if (typeof context.mouseDragged === 'function') {
+          executeDefault = context.mouseDragged(e);
+          if (executeDefault === false) {
+            e.preventDefault();
+          }
+        } else if (typeof context.touchMoved === 'function') {
+          executeDefault = context.touchMoved(e);
+          if (executeDefault === false) {
+            e.preventDefault();
+          }
+        }
+      }
+    };
+
+    /**
+     * The mousePressed() function is called once after every time a mouse button
+     * is pressed. The mouseButton variable (see the related reference entry)
+     * can be used to determine which button has been pressed. If no
+     * mousePressed() function is defined, the touchStarted() function will be
+     * called instead if it is defined.


+     * Browsers may have different default
+     * behaviors attached to various mouse events. To prevent any default
+     * behavior for this event, add "return false" to the end of the method.
+     *
+     * @method mousePressed
+     * @example
+     * 

+     * 
+     * // Click within the image to change
+     * // the value of the rectangle
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function mousePressed() {
+     *   if (value === 0) {
+     *     value = 255;
+     *   } else {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * function mousePressed() {
+     *   ellipse(mouseX, mouseY, 5, 5);
+     *   // prevent default
+     *   return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black 50x50 rect turns white with mouse click/press.
+     * no image displayed
+     *
+     */
+    p5.prototype._onmousedown = function(e) {
+      var context = this._isGlobal ? window : this;
+      var executeDefault;
+      this._setProperty('mouseIsPressed', true);
+      this._setMouseButton(e);
+      this._updateNextMouseCoords(e);
+      if (typeof context.mousePressed === 'function') {
+        executeDefault = context.mousePressed(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      } else if (typeof context.touchStarted === 'function') {
+        executeDefault = context.touchStarted(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    /**
+     * The mouseReleased() function is called every time a mouse button is
+     * released. If no mouseReleased() function is defined, the touchEnded()
+     * function will be called instead if it is defined.


+     * Browsers may have different default
+     * behaviors attached to various mouse events. To prevent any default
+     * behavior for this event, add "return false" to the end of the method.
+     *
+     *
+     * @method mouseReleased
+     * @example
+     * 

+     * 
+     * // Click within the image to change
+     * // the value of the rectangle
+     * // after the mouse has been clicked
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function mouseReleased() {
+     *   if (value === 0) {
+     *     value = 255;
+     *   } else {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * function mouseReleased() {
+     *   ellipse(mouseX, mouseY, 5, 5);
+     *   // prevent default
+     *   return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black 50x50 rect turns white with mouse click/press.
+     * no image displayed
+     *
+     */
+    p5.prototype._onmouseup = function(e) {
+      var context = this._isGlobal ? window : this;
+      var executeDefault;
+      this._setProperty('mouseIsPressed', false);
+      if (typeof context.mouseReleased === 'function') {
+        executeDefault = context.mouseReleased(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      } else if (typeof context.touchEnded === 'function') {
+        executeDefault = context.touchEnded(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    p5.prototype._ondragend = p5.prototype._onmouseup;
+    p5.prototype._ondragover = p5.prototype._onmousemove;
+
+    /**
+     * The mouseClicked() function is called once after a mouse button has been
+     * pressed and then released.


+     * Browsers handle clicks differently, so this function is only guaranteed to be
+     * run when the left mouse button is clicked. To handle other mouse buttons
+     * being pressed or released, see mousePressed() or mouseReleased().


+     * Browsers may have different default
+     * behaviors attached to various mouse events. To prevent any default
+     * behavior for this event, add "return false" to the end of the method.
+     *
+     * @method mouseClicked
+     * @example
+     * 

+     * 
+     * // Click within the image to change
+     * // the value of the rectangle
+     * // after the mouse has been clicked
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     *
+     * function mouseClicked() {
+     *   if (value === 0) {
+     *     value = 255;
+     *   } else {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * function mouseClicked() {
+     *   ellipse(mouseX, mouseY, 5, 5);
+     *   // prevent default
+     *   return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black 50x50 rect turns white with mouse click/press.
+     * no image displayed
+     *
+     */
+    p5.prototype._onclick = function(e) {
+      var context = this._isGlobal ? window : this;
+      if (typeof context.mouseClicked === 'function') {
+        var executeDefault = context.mouseClicked(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    /**
+     * The doubleClicked() function is executed every time a event
+     * listener has detected a dblclick event which is a part of the
+     * DOM L3 specification. The doubleClicked event is fired when a
+     * pointing device button (usually a mouse's primary button)
+     * is clicked twice on a single element. For more info on the
+     * dblclick event refer to mozilla's documentation here:
+     * https://developer.mozilla.org/en-US/docs/Web/Events/dblclick
+     *
+     * @method doubleClicked
+     * @example
+     * 

+     * 
+     * // Click within the image to change
+     * // the value of the rectangle
+     * // after the mouse has been double clicked
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     *
+     * function doubleClicked() {
+     *   if (value === 0) {
+     *     value = 255;
+     *   } else {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * function doubleClicked() {
+     *   ellipse(mouseX, mouseY, 5, 5);
+     *   // prevent default
+     *   return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black 50x50 rect turns white with mouse doubleClick/press.
+     * no image displayed
+     */
+
+    p5.prototype._ondblclick = function(e) {
+      var context = this._isGlobal ? window : this;
+      if (typeof context.doubleClicked === 'function') {
+        var executeDefault = context.doubleClicked(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    /**
+     * The function mouseWheel() is executed every time a vertical mouse wheel
+     * event is detected either triggered by an actual mouse wheel or by a
+     * touchpad.


+     * The event.delta property returns the amount the mouse wheel
+     * have scrolled. The values can be positive or negative depending on the
+     * scroll direction (on OS X with "natural" scrolling enabled, the signs
+     * are inverted).


+     * Browsers may have different default behaviors attached to various
+     * mouse events. To prevent any default behavior for this event, add
+     * "return false" to the end of the method.


+     * Due to the current support of the "wheel" event on Safari, the function
+     * may only work as expected if "return false" is included while using Safari.
+     *
+     * @method mouseWheel
+     *
+     * @example
+     * 

+     * 
+     * var pos = 25;
+     *
+     * function draw() {
+     *   background(237, 34, 93);
+     *   fill(0);
+     *   rect(25, pos, 50, 50);
+     * }
+     *
+     * function mouseWheel(event) {
+     *   print(event.delta);
+     *   //move the square according to the vertical scroll amount
+     *   pos += event.delta;
+     *   //uncomment to block page scrolling
+     *   //return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black 50x50 rect moves up and down with vertical scroll. fuschia background
+     *
+     */
+    p5.prototype._onwheel = function(e) {
+      var context = this._isGlobal ? window : this;
+      if (typeof context.mouseWheel === 'function') {
+        e.delta = e.deltaY;
+        var executeDefault = context.mouseWheel(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/constants":21,"../core/core":22}],40:[function(_dereq_,module,exports){
+    /**
+     * @module Events
+     * @submodule Touch
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * The system variable touches[] contains an array of the positions of all
+     * current touch points, relative to (0, 0) of the canvas, and IDs identifying a
+     * unique touch as it moves. Each element in the array is an object with x, y,
+     * and id properties.
+     *
+     * The touches[] array is not supported on Safari and IE on touch-based
+     * desktops (laptops).
+     *
+     * @property {Object[]} touches
+     * @readOnly
+     */
+    p5.prototype.touches = [];
+
+    p5.prototype._updateTouchCoords = function(e) {
+      if (this._curElement !== null) {
+        var touches = [];
+        for (var i = 0; i < e.touches.length; i++) {
+          touches[i] = getTouchInfo(
+            this._curElement.elt,
+            this.width,
+            this.height,
+            e,
+            i
+          );
+        }
+        this._setProperty('touches', touches);
+      }
+    };
+
+    function getTouchInfo(canvas, w, h, e, i) {
+      i = i || 0;
+      var rect = canvas.getBoundingClientRect();
+      var sx = canvas.scrollWidth / w;
+      var sy = canvas.scrollHeight / h;
+      var touch = e.touches[i] || e.changedTouches[i];
+      return {
+        x: (touch.clientX - rect.left) / sx,
+        y: (touch.clientY - rect.top) / sy,
+        winX: touch.clientX,
+        winY: touch.clientY,
+        id: touch.identifier
+      };
+    }
+
+    /**
+     * The touchStarted() function is called once after every time a touch is
+     * registered. If no touchStarted() function is defined, the mousePressed()
+     * function will be called instead if it is defined.


+     * Browsers may have different default behaviors attached to various touch
+     * events. To prevent any default behavior for this event, add "return false"
+     * to the end of the method.
+     *
+     * @method touchStarted
+     * @example
+     * 

+     * 
+     * // Touch within the image to change
+     * // the value of the rectangle
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function touchStarted() {
+     *   if (value === 0) {
+     *     value = 255;
+     *   } else {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * function touchStarted() {
+     *   ellipse(mouseX, mouseY, 5, 5);
+     *   // prevent default
+     *   return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 black rect turns white with touch event.
+     * no image displayed
+     */
+    p5.prototype._ontouchstart = function(e) {
+      var context = this._isGlobal ? window : this;
+      var executeDefault;
+      this._setProperty('mouseIsPressed', true);
+      this._updateTouchCoords(e);
+      this._updateNextMouseCoords(e);
+      if (typeof context.touchStarted === 'function') {
+        executeDefault = context.touchStarted(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      } else if (typeof context.mousePressed === 'function') {
+        executeDefault = context.mousePressed(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    /**
+     * The touchMoved() function is called every time a touch move is registered.
+     * If no touchMoved() function is defined, the mouseDragged() function will
+     * be called instead if it is defined.


+     * Browsers may have different default behaviors attached to various touch
+     * events. To prevent any default behavior for this event, add "return false"
+     * to the end of the method.
+     *
+     * @method touchMoved
+     * @example
+     * 

+     * 
+     * // Move your finger across the page
+     * // to change its value
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function touchMoved() {
+     *   value = value + 5;
+     *   if (value > 255) {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * function touchMoved() {
+     *   ellipse(mouseX, mouseY, 5, 5);
+     *   // prevent default
+     *   return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 black rect turns lighter with touch until white. resets
+     * no image displayed
+     *
+     */
+    p5.prototype._ontouchmove = function(e) {
+      var context = this._isGlobal ? window : this;
+      var executeDefault;
+      this._updateTouchCoords(e);
+      this._updateNextMouseCoords(e);
+      if (typeof context.touchMoved === 'function') {
+        executeDefault = context.touchMoved(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      } else if (typeof context.mouseDragged === 'function') {
+        executeDefault = context.mouseDragged(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    /**
+     * The touchEnded() function is called every time a touch ends. If no
+     * touchEnded() function is defined, the mouseReleased() function will be
+     * called instead if it is defined.


+     * Browsers may have different default behaviors attached to various touch
+     * events. To prevent any default behavior for this event, add "return false"
+     * to the end of the method.
+     *
+     * @method touchEnded
+     * @example
+     * 

+     * 
+     * // Release touch within the image to
+     * // change the value of the rectangle
+     *
+     * var value = 0;
+     * function draw() {
+     *   fill(value);
+     *   rect(25, 25, 50, 50);
+     * }
+     * function touchEnded() {
+     *   if (value === 0) {
+     *     value = 255;
+     *   } else {
+     *     value = 0;
+     *   }
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * function touchEnded() {
+     *   ellipse(mouseX, mouseY, 5, 5);
+     *   // prevent default
+     *   return false;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 50x50 black rect turns white with touch.
+     * no image displayed
+     *
+     */
+    p5.prototype._ontouchend = function(e) {
+      this._setProperty('mouseIsPressed', false);
+      this._updateTouchCoords(e);
+      this._updateNextMouseCoords(e);
+      var context = this._isGlobal ? window : this;
+      var executeDefault;
+      if (typeof context.touchEnded === 'function') {
+        executeDefault = context.touchEnded(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      } else if (typeof context.mouseReleased === 'function') {
+        executeDefault = context.mouseReleased(e);
+        if (executeDefault === false) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],41:[function(_dereq_,module,exports){
+    /*global ImageData:false */
+
+    /**
+     * This module defines the filters for use with image buffers.
+     *
+     * This module is basically a collection of functions stored in an object
+     * as opposed to modules. The functions are destructive, modifying
+     * the passed in canvas rather than creating a copy.
+     *
+     * Generally speaking users of this module will use the Filters.apply method
+     * on a canvas to create an effect.
+     *
+     * A number of functions are borrowed/adapted from
+     * http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+     * or the java processing implementation.
+     */
+
+    'use strict';
+
+    var Filters = {};
+
+    /*
+     * Helper functions
+     */
+
+    /**
+     * Returns the pixel buffer for a canvas
+     *
+     * @private
+     *
+     * @param  {Canvas|ImageData} canvas the canvas to get pixels from
+     * @return {Uint8ClampedArray}       a one-dimensional array containing
+     *                                   the data in thc RGBA order, with integer
+     *                                   values between 0 and 255
+     */
+    Filters._toPixels = function(canvas) {
+      if (canvas instanceof ImageData) {
+        return canvas.data;
+      } else {
+        return canvas
+          .getContext('2d')
+          .getImageData(0, 0, canvas.width, canvas.height).data;
+      }
+    };
+
+    /**
+     * Returns a 32 bit number containing ARGB data at ith pixel in the
+     * 1D array containing pixels data.
+     *
+     * @private
+     *
+     * @param  {Uint8ClampedArray} data array returned by _toPixels()
+     * @param  {Integer}           i    index of a 1D Image Array
+     * @return {Integer}                32 bit integer value representing
+     *                                  ARGB value.
+     */
+    Filters._getARGB = function(data, i) {
+      var offset = i * 4;
+      return (
+        ((data[offset + 3] << 24) & 0xff000000) |
+        ((data[offset] << 16) & 0x00ff0000) |
+        ((data[offset + 1] << 8) & 0x0000ff00) |
+        (data[offset + 2] & 0x000000ff)
+      );
+    };
+
+    /**
+     * Modifies pixels RGBA values to values contained in the data object.
+     *
+     * @private
+     *
+     * @param {Uint8ClampedArray} pixels array returned by _toPixels()
+     * @param {Int32Array}        data   source 1D array where each value
+     *                                   represents ARGB values
+     */
+    Filters._setPixels = function(pixels, data) {
+      var offset = 0;
+      for (var i = 0, al = pixels.length; i < al; i++) {
+        offset = i * 4;
+        pixels[offset + 0] = (data[i] & 0x00ff0000) >>> 16;
+        pixels[offset + 1] = (data[i] & 0x0000ff00) >>> 8;
+        pixels[offset + 2] = data[i] & 0x000000ff;
+        pixels[offset + 3] = (data[i] & 0xff000000) >>> 24;
+      }
+    };
+
+    /**
+     * Returns the ImageData object for a canvas
+     * https://developer.mozilla.org/en-US/docs/Web/API/ImageData
+     *
+     * @private
+     *
+     * @param  {Canvas|ImageData} canvas canvas to get image data from
+     * @return {ImageData}               Holder of pixel data (and width and
+     *                                   height) for a canvas
+     */
+    Filters._toImageData = function(canvas) {
+      if (canvas instanceof ImageData) {
+        return canvas;
+      } else {
+        return canvas
+          .getContext('2d')
+          .getImageData(0, 0, canvas.width, canvas.height);
+      }
+    };
+
+    /**
+     * Returns a blank ImageData object.
+     *
+     * @private
+     *
+     * @param  {Integer} width
+     * @param  {Integer} height
+     * @return {ImageData}
+     */
+    Filters._createImageData = function(width, height) {
+      Filters._tmpCanvas = document.createElement('canvas');
+      Filters._tmpCtx = Filters._tmpCanvas.getContext('2d');
+      return this._tmpCtx.createImageData(width, height);
+    };
+
+    /**
+     * Applys a filter function to a canvas.
+     *
+     * The difference between this and the actual filter functions defined below
+     * is that the filter functions generally modify the pixel buffer but do
+     * not actually put that data back to the canvas (where it would actually
+     * update what is visible). By contrast this method does make the changes
+     * actually visible in the canvas.
+     *
+     * The apply method is the method that callers of this module would generally
+     * use. It has been separated from the actual filters to support an advanced
+     * use case of creating a filter chain that executes without actually updating
+     * the canvas in between everystep.
+     *
+     * @private
+     * @param  {HTMLCanvasElement} canvas [description]
+     * @param  {function(ImageData,Object)} func   [description]
+     * @param  {Object} filterParam  [description]
+     */
+    Filters.apply = function(canvas, func, filterParam) {
+      var ctx = canvas.getContext('2d');
+      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+      //Filters can either return a new ImageData object, or just modify
+      //the one they received.
+      var newImageData = func(imageData, filterParam);
+      if (newImageData instanceof ImageData) {
+        ctx.putImageData(newImageData, 0, 0, 0, 0, canvas.width, canvas.height);
+      } else {
+        ctx.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
+      }
+    };
+
+    /*
+     * Filters
+     */
+
+    /**
+     * Converts the image to black and white pixels depending if they are above or
+     * below the threshold defined by the level parameter. The parameter must be
+     * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
+     *
+     * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+     *
+     * @private
+     * @param  {Canvas} canvas
+     * @param  {Float} level
+     */
+    Filters.threshold = function(canvas, level) {
+      var pixels = Filters._toPixels(canvas);
+
+      if (level === undefined) {
+        level = 0.5;
+      }
+      var thresh = Math.floor(level * 255);
+
+      for (var i = 0; i < pixels.length; i += 4) {
+        var r = pixels[i];
+        var g = pixels[i + 1];
+        var b = pixels[i + 2];
+        var gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+        var val;
+        if (gray >= thresh) {
+          val = 255;
+        } else {
+          val = 0;
+        }
+        pixels[i] = pixels[i + 1] = pixels[i + 2] = val;
+      }
+    };
+
+    /**
+     * Converts any colors in the image to grayscale equivalents.
+     * No parameter is used.
+     *
+     * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
+     *
+     * @private
+     * @param {Canvas} canvas
+     */
+    Filters.gray = function(canvas) {
+      var pixels = Filters._toPixels(canvas);
+
+      for (var i = 0; i < pixels.length; i += 4) {
+        var r = pixels[i];
+        var g = pixels[i + 1];
+        var b = pixels[i + 2];
+
+        // CIE luminance for RGB
+        var gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+        pixels[i] = pixels[i + 1] = pixels[i + 2] = gray;
+      }
+    };
+
+    /**
+     * Sets the alpha channel to entirely opaque. No parameter is used.
+     *
+     * @private
+     * @param {Canvas} canvas
+     */
+    Filters.opaque = function(canvas) {
+      var pixels = Filters._toPixels(canvas);
+
+      for (var i = 0; i < pixels.length; i += 4) {
+        pixels[i + 3] = 255;
+      }
+
+      return pixels;
+    };
+
+    /**
+     * Sets each pixel to its inverse value. No parameter is used.
+     * @private
+     * @param  {Canvas} canvas
+     */
+    Filters.invert = function(canvas) {
+      var pixels = Filters._toPixels(canvas);
+
+      for (var i = 0; i < pixels.length; i += 4) {
+        pixels[i] = 255 - pixels[i];
+        pixels[i + 1] = 255 - pixels[i + 1];
+        pixels[i + 2] = 255 - pixels[i + 2];
+      }
+    };
+
+    /**
+     * Limits each channel of the image to the number of colors specified as
+     * the parameter. The parameter can be set to values between 2 and 255, but
+     * results are most noticeable in the lower ranges.
+     *
+     * Adapted from java based processing implementation
+     *
+     * @private
+     * @param  {Canvas} canvas
+     * @param  {Integer} level
+     */
+    Filters.posterize = function(canvas, level) {
+      var pixels = Filters._toPixels(canvas);
+
+      if (level < 2 || level > 255) {
+        throw new Error(
+          'Level must be greater than 2 and less than 255 for posterize'
+        );
+      }
+
+      var levels1 = level - 1;
+      for (var i = 0; i < pixels.length; i += 4) {
+        var rlevel = pixels[i];
+        var glevel = pixels[i + 1];
+        var blevel = pixels[i + 2];
+
+        pixels[i] = ((rlevel * level) >> 8) * 255 / levels1;
+        pixels[i + 1] = ((glevel * level) >> 8) * 255 / levels1;
+        pixels[i + 2] = ((blevel * level) >> 8) * 255 / levels1;
+      }
+    };
+
+    /**
+     * reduces the bright areas in an image
+     * @private
+     * @param  {Canvas} canvas
+     *
+     */
+    Filters.dilate = function(canvas) {
+      var pixels = Filters._toPixels(canvas);
+      var currIdx = 0;
+      var maxIdx = pixels.length ? pixels.length / 4 : 0;
+      var out = new Int32Array(maxIdx);
+      var currRowIdx, maxRowIdx, colOrig, colOut, currLum;
+
+      var idxRight, idxLeft, idxUp, idxDown;
+      var colRight, colLeft, colUp, colDown;
+      var lumRight, lumLeft, lumUp, lumDown;
+
+      while (currIdx < maxIdx) {
+        currRowIdx = currIdx;
+        maxRowIdx = currIdx + canvas.width;
+        while (currIdx < maxRowIdx) {
+          colOrig = colOut = Filters._getARGB(pixels, currIdx);
+          idxLeft = currIdx - 1;
+          idxRight = currIdx + 1;
+          idxUp = currIdx - canvas.width;
+          idxDown = currIdx + canvas.width;
+
+          if (idxLeft < currRowIdx) {
+            idxLeft = currIdx;
+          }
+          if (idxRight >= maxRowIdx) {
+            idxRight = currIdx;
+          }
+          if (idxUp < 0) {
+            idxUp = 0;
+          }
+          if (idxDown >= maxIdx) {
+            idxDown = currIdx;
+          }
+          colUp = Filters._getARGB(pixels, idxUp);
+          colLeft = Filters._getARGB(pixels, idxLeft);
+          colDown = Filters._getARGB(pixels, idxDown);
+          colRight = Filters._getARGB(pixels, idxRight);
+
+          //compute luminance
+          currLum =
+            77 * ((colOrig >> 16) & 0xff) +
+            151 * ((colOrig >> 8) & 0xff) +
+            28 * (colOrig & 0xff);
+          lumLeft =
+            77 * ((colLeft >> 16) & 0xff) +
+            151 * ((colLeft >> 8) & 0xff) +
+            28 * (colLeft & 0xff);
+          lumRight =
+            77 * ((colRight >> 16) & 0xff) +
+            151 * ((colRight >> 8) & 0xff) +
+            28 * (colRight & 0xff);
+          lumUp =
+            77 * ((colUp >> 16) & 0xff) +
+            151 * ((colUp >> 8) & 0xff) +
+            28 * (colUp & 0xff);
+          lumDown =
+            77 * ((colDown >> 16) & 0xff) +
+            151 * ((colDown >> 8) & 0xff) +
+            28 * (colDown & 0xff);
+
+          if (lumLeft > currLum) {
+            colOut = colLeft;
+            currLum = lumLeft;
+          }
+          if (lumRight > currLum) {
+            colOut = colRight;
+            currLum = lumRight;
+          }
+          if (lumUp > currLum) {
+            colOut = colUp;
+            currLum = lumUp;
+          }
+          if (lumDown > currLum) {
+            colOut = colDown;
+            currLum = lumDown;
+          }
+          out[currIdx++] = colOut;
+        }
+      }
+      Filters._setPixels(pixels, out);
+    };
+
+    /**
+     * increases the bright areas in an image
+     * @private
+     * @param  {Canvas} canvas
+     *
+     */
+    Filters.erode = function(canvas) {
+      var pixels = Filters._toPixels(canvas);
+      var currIdx = 0;
+      var maxIdx = pixels.length ? pixels.length / 4 : 0;
+      var out = new Int32Array(maxIdx);
+      var currRowIdx, maxRowIdx, colOrig, colOut, currLum;
+      var idxRight, idxLeft, idxUp, idxDown;
+      var colRight, colLeft, colUp, colDown;
+      var lumRight, lumLeft, lumUp, lumDown;
+
+      while (currIdx < maxIdx) {
+        currRowIdx = currIdx;
+        maxRowIdx = currIdx + canvas.width;
+        while (currIdx < maxRowIdx) {
+          colOrig = colOut = Filters._getARGB(pixels, currIdx);
+          idxLeft = currIdx - 1;
+          idxRight = currIdx + 1;
+          idxUp = currIdx - canvas.width;
+          idxDown = currIdx + canvas.width;
+
+          if (idxLeft < currRowIdx) {
+            idxLeft = currIdx;
+          }
+          if (idxRight >= maxRowIdx) {
+            idxRight = currIdx;
+          }
+          if (idxUp < 0) {
+            idxUp = 0;
+          }
+          if (idxDown >= maxIdx) {
+            idxDown = currIdx;
+          }
+          colUp = Filters._getARGB(pixels, idxUp);
+          colLeft = Filters._getARGB(pixels, idxLeft);
+          colDown = Filters._getARGB(pixels, idxDown);
+          colRight = Filters._getARGB(pixels, idxRight);
+
+          //compute luminance
+          currLum =
+            77 * ((colOrig >> 16) & 0xff) +
+            151 * ((colOrig >> 8) & 0xff) +
+            28 * (colOrig & 0xff);
+          lumLeft =
+            77 * ((colLeft >> 16) & 0xff) +
+            151 * ((colLeft >> 8) & 0xff) +
+            28 * (colLeft & 0xff);
+          lumRight =
+            77 * ((colRight >> 16) & 0xff) +
+            151 * ((colRight >> 8) & 0xff) +
+            28 * (colRight & 0xff);
+          lumUp =
+            77 * ((colUp >> 16) & 0xff) +
+            151 * ((colUp >> 8) & 0xff) +
+            28 * (colUp & 0xff);
+          lumDown =
+            77 * ((colDown >> 16) & 0xff) +
+            151 * ((colDown >> 8) & 0xff) +
+            28 * (colDown & 0xff);
+
+          if (lumLeft < currLum) {
+            colOut = colLeft;
+            currLum = lumLeft;
+          }
+          if (lumRight < currLum) {
+            colOut = colRight;
+            currLum = lumRight;
+          }
+          if (lumUp < currLum) {
+            colOut = colUp;
+            currLum = lumUp;
+          }
+          if (lumDown < currLum) {
+            colOut = colDown;
+            currLum = lumDown;
+          }
+
+          out[currIdx++] = colOut;
+        }
+      }
+      Filters._setPixels(pixels, out);
+    };
+
+    // BLUR
+
+    // internal kernel stuff for the gaussian blur filter
+    var blurRadius;
+    var blurKernelSize;
+    var blurKernel;
+    var blurMult;
+
+    /*
+     * Port of https://github.com/processing/processing/blob/
+     * master/core/src/processing/core/PImage.java#L1250
+     *
+     * Optimized code for building the blur kernel.
+     * further optimized blur code (approx. 15% for radius=20)
+     * bigger speed gains for larger radii (~30%)
+     * added support for various image types (ALPHA, RGB, ARGB)
+     * [toxi 050728]
+     */
+    function buildBlurKernel(r) {
+      var radius = (r * 3.5) | 0;
+      radius = radius < 1 ? 1 : radius < 248 ? radius : 248;
+
+      if (blurRadius !== radius) {
+        blurRadius = radius;
+        blurKernelSize = (1 + blurRadius) << 1;
+        blurKernel = new Int32Array(blurKernelSize);
+        blurMult = new Array(blurKernelSize);
+        for (var l = 0; l < blurKernelSize; l++) {
+          blurMult[l] = new Int32Array(256);
+        }
+
+        var bk, bki;
+        var bm, bmi;
+
+        for (var i = 1, radiusi = radius - 1; i < radius; i++) {
+          blurKernel[radius + i] = blurKernel[radiusi] = bki = radiusi * radiusi;
+          bm = blurMult[radius + i];
+          bmi = blurMult[radiusi--];
+          for (var j = 0; j < 256; j++) {
+            bm[j] = bmi[j] = bki * j;
+          }
+        }
+        bk = blurKernel[radius] = radius * radius;
+        bm = blurMult[radius];
+
+        for (var k = 0; k < 256; k++) {
+          bm[k] = bk * k;
+        }
+      }
+    }
+
+    // Port of https://github.com/processing/processing/blob/
+    // master/core/src/processing/core/PImage.java#L1433
+    function blurARGB(canvas, radius) {
+      var pixels = Filters._toPixels(canvas);
+      var width = canvas.width;
+      var height = canvas.height;
+      var numPackedPixels = width * height;
+      var argb = new Int32Array(numPackedPixels);
+      for (var j = 0; j < numPackedPixels; j++) {
+        argb[j] = Filters._getARGB(pixels, j);
+      }
+      var sum, cr, cg, cb, ca;
+      var read, ri, ym, ymi, bk0;
+      var a2 = new Int32Array(numPackedPixels);
+      var r2 = new Int32Array(numPackedPixels);
+      var g2 = new Int32Array(numPackedPixels);
+      var b2 = new Int32Array(numPackedPixels);
+      var yi = 0;
+      buildBlurKernel(radius);
+      var x, y, i;
+      var bm;
+      for (y = 0; y < height; y++) {
+        for (x = 0; x < width; x++) {
+          cb = cg = cr = ca = sum = 0;
+          read = x - blurRadius;
+          if (read < 0) {
+            bk0 = -read;
+            read = 0;
+          } else {
+            if (read >= width) {
+              break;
+            }
+            bk0 = 0;
+          }
+          for (i = bk0; i < blurKernelSize; i++) {
+            if (read >= width) {
+              break;
+            }
+            var c = argb[read + yi];
+            bm = blurMult[i];
+            ca += bm[(c & -16777216) >>> 24];
+            cr += bm[(c & 16711680) >> 16];
+            cg += bm[(c & 65280) >> 8];
+            cb += bm[c & 255];
+            sum += blurKernel[i];
+            read++;
+          }
+          ri = yi + x;
+          a2[ri] = ca / sum;
+          r2[ri] = cr / sum;
+          g2[ri] = cg / sum;
+          b2[ri] = cb / sum;
+        }
+        yi += width;
+      }
+      yi = 0;
+      ym = -blurRadius;
+      ymi = ym * width;
+      for (y = 0; y < height; y++) {
+        for (x = 0; x < width; x++) {
+          cb = cg = cr = ca = sum = 0;
+          if (ym < 0) {
+            bk0 = ri = -ym;
+            read = x;
+          } else {
+            if (ym >= height) {
+              break;
+            }
+            bk0 = 0;
+            ri = ym;
+            read = x + ymi;
+          }
+          for (i = bk0; i < blurKernelSize; i++) {
+            if (ri >= height) {
+              break;
+            }
+            bm = blurMult[i];
+            ca += bm[a2[read]];
+            cr += bm[r2[read]];
+            cg += bm[g2[read]];
+            cb += bm[b2[read]];
+            sum += blurKernel[i];
+            ri++;
+            read += width;
+          }
+          argb[x + yi] =
+            ((ca / sum) << 24) |
+            ((cr / sum) << 16) |
+            ((cg / sum) << 8) |
+            (cb / sum);
+        }
+        yi += width;
+        ymi += width;
+        ym++;
+      }
+      Filters._setPixels(pixels, argb);
+    }
+
+    Filters.blur = function(canvas, radius) {
+      blurARGB(canvas, radius);
+    };
+
+    module.exports = Filters;
+
+    },{}],42:[function(_dereq_,module,exports){
+    /**
+     * @module Image
+     * @submodule Image
+     * @for p5
+     * @requires core
+     */
+
+    /**
+     * This module defines the p5 methods for the p5.Image class
+     * for drawing images to the main display canvas.
+     */
+    'use strict';
+
+    var p5 = _dereq_('../core/core'); // This is not global, but JSHint is not aware that // this module is implicitly enclosed with Browserify: this overrides the // redefined-global error and permits using the name "frames" for the array // of saved animation frames.
+
+    /* global frames:true */ var frames = [];
+
+    /**
+     * Creates a new p5.Image (the datatype for storing images). This provides a
+     * fresh buffer of pixels to play with. Set the size of the buffer with the
+     * width and height parameters.
+     * 


+     * .pixels gives access to an array containing the values for all the pixels
+     * in the display window.
+     * These values are numbers. This array is the size (including an appropriate
+     * factor for the pixelDensity) of the display window x4,
+     * representing the R, G, B, A values in order for each pixel, moving from
+     * left to right across each row, then down each column. See .pixels for
+     * more info. It may also be simpler to use set() or get().
+     * 


+     * Before accessing the pixels of an image, the data must loaded with the
+     * loadPixels() function. After the array data has been modified, the
+     * updatePixels() function must be run to update the changes.
+     *
+     * @method createImage
+     * @param  {Integer} width  width in pixels
+     * @param  {Integer} height height in pixels
+     * @return {p5.Image}       the p5.Image object
+     * @example
+     * 

+     * 
+     * var img = createImage(66, 66);
+     * img.loadPixels();
+     * for (var i = 0; i < img.width; i++) {
+     *   for (var j = 0; j < img.height; j++) {
+     *     img.set(i, j, color(0, 90, 102));
+     *   }
+     * }
+     * img.updatePixels();
+     * image(img, 17, 17);
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img = createImage(66, 66);
+     * img.loadPixels();
+     * for (var i = 0; i < img.width; i++) {
+     *   for (var j = 0; j < img.height; j++) {
+     *     img.set(i, j, color(0, 90, 102, (i % img.width) * 2));
+     *   }
+     * }
+     * img.updatePixels();
+     * image(img, 17, 17);
+     * image(img, 34, 34);
+     * 
+     * 

+     *
+     * 

+     * 
+     * var pink = color(255, 102, 204);
+     * var img = createImage(66, 66);
+     * img.loadPixels();
+     * var d = pixelDensity();
+     * var halfImage = 4 * (width * d) * (height / 2 * d);
+     * for (var i = 0; i < halfImage; i += 4) {
+     *   img.pixels[i] = red(pink);
+     *   img.pixels[i + 1] = green(pink);
+     *   img.pixels[i + 2] = blue(pink);
+     *   img.pixels[i + 3] = alpha(pink);
+     * }
+     * img.updatePixels();
+     * image(img, 17, 17);
+     * 
+     * 

+     *
+     * @alt
+     * 66x66 dark turquoise rect in center of canvas.
+     * 2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas
+     * no image displayed
+     *
+     */
+    p5.prototype.createImage = function(width, height) {
+      p5._validateParameters('createImage', arguments);
+      return new p5.Image(width, height);
+    };
+
+    /**
+     *  Save the current canvas as an image. In Safari, this will open the
+     *  image in the window and the user must provide their own
+     *  filename on save-as. Other browsers will either save the
+     *  file immediately, or prompt the user with a dialogue window.
+     *
+     *  @method saveCanvas
+     *  @param  {p5.Element|HTMLCanvasElement} selectedCanvas   a variable
+     *                                  representing a specific html5 canvas (optional)
+     *  @param  {String} [filename]
+     *  @param  {String} [extension]      'jpg' or 'png'
+     *
+     *  @example
+     * 

+     * function setup() {
+     *   var c = createCanvas(100, 100);
+     *   background(255, 0, 0);
+     *   saveCanvas(c, 'myCanvas', 'jpg');
+     * }
+     * 

+     * 

+     * // note that this example has the same result as above
+     * // if no canvas is specified, defaults to main canvas
+     * function setup() {
+     *   var c = createCanvas(100, 100);
+     *   background(255, 0, 0);
+     *   saveCanvas('myCanvas', 'jpg');
+     *
+     *   // all of the following are valid
+     *   saveCanvas(c, 'myCanvas', 'jpg');
+     *   saveCanvas(c, 'myCanvas');
+     *   saveCanvas(c);
+     *   saveCanvas('myCanvas', 'png');
+     *   saveCanvas('myCanvas');
+     *   saveCanvas();
+     * }
+     * 

+     *
+     * @alt
+     * no image displayed
+     * no image displayed
+     * no image displayed
+     */
+    /**
+     *  @method saveCanvas
+     *  @param  {String} [filename]
+     *  @param  {String} [extension]
+     */
+    p5.prototype.saveCanvas = function(cnv, filename, extension) {
+      p5._validateParameters('saveCanvas', arguments);
+      if (cnv instanceof p5.Element) {
+        cnv = cnv.elt;
+      } else if (!(cnv instanceof HTMLCanvasElement)) {
+        filename = cnv;
+        extension = filename;
+        cnv = this._curElement && this._curElement.elt;
+      }
+
+      extension =
+        extension ||
+        p5.prototype._checkFileExtension(filename, extension)[1] ||
+        'png';
+
+      var mimeType;
+      switch (extension) {
+        default:
+          //case 'png':
+          mimeType = 'image/png';
+          break;
+        case 'jpeg':
+        case 'jpg':
+          mimeType = 'image/jpeg';
+          break;
+      }
+
+      cnv.toBlob(function(blob) {
+        p5.prototype.downloadFile(blob, filename, extension);
+      }, mimeType);
+    };
+
+    /**
+     *  Capture a sequence of frames that can be used to create a movie.
+     *  Accepts a callback. For example, you may wish to send the frames
+     *  to a server where they can be stored or converted into a movie.
+     *  If no callback is provided, the browser will pop up save dialogues in an
+     *  attempt to download all of the images that have just been created. With the
+     *  callback provided the image data isn't saved by default but instead passed
+     *  as an argument to the callback function as an array of objects, with the
+     *  size of array equal to the total number of frames.
+     *
+     *  Note that saveFrames() will only save the first 15 frames of an animation.
+     *  To export longer animations, you might look into a library like
+     *  ccapture.js.
+     *
+     *  @method saveFrames
+     *  @param  {String}   filename
+     *  @param  {String}   extension 'jpg' or 'png'
+     *  @param  {Number}   duration  Duration in seconds to save the frames for.
+     *  @param  {Number}   framerate  Framerate to save the frames in.
+     *  @param  {function(Array)} [callback] A callback function that will be executed
+                                      to handle the image data. This function
+                                      should accept an array as argument. The
+                                      array will contain the specified number of
+                                      frames of objects. Each object has three
+                                      properties: imageData - an
+                                      image/octet-stream, filename and extension.
+     *  @example
+     *  

+     * function draw() {
+     *   background(mouseX);
+     * }
+     *
+     * function mousePressed() {
+     *   saveFrames('out', 'png', 1, 25, function(data) {
+     *     print(data);
+     *   });
+     * }
+    

+     *
+     * @alt
+     * canvas background goes from light to dark with mouse x.
+     *
+     */
+    p5.prototype.saveFrames = function(fName, ext, _duration, _fps, callback) {
+      p5._validateParameters('saveFrames', arguments);
+      var duration = _duration || 3;
+      duration = p5.prototype.constrain(duration, 0, 15);
+      duration = duration * 1000;
+      var fps = _fps || 15;
+      fps = p5.prototype.constrain(fps, 0, 22);
+      var count = 0;
+
+      var makeFrame = p5.prototype._makeFrame;
+      var cnv = this._curElement.elt;
+      var frameFactory = setInterval(function() {
+        makeFrame(fName + count, ext, cnv);
+        count++;
+      }, 1000 / fps);
+
+      setTimeout(function() {
+        clearInterval(frameFactory);
+        if (callback) {
+          callback(frames);
+        } else {
+          for (var i = 0; i < frames.length; i++) {
+            var f = frames[i];
+            p5.prototype.downloadFile(f.imageData, f.filename, f.ext);
+          }
+        }
+        frames = []; // clear frames
+      }, duration + 0.01);
+    };
+
+    p5.prototype._makeFrame = function(filename, extension, _cnv) {
+      var cnv;
+      if (this) {
+        cnv = this._curElement.elt;
+      } else {
+        cnv = _cnv;
+      }
+      var mimeType;
+      if (!extension) {
+        extension = 'png';
+        mimeType = 'image/png';
+      } else {
+        switch (extension.toLowerCase()) {
+          case 'png':
+            mimeType = 'image/png';
+            break;
+          case 'jpeg':
+            mimeType = 'image/jpeg';
+            break;
+          case 'jpg':
+            mimeType = 'image/jpeg';
+            break;
+          default:
+            mimeType = 'image/png';
+            break;
+        }
+      }
+      var downloadMime = 'image/octet-stream';
+      var imageData = cnv.toDataURL(mimeType);
+      imageData = imageData.replace(mimeType, downloadMime);
+
+      var thisFrame = {};
+      thisFrame.imageData = imageData;
+      thisFrame.filename = filename;
+      thisFrame.ext = extension;
+      frames.push(thisFrame);
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],43:[function(_dereq_,module,exports){
+    /**
+     * @module Image
+     * @submodule Loading & Displaying
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var Filters = _dereq_('./filters');
+    var canvas = _dereq_('../core/canvas');
+    var constants = _dereq_('../core/constants');
+
+    _dereq_('../core/error_helpers');
+
+    /**
+     * Loads an image from a path and creates a p5.Image from it.
+     * 


+     * The image may not be immediately available for rendering
+     * If you want to ensure that the image is ready before doing
+     * anything with it, place the loadImage() call in preload().
+     * You may also supply a callback function to handle the image when it's ready.
+     * 


+     * The path to the image should be relative to the HTML file
+     * that links in your sketch. Loading an image from a URL or other
+     * remote location may be blocked due to your browser's built-in
+     * security.
+     *
+     * @method loadImage
+     * @param  {String} path Path of the image to be loaded
+     * @param  {function(p5.Image)} [successCallback] Function to be called once
+     *                                the image is loaded. Will be passed the
+     *                                p5.Image.
+     * @param  {function(Event)}    [failureCallback] called with event error if
+     *                                the image fails to load.
+     * @return {p5.Image}             the p5.Image object
+     * @example
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/laDefense.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * function setup() {
+     *   // here we use a callback to display the image after loading
+     *   loadImage('assets/laDefense.jpg', function(img) {
+     *     image(img, 0, 0);
+     *   });
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * image of the underside of a white umbrella and grided ceililng above
+     * image of the underside of a white umbrella and grided ceililng above
+     *
+     */
+    p5.prototype.loadImage = function(path, successCallback, failureCallback) {
+      p5._validateParameters('loadImage', arguments);
+      var img = new Image();
+      var pImg = new p5.Image(1, 1, this);
+
+      var self = this;
+      img.onload = function() {
+        pImg.width = pImg.canvas.width = img.width;
+        pImg.height = pImg.canvas.height = img.height;
+
+        // Draw the image into the backing canvas of the p5.Image
+        pImg.drawingContext.drawImage(img, 0, 0);
+        pImg.modified = true;
+
+        if (typeof successCallback === 'function') {
+          successCallback(pImg);
+        }
+
+        self._decrementPreload();
+      };
+      img.onerror = function(e) {
+        p5._friendlyFileLoadError(0, img.src);
+        if (typeof failureCallback === 'function') {
+          failureCallback(e);
+        }
+      };
+
+      //set crossOrigin in case image is served which CORS headers
+      //this will let us draw to canvas without tainting it.
+      //see https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
+      // When using data-uris the file will be loaded locally
+      // so we don't need to worry about crossOrigin with base64 file types
+      if (path.indexOf('data:image/') !== 0) {
+        img.crossOrigin = 'Anonymous';
+      }
+
+      //start loading the image
+      img.src = path;
+
+      return pImg;
+    };
+
+    /**
+     * Validates clipping params. Per drawImage spec sWidth and sHight cannot be
+     * negative or greater than image intrinsic width and height
+     * @private
+     * @param {Number} sVal
+     * @param {Number} iVal
+     * @returns {Number}
+     * @private
+     */
+    function _sAssign(sVal, iVal) {
+      if (sVal > 0 && sVal < iVal) {
+        return sVal;
+      } else {
+        return iVal;
+      }
+    }
+
+    /**
+     * Draw an image to the p5.js canvas.
+     *
+     * This function can be used with different numbers of parameters. The
+     * simplest use requires only three parameters: img, x, and y—where (x, y) is
+     * the position of the image. Two more parameters can optionally be added to
+     * specify the width and height of the image.
+     *
+     * This function can also be used with all eight Number parameters. To
+     * differentiate between all these parameters, p5.js uses the language of
+     * "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source
+     * image" (which corresponds to "sx", "sy", etc.) below. Specifying the
+     * "source image" dimensions can be useful when you want to display a
+     * subsection of the source image instead of the whole thing. Here's a diagram
+     * to explain further:
+     * 
+     *
+     * @method image
+     * @param  {p5.Image|p5.Element} img    the image to display
+     * @param  {Number}   x     the x-coordinate of the top-left corner of the image
+     * @param  {Number}   y     the y-coordinate of the top-left corner of the image
+     * @param  {Number}   [width]  the width to draw the image
+     * @param  {Number}   [height] the height to draw the image
+     * @example
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/laDefense.jpg');
+     * }
+     * function setup() {
+     *   // Top-left corner of the img is at (0, 0)
+     *   // Width and height are the img's original width and height
+     *   image(img, 0, 0);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/laDefense.jpg');
+     * }
+     * function setup() {
+     *   background(50);
+     *   // Top-left corner of the img is at (10, 10)
+     *   // Width and height are 50 x 50
+     *   image(img, 10, 10, 50, 50);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * function setup() {
+     *   // Here, we use a callback to display the image after loading
+     *   loadImage('assets/laDefense.jpg', function(img) {
+     *     image(img, 0, 0);
+     *   });
+     * }
+     * 
+     * 

+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/gradient.png');
+     * }
+     * function setup() {
+     *   // 1. Background image
+     *   // Top-left corner of the img is at (0, 0)
+     *   // Width and height are the img's original width and height, 100 x 100
+     *   image(img, 0, 0);
+     *   // 2. Top right image
+     *   // Top-left corner of destination rectangle is at (50, 0)
+     *   // Destination rectangle width and height are 40 x 20
+     *   // The next parameters are relative to the source image:
+     *   // - Starting at position (50, 50) on the source image, capture a 50 x 50
+     *   // subsection
+     *   // - Draw this subsection to fill the dimensions of the destination rectangle
+     *   image(img, 50, 0, 40, 20, 50, 50, 50, 50);
+     * }
+     * 
+     * 

+     * @alt
+     * image of the underside of a white umbrella and gridded ceiling above
+     * image of the underside of a white umbrella and gridded ceiling above
+     *
+     */
+    /**
+     * @method image
+     * @param  {p5.Image|p5.Element} img
+     * @param  {Number}   dx     the x-coordinate of the destination
+     *                           rectangle in which to draw the source image
+     * @param  {Number}   dy     the y-coordinate of the destination
+     *                           rectangle in which to draw the source image
+     * @param  {Number}   dWidth  the width of the destination rectangle
+     * @param  {Number}   dHeight the height of the destination rectangle
+     * @param  {Number}   sx     the x-coordinate of the subsection of the source
+     * image to draw into the destination rectangle
+     * @param  {Number}   sy     the y-coordinate of the subsection of the source
+     * image to draw into the destination rectangle
+     * @param {Number}    [sWidth] the width of the subsection of the
+     *                           source image to draw into the destination
+     *                           rectangle
+     * @param {Number}    [sHeight] the height of the subsection of the
+     *                            source image to draw into the destination rectangle
+     */
+    p5.prototype.image = function(
+      img,
+      dx,
+      dy,
+      dWidth,
+      dHeight,
+      sx,
+      sy,
+      sWidth,
+      sHeight
+    ) {
+      // set defaults per spec: https://goo.gl/3ykfOq
+
+      p5._validateParameters('image', arguments);
+
+      var defW = img.width;
+      var defH = img.height;
+
+      if (img.elt && img.elt.videoWidth && !img.canvas) {
+        // video no canvas
+        defW = img.elt.videoWidth;
+        defH = img.elt.videoHeight;
+      }
+
+      var _dx = dx;
+      var _dy = dy;
+      var _dw = dWidth || defW;
+      var _dh = dHeight || defH;
+      var _sx = sx || 0;
+      var _sy = sy || 0;
+      var _sw = sWidth || defW;
+      var _sh = sHeight || defH;
+
+      _sw = _sAssign(_sw, defW);
+      _sh = _sAssign(_sh, defH);
+
+      // This part needs cleanup and unit tests
+      // see issues https://github.com/processing/p5.js/issues/1741
+      // and https://github.com/processing/p5.js/issues/1673
+      var pd = 1;
+
+      if (img.elt && !img.canvas && img.elt.style.width) {
+        //if img is video and img.elt.size() has been used and
+        //no width passed to image()
+        if (img.elt.videoWidth && !dWidth) {
+          pd = img.elt.videoWidth;
+        } else {
+          //all other cases
+          pd = img.elt.width;
+        }
+        pd /= parseInt(img.elt.style.width, 10);
+      }
+
+      _sx *= pd;
+      _sy *= pd;
+      _sh *= pd;
+      _sw *= pd;
+
+      var vals = canvas.modeAdjust(_dx, _dy, _dw, _dh, this._renderer._imageMode);
+
+      // tint the image if there is a tint
+      this._renderer.image(img, _sx, _sy, _sw, _sh, vals.x, vals.y, vals.w, vals.h);
+    };
+
+    /**
+     * Sets the fill value for displaying images. Images can be tinted to
+     * specified colors or made transparent by including an alpha value.
+     * 


+     * To apply transparency to an image without affecting its color, use
+     * white as the tint color and specify an alpha value. For instance,
+     * tint(255, 128) will make an image 50% transparent (assuming the default
+     * alpha range of 0-255, which can be changed with colorMode()).
+     * 


+     * The value for the gray parameter must be less than or equal to the current
+     * maximum value as specified by colorMode(). The default maximum value is
+     * 255.
+     *
+     *
+     * @method tint
+     * @param  {Number}        v1      red or hue value relative to
+     *                                 the current color range
+     * @param  {Number}        v2      green or saturation value
+     *                                 relative to the current color range
+     * @param  {Number}        v3      blue or brightness value
+     *                                 relative to the current color range
+     * @param  {Number}        [alpha]
+     *
+     * @example
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/laDefense.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   tint(0, 153, 204); // Tint blue
+     *   image(img, 50, 0);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/laDefense.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   tint(0, 153, 204, 126); // Tint blue and set transparency
+     *   image(img, 50, 0);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/laDefense.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   tint(255, 126); // Apply transparency without changing color
+     *   image(img, 50, 0);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 2 side by side images of umbrella and ceiling, one image with blue tint
+     * Images of umbrella and ceiling, one half of image with blue tint
+     * 2 side by side images of umbrella and ceiling, one image translucent
+     *
+     */
+
+    /**
+     * @method tint
+     * @param  {String}        value   a color string
+     * @param  {Number}        [alpha]
+     */
+
+    /**
+     * @method tint
+     * @param  {Number[]}      values  an array containing the red,green,blue &
+     *                                 and alpha components of the color
+     */
+
+    /**
+     * @method tint
+     * @param  {p5.Color}      color   the tint color
+     */
+    p5.prototype.tint = function() {
+      p5._validateParameters('tint', arguments);
+      var c = this.color.apply(this, arguments);
+      this._renderer._tint = c.levels;
+    };
+
+    /**
+     * Removes the current fill value for displaying images and reverts to
+     * displaying images with their original hues.
+     *
+     * @method noTint
+     * @example
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   tint(0, 153, 204); // Tint blue
+     *   image(img, 0, 0);
+     *   noTint(); // Disable tint
+     *   image(img, 50, 0);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 2 side by side images of bricks, left image with blue tint
+     *
+     */
+    p5.prototype.noTint = function() {
+      this._renderer._tint = null;
+    };
+
+    /**
+     * Apply the current tint color to the input image, return the resulting
+     * canvas.
+     *
+     * @private
+     * @param {p5.Image} The image to be tinted
+     * @return {canvas} The resulting tinted canvas
+     *
+     */
+    p5.prototype._getTintedImageCanvas = function(img) {
+      if (!img.canvas) {
+        return img;
+      }
+      var pixels = Filters._toPixels(img.canvas);
+      var tmpCanvas = document.createElement('canvas');
+      tmpCanvas.width = img.canvas.width;
+      tmpCanvas.height = img.canvas.height;
+      var tmpCtx = tmpCanvas.getContext('2d');
+      var id = tmpCtx.createImageData(img.canvas.width, img.canvas.height);
+      var newPixels = id.data;
+
+      for (var i = 0; i < pixels.length; i += 4) {
+        var r = pixels[i];
+        var g = pixels[i + 1];
+        var b = pixels[i + 2];
+        var a = pixels[i + 3];
+
+        newPixels[i] = r * this._renderer._tint[0] / 255;
+        newPixels[i + 1] = g * this._renderer._tint[1] / 255;
+        newPixels[i + 2] = b * this._renderer._tint[2] / 255;
+        newPixels[i + 3] = a * this._renderer._tint[3] / 255;
+      }
+
+      tmpCtx.putImageData(id, 0, 0);
+      return tmpCanvas;
+    };
+
+    /**
+     * Set image mode. Modifies the location from which images are drawn by
+     * changing the way in which parameters given to image() are interpreted.
+     * The default mode is imageMode(CORNER), which interprets the second and
+     * third parameters of image() as the upper-left corner of the image. If
+     * two additional parameters are specified, they are used to set the image's
+     * width and height.
+     * 


+     * imageMode(CORNERS) interprets the second and third parameters of image()
+     * as the location of one corner, and the fourth and fifth parameters as the
+     * opposite corner.
+     * 


+     * imageMode(CENTER) interprets the second and third parameters of image()
+     * as the image's center point. If two additional parameters are specified,
+     * they are used to set the image's width and height.
+     *
+     * @method imageMode
+     * @param {Constant} mode either CORNER, CORNERS, or CENTER
+     * @example
+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   imageMode(CORNER);
+     *   image(img, 10, 10, 50, 50);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   imageMode(CORNERS);
+     *   image(img, 10, 10, 90, 40);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   imageMode(CENTER);
+     *   image(img, 50, 50, 80, 80);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * small square image of bricks
+     * horizontal rectangle image of bricks
+     * large square image of bricks
+     *
+     */
+    p5.prototype.imageMode = function(m) {
+      p5._validateParameters('imageMode', arguments);
+      if (
+        m === constants.CORNER ||
+        m === constants.CORNERS ||
+        m === constants.CENTER
+      ) {
+        this._renderer._imageMode = m;
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/canvas":20,"../core/constants":21,"../core/core":22,"../core/error_helpers":25,"./filters":41}],44:[function(_dereq_,module,exports){
+    /**
+     * @module Image
+     * @submodule Image
+     * @requires core
+     * @requires constants
+     * @requires filters
+     */
+
+    /**
+     * This module defines the p5.Image class and P5 methods for
+     * drawing images to the main display canvas.
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var Filters = _dereq_('./filters');
+
+    /*
+     * Class methods
+     */
+
+    /**
+     * Creates a new p5.Image. A p5.Image is a canvas backed representation of an
+     * image.
+     * 


+     * p5 can display .gif, .jpg and .png images. Images may be displayed
+     * in 2D and 3D space. Before an image is used, it must be loaded with the
+     * loadImage() function. The p5.Image class contains fields for the width and
+     * height of the image, as well as an array called pixels[] that contains the
+     * values for every pixel in the image.
+     * 


+     * The methods described below allow easy access to the image's pixels and
+     * alpha channel and simplify the process of compositing.
+     * 


+     * Before using the pixels[] array, be sure to use the loadPixels() method on
+     * the image to make sure that the pixel data is properly loaded.
+     * @example
+     * 

+     * function setup() {
+     *   var img = createImage(100, 100); // same as new p5.Image(100, 100);
+     *   img.loadPixels();
+     *   createCanvas(100, 100);
+     *   background(0);
+     *
+     *   // helper for writing color to array
+     *   function writeColor(image, x, y, red, green, blue, alpha) {
+     *     var index = (x + y * width) * 4;
+     *     image.pixels[index] = red;
+     *     image.pixels[index + 1] = green;
+     *     image.pixels[index + 2] = blue;
+     *     image.pixels[index + 3] = alpha;
+     *   }
+     *
+     *   var x, y;
+     *   // fill with random colors
+     *   for (y = 0; y < img.height; y++) {
+     *     for (x = 0; x < img.width; x++) {
+     *       var red = random(255);
+     *       var green = random(255);
+     *       var blue = random(255);
+     *       var alpha = 255;
+     *       writeColor(img, x, y, red, green, blue, alpha);
+     *     }
+     *   }
+     *
+     *   // draw a red line
+     *   y = 0;
+     *   for (x = 0; x < img.width; x++) {
+     *     writeColor(img, x, y, 255, 0, 0, 255);
+     *   }
+     *
+     *   // draw a green line
+     *   y = img.height - 1;
+     *   for (x = 0; x < img.width; x++) {
+     *     writeColor(img, x, y, 0, 255, 0, 255);
+     *   }
+     *
+     *   img.updatePixels();
+     *   image(img, 0, 0);
+     * }
+     * 

+     *
+     *
+     * @class p5.Image
+     * @constructor
+     * @param {Number} width
+     * @param {Number} height
+     */
+    p5.Image = function(width, height) {
+      /**
+       * Image width.
+       * @property {Number} width
+       * @readOnly
+       * @example
+       * 

+       * var img;
+       * function preload() {
+       *   img = loadImage('assets/rockies.jpg');
+       * }
+       *
+       * function setup() {
+       *   createCanvas(100, 100);
+       *   image(img, 0, 0);
+       *   for (var i = 0; i < img.width; i++) {
+       *     var c = img.get(i, img.height / 2);
+       *     stroke(c);
+       *     line(i, height / 2, i, height);
+       *   }
+       * }
+       * 

+       *
+       * @alt
+       * rocky mountains in top and horizontal lines in corresponding colors in bottom.
+       *
+       */
+      this.width = width;
+      /**
+       * Image height.
+       * @property {Number} height
+       * @readOnly
+       * @example
+       * 

+       * var img;
+       * function preload() {
+       *   img = loadImage('assets/rockies.jpg');
+       * }
+       *
+       * function setup() {
+       *   createCanvas(100, 100);
+       *   image(img, 0, 0);
+       *   for (var i = 0; i < img.height; i++) {
+       *     var c = img.get(img.width / 2, i);
+       *     stroke(c);
+       *     line(0, i, width / 2, i);
+       *   }
+       * }
+       * 

+       *
+       * @alt
+       * rocky mountains on right and vertical lines in corresponding colors on left.
+       *
+       */
+      this.height = height;
+      this.canvas = document.createElement('canvas');
+      this.canvas.width = this.width;
+      this.canvas.height = this.height;
+      this.drawingContext = this.canvas.getContext('2d');
+      this._pixelDensity = 1;
+      //used for webgl texturing only
+      this._modified = false;
+      /**
+       * Array containing the values for all the pixels in the display window.
+       * These values are numbers. This array is the size (include an appropriate
+       * factor for pixelDensity) of the display window x4,
+       * representing the R, G, B, A values in order for each pixel, moving from
+       * left to right across each row, then down each column. Retina and other
+       * high denisty displays may have more pixels[] (by a factor of
+       * pixelDensity^2).
+       * For example, if the image is 100x100 pixels, there will be 40,000. With
+       * pixelDensity = 2, there will be 160,000. The first four values
+       * (indices 0-3) in the array will be the R, G, B, A values of the pixel at
+       * (0, 0). The second four values (indices 4-7) will contain the R, G, B, A
+       * values of the pixel at (1, 0). More generally, to set values for a pixel
+       * at (x, y):
+       * ```javascript
+       * var d = pixelDensity();
+       * for (var i = 0; i < d; i++) {
+       *   for (var j = 0; j < d; j++) {
+       *     // loop over
+       *     idx = 4 * ((y * d + j) * width * d + (x * d + i));
+       *     pixels[idx] = r;
+       *     pixels[idx+1] = g;
+       *     pixels[idx+2] = b;
+       *     pixels[idx+3] = a;
+       *   }
+       * }
+       * ```
+       * 


+       * Before accessing this array, the data must loaded with the loadPixels()
+       * function. After the array data has been modified, the updatePixels()
+       * function must be run to update the changes.
+       * @property {Number[]} pixels
+       * @example
+       * 

+       * 
+       * var img = createImage(66, 66);
+       * img.loadPixels();
+       * for (var i = 0; i < img.width; i++) {
+       *   for (var j = 0; j < img.height; j++) {
+       *     img.set(i, j, color(0, 90, 102));
+       *   }
+       * }
+       * img.updatePixels();
+       * image(img, 17, 17);
+       * 
+       * 

+       * 

+       * 
+       * var pink = color(255, 102, 204);
+       * var img = createImage(66, 66);
+       * img.loadPixels();
+       * for (var i = 0; i < 4 * (width * height / 2); i += 4) {
+       *   img.pixels[i] = red(pink);
+       *   img.pixels[i + 1] = green(pink);
+       *   img.pixels[i + 2] = blue(pink);
+       *   img.pixels[i + 3] = alpha(pink);
+       * }
+       * img.updatePixels();
+       * image(img, 17, 17);
+       * 
+       * 

+       *
+       * @alt
+       * 66x66 turquoise rect in center of canvas
+       * 66x66 pink rect in center of canvas
+       *
+       */
+      this.pixels = [];
+      this.name = 'p5.Image'; // for friendly debugger system
+    };
+
+    /**
+     * Helper fxn for sharing pixel methods
+     *
+     */
+    p5.Image.prototype._setProperty = function(prop, value) {
+      this[prop] = value;
+      this.setModified(true);
+    };
+
+    /**
+     * Loads the pixels data for this image into the [pixels] attribute.
+     *
+     * @method loadPixels
+     * @example
+     * 

+     * var myImage;
+     * var halfImage;
+     *
+     * function preload() {
+     *   myImage = loadImage('assets/rockies.jpg');
+     * }
+     *
+     * function setup() {
+     *   myImage.loadPixels();
+     *   halfImage = 4 * width * height / 2;
+     *   for (var i = 0; i < halfImage; i++) {
+     *     myImage.pixels[i + halfImage] = myImage.pixels[i];
+     *   }
+     *   myImage.updatePixels();
+     * }
+     *
+     * function draw() {
+     *   image(myImage, 0, 0);
+     * }
+     * 

+     *
+     * @alt
+     * 2 images of rocky mountains vertically stacked
+     *
+     */
+    p5.Image.prototype.loadPixels = function() {
+      p5.Renderer2D.prototype.loadPixels.call(this);
+      this.setModified(true);
+    };
+
+    /**
+     * Updates the backing canvas for this image with the contents of
+     * the [pixels] array.
+     *
+     * @method updatePixels
+     * @param {Integer} x x-offset of the target update area for the
+     *                              underlying canvas
+     * @param {Integer} y y-offset of the target update area for the
+     *                              underlying canvas
+     * @param {Integer} w height of the target update area for the
+     *                              underlying canvas
+     * @param {Integer} h height of the target update area for the
+     *                              underlying canvas
+     * @example
+     * 

+     * var myImage;
+     * var halfImage;
+     *
+     * function preload() {
+     *   myImage = loadImage('assets/rockies.jpg');
+     * }
+     *
+     * function setup() {
+     *   myImage.loadPixels();
+     *   halfImage = 4 * width * height / 2;
+     *   for (var i = 0; i < halfImage; i++) {
+     *     myImage.pixels[i + halfImage] = myImage.pixels[i];
+     *   }
+     *   myImage.updatePixels();
+     * }
+     *
+     * function draw() {
+     *   image(myImage, 0, 0);
+     * }
+     * 

+     *
+     * @alt
+     * 2 images of rocky mountains vertically stacked
+     *
+     */
+    /**
+     * @method updatePixels
+     */
+    p5.Image.prototype.updatePixels = function(x, y, w, h) {
+      p5.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
+      this.setModified(true);
+    };
+
+    /**
+     * Get a region of pixels from an image.
+     *
+     * If no params are passed, those whole image is returned,
+     * if x and y are the only params passed a single pixel is extracted
+     * if all params are passed a rectangle region is extracted and a p5.Image
+     * is returned.
+     *
+     * Returns undefined if the region is outside the bounds of the image
+     *
+     * @method get
+     * @param  {Number}               [x] x-coordinate of the pixel
+     * @param  {Number}               [y] y-coordinate of the pixel
+     * @param  {Number}               [w] width
+     * @param  {Number}               [h] height
+     * @return {Number[]|Color|p5.Image}  color of pixel at x,y in array format
+     *                                    [R, G, B, A] or p5.Image
+     * @example
+     * 

+     * var myImage;
+     * var c;
+     *
+     * function preload() {
+     *   myImage = loadImage('assets/rockies.jpg');
+     * }
+     *
+     * function setup() {
+     *   background(myImage);
+     *   noStroke();
+     *   c = myImage.get(60, 90);
+     *   fill(c);
+     *   rect(25, 25, 50, 50);
+     * }
+     *
+     * //get() returns color here
+     * 

+     *
+     * @alt
+     * image of rocky mountains with 50x50 green rect in front
+     *
+     */
+    p5.Image.prototype.get = function(x, y, w, h) {
+      return p5.Renderer2D.prototype.get.call(this, x, y, w, h);
+    };
+
+    /**
+     * Set the color of a single pixel or write an image into
+     * this p5.Image.
+     *
+     * Note that for a large number of pixels this will
+     * be slower than directly manipulating the pixels array
+     * and then calling updatePixels().
+     *
+     * @method set
+     * @param {Number}              x x-coordinate of the pixel
+     * @param {Number}              y y-coordinate of the pixel
+     * @param {Number|Number[]|Object}   a grayscale value | pixel array |
+     *                                a p5.Color | image to copy
+     * @example
+     * 

+     * 
+     * var img = createImage(66, 66);
+     * img.loadPixels();
+     * for (var i = 0; i < img.width; i++) {
+     *   for (var j = 0; j < img.height; j++) {
+     *     img.set(i, j, color(0, 90, 102, (i % img.width) * 2));
+     *   }
+     * }
+     * img.updatePixels();
+     * image(img, 17, 17);
+     * image(img, 34, 34);
+     * 
+     * 

+     *
+     * @alt
+     * 2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas
+     *
+     */
+    p5.Image.prototype.set = function(x, y, imgOrCol) {
+      p5.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
+      this.setModified(true);
+    };
+
+    /**
+     * Resize the image to a new width and height. To make the image scale
+     * proportionally, use 0 as the value for the wide or high parameter.
+     * For instance, to make the width of an image 150 pixels, and change
+     * the height using the same proportion, use resize(150, 0).
+     *
+     * @method resize
+     * @param {Number} width the resized image width
+     * @param {Number} height the resized image height
+     * @example
+     * 

+     * var img;
+     *
+     * function preload() {
+     *   img = loadImage('assets/rockies.jpg');
+     * }
+
+     * function draw() {
+     *   image(img, 0, 0);
+     * }
+     *
+     * function mousePressed() {
+     *   img.resize(50, 100);
+     * }
+     * 

+     *
+     * @alt
+     * image of rocky mountains. zoomed in
+     *
+     */
+    p5.Image.prototype.resize = function(width, height) {
+      // Copy contents to a temporary canvas, resize the original
+      // and then copy back.
+      //
+      // There is a faster approach that involves just one copy and swapping the
+      // this.canvas reference. We could switch to that approach if (as i think
+      // is the case) there an expectation that the user would not hold a
+      // reference to the backing canvas of a p5.Image. But since we do not
+      // enforce that at the moment, I am leaving in the slower, but safer
+      // implementation.
+
+      // auto-resize
+      if (width === 0 && height === 0) {
+        width = this.canvas.width;
+        height = this.canvas.height;
+      } else if (width === 0) {
+        width = this.canvas.width * height / this.canvas.height;
+      } else if (height === 0) {
+        height = this.canvas.height * width / this.canvas.width;
+      }
+
+      width = Math.floor(width);
+      height = Math.floor(height);
+
+      var tempCanvas = document.createElement('canvas');
+      tempCanvas.width = width;
+      tempCanvas.height = height;
+      // prettier-ignore
+      tempCanvas.getContext('2d').drawImage(
+        this.canvas,
+        0, 0, this.canvas.width, this.canvas.height,
+        0, 0, tempCanvas.width, tempCanvas.height
+      );
+
+      // Resize the original canvas, which will clear its contents
+      this.canvas.width = this.width = width;
+      this.canvas.height = this.height = height;
+
+      //Copy the image back
+
+      // prettier-ignore
+      this.drawingContext.drawImage(
+        tempCanvas,
+        0, 0, width, height,
+        0, 0, width, height
+      );
+
+      if (this.pixels.length > 0) {
+        this.loadPixels();
+      }
+
+      this.setModified(true);
+    };
+
+    /**
+     * Copies a region of pixels from one image to another. If no
+     * srcImage is specified this is used as the source. If the source
+     * and destination regions aren't the same size, it will
+     * automatically resize source pixels to fit the specified
+     * target region.
+     *
+     * @method copy
+     * @param  {p5.Image|p5.Element} srcImage source image
+     * @param  {Integer} sx X coordinate of the source's upper left corner
+     * @param  {Integer} sy Y coordinate of the source's upper left corner
+     * @param  {Integer} sw source image width
+     * @param  {Integer} sh source image height
+     * @param  {Integer} dx X coordinate of the destination's upper left corner
+     * @param  {Integer} dy Y coordinate of the destination's upper left corner
+     * @param  {Integer} dw destination image width
+     * @param  {Integer} dh destination image height
+     * @example
+     * 

+     * var photo;
+     * var bricks;
+     * var x;
+     * var y;
+     *
+     * function preload() {
+     *   photo = loadImage('assets/rockies.jpg');
+     *   bricks = loadImage('assets/bricks.jpg');
+     * }
+     *
+     * function setup() {
+     *   x = bricks.width / 2;
+     *   y = bricks.height / 2;
+     *   photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+     *   image(photo, 0, 0);
+     * }
+     * 

+     *
+     * @alt
+     * image of rocky mountains and smaller image on top of bricks at top left
+     *
+     */
+    /**
+     * @method copy
+     * @param  {Integer} sx
+     * @param  {Integer} sy
+     * @param  {Integer} sw
+     * @param  {Integer} sh
+     * @param  {Integer} dx
+     * @param  {Integer} dy
+     * @param  {Integer} dw
+     * @param  {Integer} dh
+     */
+    p5.Image.prototype.copy = function() {
+      var srcImage, sx, sy, sw, sh, dx, dy, dw, dh;
+      if (arguments.length === 9) {
+        srcImage = arguments[0];
+        sx = arguments[1];
+        sy = arguments[2];
+        sw = arguments[3];
+        sh = arguments[4];
+        dx = arguments[5];
+        dy = arguments[6];
+        dw = arguments[7];
+        dh = arguments[8];
+      } else if (arguments.length === 8) {
+        srcImage = this;
+        sx = arguments[0];
+        sy = arguments[1];
+        sw = arguments[2];
+        sh = arguments[3];
+        dx = arguments[4];
+        dy = arguments[5];
+        dw = arguments[6];
+        dh = arguments[7];
+      } else {
+        throw new Error('Signature not supported');
+      }
+      p5.Renderer2D._copyHelper(this, srcImage, sx, sy, sw, sh, dx, dy, dw, dh);
+    };
+
+    /**
+     * Masks part of an image from displaying by loading another
+     * image and using it's alpha channel as an alpha channel for
+     * this image.
+     *
+     * @method mask
+     * @param {p5.Image} srcImage source image
+     * @example
+     * 

+     * var photo, maskImage;
+     * function preload() {
+     *   photo = loadImage('assets/rockies.jpg');
+     *   maskImage = loadImage('assets/mask2.png');
+     * }
+     *
+     * function setup() {
+     *   createCanvas(100, 100);
+     *   photo.mask(maskImage);
+     *   image(photo, 0, 0);
+     * }
+     * 

+     *
+     * @alt
+     * image of rocky mountains with white at right
+     *
+     *
+     * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
+     *
+     */
+    // TODO: - Accept an array of alpha values.
+    //       - Use other channels of an image. p5 uses the
+    //       blue channel (which feels kind of arbitrary). Note: at the
+    //       moment this method does not match native processings original
+    //       functionality exactly.
+    p5.Image.prototype.mask = function(p5Image) {
+      if (p5Image === undefined) {
+        p5Image = this;
+      }
+      var currBlend = this.drawingContext.globalCompositeOperation;
+
+      var scaleFactor = 1;
+      if (p5Image instanceof p5.Renderer) {
+        scaleFactor = p5Image._pInst._pixelDensity;
+      }
+
+      var copyArgs = [
+        p5Image,
+        0,
+        0,
+        scaleFactor * p5Image.width,
+        scaleFactor * p5Image.height,
+        0,
+        0,
+        this.width,
+        this.height
+      ];
+
+      this.drawingContext.globalCompositeOperation = 'destination-in';
+      p5.Image.prototype.copy.apply(this, copyArgs);
+      this.drawingContext.globalCompositeOperation = currBlend;
+      this.setModified(true);
+    };
+
+    /**
+     * Applies an image filter to a p5.Image
+     *
+     * @method filter
+     * @param  {Constant} filterType  either THRESHOLD, GRAY, OPAQUE, INVERT,
+     *                                POSTERIZE, BLUR, ERODE, DILATE or BLUR.
+     *                                See Filters.js for docs on
+     *                                each available filter
+     * @param  {Number} [filterParam] an optional parameter unique
+     *                                to each filter, see above
+     * @example
+     * 

+     * var photo1;
+     * var photo2;
+     *
+     * function preload() {
+     *   photo1 = loadImage('assets/rockies.jpg');
+     *   photo2 = loadImage('assets/rockies.jpg');
+     * }
+     *
+     * function setup() {
+     *   photo2.filter('gray');
+     *   image(photo1, 0, 0);
+     *   image(photo2, width / 2, 0);
+     * }
+     * 

+     *
+     * @alt
+     * 2 images of rocky mountains left one in color, right in black and white
+     *
+     */
+    p5.Image.prototype.filter = function(operation, value) {
+      Filters.apply(this.canvas, Filters[operation.toLowerCase()], value);
+      this.setModified(true);
+    };
+
+    /**
+     * Copies a region of pixels from one image to another, using a specified
+     * blend mode to do the operation.
+     *
+     * @method blend
+     * @param  {p5.Image} srcImage source image
+     * @param  {Integer} sx X coordinate of the source's upper left corner
+     * @param  {Integer} sy Y coordinate of the source's upper left corner
+     * @param  {Integer} sw source image width
+     * @param  {Integer} sh source image height
+     * @param  {Integer} dx X coordinate of the destination's upper left corner
+     * @param  {Integer} dy Y coordinate of the destination's upper left corner
+     * @param  {Integer} dw destination image width
+     * @param  {Integer} dh destination image height
+     * @param  {Constant} blendMode the blend mode. either
+     *     BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+     *     MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+     *     SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+     *
+     * Available blend modes are: normal | multiply | screen | overlay |
+     *            darken | lighten | color-dodge | color-burn | hard-light |
+     *            soft-light | difference | exclusion | hue | saturation |
+     *            color | luminosity
+     *
+     *
+     * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
+     * @example
+     * 

+     * var mountains;
+     * var bricks;
+     *
+     * function preload() {
+     *   mountains = loadImage('assets/rockies.jpg');
+     *   bricks = loadImage('assets/bricks_third.jpg');
+     * }
+     *
+     * function setup() {
+     *   mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+     *   image(mountains, 0, 0);
+     *   image(bricks, 0, 0);
+     * }
+     * 

+     * 

+     * var mountains;
+     * var bricks;
+     *
+     * function preload() {
+     *   mountains = loadImage('assets/rockies.jpg');
+     *   bricks = loadImage('assets/bricks_third.jpg');
+     * }
+     *
+     * function setup() {
+     *   mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+     *   image(mountains, 0, 0);
+     *   image(bricks, 0, 0);
+     * }
+     * 

+     * 

+     * var mountains;
+     * var bricks;
+     *
+     * function preload() {
+     *   mountains = loadImage('assets/rockies.jpg');
+     *   bricks = loadImage('assets/bricks_third.jpg');
+     * }
+     *
+     * function setup() {
+     *   mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+     *   image(mountains, 0, 0);
+     *   image(bricks, 0, 0);
+     * }
+     * 

+     *
+     * @alt
+     * image of rocky mountains. Brick images on left and right. Right overexposed
+     * image of rockies. Brickwall images on left and right. Right mortar transparent
+     * image of rockies. Brickwall images on left and right. Right translucent
+     *
+     */
+    /**
+     * @method blend
+     * @param  {Integer} sx
+     * @param  {Integer} sy
+     * @param  {Integer} sw
+     * @param  {Integer} sh
+     * @param  {Integer} dx
+     * @param  {Integer} dy
+     * @param  {Integer} dw
+     * @param  {Integer} dh
+     * @param  {Constant} blendMode
+     */
+    p5.Image.prototype.blend = function() {
+      p5.prototype.blend.apply(this, arguments);
+      this.setModified(true);
+    };
+
+    /**
+     * helper method for web GL mode to indicate that an image has been
+     * changed or unchanged since last upload. gl texture upload will
+     * set this value to false after uploading the texture.
+     * @method setModified
+     * @param {boolean} val sets whether or not the image has been
+     * modified.
+     * @private
+     */
+    p5.Image.prototype.setModified = function(val) {
+      this._modified = val; //enforce boolean?
+    };
+
+    /**
+     * helper method for web GL mode to figure out if the image
+     * has been modified and might need to be re-uploaded to texture
+     * memory between frames.
+     * @method isModified
+     * @private
+     * @return {boolean} a boolean indicating whether or not the
+     * image has been updated or modified since last texture upload.
+     */
+    p5.Image.prototype.isModified = function() {
+      return this._modified;
+    };
+
+    /**
+     * Saves the image to a file and force the browser to download it.
+     * Accepts two strings for filename and file extension
+     * Supports png (default) and jpg.
+     *
+     * @method save
+     * @param {String} filename give your file a name
+     * @param  {String} extension 'png' or 'jpg'
+     * @example
+     * 

+     * var photo;
+     *
+     * function preload() {
+     *   photo = loadImage('assets/rockies.jpg');
+     * }
+     *
+     * function draw() {
+     *   image(photo, 0, 0);
+     * }
+     *
+     * function keyTyped() {
+     *   if (key === 's') {
+     *     photo.save('photo', 'png');
+     *   }
+     * }
+     * 

+     *
+     * @alt
+     * image of rocky mountains.
+     *
+     */
+    p5.Image.prototype.save = function(filename, extension) {
+      p5.prototype.saveCanvas(this.canvas, filename, extension);
+    };
+
+    module.exports = p5.Image;
+
+    },{"../core/core":22,"./filters":41}],45:[function(_dereq_,module,exports){
+    /**
+     * @module Image
+     * @submodule Pixels
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var Filters = _dereq_('./filters');
+    _dereq_('../color/p5.Color');
+
+    /**
+     * Uint8ClampedArray
+     * containing the values for all the pixels in the display window.
+     * These values are numbers. This array is the size (include an appropriate
+     * factor for pixelDensity) of the display window x4,
+     * representing the R, G, B, A values in order for each pixel, moving from
+     * left to right across each row, then down each column. Retina and other
+     * high density displays will have more pixels[] (by a factor of
+     * pixelDensity^2).
+     * For example, if the image is 100x100 pixels, there will be 40,000. On a
+     * retina display, there will be 160,000.
+     * 


+     * The first four values (indices 0-3) in the array will be the R, G, B, A
+     * values of the pixel at (0, 0). The second four values (indices 4-7) will
+     * contain the R, G, B, A values of the pixel at (1, 0). More generally, to
+     * set values for a pixel at (x, y):
+     * ```javascript
+     * var d = pixelDensity();
+     * for (var i = 0; i < d; i++) {
+     *   for (var j = 0; j < d; j++) {
+     *     // loop over
+     *     idx = 4 * ((y * d + j) * width * d + (x * d + i));
+     *     pixels[idx] = r;
+     *     pixels[idx+1] = g;
+     *     pixels[idx+2] = b;
+     *     pixels[idx+3] = a;
+     *   }
+     * }
+     * ```
+     * 
While the above method is complex, it is flexible enough to work with
+     * any pixelDensity. Note that set() will automatically take care of
+     * setting all the appropriate values in pixels[] for a given (x, y) at
+     * any pixelDensity, but the performance may not be as fast when lots of
+     * modifications are made to the pixel array.
+     * 


+     * Before accessing this array, the data must loaded with the loadPixels()
+     * function. After the array data has been modified, the updatePixels()
+     * function must be run to update the changes.
+     * 


+     * Note that this is not a standard javascript array.  This means that
+     * standard javascript functions such as slice() or
+     * arrayCopy() do not
+     * work.

+     *
+     * @property {Number[]} pixels
+     * @example
+     * 

+     * 
+     * var pink = color(255, 102, 204);
+     * loadPixels();
+     * var d = pixelDensity();
+     * var halfImage = 4 * (width * d) * (height / 2 * d);
+     * for (var i = 0; i < halfImage; i += 4) {
+     *   pixels[i] = red(pink);
+     *   pixels[i + 1] = green(pink);
+     *   pixels[i + 2] = blue(pink);
+     *   pixels[i + 3] = alpha(pink);
+     * }
+     * updatePixels();
+     * 
+     * 

+     *
+     * @alt
+     * top half of canvas pink, bottom grey
+     *
+     */
+    p5.prototype.pixels = [];
+
+    /**
+     * Copies a region of pixels from one image to another, using a specified
+     * blend mode to do the operation.
+     *
+     * @method blend
+     * @param  {p5.Image} srcImage source image
+     * @param  {Integer} sx X coordinate of the source's upper left corner
+     * @param  {Integer} sy Y coordinate of the source's upper left corner
+     * @param  {Integer} sw source image width
+     * @param  {Integer} sh source image height
+     * @param  {Integer} dx X coordinate of the destination's upper left corner
+     * @param  {Integer} dy Y coordinate of the destination's upper left corner
+     * @param  {Integer} dw destination image width
+     * @param  {Integer} dh destination image height
+     * @param  {Constant} blendMode the blend mode. either
+     *     BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+     *     MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+     *     SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+     *
+     * @example
+     * 

+     * var img0;
+     * var img1;
+     *
+     * function preload() {
+     *   img0 = loadImage('assets/rockies.jpg');
+     *   img1 = loadImage('assets/bricks_third.jpg');
+     * }
+     *
+     * function setup() {
+     *   background(img0);
+     *   image(img1, 0, 0);
+     *   blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+     * }
+     * 

+     * 

+     * var img0;
+     * var img1;
+     *
+     * function preload() {
+     *   img0 = loadImage('assets/rockies.jpg');
+     *   img1 = loadImage('assets/bricks_third.jpg');
+     * }
+     *
+     * function setup() {
+     *   background(img0);
+     *   image(img1, 0, 0);
+     *   blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+     * }
+     * 

+     * 

+     * var img0;
+     * var img1;
+     *
+     * function preload() {
+     *   img0 = loadImage('assets/rockies.jpg');
+     *   img1 = loadImage('assets/bricks_third.jpg');
+     * }
+     *
+     * function setup() {
+     *   background(img0);
+     *   image(img1, 0, 0);
+     *   blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+     * }
+     * 

+     *
+     * @alt
+     * image of rocky mountains. Brick images on left and right. Right overexposed
+     * image of rockies. Brickwall images on left and right. Right mortar transparent
+     * image of rockies. Brickwall images on left and right. Right translucent
+     *
+     *
+     */
+    /**
+     * @method blend
+     * @param  {Integer} sx
+     * @param  {Integer} sy
+     * @param  {Integer} sw
+     * @param  {Integer} sh
+     * @param  {Integer} dx
+     * @param  {Integer} dy
+     * @param  {Integer} dw
+     * @param  {Integer} dh
+     * @param  {Constant} blendMode
+     */
+    p5.prototype.blend = function() {
+      if (this._renderer) {
+        this._renderer.blend.apply(this._renderer, arguments);
+      } else {
+        p5.Renderer2D.prototype.blend.apply(this, arguments);
+      }
+    };
+
+    /**
+     * Copies a region of the canvas to another region of the canvas
+     * and copies a region of pixels from an image used as the srcImg parameter
+     * into the canvas srcImage is specified this is used as the source. If
+     * the source and destination regions aren't the same size, it will
+     * automatically resize source pixels to fit the specified
+     * target region.
+     *
+     * @method copy
+     * @param  {p5.Image|p5.Element} srcImage source image
+     * @param  {Integer} sx X coordinate of the source's upper left corner
+     * @param  {Integer} sy Y coordinate of the source's upper left corner
+     * @param  {Integer} sw source image width
+     * @param  {Integer} sh source image height
+     * @param  {Integer} dx X coordinate of the destination's upper left corner
+     * @param  {Integer} dy Y coordinate of the destination's upper left corner
+     * @param  {Integer} dw destination image width
+     * @param  {Integer} dh destination image height
+     *
+     * @example
+     * 

+     * var img;
+     *
+     * function preload() {
+     *   img = loadImage('assets/rockies.jpg');
+     * }
+     *
+     * function setup() {
+     *   background(img);
+     *   copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+     *   stroke(255);
+     *   noFill();
+     *   // Rectangle shows area being copied
+     *   rect(7, 22, 10, 10);
+     * }
+     * 

+     *
+     * @alt
+     * image of rocky mountains. Brick images on left and right. Right overexposed
+     * image of rockies. Brickwall images on left and right. Right mortar transparent
+     * image of rockies. Brickwall images on left and right. Right translucent
+     *
+     */
+    /**
+     * @method copy
+     * @param  {Integer} sx
+     * @param  {Integer} sy
+     * @param  {Integer} sw
+     * @param  {Integer} sh
+     * @param  {Integer} dx
+     * @param  {Integer} dy
+     * @param  {Integer} dw
+     * @param  {Integer} dh
+     */
+    p5.prototype.copy = function() {
+      p5._validateParameters('copy', arguments);
+      p5.Renderer2D.prototype.copy.apply(this._renderer, arguments);
+    };
+
+    /**
+     * Applies a filter to the canvas.
+     * 


+     *
+     * The presets options are:
+     * 


+     *
+     * THRESHOLD
+     * Converts the image to black and white pixels depending if they are above or
+     * below the threshold defined by the level parameter. The parameter must be
+     * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
+     * 


+     *
+     * GRAY
+     * Converts any colors in the image to grayscale equivalents. No parameter
+     * is used.
+     * 


+     *
+     * OPAQUE
+     * Sets the alpha channel to entirely opaque. No parameter is used.
+     * 


+     *
+     * INVERT
+     * Sets each pixel to its inverse value. No parameter is used.
+     * 


+     *
+     * POSTERIZE
+     * Limits each channel of the image to the number of colors specified as the
+     * parameter. The parameter can be set to values between 2 and 255, but
+     * results are most noticeable in the lower ranges.
+     * 


+     *
+     * BLUR
+     * Executes a Gaussian blur with the level parameter specifying the extent
+     * of the blurring. If no parameter is used, the blur is equivalent to
+     * Gaussian blur of radius 1. Larger values increase the blur.
+     * 


+     *
+     * ERODE
+     * Reduces the light areas. No parameter is used.
+     * 


+     *
+     * DILATE
+     * Increases the light areas. No parameter is used.
+     *
+     * @method filter
+     * @param  {Constant} filterType  either THRESHOLD, GRAY, OPAQUE, INVERT,
+     *                                POSTERIZE, BLUR, ERODE, DILATE or BLUR.
+     *                                See Filters.js for docs on
+     *                                each available filter
+     * @param  {Number} [filterParam] an optional parameter unique
+     *                                to each filter, see above
+     *
+     * @example
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   filter(THRESHOLD);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   filter(GRAY);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   filter(OPAQUE);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   filter(INVERT);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   filter(POSTERIZE, 3);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   filter(DILATE);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   filter(BLUR, 3);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/bricks.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   filter(ERODE);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black and white image of a brick wall.
+     * greyscale image of a brickwall
+     * image of a brickwall
+     * jade colored image of a brickwall
+     * red and pink image of a brickwall
+     * image of a brickwall
+     * blurry image of a brickwall
+     * image of a brickwall
+     * image of a brickwall with less detail
+     *
+     */
+    p5.prototype.filter = function(operation, value) {
+      if (this.canvas !== undefined) {
+        Filters.apply(this.canvas, Filters[operation.toLowerCase()], value);
+      } else {
+        Filters.apply(this.elt, Filters[operation.toLowerCase()], value);
+      }
+    };
+
+    /**
+     * Returns an array of [R,G,B,A] values for any pixel or grabs a section of
+     * an image. If no parameters are specified, the entire image is returned.
+     * Use the x and y parameters to get the value of one pixel. Get a section of
+     * the display window by specifying additional w and h parameters. When
+     * getting an image, the x and y parameters define the coordinates for the
+     * upper-left corner of the image, regardless of the current imageMode().
+     * 


+     * If the pixel requested is outside of the image window, [0,0,0,255] is
+     * returned. To get the numbers scaled according to the current color ranges
+     * and taking into account colorMode, use getColor instead of get.
+     * 


+     * Getting the color of a single pixel with get(x, y) is easy, but not as fast
+     * as grabbing the data directly from pixels[]. The equivalent statement to
+     * get(x, y) using pixels[] with pixel density d is
+     * 
+     * var x, y, d; // set these to the coordinates
+     * var off = (y * width + x) * d * 4;
+     * var components = [
+     *   pixels[off],
+     *   pixels[off + 1],
+     *   pixels[off + 2],
+     *   pixels[off + 3]
+     * ];
+     * print(components);
+     * 
+     * 


+     * See the reference for pixels[] for more information.
+     *
+     * @method get
+     * @param  {Number}         [x] x-coordinate of the pixel
+     * @param  {Number}         [y] y-coordinate of the pixel
+     * @param  {Number}         [w] width
+     * @param  {Number}         [h] height
+     * @return {Number[]|p5.Image}  values of pixel at x,y in array format
+     *                              [R, G, B, A] or p5.Image
+     * @example
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/rockies.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   var c = get();
+     *   image(c, width / 2, 0);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/rockies.jpg');
+     * }
+     * function setup() {
+     *   image(img, 0, 0);
+     *   var c = get(50, 90);
+     *   fill(c);
+     *   noStroke();
+     *   rect(25, 25, 50, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 2 images of the rocky mountains, side-by-side
+     * Image of the rocky mountains with 50x50 green rect in center of canvas
+     *
+     */
+    p5.prototype.get = function(x, y, w, h) {
+      return this._renderer.get(x, y, w, h);
+    };
+
+    /**
+     * Loads the pixel data for the display window into the pixels[] array. This
+     * function must always be called before reading from or writing to pixels[].
+     * Note that only changes made with set() or direct manipulation of pixels[]
+     * will occur.
+     *
+     * @method loadPixels
+     * @example
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/rockies.jpg');
+     * }
+     *
+     * function setup() {
+     *   image(img, 0, 0);
+     *   var d = pixelDensity();
+     *   var halfImage = 4 * (img.width * d) * (img.height * d / 2);
+     *   loadPixels();
+     *   for (var i = 0; i < halfImage; i++) {
+     *     pixels[i + halfImage] = pixels[i];
+     *   }
+     *   updatePixels();
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * two images of the rocky mountains. one on top, one on bottom of canvas.
+     *
+     */
+    p5.prototype.loadPixels = function() {
+      this._renderer.loadPixels();
+    };
+
+    /**
+     * 
Changes the color of any pixel, or writes an image directly to the
+     * display window.

+     * 
The x and y parameters specify the pixel to change and the c parameter
+     * specifies the color value. This can be a p5.Color object, or [R, G, B, A]
+     * pixel array. It can also be a single grayscale value.
+     * When setting an image, the x and y parameters define the coordinates for
+     * the upper-left corner of the image, regardless of the current imageMode().
+     * 

+     * 

+     * After using set(), you must call updatePixels() for your changes to appear.
+     * This should be called once all pixels have been set, and must be called before
+     * calling .get() or drawing the image.
+     * 

+     * 
Setting the color of a single pixel with set(x, y) is easy, but not as
+     * fast as putting the data directly into pixels[]. Setting the pixels[]
+     * values directly may be complicated when working with a retina display,
+     * but will perform better when lots of pixels need to be set directly on
+     * every loop.

+     * 
See the reference for pixels[] for more information.

+     *
+     * @method set
+     * @param {Number}              x x-coordinate of the pixel
+     * @param {Number}              y y-coordinate of the pixel
+     * @param {Number|Number[]|Object} c insert a grayscale value | a pixel array |
+     *                                a p5.Color object | a p5.Image to copy
+     * @example
+     * 

+     * 
+     * var black = color(0);
+     * set(30, 20, black);
+     * set(85, 20, black);
+     * set(85, 75, black);
+     * set(30, 75, black);
+     * updatePixels();
+     * 
+     * 

+     *
+     * 

+     * 
+     * for (var i = 30; i < width - 15; i++) {
+     *   for (var j = 20; j < height - 25; j++) {
+     *     var c = color(204 - j, 153 - i, 0);
+     *     set(i, j, c);
+     *   }
+     * }
+     * updatePixels();
+     * 
+     * 

+     *
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/rockies.jpg');
+     * }
+     *
+     * function setup() {
+     *   set(0, 0, img);
+     *   updatePixels();
+     *   line(0, 0, width, height);
+     *   line(0, height, width, 0);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 4 black points in the shape of a square middle-right of canvas.
+     * square with orangey-brown gradient lightening at bottom right.
+     * image of the rocky mountains. with lines like an 'x' through the center.
+     */
+    p5.prototype.set = function(x, y, imgOrCol) {
+      this._renderer.set(x, y, imgOrCol);
+    };
+    /**
+     * Updates the display window with the data in the pixels[] array.
+     * Use in conjunction with loadPixels(). If you're only reading pixels from
+     * the array, there's no need to call updatePixels() — updating is only
+     * necessary to apply changes. updatePixels() should be called anytime the
+     * pixels array is manipulated or set() is called, and only changes made with
+     * set() or direct changes to pixels[] will occur.
+     *
+     * @method updatePixels
+     * @param  {Number} [x]    x-coordinate of the upper-left corner of region
+     *                         to update
+     * @param  {Number} [y]    y-coordinate of the upper-left corner of region
+     *                         to update
+     * @param  {Number} [w]    width of region to update
+     * @param  {Number} [h]    height of region to update
+     * @example
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/rockies.jpg');
+     * }
+     *
+     * function setup() {
+     *   image(img, 0, 0);
+     *   var d = pixelDensity();
+     *   var halfImage = 4 * (img.width * d) * (img.height * d / 2);
+     *   loadPixels();
+     *   for (var i = 0; i < halfImage; i++) {
+     *     pixels[i + halfImage] = pixels[i];
+     *   }
+     *   updatePixels();
+     * }
+     * 
+     * 

+     * @alt
+     * two images of the rocky mountains. one on top, one on bottom of canvas.
+     */
+    p5.prototype.updatePixels = function(x, y, w, h) {
+      // graceful fail - if loadPixels() or set() has not been called, pixel
+      // array will be empty, ignore call to updatePixels()
+      if (this.pixels.length === 0) {
+        return;
+      }
+      this._renderer.updatePixels(x, y, w, h);
+    };
+
+    module.exports = p5;
+
+    },{"../color/p5.Color":16,"../core/core":22,"./filters":41}],46:[function(_dereq_,module,exports){
+    /**
+     * @module IO
+     * @submodule Input
+     * @for p5
+     * @requires core
+     */
+
+    /* globals Request: false */
+    /* globals Headers: false */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    _dereq_('whatwg-fetch');
+    _dereq_('es6-promise').polyfill();
+    var fetchJsonp = _dereq_('fetch-jsonp');
+    _dereq_('../core/error_helpers');
+
+    /**
+     * Loads a JSON file from a file or a URL, and returns an Object.
+     * Note that even if the JSON file contains an Array, an Object will be
+     * returned with index numbers as keys.
+     *
+     * This method is asynchronous, meaning it may not finish before the next
+     * line in your sketch is executed. JSONP is supported via a polyfill and you
+     * can pass in as the second argument an object with definitions of the json
+     * callback following the syntax specified here.
+     *
+     * @method loadJSON
+     * @param  {String}        path       name of the file or url to load
+     * @param  {Object}        [jsonpOptions] options object for jsonp related settings
+     * @param  {String}        [datatype] "json" or "jsonp"
+     * @param  {function}      [callback] function to be executed after
+     *                                    loadJSON() completes, data is passed
+     *                                    in as first argument
+     * @param  {function}      [errorCallback] function to be executed if
+     *                                    there is an error, response is passed
+     *                                    in as first argument
+     * @return {Object|Array}             JSON data
+     * @example
+     *
+     * 
Calling loadJSON() inside preload() guarantees to complete the
+     * operation before setup() and draw() are called.

+     *
+     * 

+     * // Examples use USGS Earthquake API:
+     * //   https://earthquake.usgs.gov/fdsnws/event/1/#methods
+     * var earthquakes;
+     * function preload() {
+     *   // Get the most recent earthquake in the database
+     *   var url =
+        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+     *     'summary/all_day.geojson';
+     *   earthquakes = loadJSON(url);
+     * }
+     *
+     * function setup() {
+     *   noLoop();
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   // Get the magnitude and name of the earthquake out of the loaded JSON
+     *   var earthquakeMag = earthquakes.features[0].properties.mag;
+     *   var earthquakeName = earthquakes.features[0].properties.place;
+     *   ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+     *   textAlign(CENTER);
+     *   text(earthquakeName, 0, height - 30, width, 30);
+     * }
+     * 

+     *
+     *
+     * 
Outside of preload(), you may supply a callback function to handle the
+     * object:

+     * 

+     * function setup() {
+     *   noLoop();
+     *   var url =
+        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+     *     'summary/all_day.geojson';
+     *   loadJSON(url, drawEarthquake);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     * }
+     *
+     * function drawEarthquake(earthquakes) {
+     *   // Get the magnitude and name of the earthquake out of the loaded JSON
+     *   var earthquakeMag = earthquakes.features[0].properties.mag;
+     *   var earthquakeName = earthquakes.features[0].properties.place;
+     *   ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+     *   textAlign(CENTER);
+     *   text(earthquakeName, 0, height - 30, width, 30);
+     * }
+     * 

+     *
+     * @alt
+     * 50x50 ellipse that changes from black to white depending on the current humidity
+     * 50x50 ellipse that changes from black to white depending on the current humidity
+     *
+     */
+    p5.prototype.loadJSON = function() {
+      var path = arguments[0];
+      var callback;
+      var errorCallback;
+      var options;
+
+      var ret = {}; // object needed for preload
+      var t = 'json';
+
+      // check for explicit data type argument
+      for (var i = 1; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (typeof arg === 'string') {
+          if (arg === 'jsonp' || arg === 'json') {
+            t = arg;
+          }
+        } else if (typeof arg === 'function') {
+          if (!callback) {
+            callback = arg;
+          } else {
+            errorCallback = arg;
+          }
+        } else if (typeof arg === 'object' && arg.hasOwnProperty('jsonpCallback')) {
+          t = 'jsonp';
+          options = arg;
+        }
+      }
+
+      var self = this;
+      this.httpDo(
+        path,
+        'GET',
+        options,
+        t,
+        function(resp) {
+          for (var k in resp) {
+            ret[k] = resp[k];
+          }
+          if (typeof callback !== 'undefined') {
+            callback(resp);
+          }
+
+          self._decrementPreload();
+        },
+        errorCallback
+      );
+
+      return ret;
+    };
+
+    /**
+     * Reads the contents of a file and creates a String array of its individual
+     * lines. If the name of the file is used as the parameter, as in the above
+     * example, the file must be located in the sketch directory/folder.
+     * 


+     * Alternatively, the file maybe be loaded from anywhere on the local
+     * computer using an absolute path (something that starts with / on Unix and
+     * Linux, or a drive letter on Windows), or the filename parameter can be a
+     * URL for a file found on a network.
+     * 


+     * This method is asynchronous, meaning it may not finish before the next
+     * line in your sketch is executed.
+     *
+     * @method loadStrings
+     * @param  {String}   filename   name of the file or url to load
+     * @param  {function} [callback] function to be executed after loadStrings()
+     *                               completes, Array is passed in as first
+     *                               argument
+     * @param  {function} [errorCallback] function to be executed if
+     *                               there is an error, response is passed
+     *                               in as first argument
+     * @return {String[]}            Array of Strings
+     * @example
+     *
+     * 
Calling loadStrings() inside preload() guarantees to complete the
+     * operation before setup() and draw() are called.

+     *
+     * 

+     * var result;
+     * function preload() {
+     *   result = loadStrings('assets/test.txt');
+     * }
+
+     * function setup() {
+     *   background(200);
+     *   var ind = floor(random(result.length));
+     *   text(result[ind], 10, 10, 80, 80);
+     * }
+     * 

+     *
+     * 
Outside of preload(), you may supply a callback function to handle the
+     * object:

+     *
+     * 

+     * function setup() {
+     *   loadStrings('assets/test.txt', pickString);
+     * }
+     *
+     * function pickString(result) {
+     *   background(200);
+     *   var ind = floor(random(result.length));
+     *   text(result[ind], 10, 10, 80, 80);
+     * }
+     * 

+     *
+     * @alt
+     * randomly generated text from a file, for example "i smell like butter"
+     * randomly generated text from a file, for example "i have three feet"
+     *
+     */
+    p5.prototype.loadStrings = function() {
+      var ret = [];
+      var callback, errorCallback;
+
+      for (var i = 1; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (typeof arg === 'function') {
+          if (typeof callback === 'undefined') {
+            callback = arg;
+          } else if (typeof errorCallback === 'undefined') {
+            errorCallback = arg;
+          }
+        }
+      }
+
+      var self = this;
+      p5.prototype.httpDo.call(
+        this,
+        arguments[0],
+        'GET',
+        'text',
+        function(data) {
+          var arr = data.match(/[^\r\n]+/g);
+          for (var k in arr) {
+            ret[k] = arr[k];
+          }
+
+          if (typeof callback !== 'undefined') {
+            callback(ret);
+          }
+
+          self._decrementPreload();
+        },
+        errorCallback
+      );
+
+      return ret;
+    };
+
+    /**
+     * 
Reads the contents of a file or URL and creates a p5.Table object with
+     * its values. If a file is specified, it must be located in the sketch's
+     * "data" folder. The filename parameter can also be a URL to a file found
+     * online. By default, the file is assumed to be comma-separated (in CSV
+     * format). Table only looks for a header row if the 'header' option is
+     * included.

+     *
+     * 
Possible options include:
+     * 
    
+     * 
  • csv - parse the table as comma-separated values
    • 
+     * 
  • tsv - parse the table as tab-separated values
    • 
+     * 
  • header - this table has a header (title) row
    • 
+     * 

+     * 

+     *
+     * 
When passing in multiple options, pass them in as separate parameters,
+     * seperated by commas. For example:
+     * 


+     * 
+     * loadTable('my_csv_file.csv', 'csv', 'header');
+     * 
+     * 

+     *
+     * 
 All files loaded and saved use UTF-8 encoding.

+     *
+     * 
This method is asynchronous, meaning it may not finish before the next
+     * line in your sketch is executed. Calling loadTable() inside preload()
+     * guarantees to complete the operation before setup() and draw() are called.
+     * 
Outside of preload(), you may supply a callback function to handle the
+     * object:

+     * 

+     *
+     * @method loadTable
+     * @param  {String}         filename   name of the file or URL to load
+     * @param  {String}         options  "header" "csv" "tsv"
+     * @param  {function}       [callback] function to be executed after
+     *                                     loadTable() completes. On success, the
+     *                                     Table object is passed in as the
+     *                                     first argument.
+     * @param  {function}  [errorCallback] function to be executed if
+     *                                     there is an error, response is passed
+     *                                     in as first argument
+     * @return {Object}                    Table object containing data
+     *
+     * @example
+     * 

+     * 
+     * // Given the following CSV file called "mammals.csv"
+     * // located in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     *   //the file can be remote
+     *   //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
+     *   //                  "csv", "header");
+     * }
+     *
+     * function setup() {
+     *   //count the columns
+     *   print(table.getRowCount() + ' total rows in table');
+     *   print(table.getColumnCount() + ' total columns in table');
+     *
+     *   print(table.getColumn('name'));
+     *   //["Goat", "Leopard", "Zebra"]
+     *
+     *   //cycle through the table
+     *   for (var r = 0; r < table.getRowCount(); r++)
+     *     for (var c = 0; c < table.getColumnCount(); c++) {
+     *       print(table.getString(r, c));
+     *     }
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * randomly generated text from a file, for example "i smell like butter"
+     * randomly generated text from a file, for example "i have three feet"
+     *
+     */
+    /**
+     * @method loadTable
+     * @param  {String}         filename
+     * @param  {function}       [callback]
+     * @param  {function}  [errorCallback]
+     * @return {Object}
+     */
+    p5.prototype.loadTable = function(path) {
+      var callback;
+      var errorCallback;
+      var options = [];
+      var header = false;
+      var ext = path.substring(path.lastIndexOf('.') + 1, path.length);
+      var sep = ',';
+      var separatorSet = false;
+
+      if (ext === 'tsv') {
+        //Only need to check extension is tsv because csv is default
+        sep = '\t';
+      }
+
+      for (var i = 1; i < arguments.length; i++) {
+        if (typeof arguments[i] === 'function') {
+          if (typeof callback === 'undefined') {
+            callback = arguments[i];
+          } else if (typeof errorCallback === 'undefined') {
+            errorCallback = arguments[i];
+          }
+        } else if (typeof arguments[i] === 'string') {
+          options.push(arguments[i]);
+          if (arguments[i] === 'header') {
+            header = true;
+          }
+          if (arguments[i] === 'csv') {
+            if (separatorSet) {
+              throw new Error('Cannot set multiple separator types.');
+            } else {
+              sep = ',';
+              separatorSet = true;
+            }
+          } else if (arguments[i] === 'tsv') {
+            if (separatorSet) {
+              throw new Error('Cannot set multiple separator types.');
+            } else {
+              sep = '\t';
+              separatorSet = true;
+            }
+          }
+        }
+      }
+
+      var t = new p5.Table();
+
+      var self = this;
+      this.httpDo(
+        path,
+        'GET',
+        'text',
+        function(resp) {
+          var state = {};
+
+          // define constants
+          var PRE_TOKEN = 0,
+            MID_TOKEN = 1,
+            POST_TOKEN = 2,
+            POST_RECORD = 4;
+
+          var QUOTE = '"',
+            CR = '\r',
+            LF = '\n';
+
+          var records = [];
+          var offset = 0;
+          var currentRecord = null;
+          var currentChar;
+
+          var tokenBegin = function() {
+            state.currentState = PRE_TOKEN;
+            state.token = '';
+          };
+
+          var tokenEnd = function() {
+            currentRecord.push(state.token);
+            tokenBegin();
+          };
+
+          var recordBegin = function() {
+            state.escaped = false;
+            currentRecord = [];
+            tokenBegin();
+          };
+
+          var recordEnd = function() {
+            state.currentState = POST_RECORD;
+            records.push(currentRecord);
+            currentRecord = null;
+          };
+
+          for (;;) {
+            currentChar = resp[offset++];
+
+            // EOF
+            if (currentChar == null) {
+              if (state.escaped) {
+                throw new Error('Unclosed quote in file.');
+              }
+              if (currentRecord) {
+                tokenEnd();
+                recordEnd();
+                break;
+              }
+            }
+            if (currentRecord === null) {
+              recordBegin();
+            }
+
+            // Handle opening quote
+            if (state.currentState === PRE_TOKEN) {
+              if (currentChar === QUOTE) {
+                state.escaped = true;
+                state.currentState = MID_TOKEN;
+                continue;
+              }
+              state.currentState = MID_TOKEN;
+            }
+
+            // mid-token and escaped, look for sequences and end quote
+            if (state.currentState === MID_TOKEN && state.escaped) {
+              if (currentChar === QUOTE) {
+                if (resp[offset] === QUOTE) {
+                  state.token += QUOTE;
+                  offset++;
+                } else {
+                  state.escaped = false;
+                  state.currentState = POST_TOKEN;
+                }
+              } else if (currentChar === CR) {
+                continue;
+              } else {
+                state.token += currentChar;
+              }
+              continue;
+            }
+
+            // fall-through: mid-token or post-token, not escaped
+            if (currentChar === CR) {
+              if (resp[offset] === LF) {
+                offset++;
+              }
+              tokenEnd();
+              recordEnd();
+            } else if (currentChar === LF) {
+              tokenEnd();
+              recordEnd();
+            } else if (currentChar === sep) {
+              tokenEnd();
+            } else if (state.currentState === MID_TOKEN) {
+              state.token += currentChar;
+            }
+          }
+
+          // set up column names
+          if (header) {
+            t.columns = records.shift();
+          } else {
+            for (i = 0; i < records[0].length; i++) {
+              t.columns[i] = 'null';
+            }
+          }
+          var row;
+          for (i = 0; i < records.length; i++) {
+            //Handles row of 'undefined' at end of some CSVs
+            if (records[i].length === 1) {
+              if (records[i][0] === 'undefined' || records[i][0] === '') {
+                continue;
+              }
+            }
+            row = new p5.TableRow();
+            row.arr = records[i];
+            row.obj = makeObject(records[i], t.columns);
+            t.addRow(row);
+          }
+          if (typeof callback === 'function') {
+            callback(t);
+          }
+
+          self._decrementPreload();
+        },
+        function(err) {
+          // Error handling
+          p5._friendlyFileLoadError(2, path);
+
+          if (errorCallback) {
+            errorCallback(err);
+          } else {
+            throw err;
+          }
+        }
+      );
+
+      return t;
+    };
+
+    // helper function to turn a row into a JSON object
+    function makeObject(row, headers) {
+      var ret = {};
+      headers = headers || [];
+      if (typeof headers === 'undefined') {
+        for (var j = 0; j < row.length; j++) {
+          headers[j.toString()] = j;
+        }
+      }
+      for (var i = 0; i < headers.length; i++) {
+        var key = headers[i];
+        var val = row[i];
+        ret[key] = val;
+      }
+      return ret;
+    }
+
+    /*global parseXML */
+    p5.prototype.parseXML = function(two) {
+      var one = new p5.XML();
+      var i;
+      if (two.children.length) {
+        for (i = 0; i < two.children.length; i++) {
+          var node = parseXML(two.children[i]);
+          one.addChild(node);
+        }
+        one.setName(two.nodeName);
+        one._setCont(two.textContent);
+        one._setAttributes(two);
+        for (var j = 0; j < one.children.length; j++) {
+          one.children[j].parent = one;
+        }
+        return one;
+      } else {
+        one.setName(two.nodeName);
+        one._setCont(two.textContent);
+        one._setAttributes(two);
+        return one;
+      }
+    };
+
+    /**
+     * Reads the contents of a file and creates an XML object with its values.
+     * If the name of the file is used as the parameter, as in the above example,
+     * the file must be located in the sketch directory/folder.
+     *
+     * Alternatively, the file maybe be loaded from anywhere on the local
+     * computer using an absolute path (something that starts with / on Unix and
+     * Linux, or a drive letter on Windows), or the filename parameter can be a
+     * URL for a file found on a network.
+     *
+     * This method is asynchronous, meaning it may not finish before the next
+     * line in your sketch is executed. Calling loadXML() inside preload()
+     * guarantees to complete the operation before setup() and draw() are called.
+     *
+     * Outside of preload(), you may supply a callback function to handle the
+     * object.
+     *
+     * @method loadXML
+     * @param  {String}   filename   name of the file or URL to load
+     * @param  {function} [callback] function to be executed after loadXML()
+     *                               completes, XML object is passed in as
+     *                               first argument
+     * @param  {function} [errorCallback] function to be executed if
+     *                               there is an error, response is passed
+     *                               in as first argument
+     * @return {Object}              XML object containing data
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var children = xml.getChildren('animal');
+     *
+     *   for (var i = 0; i < children.length; i++) {
+     *     var id = children[i].getNum('id');
+     *     var coloring = children[i].getString('species');
+     *     var name = children[i].getContent();
+     *     print(id + ', ' + coloring + ', ' + name);
+     *   }
+     * }
+     *
+     * // Sketch prints:
+     * // 0, Capra hircus, Goat
+     * // 1, Panthera pardus, Leopard
+     * // 2, Equus zebra, Zebra
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.prototype.loadXML = function() {
+      var ret = {};
+      var callback, errorCallback;
+
+      for (var i = 1; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (typeof arg === 'function') {
+          if (typeof callback === 'undefined') {
+            callback = arg;
+          } else if (typeof errorCallback === 'undefined') {
+            errorCallback = arg;
+          }
+        }
+      }
+
+      var self = this;
+      this.httpDo(
+        arguments[0],
+        'GET',
+        'xml',
+        function(xml) {
+          for (var key in xml) {
+            ret[key] = xml[key];
+          }
+          if (typeof callback !== 'undefined') {
+            callback(ret);
+          }
+
+          self._decrementPreload();
+        },
+        errorCallback
+      );
+
+      return ret;
+    };
+
+    /**
+     * Method for executing an HTTP GET request. If data type is not specified,
+     * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
+     * calling httpDo(path, 'GET').
+     *
+     * @method httpGet
+     * @param  {String}        path       name of the file or url to load
+     * @param  {String}        [datatype] "json", "jsonp", "xml", or "text"
+     * @param  {Object}        [data]     param data passed sent with request
+     * @param  {function}      [callback] function to be executed after
+     *                                    httpGet() completes, data is passed in
+     *                                    as first argument
+     * @param  {function}      [errorCallback] function to be executed if
+     *                                    there is an error, response is passed
+     *                                    in as first argument
+     * @example
+     * 

+     * // Examples use USGS Earthquake API:
+     * //   https://earthquake.usgs.gov/fdsnws/event/1/#methods
+     * var earthquakes;
+     * function preload() {
+     *   // Get the most recent earthquake in the database
+     *   var url =
+        'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+     *     'format=geojson&limit=1&orderby=time';
+     *   httpGet(url, 'jsonp', false, function(response) {
+     *     // when the HTTP request completes, populate the variable that holds the
+     *     // earthquake data used in the visualization.
+     *     earthquakes = response;
+     *   });
+     * }
+     *
+     * function draw() {
+     *   if (!earthquakes) {
+     *     // Wait until the earthquake data has loaded before drawing.
+     *     return;
+     *   }
+     *   background(200);
+     *   // Get the magnitude and name of the earthquake out of the loaded JSON
+     *   var earthquakeMag = earthquakes.features[0].properties.mag;
+     *   var earthquakeName = earthquakes.features[0].properties.place;
+     *   ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+     *   textAlign(CENTER);
+     *   text(earthquakeName, 0, height - 30, width, 30);
+     *   noLoop();
+     * }
+     * 

+     */
+    p5.prototype.httpGet = function() {
+      var args = Array.prototype.slice.call(arguments);
+      args.splice(1, 0, 'GET');
+      p5.prototype.httpDo.apply(this, args);
+    };
+
+    /**
+     * Method for executing an HTTP POST request. If data type is not specified,
+     * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
+     * calling httpDo(path, 'POST').
+     *
+     * @method httpPost
+     * @param  {String}        path       name of the file or url to load
+     * @param  {String}        [datatype] "json", "jsonp", "xml", or "text".
+     *                                    If omitted, httpPost() will guess.
+     * @param  {Object}        [data]     param data passed sent with request
+     * @param  {function}      [callback] function to be executed after
+     *                                    httpPost() completes, data is passed in
+     *                                    as first argument
+     * @param  {function}      [errorCallback] function to be executed if
+     *                                    there is an error, response is passed
+     *                                    in as first argument
+     *
+     * @example
+     * 

+     * 
+     * // Examples use jsonplaceholder.typicode.com for a Mock Data API
+     *
+     * var url = 'https://jsonplaceholder.typicode.com/posts';
+     * var postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is way cool.' };
+     *
+     * function setup() {
+     *   createCanvas(800, 800);
+     * }
+     *
+     * function mousePressed() {
+     *   // Pick new random color values
+     *   var r = random(255);
+     *   var g = random(255);
+     *   var b = random(255);
+     *
+     *   httpPost(url, 'json', postData, function(result) {
+     *     strokeWeight(2);
+     *     stroke(r, g, b);
+     *     fill(r, g, b, 127);
+     *     ellipse(mouseX, mouseY, 200, 200);
+     *     text(result.body, mouseX, mouseY);
+     *   });
+     * }
+     * 
+     * 

+     *
+     *
+     * 

+     * var url = 'https://invalidURL'; // A bad URL that will cause errors
+     * var postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };
+     *
+     * function setup() {
+     *   createCanvas(800, 800);
+     * }
+     *
+     * function mousePressed() {
+     *   // Pick new random color values
+     *   var r = random(255);
+     *   var g = random(255);
+     *   var b = random(255);
+     *
+     *   httpPost(
+     *     url,
+     *     'json',
+     *     postData,
+     *     function(result) {
+     *       // ... won't be called
+     *     },
+     *     function(error) {
+     *       strokeWeight(2);
+     *       stroke(r, g, b);
+     *       fill(r, g, b, 127);
+     *       text(error.toString(), mouseX, mouseY);
+     *     }
+     *   );
+     * }
+     * 

+     *
+     */
+    p5.prototype.httpPost = function() {
+      var args = Array.prototype.slice.call(arguments);
+      args.splice(1, 0, 'POST');
+      p5.prototype.httpDo.apply(this, args);
+    };
+
+    /**
+     * Method for executing an HTTP request. If data type is not specified,
+     * p5 will try to guess based on the URL, defaulting to text.


+     * For more advanced use, you may also pass in the path as the first argument
+     * and a object as the second argument, the signature follows the one specified
+     * in the Fetch API specification.
+     *
+     * @method httpDo
+     * @param  {String}        path       name of the file or url to load
+     * @param  {String}        [method]   either "GET", "POST", or "PUT",
+     *                                    defaults to "GET"
+     * @param  {String}        [datatype] "json", "jsonp", "xml", or "text"
+     * @param  {Object}        [data]     param data passed sent with request
+     * @param  {function}      [callback] function to be executed after
+     *                                    httpGet() completes, data is passed in
+     *                                    as first argument
+     * @param  {function}      [errorCallback] function to be executed if
+     *                                    there is an error, response is passed
+     *                                    in as first argument
+     *
+     *
+     * @example
+     * 

+     * 
+     * // Examples use USGS Earthquake API:
+     * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+     *
+     * // displays an animation of all USGS earthquakes
+     * var earthquakes;
+     * var eqFeatureIndex = 0;
+     *
+     * function preload() {
+     *   var url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+     *   httpDo(
+     *     url,
+     *     {
+     *       method: 'GET',
+     *       // Other Request options, like special headers for apis
+     *       headers: { authorization: 'Bearer secretKey' }
+     *     },
+     *     function(res) {
+     *       earthquakes = res;
+     *     }
+     *   );
+     * }
+     *
+     * function draw() {
+     *   // wait until the data is loaded
+     *   if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+     *     return;
+     *   }
+     *   clear();
+     *
+     *   var feature = earthquakes.features[eqFeatureIndex];
+     *   var mag = feature.properties.mag;
+     *   var rad = mag / 11 * ((width + height) / 2);
+     *   fill(255, 0, 0, 100);
+     *   ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+     *
+     *   if (eqFeatureIndex >= earthquakes.features.length) {
+     *     eqFeatureIndex = 0;
+     *   } else {
+     *     eqFeatureIndex += 1;
+     *   }
+     * }
+     * 
+     * 

+     */
+
+    /**
+     * @method httpDo
+     * @param  {String}        path
+     * @param  {Object}        options   Request object options as documented in the
+     *                                    "fetch" API
+     * reference
+     * @param  {function}      [callback]
+     * @param  {function}      [errorCallback]
+     */
+    p5.prototype.httpDo = function() {
+      var type = '';
+      var callback;
+      var errorCallback;
+      var request;
+      var jsonpOptions = {};
+      var cbCount = 0;
+      var contentType = 'text/plain';
+      // Trim the callbacks off the end to get an idea of how many arguments are passed
+      for (var i = arguments.length - 1; i > 0; i--) {
+        if (typeof arguments[i] === 'function') {
+          cbCount++;
+        } else {
+          break;
+        }
+      }
+      // The number of arguments minus callbacks
+      var argsCount = arguments.length - cbCount;
+      if (
+        argsCount === 2 &&
+        typeof arguments[0] === 'string' &&
+        typeof arguments[1] === 'object'
+      ) {
+        // Intended for more advanced use, pass in Request parameters directly
+        request = new Request(arguments[0], arguments[1]);
+        callback = arguments[2];
+        errorCallback = arguments[3];
+
+        // do some sort of smart type checking
+        if (type === '') {
+          if (request.url.indexOf('json') !== -1) {
+            type = 'json';
+          } else if (request.url.indexOf('xml') !== -1) {
+            type = 'xml';
+          } else {
+            type = 'text';
+          }
+        }
+      } else {
+        // Provided with arguments
+        var path = arguments[0];
+        var method = 'GET';
+        var data;
+
+        for (var j = 1; j < arguments.length; j++) {
+          var a = arguments[j];
+          if (typeof a === 'string') {
+            if (a === 'GET' || a === 'POST' || a === 'PUT' || a === 'DELETE') {
+              method = a;
+            } else if (
+              a === 'json' ||
+              a === 'jsonp' ||
+              a === 'xml' ||
+              a === 'text'
+            ) {
+              type = a;
+            } else {
+              data = a;
+            }
+          } else if (typeof a === 'number') {
+            data = a.toString();
+          } else if (typeof a === 'object') {
+            if (a.hasOwnProperty('jsonpCallback')) {
+              for (var attr in a) {
+                jsonpOptions[attr] = a[attr];
+              }
+            } else {
+              data = JSON.stringify(a);
+              contentType = 'application/json';
+            }
+          } else if (typeof a === 'function') {
+            if (!callback) {
+              callback = a;
+            } else {
+              errorCallback = a;
+            }
+          }
+        }
+        // do some sort of smart type checking
+        if (type === '') {
+          if (path.indexOf('json') !== -1) {
+            type = 'json';
+          } else if (path.indexOf('xml') !== -1) {
+            type = 'xml';
+          } else {
+            type = 'text';
+          }
+        }
+
+        request = new Request(path, {
+          method: method,
+          mode: 'cors',
+          body: data,
+          headers: new Headers({
+            'Content-Type': contentType
+          })
+        });
+      }
+
+      if (type === 'jsonp') {
+        fetchJsonp(arguments[0], jsonpOptions)
+          .then(function(res) {
+            if (res.ok) {
+              return res.json();
+            }
+            throw res;
+          })
+          .then(function(resp) {
+            callback(resp);
+          })
+          .catch(function(err) {
+            if (errorCallback) {
+              errorCallback(err);
+            } else {
+              throw err;
+            }
+          });
+      } else {
+        fetch(request)
+          .then(function(res) {
+            if (res.ok) {
+              if (type === 'json') {
+                return res.json();
+              } else {
+                return res.text();
+              }
+            }
+
+            throw res;
+          })
+          .then(function(resp) {
+            if (type === 'xml') {
+              var parser = new DOMParser();
+              resp = parser.parseFromString(resp, 'text/xml');
+              resp = parseXML(resp.documentElement);
+            }
+            callback(resp);
+          })
+          .catch(function(err, msg) {
+            if (errorCallback) {
+              errorCallback(err);
+            } else {
+              throw err;
+            }
+          });
+      }
+    };
+
+    /**
+     * @module IO
+     * @submodule Output
+     * @for p5
+     */
+
+    window.URL = window.URL || window.webkitURL;
+
+    // private array of p5.PrintWriter objects
+    p5.prototype._pWriters = [];
+
+    /**
+     * @method createWriter
+     * @param {String} name name of the file to be created
+     * @param {String} [extension]
+     * @return {p5.PrintWriter}
+     * @example
+     * 

+     * 
+     * createButton('save')
+     *   .position(10, 10)
+     *   .mousePressed(function() {
+     *     var writer = createWriter('squares.txt');
+     *     for (var i = 0; i < 10; i++) {
+     *       writer.print(i * i);
+     *     }
+     *     writer.close();
+     *     writer.flush();
+     *   });
+     * 
+     * 

+     */
+    p5.prototype.createWriter = function(name, extension) {
+      var newPW;
+      // check that it doesn't already exist
+      for (var i in p5.prototype._pWriters) {
+        if (p5.prototype._pWriters[i].name === name) {
+          // if a p5.PrintWriter w/ this name already exists...
+          // return p5.prototype._pWriters[i]; // return it w/ contents intact.
+          // or, could return a new, empty one with a unique name:
+          newPW = new p5.PrintWriter(name + window.millis(), extension);
+          p5.prototype._pWriters.push(newPW);
+          return newPW;
+        }
+      }
+      newPW = new p5.PrintWriter(name, extension);
+      p5.prototype._pWriters.push(newPW);
+      return newPW;
+    };
+
+    /**
+     *  @class p5.PrintWriter
+     *  @constructor
+     *  @param  {String}     filename
+     *  @param  {String}     [extension]
+     */
+    p5.PrintWriter = function(filename, extension) {
+      var self = this;
+      this.name = filename;
+      this.content = '';
+      //Changed to write because it was being overloaded by function below.
+      /**
+       * @method write
+       * @param {Array} data
+       */
+      this.write = function(data) {
+        this.content += data;
+      };
+      /**
+       * @method print
+       * @param {Array} data
+       */
+      this.print = function(data) {
+        this.content += data + '\n';
+      };
+      /**
+       * @method flush
+       */
+      this.flush = function() {
+        this.content = '';
+      };
+      /**
+       * @method close
+       */
+      this.close = function() {
+        // convert String to Array for the writeFile Blob
+        var arr = [];
+        arr.push(this.content);
+        p5.prototype.writeFile(arr, filename, extension);
+        // remove from _pWriters array and delete self
+        for (var i in p5.prototype._pWriters) {
+          if (p5.prototype._pWriters[i].name === this.name) {
+            // remove from _pWriters array
+            p5.prototype._pWriters.splice(i, 1);
+          }
+        }
+        self.flush();
+        self = {};
+      };
+    };
+
+    /**
+     * @module IO
+     * @submodule Output
+     * @for p5
+     */
+
+    // object, filename, options --> saveJSON, saveStrings,
+    // filename, [extension] [canvas] --> saveImage
+
+    /**
+     *  
Save an image, text, json, csv, wav, or html. Prompts download to
+     *  the client's computer. Note that it is not recommended to call save()
+     *  within draw if it's looping, as the save() function will open a new save
+     *  dialog every frame.

+     *  
The default behavior is to save the canvas as an image. You can
+     *  optionally specify a filename.
+     *  For example:

+     * 

+     * save();
+     * save('myCanvas.jpg'); // save a specific canvas with a filename
+     * 

+     *
+     *  
Alternately, the first parameter can be a pointer to a canvas
+     *  p5.Element, an Array of Strings,
+     *  an Array of JSON, a JSON object, a p5.Table, a p5.Image, or a
+     *  p5.SoundFile (requires p5.sound). The second parameter is a filename
+     *  (including extension). The third parameter is for options specific
+     *  to this type of object. This method will save a file that fits the
+     *  given paramaters. For example:

+     *
+     * 

+     * // Saves canvas as an image
+     * save('myCanvas.jpg');
+     *
+     * // Saves pImage as a png image
+     * var img = createImage(10, 10);
+     * save(img, 'my.png');
+     *
+     * // Saves canvas as an image
+     * var cnv = createCanvas(100, 100);
+     * save(cnv, 'myCanvas.jpg');
+     *
+     * // Saves p5.Renderer object as an image
+     * var gb = createGraphics(100, 100);
+     * save(gb, 'myGraphics.jpg');
+     *
+     * var myTable = new p5.Table();
+     *
+     * // Saves table as html file
+     * save(myTable, 'myTable.html');
+     *
+     * // Comma Separated Values
+     * save(myTable, 'myTable.csv');
+     *
+     * // Tab Separated Values
+     * save(myTable, 'myTable.tsv');
+     *
+     * var myJSON = { a: 1, b: true };
+     *
+     * // Saves pretty JSON
+     * save(myJSON, 'my.json');
+     *
+     * // Optimizes JSON filesize
+     * save(myJSON, 'my.json', true);
+     *
+     * // Saves array of strings to a text file with line breaks after each item
+     * var arrayOfStrings = ['a', 'b'];
+     * save(arrayOfStrings, 'my.txt');
+     * 

+     *
+     *  @method save
+     *  @param  {Object|String} [objectOrFilename]  If filename is provided, will
+     *                                             save canvas as an image with
+     *                                             either png or jpg extension
+     *                                             depending on the filename.
+     *                                             If object is provided, will
+     *                                             save depending on the object
+     *                                             and filename (see examples
+     *                                             above).
+     *  @param  {String} [filename] If an object is provided as the first
+     *                               parameter, then the second parameter
+     *                               indicates the filename,
+     *                               and should include an appropriate
+     *                               file extension (see examples above).
+     *  @param  {Boolean|String} [options]  Additional options depend on
+     *                            filetype. For example, when saving JSON,
+     *                            true indicates that the
+     *                            output will be optimized for filesize,
+     *                            rather than readability.
+     */
+    p5.prototype.save = function(object, _filename, _options) {
+      // parse the arguments and figure out which things we are saving
+      var args = arguments;
+      // =================================================
+      // OPTION 1: saveCanvas...
+
+      // if no arguments are provided, save canvas
+      var cnv = this._curElement.elt;
+      if (args.length === 0) {
+        p5.prototype.saveCanvas(cnv);
+        return;
+      } else if (args[0] instanceof p5.Renderer || args[0] instanceof p5.Graphics) {
+        // otherwise, parse the arguments
+
+        // if first param is a p5Graphics, then saveCanvas
+        p5.prototype.saveCanvas(args[0].elt, args[1], args[2]);
+        return;
+      } else if (args.length === 1 && typeof args[0] === 'string') {
+        // if 1st param is String and only one arg, assume it is canvas filename
+        p5.prototype.saveCanvas(cnv, args[0]);
+      } else {
+        // =================================================
+        // OPTION 2: extension clarifies saveStrings vs. saveJSON
+        var extension = _checkFileExtension(args[1], args[2])[1];
+        switch (extension) {
+          case 'json':
+            p5.prototype.saveJSON(args[0], args[1], args[2]);
+            return;
+          case 'txt':
+            p5.prototype.saveStrings(args[0], args[1], args[2]);
+            return;
+          // =================================================
+          // OPTION 3: decide based on object...
+          default:
+            if (args[0] instanceof Array) {
+              p5.prototype.saveStrings(args[0], args[1], args[2]);
+            } else if (args[0] instanceof p5.Table) {
+              p5.prototype.saveTable(args[0], args[1], args[2]);
+            } else if (args[0] instanceof p5.Image) {
+              p5.prototype.saveCanvas(args[0].canvas, args[1]);
+            } else if (args[0] instanceof p5.SoundFile) {
+              p5.prototype.saveSound(args[0], args[1], args[2], args[3]);
+            }
+        }
+      }
+    };
+
+    /**
+     *  Writes the contents of an Array or a JSON object to a .json file.
+     *  The file saving process and location of the saved file will
+     *  vary between web browsers.
+     *
+     *  @method saveJSON
+     *  @param  {Array|Object} json
+     *  @param  {String} filename
+     *  @param  {Boolean} [optimize]   If true, removes line breaks
+     *                                 and spaces from the output
+     *                                 file to optimize filesize
+     *                                 (but not readability).
+     *  @example
+     * 

+     * var json = {}; // new  JSON Object
+     *
+     * json.id = 0;
+     * json.species = 'Panthera leo';
+     * json.name = 'Lion';
+     *
+     * createButton('save')
+     *   .position(10, 10)
+     *   .mousePressed(function() {
+     *     saveJSON(json, 'lion.json');
+     *   });
+     *
+     * // saves the following to a file called "lion.json":
+     * // {
+     * //   "id": 0,
+     * //   "species": "Panthera leo",
+     * //   "name": "Lion"
+     * // }
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.prototype.saveJSON = function(json, filename, opt) {
+      var stringify;
+      if (opt) {
+        stringify = JSON.stringify(json);
+      } else {
+        stringify = JSON.stringify(json, undefined, 2);
+      }
+      this.saveStrings(stringify.split('\n'), filename, 'json');
+    };
+
+    p5.prototype.saveJSONObject = p5.prototype.saveJSON;
+    p5.prototype.saveJSONArray = p5.prototype.saveJSON;
+
+    /**
+     *  Writes an array of Strings to a text file, one line per String.
+     *  The file saving process and location of the saved file will
+     *  vary between web browsers.
+     *
+     *  @method saveStrings
+     *  @param  {String[]} list   string array to be written
+     *  @param  {String} filename filename for output
+     *  @param  {String} [extension] the filename's extension
+     *  @example
+     * 

+     * var words = 'apple bear cat dog';
+     *
+     * // .split() outputs an Array
+     * var list = split(words, ' ');
+     *
+     * createButton('save')
+     *   .position(10, 10)
+     *   .mousePressed(function() {
+     *     saveStrings(list, 'nouns.txt');
+     *   });
+     *
+     * // Saves the following to a file called 'nouns.txt':
+     * //
+     * // apple
+     * // bear
+     * // cat
+     * // dog
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.prototype.saveStrings = function(list, filename, extension) {
+      var ext = extension || 'txt';
+      var pWriter = this.createWriter(filename, ext);
+      for (var i = 0; i < list.length; i++) {
+        if (i < list.length - 1) {
+          pWriter.print(list[i]);
+        } else {
+          pWriter.print(list[i]);
+        }
+      }
+      pWriter.close();
+      pWriter.flush();
+    };
+
+    // =======
+    // HELPERS
+    // =======
+
+    function escapeHelper(content) {
+      return content
+        .replace(/&/g, '&')
+        .replace(//g, '>')
+        .replace(/"/g, '"')
+        .replace(/'/g, ''');
+    }
+
+    /**
+     *  Writes the contents of a Table object to a file. Defaults to a
+     *  text file with comma-separated-values ('csv') but can also
+     *  use tab separation ('tsv'), or generate an HTML table ('html').
+     *  The file saving process and location of the saved file will
+     *  vary between web browsers.
+     *
+     *  @method saveTable
+     *  @param  {p5.Table} Table  the Table object to save to a file
+     *  @param  {String} filename the filename to which the Table should be saved
+     *  @param  {String} [options]  can be one of "tsv", "csv", or "html"
+     *  @example
+     *  

+     * var table;
+     *
+     * function setup() {
+     *   table = new p5.Table();
+     *
+     *   table.addColumn('id');
+     *   table.addColumn('species');
+     *   table.addColumn('name');
+     *
+     *   var newRow = table.addRow();
+     *   newRow.setNum('id', table.getRowCount() - 1);
+     *   newRow.setString('species', 'Panthera leo');
+     *   newRow.setString('name', 'Lion');
+     *
+     *   // To save, un-comment next line then click 'run'
+     *   // saveTable(table, 'new.csv');
+     * }
+     *
+     * // Saves the following to a file called 'new.csv':
+     * // id,species,name
+     * // 0,Panthera leo,Lion
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.prototype.saveTable = function(table, filename, options) {
+      var ext;
+      if (options === undefined) {
+        ext = filename.substring(filename.lastIndexOf('.') + 1, filename.length);
+      } else {
+        ext = options;
+      }
+      var pWriter = this.createWriter(filename, ext);
+
+      var header = table.columns;
+
+      var sep = ','; // default to CSV
+      if (ext === 'tsv') {
+        sep = '\t';
+      }
+      if (ext !== 'html') {
+        // make header if it has values
+        if (header[0] !== '0') {
+          for (var h = 0; h < header.length; h++) {
+            if (h < header.length - 1) {
+              pWriter.write(header[h] + sep);
+            } else {
+              pWriter.write(header[h]);
+            }
+          }
+          pWriter.write('\n');
+        }
+
+        // make rows
+        for (var i = 0; i < table.rows.length; i++) {
+          var j;
+          for (j = 0; j < table.rows[i].arr.length; j++) {
+            if (j < table.rows[i].arr.length - 1) {
+              pWriter.write(table.rows[i].arr[j] + sep);
+            } else if (i < table.rows.length - 1) {
+              pWriter.write(table.rows[i].arr[j]);
+            } else {
+              pWriter.write(table.rows[i].arr[j]);
+            }
+          }
+          pWriter.write('\n');
+        }
+      } else {
+        // otherwise, make HTML
+        pWriter.print('');
+        pWriter.print('');
+        var str = '  ');
+
+        pWriter.print('');
+        pWriter.print('  ');
+
+        // make header if it has values
+        if (header[0] !== '0') {
+          pWriter.print('    ');
+          for (var k = 0; k < header.length; k++) {
+            var e = escapeHelper(header[k]);
+            pWriter.print('      ');
+          }
+          pWriter.print('    ');
+        }
+
+        // make rows
+        for (var row = 0; row < table.rows.length; row++) {
+          pWriter.print('    ');
+          for (var col = 0; col < table.columns.length; col++) {
+            var entry = table.rows[row].getString(col);
+            var htmlEntry = escapeHelper(entry);
+            pWriter.print('      ');
+          }
+          pWriter.print('    ');
+        }
+        pWriter.print('  
' + e);
+            pWriter.print('      
' + htmlEntry);
+            pWriter.print('      
');
+        pWriter.print('');
+        pWriter.print('');
+      }
+      // close and flush the pWriter
+      pWriter.close();
+      pWriter.flush();
+    }; // end saveTable()
+
+    /**
+     *  Generate a blob of file data as a url to prepare for download.
+     *  Accepts an array of data, a filename, and an extension (optional).
+     *  This is a private function because it does not do any formatting,
+     *  but it is used by saveStrings, saveJSON, saveTable etc.
+     *
+     *  @param  {Array} dataToDownload
+     *  @param  {String} filename
+     *  @param  {String} [extension]
+     *  @private
+     */
+    p5.prototype.writeFile = function(dataToDownload, filename, extension) {
+      var type = 'application/octet-stream';
+      if (p5.prototype._isSafari()) {
+        type = 'text/plain';
+      }
+      var blob = new Blob(dataToDownload, {
+        type: type
+      });
+      p5.prototype.downloadFile(blob, filename, extension);
+    };
+
+    /**
+     *  Forces download. Accepts a url to filedata/blob, a filename,
+     *  and an extension (optional).
+     *  This is a private function because it does not do any formatting,
+     *  but it is used by saveStrings, saveJSON, saveTable etc.
+     *
+     *  @method downloadFile
+     *  @param  {String|Blob} data    either an href generated by createObjectURL,
+     *                                or a Blob object containing the data
+     *  @param  {String} [filename]
+     *  @param  {String} [extension]
+     */
+    p5.prototype.downloadFile = function(data, fName, extension) {
+      var fx = _checkFileExtension(fName, extension);
+      var filename = fx[0];
+
+      if (data instanceof Blob) {
+        var fileSaver = _dereq_('file-saver');
+        fileSaver.saveAs(data, filename);
+        return;
+      }
+
+      var a = document.createElement('a');
+      a.href = data;
+      a.download = filename;
+
+      // Firefox requires the link to be added to the DOM before click()
+      a.onclick = function(e) {
+        destroyClickedElement(e);
+        e.stopPropagation();
+      };
+
+      a.style.display = 'none';
+      document.body.appendChild(a);
+
+      // Safari will open this file in the same page as a confusing Blob.
+      if (p5.prototype._isSafari()) {
+        var aText = 'Hello, Safari user! To download this file...\n';
+        aText += '1. Go to File --> Save As.\n';
+        aText += '2. Choose "Page Source" as the Format.\n';
+        aText += '3. Name it with this extension: ."' + fx[1] + '"';
+        alert(aText);
+      }
+      a.click();
+    };
+
+    /**
+     *  Returns a file extension, or another string
+     *  if the provided parameter has no extension.
+     *
+     *  @param   {String} filename
+     *  @param   {String} [extension]
+     *  @return  {String[]} [fileName, fileExtension]
+     *
+     *  @private
+     */
+    function _checkFileExtension(filename, extension) {
+      if (!extension || extension === true || extension === 'true') {
+        extension = '';
+      }
+      if (!filename) {
+        filename = 'untitled';
+      }
+      var ext = '';
+      // make sure the file will have a name, see if filename needs extension
+      if (filename && filename.indexOf('.') > -1) {
+        ext = filename.split('.').pop();
+      }
+      // append extension if it doesn't exist
+      if (extension) {
+        if (ext !== extension) {
+          ext = extension;
+          filename = filename + '.' + ext;
+        }
+      }
+      return [filename, ext];
+    }
+    p5.prototype._checkFileExtension = _checkFileExtension;
+
+    /**
+     *  Returns true if the browser is Safari, false if not.
+     *  Safari makes trouble for downloading files.
+     *
+     *  @return  {Boolean} [description]
+     *  @private
+     */
+    p5.prototype._isSafari = function() {
+      var x = Object.prototype.toString.call(window.HTMLElement);
+      return x.indexOf('Constructor') > 0;
+    };
+
+    /**
+     *  Helper function, a callback for download that deletes
+     *  an invisible anchor element from the DOM once the file
+     *  has been automatically downloaded.
+     *
+     *  @private
+     */
+    function destroyClickedElement(event) {
+      document.body.removeChild(event.target);
+    }
+
+    module.exports = p5;
+
+    },{"../core/core":22,"../core/error_helpers":25,"es6-promise":5,"fetch-jsonp":6,"file-saver":7,"whatwg-fetch":12}],47:[function(_dereq_,module,exports){
+    /**
+     * @module IO
+     * @submodule Table
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     *  Table Options
+     *  
Generic class for handling tabular data, typically from a
+     *  CSV, TSV, or other sort of spreadsheet file.

+     *  
CSV files are
+     *  
+     *  comma separated values, often with the data in quotes. TSV
+     *  files use tabs as separators, and usually don't bother with the
+     *  quotes.

+     *  
File names should end with .csv if they're comma separated.

+     *  
A rough "spec" for CSV can be found
+     *  here.

+     *  
To load files, use the loadTable method.

+     *  
To save tables to your computer, use the save method
+     *   or the saveTable method.

+     *
+     *  Possible options include:
+     *  
    
+     *  
  • csv - parse the table as comma-separated values
+     *  
  • tsv - parse the table as tab-separated values
+     *  
  • header - this table has a header (title) row
+     *  

+     */
+
+    /**
+     *  Table objects store data with multiple rows and columns, much
+     *  like in a traditional spreadsheet. Tables can be generated from
+     *  scratch, dynamically, or using data from an existing file.
+     *
+     *  @class p5.Table
+     *  @constructor
+     *  @param  {p5.TableRow[]}     [rows] An array of p5.TableRow objects
+     */
+    p5.Table = function(rows) {
+      /**
+       *  @property columns {String[]}
+       */
+      this.columns = [];
+
+      /**
+       *  @property rows {p5.TableRow[]}
+       */
+      this.rows = [];
+      this.name = 'p5.Table'; // for friendly debugger system
+    };
+
+    /**
+     *  Use addRow() to add a new row of data to a p5.Table object. By default,
+     *  an empty row is created. Typically, you would store a reference to
+     *  the new row in a TableRow object (see newRow in the example above),
+     *  and then set individual values using set().
+     *
+     *  If a p5.TableRow object is included as a parameter, then that row is
+     *  duplicated and added to the table.
+     *
+     *  @method  addRow
+     *  @param   {p5.TableRow} [row] row to be added to the table
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   //add a row
+     *   var newRow = table.addRow();
+     *   newRow.setString('id', table.getRowCount() - 1);
+     *   newRow.setString('species', 'Canis Lupus');
+     *   newRow.setString('name', 'Wolf');
+     *
+     *   //print the results
+     *   for (var r = 0; r < table.getRowCount(); r++)
+     *     for (var c = 0; c < table.getColumnCount(); c++)
+     *       print(table.getString(r, c));
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.addRow = function(row) {
+      // make sure it is a valid TableRow
+      var r = row || new p5.TableRow();
+
+      if (typeof r.arr === 'undefined' || typeof r.obj === 'undefined') {
+        //r = new p5.prototype.TableRow(r);
+        throw 'invalid TableRow: ' + r;
+      }
+      r.table = this;
+      this.rows.push(r);
+      return r;
+    };
+
+    /**
+     * Removes a row from the table object.
+     *
+     * @method  removeRow
+     * @param   {Integer} id ID number of the row to remove
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   //remove the first row
+     *   table.removeRow(0);
+     *
+     *   //print the results
+     *   for (var r = 0; r < table.getRowCount(); r++)
+     *     for (var c = 0; c < table.getColumnCount(); c++)
+     *       print(table.getString(r, c));
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.removeRow = function(id) {
+      this.rows[id].table = null; // remove reference to table
+      var chunk = this.rows.splice(id + 1, this.rows.length);
+      this.rows.pop();
+      this.rows = this.rows.concat(chunk);
+    };
+
+    /**
+     * Returns a reference to the specified p5.TableRow. The reference
+     * can then be used to get and set values of the selected row.
+     *
+     * @method  getRow
+     * @param  {Integer}   rowID ID number of the row to get
+     * @return {p5.TableRow} p5.TableRow object
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   var row = table.getRow(1);
+     *   //print it column by column
+     *   //note: a row is an object, not an array
+     *   for (var c = 0; c < table.getColumnCount(); c++) {
+     *     print(row.getString(c));
+     *   }
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.getRow = function(r) {
+      return this.rows[r];
+    };
+
+    /**
+     *  Gets all rows from the table. Returns an array of p5.TableRows.
+     *
+     *  @method  getRows
+     *  @return {p5.TableRow[]}   Array of p5.TableRows
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   var rows = table.getRows();
+     *
+     *   //warning: rows is an array of objects
+     *   for (var r = 0; r < rows.length; r++) {
+     *     rows[r].set('name', 'Unicorn');
+     *   }
+     *
+     *   //print the results
+     *   for (r = 0; r < table.getRowCount(); r++)
+     *     for (var c = 0; c < table.getColumnCount(); c++)
+     *       print(table.getString(r, c));
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.getRows = function() {
+      return this.rows;
+    };
+
+    /**
+     *  Finds the first row in the Table that contains the value
+     *  provided, and returns a reference to that row. Even if
+     *  multiple rows are possible matches, only the first matching
+     *  row is returned. The column to search may be specified by
+     *  either its ID or title.
+     *
+     *  @method  findRow
+     *  @param  {String} value  The value to match
+     *  @param  {Integer|String} column ID number or title of the
+     *                                 column to search
+     *  @return {p5.TableRow}
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   //find the animal named zebra
+     *   var row = table.findRow('Zebra', 'name');
+     *   //find the corresponding species
+     *   print(row.getString('species'));
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.findRow = function(value, column) {
+      // try the Object
+      if (typeof column === 'string') {
+        for (var i = 0; i < this.rows.length; i++) {
+          if (this.rows[i].obj[column] === value) {
+            return this.rows[i];
+          }
+        }
+      } else {
+        // try the Array
+        for (var j = 0; j < this.rows.length; j++) {
+          if (this.rows[j].arr[column] === value) {
+            return this.rows[j];
+          }
+        }
+      }
+      // otherwise...
+      return null;
+    };
+
+    /**
+     *  Finds the rows in the Table that contain the value
+     *  provided, and returns references to those rows. Returns an
+     *  Array, so for must be used to iterate through all the rows,
+     *  as shown in the example above. The column to search may be
+     *  specified by either its ID or title.
+     *
+     *  @method  findRows
+     *  @param  {String} value  The value to match
+     *  @param  {Integer|String} column ID number or title of the
+     *                                 column to search
+     *  @return {p5.TableRow[]}        An Array of TableRow objects
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   //add another goat
+     *   var newRow = table.addRow();
+     *   newRow.setString('id', table.getRowCount() - 1);
+     *   newRow.setString('species', 'Scape Goat');
+     *   newRow.setString('name', 'Goat');
+     *
+     *   //find the rows containing animals named Goat
+     *   var rows = table.findRows('Goat', 'name');
+     *   print(rows.length + ' Goats found');
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.findRows = function(value, column) {
+      var ret = [];
+      if (typeof column === 'string') {
+        for (var i = 0; i < this.rows.length; i++) {
+          if (this.rows[i].obj[column] === value) {
+            ret.push(this.rows[i]);
+          }
+        }
+      } else {
+        // try the Array
+        for (var j = 0; j < this.rows.length; j++) {
+          if (this.rows[j].arr[column] === value) {
+            ret.push(this.rows[j]);
+          }
+        }
+      }
+      return ret;
+    };
+
+    /**
+     *  Finds the first row in the Table that matches the regular
+     *  expression provided, and returns a reference to that row.
+     *  Even if multiple rows are possible matches, only the first
+     *  matching row is returned. The column to search may be
+     *  specified by either its ID or title.
+     *
+     *  @method  matchRow
+     *  @param  {String} regexp The regular expression to match
+     *  @param  {String|Integer} column The column ID (number) or
+     *                                   title (string)
+     *  @return {p5.TableRow}        TableRow object
+     */
+    p5.Table.prototype.matchRow = function(regexp, column) {
+      if (typeof column === 'number') {
+        for (var j = 0; j < this.rows.length; j++) {
+          if (this.rows[j].arr[column].match(regexp)) {
+            return this.rows[j];
+          }
+        }
+      } else {
+        for (var i = 0; i < this.rows.length; i++) {
+          if (this.rows[i].obj[column].match(regexp)) {
+            return this.rows[i];
+          }
+        }
+      }
+      return null;
+    };
+
+    /**
+     *  Finds the rows in the Table that match the regular expression provided,
+     *  and returns references to those rows. Returns an array, so for must be
+     *  used to iterate through all the rows, as shown in the example. The
+     *  column to search may be specified by either its ID or title.
+     *
+     *  @method  matchRows
+     *  @param  {String} regexp The regular expression to match
+     *  @param  {String|Integer} [column] The column ID (number) or
+     *                                   title (string)
+     *  @return {p5.TableRow[]}          An Array of TableRow objects
+     *  @example
+     *  var table;
+     *
+     *  function setup() {
+     *
+     *    table = new p5.Table();
+     *
+     *    table.addColumn('name');
+     *    table.addColumn('type');
+     *
+     *    var newRow = table.addRow();
+     *    newRow.setString('name', 'Lion');
+     *    newRow.setString('type', 'Mammal');
+     *
+     *    newRow = table.addRow();
+     *    newRow.setString('name', 'Snake');
+     *    newRow.setString('type', 'Reptile');
+     *
+     *    newRow = table.addRow();
+     *    newRow.setString('name', 'Mosquito');
+     *    newRow.setString('type', 'Insect');
+     *
+     *    newRow = table.addRow();
+     *    newRow.setString('name', 'Lizard');
+     *    newRow.setString('type', 'Reptile');
+     *
+     *    var rows = table.matchRows('R.*', 'type');
+     *    for (var i = 0; i < rows.length; i++) {
+     *      print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
+     *    }
+     *  }
+     *  // Sketch prints:
+     *  // Snake: Reptile
+     *  // Lizard: Reptile
+     */
+    p5.Table.prototype.matchRows = function(regexp, column) {
+      var ret = [];
+      if (typeof column === 'number') {
+        for (var j = 0; j < this.rows.length; j++) {
+          if (this.rows[j].arr[column].match(regexp)) {
+            ret.push(this.rows[j]);
+          }
+        }
+      } else {
+        for (var i = 0; i < this.rows.length; i++) {
+          if (this.rows[i].obj[column].match(regexp)) {
+            ret.push(this.rows[i]);
+          }
+        }
+      }
+      return ret;
+    };
+
+    /**
+     *  Retrieves all values in the specified column, and returns them
+     *  as an array. The column may be specified by either its ID or title.
+     *
+     *  @method  getColumn
+     *  @param  {String|Number} column String or Number of the column to return
+     *  @return {Array}       Array of column values
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   //getColumn returns an array that can be printed directly
+     *   print(table.getColumn('species'));
+     *   //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.getColumn = function(value) {
+      var ret = [];
+      if (typeof value === 'string') {
+        for (var i = 0; i < this.rows.length; i++) {
+          ret.push(this.rows[i].obj[value]);
+        }
+      } else {
+        for (var j = 0; j < this.rows.length; j++) {
+          ret.push(this.rows[j].arr[value]);
+        }
+      }
+      return ret;
+    };
+
+    /**
+     *  Removes all rows from a Table. While all rows are removed,
+     *  columns and column titles are maintained.
+     *
+     *  @method  clearRows
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   table.clearRows();
+     *   print(table.getRowCount() + ' total rows in table');
+     *   print(table.getColumnCount() + ' total columns in table');
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.clearRows = function() {
+      delete this.rows;
+      this.rows = [];
+    };
+
+    /**
+     *  Use addColumn() to add a new column to a Table object.
+     *  Typically, you will want to specify a title, so the column
+     *  may be easily referenced later by name. (If no title is
+     *  specified, the new column's title will be null.)
+     *
+     *  @method  addColumn
+     *  @param {String} [title] title of the given column
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   table.addColumn('carnivore');
+     *   table.set(0, 'carnivore', 'no');
+     *   table.set(1, 'carnivore', 'yes');
+     *   table.set(2, 'carnivore', 'no');
+     *
+     *   //print the results
+     *   for (var r = 0; r < table.getRowCount(); r++)
+     *     for (var c = 0; c < table.getColumnCount(); c++)
+     *       print(table.getString(r, c));
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.addColumn = function(title) {
+      var t = title || null;
+      this.columns.push(t);
+    };
+
+    /**
+     *  Returns the total number of columns in a Table.
+     *
+     *  @method  getColumnCount
+     *  @return {Integer} Number of columns in this table
+     */
+    p5.Table.prototype.getColumnCount = function() {
+      return this.columns.length;
+    };
+
+    /**
+     *  Returns the total number of rows in a Table.
+     *
+     *  @method  getRowCount
+     *  @return {Integer} Number of rows in this table
+     */
+    p5.Table.prototype.getRowCount = function() {
+      return this.rows.length;
+    };
+
+    /**
+     *  
Removes any of the specified characters (or "tokens").

+     *
+     *  
If no column is specified, then the values in all columns and
+     *  rows are processed. A specific column may be referenced by
+     *  either its ID or title.

+     *
+     *  @method  removeTokens
+     *  @param  {String} chars  String listing characters to be removed
+     *  @param  {String|Integer} [column] Column ID (number)
+     *                                   or name (string)
+     */
+    p5.Table.prototype.removeTokens = function(chars, column) {
+      var escape = function(s) {
+        return s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+      };
+      var charArray = [];
+      for (var i = 0; i < chars.length; i++) {
+        charArray.push(escape(chars.charAt(i)));
+      }
+      var regex = new RegExp(charArray.join('|'), 'g');
+
+      if (typeof column === 'undefined') {
+        for (var c = 0; c < this.columns.length; c++) {
+          for (var d = 0; d < this.rows.length; d++) {
+            var s = this.rows[d].arr[c];
+            s = s.replace(regex, '');
+            this.rows[d].arr[c] = s;
+            this.rows[d].obj[this.columns[c]] = s;
+          }
+        }
+      } else if (typeof column === 'string') {
+        for (var j = 0; j < this.rows.length; j++) {
+          var val = this.rows[j].obj[column];
+          val = val.replace(regex, '');
+          this.rows[j].obj[column] = val;
+          var pos = this.columns.indexOf(column);
+          this.rows[j].arr[pos] = val;
+        }
+      } else {
+        for (var k = 0; k < this.rows.length; k++) {
+          var str = this.rows[k].arr[column];
+          str = str.replace(regex, '');
+          this.rows[k].arr[column] = str;
+          this.rows[k].obj[this.columns[column]] = str;
+        }
+      }
+    };
+
+    /**
+     *  Trims leading and trailing whitespace, such as spaces and tabs,
+     *  from String table values. If no column is specified, then the
+     *  values in all columns and rows are trimmed. A specific column
+     *  may be referenced by either its ID or title.
+     *
+     *  @method  trim
+     *  @param  {String|Integer} [column] Column ID (number)
+     *                                   or name (string)
+     */
+    p5.Table.prototype.trim = function(column) {
+      var regex = new RegExp(' ', 'g');
+
+      if (typeof column === 'undefined') {
+        for (var c = 0; c < this.columns.length; c++) {
+          for (var d = 0; d < this.rows.length; d++) {
+            var s = this.rows[d].arr[c];
+            s = s.replace(regex, '');
+            this.rows[d].arr[c] = s;
+            this.rows[d].obj[this.columns[c]] = s;
+          }
+        }
+      } else if (typeof column === 'string') {
+        for (var j = 0; j < this.rows.length; j++) {
+          var val = this.rows[j].obj[column];
+          val = val.replace(regex, '');
+          this.rows[j].obj[column] = val;
+          var pos = this.columns.indexOf(column);
+          this.rows[j].arr[pos] = val;
+        }
+      } else {
+        for (var k = 0; k < this.rows.length; k++) {
+          var str = this.rows[k].arr[column];
+          str = str.replace(regex, '');
+          this.rows[k].arr[column] = str;
+          this.rows[k].obj[this.columns[column]] = str;
+        }
+      }
+    };
+
+    /**
+     *  Use removeColumn() to remove an existing column from a Table
+     *  object. The column to be removed may be identified by either
+     *  its title (a String) or its index value (an int).
+     *  removeColumn(0) would remove the first column, removeColumn(1)
+     *  would remove the second column, and so on.
+     *
+     *  @method  removeColumn
+     *  @param  {String|Integer} column columnName (string) or ID (number)
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   table.removeColumn('id');
+     *   print(table.getColumnCount());
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.removeColumn = function(c) {
+      var cString;
+      var cNumber;
+      if (typeof c === 'string') {
+        // find the position of c in the columns
+        cString = c;
+        cNumber = this.columns.indexOf(c);
+        console.log('string');
+      } else {
+        cNumber = c;
+        cString = this.columns[c];
+      }
+
+      var chunk = this.columns.splice(cNumber + 1, this.columns.length);
+      this.columns.pop();
+      this.columns = this.columns.concat(chunk);
+
+      for (var i = 0; i < this.rows.length; i++) {
+        var tempR = this.rows[i].arr;
+        var chip = tempR.splice(cNumber + 1, tempR.length);
+        tempR.pop();
+        this.rows[i].arr = tempR.concat(chip);
+        delete this.rows[i].obj[cString];
+      }
+    };
+
+    /**
+     * Stores a value in the Table's specified row and column.
+     * The row is specified by its ID, while the column may be specified
+     * by either its ID or title.
+     *
+     * @method  set
+     * @param {String|Integer} column column ID (Number)
+     *                               or title (String)
+     * @param {String|Number} value  value to assign
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   table.set(0, 'species', 'Canis Lupus');
+     *   table.set(0, 'name', 'Wolf');
+     *
+     *   //print the results
+     *   for (var r = 0; r < table.getRowCount(); r++)
+     *     for (var c = 0; c < table.getColumnCount(); c++)
+     *       print(table.getString(r, c));
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.set = function(row, column, value) {
+      this.rows[row].set(column, value);
+    };
+
+    /**
+     * Stores a Float value in the Table's specified row and column.
+     * The row is specified by its ID, while the column may be specified
+     * by either its ID or title.
+     *
+     * @method setNum
+     * @param {Integer} row row ID
+     * @param {String|Integer} column column ID (Number)
+     *                               or title (String)
+     * @param {Number} value  value to assign
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   table.setNum(1, 'id', 1);
+     *
+     *   print(table.getColumn(0));
+     *   //["0", 1, "2"]
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     */
+    p5.Table.prototype.setNum = function(row, column, value) {
+      this.rows[row].setNum(column, value);
+    };
+
+    /**
+     * Stores a String value in the Table's specified row and column.
+     * The row is specified by its ID, while the column may be specified
+     * by either its ID or title.
+     *
+     * @method  setString
+     * @param {Integer} row row ID
+     * @param {String|Integer} column column ID (Number)
+     *                               or title (String)
+     * @param {String} value  value to assign
+     */
+    p5.Table.prototype.setString = function(row, column, value) {
+      this.rows[row].setString(column, value);
+    };
+
+    /**
+     * Retrieves a value from the Table's specified row and column.
+     * The row is specified by its ID, while the column may be specified by
+     * either its ID or title.
+     *
+     * @method  get
+     * @param {Integer} row row ID
+     * @param  {String|Integer} column columnName (string) or
+     *                                   ID (number)
+     * @return {String|Number}
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   print(table.get(0, 1));
+     *   //Capra hircus
+     *   print(table.get(0, 'species'));
+     *   //Capra hircus
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.get = function(row, column) {
+      return this.rows[row].get(column);
+    };
+
+    /**
+     * Retrieves a Float value from the Table's specified row and column.
+     * The row is specified by its ID, while the column may be specified by
+     * either its ID or title.
+     *
+     * @method  getNum
+     * @param {Integer} row row ID
+     * @param  {String|Integer} column columnName (string) or
+     *                                   ID (number)
+     * @return {Number}
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   print(table.getNum(1, 0) + 100);
+     *   //id 1 + 100 = 101
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.getNum = function(row, column) {
+      return this.rows[row].getNum(column);
+    };
+
+    /**
+     * Retrieves a String value from the Table's specified row and column.
+     * The row is specified by its ID, while the column may be specified by
+     * either its ID or title.
+     *
+     * @method  getString
+     * @param {Integer} row row ID
+     * @param  {String|Integer} column columnName (string) or
+     *                                   ID (number)
+     * @return {String}
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   var tableArray = table.getArray();
+     *
+     *   //output each row as array
+     *   for (var i = 0; i < tableArray.length; i++) {
+     *     print(tableArray[i]);
+     *   }
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.getString = function(row, column) {
+      return this.rows[row].getString(column);
+    };
+
+    /**
+     * Retrieves all table data and returns as an object. If a column name is
+     * passed in, each row object will be stored with that attribute as its
+     * title.
+     *
+     * @method  getObject
+     * @param {String} [headerColumn] Name of the column which should be used to
+     *                              title each row object (optional)
+     * @return {Object}
+     *
+     * @example
+     * 

+     * 
+     * // Given the CSV file "mammals.csv"
+     * // in the project's "assets" folder:
+     * //
+     * // id,species,name
+     * // 0,Capra hircus,Goat
+     * // 1,Panthera pardus,Leopard
+     * // 2,Equus zebra,Zebra
+     *
+     * var table;
+     *
+     * function preload() {
+     *   //my table is comma separated value "csv"
+     *   //and has a header specifying the columns labels
+     *   table = loadTable('assets/mammals.csv', 'csv', 'header');
+     * }
+     *
+     * function setup() {
+     *   var tableObject = table.getObject();
+     *
+     *   print(tableObject);
+     *   //outputs an object
+     * }
+     * 
+     * 

+     *
+     *@alt
+     * no image displayed
+     *
+     */
+    p5.Table.prototype.getObject = function(headerColumn) {
+      var tableObject = {};
+      var obj, cPos, index;
+
+      for (var i = 0; i < this.rows.length; i++) {
+        obj = this.rows[i].obj;
+
+        if (typeof headerColumn === 'string') {
+          cPos = this.columns.indexOf(headerColumn); // index of columnID
+          if (cPos >= 0) {
+            index = obj[headerColumn];
+            tableObject[index] = obj;
+          } else {
+            throw 'This table has no column named "' + headerColumn + '"';
+          }
+        } else {
+          tableObject[i] = this.rows[i].obj;
+        }
+      }
+      return tableObject;
+    };
+
+    /**
+     * Retrieves all table data and returns it as a multidimensional array.
+     *
+     * @method  getArray
+     * @return {Array}
+     */
+    p5.Table.prototype.getArray = function() {
+      var tableArray = [];
+      for (var i = 0; i < this.rows.length; i++) {
+        tableArray.push(this.rows[i].arr);
+      }
+      return tableArray;
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],48:[function(_dereq_,module,exports){
+    /**
+     * @module IO
+     * @submodule Table
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     *  A TableRow object represents a single row of data values,
+     *  stored in columns, from a table.
+     *
+     *  A Table Row contains both an ordered array, and an unordered
+     *  JSON object.
+     *
+     *  @class p5.TableRow
+     *  @constructor
+     *  @param {String} [str]       optional: populate the row with a
+     *                              string of values, separated by the
+     *                              separator
+     *  @param {String} [separator] comma separated values (csv) by default
+     */
+    p5.TableRow = function(str, separator) {
+      var arr = [];
+      var obj = {};
+      if (str) {
+        separator = separator || ',';
+        arr = str.split(separator);
+      }
+      for (var i = 0; i < arr.length; i++) {
+        var key = i;
+        var val = arr[i];
+        obj[key] = val;
+      }
+      this.arr = arr;
+      this.obj = obj;
+      this.table = null;
+      this.name = 'p5.TableRow'; // for friendly debugger system
+    };
+
+    /**
+     *  Stores a value in the TableRow's specified column.
+     *  The column may be specified by either its ID or title.
+     *
+     *  @method  set
+     *  @param {String|Integer} column Column ID (Number)
+     *                                or Title (String)
+     *  @param {String|Number} value  The value to be stored
+     */
+    p5.TableRow.prototype.set = function(column, value) {
+      // if typeof column is string, use .obj
+      if (typeof column === 'string') {
+        var cPos = this.table.columns.indexOf(column); // index of columnID
+        if (cPos >= 0) {
+          this.obj[column] = value;
+          this.arr[cPos] = value;
+        } else {
+          throw 'This table has no column named "' + column + '"';
+        }
+      } else {
+        // if typeof column is number, use .arr
+        if (column < this.table.columns.length) {
+          this.arr[column] = value;
+          var cTitle = this.table.columns[column];
+          this.obj[cTitle] = value;
+        } else {
+          throw 'Column #' + column + ' is out of the range of this table';
+        }
+      }
+    };
+
+    /**
+     *  Stores a Float value in the TableRow's specified column.
+     *  The column may be specified by either its ID or title.
+     *
+     *  @method  setNum
+     *  @param {String|Integer} column Column ID (Number)
+     *                                or Title (String)
+     *  @param {Number} value  The value to be stored
+     *                                as a Float
+     */
+    p5.TableRow.prototype.setNum = function(column, value) {
+      var floatVal = parseFloat(value);
+      this.set(column, floatVal);
+    };
+
+    /**
+     *  Stores a String value in the TableRow's specified column.
+     *  The column may be specified by either its ID or title.
+     *
+     *  @method  setString
+     *  @param {String|Integer} column Column ID (Number)
+     *                                or Title (String)
+     *  @param {String} value  The value to be stored
+     *                                as a String
+     */
+    p5.TableRow.prototype.setString = function(column, value) {
+      var stringVal = value.toString();
+      this.set(column, stringVal);
+    };
+
+    /**
+     *  Retrieves a value from the TableRow's specified column.
+     *  The column may be specified by either its ID or title.
+     *
+     *  @method  get
+     *  @param  {String|Integer} column columnName (string) or
+     *                                   ID (number)
+     *  @return {String|Number}
+     */
+    p5.TableRow.prototype.get = function(column) {
+      if (typeof column === 'string') {
+        return this.obj[column];
+      } else {
+        return this.arr[column];
+      }
+    };
+
+    /**
+     *  Retrieves a Float value from the TableRow's specified
+     *  column. The column may be specified by either its ID or
+     *  title.
+     *
+     *  @method  getNum
+     *  @param  {String|Integer} column columnName (string) or
+     *                                   ID (number)
+     *  @return {Number}  Float Floating point number
+     */
+    p5.TableRow.prototype.getNum = function(column) {
+      var ret;
+      if (typeof column === 'string') {
+        ret = parseFloat(this.obj[column]);
+      } else {
+        ret = parseFloat(this.arr[column]);
+      }
+
+      if (ret.toString() === 'NaN') {
+        throw 'Error: ' + this.obj[column] + ' is NaN (Not a Number)';
+      }
+      return ret;
+    };
+
+    /**
+     *  Retrieves an String value from the TableRow's specified
+     *  column. The column may be specified by either its ID or
+     *  title.
+     *
+     *  @method  getString
+     *  @param  {String|Integer} column columnName (string) or
+     *                                   ID (number)
+     *  @return {String}  String
+     */
+    p5.TableRow.prototype.getString = function(column) {
+      if (typeof column === 'string') {
+        return this.obj[column].toString();
+      } else {
+        return this.arr[column].toString();
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],49:[function(_dereq_,module,exports){
+    /**
+     * @module IO
+     * @submodule XML
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * XML is a representation of an XML object, able to parse XML code. Use
+     * loadXML() to load external XML files and create XML objects.
+     *
+     * @class p5.XML
+     * @constructor
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var children = xml.getChildren('animal');
+     *
+     *   for (var i = 0; i < children.length; i++) {
+     *     var id = children[i].getNum('id');
+     *     var coloring = children[i].getString('species');
+     *     var name = children[i].getContent();
+     *     print(id + ', ' + coloring + ', ' + name);
+     *   }
+     * }
+     *
+     * // Sketch prints:
+     * // 0, Capra hircus, Goat
+     * // 1, Panthera pardus, Leopard
+     * // 2, Equus zebra, Zebra
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.XML = function() {
+      this.name = null; //done
+      this.attributes = {}; //done
+      this.children = [];
+      this.parent = null;
+      this.content = null; //done
+      this.name = 'p5.XML'; // for friendly debugger system
+    };
+
+    /**
+     * Gets a copy of the element's parent. Returns the parent as another
+     * p5.XML object.
+     *
+     * @method getParent
+     * @return {p5.XML}   element parent
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var children = xml.getChildren('animal');
+     *   var parent = children[1].getParent();
+     *   print(parent.getName());
+     * }
+     *
+     * // Sketch prints:
+     * // mammals
+     * 

+     */
+    p5.XML.prototype.getParent = function() {
+      return this.parent;
+    };
+
+    /**
+     *  Gets the element's full name, which is returned as a String.
+     *
+     * @method getName
+     * @return {String} the name of the node
+     * @example<animal
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   print(xml.getName());
+     * }
+     *
+     * // Sketch prints:
+     * // mammals
+     * 

+     */
+    p5.XML.prototype.getName = function() {
+      return this.name;
+    };
+
+    /**
+     * Sets the element's name, which is specified as a String.
+     *
+     * @method setName
+     * @param {String} the new name of the node
+     * @example<animal
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   print(xml.getName());
+     *   xml.setName('fish');
+     *   print(xml.getName());
+     * }
+     *
+     * // Sketch prints:
+     * // mammals
+     * // fish
+     * 

+     */
+    p5.XML.prototype.setName = function(name) {
+      this.name = name;
+    };
+
+    /**
+     * Checks whether or not the element has any children, and returns the result
+     * as a boolean.
+     *
+     * @method hasChildren
+     * @return {boolean}
+     * @example<animal
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   print(xml.hasChildren());
+     * }
+     *
+     * // Sketch prints:
+     * // true
+     * 

+     */
+    p5.XML.prototype.hasChildren = function() {
+      return this.children.length > 0;
+    };
+
+    /**
+     * Get the names of all of the element's children, and returns the names as an
+     * array of Strings. This is the same as looping through and calling getName()
+     * on each child element individually.
+     *
+     * @method listChildren
+     * @return {String[]} names of the children of the element
+     * @example<animal
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   print(xml.listChildren());
+     * }
+     *
+     * // Sketch prints:
+     * // ["animal", "animal", "animal"]
+     * 

+     */
+    p5.XML.prototype.listChildren = function() {
+      return this.children.map(function(c) {
+        return c.name;
+      });
+    };
+
+    /**
+     * Returns all of the element's children as an array of p5.XML objects. When
+     * the name parameter is specified, then it will return all children that match
+     * that name.
+     *
+     * @method getChildren
+     * @param {String} [name] element name
+     * @return {p5.XML[]} children of the element
+     * @example<animal
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var animals = xml.getChildren('animal');
+     *
+     *   for (var i = 0; i < animals.length; i++) {
+     *     print(animals[i].getContent());
+     *   }
+     * }
+     *
+     * // Sketch prints:
+     * // "Goat"
+     * // "Leopard"
+     * // "Zebra"
+     * 

+     */
+    p5.XML.prototype.getChildren = function(param) {
+      if (param) {
+        return this.children.filter(function(c) {
+          return c.name === param;
+        });
+      } else {
+        return this.children;
+      }
+    };
+
+    /**
+     * Returns the first of the element's children that matches the name parameter
+     * or the child of the given index.It returns undefined if no matching
+     * child is found.
+     *
+     * @method getChild
+     * @param {String|Integer} name element name or index
+     * @return {p5.XML}
+     * @example<animal
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var firstChild = xml.getChild('animal');
+     *   print(firstChild.getContent());
+     * }
+     *
+     * // Sketch prints:
+     * // "Goat"
+     * 

+     * 

+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var secondChild = xml.getChild(1);
+     *   print(secondChild.getContent());
+     * }
+     *
+     * // Sketch prints:
+     * // "Leopard"
+     * 

+     */
+    p5.XML.prototype.getChild = function(param) {
+      if (typeof param === 'string') {
+        return this.children.find(function(c) {
+          return c.name === param;
+        });
+      } else {
+        return this.children[param];
+      }
+    };
+
+    /**
+     * Appends a new child to the element. The child can be specified with
+     * either a String, which will be used as the new tag's name, or as a
+     * reference to an existing p5.XML object.
+     * A reference to the newly created child is returned as an p5.XML object.
+     *
+     * @method addChild
+     * @param {p5.XML} a p5.XML Object which will be the child to be added
+     */
+    p5.XML.prototype.addChild = function(node) {
+      if (node instanceof p5.XML) {
+        this.children.push(node);
+      } else {
+        // PEND
+      }
+    };
+
+    /**
+     * Removes the element specified by name or index.
+     *
+     * @method removeChild
+     * @param {String|Integer} name element name or index
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   xml.removeChild('animal');
+     *   var children = xml.getChildren();
+     *   for (var i = 0; i < children.length; i++) {
+     *     print(children[i].getContent());
+     *   }
+     * }
+     *
+     * // Sketch prints:
+     * // "Leopard"
+     * // "Zebra"
+     * 

+     * 

+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   xml.removeChild(1);
+     *   var children = xml.getChildren();
+     *   for (var i = 0; i < children.length; i++) {
+     *     print(children[i].getContent());
+     *   }
+     * }
+     *
+     * // Sketch prints:
+     * // "Goat"
+     * // "Zebra"
+     * 

+     */
+    p5.XML.prototype.removeChild = function(param) {
+      var ind = -1;
+      if (typeof param === 'string') {
+        for (var i = 0; i < this.children.length; i++) {
+          if (this.children[i].name === param) {
+            ind = i;
+            break;
+          }
+        }
+      } else {
+        ind = param;
+      }
+      if (ind !== -1) {
+        this.children.splice(ind, 1);
+      }
+    };
+
+    /**
+     * Counts the specified element's number of attributes, returned as an Number.
+     *
+     * @method getAttributeCount
+     * @return {Integer}
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var firstChild = xml.getChild('animal');
+     *   print(firstChild.getAttributeCount());
+     * }
+     *
+     * // Sketch prints:
+     * // 2
+     * 

+     */
+    p5.XML.prototype.getAttributeCount = function() {
+      return Object.keys(this.attributes).length;
+    };
+
+    /**
+     * Gets all of the specified element's attributes, and returns them as an
+     * array of Strings.
+     *
+     * @method listAttributes
+     * @return {String[]} an array of strings containing the names of attributes
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var firstChild = xml.getChild('animal');
+     *   print(firstChild.listAttributes());
+     * }
+     *
+     * // Sketch prints:
+     * // ["id", "species"]
+     * 

+     */
+    p5.XML.prototype.listAttributes = function() {
+      return Object.keys(this.attributes);
+    };
+
+    /**
+     *  Checks whether or not an element has the specified attribute.
+     *
+     * @method hasAttribute
+     * @param {String} the attribute to be checked
+     * @return {boolean} true if attribute found else false
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var firstChild = xml.getChild('animal');
+     *   print(firstChild.hasAttribute('species'));
+     *   print(firstChild.hasAttribute('color'));
+     * }
+     *
+     * // Sketch prints:
+     * // true
+     * // false
+     * 

+     */
+    p5.XML.prototype.hasAttribute = function(name) {
+      return this.attributes[name] ? true : false;
+    };
+
+    /**
+     * Returns an attribute value of the element as an Number. If the defaultValue
+     * parameter is specified and the attribute doesn't exist, then defaultValue
+     * is returned. If no defaultValue is specified and the attribute doesn't
+     * exist, the value 0 is returned.
+     *
+     * @method getNum
+     * @param {String} name            the non-null full name of the attribute
+     * @param {Number} [defaultValue]  the default value of the attribute
+     * @return {Number}
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var firstChild = xml.getChild('animal');
+     *   print(firstChild.getNum('id'));
+     * }
+     *
+     * // Sketch prints:
+     * // 0
+     * 

+     */
+    p5.XML.prototype.getNum = function(name, defaultValue) {
+      return Number(this.attributes[name]) || defaultValue || 0;
+    };
+
+    /**
+     * Returns an attribute value of the element as an String. If the defaultValue
+     * parameter is specified and the attribute doesn't exist, then defaultValue
+     * is returned. If no defaultValue is specified and the attribute doesn't
+     * exist, null is returned.
+     *
+     * @method getString
+     * @param {String} name            the non-null full name of the attribute
+     * @param {Number} [defaultValue]  the default value of the attribute
+     * @return {Number}
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var firstChild = xml.getChild('animal');
+     *   print(firstChild.getString('species'));
+     * }
+     *
+     * // Sketch prints:
+     * // "Capra hircus"
+     * 

+     */
+    p5.XML.prototype.getString = function(name, defaultValue) {
+      return String(this.attributes[name]) || defaultValue || null;
+    };
+
+    /**
+     * Sets the content of an element's attribute. The first parameter specifies
+     * the attribute name, while the second specifies the new content.
+     *
+     * @method setAttribute
+     * @param {String} name            the full name of the attribute
+     * @param {Number} value           the value of the attribute
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var firstChild = xml.getChild('animal');
+     *   print(firstChild.getString('species'));
+     *   firstChild.setAttribute('species', 'Jamides zebra');
+     *   print(firstChild.getString('species'));
+     * }
+     *
+     * // Sketch prints:
+     * // "Capra hircus"
+     * // "Jamides zebra"
+     * 

+     */
+    p5.XML.prototype.setAttribute = function(name, value) {
+      if (this.attributes[name]) {
+        this.attributes[name] = value;
+      }
+    };
+
+    /**
+     * Returns the content of an element. If there is no such content,
+     * defaultValue is returned if specified, otherwise null is returned.
+     *
+     * @method getContent
+     * @param {String} [defaultValue] value returned if no content is found
+     * @return {String}
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var firstChild = xml.getChild('animal');
+     *   print(firstChild.getContent());
+     * }
+     *
+     * // Sketch prints:
+     * // "Goat"
+     * 

+     */
+    p5.XML.prototype.getContent = function(defaultValue) {
+      return this.content || defaultValue || null;
+    };
+
+    /**
+     * Sets the element's content.
+     *
+     * @method setContent
+     * @param {String} text the new content
+     * @example
+     * 

+     * // The following short XML file called "mammals.xml" is parsed
+     * // in the code below.
+     * //
+     * // 
+     * // <mammals>
+     * //   <animal id="0" species="Capra hircus">Goat</animal>
+     * //   <animal id="1" species="Panthera pardus">Leopard</animal>
+     * //   <animal id="2" species="Equus zebra">Zebra</animal>
+     * // </mammals>
+     *
+     * var xml;
+     *
+     * function preload() {
+     *   xml = loadXML('assets/mammals.xml');
+     * }
+     *
+     * function setup() {
+     *   var firstChild = xml.getChild('animal');
+     *   print(firstChild.getContent());
+     *   firstChild.setContent('Mountain Goat');
+     *   print(firstChild.getContent());
+     * }
+     *
+     * // Sketch prints:
+     * // "Goat"
+     * // "Mountain Goat"
+     * 

+     */
+    p5.XML.prototype.setContent = function(content) {
+      if (!this.children.length) {
+        this.content = content;
+      }
+    };
+
+    /* HELPERS */
+    /**
+     * This method is called while the parsing of XML (when loadXML() is
+     * called). The difference between this method and the setContent()
+     * method defined later is that this one is used to set the content
+     * when the node in question has more nodes under it and so on and
+     * not directly text content. While in the other one is used when
+     * the node in question directly has text inside it.
+     *
+     */
+    p5.XML.prototype._setCont = function(content) {
+      var str;
+      str = content;
+      str = str.replace(/\s\s+/g, ',');
+      //str = str.split(',');
+      this.content = str;
+    };
+
+    /**
+     * This method is called while the parsing of XML (when loadXML() is
+     * called). The XML node is passed and its attributes are stored in the
+     * p5.XML's attribute Object.
+     *
+     */
+    p5.XML.prototype._setAttributes = function(node) {
+      var i,
+        att = {};
+      for (i = 0; i < node.attributes.length; i++) {
+        att[node.attributes[i].nodeName] = node.attributes[i].nodeValue;
+      }
+      this.attributes = att;
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],50:[function(_dereq_,module,exports){
+    /**
+     * @module Math
+     * @submodule Calculation
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Calculates the absolute value (magnitude) of a number. Maps to Math.abs().
+     * The absolute value of a number is always positive.
+     *
+     * @method abs
+     * @param  {Number} n number to compute
+     * @return {Number}   absolute value of given number
+     * @example
+     * 

+     * function setup() {
+     *   var x = -3;
+     *   var y = abs(x);
+     *
+     *   print(x); // -3
+     *   print(y); // 3
+     * }
+     * 

+     *
+     * @alt
+     * no image displayed
+     *
+     */
+    p5.prototype.abs = Math.abs;
+
+    /**
+     * Calculates the closest int value that is greater than or equal to the
+     * value of the parameter. Maps to Math.ceil(). For example, ceil(9.03)
+     * returns the value 10.
+     *
+     * @method ceil
+     * @param  {Number} n number to round up
+     * @return {Integer}   rounded up number
+     * @example
+     * 

+     * function draw() {
+     *   background(200);
+     *   // map, mouseX between 0 and 5.
+     *   var ax = map(mouseX, 0, 100, 0, 5);
+     *   var ay = 66;
+     *
+     *   //Get the ceiling of the mapped number.
+     *   var bx = ceil(map(mouseX, 0, 100, 0, 5));
+     *   var by = 33;
+     *
+     *   // Multiply the mapped numbers by 20 to more easily
+     *   // see the changes.
+     *   stroke(0);
+     *   fill(0);
+     *   line(0, ay, ax * 20, ay);
+     *   line(0, by, bx * 20, by);
+     *
+     *   // Reformat the float returned by map and draw it.
+     *   noStroke();
+     *   text(nfc(ax, 2), ax, ay - 5);
+     *   text(nfc(bx, 1), bx, by - 5);
+     * }
+     * 

+     *
+     * @alt
+     * 2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals
+     *
+     */
+    p5.prototype.ceil = Math.ceil;
+
+    /**
+     * Constrains a value between a minimum and maximum value.
+     *
+     * @method constrain
+     * @param  {Number} n    number to constrain
+     * @param  {Number} low  minimum limit
+     * @param  {Number} high maximum limit
+     * @return {Number}      constrained number
+     * @example
+     * 

+     * function draw() {
+     *   background(200);
+     *
+     *   var leftWall = 25;
+     *   var rightWall = 75;
+     *
+     *   // xm is just the mouseX, while
+     *   // xc is the mouseX, but constrained
+     *   // between the leftWall and rightWall!
+     *   var xm = mouseX;
+     *   var xc = constrain(mouseX, leftWall, rightWall);
+     *
+     *   // Draw the walls.
+     *   stroke(150);
+     *   line(leftWall, 0, leftWall, height);
+     *   line(rightWall, 0, rightWall, height);
+     *
+     *   // Draw xm and xc as circles.
+     *   noStroke();
+     *   fill(150);
+     *   ellipse(xm, 33, 9, 9); // Not Constrained
+     *   fill(0);
+     *   ellipse(xc, 66, 9, 9); // Constrained
+     * }
+     * 

+     *
+     * @alt
+     * 2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines
+     *
+     */
+    p5.prototype.constrain = function(n, low, high) {
+      p5._validateParameters('constrain', arguments);
+      return Math.max(Math.min(n, high), low);
+    };
+
+    /**
+     * Calculates the distance between two points.
+     *
+     * @method dist
+     * @param  {Number} x1 x-coordinate of the first point
+     * @param  {Number} y1 y-coordinate of the first point
+     * @param  {Number} x2 x-coordinate of the second point
+     * @param  {Number} y2 y-coordinate of the second point
+     * @return {Number}    distance between the two points
+     *
+     * @example
+     * 

+     * // Move your mouse inside the canvas to see the
+     * // change in distance between two points!
+     * function draw() {
+     *   background(200);
+     *   fill(0);
+     *
+     *   var x1 = 10;
+     *   var y1 = 90;
+     *   var x2 = mouseX;
+     *   var y2 = mouseY;
+     *
+     *   line(x1, y1, x2, y2);
+     *   ellipse(x1, y1, 7, 7);
+     *   ellipse(x2, y2, 7, 7);
+     *
+     *   // d is the length of the line
+     *   // the distance from point 1 to point 2.
+     *   var d = int(dist(x1, y1, x2, y2));
+     *
+     *   // Let's write d along the line we are drawing!
+     *   push();
+     *   translate((x1 + x2) / 2, (y1 + y2) / 2);
+     *   rotate(atan2(y2 - y1, x2 - x1));
+     *   text(nfc(d, 1), 0, -5);
+     *   pop();
+     *   // Fancy!
+     * }
+     * 

+     *
+     * @alt
+     * 2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.
+     */
+    /**
+     * @method dist
+     * @param  {Number} x1
+     * @param  {Number} y1
+     * @param  {Number} z1 z-coordinate of the first point
+     * @param  {Number} x2
+     * @param  {Number} y2
+     * @param  {Number} z2 z-coordinate of the second point
+     * @return {Number}    distance between the two points
+     */
+    p5.prototype.dist = function() {
+      p5._validateParameters('dist', arguments);
+      if (arguments.length === 4) {
+        //2D
+        return hypot(arguments[2] - arguments[0], arguments[3] - arguments[1]);
+      } else if (arguments.length === 6) {
+        //3D
+        return hypot(
+          arguments[3] - arguments[0],
+          arguments[4] - arguments[1],
+          arguments[5] - arguments[2]
+        );
+      }
+    };
+
+    /**
+     * Returns Euler's number e (2.71828...) raised to the power of the n
+     * parameter. Maps to Math.exp().
+     *
+     * @method exp
+     * @param  {Number} n exponent to raise
+     * @return {Number}   e^n
+     * @example
+     * 

+     * function draw() {
+     *   background(200);
+     *
+     *   // Compute the exp() function with a value between 0 and 2
+     *   var xValue = map(mouseX, 0, width, 0, 2);
+     *   var yValue = exp(xValue);
+     *
+     *   var y = map(yValue, 0, 8, height, 0);
+     *
+     *   var legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
+     *   stroke(150);
+     *   line(mouseX, y, mouseX, height);
+     *   fill(0);
+     *   text(legend, 5, 15);
+     *   noStroke();
+     *   ellipse(mouseX, y, 7, 7);
+     *
+     *   // Draw the exp(x) curve,
+     *   // over the domain of x from 0 to 2
+     *   noFill();
+     *   stroke(0);
+     *   beginShape();
+     *   for (var x = 0; x < width; x++) {
+     *     xValue = map(x, 0, width, 0, 2);
+     *     yValue = exp(xValue);
+     *     y = map(yValue, 0, 8, height, 0);
+     *     vertex(x, y);
+     *   }
+     *
+     *   endShape();
+     *   line(0, 0, 0, height);
+     *   line(0, height - 1, width, height - 1);
+     * }
+     * 

+     *
+     * @alt
+     * ellipse moves along a curve with mouse x. e^n displayed.
+     *
+     */
+    p5.prototype.exp = Math.exp;
+
+    /**
+     * Calculates the closest int value that is less than or equal to the
+     * value of the parameter. Maps to Math.floor().
+     *
+     * @method floor
+     * @param  {Number} n number to round down
+     * @return {Integer}  rounded down number
+     * @example
+     * 

+     * function draw() {
+     *   background(200);
+     *   //map, mouseX between 0 and 5.
+     *   var ax = map(mouseX, 0, 100, 0, 5);
+     *   var ay = 66;
+     *
+     *   //Get the floor of the mapped number.
+     *   var bx = floor(map(mouseX, 0, 100, 0, 5));
+     *   var by = 33;
+     *
+     *   // Multiply the mapped numbers by 20 to more easily
+     *   // see the changes.
+     *   stroke(0);
+     *   fill(0);
+     *   line(0, ay, ax * 20, ay);
+     *   line(0, by, bx * 20, by);
+     *
+     *   // Reformat the float returned by map and draw it.
+     *   noStroke();
+     *   text(nfc(ax, 2), ax, ay - 5);
+     *   text(nfc(bx, 1), bx, by - 5);
+     * }
+     * 

+     *
+     * @alt
+     * 2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals
+     *
+     */
+    p5.prototype.floor = Math.floor;
+
+    /**
+     * Calculates a number between two numbers at a specific increment. The amt
+     * parameter is the amount to interpolate between the two values where 0.0
+     * equal to the first point, 0.1 is very near the first point, 0.5 is
+     * half-way in between, etc. The lerp function is convenient for creating
+     * motion along a straight path and for drawing dotted lines.
+     *
+     * @method lerp
+     * @param  {Number} start first value
+     * @param  {Number} stop  second value
+     * @param  {Number} amt   number between 0.0 and 1.0
+     * @return {Number}       lerped value
+     * @example
+     * 

+     * function setup() {
+     *   background(200);
+     *   var a = 20;
+     *   var b = 80;
+     *   var c = lerp(a, b, 0.2);
+     *   var d = lerp(a, b, 0.5);
+     *   var e = lerp(a, b, 0.8);
+     *
+     *   var y = 50;
+     *
+     *   strokeWeight(5);
+     *   stroke(0); // Draw the original points in black
+     *   point(a, y);
+     *   point(b, y);
+     *
+     *   stroke(100); // Draw the lerp points in gray
+     *   point(c, y);
+     *   point(d, y);
+     *   point(e, y);
+     * }
+     * 

+     *
+     * @alt
+     * 5 points horizontally staggered mid-canvas. mid 3 are grey, outer black
+     *
+     */
+    p5.prototype.lerp = function(start, stop, amt) {
+      p5._validateParameters('lerp', arguments);
+      return amt * (stop - start) + start;
+    };
+
+    /**
+     * Calculates the natural logarithm (the base-e logarithm) of a number. This
+     * function expects the n parameter to be a value greater than 0.0. Maps to
+     * Math.log().
+     *
+     * @method log
+     * @param  {Number} n number greater than 0
+     * @return {Number}   natural logarithm of n
+     * @example
+     * 

+     * function draw() {
+     *   background(200);
+     *   var maxX = 2.8;
+     *   var maxY = 1.5;
+     *
+     *   // Compute the natural log of a value between 0 and maxX
+     *   var xValue = map(mouseX, 0, width, 0, maxX);
+     *   if (xValue > 0) {
+        // Cannot take the log of a negative number.
+     *     var yValue = log(xValue);
+     *     var y = map(yValue, -maxY, maxY, height, 0);
+     *
+     *     // Display the calculation occurring.
+     *     var legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
+     *     stroke(150);
+     *     line(mouseX, y, mouseX, height);
+     *     fill(0);
+     *     text(legend, 5, 15);
+     *     noStroke();
+     *     ellipse(mouseX, y, 7, 7);
+     *   }
+     *
+     *   // Draw the log(x) curve,
+     *   // over the domain of x from 0 to maxX
+     *   noFill();
+     *   stroke(0);
+     *   beginShape();
+     *   for (var x = 0; x < width; x++) {
+     *     xValue = map(x, 0, width, 0, maxX);
+     *     yValue = log(xValue);
+     *     y = map(yValue, -maxY, maxY, height, 0);
+     *     vertex(x, y);
+     *   }
+     *   endShape();
+     *   line(0, 0, 0, height);
+     *   line(0, height / 2, width, height / 2);
+     * }
+     * 

+     *
+     * @alt
+     * ellipse moves along a curve with mouse x. natural logarithm of n displayed.
+     *
+     */
+    p5.prototype.log = Math.log;
+
+    /**
+     * Calculates the magnitude (or length) of a vector. A vector is a direction
+     * in space commonly used in computer graphics and linear algebra. Because it
+     * has no "start" position, the magnitude of a vector can be thought of as
+     * the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is
+     * a shortcut for writing dist(0, 0, x, y).
+     *
+     * @method mag
+     * @param  {Number} a first value
+     * @param  {Number} b second value
+     * @return {Number}   magnitude of vector from (0,0) to (a,b)
+     * @example
+     * 

+     * function setup() {
+     *   var x1 = 20;
+     *   var x2 = 80;
+     *   var y1 = 30;
+     *   var y2 = 70;
+     *
+     *   line(0, 0, x1, y1);
+     *   print(mag(x1, y1)); // Prints "36.05551275463989"
+     *   line(0, 0, x2, y1);
+     *   print(mag(x2, y1)); // Prints "85.44003745317531"
+     *   line(0, 0, x1, y2);
+     *   print(mag(x1, y2)); // Prints "72.80109889280519"
+     *   line(0, 0, x2, y2);
+     *   print(mag(x2, y2)); // Prints "106.3014581273465"
+     * }
+     * 

+     *
+     * @alt
+     * 4 lines of different length radiate from top left of canvas.
+     *
+     */
+    p5.prototype.mag = function(x, y) {
+      p5._validateParameters('mag', arguments);
+      return hypot(x, y);
+    };
+
+    /**
+     * Re-maps a number from one range to another.
+     * 


+     * In the first example above, the number 25 is converted from a value in the
+     * range of 0 to 100 into a value that ranges from the left edge of the
+     * window (0) to the right edge (width).
+     *
+     * @method map
+     * @param  {Number} value  the incoming value to be converted
+     * @param  {Number} start1 lower bound of the value's current range
+     * @param  {Number} stop1  upper bound of the value's current range
+     * @param  {Number} start2 lower bound of the value's target range
+     * @param  {Number} stop2  upper bound of the value's target range
+     * @param  {Boolean} [withinBounds] constrain the value to the newly mapped range
+     * @return {Number}        remapped number
+     * @example
+     *   

+     * var value = 25;
+     * var m = map(value, 0, 100, 0, width);
+     * ellipse(m, 50, 10, 10);
+    

+     *
+     *   

+     * function setup() {
+     *   noStroke();
+     * }
+     *
+     * function draw() {
+     *   background(204);
+     *   var x1 = map(mouseX, 0, width, 25, 75);
+     *   ellipse(x1, 25, 25, 25);
+     *   //This ellipse is constrained to the 0-100 range
+     *   //after setting withinBounds to true
+     *   var x2 = map(mouseX, 0, width, 0, 100, true);
+     *   ellipse(x2, 75, 25, 25);
+     * }
+    

+     *
+     * @alt
+     * 10 by 10 white ellipse with in mid left canvas
+     * 2 25 by 25 white ellipses move with mouse x. Bottom has more range from X
+     *
+     */
+    p5.prototype.map = function(n, start1, stop1, start2, stop2, withinBounds) {
+      p5._validateParameters('map', arguments);
+      var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+      if (!withinBounds) {
+        return newval;
+      }
+      if (start2 < stop2) {
+        return this.constrain(newval, start2, stop2);
+      } else {
+        return this.constrain(newval, stop2, start2);
+      }
+    };
+
+    /**
+     * Determines the largest value in a sequence of numbers, and then returns
+     * that value. max() accepts any number of Number parameters, or an Array
+     * of any length.
+     *
+     * @method max
+     * @param  {Number} n0 Number to compare
+     * @param  {Number} n1 Number to compare
+     * @return {Number}             maximum Number
+     * @example
+     * 

+     * function setup() {
+     *   // Change the elements in the array and run the sketch
+     *   // to show how max() works!
+     *   var numArray = [2, 1, 5, 4, 8, 9];
+     *   fill(0);
+     *   noStroke();
+     *   text('Array Elements', 0, 10);
+     *   // Draw all numbers in the array
+     *   var spacing = 15;
+     *   var elemsY = 25;
+     *   for (var i = 0; i < numArray.length; i++) {
+     *     text(numArray[i], i * spacing, elemsY);
+     *   }
+     *   var maxX = 33;
+     *   var maxY = 80;
+     *   // Draw the Maximum value in the array.
+     *   textSize(32);
+     *   text(max(numArray), maxX, maxY);
+     * }
+     * 

+     *
+     * @alt
+     * Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9
+     *
+     */
+    /**
+     * @method max
+     * @param  {Number[]} nums Numbers to compare
+     * @return {Number}
+     */
+    p5.prototype.max = function() {
+      p5._validateParameters('max', arguments);
+      if (arguments[0] instanceof Array) {
+        return Math.max.apply(null, arguments[0]);
+      } else {
+        return Math.max.apply(null, arguments);
+      }
+    };
+
+    /**
+     * Determines the smallest value in a sequence of numbers, and then returns
+     * that value. min() accepts any number of Number parameters, or an Array
+     * of any length.
+     *
+     * @method min
+     * @param  {Number} n0 Number to compare
+     * @param  {Number} n1 Number to compare
+     * @return {Number}             minimum Number
+     * @example
+     * 

+     * function setup() {
+     *   // Change the elements in the array and run the sketch
+     *   // to show how min() works!
+     *   var numArray = [2, 1, 5, 4, 8, 9];
+     *   fill(0);
+     *   noStroke();
+     *   text('Array Elements', 0, 10);
+     *   // Draw all numbers in the array
+     *   var spacing = 15;
+     *   var elemsY = 25;
+     *   for (var i = 0; i < numArray.length; i++) {
+     *     text(numArray[i], i * spacing, elemsY);
+     *   }
+     *   var maxX = 33;
+     *   var maxY = 80;
+     *   // Draw the Minimum value in the array.
+     *   textSize(32);
+     *   text(min(numArray), maxX, maxY);
+     * }
+     * 

+     *
+     * @alt
+     * Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1
+     *
+     */
+    /**
+     * @method min
+     * @param  {Number[]} nums Numbers to compare
+     * @return {Number}
+     */
+    p5.prototype.min = function() {
+      p5._validateParameters('min', arguments);
+      if (arguments[0] instanceof Array) {
+        return Math.min.apply(null, arguments[0]);
+      } else {
+        return Math.min.apply(null, arguments);
+      }
+    };
+
+    /**
+     * Normalizes a number from another range into a value between 0 and 1.
+     * Identical to map(value, low, high, 0, 1).
+     * Numbers outside of the range are not clamped to 0 and 1, because
+     * out-of-range values are often intentional and useful. (See the second
+     * example above.)
+     *
+     * @method norm
+     * @param  {Number} value incoming value to be normalized
+     * @param  {Number} start lower bound of the value's current range
+     * @param  {Number} stop  upper bound of the value's current range
+     * @return {Number}       normalized number
+     * @example
+     * 

+     * function draw() {
+     *   background(200);
+     *   var currentNum = mouseX;
+     *   var lowerBound = 0;
+     *   var upperBound = width; //100;
+     *   var normalized = norm(currentNum, lowerBound, upperBound);
+     *   var lineY = 70;
+     *   line(0, lineY, width, lineY);
+     *   //Draw an ellipse mapped to the non-normalized value.
+     *   noStroke();
+     *   fill(50);
+     *   var s = 7; // ellipse size
+     *   ellipse(currentNum, lineY, s, s);
+     *
+     *   // Draw the guide
+     *   var guideY = lineY + 15;
+     *   text('0', 0, guideY);
+     *   textAlign(RIGHT);
+     *   text('100', width, guideY);
+     *
+     *   // Draw the normalized value
+     *   textAlign(LEFT);
+     *   fill(0);
+     *   textSize(32);
+     *   var normalY = 40;
+     *   var normalX = 20;
+     *   text(normalized, normalX, normalY);
+     * }
+     * 

+     *
+     * @alt
+     * ellipse moves with mouse. 0 shown left & 100 right and updating values center
+     *
+     */
+    p5.prototype.norm = function(n, start, stop) {
+      p5._validateParameters('norm', arguments);
+      return this.map(n, start, stop, 0, 1);
+    };
+
+    /**
+     * Facilitates exponential expressions. The pow() function is an efficient
+     * way of multiplying numbers by themselves (or their reciprocals) in large
+     * quantities. For example, pow(3, 5) is equivalent to the expression
+     * 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to
+     * Math.pow().
+     *
+     * @method pow
+     * @param  {Number} n base of the exponential expression
+     * @param  {Number} e power by which to raise the base
+     * @return {Number}   n^e
+     * @example
+     * 

+     * function setup() {
+     *   //Exponentially increase the size of an ellipse.
+     *   var eSize = 3; // Original Size
+     *   var eLoc = 10; // Original Location
+     *
+     *   ellipse(eLoc, eLoc, eSize, eSize);
+     *
+     *   ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));
+     *
+     *   ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));
+     *
+     *   ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
+     * }
+     * 

+     *
+     * @alt
+     * small to large ellipses radiating from top left of canvas
+     *
+     */
+    p5.prototype.pow = Math.pow;
+
+    /**
+     * Calculates the integer closest to the n parameter. For example,
+     * round(133.8) returns the value 134. Maps to Math.round().
+     *
+     * @method round
+     * @param  {Number} n number to round
+     * @return {Integer}  rounded number
+     * @example
+     * 

+     * function draw() {
+     *   background(200);
+     *   //map, mouseX between 0 and 5.
+     *   var ax = map(mouseX, 0, 100, 0, 5);
+     *   var ay = 66;
+     *
+     *   // Round the mapped number.
+     *   var bx = round(map(mouseX, 0, 100, 0, 5));
+     *   var by = 33;
+     *
+     *   // Multiply the mapped numbers by 20 to more easily
+     *   // see the changes.
+     *   stroke(0);
+     *   fill(0);
+     *   line(0, ay, ax * 20, ay);
+     *   line(0, by, bx * 20, by);
+     *
+     *   // Reformat the float returned by map and draw it.
+     *   noStroke();
+     *   text(nfc(ax, 2), ax, ay - 5);
+     *   text(nfc(bx, 1), bx, by - 5);
+     * }
+     * 

+     *
+     * @alt
+     * horizontal center line squared values displayed on top and regular on bottom.
+     *
+     */
+    p5.prototype.round = Math.round;
+
+    /**
+     * Squares a number (multiplies a number by itself). The result is always a
+     * positive number, as multiplying two negative numbers always yields a
+     * positive result. For example, -1 * -1 = 1.
+     *
+     * @method sq
+     * @param  {Number} n number to square
+     * @return {Number}   squared number
+     * @example
+     * 

+     * function draw() {
+     *   background(200);
+     *   var eSize = 7;
+     *   var x1 = map(mouseX, 0, width, 0, 10);
+     *   var y1 = 80;
+     *   var x2 = sq(x1);
+     *   var y2 = 20;
+     *
+     *   // Draw the non-squared.
+     *   line(0, y1, width, y1);
+     *   ellipse(x1, y1, eSize, eSize);
+     *
+     *   // Draw the squared.
+     *   line(0, y2, width, y2);
+     *   ellipse(x2, y2, eSize, eSize);
+     *
+     *   // Draw dividing line.
+     *   stroke(100);
+     *   line(0, height / 2, width, height / 2);
+     *
+     *   // Draw text.
+     *   var spacing = 15;
+     *   noStroke();
+     *   fill(0);
+     *   text('x = ' + x1, 0, y1 + spacing);
+     *   text('sq(x) = ' + x2, 0, y2 + spacing);
+     * }
+     * 

+     *
+     * @alt
+     * horizontal center line squared values displayed on top and regular on bottom.
+     *
+     */
+    p5.prototype.sq = function(n) {
+      return n * n;
+    };
+
+    /**
+     * Calculates the square root of a number. The square root of a number is
+     * always positive, even though there may be a valid negative root. The
+     * square root s of number a is such that s*s = a. It is the opposite of
+     * squaring. Maps to Math.sqrt().
+     *
+     * @method sqrt
+     * @param  {Number} n non-negative number to square root
+     * @return {Number}   square root of number
+     * @example
+     * 

+     * function draw() {
+     *   background(200);
+     *   var eSize = 7;
+     *   var x1 = mouseX;
+     *   var y1 = 80;
+     *   var x2 = sqrt(x1);
+     *   var y2 = 20;
+     *
+     *   // Draw the non-squared.
+     *   line(0, y1, width, y1);
+     *   ellipse(x1, y1, eSize, eSize);
+     *
+     *   // Draw the squared.
+     *   line(0, y2, width, y2);
+     *   ellipse(x2, y2, eSize, eSize);
+     *
+     *   // Draw dividing line.
+     *   stroke(100);
+     *   line(0, height / 2, width, height / 2);
+     *
+     *   // Draw text.
+     *   noStroke();
+     *   fill(0);
+     *   var spacing = 15;
+     *   text('x = ' + x1, 0, y1 + spacing);
+     *   text('sqrt(x) = ' + x2, 0, y2 + spacing);
+     * }
+     * 

+     *
+     * @alt
+     * horizontal center line squareroot values displayed on top and regular on bottom.
+     *
+     */
+    p5.prototype.sqrt = Math.sqrt;
+
+    // Calculate the length of the hypotenuse of a right triangle
+    // This won't under- or overflow in intermediate steps
+    // https://en.wikipedia.org/wiki/Hypot
+    function hypot(x, y, z) {
+      // Use the native implementation if it's available
+      if (typeof Math.hypot === 'function') {
+        return Math.hypot.apply(null, arguments);
+      }
+
+      // Otherwise use the V8 implementation
+      // https://github.com/v8/v8/blob/8cd3cf297287e581a49e487067f5cbd991b27123/src/js/math.js#L217
+      var length = arguments.length;
+      var args = [];
+      var max = 0;
+      for (var i = 0; i < length; i++) {
+        var n = arguments[i];
+        n = +n;
+        if (n === Infinity || n === -Infinity) {
+          return Infinity;
+        }
+        n = Math.abs(n);
+        if (n > max) {
+          max = n;
+        }
+        args[i] = n;
+      }
+
+      if (max === 0) {
+        max = 1;
+      }
+      var sum = 0;
+      var compensation = 0;
+      for (var j = 0; j < length; j++) {
+        var m = args[j] / max;
+        var summand = m * m - compensation;
+        var preliminary = sum + summand;
+        compensation = preliminary - sum - summand;
+        sum = preliminary;
+      }
+      return Math.sqrt(sum) * max;
+    }
+
+    module.exports = p5;
+
+    },{"../core/core":22}],51:[function(_dereq_,module,exports){
+    /**
+     * @module Math
+     * @submodule Math
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Creates a new p5.Vector (the datatype for storing vectors). This provides a
+     * two or three dimensional vector, specifically a Euclidean (also known as
+     * geometric) vector. A vector is an entity that has both magnitude and
+     * direction.
+     *
+     * @method createVector
+     * @param {Number} [x] x component of the vector
+     * @param {Number} [y] y component of the vector
+     * @param {Number} [z] z component of the vector
+     * @return {p5.Vector}
+     * @example
+     * 

+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   noStroke();
+     *   fill(255, 102, 204);
+     * }
+     *
+     * function draw() {
+     *   background(255);
+     *   pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
+     *   scale(0.75);
+     *   sphere();
+     * }
+     * 

+     *
+     * @alt
+     * a purple sphere lit by a point light oscillating horizontally
+     */
+    p5.prototype.createVector = function(x, y, z) {
+      if (this instanceof p5) {
+        return new p5.Vector(this, arguments);
+      } else {
+        return new p5.Vector(x, y, z);
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],52:[function(_dereq_,module,exports){
+    //////////////////////////////////////////////////////////////
+
+    // http://mrl.nyu.edu/~perlin/noise/
+    // Adapting from PApplet.java
+    // which was adapted from toxi
+    // which was adapted from the german demo group farbrausch
+    // as used in their demo "art": http://www.farb-rausch.de/fr010src.zip
+
+    // someday we might consider using "improved noise"
+    // http://mrl.nyu.edu/~perlin/paper445.pdf
+    // See: https://github.com/shiffman/The-Nature-of-Code-Examples-p5.js/
+    //      blob/master/introduction/Noise1D/noise.js
+
+    /**
+     * @module Math
+     * @submodule Noise
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    var PERLIN_YWRAPB = 4;
+    var PERLIN_YWRAP = 1 << PERLIN_YWRAPB;
+    var PERLIN_ZWRAPB = 8;
+    var PERLIN_ZWRAP = 1 << PERLIN_ZWRAPB;
+    var PERLIN_SIZE = 4095;
+
+    var perlin_octaves = 4; // default to medium smooth
+    var perlin_amp_falloff = 0.5; // 50% reduction/octave
+
+    var scaled_cosine = function(i) {
+      return 0.5 * (1.0 - Math.cos(i * Math.PI));
+    };
+
+    var perlin; // will be initialized lazily by noise() or noiseSeed()
+
+    /**
+     * Returns the Perlin noise value at specified coordinates. Perlin noise is
+     * a random sequence generator producing a more natural ordered, harmonic
+     * succession of numbers compared to the standard random() function.
+     * It was invented by Ken Perlin in the 1980s and been used since in
+     * graphical applications to produce procedural textures, natural motion,
+     * shapes, terrains etc.

 The main difference to the
+     * random() function is that Perlin noise is defined in an infinite
+     * n-dimensional space where each pair of coordinates corresponds to a
+     * fixed semi-random value (fixed only for the lifespan of the program; see
+     * the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise,
+     * depending on the number of coordinates given. The resulting value will
+     * always be between 0.0 and 1.0. The noise value can be animated by moving
+     * through the noise space as demonstrated in the example above. The 2nd
+     * and 3rd dimension can also be interpreted as time.

The actual
+     * noise is structured similar to an audio signal, in respect to the
+     * function's use of frequencies. Similar to the concept of harmonics in
+     * physics, perlin noise is computed over several octaves which are added
+     * together for the final result. 

Another way to adjust the
+     * character of the resulting sequence is the scale of the input
+     * coordinates. As the function works within an infinite space the value of
+     * the coordinates doesn't matter as such, only the distance between
+     * successive coordinates does (eg. when using noise() within a
+     * loop). As a general rule the smaller the difference between coordinates,
+     * the smoother the resulting noise sequence will be. Steps of 0.005-0.03
+     * work best for most applications, but this will differ depending on use.
+     *
+     *
+     * @method noise
+     * @param  {Number} x   x-coordinate in noise space
+     * @param  {Number} [y] y-coordinate in noise space
+     * @param  {Number} [z] z-coordinate in noise space
+     * @return {Number}     Perlin noise value (between 0 and 1) at specified
+     *                      coordinates
+     * @example
+     * 

+     * 
+     * var xoff = 0.0;
+     *
+     * function draw() {
+     *   background(204);
+     *   xoff = xoff + 0.01;
+     *   var n = noise(xoff) * width;
+     *   line(n, 0, n, height);
+     * }
+     * 
+     * 

+     * 

+     * var noiseScale=0.02;
+     *
+     * function draw() {
+     *   background(0);
+     *   for (var x=0; x < width; x++) {
+     *     var noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
+     *     stroke(noiseVal*255);
+     *     line(x, mouseY+noiseVal*80, x, height);
+     *   }
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * vertical line moves left to right with updating noise values.
+     * horizontal wave pattern effected by mouse x-position & updating noise values.
+     *
+     */
+
+    p5.prototype.noise = function(x, y, z) {
+      y = y || 0;
+      z = z || 0;
+
+      if (perlin == null) {
+        perlin = new Array(PERLIN_SIZE + 1);
+        for (var i = 0; i < PERLIN_SIZE + 1; i++) {
+          perlin[i] = Math.random();
+        }
+      }
+
+      if (x < 0) {
+        x = -x;
+      }
+      if (y < 0) {
+        y = -y;
+      }
+      if (z < 0) {
+        z = -z;
+      }
+
+      var xi = Math.floor(x),
+        yi = Math.floor(y),
+        zi = Math.floor(z);
+      var xf = x - xi;
+      var yf = y - yi;
+      var zf = z - zi;
+      var rxf, ryf;
+
+      var r = 0;
+      var ampl = 0.5;
+
+      var n1, n2, n3;
+
+      for (var o = 0; o < perlin_octaves; o++) {
+        var of = xi + (yi << PERLIN_YWRAPB) + (zi << PERLIN_ZWRAPB);
+
+        rxf = scaled_cosine(xf);
+        ryf = scaled_cosine(yf);
+
+        n1 = perlin[of & PERLIN_SIZE];
+        n1 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n1);
+        n2 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
+        n2 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n2);
+        n1 += ryf * (n2 - n1);
+
+        of += PERLIN_ZWRAP;
+        n2 = perlin[of & PERLIN_SIZE];
+        n2 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n2);
+        n3 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
+        n3 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n3);
+        n2 += ryf * (n3 - n2);
+
+        n1 += scaled_cosine(zf) * (n2 - n1);
+
+        r += n1 * ampl;
+        ampl *= perlin_amp_falloff;
+        xi <<= 1;
+        xf *= 2;
+        yi <<= 1;
+        yf *= 2;
+        zi <<= 1;
+        zf *= 2;
+
+        if (xf >= 1.0) {
+          xi++;
+          xf--;
+        }
+        if (yf >= 1.0) {
+          yi++;
+          yf--;
+        }
+        if (zf >= 1.0) {
+          zi++;
+          zf--;
+        }
+      }
+      return r;
+    };
+
+    /**
+     *
+     * Adjusts the character and level of detail produced by the Perlin noise
+     * function. Similar to harmonics in physics, noise is computed over
+     * several octaves. Lower octaves contribute more to the output signal and
+     * as such define the overall intensity of the noise, whereas higher octaves
+     * create finer grained details in the noise sequence.
+     * 


+     * By default, noise is computed over 4 octaves with each octave contributing
+     * exactly half than its predecessor, starting at 50% strength for the 1st
+     * octave. This falloff amount can be changed by adding an additional function
+     * parameter. Eg. a falloff factor of 0.75 means each octave will now have
+     * 75% impact (25% less) of the previous lower octave. Any value between
+     * 0.0 and 1.0 is valid, however note that values greater than 0.5 might
+     * result in greater than 1.0 values returned by noise().
+     * 


+     * By changing these parameters, the signal created by the noise()
+     * function can be adapted to fit very specific needs and characteristics.
+     *
+     * @method noiseDetail
+     * @param {Number} lod number of octaves to be used by the noise
+     * @param {Number} falloff falloff factor for each octave
+     * @example
+     * 

+     * 
+     * var noiseVal;
+     * var noiseScale = 0.02;
+     *
+     * function setup() {
+     *   createCanvas(100, 100);
+     * }
+     *
+     * function draw() {
+     *   background(0);
+     *   for (var y = 0; y < height; y++) {
+     *     for (var x = 0; x < width / 2; x++) {
+     *       noiseDetail(2, 0.2);
+     *       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
+     *       stroke(noiseVal * 255);
+     *       point(x, y);
+     *       noiseDetail(8, 0.65);
+     *       noiseVal = noise(
+     *         (mouseX + x + width / 2) * noiseScale,
+     *         (mouseY + y) * noiseScale
+     *       );
+     *       stroke(noiseVal * 255);
+     *       point(x + width / 2, y);
+     *     }
+     *   }
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 2 vertical grey smokey patterns affected my mouse x-position and noise.
+     *
+     */
+    p5.prototype.noiseDetail = function(lod, falloff) {
+      if (lod > 0) {
+        perlin_octaves = lod;
+      }
+      if (falloff > 0) {
+        perlin_amp_falloff = falloff;
+      }
+    };
+
+    /**
+     * Sets the seed value for noise(). By default, noise()
+     * produces different results each time the program is run. Set the
+     * value parameter to a constant to return the same pseudo-random
+     * numbers each time the software is run.
+     *
+     * @method noiseSeed
+     * @param {Number} seed   the seed value
+     * @example
+     * 

+     * var xoff = 0.0;
+     *
+     * function setup() {
+     *   noiseSeed(99);
+     *   stroke(0, 10);
+     * }
+     *
+     * function draw() {
+     *   xoff = xoff + .01;
+     *   var n = noise(xoff) * width;
+     *   line(n, 0, n, height);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * vertical grey lines drawing in pattern affected by noise.
+     *
+     */
+    p5.prototype.noiseSeed = function(seed) {
+      // Linear Congruential Generator
+      // Variant of a Lehman Generator
+      var lcg = (function() {
+        // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
+        // m is basically chosen to be large (as it is the max period)
+        // and for its relationships to a and c
+        var m = 4294967296;
+        // a - 1 should be divisible by m's prime factors
+        var a = 1664525;
+        // c and m should be co-prime
+        var c = 1013904223;
+        var seed, z;
+        return {
+          setSeed: function(val) {
+            // pick a random seed if val is undefined or null
+            // the >>> 0 casts the seed to an unsigned 32-bit integer
+            z = seed = (val == null ? Math.random() * m : val) >>> 0;
+          },
+          getSeed: function() {
+            return seed;
+          },
+          rand: function() {
+            // define the recurrence relationship
+            z = (a * z + c) % m;
+            // return a float in [0, 1)
+            // if z = m then z / m = 0 therefore (z % m) / m < 1 always
+            return z / m;
+          }
+        };
+      })();
+
+      lcg.setSeed(seed);
+      perlin = new Array(PERLIN_SIZE + 1);
+      for (var i = 0; i < PERLIN_SIZE + 1; i++) {
+        perlin[i] = lcg.rand();
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],53:[function(_dereq_,module,exports){
+    /**
+     * @module Math
+     * @submodule Math
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var polarGeometry = _dereq_('./polargeometry');
+    var constants = _dereq_('../core/constants');
+
+    /**
+     * A class to describe a two or three dimensional vector, specifically
+     * a Euclidean (also known as geometric) vector. A vector is an entity
+     * that has both magnitude and direction. The datatype, however, stores
+     * the components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude
+     * and direction can be accessed via the methods mag() and heading().
+     * 


+     * In many of the p5.js examples, you will see p5.Vector used to describe a
+     * position, velocity, or acceleration. For example, if you consider a rectangle
+     * moving across the screen, at any given instant it has a position (a vector
+     * that points from the origin to its location), a velocity (the rate at which
+     * the object's position changes per time unit, expressed as a vector), and
+     * acceleration (the rate at which the object's velocity changes per time
+     * unit, expressed as a vector).
+     * 


+     * Since vectors represent groupings of values, we cannot simply use
+     * traditional addition/multiplication/etc. Instead, we'll need to do some
+     * "vector" math, which is made easy by the methods inside the p5.Vector class.
+     *
+     * @class p5.Vector
+     * @constructor
+     * @param {Number} [x] x component of the vector
+     * @param {Number} [y] y component of the vector
+     * @param {Number} [z] z component of the vector
+     * @example
+     * 

+     * 
+     * var v1 = createVector(40, 50);
+     * var v2 = createVector(40, 50);
+     *
+     * ellipse(v1.x, v1.y, 50, 50);
+     * ellipse(v2.x, v2.y, 50, 50);
+     * v1.add(v2);
+     * ellipse(v1.x, v1.y, 50, 50);
+     * 
+     * 

+     *
+     * @alt
+     * 2 white ellipses. One center-left the other bottom right and off canvas
+     *
+     */
+    p5.Vector = function Vector() {
+      var x, y, z;
+      // This is how it comes in with createVector()
+      if (arguments[0] instanceof p5) {
+        // save reference to p5 if passed in
+        this.p5 = arguments[0];
+        x = arguments[1][0] || 0;
+        y = arguments[1][1] || 0;
+        z = arguments[1][2] || 0;
+        // This is what we'll get with new p5.Vector()
+      } else {
+        x = arguments[0] || 0;
+        y = arguments[1] || 0;
+        z = arguments[2] || 0;
+      }
+      /**
+       * The x component of the vector
+       * @property x {Number}
+       */
+      this.x = x;
+      /**
+       * The y component of the vector
+       * @property y {Number}
+       */
+      this.y = y;
+      /**
+       * The z component of the vector
+       * @property z {Number}
+       */
+      this.z = z;
+      this.name = 'p5.Vector'; // for friendly debugger system
+    };
+
+    /**
+     * Returns a string representation of a vector v by calling String(v)
+     * or v.toString(). This method is useful for logging vectors in the
+     * console.
+     * @method  toString
+     * @return {String}
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var v = createVector(20, 30);
+     *   print(String(v)); // prints "p5.Vector Object : [20, 30, 0]"
+     * }
+     * 
+     * 

+     */
+    p5.Vector.prototype.toString = function p5VectorToString() {
+      return 'p5.Vector Object : [' + this.x + ', ' + this.y + ', ' + this.z + ']';
+    };
+
+    /**
+     * Sets the x, y, and z component of the vector using two or three separate
+     * variables, the data from a p5.Vector, or the values from a float array.
+     * @method set
+     * @param {Number} [x] the x component of the vector
+     * @param {Number} [y] the y component of the vector
+     * @param {Number} [z] the z component of the vector
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var v = createVector(1, 2, 3);
+     *   v.set(4, 5, 6); // Sets vector to [4, 5, 6]
+     *
+     *   var v1 = createVector(0, 0, 0);
+     *   var arr = [1, 2, 3];
+     *   v1.set(arr); // Sets vector to [1, 2, 3]
+     * }
+     * 
+     * 

+     */
+    /**
+     * @method set
+     * @param {p5.Vector|Number[]} value the vector to set
+     * @chainable
+     */
+    p5.Vector.prototype.set = function set(x, y, z) {
+      if (x instanceof p5.Vector) {
+        this.x = x.x || 0;
+        this.y = x.y || 0;
+        this.z = x.z || 0;
+        return this;
+      }
+      if (x instanceof Array) {
+        this.x = x[0] || 0;
+        this.y = x[1] || 0;
+        this.z = x[2] || 0;
+        return this;
+      }
+      this.x = x || 0;
+      this.y = y || 0;
+      this.z = z || 0;
+      return this;
+    };
+
+    /**
+     * Gets a copy of the vector, returns a p5.Vector object.
+     *
+     * @method copy
+     * @return {p5.Vector} the copy of the p5.Vector object
+     * @example
+     * 

+     * 
+     * var v1 = createVector(1, 2, 3);
+     * var v2 = v1.copy();
+     * print(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);
+     * // Prints "true"
+     * 
+     * 

+     */
+    p5.Vector.prototype.copy = function copy() {
+      if (this.p5) {
+        return new p5.Vector(this.p5, [this.x, this.y, this.z]);
+      } else {
+        return new p5.Vector(this.x, this.y, this.z);
+      }
+    };
+
+    /**
+     * Adds x, y, and z components to a vector, adds one vector to another, or
+     * adds two independent vectors together. The version of the method that adds
+     * two vectors together is a static method and returns a p5.Vector, the others
+     * acts directly on the vector. See the examples for more context.
+     *
+     * @method add
+     * @param  {Number} x   the x component of the vector to be added
+     * @param  {Number} [y] the y component of the vector to be added
+     * @param  {Number} [z] the z component of the vector to be added
+     * @chainable
+     * @example
+     * 

+     * 
+     * var v = createVector(1, 2, 3);
+     * v.add(4, 5, 6);
+     * // v's components are set to [5, 7, 9]
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Static method
+     * var v1 = createVector(1, 2, 3);
+     * var v2 = createVector(2, 3, 4);
+     *
+     * var v3 = p5.Vector.add(v1, v2);
+     * // v3 has components [3, 5, 7]
+     * print(v3);
+     * 
+     * 

+     */
+    /**
+     * @method add
+     * @param  {p5.Vector|Number[]} value the vector to add
+     * @chainable
+     */
+    p5.Vector.prototype.add = function add(x, y, z) {
+      if (x instanceof p5.Vector) {
+        this.x += x.x || 0;
+        this.y += x.y || 0;
+        this.z += x.z || 0;
+        return this;
+      }
+      if (x instanceof Array) {
+        this.x += x[0] || 0;
+        this.y += x[1] || 0;
+        this.z += x[2] || 0;
+        return this;
+      }
+      this.x += x || 0;
+      this.y += y || 0;
+      this.z += z || 0;
+      return this;
+    };
+
+    /**
+     * Subtracts x, y, and z components from a vector, subtracts one vector from
+     * another, or subtracts two independent vectors. The version of the method
+     * that subtracts two vectors is a static method and returns a p5.Vector, the
+     * other acts directly on the vector. See the examples for more context.
+     *
+     * @method sub
+     * @param  {Number} x   the x component of the vector to subtract
+     * @param  {Number} [y] the y component of the vector to subtract
+     * @param  {Number} [z] the z component of the vector to subtract
+     * @chainable
+     * @example
+     * 

+     * 
+     * var v = createVector(4, 5, 6);
+     * v.sub(1, 1, 1);
+     * // v's components are set to [3, 4, 5]
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Static method
+     * var v1 = createVector(2, 3, 4);
+     * var v2 = createVector(1, 2, 3);
+     *
+     * var v3 = p5.Vector.sub(v1, v2);
+     * // v3 has components [1, 1, 1]
+     * print(v3);
+     * 
+     * 

+     */
+    /**
+     * @method sub
+     * @param  {p5.Vector|Number[]} value the vector to subtract
+     * @chainable
+     */
+    p5.Vector.prototype.sub = function sub(x, y, z) {
+      if (x instanceof p5.Vector) {
+        this.x -= x.x || 0;
+        this.y -= x.y || 0;
+        this.z -= x.z || 0;
+        return this;
+      }
+      if (x instanceof Array) {
+        this.x -= x[0] || 0;
+        this.y -= x[1] || 0;
+        this.z -= x[2] || 0;
+        return this;
+      }
+      this.x -= x || 0;
+      this.y -= y || 0;
+      this.z -= z || 0;
+      return this;
+    };
+
+    /**
+     * Multiply the vector by a scalar. The static version of this method
+     * creates a new p5.Vector while the non static version acts on the vector
+     * directly. See the examples for more context.
+     *
+     * @method mult
+     * @param  {Number}    n the number to multiply with the vector
+     * @chainable
+     * @example
+     * 

+     * 
+     * var v = createVector(1, 2, 3);
+     * v.mult(2);
+     * // v's components are set to [2, 4, 6]
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Static method
+     * var v1 = createVector(1, 2, 3);
+     * var v2 = p5.Vector.mult(v1, 2);
+     * // v2 has components [2, 4, 6]
+     * print(v2);
+     * 
+     * 

+     */
+    p5.Vector.prototype.mult = function mult(n) {
+      if (!(typeof n === 'number' && isFinite(n))) {
+        console.warn(
+          'p5.Vector.prototype.mult:',
+          'n is undefined or not a finite number'
+        );
+        return this;
+      }
+      this.x *= n;
+      this.y *= n;
+      this.z *= n;
+      return this;
+    };
+
+    /**
+     * Divide the vector by a scalar. The static version of this method creates a
+     * new p5.Vector while the non static version acts on the vector directly.
+     * See the examples for more context.
+     *
+     * @method div
+     * @param  {number}    n the number to divide the vector by
+     * @chainable
+     * @example
+     * 

+     * 
+     * var v = createVector(6, 4, 2);
+     * v.div(2); //v's components are set to [3, 2, 1]
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Static method
+     * var v1 = createVector(6, 4, 2);
+     * var v2 = p5.Vector.div(v1, 2);
+     * // v2 has components [3, 2, 1]
+     * print(v2);
+     * 
+     * 

+     */
+    p5.Vector.prototype.div = function div(n) {
+      if (!(typeof n === 'number' && isFinite(n))) {
+        console.warn(
+          'p5.Vector.prototype.div:',
+          'n is undefined or not a finite number'
+        );
+        return this;
+      }
+      if (n === 0) {
+        console.warn('p5.Vector.prototype.div:', 'divide by 0');
+        return this;
+      }
+      this.x /= n;
+      this.y /= n;
+      this.z /= n;
+      return this;
+    };
+
+    /**
+     * Calculates the magnitude (length) of the vector and returns the result as
+     * a float (this is simply the equation sqrt(x*x + y*y + z*z).)
+     *
+     * @method mag
+     * @return {Number} magnitude of the vector
+     * @example
+     * 

+     * 
+     * var v = createVector(20.0, 30.0, 40.0);
+     * var m = v.mag();
+     * print(m); // Prints "53.85164807134504"
+     * 
+     * 

+     */
+    p5.Vector.prototype.mag = function mag() {
+      return Math.sqrt(this.magSq());
+    };
+
+    /**
+     * Calculates the squared magnitude of the vector and returns the result
+     * as a float (this is simply the equation (x*x + y*y + z*z).)
+     * Faster if the real length is not required in the
+     * case of comparing vectors, etc.
+     *
+     * @method magSq
+     * @return {number} squared magnitude of the vector
+     * @example
+     * 

+     * 
+     * // Static method
+     * var v1 = createVector(6, 4, 2);
+     * print(v1.magSq()); // Prints "56"
+     * 
+     * 

+     */
+    p5.Vector.prototype.magSq = function magSq() {
+      var x = this.x;
+      var y = this.y;
+      var z = this.z;
+      return x * x + y * y + z * z;
+    };
+
+    /**
+     * Calculates the dot product of two vectors. The version of the method
+     * that computes the dot product of two independent vectors is a static
+     * method. See the examples for more context.
+     *
+     *
+     * @method dot
+     * @param  {Number} x   x component of the vector
+     * @param  {Number} [y] y component of the vector
+     * @param  {Number} [z] z component of the vector
+     * @return {Number}       the dot product
+     *
+     * @example
+     * 

+     * 
+     * var v1 = createVector(1, 2, 3);
+     * var v2 = createVector(2, 3, 4);
+     *
+     * print(v1.dot(v2)); // Prints "20"
+     * 
+     * 

+     *
+     * 

+     * 
+     * //Static method
+     * var v1 = createVector(1, 2, 3);
+     * var v2 = createVector(3, 2, 1);
+     * print(p5.Vector.dot(v1, v2)); // Prints "10"
+     * 
+     * 

+     */
+    /**
+     * @method dot
+     * @param  {p5.Vector} value value component of the vector or a p5.Vector
+     * @return {Number}
+     */
+    p5.Vector.prototype.dot = function dot(x, y, z) {
+      if (x instanceof p5.Vector) {
+        return this.dot(x.x, x.y, x.z);
+      }
+      return this.x * (x || 0) + this.y * (y || 0) + this.z * (z || 0);
+    };
+
+    /**
+     * Calculates and returns a vector composed of the cross product between
+     * two vectors. Both the static and non static methods return a new p5.Vector.
+     * See the examples for more context.
+     *
+     * @method cross
+     * @param  {p5.Vector} v p5.Vector to be crossed
+     * @return {p5.Vector}   p5.Vector composed of cross product
+     * @example
+     * 

+     * 
+     * var v1 = createVector(1, 2, 3);
+     * var v2 = createVector(1, 2, 3);
+     *
+     * v1.cross(v2); // v's components are [0, 0, 0]
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Static method
+     * var v1 = createVector(1, 0, 0);
+     * var v2 = createVector(0, 1, 0);
+     *
+     * var crossProduct = p5.Vector.cross(v1, v2);
+     * // crossProduct has components [0, 0, 1]
+     * print(crossProduct);
+     * 
+     * 

+     */
+    p5.Vector.prototype.cross = function cross(v) {
+      var x = this.y * v.z - this.z * v.y;
+      var y = this.z * v.x - this.x * v.z;
+      var z = this.x * v.y - this.y * v.x;
+      if (this.p5) {
+        return new p5.Vector(this.p5, [x, y, z]);
+      } else {
+        return new p5.Vector(x, y, z);
+      }
+    };
+
+    /**
+     * Calculates the Euclidean distance between two points (considering a
+     * point as a vector object).
+     *
+     * @method dist
+     * @param  {p5.Vector} v the x, y, and z coordinates of a p5.Vector
+     * @return {Number}      the distance
+     * @example
+     * 

+     * 
+     * var v1 = createVector(1, 0, 0);
+     * var v2 = createVector(0, 1, 0);
+     *
+     * var distance = v1.dist(v2); // distance is 1.4142...
+     * print(distance);
+     * 
+     * 

+     *
+     * 

+     * 
+     * // Static method
+     * var v1 = createVector(1, 0, 0);
+     * var v2 = createVector(0, 1, 0);
+     *
+     * var distance = p5.Vector.dist(v1, v2);
+     * // distance is 1.4142...
+     * print(distance);
+     * 
+     * 

+     */
+    p5.Vector.prototype.dist = function dist(v) {
+      return v
+        .copy()
+        .sub(this)
+        .mag();
+    };
+
+    /**
+     * Normalize the vector to length 1 (make it a unit vector).
+     *
+     * @method normalize
+     * @return {p5.Vector} normalized p5.Vector
+     * @example
+     * 

+     * 
+     * var v = createVector(10, 20, 2);
+     * // v has components [10.0, 20.0, 2.0]
+     * v.normalize();
+     * // v's components are set to
+     * // [0.4454354, 0.8908708, 0.089087084]
+     * 
+     * 

+     */
+    p5.Vector.prototype.normalize = function normalize() {
+      return this.mag() === 0 ? this : this.div(this.mag());
+    };
+
+    /**
+     * Limit the magnitude of this vector to the value used for the max
+     * parameter.
+     *
+     * @method limit
+     * @param  {Number}    max the maximum magnitude for the vector
+     * @chainable
+     * @example
+     * 

+     * 
+     * var v = createVector(10, 20, 2);
+     * // v has components [10.0, 20.0, 2.0]
+     * v.limit(5);
+     * // v's components are set to
+     * // [2.2271771, 4.4543543, 0.4454354]
+     * 
+     * 

+     */
+    p5.Vector.prototype.limit = function limit(max) {
+      var mSq = this.magSq();
+      if (mSq > max * max) {
+        this.div(Math.sqrt(mSq)) //normalize it
+          .mult(max);
+      }
+      return this;
+    };
+
+    /**
+     * Set the magnitude of this vector to the value used for the len
+     * parameter.
+     *
+     * @method setMag
+     * @param  {number}    len the new length for this vector
+     * @chainable
+     * @example
+     * 

+     * 
+     * var v = createVector(10, 20, 2);
+     * // v has components [10.0, 20.0, 2.0]
+     * v.setMag(10);
+     * // v's components are set to [6.0, 8.0, 0.0]
+     * 
+     * 

+     */
+    p5.Vector.prototype.setMag = function setMag(n) {
+      return this.normalize().mult(n);
+    };
+
+    /**
+     * Calculate the angle of rotation for this vector (only 2D vectors)
+     *
+     * @method heading
+     * @return {Number} the angle of rotation
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var v1 = createVector(30, 50);
+     *   print(v1.heading()); // 1.0303768265243125
+     *
+     *   v1 = createVector(40, 50);
+     *   print(v1.heading()); // 0.8960553845713439
+     *
+     *   v1 = createVector(30, 70);
+     *   print(v1.heading()); // 1.1659045405098132
+     * }
+     * 
+     * 

+     */
+    p5.Vector.prototype.heading = function heading() {
+      var h = Math.atan2(this.y, this.x);
+      if (this.p5) {
+        if (this.p5._angleMode === constants.RADIANS) {
+          return h;
+        }
+        return polarGeometry.radiansToDegrees(h);
+      }
+      return h;
+    };
+
+    /**
+     * Rotate the vector by an angle (only 2D vectors), magnitude remains the
+     * same
+     *
+     * @method rotate
+     * @param  {number}    angle the angle of rotation
+     * @chainable
+     * @example
+     * 

+     * 
+     * var v = createVector(10.0, 20.0);
+     * // v has components [10.0, 20.0, 0.0]
+     * v.rotate(HALF_PI);
+     * // v's components are set to [-20.0, 9.999999, 0.0]
+     * 
+     * 

+     */
+    p5.Vector.prototype.rotate = function rotate(a) {
+      var newHeading = this.heading() + a;
+      if (this.p5) {
+        if (this.p5._angleMode === constants.DEGREES) {
+          newHeading = polarGeometry.degreesToRadians(newHeading);
+        }
+      }
+      var mag = this.mag();
+      this.x = Math.cos(newHeading) * mag;
+      this.y = Math.sin(newHeading) * mag;
+      return this;
+    };
+
+    /**
+     * Calculates and returns the angle (in radians) between two vectors.
+     * @method angleBetween
+     * @param  {p5.Vector}    the x, y, and z components of a p5.Vector
+     * @return {Number}       the angle between (in radians)
+     * @example
+     * 

+     * 
+     * var v1 = createVector(1, 0, 0);
+     * var v2 = createVector(0, 1, 0);
+     *
+     * var angle = v1.angleBetween(v2);
+     * // angle is PI/2
+     * print(angle);
+     * 
+     * 

+     */
+    p5.Vector.prototype.angleBetween = function angleBetween(v) {
+      var dotmagmag = this.dot(v) / (this.mag() * v.mag());
+      // Mathematically speaking: the dotmagmag variable will be between -1 and 1
+      // inclusive. Practically though it could be slightly outside this range due
+      // to floating-point rounding issues. This can make Math.acos return NaN.
+      //
+      // Solution: we'll clamp the value to the -1,1 range
+      var angle = Math.acos(Math.min(1, Math.max(-1, dotmagmag)));
+      if (this.p5) {
+        if (this.p5._angleMode === constants.DEGREES) {
+          angle = polarGeometry.radiansToDegrees(angle);
+        }
+      }
+      return angle;
+    };
+
+    /**
+     * Linear interpolate the vector to another vector
+     *
+     * @method lerp
+     * @param  {Number}    x   the x component
+     * @param  {Number}    y   the y component
+     * @param  {Number}    z   the z component
+     * @param  {Number}    amt the amount of interpolation; some value between 0.0
+     *                         (old vector) and 1.0 (new vector). 0.9 is very near
+     *                         the new vector. 0.5 is halfway in between.
+     * @chainable
+     *
+     * @example
+     * 

+     * 
+     * var v = createVector(1, 1, 0);
+     *
+     * v.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]
+     * 
+     * 

+     *
+     * 

+     * 
+     * var v1 = createVector(0, 0, 0);
+     * var v2 = createVector(100, 100, 0);
+     *
+     * var v3 = p5.Vector.lerp(v1, v2, 0.5);
+     * // v3 has components [50,50,0]
+     * print(v3);
+     * 
+     * 

+     */
+    /**
+     * @method lerp
+     * @param  {p5.Vector} v   the p5.Vector to lerp to
+     * @param  {Number}    amt
+     * @chainable
+     */
+    p5.Vector.prototype.lerp = function lerp(x, y, z, amt) {
+      if (x instanceof p5.Vector) {
+        return this.lerp(x.x, x.y, x.z, y);
+      }
+      this.x += (x - this.x) * amt || 0;
+      this.y += (y - this.y) * amt || 0;
+      this.z += (z - this.z) * amt || 0;
+      return this;
+    };
+
+    /**
+     * Return a representation of this vector as a float array. This is only
+     * for temporary use. If used in any other fashion, the contents should be
+     * copied by using the p5.Vector.copy() method to copy into your own
+     * array.
+     *
+     * @method array
+     * @return {Number[]} an Array with the 3 values
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var v = createVector(20, 30);
+     *   print(v.array()); // Prints : Array [20, 30, 0]
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var v = createVector(10.0, 20.0, 30.0);
+     * var f = v.array();
+     * print(f[0]); // Prints "10.0"
+     * print(f[1]); // Prints "20.0"
+     * print(f[2]); // Prints "30.0"
+     * 
+     * 

+     */
+    p5.Vector.prototype.array = function array() {
+      return [this.x || 0, this.y || 0, this.z || 0];
+    };
+
+    /**
+     * Equality check against a p5.Vector
+     *
+     * @method equals
+     * @param {Number} [x] the x component of the vector
+     * @param {Number} [y] the y component of the vector
+     * @param {Number} [z] the z component of the vector
+     * @return {Boolean} whether the vectors are equals
+     * @example
+     * 

+     * 
+     * var v1 = createVector(5, 10, 20);
+     * var v2 = createVector(5, 10, 20);
+     * var v3 = createVector(13, 10, 19);
+     *
+     * print(v1.equals(v2.x, v2.y, v2.z)); // true
+     * print(v1.equals(v3.x, v3.y, v3.z)); // false
+     * 
+     * 

+     *
+     * 

+     * 
+     * var v1 = createVector(10.0, 20.0, 30.0);
+     * var v2 = createVector(10.0, 20.0, 30.0);
+     * var v3 = createVector(0.0, 0.0, 0.0);
+     * print(v1.equals(v2)); // true
+     * print(v1.equals(v3)); // false
+     * 
+     * 

+     */
+    /**
+     * @method equals
+     * @param {p5.Vector|Array} value the vector to compare
+     * @return {Boolean}
+     */
+    p5.Vector.prototype.equals = function equals(x, y, z) {
+      var a, b, c;
+      if (x instanceof p5.Vector) {
+        a = x.x || 0;
+        b = x.y || 0;
+        c = x.z || 0;
+      } else if (x instanceof Array) {
+        a = x[0] || 0;
+        b = x[1] || 0;
+        c = x[2] || 0;
+      } else {
+        a = x || 0;
+        b = y || 0;
+        c = z || 0;
+      }
+      return this.x === a && this.y === b && this.z === c;
+    };
+
+    // Static Methods
+
+    /**
+     * Make a new 2D vector from an angle
+     *
+     * @method fromAngle
+     * @static
+     * @param {Number}     angle the desired angle
+     * @param {Number}     [length] the length of the new vector (defaults to 1)
+     * @return {p5.Vector}       the new p5.Vector object
+     * @example
+     * 

+     * 
+     * function draw() {
+     *   background(200);
+     *
+     *   // Create a variable, proportional to the mouseX,
+     *   // varying from 0-360, to represent an angle in degrees.
+     *   angleMode(DEGREES);
+     *   var myDegrees = map(mouseX, 0, width, 0, 360);
+     *
+     *   // Display that variable in an onscreen text.
+     *   // (Note the nfc() function to truncate additional decimal places,
+     *   // and the "\xB0" character for the degree symbol.)
+     *   var readout = 'angle = ' + nfc(myDegrees, 1) + '\xB0';
+     *   noStroke();
+     *   fill(0);
+     *   text(readout, 5, 15);
+     *
+     *   // Create a p5.Vector using the fromAngle function,
+     *   // and extract its x and y components.
+     *   var v = p5.Vector.fromAngle(radians(myDegrees), 30);
+     *   var vx = v.x;
+     *   var vy = v.y;
+     *
+     *   push();
+     *   translate(width / 2, height / 2);
+     *   noFill();
+     *   stroke(150);
+     *   line(0, 0, 30, 0);
+     *   stroke(0);
+     *   line(0, 0, vx, vy);
+     *   pop();
+     * }
+     * 
+     * 

+     */
+    p5.Vector.fromAngle = function fromAngle(angle, length) {
+      if (this.p5) {
+        if (this.p5._angleMode === constants.DEGREES) {
+          angle = polarGeometry.degreesToRadians(angle);
+        }
+      }
+      if (typeof length === 'undefined') {
+        length = 1;
+      }
+      if (this.p5) {
+        return new p5.Vector(this.p5, [
+          length * Math.cos(angle),
+          length * Math.sin(angle),
+          0
+        ]);
+      } else {
+        return new p5.Vector(length * Math.cos(angle), length * Math.sin(angle), 0);
+      }
+    };
+
+    /**
+     * Make a new 3D vector from a pair of ISO spherical angles
+     *
+     * @method fromAngles
+     * @static
+     * @param {Number}     theta the polar angle (zero is up)
+     * @param {Number}     phi the azimuthal angle (zero is out of the screen)
+     * @param {Number}     [length] the length of the new vector (defaults to 1)
+     * @return {p5.Vector}       the new p5.Vector object
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   fill(255);
+     *   noStroke();
+     * }
+     * function draw() {
+     *   background(255);
+     *
+     *   var t = millis() / 1000;
+     *
+     *   // add three point lights
+     *   pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));
+     *   pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));
+     *   pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));
+     *
+     *   sphere(35);
+     * }
+     * 
+     * 

+     */
+    p5.Vector.fromAngles = function(theta, phi, length) {
+      if (this.p5) {
+        if (this.p5._angleMode === constants.DEGREES) {
+          theta = polarGeometry.degreesToRadians(theta);
+          phi = polarGeometry.degreesToRadians(phi);
+        }
+      }
+      if (typeof length === 'undefined') {
+        length = 1;
+      }
+      var cosPhi = Math.cos(phi);
+      var sinPhi = Math.sin(phi);
+      var cosTheta = Math.cos(theta);
+      var sinTheta = Math.sin(theta);
+
+      if (this.p5) {
+        return new new p5.Vector(
+          this.p5,
+          length * sinTheta * sinPhi,
+          -length * cosTheta,
+          length * sinTheta * cosPhi
+        )();
+      } else {
+        return new p5.Vector(
+          length * sinTheta * sinPhi,
+          -length * cosTheta,
+          length * sinTheta * cosPhi
+        );
+      }
+    };
+
+    /**
+     * Make a new 2D unit vector from a random angle
+     *
+     * @method random2D
+     * @static
+     * @return {p5.Vector} the new p5.Vector object
+     * @example
+     * 

+     * 
+     * var v = p5.Vector.random2D();
+     * // May make v's attributes something like:
+     * // [0.61554617, -0.51195765, 0.0] or
+     * // [-0.4695841, -0.14366731, 0.0] or
+     * // [0.6091097, -0.22805278, 0.0]
+     * print(v);
+     * 
+     * 

+     */
+    p5.Vector.random2D = function random2D() {
+      var angle;
+      // A lot of nonsense to determine if we know about a
+      // p5 sketch and whether we should make a random angle in degrees or radians
+      if (this.p5) {
+        if (this.p5._angleMode === constants.DEGREES) {
+          angle = this.p5.random(360);
+        } else {
+          angle = this.p5.random(constants.TWO_PI);
+        }
+      } else {
+        angle = Math.random() * constants.TWO_PI;
+      }
+      return this.fromAngle(angle);
+    };
+
+    /**
+     * Make a new random 3D unit vector.
+     *
+     * @method random3D
+     * @static
+     * @return {p5.Vector} the new p5.Vector object
+     * @example
+     * 

+     * 
+     * var v = p5.Vector.random3D();
+     * // May make v's attributes something like:
+     * // [0.61554617, -0.51195765, 0.599168] or
+     * // [-0.4695841, -0.14366731, -0.8711202] or
+     * // [0.6091097, -0.22805278, -0.7595902]
+     * print(v);
+     * 
+     * 

+     */
+    p5.Vector.random3D = function random3D() {
+      var angle, vz;
+      // If we know about p5
+      if (this.p5) {
+        angle = this.p5.random(0, constants.TWO_PI);
+        vz = this.p5.random(-1, 1);
+      } else {
+        angle = Math.random() * constants.TWO_PI;
+        vz = Math.random() * 2 - 1;
+      }
+      var vzBase = Math.sqrt(1 - vz * vz);
+      var vx = vzBase * Math.cos(angle);
+      var vy = vzBase * Math.sin(angle);
+      if (this.p5) {
+        return new p5.Vector(this.p5, [vx, vy, vz]);
+      }
+      return new p5.Vector(vx, vy, vz);
+    };
+
+    // Adds two vectors together and returns a new one.
+    /**
+     * @method add
+     * @static
+     * @param  {p5.Vector} v1 a p5.Vector to add
+     * @param  {p5.Vector} v2 a p5.Vector to add
+     * @param  {p5.Vector} target the vector to receive the result
+     */
+    /**
+     * @method add
+     * @static
+     * @param  {p5.Vector} v1
+     * @param  {p5.Vector} v2
+     * @return {p5.Vector} the resulting p5.Vector
+     *
+     */
+
+    p5.Vector.add = function add(v1, v2, target) {
+      if (!target) {
+        target = v1.copy();
+      } else {
+        target.set(v1);
+      }
+      target.add(v2);
+      return target;
+    };
+
+    /*
+     * Subtracts one p5.Vector from another and returns a new one.  The second
+     * vector (v2) is subtracted from the first (v1), resulting in v1-v2.
+     */
+    /**
+     * @method sub
+     * @static
+     * @param  {p5.Vector} v1 a p5.Vector to subtract from
+     * @param  {p5.Vector} v2 a p5.Vector to subtract
+     * @param  {p5.Vector} target if undefined a new vector will be created
+     */
+    /**
+     * @method sub
+     * @static
+     * @param  {p5.Vector} v1
+     * @param  {p5.Vector} v2
+     * @return {p5.Vector} the resulting p5.Vector
+     */
+
+    p5.Vector.sub = function sub(v1, v2, target) {
+      if (!target) {
+        target = v1.copy();
+      } else {
+        target.set(v1);
+      }
+      target.sub(v2);
+      return target;
+    };
+
+    /**
+     * Multiplies a vector by a scalar and returns a new vector.
+     */
+    /**
+     * @method mult
+     * @static
+     * @param  {p5.Vector} v the vector to multiply
+     * @param  {Number}  n
+     * @param  {p5.Vector} target if undefined a new vector will be created
+     */
+    /**
+     * @method mult
+     * @static
+     * @param  {p5.Vector} v
+     * @param  {Number}  n
+     * @return {p5.Vector}  the resulting new p5.Vector
+     */
+    p5.Vector.mult = function mult(v, n, target) {
+      if (!target) {
+        target = v.copy();
+      } else {
+        target.set(v);
+      }
+      target.mult(n);
+      return target;
+    };
+
+    /**
+     * Divides a vector by a scalar and returns a new vector.
+     */
+    /**
+     * @method div
+     * @static
+     * @param  {p5.Vector} v the vector to divide
+     * @param  {Number}  n
+     * @param  {p5.Vector} target if undefined a new vector will be created
+     */
+    /**
+     * @method div
+     * @static
+     * @param  {p5.Vector} v
+     * @param  {Number}  n
+     * @return {p5.Vector} the resulting new p5.Vector
+     */
+    p5.Vector.div = function div(v, n, target) {
+      if (!target) {
+        target = v.copy();
+      } else {
+        target.set(v);
+      }
+      target.div(n);
+      return target;
+    };
+
+    /**
+     * Calculates the dot product of two vectors.
+     */
+    /**
+     * @method dot
+     * @static
+     * @param  {p5.Vector} v1 the first p5.Vector
+     * @param  {p5.Vector} v2 the second p5.Vector
+     * @return {Number}     the dot product
+     */
+    p5.Vector.dot = function dot(v1, v2) {
+      return v1.dot(v2);
+    };
+
+    /**
+     * Calculates the cross product of two vectors.
+     */
+    /**
+     * @method cross
+     * @static
+     * @param  {p5.Vector} v1 the first p5.Vector
+     * @param  {p5.Vector} v2 the second p5.Vector
+     * @return {Number}     the cross product
+     */
+    p5.Vector.cross = function cross(v1, v2) {
+      return v1.cross(v2);
+    };
+
+    /**
+     * Calculates the Euclidean distance between two points (considering a
+     * point as a vector object).
+     */
+    /**
+     * @method dist
+     * @static
+     * @param  {p5.Vector} v1 the first p5.Vector
+     * @param  {p5.Vector} v2 the second p5.Vector
+     * @return {Number}     the distance
+     */
+    p5.Vector.dist = function dist(v1, v2) {
+      return v1.dist(v2);
+    };
+
+    /**
+     * Linear interpolate a vector to another vector and return the result as a
+     * new vector.
+     */
+    /**
+     * @method lerp
+     * @static
+     * @param {p5.Vector} v1
+     * @param {p5.Vector} v2
+     * @param {Number} amt
+     * @param {p5.Vector} target if undefined a new vector will be created
+     */
+    /**
+     * @method lerp
+     * @static
+     * @param {p5.Vector} v1
+     * @param {p5.Vector} v2
+     * @param {Number} amt
+     * @return {Number}      the lerped value
+     */
+    p5.Vector.lerp = function lerp(v1, v2, amt, target) {
+      if (!target) {
+        target = v1.copy();
+      } else {
+        target.set(v1);
+      }
+      target.lerp(v2, amt);
+      return target;
+    };
+
+    /**
+     * @method mag
+     * @param {p5.Vector} vecT the vector to return the magnitude of
+     * @return {Number}        the magnitude of vecT
+     * @static
+     */
+    p5.Vector.mag = function mag(vecT) {
+      var x = vecT.x,
+        y = vecT.y,
+        z = vecT.z;
+      var magSq = x * x + y * y + z * z;
+      return Math.sqrt(magSq);
+    };
+
+    module.exports = p5.Vector;
+
+    },{"../core/constants":21,"../core/core":22,"./polargeometry":54}],54:[function(_dereq_,module,exports){
+    'use strict';
+
+    module.exports = {
+      degreesToRadians: function(x) {
+        return 2 * Math.PI * x / 360;
+      },
+
+      radiansToDegrees: function(x) {
+        return 360 * x / (2 * Math.PI);
+      }
+    };
+
+    },{}],55:[function(_dereq_,module,exports){
+    /**
+     * @module Math
+     * @submodule Random
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    var seeded = false;
+    var previous = false;
+    var y2 = 0;
+
+    // Linear Congruential Generator
+    // Variant of a Lehman Generator
+    var lcg = (function() {
+      // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
+      // m is basically chosen to be large (as it is the max period)
+      // and for its relationships to a and c
+      var m = 4294967296,
+        // a - 1 should be divisible by m's prime factors
+        a = 1664525,
+        // c and m should be co-prime
+        c = 1013904223,
+        seed,
+        z;
+      return {
+        setSeed: function(val) {
+          // pick a random seed if val is undefined or null
+          // the >>> 0 casts the seed to an unsigned 32-bit integer
+          z = seed = (val == null ? Math.random() * m : val) >>> 0;
+        },
+        getSeed: function() {
+          return seed;
+        },
+        rand: function() {
+          // define the recurrence relationship
+          z = (a * z + c) % m;
+          // return a float in [0, 1)
+          // if z = m then z / m = 0 therefore (z % m) / m < 1 always
+          return z / m;
+        }
+      };
+    })();
+
+    /**
+     * Sets the seed value for random().
+     *
+     * By default, random() produces different results each time the program
+     * is run. Set the seed parameter to a constant to return the same
+     * pseudo-random numbers each time the software is run.
+     *
+     * @method randomSeed
+     * @param {Number} seed   the seed value
+     * @example
+     * 

+     * 
+     * randomSeed(99);
+     * for (var i = 0; i < 100; i++) {
+     *   var r = random(0, 255);
+     *   stroke(r);
+     *   line(i, 0, i, 100);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * many vertical lines drawn in white, black or grey.
+     *
+     */
+    p5.prototype.randomSeed = function(seed) {
+      lcg.setSeed(seed);
+      seeded = true;
+      previous = false;
+    };
+
+    /**
+     * Return a random floating-point number.
+     *
+     * Takes either 0, 1 or 2 arguments.
+     *
+     * If no argument is given, returns a random number from 0
+     * up to (but not including) 1.
+     *
+     * If one argument is given and it is a number, returns a random number from 0
+     * up to (but not including) the number.
+     *
+     * If one argument is given and it is an array, returns a random element from
+     * that array.
+     *
+     * If two arguments are given, returns a random number from the
+     * first argument up to (but not including) the second argument.
+     *
+     * @method random
+     * @param  {Number} [min]   the lower bound (inclusive)
+     * @param  {Number} [max]   the upper bound (exclusive)
+     * @return {Number} the random number
+     * @example
+     * 

+     * 
+     * for (var i = 0; i < 100; i++) {
+     *   var r = random(50);
+     *   stroke(r * 5);
+     *   line(50, i, 50 + r, i);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * for (var i = 0; i < 100; i++) {
+     *   var r = random(-50, 50);
+     *   line(50, i, 50 + r, i);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * // Get a random element from an array using the random(Array) syntax
+     * var words = ['apple', 'bear', 'cat', 'dog'];
+     * var word = random(words); // select random word
+     * text(word, 10, 50); // draw the word
+     * 
+     * 

+     *
+     * @alt
+     * 100 horizontal lines from center canvas to right. size+fill change each time
+     * 100 horizontal lines from center of canvas. height & side change each render
+     * word displayed at random. Either apple, bear, cat, or dog
+     *
+     */
+    /**
+     * @method random
+     * @param  {Array} choices   the array to choose from
+     * @return {*} the random element from the array
+     * @example
+     */
+    p5.prototype.random = function(min, max) {
+      var rand;
+
+      if (seeded) {
+        rand = lcg.rand();
+      } else {
+        rand = Math.random();
+      }
+      if (typeof min === 'undefined') {
+        return rand;
+      } else if (typeof max === 'undefined') {
+        if (min instanceof Array) {
+          return min[Math.floor(rand * min.length)];
+        } else {
+          return rand * min;
+        }
+      } else {
+        if (min > max) {
+          var tmp = min;
+          min = max;
+          max = tmp;
+        }
+
+        return rand * (max - min) + min;
+      }
+    };
+
+    /**
+     *
+     * Returns a random number fitting a Gaussian, or
+     * normal, distribution. There is theoretically no minimum or maximum
+     * value that randomGaussian() might return. Rather, there is
+     * just a very low probability that values far from the mean will be
+     * returned; and a higher probability that numbers near the mean will
+     * be returned.
+     * 


+     * Takes either 0, 1 or 2 arguments.

+     * If no args, returns a mean of 0 and standard deviation of 1.

+     * If one arg, that arg is the mean (standard deviation is 1).

+     * If two args, first is mean, second is standard deviation.
+     *
+     * @method randomGaussian
+     * @param  {Number} mean  the mean
+     * @param  {Number} sd    the standard deviation
+     * @return {Number} the random number
+     * @example
+     * 

+     * 
+     * for (var y = 0; y < 100; y++) {
+     *   var x = randomGaussian(50, 15);
+     *   line(50, y, x, y);
+     * }
+     * 
+     * 

+     * 

+     * 
+     * var distribution = new Array(360);
+     *
+     * function setup() {
+     *   createCanvas(100, 100);
+     *   for (var i = 0; i < distribution.length; i++) {
+     *     distribution[i] = floor(randomGaussian(0, 15));
+     *   }
+     * }
+     *
+     * function draw() {
+     *   background(204);
+     *
+     *   translate(width / 2, width / 2);
+     *
+     *   for (var i = 0; i < distribution.length; i++) {
+     *     rotate(TWO_PI / distribution.length);
+     *     stroke(0);
+     *     var dist = abs(distribution[i]);
+     *     line(0, 0, dist, 0);
+     *   }
+     * }
+     * 
+     * 

+     * @alt
+     * 100 horizontal lines from center of canvas. height & side change each render
+     * black lines radiate from center of canvas. size determined each render
+     */
+    p5.prototype.randomGaussian = function(mean, sd) {
+      var y1, x1, x2, w;
+      if (previous) {
+        y1 = y2;
+        previous = false;
+      } else {
+        do {
+          x1 = this.random(2) - 1;
+          x2 = this.random(2) - 1;
+          w = x1 * x1 + x2 * x2;
+        } while (w >= 1);
+        w = Math.sqrt(-2 * Math.log(w) / w);
+        y1 = x1 * w;
+        y2 = x2 * w;
+        previous = true;
+      }
+
+      var m = mean || 0;
+      var s = sd || 1;
+      return y1 * s + m;
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],56:[function(_dereq_,module,exports){
+    /**
+     * @module Math
+     * @submodule Trigonometry
+     * @for p5
+     * @requires core
+     * @requires polargeometry
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var polarGeometry = _dereq_('./polargeometry');
+    var constants = _dereq_('../core/constants');
+
+    p5.prototype._angleMode = constants.RADIANS;
+
+    /**
+     * The inverse of cos(), returns the arc cosine of a value. This function
+     * expects the values in the range of -1 to 1 and values are returned in
+     * the range 0 to PI (3.1415927).
+     *
+     * @method acos
+     * @param  {Number} value the value whose arc cosine is to be returned
+     * @return {Number}       the arc cosine of the given value
+     *
+     * @example
+     * 

+     * 
+     * var a = PI;
+     * var c = cos(a);
+     * var ac = acos(c);
+     * // Prints: "3.1415927 : -1.0 : 3.1415927"
+     * print(a + ' : ' + c + ' : ' + ac);
+     * 
+     * 

+     *
+     * 

+     * 
+     * var a = PI + PI / 4.0;
+     * var c = cos(a);
+     * var ac = acos(c);
+     * // Prints: "3.926991 : -0.70710665 : 2.3561943"
+     * print(a + ' : ' + c + ' : ' + ac);
+     * 
+     * 

+     */
+    p5.prototype.acos = function(ratio) {
+      if (this._angleMode === constants.RADIANS) {
+        return Math.acos(ratio);
+      } else {
+        return polarGeometry.radiansToDegrees(Math.acos(ratio));
+      }
+    };
+
+    /**
+     * The inverse of sin(), returns the arc sine of a value. This function
+     * expects the values in the range of -1 to 1 and values are returned
+     * in the range -PI/2 to PI/2.
+     *
+     * @method asin
+     * @param  {Number} value the value whose arc sine is to be returned
+     * @return {Number}       the arc sine of the given value
+     *
+     * @example
+     * 

+     * 
+     * var a = PI + PI / 3;
+     * var s = sin(a);
+     * var as = asin(s);
+     * // Prints: "1.0471976 : 0.86602545 : 1.0471976"
+     * print(a + ' : ' + s + ' : ' + as);
+     * 
+     * 

+     *
+     * 

+     * 
+     * var a = PI + PI / 3.0;
+     * var s = sin(a);
+     * var as = asin(s);
+     * // Prints: "4.1887903 : -0.86602545 : -1.0471976"
+     * print(a + ' : ' + s + ' : ' + as);
+     * 
+     * 

+     *
+     */
+    p5.prototype.asin = function(ratio) {
+      if (this._angleMode === constants.RADIANS) {
+        return Math.asin(ratio);
+      } else {
+        return polarGeometry.radiansToDegrees(Math.asin(ratio));
+      }
+    };
+
+    /**
+     * The inverse of tan(), returns the arc tangent of a value. This function
+     * expects the values in the range of -Infinity to Infinity (exclusive) and
+     * values are returned in the range -PI/2 to PI/2.
+     *
+     * @method atan
+     * @param  {Number} value the value whose arc tangent is to be returned
+     * @return {Number}       the arc tangent of the given value
+     *
+     * @example
+     * 

+     * 
+     * var a = PI + PI / 3;
+     * var t = tan(a);
+     * var at = atan(t);
+     * // Prints: "1.0471976 : 1.7320509 : 1.0471976"
+     * print(a + ' : ' + t + ' : ' + at);
+     * 
+     * 

+     *
+     * 

+     * 
+     * var a = PI + PI / 3.0;
+     * var t = tan(a);
+     * var at = atan(t);
+     * // Prints: "4.1887903 : 1.7320513 : 1.0471977"
+     * print(a + ' : ' + t + ' : ' + at);
+     * 
+     * 

+     *
+     */
+    p5.prototype.atan = function(ratio) {
+      if (this._angleMode === constants.RADIANS) {
+        return Math.atan(ratio);
+      } else {
+        return polarGeometry.radiansToDegrees(Math.atan(ratio));
+      }
+    };
+
+    /**
+     * Calculates the angle (in radians) from a specified point to the coordinate
+     * origin as measured from the positive x-axis. Values are returned as a
+     * float in the range from PI to -PI. The atan2() function is most often used
+     * for orienting geometry to the position of the cursor.
+     * 


+     * Note: The y-coordinate of the point is the first parameter, and the
+     * x-coordinate is the second parameter, due the the structure of calculating
+     * the tangent.
+     *
+     * @method atan2
+     * @param  {Number} y y-coordinate of the point
+     * @param  {Number} x x-coordinate of the point
+     * @return {Number}   the arc tangent of the given point
+     *
+     * @example
+     * 

+     * 
+     * function draw() {
+     *   background(204);
+     *   translate(width / 2, height / 2);
+     *   var a = atan2(mouseY - height / 2, mouseX - width / 2);
+     *   rotate(a);
+     *   rect(-30, -5, 60, 10);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 60 by 10 rect at center of canvas rotates with mouse movements
+     *
+     */
+    p5.prototype.atan2 = function(y, x) {
+      if (this._angleMode === constants.RADIANS) {
+        return Math.atan2(y, x);
+      } else {
+        return polarGeometry.radiansToDegrees(Math.atan2(y, x));
+      }
+    };
+
+    /**
+     * Calculates the cosine of an angle. This function takes into account the
+     * current angleMode. Values are returned in the range -1 to 1.
+     *
+     * @method cos
+     * @param  {Number} angle the angle
+     * @return {Number}       the cosine of the angle
+     *
+     * @example
+     * 

+     * 
+     * var a = 0.0;
+     * var inc = TWO_PI / 25.0;
+     * for (var i = 0; i < 25; i++) {
+     *   line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
+     *   a = a + inc;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * vertical black lines form wave patterns, extend-down on left and right side
+     *
+     */
+    p5.prototype.cos = function(angle) {
+      if (this._angleMode === constants.RADIANS) {
+        return Math.cos(angle);
+      } else {
+        return Math.cos(this.radians(angle));
+      }
+    };
+
+    /**
+     * Calculates the sine of an angle. This function takes into account the
+     * current angleMode. Values are returned in the range -1 to 1.
+     *
+     * @method sin
+     * @param  {Number} angle the angle
+     * @return {Number}       the sine of the angle
+     *
+     * @example
+     * 

+     * 
+     * var a = 0.0;
+     * var inc = TWO_PI / 25.0;
+     * for (var i = 0; i < 25; i++) {
+     *   line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
+     *   a = a + inc;
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * vertical black lines extend down and up from center to form wave pattern
+     *
+     */
+    p5.prototype.sin = function(angle) {
+      if (this._angleMode === constants.RADIANS) {
+        return Math.sin(angle);
+      } else {
+        return Math.sin(this.radians(angle));
+      }
+    };
+
+    /**
+     * Calculates the tangent of an angle. This function takes into account
+     * the current angleMode. Values are returned in the range -1 to 1.
+     *
+     * @method tan
+     * @param  {Number} angle the angle
+     * @return {Number}       the tangent of the angle
+     *
+     * @example
+     * 

+     * 
+     * var a = 0.0;
+     * var inc = TWO_PI / 50.0;
+     * for (var i = 0; i < 100; i = i + 2) {
+     *   line(i, 50, i, 50 + tan(a) * 2.0);
+     *   a = a + inc;
+     * }
+     * 
+     *
+     *
+     * @alt
+     * vertical black lines end down and up from center to form spike pattern
+     *
+     */
+    p5.prototype.tan = function(angle) {
+      if (this._angleMode === constants.RADIANS) {
+        return Math.tan(angle);
+      } else {
+        return Math.tan(this.radians(angle));
+      }
+    };
+
+    /**
+     * Converts a radian measurement to its corresponding value in degrees.
+     * Radians and degrees are two ways of measuring the same thing. There are
+     * 360 degrees in a circle and 2*PI radians in a circle. For example,
+     * 90° = PI/2 = 1.5707964.
+     *
+     * @method degrees
+     * @param  {Number} radians the radians value to convert to degrees
+     * @return {Number}         the converted angle
+     *
+     *
+     * @example
+     * 

+     * 
+     * var rad = PI / 4;
+     * var deg = degrees(rad);
+     * print(rad + ' radians is ' + deg + ' degrees');
+     * // Prints: 0.7853981633974483 radians is 45 degrees
+     * 
+     * 

+     *
+     */
+    p5.prototype.degrees = function(angle) {
+      return polarGeometry.radiansToDegrees(angle);
+    };
+
+    /**
+     * Converts a degree measurement to its corresponding value in radians.
+     * Radians and degrees are two ways of measuring the same thing. There are
+     * 360 degrees in a circle and 2*PI radians in a circle. For example,
+     * 90° = PI/2 = 1.5707964.
+     *
+     * @method radians
+     * @param  {Number} degrees the degree value to convert to radians
+     * @return {Number}         the converted angle
+     *
+     * @example
+     * 

+     * 
+     * var deg = 45.0;
+     * var rad = radians(deg);
+     * print(deg + ' degrees is ' + rad + ' radians');
+     * // Prints: 45 degrees is 0.7853981633974483 radians
+     * 
+     * 

+     */
+    p5.prototype.radians = function(angle) {
+      return polarGeometry.degreesToRadians(angle);
+    };
+
+    /**
+     * Sets the current mode of p5 to given mode. Default mode is RADIANS.
+     *
+     * @method angleMode
+     * @param {Constant} mode either RADIANS or DEGREES
+     *
+     * @example
+     * 

+     * 
+     * function draw() {
+     *   background(204);
+     *   angleMode(DEGREES); // Change the mode to DEGREES
+     *   var a = atan2(mouseY - height / 2, mouseX - width / 2);
+     *   translate(width / 2, height / 2);
+     *   push();
+     *   rotate(a);
+     *   rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
+     *   pop();
+     *   angleMode(RADIANS); // Change the mode to RADIANS
+     *   rotate(a); // var a stays the same
+     *   rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.
+     *
+     *
+     */
+    p5.prototype.angleMode = function(mode) {
+      if (mode === constants.DEGREES || mode === constants.RADIANS) {
+        this._angleMode = mode;
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/constants":21,"../core/core":22,"./polargeometry":54}],57:[function(_dereq_,module,exports){
+    /**
+     * @module Typography
+     * @submodule Attributes
+     * @for p5
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Sets the current alignment for drawing text. Accepts two
+     * arguments: horizAlign (LEFT, CENTER, or RIGHT) and
+     * vertAlign (TOP, BOTTOM, CENTER, or BASELINE).
+     *
+     * The horizAlign parameter is in reference to the x value
+     * of the text() function, while the vertAlign parameter is
+     * in reference to the y value.
+     *
+     * So if you write textAlign(LEFT), you are aligning the left
+     * edge of your text to the x value you give in text(). If you
+     * write textAlign(RIGHT, TOP), you are aligning the right edge
+     * of your text to the x value and the top of edge of the text
+     * to the y value.
+     *
+     * @method textAlign
+     * @param {Constant} horizAlign horizontal alignment, either LEFT,
+     *                            CENTER, or RIGHT
+     * @param {Constant} [vertAlign] vertical alignment, either TOP,
+     *                            BOTTOM, CENTER, or BASELINE
+     * @chainable
+     * @example
+     * 

+     * 
+     * textSize(16);
+     * textAlign(RIGHT);
+     * text('ABCD', 50, 30);
+     * textAlign(CENTER);
+     * text('EFGH', 50, 50);
+     * textAlign(LEFT);
+     * text('IJKL', 50, 70);
+     * 
+     * 

+     *
+     * @alt
+     *Letters ABCD displayed at top right, EFGH at center and IJKL at bottom left.
+     *
+     */
+    /**
+     * @method textAlign
+     * @return {Object}
+     */
+    p5.prototype.textAlign = function(horizAlign, vertAlign) {
+      return this._renderer.textAlign.apply(this._renderer, arguments);
+    };
+
+    /**
+     * Sets/gets the spacing, in pixels, between lines of text. This
+     * setting will be used in all subsequent calls to the text() function.
+     *
+     * @method textLeading
+     * @param {Number} leading the size in pixels for spacing between lines
+     * @chainable
+     *
+     * @example
+     * 

+     * 
+     * // Text to display. The "\n" is a "new line" character
+     * var lines = 'L1\nL2\nL3';
+     * textSize(12);
+     *
+     * textLeading(10); // Set leading to 10
+     * text(lines, 10, 25);
+     *
+     * textLeading(20); // Set leading to 20
+     * text(lines, 40, 25);
+     *
+     * textLeading(30); // Set leading to 30
+     * text(lines, 70, 25);
+     * 
+     * 

+     *
+     * @alt
+     *set L1 L2 & L3 displayed vertically 3 times. spacing increases for each set
+     */
+    /**
+     * @method textLeading
+     * @return {Number}
+     */
+    p5.prototype.textLeading = function(theLeading) {
+      return this._renderer.textLeading.apply(this._renderer, arguments);
+    };
+
+    /**
+     * Sets/gets the current font size. This size will be used in all subsequent
+     * calls to the text() function. Font size is measured in pixels.
+     *
+     * @method textSize
+     * @param {Number} theSize the size of the letters in units of pixels
+     * @chainable
+     *
+     * @example
+     * 

+     * 
+     * textSize(12);
+     * text('Font Size 12', 10, 30);
+     * textSize(14);
+     * text('Font Size 14', 10, 60);
+     * textSize(16);
+     * text('Font Size 16', 10, 90);
+     * 
+     * 

+     *
+     * @alt
+     *Font Size 12 displayed small, Font Size 14 medium & Font Size 16 large
+     */
+    /**
+     * @method textSize
+     * @return {Number}
+     */
+    p5.prototype.textSize = function(theSize) {
+      return this._renderer.textSize.apply(this._renderer, arguments);
+    };
+
+    /**
+     * Sets/gets the style of the text for system fonts to NORMAL, ITALIC, or BOLD.
+     * Note: this may be is overridden by CSS styling. For non-system fonts
+     * (opentype, truetype, etc.) please load styled fonts instead.
+     *
+     * @method textStyle
+     * @param {Constant} theStyle styling for text, either NORMAL,
+     *                            ITALIC, or BOLD
+     * @chainable
+     * @example
+     * 

+     * 
+     * strokeWeight(0);
+     * textSize(12);
+     * textStyle(NORMAL);
+     * text('Font Style Normal', 10, 30);
+     * textStyle(ITALIC);
+     * text('Font Style Italic', 10, 60);
+     * textStyle(BOLD);
+     * text('Font Style Bold', 10, 90);
+     * 
+     * 

+     *
+     * @alt
+     *words Font Style Normal displayed normally, Italic in italic and bold in bold
+     */
+    /**
+     * @method textStyle
+     * @return {String}
+     */
+    p5.prototype.textStyle = function(theStyle) {
+      return this._renderer.textStyle.apply(this._renderer, arguments);
+    };
+
+    /**
+     * Calculates and returns the width of any character or text string.
+     *
+     * @method textWidth
+     * @param {String} theText the String of characters to measure
+     * @return {Number}
+     * @example
+     * 

+     * 
+     * textSize(28);
+     *
+     * var aChar = 'P';
+     * var cWidth = textWidth(aChar);
+     * text(aChar, 0, 40);
+     * line(cWidth, 0, cWidth, 50);
+     *
+     * var aString = 'p5.js';
+     * var sWidth = textWidth(aString);
+     * text(aString, 0, 85);
+     * line(sWidth, 50, sWidth, 100);
+     * 
+     * 

+     *
+     * @alt
+     *Letter P and p5.js are displayed with vertical lines at end. P is wide
+     *
+     */
+    p5.prototype.textWidth = function(theText) {
+      if (theText.length === 0) {
+        return 0;
+      }
+      return this._renderer.textWidth.apply(this._renderer, arguments);
+    };
+
+    /**
+     * Returns the ascent of the current font at its current size. The ascent
+     * represents the distance, in pixels, of the tallest character above
+     * the baseline.
+     * @method textAscent
+     * @return {Number}
+     * @example
+     * 

+     * 
+     * var base = height * 0.75;
+     * var scalar = 0.8; // Different for each font
+     *
+     * textSize(32); // Set initial text size
+     * var asc = textAscent() * scalar; // Calc ascent
+     * line(0, base - asc, width, base - asc);
+     * text('dp', 0, base); // Draw text on baseline
+     *
+     * textSize(64); // Increase text size
+     * asc = textAscent() * scalar; // Recalc ascent
+     * line(40, base - asc, width, base - asc);
+     * text('dp', 40, base); // Draw text on baseline
+     * 
+     * 

+     */
+    p5.prototype.textAscent = function() {
+      return this._renderer.textAscent();
+    };
+
+    /**
+     * Returns the descent of the current font at its current size. The descent
+     * represents the distance, in pixels, of the character with the longest
+     * descender below the baseline.
+     * @method textDescent
+     * @return {Number}
+     * @example
+     * 

+     * 
+     * var base = height * 0.75;
+     * var scalar = 0.8; // Different for each font
+     *
+     * textSize(32); // Set initial text size
+     * var desc = textDescent() * scalar; // Calc ascent
+     * line(0, base + desc, width, base + desc);
+     * text('dp', 0, base); // Draw text on baseline
+     *
+     * textSize(64); // Increase text size
+     * desc = textDescent() * scalar; // Recalc ascent
+     * line(40, base + desc, width, base + desc);
+     * text('dp', 40, base); // Draw text on baseline
+     * 
+     * 

+     */
+    p5.prototype.textDescent = function() {
+      return this._renderer.textDescent();
+    };
+
+    /**
+     * Helper function to measure ascent and descent.
+     */
+    p5.prototype._updateTextMetrics = function() {
+      return this._renderer._updateTextMetrics();
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],58:[function(_dereq_,module,exports){
+    /**
+     * @module Typography
+     * @submodule Loading & Displaying
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var constants = _dereq_('../core/constants');
+    var opentype = _dereq_('opentype.js');
+
+    _dereq_('../core/error_helpers');
+
+    /**
+     * Loads an opentype font file (.otf, .ttf) from a file or a URL,
+     * and returns a PFont Object. This method is asynchronous,
+     * meaning it may not finish before the next line in your sketch
+     * is executed.
+     * 


+     * The path to the font should be relative to the HTML file
+     * that links in your sketch. Loading an from a URL or other
+     * remote location may be blocked due to your browser's built-in
+     * security.
+     *
+     * @method loadFont
+     * @param  {String}        path       name of the file or url to load
+     * @param  {Function}      [callback] function to be executed after
+     *                                    loadFont() completes
+     * @param  {Function}      [onError]  function to be executed if
+     *                                    an error occurs
+     * @return {p5.Font}                  p5.Font object
+     * @example
+     *
+     * 
Calling loadFont() inside preload() guarantees that the load
+     * operation will have completed before setup() and draw() are called.

+     *
+     * 

+     * var myFont;
+     * function preload() {
+     *   myFont = loadFont('assets/AvenirNextLTPro-Demi.otf');
+     * }
+     *
+     * function setup() {
+     *   fill('#ED225D');
+     *   textFont(myFont);
+     *   textSize(36);
+     *   text('p5*js', 10, 50);
+     * }
+     * 

+     *
+     * Outside of preload(), you may supply a callback function to handle the
+     * object:
+     *
+     * 

+     * function setup() {
+     *   loadFont('assets/AvenirNextLTPro-Demi.otf', drawText);
+     * }
+     *
+     * function drawText(font) {
+     *   fill('#ED225D');
+     *   textFont(font, 36);
+     *   text('p5*js', 10, 50);
+     * }
+     * 

+     *
+     * 
You can also use the string name of the font to style other HTML
+     * elements.

+     *
+     * 

+     * function preload() {
+     *   loadFont('assets/Avenir.otf');
+     * }
+     *
+     * function setup() {
+     *   var myDiv = createDiv('hello there');
+     *   myDiv.style('font-family', 'Avenir');
+     * }
+     * 

+     *
+     * @alt
+     * p5*js in p5's theme dark pink
+     * p5*js in p5's theme dark pink
+     *
+     */
+    p5.prototype.loadFont = function(path, onSuccess, onError) {
+      var p5Font = new p5.Font(this);
+
+      var self = this;
+      opentype.load(path, function(err, font) {
+        if (err) {
+          if (typeof onError !== 'undefined') {
+            return onError(err);
+          }
+          p5._friendlyFileLoadError(4, path);
+          console.error(err, path);
+          return;
+        }
+
+        p5Font.font = font;
+
+        if (typeof onSuccess !== 'undefined') {
+          onSuccess(p5Font);
+        }
+
+        self._decrementPreload();
+
+        // check that we have an acceptable font type
+        var validFontTypes = ['ttf', 'otf', 'woff', 'woff2'],
+          fileNoPath = path
+            .split('\\')
+            .pop()
+            .split('/')
+            .pop(),
+          lastDotIdx = fileNoPath.lastIndexOf('.'),
+          fontFamily,
+          newStyle,
+          fileExt = lastDotIdx < 1 ? null : fileNoPath.substr(lastDotIdx + 1);
+
+        // if so, add it to the DOM (name-only) for use with p5.dom
+        if (validFontTypes.indexOf(fileExt) > -1) {
+          fontFamily = fileNoPath.substr(0, lastDotIdx);
+          newStyle = document.createElement('style');
+          newStyle.appendChild(
+            document.createTextNode(
+              '\n@font-face {' +
+                '\nfont-family: ' +
+                fontFamily +
+                ';\nsrc: url(' +
+                path +
+                ');\n}\n'
+            )
+          );
+          document.head.appendChild(newStyle);
+        }
+      });
+
+      return p5Font;
+    };
+
+    /**
+     * Draws text to the screen. Displays the information specified in the first
+     * parameter on the screen in the position specified by the additional
+     * parameters. A default font will be used unless a font is set with the
+     * textFont() function and a default size will be used unless a font is set
+     * with textSize(). Change the color of the text with the fill() function.
+     * Change the outline of the text with the stroke() and strokeWeight()
+     * functions.
+     * 


+     * The text displays in relation to the textAlign() function, which gives the
+     * option to draw to the left, right, and center of the coordinates.
+     * 


+     * The x2 and y2 parameters define a rectangular area to display within and
+     * may only be used with string data. When these parameters are specified,
+     * they are interpreted based on the current rectMode() setting. Text that
+     * does not fit completely within the rectangle specified will not be drawn
+     * to the screen.
+     *
+     * @method text
+     * @param {String|Object|Array} str the alphanumeric symbols to be displayed
+     * @param {Number} x   x-coordinate of text
+     * @param {Number} y   y-coordinate of text
+     * @param {Number} [x2]  by default, the width of the text box,
+     *                     see rectMode() for more info
+     * @param {Number} [y2]  by default, the height of the text box,
+     *                     see rectMode() for more info
+     * @chainable
+     * @example
+     * 

+     * 
+     * textSize(32);
+     * text('word', 10, 30);
+     * fill(0, 102, 153);
+     * text('word', 10, 60);
+     * fill(0, 102, 153, 51);
+     * text('word', 10, 90);
+     * 
+     * 

+     * 

+     * 
+     * var s = 'The quick brown fox jumped over the lazy dog.';
+     * fill(50);
+     * text(s, 10, 10, 70, 80); // Text wraps within text box
+     * 
+     * 

+     *
+     * @alt
+     *'word' displayed 3 times going from black, blue to translucent blue
+     * The quick brown fox jumped over the lazy dog.
+     *
+     */
+    p5.prototype.text = function(str, x, y, maxWidth, maxHeight) {
+      return !(this._renderer._doFill || this._renderer._doStroke)
+        ? this
+        : this._renderer.text.apply(this._renderer, arguments);
+    };
+
+    /**
+     * Sets the current font that will be drawn with the text() function.
+     *
+     * @method textFont
+     * @return {Object} the current font
+     *
+     * @example
+     * 

+     * 
+     * fill(0);
+     * textSize(12);
+     * textFont('Georgia');
+     * text('Georgia', 12, 30);
+     * textFont('Helvetica');
+     * text('Helvetica', 12, 60);
+     * 
+     * 

+     * 

+     * 
+     * var fontRegular, fontItalic, fontBold;
+     * function preload() {
+     *   fontRegular = loadFont('assets/Regular.otf');
+     *   fontItalic = loadFont('assets/Italic.ttf');
+     *   fontBold = loadFont('assets/Bold.ttf');
+     * }
+     * function setup() {
+     *   background(210);
+     *   fill(0)
+        .strokeWeight(0)
+        .textSize(10);
+     *   textFont(fontRegular);
+     *   text('Font Style Normal', 10, 30);
+     *   textFont(fontItalic);
+     *   text('Font Style Italic', 10, 50);
+     *   textFont(fontBold);
+     *   text('Font Style Bold', 10, 70);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     *words Font Style Normal displayed normally, Italic in italic and bold in bold
+     */
+    /**
+     * @method textFont
+     * @param {Object|String} font a font loaded via loadFont(), or a String
+     * representing a web safe font (a font
+     * that is generally available across all systems)
+     * @param {Number} [size] the font size to use
+     * @chainable
+     */
+    p5.prototype.textFont = function(theFont, theSize) {
+      if (arguments.length) {
+        if (!theFont) {
+          throw Error('null font passed to textFont');
+        }
+
+        this._renderer._setProperty('_textFont', theFont);
+
+        if (theSize) {
+          this._renderer._setProperty('_textSize', theSize);
+          this._renderer._setProperty(
+            '_textLeading',
+            theSize * constants._DEFAULT_LEADMULT
+          );
+        }
+
+        return this._renderer._applyTextProperties();
+      }
+
+      return this._renderer._textFont;
+    };
+
+    module.exports = p5;
+
+    },{"../core/constants":21,"../core/core":22,"../core/error_helpers":25,"opentype.js":10}],59:[function(_dereq_,module,exports){
+    /**
+     * This module defines the p5.Font class and functions for
+     * drawing text to the display canvas.
+     * @module Typography
+     * @submodule Font
+     * @requires core
+     * @requires constants
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var constants = _dereq_('../core/constants');
+
+    /*
+     * TODO:
+     * -- kerning
+     * -- alignment: justified?
+     */
+
+    /**
+     * Base class for font handling
+     * @class p5.Font
+     * @constructor
+     * @param {p5} [pInst] pointer to p5 instance
+     */
+    p5.Font = function(p) {
+      this.parent = p;
+
+      this.cache = {};
+
+      /**
+       * Underlying opentype font implementation
+       * @property font
+       */
+      this.font = undefined;
+      this.name = 'p5.Font'; // for friendly debugger system
+    };
+
+    p5.Font.prototype.list = function() {
+      // TODO
+      throw 'not yet implemented';
+    };
+
+    /**
+     * Returns a tight bounding box for the given text string using this
+     * font (currently only supports single lines)
+     *
+     * @method textBounds
+     * @param  {String} line     a line of text
+     * @param  {Number} x        x-position
+     * @param  {Number} y        y-position
+     * @param  {Number} [fontSize] font size to use (optional)
+     * @param  {Object} [options] opentype options (optional)
+     *
+     * @return {Object}          a rectangle object with properties: x, y, w, h
+     *
+     * @example
+     * 

+     * 
+     * var font;
+     * var textString = 'Lorem ipsum dolor sit amet.';
+     * function preload() {
+     *   font = loadFont('./assets/Regular.otf');
+     * }
+     * function setup() {
+     *   background(210);
+     *
+     *   var bbox = font.textBounds(textString, 10, 30, 12);
+     *   fill(255);
+     *   stroke(0);
+     *   rect(bbox.x, bbox.y, bbox.w, bbox.h);
+     *   fill(0);
+     *   noStroke();
+     *
+     *   textFont(font);
+     *   textSize(12);
+     *   text(textString, 10, 30);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     *words Lorem ipsum dol go off canvas and contained by white bounding box
+     *
+     */
+    p5.Font.prototype.textBounds = function(str, x, y, fontSize, options) {
+      x = x !== undefined ? x : 0;
+      y = y !== undefined ? y : 0;
+      fontSize = fontSize || this.parent._renderer._textSize;
+
+      // Check cache for existing bounds. Take into consideration the text alignment
+      // settings. Default alignment should match opentype's origin: left-aligned &
+      // alphabetic baseline.
+      var p =
+          (options && options.renderer && options.renderer._pInst) || this.parent,
+        ctx = p._renderer.drawingContext,
+        alignment = ctx.textAlign || constants.LEFT,
+        baseline = ctx.textBaseline || constants.BASELINE,
+        key = cacheKey('textBounds', str, x, y, fontSize, alignment, baseline),
+        result = this.cache[key];
+
+      if (!result) {
+        var minX,
+          minY,
+          maxX,
+          maxY,
+          pos,
+          xCoords = [],
+          yCoords = [],
+          scale = this._scale(fontSize);
+
+        this.font.forEachGlyph(str, x, y, fontSize, options, function(
+          glyph,
+          gX,
+          gY,
+          gFontSize
+        ) {
+          var gm = glyph.getMetrics();
+          xCoords.push(gX + gm.xMin * scale);
+          xCoords.push(gX + gm.xMax * scale);
+          yCoords.push(gY + -gm.yMin * scale);
+          yCoords.push(gY + -gm.yMax * scale);
+        });
+
+        minX = Math.min.apply(null, xCoords);
+        minY = Math.min.apply(null, yCoords);
+        maxX = Math.max.apply(null, xCoords);
+        maxY = Math.max.apply(null, yCoords);
+
+        result = {
+          x: minX,
+          y: minY,
+          h: maxY - minY,
+          w: maxX - minX,
+          advance: minX - x
+        };
+
+        // Bounds are now calculated, so shift the x & y to match alignment settings
+        pos = this._handleAlignment(
+          p,
+          ctx,
+          str,
+          result.x,
+          result.y,
+          result.w + result.advance
+        );
+
+        result.x = pos.x;
+        result.y = pos.y;
+
+        this.cache[
+          cacheKey('textBounds', str, x, y, fontSize, alignment, baseline)
+        ] = result;
+      }
+
+      return result;
+    };
+
+    /**
+     * Computes an array of points following the path for specified text
+     *
+     * @method textToPoints
+     * @param  {String} txt     a line of text
+     * @param  {Number} x        x-position
+     * @param  {Number} y        y-position
+     * @param  {Number} fontSize font size to use (optional)
+     * @param  {Object} [options] an (optional) object that can contain:
+     *
+     * 
sampleFactor - the ratio of path-length to number of samples
+     * (default=.25); higher values yield more points and are therefore
+     * more precise
+     *
+     * 
simplifyThreshold - if set to a non-zero value, collinear points will be
+     * be removed from the polygon; the value represents the threshold angle to use
+     * when determining whether two edges are collinear
+     *
+     * @return {Array}  an array of points, each with x, y, alpha (the path angle)
+     * @example
+     * 

+     * 
+     * var font;
+     * function preload() {
+     *   font = loadFont('./assets/Avenir.otf');
+     * }
+     *
+     * var points;
+     * var bounds;
+     * function setup() {
+     *   createCanvas(100, 100);
+     *   stroke(0);
+     *   fill(255, 104, 204);
+     *
+     *   points = font.textToPoints('p5', 0, 0, 10, {
+     *     sampleFactor: 5,
+     *     simplifyThreshold: 0
+     *   });
+     *   bounds = font.textBounds(' p5 ', 0, 0, 10);
+     * }
+     *
+     * function draw() {
+     *   background(255);
+     *   beginShape();
+     *   translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);
+     *   for (var i = 0; i < points.length; i++) {
+     *     var p = points[i];
+     *     vertex(
+     *       p.x * width / bounds.w +
+     *         sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,
+     *       p.y * height / bounds.h
+     *     );
+     *   }
+     *   endShape(CLOSE);
+     * }
+     * 
+     * 

+     *
+     */
+    p5.Font.prototype.textToPoints = function(txt, x, y, fontSize, options) {
+      var xoff = 0,
+        result = [],
+        glyphs = this._getGlyphs(txt);
+
+      function isSpace(i) {
+        return (
+          (glyphs[i].name && glyphs[i].name === 'space') ||
+          (txt.length === glyphs.length && txt[i] === ' ') ||
+          (glyphs[i].index && glyphs[i].index === 3)
+        );
+      }
+
+      fontSize = fontSize || this.parent._renderer._textSize;
+
+      for (var i = 0; i < glyphs.length; i++) {
+        if (!isSpace(i)) {
+          // fix to #1817, #2069
+
+          var gpath = glyphs[i].getPath(x, y, fontSize),
+            paths = splitPaths(gpath.commands);
+
+          for (var j = 0; j < paths.length; j++) {
+            var pts = pathToPoints(paths[j], options);
+
+            for (var k = 0; k < pts.length; k++) {
+              pts[k].x += xoff;
+              result.push(pts[k]);
+            }
+          }
+        }
+
+        xoff += glyphs[i].advanceWidth * this._scale(fontSize);
+      }
+
+      return result;
+    };
+
+    // ----------------------------- End API ------------------------------
+
+    /**
+     * Returns the set of opentype glyphs for the supplied string.
+     *
+     * Note that there is not a strict one-to-one mapping between characters
+     * and glyphs, so the list of returned glyphs can be larger or smaller
+     *  than the length of the given string.
+     *
+     * @private
+     * @param  {String} str the string to be converted
+     * @return {Array}     the opentype glyphs
+     */
+    p5.Font.prototype._getGlyphs = function(str) {
+      return this.font.stringToGlyphs(str);
+    };
+
+    /**
+     * Returns an opentype path for the supplied string and position.
+     *
+     * @private
+     * @param  {String} line     a line of text
+     * @param  {Number} x        x-position
+     * @param  {Number} y        y-position
+     * @param  {Object} options opentype options (optional)
+     * @return {Object}     the opentype path
+     */
+    p5.Font.prototype._getPath = function(line, x, y, options) {
+      var p =
+          (options && options.renderer && options.renderer._pInst) || this.parent,
+        ctx = p._renderer.drawingContext,
+        pos = this._handleAlignment(p, ctx, line, x, y);
+
+      return this.font.getPath(line, pos.x, pos.y, p._renderer._textSize, options);
+    };
+
+    /*
+     * Creates an SVG-formatted path-data string
+     * (See http://www.w3.org/TR/SVG/paths.html#PathData)
+     * from the given opentype path or string/position
+     *
+     * @param  {Object} path    an opentype path, OR the following:
+     *
+     * @param  {String} line     a line of text
+     * @param  {Number} x        x-position
+     * @param  {Number} y        y-position
+     * @param  {Object} options opentype options (optional), set options.decimals
+     * to set the decimal precision of the path-data
+     *
+     * @return {Object}     this p5.Font object
+     */
+    p5.Font.prototype._getPathData = function(line, x, y, options) {
+      var decimals = 3;
+
+      // create path from string/position
+      if (typeof line === 'string' && arguments.length > 2) {
+        line = this._getPath(line, x, y, options);
+      } else if (typeof x === 'object') {
+        // handle options specified in 2nd arg
+        options = x;
+      }
+
+      // handle svg arguments
+      if (options && typeof options.decimals === 'number') {
+        decimals = options.decimals;
+      }
+
+      return line.toPathData(decimals);
+    };
+
+    /*
+     * Creates an SVG  element, as a string,
+     * from the given opentype path or string/position
+     *
+     * @param  {Object} path    an opentype path, OR the following:
+     *
+     * @param  {String} line     a line of text
+     * @param  {Number} x        x-position
+     * @param  {Number} y        y-position
+     * @param  {Object} options opentype options (optional), set options.decimals
+     * to set the decimal precision of the path-data in the  element,
+     *  options.fill to set the fill color for the  element,
+     *  options.stroke to set the stroke color for the  element,
+     *  options.strokeWidth to set the strokeWidth for the  element.
+     *
+     * @return {Object}     this p5.Font object
+     */
+    p5.Font.prototype._getSVG = function(line, x, y, options) {
+      var decimals = 3;
+
+      // create path from string/position
+      if (typeof line === 'string' && arguments.length > 2) {
+        line = this._getPath(line, x, y, options);
+      } else if (typeof x === 'object') {
+        // handle options specified in 2nd arg
+        options = x;
+      }
+
+      // handle svg arguments
+      if (options) {
+        if (typeof options.decimals === 'number') {
+          decimals = options.decimals;
+        }
+        if (typeof options.strokeWidth === 'number') {
+          line.strokeWidth = options.strokeWidth;
+        }
+        if (typeof options.fill !== 'undefined') {
+          line.fill = options.fill;
+        }
+        if (typeof options.stroke !== 'undefined') {
+          line.stroke = options.stroke;
+        }
+      }
+
+      return line.toSVG(decimals);
+    };
+
+    /*
+     * Renders an opentype path or string/position
+     * to the current graphics context
+     *
+     * @param  {Object} path    an opentype path, OR the following:
+     *
+     * @param  {String} line     a line of text
+     * @param  {Number} x        x-position
+     * @param  {Number} y        y-position
+     * @param  {Object} options opentype options (optional)
+     *
+     * @return {p5.Font}     this p5.Font object
+     */
+    p5.Font.prototype._renderPath = function(line, x, y, options) {
+      var pdata,
+        pg = (options && options.renderer) || this.parent._renderer,
+        ctx = pg.drawingContext;
+
+      if (typeof line === 'object' && line.commands) {
+        pdata = line.commands;
+      } else {
+        //pos = handleAlignment(p, ctx, line, x, y);
+        pdata = this._getPath(line, x, y, options).commands;
+      }
+
+      ctx.beginPath();
+      for (var i = 0; i < pdata.length; i += 1) {
+        var cmd = pdata[i];
+        if (cmd.type === 'M') {
+          ctx.moveTo(cmd.x, cmd.y);
+        } else if (cmd.type === 'L') {
+          ctx.lineTo(cmd.x, cmd.y);
+        } else if (cmd.type === 'C') {
+          ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+        } else if (cmd.type === 'Q') {
+          ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
+        } else if (cmd.type === 'Z') {
+          ctx.closePath();
+        }
+      }
+
+      // only draw stroke if manually set by user
+      if (pg._doStroke && pg._strokeSet) {
+        ctx.stroke();
+      }
+
+      if (pg._doFill) {
+        // if fill hasn't been set by user, use default-text-fill
+        if (!pg._fillSet) {
+          pg._setFill(constants._DEFAULT_TEXT_FILL);
+        }
+        ctx.fill();
+      }
+
+      return this;
+    };
+
+    p5.Font.prototype._textWidth = function(str, fontSize) {
+      return this.font.getAdvanceWidth(str, fontSize);
+    };
+
+    p5.Font.prototype._textAscent = function(fontSize) {
+      return this.font.ascender * this._scale(fontSize);
+    };
+
+    p5.Font.prototype._textDescent = function(fontSize) {
+      return -this.font.descender * this._scale(fontSize);
+    };
+
+    p5.Font.prototype._scale = function(fontSize) {
+      return (
+        1 / this.font.unitsPerEm * (fontSize || this.parent._renderer._textSize)
+      );
+    };
+
+    p5.Font.prototype._handleAlignment = function(p, ctx, line, x, y, textWidth) {
+      var fontSize = p._renderer._textSize,
+        textAscent = this._textAscent(fontSize),
+        textDescent = this._textDescent(fontSize);
+
+      textWidth =
+        textWidth !== undefined ? textWidth : this._textWidth(line, fontSize);
+
+      if (ctx.textAlign === constants.CENTER) {
+        x -= textWidth / 2;
+      } else if (ctx.textAlign === constants.RIGHT) {
+        x -= textWidth;
+      }
+
+      if (ctx.textBaseline === constants.TOP) {
+        y += textAscent;
+      } else if (ctx.textBaseline === constants._CTX_MIDDLE) {
+        y += textAscent / 2;
+      } else if (ctx.textBaseline === constants.BOTTOM) {
+        y -= textDescent;
+      }
+
+      return { x: x, y: y };
+    };
+
+    // path-utils
+
+    function pathToPoints(cmds, options) {
+      var opts = parseOpts(options, {
+        sampleFactor: 0.1,
+        simplifyThreshold: 0
+      });
+
+      var len = pointAtLength(cmds, 0, 1), // total-length
+        t = len / (len * opts.sampleFactor),
+        pts = [];
+
+      for (var i = 0; i < len; i += t) {
+        pts.push(pointAtLength(cmds, i));
+      }
+
+      if (opts.simplifyThreshold) {
+        /*var count = */ simplify(pts, opts.simplifyThreshold);
+        //console.log('Simplify: removed ' + count + ' pts');
+      }
+
+      return pts;
+    }
+
+    function simplify(pts, angle) {
+      angle = typeof angle === 'undefined' ? 0 : angle;
+
+      var num = 0;
+      for (var i = pts.length - 1; pts.length > 3 && i >= 0; --i) {
+        if (collinear(at(pts, i - 1), at(pts, i), at(pts, i + 1), angle)) {
+          // Remove the middle point
+          pts.splice(i % pts.length, 1);
+          num++;
+        }
+      }
+      return num;
+    }
+
+    function splitPaths(cmds) {
+      var paths = [],
+        current;
+      for (var i = 0; i < cmds.length; i++) {
+        if (cmds[i].type === 'M') {
+          if (current) {
+            paths.push(current);
+          }
+          current = [];
+        }
+        current.push(cmdToArr(cmds[i]));
+      }
+      paths.push(current);
+
+      return paths;
+    }
+
+    function cmdToArr(cmd) {
+      var arr = [cmd.type];
+      if (cmd.type === 'M' || cmd.type === 'L') {
+        // moveto or lineto
+        arr.push(cmd.x, cmd.y);
+      } else if (cmd.type === 'C') {
+        arr.push(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+      } else if (cmd.type === 'Q') {
+        arr.push(cmd.x1, cmd.y1, cmd.x, cmd.y);
+      }
+      // else if (cmd.type === 'Z') { /* no-op */ }
+      return arr;
+    }
+
+    function parseOpts(options, defaults) {
+      if (typeof options !== 'object') {
+        options = defaults;
+      } else {
+        for (var key in defaults) {
+          if (typeof options[key] === 'undefined') {
+            options[key] = defaults[key];
+          }
+        }
+      }
+      return options;
+    }
+
+    //////////////////////// Helpers ////////////////////////////
+
+    function at(v, i) {
+      var s = v.length;
+      return v[i < 0 ? i % s + s : i % s];
+    }
+
+    function collinear(a, b, c, thresholdAngle) {
+      if (!thresholdAngle) {
+        return areaTriangle(a, b, c) === 0;
+      }
+
+      if (typeof collinear.tmpPoint1 === 'undefined') {
+        collinear.tmpPoint1 = [];
+        collinear.tmpPoint2 = [];
+      }
+
+      var ab = collinear.tmpPoint1,
+        bc = collinear.tmpPoint2;
+      ab.x = b.x - a.x;
+      ab.y = b.y - a.y;
+      bc.x = c.x - b.x;
+      bc.y = c.y - b.y;
+
+      var dot = ab.x * bc.x + ab.y * bc.y,
+        magA = Math.sqrt(ab.x * ab.x + ab.y * ab.y),
+        magB = Math.sqrt(bc.x * bc.x + bc.y * bc.y),
+        angle = Math.acos(dot / (magA * magB));
+
+      return angle < thresholdAngle;
+    }
+
+    function areaTriangle(a, b, c) {
+      return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
+    }
+
+    // Portions of below code copyright 2008 Dmitry Baranovskiy (via MIT license)
+
+    function findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+      var t1 = 1 - t,
+        t13 = Math.pow(t1, 3),
+        t12 = Math.pow(t1, 2),
+        t2 = t * t,
+        t3 = t2 * t,
+        x = t13 * p1x + t12 * 3 * t * c1x + t1 * 3 * t * t * c2x + t3 * p2x,
+        y = t13 * p1y + t12 * 3 * t * c1y + t1 * 3 * t * t * c2y + t3 * p2y,
+        mx = p1x + 2 * t * (c1x - p1x) + t2 * (c2x - 2 * c1x + p1x),
+        my = p1y + 2 * t * (c1y - p1y) + t2 * (c2y - 2 * c1y + p1y),
+        nx = c1x + 2 * t * (c2x - c1x) + t2 * (p2x - 2 * c2x + c1x),
+        ny = c1y + 2 * t * (c2y - c1y) + t2 * (p2y - 2 * c2y + c1y),
+        ax = t1 * p1x + t * c1x,
+        ay = t1 * p1y + t * c1y,
+        cx = t1 * c2x + t * p2x,
+        cy = t1 * c2y + t * p2y,
+        alpha = 90 - Math.atan2(mx - nx, my - ny) * 180 / Math.PI;
+
+      if (mx > nx || my < ny) {
+        alpha += 180;
+      }
+
+      return {
+        x: x,
+        y: y,
+        m: { x: mx, y: my },
+        n: { x: nx, y: ny },
+        start: { x: ax, y: ay },
+        end: { x: cx, y: cy },
+        alpha: alpha
+      };
+    }
+
+    function getPointAtSegmentLength(
+      p1x,
+      p1y,
+      c1x,
+      c1y,
+      c2x,
+      c2y,
+      p2x,
+      p2y,
+      length
+    ) {
+      return length == null
+        ? bezlen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y)
+        : findDotsAtSegment(
+            p1x,
+            p1y,
+            c1x,
+            c1y,
+            c2x,
+            c2y,
+            p2x,
+            p2y,
+            getTatLen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length)
+          );
+    }
+
+    function pointAtLength(path, length, istotal) {
+      path = path2curve(path);
+      var x,
+        y,
+        p,
+        l,
+        sp = '',
+        subpaths = {},
+        point,
+        len = 0;
+      for (var i = 0, ii = path.length; i < ii; i++) {
+        p = path[i];
+        if (p[0] === 'M') {
+          x = +p[1];
+          y = +p[2];
+        } else {
+          l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
+          if (len + l > length) {
+            if (!istotal) {
+              point = getPointAtSegmentLength(
+                x,
+                y,
+                p[1],
+                p[2],
+                p[3],
+                p[4],
+                p[5],
+                p[6],
+                length - len
+              );
+              return { x: point.x, y: point.y, alpha: point.alpha };
+            }
+          }
+          len += l;
+          x = +p[5];
+          y = +p[6];
+        }
+        sp += p.shift() + p;
+      }
+      subpaths.end = sp;
+
+      point = istotal
+        ? len
+        : findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
+
+      if (point.alpha) {
+        point = { x: point.x, y: point.y, alpha: point.alpha };
+      }
+
+      return point;
+    }
+
+    function pathToAbsolute(pathArray) {
+      var res = [],
+        x = 0,
+        y = 0,
+        mx = 0,
+        my = 0,
+        start = 0;
+      if (!pathArray) {
+        // console.warn("Unexpected state: undefined pathArray"); // shouldn't happen
+        return res;
+      }
+      if (pathArray[0][0] === 'M') {
+        x = +pathArray[0][1];
+        y = +pathArray[0][2];
+        mx = x;
+        my = y;
+        start++;
+        res[0] = ['M', x, y];
+      }
+
+      var dots,
+        crz =
+          pathArray.length === 3 &&
+          pathArray[0][0] === 'M' &&
+          pathArray[1][0].toUpperCase() === 'R' &&
+          pathArray[2][0].toUpperCase() === 'Z';
+
+      for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) {
+        res.push((r = []));
+        pa = pathArray[i];
+        if (pa[0] !== String.prototype.toUpperCase.call(pa[0])) {
+          r[0] = String.prototype.toUpperCase.call(pa[0]);
+          switch (r[0]) {
+            case 'A':
+              r[1] = pa[1];
+              r[2] = pa[2];
+              r[3] = pa[3];
+              r[4] = pa[4];
+              r[5] = pa[5];
+              r[6] = +(pa[6] + x);
+              r[7] = +(pa[7] + y);
+              break;
+            case 'V':
+              r[1] = +pa[1] + y;
+              break;
+            case 'H':
+              r[1] = +pa[1] + x;
+              break;
+            case 'R':
+              dots = [x, y].concat(pa.slice(1));
+              for (var j = 2, jj = dots.length; j < jj; j++) {
+                dots[j] = +dots[j] + x;
+                dots[++j] = +dots[j] + y;
+              }
+              res.pop();
+              res = res.concat(catmullRom2bezier(dots, crz));
+              break;
+            case 'M':
+              mx = +pa[1] + x;
+              my = +pa[2] + y;
+              break;
+            default:
+              for (j = 1, jj = pa.length; j < jj; j++) {
+                r[j] = +pa[j] + (j % 2 ? x : y);
+              }
+          }
+        } else if (pa[0] === 'R') {
+          dots = [x, y].concat(pa.slice(1));
+          res.pop();
+          res = res.concat(catmullRom2bezier(dots, crz));
+          r = ['R'].concat(pa.slice(-2));
+        } else {
+          for (var k = 0, kk = pa.length; k < kk; k++) {
+            r[k] = pa[k];
+          }
+        }
+        switch (r[0]) {
+          case 'Z':
+            x = mx;
+            y = my;
+            break;
+          case 'H':
+            x = r[1];
+            break;
+          case 'V':
+            y = r[1];
+            break;
+          case 'M':
+            mx = r[r.length - 2];
+            my = r[r.length - 1];
+            break;
+          default:
+            x = r[r.length - 2];
+            y = r[r.length - 1];
+        }
+      }
+      return res;
+    }
+
+    function path2curve(path, path2) {
+      var p = pathToAbsolute(path),
+        p2 = path2 && pathToAbsolute(path2);
+      var attrs = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null };
+      var attrs2 = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null };
+      var pcoms1 = []; // path commands of original path p
+      var pcoms2 = []; // path commands of original path p2
+      var ii;
+
+      var processPath = function(path, d, pcom) {
+          var nx,
+            ny,
+            tq = { T: 1, Q: 1 };
+          if (!path) {
+            return ['C', d.x, d.y, d.x, d.y, d.x, d.y];
+          }
+          if (!(path[0] in tq)) {
+            d.qx = d.qy = null;
+          }
+          switch (path[0]) {
+            case 'M':
+              d.X = path[1];
+              d.Y = path[2];
+              break;
+            case 'A':
+              path = ['C'].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1))));
+              break;
+            case 'S':
+              if (pcom === 'C' || pcom === 'S') {
+                nx = d.x * 2 - d.bx;
+                ny = d.y * 2 - d.by;
+              } else {
+                nx = d.x;
+                ny = d.y;
+              }
+              path = ['C', nx, ny].concat(path.slice(1));
+              break;
+            case 'T':
+              if (pcom === 'Q' || pcom === 'T') {
+                d.qx = d.x * 2 - d.qx;
+                d.qy = d.y * 2 - d.qy;
+              } else {
+                d.qx = d.x;
+                d.qy = d.y;
+              }
+              path = ['C'].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
+              break;
+            case 'Q':
+              d.qx = path[1];
+              d.qy = path[2];
+              path = ['C'].concat(
+                q2c(d.x, d.y, path[1], path[2], path[3], path[4])
+              );
+              break;
+            case 'L':
+              path = ['C'].concat(l2c(d.x, d.y, path[1], path[2]));
+              break;
+            case 'H':
+              path = ['C'].concat(l2c(d.x, d.y, path[1], d.y));
+              break;
+            case 'V':
+              path = ['C'].concat(l2c(d.x, d.y, d.x, path[1]));
+              break;
+            case 'Z':
+              path = ['C'].concat(l2c(d.x, d.y, d.X, d.Y));
+              break;
+          }
+          return path;
+        },
+        fixArc = function(pp, i) {
+          if (pp[i].length > 7) {
+            pp[i].shift();
+            var pi = pp[i];
+            while (pi.length) {
+              pcoms1[i] = 'A';
+              if (p2) {
+                pcoms2[i] = 'A';
+              }
+              pp.splice(i++, 0, ['C'].concat(pi.splice(0, 6)));
+            }
+            pp.splice(i, 1);
+            ii = Math.max(p.length, (p2 && p2.length) || 0);
+          }
+        },
+        fixM = function(path1, path2, a1, a2, i) {
+          if (path1 && path2 && path1[i][0] === 'M' && path2[i][0] !== 'M') {
+            path2.splice(i, 0, ['M', a2.x, a2.y]);
+            a1.bx = 0;
+            a1.by = 0;
+            a1.x = path1[i][1];
+            a1.y = path1[i][2];
+            ii = Math.max(p.length, (p2 && p2.length) || 0);
+          }
+        };
+
+      var pfirst = ''; // temporary holder for original path command
+      var pcom = ''; // holder for previous path command of original path
+
+      ii = Math.max(p.length, (p2 && p2.length) || 0);
+      for (var i = 0; i < ii; i++) {
+        if (p[i]) {
+          pfirst = p[i][0];
+        } // save current path command
+
+        if (pfirst !== 'C') {
+          pcoms1[i] = pfirst; // Save current path command
+          if (i) {
+            pcom = pcoms1[i - 1];
+          } // Get previous path command pcom
+        }
+        p[i] = processPath(p[i], attrs, pcom);
+
+        if (pcoms1[i] !== 'A' && pfirst === 'C') {
+          pcoms1[i] = 'C';
+        }
+
+        fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1
+
+        if (p2) {
+          // the same procedures is done to p2
+          if (p2[i]) {
+            pfirst = p2[i][0];
+          }
+          if (pfirst !== 'C') {
+            pcoms2[i] = pfirst;
+            if (i) {
+              pcom = pcoms2[i - 1];
+            }
+          }
+          p2[i] = processPath(p2[i], attrs2, pcom);
+
+          if (pcoms2[i] !== 'A' && pfirst === 'C') {
+            pcoms2[i] = 'C';
+          }
+
+          fixArc(p2, i);
+        }
+        fixM(p, p2, attrs, attrs2, i);
+        fixM(p2, p, attrs2, attrs, i);
+        var seg = p[i],
+          seg2 = p2 && p2[i],
+          seglen = seg.length,
+          seg2len = p2 && seg2.length;
+        attrs.x = seg[seglen - 2];
+        attrs.y = seg[seglen - 1];
+        attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
+        attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
+        attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x);
+        attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y);
+        attrs2.x = p2 && seg2[seg2len - 2];
+        attrs2.y = p2 && seg2[seg2len - 1];
+      }
+
+      return p2 ? [p, p2] : p;
+    }
+
+    function a2c(x1, y1, rx, ry, angle, lac, sweep_flag, x2, y2, recursive) {
+      // for more information of where this Math came from visit:
+      // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
+      var PI = Math.PI,
+        _120 = PI * 120 / 180,
+        f1,
+        f2,
+        cx,
+        cy,
+        rad = PI / 180 * (+angle || 0),
+        res = [],
+        xy,
+        rotate = function(x, y, rad) {
+          var X = x * Math.cos(rad) - y * Math.sin(rad),
+            Y = x * Math.sin(rad) + y * Math.cos(rad);
+          return { x: X, y: Y };
+        };
+      if (!recursive) {
+        xy = rotate(x1, y1, -rad);
+        x1 = xy.x;
+        y1 = xy.y;
+        xy = rotate(x2, y2, -rad);
+        x2 = xy.x;
+        y2 = xy.y;
+        var x = (x1 - x2) / 2,
+          y = (y1 - y2) / 2,
+          h = x * x / (rx * rx) + y * y / (ry * ry);
+        if (h > 1) {
+          h = Math.sqrt(h);
+          rx = h * rx;
+          ry = h * ry;
+        }
+        var rx2 = rx * rx,
+          ry2 = ry * ry;
+        var k =
+          (lac === sweep_flag ? -1 : 1) *
+          Math.sqrt(
+            Math.abs(
+              (rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)
+            )
+          );
+
+        cx = k * rx * y / ry + (x1 + x2) / 2;
+        cy = k * -ry * x / rx + (y1 + y2) / 2;
+        f1 = Math.asin(((y1 - cy) / ry).toFixed(9));
+        f2 = Math.asin(((y2 - cy) / ry).toFixed(9));
+
+        f1 = x1 < cx ? PI - f1 : f1;
+        f2 = x2 < cx ? PI - f2 : f2;
+
+        if (f1 < 0) {
+          f1 = PI * 2 + f1;
+        }
+        if (f2 < 0) {
+          f2 = PI * 2 + f2;
+        }
+
+        if (sweep_flag && f1 > f2) {
+          f1 = f1 - PI * 2;
+        }
+        if (!sweep_flag && f2 > f1) {
+          f2 = f2 - PI * 2;
+        }
+      } else {
+        f1 = recursive[0];
+        f2 = recursive[1];
+        cx = recursive[2];
+        cy = recursive[3];
+      }
+      var df = f2 - f1;
+      if (Math.abs(df) > _120) {
+        var f2old = f2,
+          x2old = x2,
+          y2old = y2;
+        f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
+        x2 = cx + rx * Math.cos(f2);
+        y2 = cy + ry * Math.sin(f2);
+        res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [
+          f2,
+          f2old,
+          cx,
+          cy
+        ]);
+      }
+      df = f2 - f1;
+      var c1 = Math.cos(f1),
+        s1 = Math.sin(f1),
+        c2 = Math.cos(f2),
+        s2 = Math.sin(f2),
+        t = Math.tan(df / 4),
+        hx = 4 / 3 * rx * t,
+        hy = 4 / 3 * ry * t,
+        m1 = [x1, y1],
+        m2 = [x1 + hx * s1, y1 - hy * c1],
+        m3 = [x2 + hx * s2, y2 - hy * c2],
+        m4 = [x2, y2];
+      m2[0] = 2 * m1[0] - m2[0];
+      m2[1] = 2 * m1[1] - m2[1];
+      if (recursive) {
+        return [m2, m3, m4].concat(res);
+      } else {
+        res = [m2, m3, m4]
+          .concat(res)
+          .join()
+          .split(',');
+        var newres = [];
+        for (var i = 0, ii = res.length; i < ii; i++) {
+          newres[i] =
+            i % 2
+              ? rotate(res[i - 1], res[i], rad).y
+              : rotate(res[i], res[i + 1], rad).x;
+        }
+        return newres;
+      }
+    }
+
+    // http://schepers.cc/getting-to-the-point
+    function catmullRom2bezier(crp, z) {
+      var d = [];
+      for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
+        var p = [
+          {
+            x: +crp[i - 2],
+            y: +crp[i - 1]
+          },
+          {
+            x: +crp[i],
+            y: +crp[i + 1]
+          },
+          {
+            x: +crp[i + 2],
+            y: +crp[i + 3]
+          },
+          {
+            x: +crp[i + 4],
+            y: +crp[i + 5]
+          }
+        ];
+        if (z) {
+          if (!i) {
+            p[0] = {
+              x: +crp[iLen - 2],
+              y: +crp[iLen - 1]
+            };
+          } else if (iLen - 4 === i) {
+            p[3] = {
+              x: +crp[0],
+              y: +crp[1]
+            };
+          } else if (iLen - 2 === i) {
+            p[2] = {
+              x: +crp[0],
+              y: +crp[1]
+            };
+            p[3] = {
+              x: +crp[2],
+              y: +crp[3]
+            };
+          }
+        } else {
+          if (iLen - 4 === i) {
+            p[3] = p[2];
+          } else if (!i) {
+            p[0] = {
+              x: +crp[i],
+              y: +crp[i + 1]
+            };
+          }
+        }
+        d.push([
+          'C',
+          (-p[0].x + 6 * p[1].x + p[2].x) / 6,
+          (-p[0].y + 6 * p[1].y + p[2].y) / 6,
+          (p[1].x + 6 * p[2].x - p[3].x) / 6,
+          (p[1].y + 6 * p[2].y - p[3].y) / 6,
+          p[2].x,
+          p[2].y
+        ]);
+      }
+
+      return d;
+    }
+
+    function l2c(x1, y1, x2, y2) {
+      return [x1, y1, x2, y2, x2, y2];
+    }
+
+    function q2c(x1, y1, ax, ay, x2, y2) {
+      var _13 = 1 / 3,
+        _23 = 2 / 3;
+      return [
+        _13 * x1 + _23 * ax,
+        _13 * y1 + _23 * ay,
+        _13 * x2 + _23 * ax,
+        _13 * y2 + _23 * ay,
+        x2,
+        y2
+      ];
+    }
+
+    function bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) {
+      if (z == null) {
+        z = 1;
+      }
+      z = z > 1 ? 1 : z < 0 ? 0 : z;
+      var z2 = z / 2;
+      var n = 12;
+      var Tvalues = [
+        -0.1252,
+        0.1252,
+        -0.3678,
+        0.3678,
+        -0.5873,
+        0.5873,
+        -0.7699,
+        0.7699,
+        -0.9041,
+        0.9041,
+        -0.9816,
+        0.9816
+      ];
+
+      var sum = 0;
+      var Cvalues = [
+        0.2491,
+        0.2491,
+        0.2335,
+        0.2335,
+        0.2032,
+        0.2032,
+        0.1601,
+        0.1601,
+        0.1069,
+        0.1069,
+        0.0472,
+        0.0472
+      ];
+
+      for (var i = 0; i < n; i++) {
+        var ct = z2 * Tvalues[i] + z2,
+          xbase = base3(ct, x1, x2, x3, x4),
+          ybase = base3(ct, y1, y2, y3, y4),
+          comb = xbase * xbase + ybase * ybase;
+        sum += Cvalues[i] * Math.sqrt(comb);
+      }
+      return z2 * sum;
+    }
+
+    function getTatLen(x1, y1, x2, y2, x3, y3, x4, y4, ll) {
+      if (ll < 0 || bezlen(x1, y1, x2, y2, x3, y3, x4, y4) < ll) {
+        return;
+      }
+      var t = 1,
+        step = t / 2,
+        t2 = t - step,
+        l,
+        e = 0.01;
+      l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
+      while (Math.abs(l - ll) > e) {
+        step /= 2;
+        t2 += (l < ll ? 1 : -1) * step;
+        l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
+      }
+      return t2;
+    }
+
+    function base3(t, p1, p2, p3, p4) {
+      var t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,
+        t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
+      return t * t2 - 3 * p1 + 3 * p2;
+    }
+
+    function cacheKey() {
+      var hash = '';
+      for (var i = arguments.length - 1; i >= 0; --i) {
+        var v = arguments[i];
+        hash += v === Object(v) ? JSON.stringify(v) : v;
+      }
+      return hash;
+    }
+
+    module.exports = p5;
+
+    },{"../core/constants":21,"../core/core":22}],60:[function(_dereq_,module,exports){
+    /**
+     * @module Data
+     * @submodule Array Functions
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Adds a value to the end of an array. Extends the length of
+     * the array by one. Maps to Array.push().
+     *
+     * @method append
+     * @param {Array} array Array to append
+     * @param {any} value to be added to the Array
+     * @example
+     * 

+     * function setup() {
+     *   var myArray = ['Mango', 'Apple', 'Papaya'];
+     *   print(myArray); // ['Mango', 'Apple', 'Papaya']
+     *
+     *   append(myArray, 'Peach');
+     *   print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+     * }
+     * 

+     */
+    p5.prototype.append = function(array, value) {
+      array.push(value);
+      return array;
+    };
+
+    /**
+     * Copies an array (or part of an array) to another array. The src array is
+     * copied to the dst array, beginning at the position specified by
+     * srcPosition and into the position specified by dstPosition. The number of
+     * elements to copy is determined by length. Note that copying values
+     * overwrites existing values in the destination array. To append values
+     * instead of overwriting them, use concat().
+     * 


+     * The simplified version with only two arguments, arrayCopy(src, dst),
+     * copies an entire array to another of the same size. It is equivalent to
+     * arrayCopy(src, 0, dst, 0, src.length).
+     * 


+     * Using this function is far more efficient for copying array data than
+     * iterating through a for() loop and copying each element individually.
+     *
+     * @method arrayCopy
+     * @param {Array}  src           the source Array
+     * @param {Integer} srcPosition  starting position in the source Array
+     * @param {Array}  dst           the destination Array
+     * @param {Integer} dstPosition   starting position in the destination Array
+     * @param {Integer} length        number of Array elements to be copied
+     *
+     * @example
+     * 

+     * var src = ['A', 'B', 'C'];
+     * var dst = [1, 2, 3];
+     * var srcPosition = 1;
+     * var dstPosition = 0;
+     * var length = 2;
+     *
+     * print(src); // ['A', 'B', 'C']
+     * print(dst); // [ 1 ,  2 ,  3 ]
+     *
+     * arrayCopy(src, srcPosition, dst, dstPosition, length);
+     * print(dst); // ['B', 'C', 3]
+     * 

+     */
+    /**
+     * @method arrayCopy
+     * @param {Array}  src
+     * @param {Array}  dst
+     * @param {Integer} [length]
+     */
+    p5.prototype.arrayCopy = function(src, srcPosition, dst, dstPosition, length) {
+      // the index to begin splicing from dst array
+      var start;
+      var end;
+
+      if (typeof length !== 'undefined') {
+        end = Math.min(length, src.length);
+        start = dstPosition;
+        src = src.slice(srcPosition, end + srcPosition);
+      } else {
+        if (typeof dst !== 'undefined') {
+          // src, dst, length
+          // rename  so we don't get confused
+          end = dst;
+          end = Math.min(end, src.length);
+        } else {
+          // src, dst
+          end = src.length;
+        }
+
+        start = 0;
+        // rename  so we don't get confused
+        dst = srcPosition;
+        src = src.slice(0, end);
+      }
+
+      // Since we are not returning the array and JavaScript is pass by reference
+      // we must modify the actual values of the array
+      // instead of reassigning arrays
+      Array.prototype.splice.apply(dst, [start, end].concat(src));
+    };
+
+    /**
+     * Concatenates two arrays, maps to Array.concat(). Does not modify the
+     * input arrays.
+     *
+     * @method concat
+     * @param {Array} a first Array to concatenate
+     * @param {Array} b second Array to concatenate
+     * @return {Array} concatenated array
+     *
+     * @example
+     * 

+     * function setup() {
+     *   var arr1 = ['A', 'B', 'C'];
+     *   var arr2 = [1, 2, 3];
+     *
+     *   print(arr1); // ['A','B','C']
+     *   print(arr2); // [1,2,3]
+     *
+     *   var arr3 = concat(arr1, arr2);
+     *
+     *   print(arr1); // ['A','B','C']
+     *   print(arr2); // [1, 2, 3]
+     *   print(arr3); // ['A','B','C', 1, 2, 3]
+     * }
+     * 

+     */
+    p5.prototype.concat = function(list0, list1) {
+      return list0.concat(list1);
+    };
+
+    /**
+     * Reverses the order of an array, maps to Array.reverse()
+     *
+     * @method reverse
+     * @param {Array} list Array to reverse
+     * @example
+     * 

+     * function setup() {
+     *   var myArray = ['A', 'B', 'C'];
+     *   print(myArray); // ['A','B','C']
+     *
+     *   reverse(myArray);
+     *   print(myArray); // ['C','B','A']
+     * }
+     * 

+     */
+    p5.prototype.reverse = function(list) {
+      return list.reverse();
+    };
+
+    /**
+     * Decreases an array by one element and returns the shortened array,
+     * maps to Array.pop().
+     *
+     * @method shorten
+     * @param  {Array} list Array to shorten
+     * @return {Array} shortened Array
+     * @example
+     * 

+     * function setup() {
+     *   var myArray = ['A', 'B', 'C'];
+     *   print(myArray); // ['A', 'B', 'C']
+     *   var newArray = shorten(myArray);
+     *   print(myArray); // ['A','B','C']
+     *   print(newArray); // ['A','B']
+     * }
+     * 

+     */
+    p5.prototype.shorten = function(list) {
+      list.pop();
+      return list;
+    };
+
+    /**
+     * Randomizes the order of the elements of an array. Implements
+     * 
+     * Fisher-Yates Shuffle Algorithm.
+     *
+     * @method shuffle
+     * @param  {Array}   array  Array to shuffle
+     * @param  {Boolean} [bool] modify passed array
+     * @return {Array}   shuffled Array
+     * @example
+     * 

+     * function setup() {
+     *   var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
+     *   print(regularArr);
+     *   shuffle(regularArr, true); // force modifications to passed array
+     *   print(regularArr);
+     *
+     *   // By default shuffle() returns a shuffled cloned array:
+     *   var newArr = shuffle(regularArr);
+     *   print(regularArr);
+     *   print(newArr);
+     * }
+     * 

+     */
+    p5.prototype.shuffle = function(arr, bool) {
+      var isView = ArrayBuffer && ArrayBuffer.isView && ArrayBuffer.isView(arr);
+      arr = bool || isView ? arr : arr.slice();
+
+      var rnd,
+        tmp,
+        idx = arr.length;
+      while (idx > 1) {
+        rnd = (Math.random() * idx) | 0;
+
+        tmp = arr[--idx];
+        arr[idx] = arr[rnd];
+        arr[rnd] = tmp;
+      }
+
+      return arr;
+    };
+
+    /**
+     * Sorts an array of numbers from smallest to largest, or puts an array of
+     * words in alphabetical order. The original array is not modified; a
+     * re-ordered array is returned. The count parameter states the number of
+     * elements to sort. For example, if there are 12 elements in an array and
+     * count is set to 5, only the first 5 elements in the array will be sorted.
+     *
+     * @method sort
+     * @param {Array} list Array to sort
+     * @param {Integer} [count] number of elements to sort, starting from 0
+     *
+     * @example
+     * 

+     * function setup() {
+     *   var words = ['banana', 'apple', 'pear', 'lime'];
+     *   print(words); // ['banana', 'apple', 'pear', 'lime']
+     *   var count = 4; // length of array
+     *
+     *   words = sort(words, count);
+     *   print(words); // ['apple', 'banana', 'lime', 'pear']
+     * }
+     * 

+     * 

+     * function setup() {
+     *   var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+     *   print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+     *   var count = 5; // Less than the length of the array
+     *
+     *   numbers = sort(numbers, count);
+     *   print(numbers); // [1,2,5,6,14,9,8,12]
+     * }
+     * 

+     */
+    p5.prototype.sort = function(list, count) {
+      var arr = count ? list.slice(0, Math.min(count, list.length)) : list;
+      var rest = count ? list.slice(Math.min(count, list.length)) : [];
+      if (typeof arr[0] === 'string') {
+        arr = arr.sort();
+      } else {
+        arr = arr.sort(function(a, b) {
+          return a - b;
+        });
+      }
+      return arr.concat(rest);
+    };
+
+    /**
+     * Inserts a value or an array of values into an existing array. The first
+     * parameter specifies the initial array to be modified, and the second
+     * parameter defines the data to be inserted. The third parameter is an index
+     * value which specifies the array position from which to insert data.
+     * (Remember that array index numbering starts at zero, so the first position
+     * is 0, the second position is 1, and so on.)
+     *
+     * @method splice
+     * @param {Array}  list Array to splice into
+     * @param {any}    value value to be spliced in
+     * @param {Integer} position in the array from which to insert data
+     *
+     * @example
+     * 

+     * function setup() {
+     *   var myArray = [0, 1, 2, 3, 4];
+     *   var insArray = ['A', 'B', 'C'];
+     *   print(myArray); // [0, 1, 2, 3, 4]
+     *   print(insArray); // ['A','B','C']
+     *
+     *   splice(myArray, insArray, 3);
+     *   print(myArray); // [0,1,2,'A','B','C',3,4]
+     * }
+     * 

+     */
+    p5.prototype.splice = function(list, value, index) {
+      // note that splice returns spliced elements and not an array
+      Array.prototype.splice.apply(list, [index, 0].concat(value));
+
+      return list;
+    };
+
+    /**
+     * Extracts an array of elements from an existing array. The list parameter
+     * defines the array from which the elements will be copied, and the start
+     * and count parameters specify which elements to extract. If no count is
+     * given, elements will be extracted from the start to the end of the array.
+     * When specifying the start, remember that the first array element is 0.
+     * This function does not change the source array.
+     *
+     * @method subset
+     * @param  {Array}  list    Array to extract from
+     * @param  {Integer} start   position to begin
+     * @param  {Integer} [count] number of values to extract
+     * @return {Array}          Array of extracted elements
+     *
+     * @example
+     * 

+     * function setup() {
+     *   var myArray = [1, 2, 3, 4, 5];
+     *   print(myArray); // [1, 2, 3, 4, 5]
+     *
+     *   var sub1 = subset(myArray, 0, 3);
+     *   var sub2 = subset(myArray, 2, 2);
+     *   print(sub1); // [1,2,3]
+     *   print(sub2); // [3,4]
+     * }
+     * 

+     */
+    p5.prototype.subset = function(list, start, count) {
+      if (typeof count !== 'undefined') {
+        return list.slice(start, start + count);
+      } else {
+        return list.slice(start, list.length);
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],61:[function(_dereq_,module,exports){
+    /**
+     * @module Data
+     * @submodule Conversion
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Converts a string to its floating point representation. The contents of a
+     * string must resemble a number, or NaN (not a number) will be returned.
+     * For example, float("1234.56") evaluates to 1234.56, but float("giraffe")
+     * will return NaN.
+     *
+     * When an array of values is passed in, then an array of floats of the same
+     * length is returned.
+     *
+     * @method float
+     * @param {String}  str float string to parse
+     * @return {Number}     floating point representation of string
+     * @example
+     * 

+     * var str = '20';
+     * var diameter = float(str);
+     * ellipse(width / 2, height / 2, diameter, diameter);
+     * 

+     *
+     * @alt
+     * 20 by 20 white ellipse in the center of the canvas
+     *
+     */
+    p5.prototype.float = function(str) {
+      if (str instanceof Array) {
+        return str.map(parseFloat);
+      }
+      return parseFloat(str);
+    };
+
+    /**
+     * Converts a boolean, string, or float to its integer representation.
+     * When an array of values is passed in, then an int array of the same length
+     * is returned.
+     *
+     * @method int
+     * @param {String|Boolean|Number}       n value to parse
+     * @return {Number}                     integer representation of value
+     *
+     * @example
+     * 

+     * print(int('10')); // 10
+     * print(int(10.31)); // 10
+     * print(int(-10)); // -10
+     * print(int(true)); // 1
+     * print(int(false)); // 0
+     * print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
+     * 

+     */
+    /**
+     * @method int
+     * @param {Array} ns                    values to parse
+     * @return {Number[]}                   integer representation of values
+     */
+    p5.prototype.int = function(n, radix) {
+      radix = radix || 10;
+      if (typeof n === 'string') {
+        return parseInt(n, radix);
+      } else if (typeof n === 'number') {
+        return n | 0;
+      } else if (typeof n === 'boolean') {
+        return n ? 1 : 0;
+      } else if (n instanceof Array) {
+        return n.map(function(n) {
+          return p5.prototype.int(n, radix);
+        });
+      }
+    };
+
+    /**
+     * Converts a boolean, string or number to its string representation.
+     * When an array of values is passed in, then an array of strings of the same
+     * length is returned.
+     *
+     * @method str
+     * @param {String|Boolean|Number|Array} n value to parse
+     * @return {String}                     string representation of value
+     * @example
+     * 

+     * print(str('10')); // "10"
+     * print(str(10.31)); // "10.31"
+     * print(str(-10)); // "-10"
+     * print(str(true)); // "true"
+     * print(str(false)); // "false"
+     * print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
+     * 

+     */
+    p5.prototype.str = function(n) {
+      if (n instanceof Array) {
+        return n.map(p5.prototype.str);
+      } else {
+        return String(n);
+      }
+    };
+
+    /**
+     * Converts a number or string to its boolean representation.
+     * For a number, any non-zero value (positive or negative) evaluates to true,
+     * while zero evaluates to false. For a string, the value "true" evaluates to
+     * true, while any other value evaluates to false. When an array of number or
+     * string values is passed in, then a array of booleans of the same length is
+     * returned.
+     *
+     * @method boolean
+     * @param {String|Boolean|Number|Array} n value to parse
+     * @return {Boolean}                    boolean representation of value
+     * @example
+     * 

+     * print(boolean(0)); // false
+     * print(boolean(1)); // true
+     * print(boolean('true')); // true
+     * print(boolean('abcd')); // false
+     * print(boolean([0, 12, 'true'])); // [false, true, false]
+     * 

+     */
+    p5.prototype.boolean = function(n) {
+      if (typeof n === 'number') {
+        return n !== 0;
+      } else if (typeof n === 'string') {
+        return n.toLowerCase() === 'true';
+      } else if (typeof n === 'boolean') {
+        return n;
+      } else if (n instanceof Array) {
+        return n.map(p5.prototype.boolean);
+      }
+    };
+
+    /**
+     * Converts a number, string representation of a number, or boolean to its byte
+     * representation. A byte can be only a whole number between -128 and 127, so
+     * when a value outside of this range is converted, it wraps around to the
+     * corresponding byte representation. When an array of number, string or boolean
+     * values is passed in, then an array of bytes the same length is returned.
+     *
+     * @method byte
+     * @param {String|Boolean|Number}       n value to parse
+     * @return {Number}                     byte representation of value
+     *
+     * @example
+     * 

+     * print(byte(127)); // 127
+     * print(byte(128)); // -128
+     * print(byte(23.4)); // 23
+     * print(byte('23.4')); // 23
+     * print(byte('hello')); // NaN
+     * print(byte(true)); // 1
+     * print(byte([0, 255, '100'])); // [0, -1, 100]
+     * 

+     */
+    /**
+     * @method byte
+     * @param {Array} ns                   values to parse
+     * @return {Number[]}                  array of byte representation of values
+     */
+    p5.prototype.byte = function(n) {
+      var nn = p5.prototype.int(n, 10);
+      if (typeof nn === 'number') {
+        return (nn + 128) % 256 - 128;
+      } else if (nn instanceof Array) {
+        return nn.map(p5.prototype.byte);
+      }
+    };
+
+    /**
+     * Converts a number or string to its corresponding single-character
+     * string representation. If a string parameter is provided, it is first
+     * parsed as an integer and then translated into a single-character string.
+     * When an array of number or string values is passed in, then an array of
+     * single-character strings of the same length is returned.
+     *
+     * @method char
+     * @param {String|Number}       n value to parse
+     * @return {String}             string representation of value
+     *
+     * @example
+     * 

+     * print(char(65)); // "A"
+     * print(char('65')); // "A"
+     * print(char([65, 66, 67])); // [ "A", "B", "C" ]
+     * print(join(char([65, 66, 67]), '')); // "ABC"
+     * 

+     */
+    /**
+     * @method char
+     * @param {Array} ns              values to parse
+     * @return {String[]}             array of string representation of values
+     */
+    p5.prototype.char = function(n) {
+      if (typeof n === 'number' && !isNaN(n)) {
+        return String.fromCharCode(n);
+      } else if (n instanceof Array) {
+        return n.map(p5.prototype.char);
+      } else if (typeof n === 'string') {
+        return p5.prototype.char(parseInt(n, 10));
+      }
+    };
+
+    /**
+     * Converts a single-character string to its corresponding integer
+     * representation. When an array of single-character string values is passed
+     * in, then an array of integers of the same length is returned.
+     *
+     * @method unchar
+     * @param {String} n     value to parse
+     * @return {Number}      integer representation of value
+     *
+     * @example
+     * 

+     * print(unchar('A')); // 65
+     * print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
+     * print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
+     * 

+     */
+    /**
+     * @method unchar
+     * @param {Array} ns       values to parse
+     * @return {Number[]}      integer representation of values
+     */
+    p5.prototype.unchar = function(n) {
+      if (typeof n === 'string' && n.length === 1) {
+        return n.charCodeAt(0);
+      } else if (n instanceof Array) {
+        return n.map(p5.prototype.unchar);
+      }
+    };
+
+    /**
+     * Converts a number to a string in its equivalent hexadecimal notation. If a
+     * second parameter is passed, it is used to set the number of characters to
+     * generate in the hexadecimal notation. When an array is passed in, an
+     * array of strings in hexadecimal notation of the same length is returned.
+     *
+     * @method hex
+     * @param {Number} n     value to parse
+     * @param {Number} [digits]
+     * @return {String}      hexadecimal string representation of value
+     *
+     * @example
+     * 

+     * print(hex(255)); // "000000FF"
+     * print(hex(255, 6)); // "0000FF"
+     * print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
+     * 

+     */
+    /**
+     * @method hex
+     * @param {Number[]} ns    array of values to parse
+     * @param {Number} [digits]
+     * @return {String[]}      hexadecimal string representation of values
+     */
+    p5.prototype.hex = function(n, digits) {
+      digits = digits === undefined || digits === null ? (digits = 8) : digits;
+      if (n instanceof Array) {
+        return n.map(function(n) {
+          return p5.prototype.hex(n, digits);
+        });
+      } else if (typeof n === 'number') {
+        if (n < 0) {
+          n = 0xffffffff + n + 1;
+        }
+        var hex = Number(n)
+          .toString(16)
+          .toUpperCase();
+        while (hex.length < digits) {
+          hex = '0' + hex;
+        }
+        if (hex.length >= digits) {
+          hex = hex.substring(hex.length - digits, hex.length);
+        }
+        return hex;
+      }
+    };
+
+    /**
+     * Converts a string representation of a hexadecimal number to its equivalent
+     * integer value. When an array of strings in hexadecimal notation is passed
+     * in, an array of integers of the same length is returned.
+     *
+     * @method unhex
+     * @param {String} n value to parse
+     * @return {Number}      integer representation of hexadecimal value
+     *
+     * @example
+     * 

+     * print(unhex('A')); // 10
+     * print(unhex('FF')); // 255
+     * print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
+     * 

+     */
+    /**
+     * @method unhex
+     * @param {Array} ns values to parse
+     * @return {Number[]}      integer representations of hexadecimal value
+     */
+    p5.prototype.unhex = function(n) {
+      if (n instanceof Array) {
+        return n.map(p5.prototype.unhex);
+      } else {
+        return parseInt('0x' + n, 16);
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],62:[function(_dereq_,module,exports){
+    /**
+     * @module Data
+     * @submodule String Functions
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    _dereq_('../core/error_helpers');
+
+    //return p5; //LM is this a mistake?
+
+    /**
+     * Combines an array of Strings into one String, each separated by the
+     * character(s) used for the separator parameter. To join arrays of ints or
+     * floats, it's necessary to first convert them to Strings using nf() or
+     * nfs().
+     *
+     * @method join
+     * @param  {Array}  list      array of Strings to be joined
+     * @param  {String} separator String to be placed between each item
+     * @return {String}           joined String
+     * @example
+     * 

+     * 
+     * var array = ['Hello', 'world!'];
+     * var separator = ' ';
+     * var message = join(array, separator);
+     * text(message, 5, 50);
+     * 
+     * 

+     *
+     * @alt
+     * "hello world!" displayed middle left of canvas.
+     *
+     */
+    p5.prototype.join = function(list, separator) {
+      p5._validateParameters('join', arguments);
+      return list.join(separator);
+    };
+
+    /**
+     * This function is used to apply a regular expression to a piece of text,
+     * and return matching groups (elements found inside parentheses) as a
+     * String array. If there are no matches, a null value will be returned.
+     * If no groups are specified in the regular expression, but the sequence
+     * matches, an array of length 1 (with the matched text as the first element
+     * of the array) will be returned.
+     * 


+     * To use the function, first check to see if the result is null. If the
+     * result is null, then the sequence did not match at all. If the sequence
+     * did match, an array is returned.
+     * 


+     * If there are groups (specified by sets of parentheses) in the regular
+     * expression, then the contents of each will be returned in the array.
+     * Element [0] of a regular expression match returns the entire matching
+     * string, and the match groups start at element [1] (the first group is [1],
+     * the second [2], and so on).
+     *
+     * @method match
+     * @param  {String} str    the String to be searched
+     * @param  {String} regexp the regexp to be used for matching
+     * @return {String[]}      Array of Strings found
+     * @example
+     * 

+     * 
+     * var string = 'Hello p5js*!';
+     * var regexp = 'p5js\\*';
+     * var m = match(string, regexp);
+     * text(m, 5, 50);
+     * 
+     * 

+     *
+     * @alt
+     * "p5js*" displayed middle left of canvas.
+     *
+     */
+    p5.prototype.match = function(str, reg) {
+      p5._validateParameters('match', arguments);
+      return str.match(reg);
+    };
+
+    /**
+     * This function is used to apply a regular expression to a piece of text,
+     * and return a list of matching groups (elements found inside parentheses)
+     * as a two-dimensional String array. If there are no matches, a null value
+     * will be returned. If no groups are specified in the regular expression,
+     * but the sequence matches, a two dimensional array is still returned, but
+     * the second dimension is only of length one.
+     * 


+     * To use the function, first check to see if the result is null. If the
+     * result is null, then the sequence did not match at all. If the sequence
+     * did match, a 2D array is returned.
+     * 


+     * If there are groups (specified by sets of parentheses) in the regular
+     * expression, then the contents of each will be returned in the array.
+     * Assuming a loop with counter variable i, element [i][0] of a regular
+     * expression match returns the entire matching string, and the match groups
+     * start at element [i][1] (the first group is [i][1], the second [i][2],
+     * and so on).
+     *
+     * @method matchAll
+     * @param  {String} str    the String to be searched
+     * @param  {String} regexp the regexp to be used for matching
+     * @return {String[]}         2d Array of Strings found
+     * @example
+     * 

+     * 
+     * var string = 'Hello p5js*! Hello world!';
+     * var regexp = 'Hello';
+     * matchAll(string, regexp);
+     * 
+     * 

+     */
+    p5.prototype.matchAll = function(str, reg) {
+      p5._validateParameters('matchAll', arguments);
+      var re = new RegExp(reg, 'g');
+      var match = re.exec(str);
+      var matches = [];
+      while (match !== null) {
+        matches.push(match);
+        // matched text: match[0]
+        // match start: match.index
+        // capturing group n: match[n]
+        match = re.exec(str);
+      }
+      return matches;
+    };
+
+    /**
+     * Utility function for formatting numbers into strings. There are two
+     * versions: one for formatting floats, and one for formatting ints.
+     * The values for the digits, left, and right parameters should always
+     * be positive integers.
+     *
+     * @method nf
+     * @param {Number|String}       num      the Number to format
+     * @param {Integer|String}      [left]   number of digits to the left of the
+     *                                decimal point
+     * @param {Integer|String}      [right]  number of digits to the right of the
+     *                                decimal point
+     * @return {String}               formatted String
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   background(200);
+     *   var num = 112.53106115;
+     *
+     *   noStroke();
+     *   fill(0);
+     *   textSize(14);
+     *   // Draw formatted numbers
+     *   text(nf(num, 5, 2), 10, 20);
+     *
+     *   text(nf(num, 4, 3), 10, 55);
+     *
+     *   text(nf(num, 3, 6), 10, 85);
+     *
+     *   // Draw dividing lines
+     *   stroke(120);
+     *   line(0, 30, width, 30);
+     *   line(0, 65, width, 65);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * "0011253" top left, "0112.531" mid left, "112.531061" bottom left canvas
+     */
+    /**
+     * @method nf
+     * @param {Array}        nums     the Numbers to format
+     * @param {Integer|String}      [left]
+     * @param {Integer|String}      [right]
+     * @return {String[]}                formatted Strings
+     */
+    p5.prototype.nf = function(nums, left, right) {
+      p5._validateParameters('nf', arguments);
+      if (nums instanceof Array) {
+        return nums.map(function(x) {
+          return doNf(x, left, right);
+        });
+      } else {
+        var typeOfFirst = Object.prototype.toString.call(nums);
+        if (typeOfFirst === '[object Arguments]') {
+          if (nums.length === 3) {
+            return this.nf(nums[0], nums[1], nums[2]);
+          } else if (nums.length === 2) {
+            return this.nf(nums[0], nums[1]);
+          } else {
+            return this.nf(nums[0]);
+          }
+        } else {
+          return doNf(nums, left, right);
+        }
+      }
+    };
+
+    function doNf(num, left, right) {
+      var neg = num < 0;
+      var n = neg ? num.toString().substring(1) : num.toString();
+      var decimalInd = n.indexOf('.');
+      var intPart = decimalInd !== -1 ? n.substring(0, decimalInd) : n;
+      var decPart = decimalInd !== -1 ? n.substring(decimalInd + 1) : '';
+      var str = neg ? '-' : '';
+      if (typeof right !== 'undefined') {
+        var decimal = '';
+        if (decimalInd !== -1 || right - decPart.length > 0) {
+          decimal = '.';
+        }
+        if (decPart.length > right) {
+          decPart = decPart.substring(0, right);
+        }
+        for (var i = 0; i < left - intPart.length; i++) {
+          str += '0';
+        }
+        str += intPart;
+        str += decimal;
+        str += decPart;
+        for (var j = 0; j < right - decPart.length; j++) {
+          str += '0';
+        }
+        return str;
+      } else {
+        for (var k = 0; k < Math.max(left - intPart.length, 0); k++) {
+          str += '0';
+        }
+        str += n;
+        return str;
+      }
+    }
+
+    /**
+     * Utility function for formatting numbers into strings and placing
+     * appropriate commas to mark units of 1000. There are two versions: one
+     * for formatting ints, and one for formatting an array of ints. The value
+     * for the right parameter should always be a positive integer.
+     *
+     * @method nfc
+     * @param  {Number|String}   num     the Number to format
+     * @param  {Integer|String}  [right] number of digits to the right of the
+     *                                  decimal point
+     * @return {String}           formatted String
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   background(200);
+     *   var num = 11253106.115;
+     *   var numArr = [1, 1, 2];
+     *
+     *   noStroke();
+     *   fill(0);
+     *   textSize(12);
+     *
+     *   // Draw formatted numbers
+     *   text(nfc(num, 4), 10, 30);
+     *   text(nfc(numArr, 2), 10, 80);
+     *
+     *   // Draw dividing line
+     *   stroke(120);
+     *   line(0, 50, width, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * "11,253,106.115" top middle and "1.00,1.00,2.00" displayed bottom mid
+     */
+    /**
+     * @method nfc
+     * @param  {Array}    nums     the Numbers to format
+     * @param  {Integer|String}  [right]
+     * @return {String[]}           formatted Strings
+     */
+    p5.prototype.nfc = function(num, right) {
+      p5._validateParameters('nfc', arguments);
+      if (num instanceof Array) {
+        return num.map(function(x) {
+          return doNfc(x, right);
+        });
+      } else {
+        return doNfc(num, right);
+      }
+    };
+    function doNfc(num, right) {
+      num = num.toString();
+      var dec = num.indexOf('.');
+      var rem = dec !== -1 ? num.substring(dec) : '';
+      var n = dec !== -1 ? num.substring(0, dec) : num;
+      n = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      if (right === 0) {
+        rem = '';
+      } else if (typeof right !== 'undefined') {
+        if (right > rem.length) {
+          rem += dec === -1 ? '.' : '';
+          var len = right - rem.length + 1;
+          for (var i = 0; i < len; i++) {
+            rem += '0';
+          }
+        } else {
+          rem = rem.substring(0, right + 1);
+        }
+      }
+      return n + rem;
+    }
+
+    /**
+     * Utility function for formatting numbers into strings. Similar to nf() but
+     * puts a "+" in front of positive numbers and a "-" in front of negative
+     * numbers. There are two versions: one for formatting floats, and one for
+     * formatting ints. The values for left, and right parameters
+     * should always be positive integers.
+     *
+     * @method nfp
+     * @param {Number} num      the Number to format
+     * @param {Integer}      [left]   number of digits to the left of the decimal
+     *                                point
+     * @param {Integer}      [right]  number of digits to the right of the
+     *                                decimal point
+     * @return {String}         formatted String
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   background(200);
+     *   var num1 = 11253106.115;
+     *   var num2 = -11253106.115;
+     *
+     *   noStroke();
+     *   fill(0);
+     *   textSize(12);
+     *
+     *   // Draw formatted numbers
+     *   text(nfp(num1, 4, 2), 10, 30);
+     *   text(nfp(num2, 4, 2), 10, 80);
+     *
+     *   // Draw dividing line
+     *   stroke(120);
+     *   line(0, 50, width, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * "+11253106.11" top middle and "-11253106.11" displayed bottom middle
+     */
+    /**
+     * @method nfp
+     * @param {Number[]} nums      the Numbers to format
+     * @param {Integer}      [left]
+     * @param {Integer}      [right]
+     * @return {String[]}         formatted Strings
+     */
+    p5.prototype.nfp = function() {
+      p5._validateParameters('nfp', arguments);
+      var nfRes = p5.prototype.nf.apply(this, arguments);
+      if (nfRes instanceof Array) {
+        return nfRes.map(addNfp);
+      } else {
+        return addNfp(nfRes);
+      }
+    };
+
+    function addNfp(num) {
+      return parseFloat(num) > 0 ? '+' + num.toString() : num.toString();
+    }
+
+    /**
+     * Utility function for formatting numbers into strings. Similar to nf() but
+     * puts a " " (space) in front of positive numbers and a "-" in front of
+     * negative numbers. There are two versions: one for formatting floats, and
+     * one for formatting ints. The values for the digits, left, and right
+     * parameters should always be positive integers.
+     *
+     * @method nfs
+     * @param {Number}       num      the Number to format
+     * @param {Integer}      [left]   number of digits to the left of the decimal
+     *                                point
+     * @param {Integer}      [right]  number of digits to the right of the
+     *                                decimal point
+     * @return {String}         formatted String
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   background(200);
+     *   var num1 = 11253106.115;
+     *   var num2 = -11253106.115;
+     *
+     *   noStroke();
+     *   fill(0);
+     *   textSize(12);
+     *   // Draw formatted numbers
+     *   text(nfs(num1, 4, 2), 10, 30);
+     *
+     *   text(nfs(num2, 4, 2), 10, 80);
+     *
+     *   // Draw dividing line
+     *   stroke(120);
+     *   line(0, 50, width, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * "11253106.11" top middle and "-11253106.11" displayed bottom middle
+     */
+    /**
+     * @method nfs
+     * @param {Array}        nums     the Numbers to format
+     * @param {Integer}      [left]
+     * @param {Integer}      [right]
+     * @return {String[]}         formatted Strings
+     */
+    p5.prototype.nfs = function() {
+      p5._validateParameters('nfs', arguments);
+      var nfRes = p5.prototype.nf.apply(this, arguments);
+      if (nfRes instanceof Array) {
+        return nfRes.map(addNfs);
+      } else {
+        return addNfs(nfRes);
+      }
+    };
+
+    function addNfs(num) {
+      return parseFloat(num) > 0 ? ' ' + num.toString() : num.toString();
+    }
+
+    /**
+     * The split() function maps to String.split(), it breaks a String into
+     * pieces using a character or string as the delimiter. The delim parameter
+     * specifies the character or characters that mark the boundaries between
+     * each piece. A String[] array is returned that contains each of the pieces.
+     *
+     * The splitTokens() function works in a similar fashion, except that it
+     * splits using a range of characters instead of a specific character or
+     * sequence.
+     *
+     * @method split
+     * @param  {String} value the String to be split
+     * @param  {String} delim the String used to separate the data
+     * @return {String[]}  Array of Strings
+     * @example
+     * 

+     * 
+     * var names = 'Pat,Xio,Alex';
+     * var splitString = split(names, ',');
+     * text(splitString[0], 5, 30);
+     * text(splitString[1], 5, 50);
+     * text(splitString[2], 5, 70);
+     * 
+     * 

+     *
+     * @alt
+     * "pat" top left, "Xio" mid left and "Alex" displayed bottom left
+     *
+     */
+    p5.prototype.split = function(str, delim) {
+      p5._validateParameters('split', arguments);
+      return str.split(delim);
+    };
+
+    /**
+     * The splitTokens() function splits a String at one or many character
+     * delimiters or "tokens." The delim parameter specifies the character or
+     * characters to be used as a boundary.
+     * 


+     * If no delim characters are specified, any whitespace character is used to
+     * split. Whitespace characters include tab (\t), line feed (\n), carriage
+     * return (\r), form feed (\f), and space.
+     *
+     * @method splitTokens
+     * @param  {String} value   the String to be split
+     * @param  {String} [delim] list of individual Strings that will be used as
+     *                          separators
+     * @return {String[]}          Array of Strings
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   var myStr = 'Mango, Banana, Lime';
+     *   var myStrArr = splitTokens(myStr, ',');
+     *
+     *   print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
+     * }
+     * 
+     * 

+     */
+    p5.prototype.splitTokens = function(value, delims) {
+      p5._validateParameters('splitTokens', arguments);
+      var d;
+      if (typeof delims !== 'undefined') {
+        var str = delims;
+        var sqc = /\]/g.exec(str);
+        var sqo = /\[/g.exec(str);
+        if (sqo && sqc) {
+          str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+          sqo = /\[/g.exec(str);
+          str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+          d = new RegExp('[\\[' + str + '\\]]', 'g');
+        } else if (sqc) {
+          str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+          d = new RegExp('[' + str + '\\]]', 'g');
+        } else if (sqo) {
+          str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+          d = new RegExp('[' + str + '\\[]', 'g');
+        } else {
+          d = new RegExp('[' + str + ']', 'g');
+        }
+      } else {
+        d = /\s/g;
+      }
+      return value.split(d).filter(function(n) {
+        return n;
+      });
+    };
+
+    /**
+     * Removes whitespace characters from the beginning and end of a String. In
+     * addition to standard whitespace characters such as space, carriage return,
+     * and tab, this function also removes the Unicode "nbsp" character.
+     *
+     * @method trim
+     * @param  {String} str a String to be trimmed
+     * @return {String}       a trimmed String
+     *
+     * @example
+     * 

+     * 
+     * var string = trim('  No new lines\n   ');
+     * text(string + ' here', 2, 50);
+     * 
+     * 

+     *
+     * @alt
+     * "No new lines here" displayed center canvas
+     */
+    /**
+     * @method trim
+     * @param  {Array} strs an Array of Strings to be trimmed
+     * @return {String[]}   an Array of trimmed Strings
+     */
+    p5.prototype.trim = function(str) {
+      p5._validateParameters('trim', arguments);
+      if (str instanceof Array) {
+        return str.map(this.trim);
+      } else {
+        return str.trim();
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22,"../core/error_helpers":25}],63:[function(_dereq_,module,exports){
+    /**
+     * @module IO
+     * @submodule Time & Date
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * p5.js communicates with the clock on your computer. The day() function
+     * returns the current day as a value from 1 - 31.
+     *
+     * @method day
+     * @return {Integer} the current day
+     * @example
+     * 

+     * 
+     * var d = day();
+     * text('Current day: \n' + d, 5, 50);
+     * 
+     * 

+     *
+     * @alt
+     * Current day is displayed
+     *
+     */
+    p5.prototype.day = function() {
+      return new Date().getDate();
+    };
+
+    /**
+     * p5.js communicates with the clock on your computer. The hour() function
+     * returns the current hour as a value from 0 - 23.
+     *
+     * @method hour
+     * @return {Integer} the current hour
+     * @example
+     * 

+     * 
+     * var h = hour();
+     * text('Current hour:\n' + h, 5, 50);
+     * 
+     * 

+     *
+     * @alt
+     * Current hour is displayed
+     *
+     */
+    p5.prototype.hour = function() {
+      return new Date().getHours();
+    };
+
+    /**
+     * p5.js communicates with the clock on your computer. The minute() function
+     * returns the current minute as a value from 0 - 59.
+     *
+     * @method minute
+     * @return {Integer} the current minute
+     * @example
+     * 

+     * 
+     * var m = minute();
+     * text('Current minute: \n' + m, 5, 50);
+     * 
+     * 

+     *
+     * @alt
+     * Current minute is displayed
+     *
+     */
+    p5.prototype.minute = function() {
+      return new Date().getMinutes();
+    };
+
+    /**
+     * Returns the number of milliseconds (thousandths of a second) since
+     * starting the program. This information is often used for timing events and
+     * animation sequences.
+     *
+     * @method millis
+     * @return {Number} the number of milliseconds since starting the program
+     * @example
+     * 

+     * 
+     * var millisecond = millis();
+     * text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
+     * 
+     * 

+     *
+     * @alt
+     * number of milliseconds since program has started displayed
+     *
+     */
+    p5.prototype.millis = function() {
+      return window.performance.now();
+    };
+
+    /**
+     * p5.js communicates with the clock on your computer. The month() function
+     * returns the current month as a value from 1 - 12.
+     *
+     * @method month
+     * @return {Integer} the current month
+     * @example
+     * 

+     * 
+     * var m = month();
+     * text('Current month: \n' + m, 5, 50);
+     * 
+     * 

+     *
+     * @alt
+     * Current month is displayed
+     *
+     */
+    p5.prototype.month = function() {
+      return new Date().getMonth() + 1; //January is 0!
+    };
+
+    /**
+     * p5.js communicates with the clock on your computer. The second() function
+     * returns the current second as a value from 0 - 59.
+     *
+     * @method second
+     * @return {Integer} the current second
+     * @example
+     * 

+     * 
+     * var s = second();
+     * text('Current second: \n' + s, 5, 50);
+     * 
+     * 

+     *
+     * @alt
+     * Current second is displayed
+     *
+     */
+    p5.prototype.second = function() {
+      return new Date().getSeconds();
+    };
+
+    /**
+     * p5.js communicates with the clock on your computer. The year() function
+     * returns the current year as an integer (2014, 2015, 2016, etc).
+     *
+     * @method year
+     * @return {Integer} the current year
+     * @example
+     * 

+     * 
+     * var y = year();
+     * text('Current year: \n' + y, 5, 50);
+     * 
+     * 

+     *
+     * @alt
+     * Current year is displayed
+     *
+     */
+    p5.prototype.year = function() {
+      return new Date().getFullYear();
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],64:[function(_dereq_,module,exports){
+    /**
+     * @module Lights, Camera
+     * @submodule Camera
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Sets camera position for a 3D sketch. The function behaves similarly
+     * gluLookAt, except that it replaces the existing modelview matrix instead
+     * of applying any transformations calculated here on top of the existing
+     * model view.
+     * When called with no arguments, this function
+     * sets a default camera equivalent to calling
+     * camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
+     * @method camera
+     * @param  {Number} [x]        camera position value on x axis
+     * @param  {Number} [y]        camera position value on y axis
+     * @param  {Number} [z]        camera position value on z axis
+     * @param  {Number} [centerX]  x coordinate representing center of the sketch
+     * @param  {Number} [centerY]  y coordinate representing center of the sketch
+     * @param  {Number} [centerZ]  z coordinate representing center of the sketch
+     * @param  {Number} [upX]      x component of direction 'up' from camera
+     * @param  {Number} [upY]      y component of direction 'up' from camera
+     * @param  {Number} [upZ]      z component of direction 'up' from camera
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     * function draw() {
+     *   //move the camera away from the plane by a sin wave
+     *   camera(0, 0, sin(frameCount * 0.01) * 100, 0, 0, 0, 0, 1, 0);
+     *   plane(120, 120);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * blue square shrinks in size grows to fill canvas. disappears then loops.
+     *
+     */
+    p5.prototype.camera = function() {
+      this._renderer.camera.apply(this._renderer, arguments);
+      return this;
+    };
+
+    p5.RendererGL.prototype.camera = function(
+      eyeX,
+      eyeY,
+      eyeZ,
+      centerX,
+      centerY,
+      centerZ,
+      upX,
+      upY,
+      upZ
+    ) {
+      if (typeof eyeX === 'undefined') {
+        eyeX = this.defaultCameraX;
+        eyeY = this.defaultCameraY;
+        eyeZ = this.defaultCameraZ;
+        centerX = eyeX;
+        centerY = eyeY;
+        centerZ = 0;
+        upX = 0;
+        upY = 1;
+        upZ = 0;
+      }
+
+      this.cameraX = eyeX;
+      this.cameraY = eyeY;
+      this.cameraZ = eyeZ;
+
+      // calculate camera Z vector
+      var z0 = eyeX - centerX;
+      var z1 = eyeY - centerY;
+      var z2 = eyeZ - centerZ;
+
+      this.eyeDist = Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
+      if (this.eyeDist !== 0) {
+        z0 /= this.eyeDist;
+        z1 /= this.eyeDist;
+        z2 /= this.eyeDist;
+      }
+
+      // calculate camera Y vector
+      var y0 = upX;
+      var y1 = upY;
+      var y2 = upZ;
+
+      // computer x vector as y cross z
+      var x0 = y1 * z2 - y2 * z1;
+      var x1 = -y0 * z2 + y2 * z0;
+      var x2 = y0 * z1 - y1 * z0;
+
+      // recomputer y = z cross x
+      y0 = z1 * x2 - z2 * x1;
+      y1 = -z0 * x2 + z2 * x0;
+      y2 = z0 * x1 - z1 * x0;
+
+      // cross product gives area of parallelogram, which is < 1.0 for
+      // non-perpendicular unit-length vectors; so normalize x, y here:
+      var xmag = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
+      if (xmag !== 0) {
+        x0 /= xmag;
+        x1 /= xmag;
+        x2 /= xmag;
+      }
+
+      var ymag = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
+      if (ymag !== 0) {
+        y0 /= ymag;
+        y1 /= ymag;
+        y2 /= ymag;
+      }
+
+      // the camera affects the model view matrix, insofar as it
+      // inverse translates the world to the eye position of the camera
+      // and rotates it.
+      // prettier-ignore
+      this.cameraMatrix.set(x0, y0, z0, 0,
+                            x1, y1, z1, 0,
+                            x2, y2, z2, 0,
+                            0,   0,  0, 1);
+
+      var tx = -eyeX;
+      var ty = -eyeY;
+      var tz = -eyeZ;
+
+      this.cameraMatrix.translate([tx, ty, tz]);
+      this.uMVMatrix.set(
+        this.cameraMatrix.mat4[0],
+        this.cameraMatrix.mat4[1],
+        this.cameraMatrix.mat4[2],
+        this.cameraMatrix.mat4[3],
+        this.cameraMatrix.mat4[4],
+        this.cameraMatrix.mat4[5],
+        this.cameraMatrix.mat4[6],
+        this.cameraMatrix.mat4[7],
+        this.cameraMatrix.mat4[8],
+        this.cameraMatrix.mat4[9],
+        this.cameraMatrix.mat4[10],
+        this.cameraMatrix.mat4[11],
+        this.cameraMatrix.mat4[12],
+        this.cameraMatrix.mat4[13],
+        this.cameraMatrix.mat4[14],
+        this.cameraMatrix.mat4[15]
+      );
+      return this;
+    };
+
+    /**
+     * Sets perspective camera. When called with no arguments, the defaults
+     * provided are equivalent to
+     * perspective(PI/3.0, width/height, cameraZ/10.0, cameraZ*10.0)
+     * where cameraZ is ((height/2.0) / tan(PI*60.0/360.0));
+     * @method  perspective
+     * @param  {Number} [fovy]   camera frustum vertical field of view,
+     *                           from bottom to top of view, in degrees
+     * @param  {Number} [aspect] camera frustum aspect ratio
+     * @param  {Number} [near]   frustum near plane length
+     * @param  {Number} [far]    frustum far plane length
+     * @chainable
+     * @example
+     * 

+     * 
+     * //drag mouse to toggle the world!
+     * //you will see there's a vanish point
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   var fov = 60 / 180 * PI;
+     *   var cameraZ = height / 2.0 / tan(fov / 2.0);
+     *   perspective(60 / 180 * PI, width / height, cameraZ * 0.1, cameraZ * 10);
+     * }
+     * function draw() {
+     *   background(200);
+     *   orbitControl();
+     *   for (var i = -1; i < 2; i++) {
+     *     for (var j = -2; j < 3; j++) {
+     *       push();
+     *       translate(i * 160, 0, j * 160);
+     *       box(40, 40, 40);
+     *       pop();
+     *     }
+     *   }
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * colored 3d boxes toggleable with mouse position
+     *
+     */
+    p5.prototype.perspective = function() {
+      this._renderer.perspective.apply(this._renderer, arguments);
+      return this;
+    };
+
+    p5.RendererGL.prototype.perspective = function(fovy, aspect, near, far) {
+      if (typeof fovy === 'undefined') {
+        fovy = this.defaultCameraFOV;
+      }
+      if (typeof aspect === 'undefined') {
+        aspect = this.defaultCameraAspect;
+      }
+      if (typeof near === 'undefined') {
+        near = this.defaultCameraNear;
+      }
+      if (typeof far === 'undefined') {
+        far = this.defaultCameraFar;
+      }
+
+      this.cameraFOV = fovy;
+      this.cameraAspect = aspect;
+      this.cameraNear = near;
+      this.cameraFar = far;
+
+      this.uPMatrix = p5.Matrix.identity(this.pInst);
+
+      var f = 1.0 / Math.tan(this.cameraFOV / 2);
+      var nf = 1.0 / (this.cameraNear - this.cameraFar);
+
+      // prettier-ignore
+      this.uPMatrix.set(f / aspect,  0,                     0,  0,
+                        0,          -f,                     0,  0,
+                        0,           0,     (far + near) * nf, -1,
+                        0,           0, (2 * far * near) * nf,  0);
+
+      this._curCamera = 'custom';
+    };
+
+    /**
+     * Setup ortho camera
+     * @method  ortho
+     * @param  {Number} [left]   camera frustum left plane
+     * @param  {Number} [right]  camera frustum right plane
+     * @param  {Number} [bottom] camera frustum bottom plane
+     * @param  {Number} [top]    camera frustum top plane
+     * @param  {Number} [near]   camera frustum near plane
+     * @param  {Number} [far]    camera frustum far plane
+     * @chainable
+     * @example
+     * 

+     * 
+     * //drag mouse to toggle the world!
+     * //there's no vanish point
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
+     * }
+     * function draw() {
+     *   background(200);
+     *   orbitControl();
+     *   strokeWeight(0.1);
+     *   for (var i = -1; i < 2; i++) {
+     *     for (var j = -2; j < 3; j++) {
+     *       push();
+     *       translate(i * 160, 0, j * 160);
+     *       box(40, 40, 40);
+     *       pop();
+     *     }
+     *   }
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * 3 3d boxes, reveal several more boxes on 3d plane when mouse used to toggle
+     *
+     */
+    p5.prototype.ortho = function() {
+      this._renderer.ortho.apply(this._renderer, arguments);
+      return this;
+    };
+
+    p5.RendererGL.prototype.ortho = function(left, right, bottom, top, near, far) {
+      if (left === undefined) left = -this.width / 2;
+      if (right === undefined) right = +this.width / 2;
+      if (bottom === undefined) bottom = -this.height / 2;
+      if (top === undefined) top = +this.height / 2;
+      if (near === undefined) near = 0;
+      if (far === undefined) far = Math.max(this.width, this.height);
+      this.uPMatrix = p5.Matrix.identity(this._pInst);
+      //this.uPMatrix.ortho(left,right,bottom,top,near,far);
+
+      var w = right - left;
+      var h = top - bottom;
+      var d = far - near;
+
+      var x = +2.0 / w;
+      var y = +2.0 / h;
+      var z = -2.0 / d;
+
+      var tx = -(right + left) / w;
+      var ty = -(top + bottom) / h;
+      var tz = -(far + near) / d;
+
+      this.uPMatrix = p5.Matrix.identity();
+
+      // prettier-ignore
+      this.uPMatrix.set(  x,  0,  0,  0,
+                          0, -y,  0,  0,
+                          0,  0,  z,  0,
+                         tx, ty, tz,  1);
+
+      this._curCamera = 'custom';
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],65:[function(_dereq_,module,exports){
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * @method orbitControl
+     * @for p5
+     * @chainable
+     */
+    //@TODO: implement full orbit controls including
+    //pan, zoom, quaternion rotation, etc.
+    p5.prototype.orbitControl = function() {
+      if (this.mouseIsPressed) {
+        this.rotateY((this.mouseX - this.width / 2) / (this.width / 2));
+        this.rotateX((this.mouseY - this.height / 2) / (this.width / 2));
+      }
+      return this;
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],66:[function(_dereq_,module,exports){
+    /**
+     * @module Lights, Camera
+     * @submodule Lights
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Creates an ambient light with a color
+     *
+     * @method ambientLight
+     * @param  {Number}        v1      red or hue value relative to
+     *                                 the current color range
+     * @param  {Number}        v2      green or saturation value
+     *                                 relative to the current color range
+     * @param  {Number}        v3      blue or brightness value
+     *                                 relative to the current color range
+     * @param  {Number}        [alpha]
+     * @chainable
+     *
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     * function draw() {
+     *   background(0);
+     *   ambientLight(150);
+     *   ambientMaterial(250);
+     *   noStroke();
+     *   sphere(25);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * evenly distributed light across a sphere
+     *
+     */
+
+    /**
+     * @method ambientLight
+     * @param  {String}        value   a color string
+     * @param  {Number}        [alpha]
+     * @chainable
+     */
+
+    /**
+     * @method ambientLight
+     * @param  {Number[]}      values  an array containing the red,green,blue &
+     *                                 and alpha components of the color
+     * @chainable
+     */
+
+    /**
+     * @method ambientLight
+     * @param  {p5.Color}      color   the ambient light color
+     * @chainable
+     */
+    p5.prototype.ambientLight = function(v1, v2, v3, a) {
+      var color = this.color.apply(this, arguments);
+
+      var shader = this._renderer._useLightShader();
+
+      //@todo this is a bit icky. array uniforms have
+      //to be multiples of the type 3(rgb) in this case.
+      //a preallocated Float32Array(24) that we copy into
+      //would be better
+      shader.setUniform('uUseLighting', true);
+      //in case there's no material color for the geometry
+      shader.setUniform('uMaterialColor', this._renderer.curFillColor);
+
+      this._renderer.ambientLightColors.push(
+        color._array[0],
+        color._array[1],
+        color._array[2]
+      );
+      shader.setUniform('uAmbientColor', this._renderer.ambientLightColors);
+
+      shader.setUniform(
+        'uAmbientLightCount',
+        this._renderer.ambientLightColors.length / 3
+      );
+
+      return this;
+    };
+
+    /**
+     * Creates a directional light with a color and a direction
+     * @method directionalLight
+     * @param  {Number}    v1       red or hue value (depending on the current
+     * color mode),
+     * @param  {Number}    v2       green or saturation value
+     * @param  {Number}    v3       blue or brightness value
+     * @param  {p5.Vector} position the direction of the light
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     * function draw() {
+     *   background(0);
+     *   //move your mouse to change light direction
+     *   var dirX = (mouseX / width - 0.5) * 2;
+     *   var dirY = (mouseY / height - 0.5) * 2;
+     *   directionalLight(250, 250, 250, -dirX, -dirY, 0.25);
+     *   ambientMaterial(250);
+     *   noStroke();
+     *   sphere(25);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * light source on canvas changeable with mouse position
+     *
+     */
+
+    /**
+     * @method directionalLight
+     * @param  {Number[]|String|p5.Color} color   color Array, CSS color string,
+     *                                             or p5.Color value
+     * @param  {Number}                   x       x axis direction
+     * @param  {Number}                   y       y axis direction
+     * @param  {Number}                   z       z axis direction
+     * @chainable
+     */
+
+    /**
+     * @method directionalLight
+     * @param  {Number[]|String|p5.Color} color
+     * @param  {p5.Vector}                position
+     * @chainable
+     */
+
+    /**
+     * @method directionalLight
+     * @param  {Number}    v1
+     * @param  {Number}    v2
+     * @param  {Number}    v3
+     * @param  {Number}    x
+     * @param  {Number}    y
+     * @param  {Number}    z
+     * @chainable
+     */
+    p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
+      var shader = this._renderer._useLightShader();
+
+      //@TODO: check parameters number
+      var color = this.color.apply(this, [v1, v2, v3]);
+
+      var _x, _y, _z;
+      var v = arguments[arguments.length - 1];
+      if (typeof v === 'number') {
+        _x = arguments[arguments.length - 3];
+        _y = arguments[arguments.length - 2];
+        _z = arguments[arguments.length - 1];
+      } else {
+        _x = v.x;
+        _y = v.y;
+        _z = v.z;
+      }
+      shader.setUniform('uUseLighting', true);
+      //in case there's no material color for the geometry
+      shader.setUniform('uMaterialColor', this._renderer.curFillColor);
+
+      // normalize direction
+      var l = Math.sqrt(_x * _x + _y * _y + _z * _z);
+      this._renderer.directionalLightDirections.push(_x / l, _y / l, _z / l);
+      shader.setUniform(
+        'uLightingDirection',
+        this._renderer.directionalLightDirections
+      );
+
+      this._renderer.directionalLightColors.push(
+        color._array[0],
+        color._array[1],
+        color._array[2]
+      );
+      shader.setUniform('uDirectionalColor', this._renderer.directionalLightColors);
+
+      shader.setUniform(
+        'uDirectionalLightCount',
+        this._renderer.directionalLightColors.length / 3
+      );
+
+      return this;
+    };
+
+    /**
+     * Creates a point light with a color and a light position
+     * @method pointLight
+     * @param  {Number}    v1       red or hue value (depending on the current
+     * color mode),
+     * @param  {Number}    v2       green or saturation value
+     * @param  {Number}    v3       blue or brightness value
+     * @param  {Number}    x        x axis position
+     * @param  {Number}    y        y axis position
+     * @param  {Number}    z        z axis position
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     * function draw() {
+     *   background(0);
+     *   //move your mouse to change light position
+     *   var locX = mouseX - width / 2;
+     *   var locY = mouseY - height / 2;
+     *   // to set the light position,
+     *   // think of the world's coordinate as:
+     *   // -width/2,-height/2 -------- width/2,-height/2
+     *   //                |            |
+     *   //                |     0,0    |
+     *   //                |            |
+     *   // -width/2,height/2--------width/2,height/2
+     *   pointLight(250, 250, 250, locX, locY, 50);
+     *   ambientMaterial(250);
+     *   noStroke();
+     *   sphere(25);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * spot light on canvas changes position with mouse
+     *
+     */
+
+    /**
+     * @method pointLight
+     * @param  {Number}    v1
+     * @param  {Number}    v2
+     * @param  {Number}    v3
+     * @param  {p5.Vector} position the position of the light
+     * @chainable
+     */
+
+    /**
+     * @method pointLight
+     * @param  {Number[]|String|p5.Color} color   color Array, CSS color string,
+     * or p5.Color value
+     * @param  {Number}                   x
+     * @param  {Number}                   y
+     * @param  {Number}                   z
+     * @chainable
+     */
+
+    /**
+     * @method pointLight
+     * @param  {Number[]|String|p5.Color} color
+     * @param  {p5.Vector}                position
+     * @chainable
+     */
+    p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
+      //@TODO: check parameters number
+      var color = this._renderer._pInst.color.apply(this, [v1, v2, v3]);
+
+      var _x, _y, _z;
+      var v = arguments[arguments.length - 1];
+      if (typeof v === 'number') {
+        _x = arguments[arguments.length - 3];
+        _y = arguments[arguments.length - 2];
+        _z = arguments[arguments.length - 1];
+      } else {
+        _x = v.x;
+        _y = v.y;
+        _z = v.z;
+      }
+
+      var shader = this._renderer._useLightShader();
+      shader.setUniform('uUseLighting', true);
+      //in case there's no material color for the geometry
+      shader.setUniform('uMaterialColor', this._renderer.curFillColor);
+
+      this._renderer.pointLightPositions.push(_x, _y, _z);
+      shader.setUniform('uPointLightLocation', this._renderer.pointLightPositions);
+
+      this._renderer.pointLightColors.push(
+        color._array[0],
+        color._array[1],
+        color._array[2]
+      );
+      shader.setUniform('uPointLightColor', this._renderer.pointLightColors);
+
+      shader.setUniform(
+        'uPointLightCount',
+        this._renderer.pointLightColors.length / 3
+      );
+
+      return this;
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22}],67:[function(_dereq_,module,exports){
+    /**
+     * @module Shape
+     * @submodule 3D Models
+     * @for p5
+     * @requires core
+     * @requires p5.Geometry
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    _dereq_('./p5.Geometry');
+
+    /**
+     * Load a 3d model from an OBJ file.
+     * 


+     * One of the limitations of the OBJ format is that it doesn't have a built-in
+     * sense of scale. This means that models exported from different programs might
+     * be very different sizes. If your model isn't displaying, try calling
+     * loadModel() with the normalized parameter set to true. This will resize the
+     * model to a scale appropriate for p5. You can also make additional changes to
+     * the final size of your model with the scale() function.
+     *
+     * @method loadModel
+     * @param  {String} path              Path of the model to be loaded
+     * @param  {Boolean} normalize        If true, scale the model to a
+     *                                      standardized size when loading
+     * @param  {function(p5.Geometry)} [successCallback] Function to be called
+     *                                     once the model is loaded. Will be passed
+     *                                     the 3D model object.
+     * @param  {function(Event)} [failureCallback] called with event error if
+     *                                         the image fails to load.
+     * @return {p5.Geometry} the p5.Geometry object
+     *
+     * @example
+     * 

+     * 
+     * //draw a spinning teapot
+     * var teapot;
+     *
+     * function preload() {
+     *   teapot = loadModel('assets/teapot.obj');
+     * }
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   model(teapot);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * Vertically rotating 3-d teapot with red, green and blue gradient.
+     */
+    /**
+     * @method loadModel
+     * @param  {String} path
+     * @param  {function(p5.Geometry)} [successCallback]
+     * @param  {function(Event)} [failureCallback]
+     * @return {p5.Geometry} the p5.Geometry object
+     */
+    p5.prototype.loadModel = function(path) {
+      var normalize;
+      var successCallback;
+      var failureCallback;
+      if (typeof arguments[1] === 'boolean') {
+        normalize = arguments[1];
+        successCallback = arguments[2];
+        failureCallback = arguments[3];
+      } else {
+        normalize = false;
+        successCallback = arguments[1];
+        failureCallback = arguments[2];
+      }
+
+      var model = new p5.Geometry();
+      model.gid = path + '|' + normalize;
+      this.loadStrings(
+        path,
+        function(strings) {
+          parseObj(model, strings);
+
+          if (normalize) {
+            model.normalize();
+          }
+
+          if (typeof successCallback === 'function') {
+            successCallback(model);
+          }
+        }.bind(this),
+        failureCallback
+      );
+
+      return model;
+    };
+
+    /**
+     * Parse OBJ lines into model. For reference, this is what a simple model of a
+     * square might look like:
+     *
+     * v -0.5 -0.5 0.5
+     * v -0.5 -0.5 -0.5
+     * v -0.5 0.5 -0.5
+     * v -0.5 0.5 0.5
+     *
+     * f 4 3 2 1
+     */
+    function parseObj(model, lines) {
+      // OBJ allows a face to specify an index for a vertex (in the above example),
+      // but it also allows you to specify a custom combination of vertex, UV
+      // coordinate, and vertex normal. So, "3/4/3" would mean, "use vertex 3 with
+      // UV coordinate 4 and vertex normal 3". In WebGL, every vertex with different
+      // parameters must be a different vertex, so loadedVerts is used to
+      // temporarily store the parsed vertices, normals, etc., and indexedVerts is
+      // used to map a specific combination (keyed on, for example, the string
+      // "3/4/3"), to the actual index of the newly created vertex in the final
+      // object.
+      var loadedVerts = {
+        v: [],
+        vt: [],
+        vn: []
+      };
+      var indexedVerts = {};
+
+      for (var line = 0; line < lines.length; ++line) {
+        // Each line is a separate object (vertex, face, vertex normal, etc)
+        // For each line, split it into tokens on whitespace. The first token
+        // describes the type.
+        var tokens = lines[line].trim().split(/\b\s+/);
+
+        if (tokens.length > 0) {
+          if (tokens[0] === 'v' || tokens[0] === 'vn') {
+            // Check if this line describes a vertex or vertex normal.
+            // It will have three numeric parameters.
+            var vertex = new p5.Vector(
+              parseFloat(tokens[1]),
+              parseFloat(tokens[2]),
+              parseFloat(tokens[3])
+            );
+            loadedVerts[tokens[0]].push(vertex);
+          } else if (tokens[0] === 'vt') {
+            // Check if this line describes a texture coordinate.
+            // It will have two numeric parameters.
+            var texVertex = [parseFloat(tokens[1]), parseFloat(tokens[2])];
+            loadedVerts[tokens[0]].push(texVertex);
+          } else if (tokens[0] === 'f') {
+            // Check if this line describes a face.
+            // OBJ faces can have more than three points. Triangulate points.
+            for (var tri = 3; tri < tokens.length; ++tri) {
+              var face = [];
+
+              var vertexTokens = [1, tri - 1, tri];
+
+              for (var tokenInd = 0; tokenInd < vertexTokens.length; ++tokenInd) {
+                // Now, convert the given token into an index
+                var vertString = tokens[vertexTokens[tokenInd]];
+                var vertIndex = 0;
+
+                // TODO: Faces can technically use negative numbers to refer to the
+                // previous nth vertex. I haven't seen this used in practice, but
+                // it might be good to implement this in the future.
+
+                if (indexedVerts[vertString] !== undefined) {
+                  vertIndex = indexedVerts[vertString];
+                } else {
+                  var vertParts = vertString.split('/');
+                  for (var i = 0; i < vertParts.length; i++) {
+                    vertParts[i] = parseInt(vertParts[i]) - 1;
+                  }
+
+                  vertIndex = indexedVerts[vertString] = model.vertices.length;
+                  model.vertices.push(loadedVerts.v[vertParts[0]].copy());
+                  if (loadedVerts.vt[vertParts[1]]) {
+                    model.uvs.push(loadedVerts.vt[vertParts[1]].slice());
+                  } else {
+                    model.uvs.push([0, 0]);
+                  }
+
+                  if (loadedVerts.vn[vertParts[2]]) {
+                    model.vertexNormals.push(loadedVerts.vn[vertParts[2]].copy());
+                  }
+                }
+
+                face.push(vertIndex);
+              }
+
+              if (
+                face[0] !== face[1] &&
+                face[0] !== face[2] &&
+                face[1] !== face[2]
+              ) {
+                model.faces.push(face);
+              }
+            }
+          }
+        }
+      }
+      // If the model doesn't have normals, compute the normals
+      if (model.vertexNormals.length === 0) {
+        model.computeNormals();
+      }
+
+      return model;
+    }
+
+    /**
+     * Render a 3d model to the screen.
+     *
+     * @method model
+     * @param  {p5.Geometry} model Loaded 3d model to be rendered
+     * @example
+     * 

+     * 
+     * //draw a spinning teapot
+     * var teapot;
+     *
+     * function preload() {
+     *   teapot = loadModel('assets/teapot.obj');
+     * }
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   model(teapot);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * Vertically rotating 3-d teapot with red, green and blue gradient.
+     *
+     */
+    p5.prototype.model = function(model) {
+      if (model.vertices.length > 0) {
+        if (!this._renderer.geometryInHash(model.gid)) {
+          model._makeTriangleEdges();
+          this._renderer._edgesToVertices(model);
+          this._renderer.createBuffers(model.gid, model);
+        }
+
+        this._renderer.drawBuffers(model.gid);
+      }
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22,"./p5.Geometry":69}],68:[function(_dereq_,module,exports){
+    /**
+     * @module Lights, Camera
+     * @submodule Material
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var constants = _dereq_('../core/constants');
+    _dereq_('./p5.Texture');
+
+    /**
+     * Loads a custom shader from the provided vertex and fragment
+     * shader paths. The shader files are loaded asynchronously in the
+     * background, so this method should be used in preload().
+     *
+     * For now, there are three main types of shaders. p5 will automatically
+     * supply appropriate vertices, normals, colors, and lighting attributes
+     * if the parameters defined in the shader match the names.
+     *
+     * @method loadShader
+     * @param {String} [vertFilename] path to file containing vertex shader
+     * source code
+     * @param {String} [fragFilename] path to file containing fragment shader
+     * source code
+     * @return {p5.Shader} a shader object created from the provided
+     * vertex and fragment shader files.
+     */
+    p5.prototype.loadShader = function(vertFilename, fragFilename) {
+      var loadedShader = new p5.Shader();
+
+      var self = this;
+      var loadedFrag = false;
+      var loadedVert = false;
+
+      this.loadStrings(fragFilename, function(result) {
+        loadedShader._fragSrc = result.join('\n');
+        loadedFrag = true;
+        if (!loadedVert) {
+          self._incrementPreload();
+        }
+      });
+      this.loadStrings(vertFilename, function(result) {
+        loadedShader._vertSrc = result.join('\n');
+        loadedVert = true;
+        if (!loadedFrag) {
+          self._incrementPreload();
+        }
+      });
+
+      return loadedShader;
+    };
+
+    /**
+     * @method createShader
+     * @param {String} vertSrc source code for the vertex shader
+     * @param {String} fragSrc source code for the fragment shader
+     * @returns {p5.Shader} a shader object created from the provided
+     * vertex and fragment shaders.
+     *
+     * @example
+     * 

+     * 
+     * // the 'varying's are shared between both vertex & fragment shaders
+     * var varying = 'precision highp float; varying vec2 vPos;';
+     *
+     * // the vertex shader is called for each vertex
+     * var vs =
+     *   varying +
+     *   'attribute vec3 aPosition;' +
+     *   'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';
+     *
+     * // the fragment shader is called for each pixel
+     * var fs =
+     *   varying +
+     *   'uniform vec2 p;' +
+     *   'uniform float r;' +
+     *   'const int I = 500;' +
+     *   'void main() {' +
+     *   '  vec2 c = p + vPos * r, z = c;' +
+     *   '  float n = 0.0;' +
+     *   '  for (int i = I; i > 0; i --) {' +
+     *   '    if(z.x*z.x+z.y*z.y > 4.0) {' +
+     *   '      n = float(i)/float(I);' +
+     *   '      break;' +
+     *   '    }' +
+     *   '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +
+     *   '  }' +
+     *   '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +
+     *   '}';
+     *
+     * var mandel;
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *
+     *   // create and initialize the shader
+     *   mandel = createShader(vs, fs);
+     *   shader(mandel);
+     *   noStroke();
+     *
+     *   // 'p' is the center point of the Mandelbrot image
+     *   mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+     * }
+     *
+     * function draw() {
+     *   // 'r' is the size of the image in Mandelbrot-space
+     *   mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+     *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * zooming Mandelbrot set. a colorful, infinitely detailed fractal.
+     */
+    p5.prototype.createShader = function(vertSrc, fragSrc) {
+      return new p5.Shader(this._renderer, vertSrc, fragSrc);
+    };
+
+    /**
+     * The shader() function lets the user provide a custom shader
+     * to fill in shapes in WEBGL mode. Users can create their
+     * own shaders by loading vertex and fragment shaders with
+     * loadShader().
+     *
+     * @method shader
+     * @chainable
+     * @param {p5.Shader} [s] the desired p5.Shader to use for rendering
+     * shapes.
+     */
+    p5.prototype.shader = function(s) {
+      if (s._renderer === undefined) {
+        s._renderer = this._renderer;
+      }
+      if (s.isStrokeShader()) {
+        this._renderer.setStrokeShader(s);
+      } else {
+        this._renderer.setFillShader(s);
+      }
+      return this;
+    };
+
+    /**
+     * Normal material for geometry. You can view all
+     * possible materials in this
+     * example.
+     * @method normalMaterial
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   normalMaterial();
+     *   sphere(50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * Red, green and blue gradient.
+     *
+     */
+    p5.prototype.normalMaterial = function() {
+      this._renderer.drawMode = constants.FILL;
+      this._renderer.setFillShader(this._renderer._getNormalShader());
+      this._renderer.curFillColor = [1, 1, 1, 1];
+      this.noStroke();
+      return this;
+    };
+
+    /**
+     * Texture for geometry.  You can view other possible materials in this
+     * example.
+     * @method texture
+     * @param {p5.Image|p5.MediaElement|p5.Graphics} tex 2-dimensional graphics
+     *                    to render as texture
+     * @chainable
+     * @example
+     * 

+     * 
+     * var img;
+     * function preload() {
+     *   img = loadImage('assets/laDefense.jpg');
+     * }
+     *
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(0);
+     *   rotateZ(frameCount * 0.01);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   //pass image as texture
+     *   texture(img);
+     *   box(200, 200, 200);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var pg;
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   pg = createGraphics(200, 200);
+     *   pg.textSize(100);
+     * }
+     *
+     * function draw() {
+     *   background(0);
+     *   pg.background(255);
+     *   pg.text('hello!', 0, 100);
+     *   //pass image as texture
+     *   texture(pg);
+     *   plane(200);
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * var vid;
+     * function preload() {
+     *   vid = createVideo('assets/fingers.mov');
+     *   vid.hide();
+     *   vid.loop();
+     * }
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(0);
+     *   //pass video frame as texture
+     *   texture(vid);
+     *   plane(200);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * Rotating view of many images umbrella and grid roof on a 3d plane
+     * black canvas
+     * black canvas
+     *
+     */
+    p5.prototype.texture = function(tex) {
+      this._renderer.GL.depthMask(true);
+      this._renderer.GL.enable(this._renderer.GL.BLEND);
+      this._renderer.GL.blendFunc(
+        this._renderer.GL.SRC_ALPHA,
+        this._renderer.GL.ONE_MINUS_SRC_ALPHA
+      );
+
+      this._renderer.drawMode = constants.TEXTURE;
+      var shader = this._renderer._useLightShader();
+      shader.setUniform('uSpecular', false);
+      shader.setUniform('isTexture', true);
+      shader.setUniform('uSampler', tex);
+      this.noStroke();
+      return this;
+    };
+
+    /**
+     * Ambient material for geometry with a given color. You can view all
+     * possible materials in this
+     * example.
+     * @method  ambientMaterial
+     * @param  {Number} v1  gray value, red or hue value
+     *                         (depending on the current color mode),
+     * @param  {Number} [v2] green or saturation value
+     * @param  {Number} [v3] blue or brightness value
+     * @param  {Number} [a]  opacity
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     * function draw() {
+     *   background(0);
+     *   ambientLight(100);
+     *   pointLight(250, 250, 250, 100, 100, 0);
+     *   ambientMaterial(250);
+     *   sphere(50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * radiating light source from top right of canvas
+     *
+     */
+    /**
+     * @method  ambientMaterial
+     * @param  {Number[]|String|p5.Color} color  color, color Array, or CSS color string
+     * @chainable
+     */
+    p5.prototype.ambientMaterial = function(v1, v2, v3, a) {
+      var color = p5.prototype.color.apply(this, arguments);
+      this._renderer.curFillColor = color._array;
+
+      var shader = this._renderer._useLightShader();
+      shader.setUniform('uMaterialColor', this._renderer.curFillColor);
+      shader.setUniform('uSpecular', false);
+      shader.setUniform('isTexture', false);
+      return this;
+    };
+
+    /**
+     * Specular material for geometry with a given color. You can view all
+     * possible materials in this
+     * example.
+     * @method specularMaterial
+     * @param  {Number} v1  gray value, red or hue value
+     *                       (depending on the current color mode),
+     * @param  {Number} [v2] green or saturation value
+     * @param  {Number} [v3] blue or brightness value
+     * @param  {Number} [a]  opacity
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     * function draw() {
+     *   background(0);
+     *   ambientLight(100);
+     *   pointLight(250, 250, 250, 100, 100, 0);
+     *   specularMaterial(250);
+     *   sphere(50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * diffused radiating light source from top right of canvas
+     *
+     */
+    /**
+     * @method specularMaterial
+     * @param  {Number[]|String|p5.Color} color color Array, or CSS color string
+     * @chainable
+     */
+    p5.prototype.specularMaterial = function(v1, v2, v3, a) {
+      var color = p5.prototype.color.apply(this, arguments);
+      this._renderer.curFillColor = color._array;
+
+      var shader = this._renderer._useLightShader();
+      shader.setUniform('uMaterialColor', this._renderer.curFillColor);
+      shader.setUniform('uSpecular', true);
+      shader.setUniform('isTexture', false);
+      return this;
+    };
+
+    /**
+     * @private blends colors according to color components.
+     * If alpha value is less than 1, we need to enable blending
+     * on our gl context.  Otherwise opaque objects need to a depthMask.
+     * @param  {Number[]} color [description]
+     * @return {Number[]]}  Normalized numbers array
+     */
+    p5.RendererGL.prototype._applyColorBlend = function(colors) {
+      var gl = this.GL;
+      if (colors[colors.length - 1] < 1.0) {
+        gl.depthMask(false);
+        gl.enable(gl.BLEND);
+        gl.blendEquation(gl.FUNC_ADD);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      } else {
+        gl.depthMask(true);
+        gl.disable(gl.BLEND);
+      }
+      return colors;
+    };
+
+    module.exports = p5;
+
+    },{"../core/constants":21,"../core/core":22,"./p5.Texture":75}],69:[function(_dereq_,module,exports){
+    //some of the functions are adjusted from Three.js(http://threejs.org)
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    /**
+     * p5 Geometry class
+     * @class p5.Geometry
+     * @constructor
+     * @param  {function | Object} vertData callback function or Object
+     *                     containing routine(s) for vertex data generation
+     * @param  {Integer} [detailX] number of vertices on horizontal surface
+     * @param  {Integer} [detailY] number of vertices on horizontal surface
+     * @param {function} [callback] function to call upon object instantiation.
+     *
+     */
+    p5.Geometry = function(detailX, detailY, callback) {
+      //an array containing every vertex
+      //@type [p5.Vector]
+      this.vertices = [];
+
+      //an array containing every vertex for stroke drawing
+      this.lineVertices = [];
+
+      //an array 1 normal per lineVertex with
+      //final position representing which direction to
+      //displace for strokeWeight
+      //[[0,0,-1,1], [0,1,0,-1] ...];
+      this.lineNormals = [];
+
+      //an array containing 1 normal per vertex
+      //@type [p5.Vector]
+      //[p5.Vector, p5.Vector, p5.Vector,p5.Vector, p5.Vector, p5.Vector,...]
+      this.vertexNormals = [];
+      //an array containing each three vertex indices that form a face
+      //[[0, 1, 2], [2, 1, 3], ...]
+      this.faces = [];
+      //a 2D array containing uvs for every vertex
+      //[[0.0,0.0],[1.0,0.0], ...]
+      this.uvs = [];
+      // a 2D array containing edge connectivity pattern for create line vertices
+      //based on faces for most objects;
+      this.edges = [];
+      this.detailX = detailX !== undefined ? detailX : 1;
+      this.detailY = detailY !== undefined ? detailY : 1;
+      if (callback instanceof Function) {
+        callback.call(this);
+      }
+      this.name = 'p5.Geometry'; // for friendly debugger system
+
+      return this; // TODO: is this a constructor?
+    };
+
+    /**
+     * @method computeFaces
+     * @chainable
+     */
+    p5.Geometry.prototype.computeFaces = function() {
+      var sliceCount = this.detailX + 1;
+      var a, b, c, d;
+      for (var i = 0; i < this.detailY; i++) {
+        for (var j = 0; j < this.detailX; j++) {
+          a = i * sliceCount + j; // + offset;
+          b = i * sliceCount + j + 1; // + offset;
+          c = (i + 1) * sliceCount + j + 1; // + offset;
+          d = (i + 1) * sliceCount + j; // + offset;
+          this.faces.push([a, b, d]);
+          this.faces.push([d, b, c]);
+        }
+      }
+      return this;
+    };
+
+    p5.Geometry.prototype._getFaceNormal = function(faceId) {
+      //This assumes that vA->vB->vC is a counter-clockwise ordering
+      var face = this.faces[faceId];
+      var vA = this.vertices[face[0]];
+      var vB = this.vertices[face[1]];
+      var vC = this.vertices[face[2]];
+      var ab = p5.Vector.sub(vB, vA);
+      var ac = p5.Vector.sub(vC, vA);
+      var n = p5.Vector.cross(ab, ac);
+      var ln = p5.Vector.mag(n);
+      var sinAlpha = ln / (p5.Vector.mag(ab) * p5.Vector.mag(ac));
+      return n.mult(Math.asin(sinAlpha) / ln);
+    };
+    /**
+     * computes smooth normals per vertex as an average of each
+     * face.
+     * @method computeNormals
+     * @chainable
+     */
+    p5.Geometry.prototype.computeNormals = function() {
+      var normals = [];
+      for (var v = 0; v < this.vertices.length; v++) {
+        var normal = new p5.Vector();
+        for (var i = 0; i < this.faces.length; i++) {
+          //if our face contains a given vertex
+          //calculate an average of the normals
+          //of the triangles adjacent to that vertex
+          if (
+            this.faces[i][0] === v ||
+            this.faces[i][1] === v ||
+            this.faces[i][2] === v
+          ) {
+            var faceNormal = normals[i] || (normals[i] = this._getFaceNormal(i));
+            normal = normal.add(faceNormal);
+          }
+        }
+        normal = normal.normalize();
+        this.vertexNormals.push(normal);
+      }
+      return this;
+    };
+
+    /**
+     * Averages the vertex normals. Used in curved
+     * surfaces
+     * @method averageNormals
+     * @chainable
+     */
+    p5.Geometry.prototype.averageNormals = function() {
+      for (var i = 0; i <= this.detailY; i++) {
+        var offset = this.detailX + 1;
+        var temp = p5.Vector.add(
+          this.vertexNormals[i * offset],
+          this.vertexNormals[i * offset + this.detailX]
+        );
+
+        temp = p5.Vector.div(temp, 2);
+        this.vertexNormals[i * offset] = temp;
+        this.vertexNormals[i * offset + this.detailX] = temp;
+      }
+      return this;
+    };
+
+    /**
+     * Averages pole normals.  Used in spherical primitives
+     * @method averagePoleNormals
+     * @chainable
+     */
+    p5.Geometry.prototype.averagePoleNormals = function() {
+      //average the north pole
+      var sum = new p5.Vector(0, 0, 0);
+      for (var i = 0; i < this.detailX; i++) {
+        sum.add(this.vertexNormals[i]);
+      }
+      sum = p5.Vector.div(sum, this.detailX);
+
+      for (i = 0; i < this.detailX; i++) {
+        this.vertexNormals[i] = sum;
+      }
+
+      //average the south pole
+      sum = new p5.Vector(0, 0, 0);
+      for (
+        i = this.vertices.length - 1;
+        i > this.vertices.length - 1 - this.detailX;
+        i--
+      ) {
+        sum.add(this.vertexNormals[i]);
+      }
+      sum = p5.Vector.div(sum, this.detailX);
+
+      for (
+        i = this.vertices.length - 1;
+        i > this.vertices.length - 1 - this.detailX;
+        i--
+      ) {
+        this.vertexNormals[i] = sum;
+      }
+      return this;
+    };
+
+    /**
+     * Create a 2D array for establishing stroke connections
+     * @private
+     * @return {p5.Geometry}
+     */
+    p5.Geometry.prototype._makeTriangleEdges = function() {
+      if (Array.isArray(this.strokeIndices)) {
+        for (var i = 0, max = this.strokeIndices.length; i < max; i++) {
+          this.edges.push(this.strokeIndices[i]);
+        }
+      } else {
+        for (var j = 0; j < this.faces.length; j++) {
+          this.edges.push([this.faces[j][0], this.faces[j][1]]);
+          this.edges.push([this.faces[j][1], this.faces[j][2]]);
+          this.edges.push([this.faces[j][2], this.faces[j][0]]);
+        }
+      }
+      return this;
+    };
+
+    /**
+     * Create 4 vertices for each stroke line, two at the beginning position
+     * and two at the end position. These vertices are displaced relative to
+     * that line's normal on the GPU
+     * @private
+     * @return {p5.Geometry}
+     */
+    p5.RendererGL.prototype._edgesToVertices = function(geom) {
+      geom.lineVertices = [];
+      for (var i = 0; i < geom.edges.length; i++) {
+        var begin = geom.vertices[geom.edges[i][0]];
+        var end = geom.vertices[geom.edges[i][1]];
+        var dir = end
+          .copy()
+          .sub(begin)
+          .normalize();
+        var a = begin.array();
+        var b = begin.array();
+        var c = end.array();
+        var d = end.array();
+        var dirAdd = dir.array();
+        var dirSub = dir.array();
+        // below is used to displace the pair of vertices at beginning and end
+        // in opposite directions
+        dirAdd.push(1);
+        dirSub.push(-1);
+        geom.lineNormals.push(dirAdd, dirSub, dirAdd, dirAdd, dirSub, dirSub);
+        geom.lineVertices.push(a, b, c, c, b, d);
+      }
+    };
+
+    /**
+     * Modifies all vertices to be centered within the range -100 to 100.
+     * @method normalize
+     * @chainable
+     */
+    p5.Geometry.prototype.normalize = function() {
+      if (this.vertices.length > 0) {
+        // Find the corners of our bounding box
+        var maxPosition = this.vertices[0].copy();
+        var minPosition = this.vertices[0].copy();
+
+        for (var i = 0; i < this.vertices.length; i++) {
+          maxPosition.x = Math.max(maxPosition.x, this.vertices[i].x);
+          minPosition.x = Math.min(minPosition.x, this.vertices[i].x);
+          maxPosition.y = Math.max(maxPosition.y, this.vertices[i].y);
+          minPosition.y = Math.min(minPosition.y, this.vertices[i].y);
+          maxPosition.z = Math.max(maxPosition.z, this.vertices[i].z);
+          minPosition.z = Math.min(minPosition.z, this.vertices[i].z);
+        }
+
+        var center = p5.Vector.lerp(maxPosition, minPosition, 0.5);
+        var dist = p5.Vector.sub(maxPosition, minPosition);
+        var longestDist = Math.max(Math.max(dist.x, dist.y), dist.z);
+        var scale = 200 / longestDist;
+
+        for (i = 0; i < this.vertices.length; i++) {
+          this.vertices[i].sub(center);
+          this.vertices[i].mult(scale);
+        }
+      }
+      return this;
+    };
+
+    module.exports = p5.Geometry;
+
+    },{"../core/core":22}],70:[function(_dereq_,module,exports){
+    /**
+     * @requires constants
+     * @todo see methods below needing further implementation.
+     * future consideration: implement SIMD optimizations
+     * when browser compatibility becomes available
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/
+     *   Reference/Global_Objects/SIMD
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var polarGeometry = _dereq_('../math/polargeometry');
+    var constants = _dereq_('../core/constants');
+
+    var GLMAT_ARRAY_TYPE = Array;
+    var isMatrixArray = function(x) {
+      return x instanceof Array;
+    };
+    if (typeof Float32Array !== 'undefined') {
+      GLMAT_ARRAY_TYPE = Float32Array;
+      isMatrixArray = function(x) {
+        return x instanceof Array || x instanceof Float32Array;
+      };
+    }
+
+    /**
+     * A class to describe a 4x4 matrix
+     * for model and view matrix manipulation in the p5js webgl renderer.
+     * @class p5.Matrix
+     * @private
+     * @constructor
+     * @param {Array} [mat4] array literal of our 4x4 matrix
+     */
+    p5.Matrix = function() {
+      var args = new Array(arguments.length);
+      for (var i = 0; i < args.length; ++i) {
+        args[i] = arguments[i];
+      }
+
+      // This is default behavior when object
+      // instantiated using createMatrix()
+      // @todo implement createMatrix() in core/math.js
+      if (args.length && args[args.length - 1] instanceof p5) {
+        this.p5 = args[args.length - 1];
+      }
+
+      if (args[0] === 'mat3') {
+        this.mat3 = Array.isArray(args[1])
+          ? args[1]
+          : new GLMAT_ARRAY_TYPE([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+      } else {
+        this.mat4 = Array.isArray(args[0])
+          ? args[0]
+          : new GLMAT_ARRAY_TYPE([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+      }
+
+      this.name = 'p5.Matrix'; // for friendly debugger system
+      return this;
+    };
+
+    /**
+     * Sets the x, y, and z component of the vector using two or three separate
+     * variables, the data from a p5.Matrix, or the values from a float array.
+     *
+     * @method set
+     * @param {p5.Matrix|Float32Array|Number[]} [inMatrix] the input p5.Matrix or
+     *                                     an Array of length 16
+     * @chainable
+     */
+    /**
+     * @method set
+     * @param {Number[]} elements 16 numbers passed by value to avoid
+     *                                     array copying.
+     * @chainable
+     */
+    p5.Matrix.prototype.set = function(inMatrix) {
+      if (inMatrix instanceof p5.Matrix) {
+        this.mat4 = inMatrix.mat4;
+        return this;
+      } else if (isMatrixArray(inMatrix)) {
+        this.mat4 = inMatrix;
+        return this;
+      } else if (arguments.length === 16) {
+        this.mat4[0] = arguments[0];
+        this.mat4[1] = arguments[1];
+        this.mat4[2] = arguments[2];
+        this.mat4[3] = arguments[3];
+        this.mat4[4] = arguments[4];
+        this.mat4[5] = arguments[5];
+        this.mat4[6] = arguments[6];
+        this.mat4[7] = arguments[7];
+        this.mat4[8] = arguments[8];
+        this.mat4[9] = arguments[9];
+        this.mat4[10] = arguments[10];
+        this.mat4[11] = arguments[11];
+        this.mat4[12] = arguments[12];
+        this.mat4[13] = arguments[13];
+        this.mat4[14] = arguments[14];
+        this.mat4[15] = arguments[15];
+      }
+      return this;
+    };
+
+    /**
+     * Gets a copy of the vector, returns a p5.Matrix object.
+     *
+     * @method get
+     * @return {p5.Matrix} the copy of the p5.Matrix object
+     */
+    p5.Matrix.prototype.get = function() {
+      return new p5.Matrix(this.mat4, this.p5);
+    };
+
+    /**
+     * return a copy of a matrix
+     * @method copy
+     * @return {p5.Matrix}   the result matrix
+     */
+    p5.Matrix.prototype.copy = function() {
+      var copied = new p5.Matrix(this.p5);
+      copied.mat4[0] = this.mat4[0];
+      copied.mat4[1] = this.mat4[1];
+      copied.mat4[2] = this.mat4[2];
+      copied.mat4[3] = this.mat4[3];
+      copied.mat4[4] = this.mat4[4];
+      copied.mat4[5] = this.mat4[5];
+      copied.mat4[6] = this.mat4[6];
+      copied.mat4[7] = this.mat4[7];
+      copied.mat4[8] = this.mat4[8];
+      copied.mat4[9] = this.mat4[9];
+      copied.mat4[10] = this.mat4[10];
+      copied.mat4[11] = this.mat4[11];
+      copied.mat4[12] = this.mat4[12];
+      copied.mat4[13] = this.mat4[13];
+      copied.mat4[14] = this.mat4[14];
+      copied.mat4[15] = this.mat4[15];
+      return copied;
+    };
+
+    /**
+     * return an identity matrix
+     * @method identity
+     * @return {p5.Matrix}   the result matrix
+     */
+    p5.Matrix.identity = function(pInst) {
+      return new p5.Matrix(pInst);
+    };
+
+    /**
+     * transpose according to a given matrix
+     * @method transpose
+     * @param  {p5.Matrix|Float32Array|Number[]} a  the matrix to be
+     *                                               based on to transpose
+     * @chainable
+     */
+    p5.Matrix.prototype.transpose = function(a) {
+      var a01, a02, a03, a12, a13, a23;
+      if (a instanceof p5.Matrix) {
+        a01 = a.mat4[1];
+        a02 = a.mat4[2];
+        a03 = a.mat4[3];
+        a12 = a.mat4[6];
+        a13 = a.mat4[7];
+        a23 = a.mat4[11];
+
+        this.mat4[0] = a.mat4[0];
+        this.mat4[1] = a.mat4[4];
+        this.mat4[2] = a.mat4[8];
+        this.mat4[3] = a.mat4[12];
+        this.mat4[4] = a01;
+        this.mat4[5] = a.mat4[5];
+        this.mat4[6] = a.mat4[9];
+        this.mat4[7] = a.mat4[13];
+        this.mat4[8] = a02;
+        this.mat4[9] = a12;
+        this.mat4[10] = a.mat4[10];
+        this.mat4[11] = a.mat4[14];
+        this.mat4[12] = a03;
+        this.mat4[13] = a13;
+        this.mat4[14] = a23;
+        this.mat4[15] = a.mat4[15];
+      } else if (isMatrixArray(a)) {
+        a01 = a[1];
+        a02 = a[2];
+        a03 = a[3];
+        a12 = a[6];
+        a13 = a[7];
+        a23 = a[11];
+
+        this.mat4[0] = a[0];
+        this.mat4[1] = a[4];
+        this.mat4[2] = a[8];
+        this.mat4[3] = a[12];
+        this.mat4[4] = a01;
+        this.mat4[5] = a[5];
+        this.mat4[6] = a[9];
+        this.mat4[7] = a[13];
+        this.mat4[8] = a02;
+        this.mat4[9] = a12;
+        this.mat4[10] = a[10];
+        this.mat4[11] = a[14];
+        this.mat4[12] = a03;
+        this.mat4[13] = a13;
+        this.mat4[14] = a23;
+        this.mat4[15] = a[15];
+      }
+      return this;
+    };
+
+    /**
+     * invert  matrix according to a give matrix
+     * @method invert
+     * @param  {p5.Matrix|Float32Array|Number[]} a   the matrix to be
+     *                                                based on to invert
+     * @chainable
+     */
+    p5.Matrix.prototype.invert = function(a) {
+      var a00, a01, a02, a03, a10, a11, a12, a13;
+      var a20, a21, a22, a23, a30, a31, a32, a33;
+      if (a instanceof p5.Matrix) {
+        a00 = a.mat4[0];
+        a01 = a.mat4[1];
+        a02 = a.mat4[2];
+        a03 = a.mat4[3];
+        a10 = a.mat4[4];
+        a11 = a.mat4[5];
+        a12 = a.mat4[6];
+        a13 = a.mat4[7];
+        a20 = a.mat4[8];
+        a21 = a.mat4[9];
+        a22 = a.mat4[10];
+        a23 = a.mat4[11];
+        a30 = a.mat4[12];
+        a31 = a.mat4[13];
+        a32 = a.mat4[14];
+        a33 = a.mat4[15];
+      } else if (isMatrixArray(a)) {
+        a00 = a[0];
+        a01 = a[1];
+        a02 = a[2];
+        a03 = a[3];
+        a10 = a[4];
+        a11 = a[5];
+        a12 = a[6];
+        a13 = a[7];
+        a20 = a[8];
+        a21 = a[9];
+        a22 = a[10];
+        a23 = a[11];
+        a30 = a[12];
+        a31 = a[13];
+        a32 = a[14];
+        a33 = a[15];
+      }
+      var b00 = a00 * a11 - a01 * a10;
+      var b01 = a00 * a12 - a02 * a10;
+      var b02 = a00 * a13 - a03 * a10;
+      var b03 = a01 * a12 - a02 * a11;
+      var b04 = a01 * a13 - a03 * a11;
+      var b05 = a02 * a13 - a03 * a12;
+      var b06 = a20 * a31 - a21 * a30;
+      var b07 = a20 * a32 - a22 * a30;
+      var b08 = a20 * a33 - a23 * a30;
+      var b09 = a21 * a32 - a22 * a31;
+      var b10 = a21 * a33 - a23 * a31;
+      var b11 = a22 * a33 - a23 * a32;
+
+      // Calculate the determinant
+      var det =
+        b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
+
+      if (!det) {
+        return null;
+      }
+      det = 1.0 / det;
+
+      this.mat4[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
+      this.mat4[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
+      this.mat4[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
+      this.mat4[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
+      this.mat4[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
+      this.mat4[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
+      this.mat4[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
+      this.mat4[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
+      this.mat4[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
+      this.mat4[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
+      this.mat4[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
+      this.mat4[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
+      this.mat4[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
+      this.mat4[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
+      this.mat4[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
+      this.mat4[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
+
+      return this;
+    };
+
+    /**
+     * Inverts a 3x3 matrix
+     * @method invert3x3
+     * @chainable
+     */
+    p5.Matrix.prototype.invert3x3 = function() {
+      var a00 = this.mat3[0];
+      var a01 = this.mat3[1];
+      var a02 = this.mat3[2];
+      var a10 = this.mat3[3];
+      var a11 = this.mat3[4];
+      var a12 = this.mat3[5];
+      var a20 = this.mat3[6];
+      var a21 = this.mat3[7];
+      var a22 = this.mat3[8];
+      var b01 = a22 * a11 - a12 * a21;
+      var b11 = -a22 * a10 + a12 * a20;
+      var b21 = a21 * a10 - a11 * a20;
+
+      // Calculate the determinant
+      var det = a00 * b01 + a01 * b11 + a02 * b21;
+      if (!det) {
+        return null;
+      }
+      det = 1.0 / det;
+      this.mat3[0] = b01 * det;
+      this.mat3[1] = (-a22 * a01 + a02 * a21) * det;
+      this.mat3[2] = (a12 * a01 - a02 * a11) * det;
+      this.mat3[3] = b11 * det;
+      this.mat3[4] = (a22 * a00 - a02 * a20) * det;
+      this.mat3[5] = (-a12 * a00 + a02 * a10) * det;
+      this.mat3[6] = b21 * det;
+      this.mat3[7] = (-a21 * a00 + a01 * a20) * det;
+      this.mat3[8] = (a11 * a00 - a01 * a10) * det;
+      return this;
+    };
+
+    /**
+     * transposes a 3x3 p5.Matrix by a mat3
+     * @method transpose3x3
+     * @param  {Number[]} mat3 1-dimensional array
+     * @chainable
+     */
+    p5.Matrix.prototype.transpose3x3 = function(mat3) {
+      var a01 = mat3[1],
+        a02 = mat3[2],
+        a12 = mat3[5];
+      this.mat3[1] = mat3[3];
+      this.mat3[2] = mat3[6];
+      this.mat3[3] = a01;
+      this.mat3[5] = mat3[7];
+      this.mat3[6] = a02;
+      this.mat3[7] = a12;
+      return this;
+    };
+
+    /**
+     * converts a 4x4 matrix to its 3x3 inverse tranform
+     * commonly used in MVMatrix to NMatrix conversions.
+     * @method invertTranspose
+     * @param  {p5.Matrix} mat4 the matrix to be based on to invert
+     * @chainable
+     * @todo  finish implementation
+     */
+    p5.Matrix.prototype.inverseTranspose = function(matrix) {
+      if (this.mat3 === undefined) {
+        console.error('sorry, this function only works with mat3');
+      } else {
+        //convert mat4 -> mat3
+        this.mat3[0] = matrix.mat4[0];
+        this.mat3[1] = matrix.mat4[1];
+        this.mat3[2] = matrix.mat4[2];
+        this.mat3[3] = matrix.mat4[4];
+        this.mat3[4] = matrix.mat4[5];
+        this.mat3[5] = matrix.mat4[6];
+        this.mat3[6] = matrix.mat4[8];
+        this.mat3[7] = matrix.mat4[9];
+        this.mat3[8] = matrix.mat4[10];
+      }
+
+      var inverse = this.invert3x3();
+      // check inverse succeded
+      if (inverse) {
+        inverse.transpose3x3(this.mat3);
+      } else {
+        // in case of singularity, just zero the matrix
+        for (var i = 0; i < 9; i++) {
+          this.mat3[i] = 0;
+        }
+      }
+      return this;
+    };
+
+    /**
+     * inspired by Toji's mat4 determinant
+     * @method determinant
+     * @return {Number} Determinant of our 4x4 matrix
+     */
+    p5.Matrix.prototype.determinant = function() {
+      var d00 = this.mat4[0] * this.mat4[5] - this.mat4[1] * this.mat4[4],
+        d01 = this.mat4[0] * this.mat4[6] - this.mat4[2] * this.mat4[4],
+        d02 = this.mat4[0] * this.mat4[7] - this.mat4[3] * this.mat4[4],
+        d03 = this.mat4[1] * this.mat4[6] - this.mat4[2] * this.mat4[5],
+        d04 = this.mat4[1] * this.mat4[7] - this.mat4[3] * this.mat4[5],
+        d05 = this.mat4[2] * this.mat4[7] - this.mat4[3] * this.mat4[6],
+        d06 = this.mat4[8] * this.mat4[13] - this.mat4[9] * this.mat4[12],
+        d07 = this.mat4[8] * this.mat4[14] - this.mat4[10] * this.mat4[12],
+        d08 = this.mat4[8] * this.mat4[15] - this.mat4[11] * this.mat4[12],
+        d09 = this.mat4[9] * this.mat4[14] - this.mat4[10] * this.mat4[13],
+        d10 = this.mat4[9] * this.mat4[15] - this.mat4[11] * this.mat4[13],
+        d11 = this.mat4[10] * this.mat4[15] - this.mat4[11] * this.mat4[14];
+
+      // Calculate the determinant
+      return d00 * d11 - d01 * d10 + d02 * d09 + d03 * d08 - d04 * d07 + d05 * d06;
+    };
+
+    /**
+     * multiply two mat4s
+     * @method mult
+     * @param {p5.Matrix|Float32Array|Number[]} multMatrix The matrix
+     *                                                we want to multiply by
+     * @chainable
+     */
+    p5.Matrix.prototype.mult = function(multMatrix) {
+      var _src;
+
+      if (multMatrix === this || multMatrix === this.mat4) {
+        _src = this.copy().mat4; // only need to allocate in this rare case
+      } else if (multMatrix instanceof p5.Matrix) {
+        _src = multMatrix.mat4;
+      } else if (isMatrixArray(multMatrix)) {
+        _src = multMatrix;
+      } else {
+        return; // nothing to do.
+      }
+
+      // each row is used for the multiplier
+      var b0 = this.mat4[0],
+        b1 = this.mat4[1],
+        b2 = this.mat4[2],
+        b3 = this.mat4[3];
+      this.mat4[0] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+      this.mat4[1] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+      this.mat4[2] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+      this.mat4[3] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+
+      b0 = this.mat4[4];
+      b1 = this.mat4[5];
+      b2 = this.mat4[6];
+      b3 = this.mat4[7];
+      this.mat4[4] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+      this.mat4[5] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+      this.mat4[6] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+      this.mat4[7] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+
+      b0 = this.mat4[8];
+      b1 = this.mat4[9];
+      b2 = this.mat4[10];
+      b3 = this.mat4[11];
+      this.mat4[8] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+      this.mat4[9] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+      this.mat4[10] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+      this.mat4[11] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+
+      b0 = this.mat4[12];
+      b1 = this.mat4[13];
+      b2 = this.mat4[14];
+      b3 = this.mat4[15];
+      this.mat4[12] = b0 * _src[0] + b1 * _src[4] + b2 * _src[8] + b3 * _src[12];
+      this.mat4[13] = b0 * _src[1] + b1 * _src[5] + b2 * _src[9] + b3 * _src[13];
+      this.mat4[14] = b0 * _src[2] + b1 * _src[6] + b2 * _src[10] + b3 * _src[14];
+      this.mat4[15] = b0 * _src[3] + b1 * _src[7] + b2 * _src[11] + b3 * _src[15];
+
+      return this;
+    };
+
+    /**
+     * scales a p5.Matrix by scalars or a vector
+     * @method scale
+     * @param  {p5.Vector|Float32Array|Number[]} s vector to scale by
+     * @chainable
+     */
+    p5.Matrix.prototype.scale = function(x, y, z) {
+      if (x instanceof p5.Vector) {
+        // x is a vector, extract the components from it.
+        y = x.y;
+        z = x.z;
+        x = x.x; // must be last
+      } else if (x instanceof Array) {
+        // x is an array, extract the components from it.
+        y = x[1];
+        z = x[2];
+        x = x[0]; // must be last
+      }
+
+      this.mat4[0] *= x;
+      this.mat4[1] *= x;
+      this.mat4[2] *= x;
+      this.mat4[3] *= x;
+      this.mat4[4] *= y;
+      this.mat4[5] *= y;
+      this.mat4[6] *= y;
+      this.mat4[7] *= y;
+      this.mat4[8] *= z;
+      this.mat4[9] *= z;
+      this.mat4[10] *= z;
+      this.mat4[11] *= z;
+
+      return this;
+    };
+
+    /**
+     * rotate our Matrix around an axis by the given angle.
+     * @method rotate
+     * @param  {Number} a The angle of rotation in radians
+     * @param  {p5.Vector|Number[]} axis  the axis(es) to rotate around
+     * @chainable
+     * inspired by Toji's gl-matrix lib, mat4 rotation
+     */
+    p5.Matrix.prototype.rotate = function(a, x, y, z) {
+      var _a, len;
+
+      if (this.p5 && this.p5._angleMode === constants.DEGREES) {
+        _a = polarGeometry.degreesToRadians(a);
+      } else {
+        _a = a;
+      }
+      if (x instanceof p5.Vector) {
+        // x is a vector, extract the components from it.
+        y = x.y;
+        z = x.z;
+        x = x.x; //must be last
+      } else if (x instanceof Array) {
+        // x is an array, extract the components from it.
+        y = x[1];
+        z = x[2];
+        x = x[0]; //must be last
+      }
+
+      len = Math.sqrt(x * x + y * y + z * z);
+      x *= 1 / len;
+      y *= 1 / len;
+      z *= 1 / len;
+
+      var a00 = this.mat4[0];
+      var a01 = this.mat4[1];
+      var a02 = this.mat4[2];
+      var a03 = this.mat4[3];
+      var a10 = this.mat4[4];
+      var a11 = this.mat4[5];
+      var a12 = this.mat4[6];
+      var a13 = this.mat4[7];
+      var a20 = this.mat4[8];
+      var a21 = this.mat4[9];
+      var a22 = this.mat4[10];
+      var a23 = this.mat4[11];
+
+      //sin,cos, and tan of respective angle
+      var sA = Math.sin(_a);
+      var cA = Math.cos(_a);
+      var tA = 1 - cA;
+      // Construct the elements of the rotation matrix
+      var b00 = x * x * tA + cA;
+      var b01 = y * x * tA + z * sA;
+      var b02 = z * x * tA - y * sA;
+      var b10 = x * y * tA - z * sA;
+      var b11 = y * y * tA + cA;
+      var b12 = z * y * tA + x * sA;
+      var b20 = x * z * tA + y * sA;
+      var b21 = y * z * tA - x * sA;
+      var b22 = z * z * tA + cA;
+
+      // rotation-specific matrix multiplication
+      this.mat4[0] = a00 * b00 + a10 * b01 + a20 * b02;
+      this.mat4[1] = a01 * b00 + a11 * b01 + a21 * b02;
+      this.mat4[2] = a02 * b00 + a12 * b01 + a22 * b02;
+      this.mat4[3] = a03 * b00 + a13 * b01 + a23 * b02;
+      this.mat4[4] = a00 * b10 + a10 * b11 + a20 * b12;
+      this.mat4[5] = a01 * b10 + a11 * b11 + a21 * b12;
+      this.mat4[6] = a02 * b10 + a12 * b11 + a22 * b12;
+      this.mat4[7] = a03 * b10 + a13 * b11 + a23 * b12;
+      this.mat4[8] = a00 * b20 + a10 * b21 + a20 * b22;
+      this.mat4[9] = a01 * b20 + a11 * b21 + a21 * b22;
+      this.mat4[10] = a02 * b20 + a12 * b21 + a22 * b22;
+      this.mat4[11] = a03 * b20 + a13 * b21 + a23 * b22;
+
+      return this;
+    };
+
+    /**
+     * @todo  finish implementing this method!
+     * translates
+     * @method translate
+     * @param  {Number[]} v vector to translate by
+     * @chainable
+     */
+    p5.Matrix.prototype.translate = function(v) {
+      var x = v[0],
+        y = v[1],
+        z = v[2] || 0;
+      this.mat4[12] += this.mat4[0] * x + this.mat4[4] * y + this.mat4[8] * z;
+      this.mat4[13] += this.mat4[1] * x + this.mat4[5] * y + this.mat4[9] * z;
+      this.mat4[14] += this.mat4[2] * x + this.mat4[6] * y + this.mat4[10] * z;
+      this.mat4[15] += this.mat4[3] * x + this.mat4[7] * y + this.mat4[11] * z;
+    };
+
+    p5.Matrix.prototype.rotateX = function(a) {
+      this.rotate(a, 1, 0, 0);
+    };
+    p5.Matrix.prototype.rotateY = function(a) {
+      this.rotate(a, 0, 1, 0);
+    };
+    p5.Matrix.prototype.rotateZ = function(a) {
+      this.rotate(a, 0, 0, 1);
+    };
+
+    /**
+     * sets the perspective matrix
+     * @method perspective
+     * @param  {Number} fovy   [description]
+     * @param  {Number} aspect [description]
+     * @param  {Number} near   near clipping plane
+     * @param  {Number} far    far clipping plane
+     * @chainable
+     */
+    p5.Matrix.prototype.perspective = function(fovy, aspect, near, far) {
+      var f = 1.0 / Math.tan(fovy / 2),
+        nf = 1 / (near - far);
+
+      this.mat4[0] = f / aspect;
+      this.mat4[1] = 0;
+      this.mat4[2] = 0;
+      this.mat4[3] = 0;
+      this.mat4[4] = 0;
+      this.mat4[5] = f;
+      this.mat4[6] = 0;
+      this.mat4[7] = 0;
+      this.mat4[8] = 0;
+      this.mat4[9] = 0;
+      this.mat4[10] = (far + near) * nf;
+      this.mat4[11] = -1;
+      this.mat4[12] = 0;
+      this.mat4[13] = 0;
+      this.mat4[14] = 2 * far * near * nf;
+      this.mat4[15] = 0;
+
+      return this;
+    };
+
+    /**
+     * sets the ortho matrix
+     * @method ortho
+     * @param  {Number} left   [description]
+     * @param  {Number} right  [description]
+     * @param  {Number} bottom [description]
+     * @param  {Number} top    [description]
+     * @param  {Number} near   near clipping plane
+     * @param  {Number} far    far clipping plane
+     * @chainable
+     */
+    p5.Matrix.prototype.ortho = function(left, right, bottom, top, near, far) {
+      var lr = 1 / (left - right),
+        bt = 1 / (bottom - top),
+        nf = 1 / (near - far);
+      this.mat4[0] = -2 * lr;
+      this.mat4[1] = 0;
+      this.mat4[2] = 0;
+      this.mat4[3] = 0;
+      this.mat4[4] = 0;
+      this.mat4[5] = -2 * bt;
+      this.mat4[6] = 0;
+      this.mat4[7] = 0;
+      this.mat4[8] = 0;
+      this.mat4[9] = 0;
+      this.mat4[10] = 2 * nf;
+      this.mat4[11] = 0;
+      this.mat4[12] = (left + right) * lr;
+      this.mat4[13] = (top + bottom) * bt;
+      this.mat4[14] = (far + near) * nf;
+      this.mat4[15] = 1;
+
+      return this;
+    };
+
+    /**
+     * PRIVATE
+     */
+    // matrix methods adapted from:
+    // https://developer.mozilla.org/en-US/docs/Web/WebGL/
+    // gluPerspective
+    //
+    // function _makePerspective(fovy, aspect, znear, zfar){
+    //    var ymax = znear * Math.tan(fovy * Math.PI / 360.0);
+    //    var ymin = -ymax;
+    //    var xmin = ymin * aspect;
+    //    var xmax = ymax * aspect;
+    //    return _makeFrustum(xmin, xmax, ymin, ymax, znear, zfar);
+    //  }
+
+    ////
+    //// glFrustum
+    ////
+    //function _makeFrustum(left, right, bottom, top, znear, zfar){
+    //  var X = 2*znear/(right-left);
+    //  var Y = 2*znear/(top-bottom);
+    //  var A = (right+left)/(right-left);
+    //  var B = (top+bottom)/(top-bottom);
+    //  var C = -(zfar+znear)/(zfar-znear);
+    //  var D = -2*zfar*znear/(zfar-znear);
+    //  var frustrumMatrix =[
+    //  X, 0, A, 0,
+    //  0, Y, B, 0,
+    //  0, 0, C, D,
+    //  0, 0, -1, 0
+    //];
+    //return frustrumMatrix;
+    // }
+
+    // function _setMVPMatrices(){
+    ////an identity matrix
+    ////@TODO use the p5.Matrix class to abstract away our MV matrices and
+    ///other math
+    //var _mvMatrix =
+    //[
+    //  1.0,0.0,0.0,0.0,
+    //  0.0,1.0,0.0,0.0,
+    //  0.0,0.0,1.0,0.0,
+    //  0.0,0.0,0.0,1.0
+    //];
+
+    module.exports = p5.Matrix;
+
+    },{"../core/constants":21,"../core/core":22,"../math/polargeometry":54}],71:[function(_dereq_,module,exports){
+    /**
+     * Welcome to RendererGL Immediate Mode.
+     * Immediate mode is used for drawing custom shapes
+     * from a set of vertices.  Immediate Mode is activated
+     * when you call beginShape() & de-activated when you call endShape().
+     * Immediate mode is a style of programming borrowed
+     * from OpenGL's (now-deprecated) immediate mode.
+     * It differs from p5.js' default, Retained Mode, which caches
+     * geometries and buffers on the CPU to reduce the number of webgl
+     * draw calls. Retained mode is more efficient & performative,
+     * however, Immediate Mode is useful for sketching quick
+     * geometric ideas.
+     */
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var constants = _dereq_('../core/constants');
+
+    /**
+     * Begin shape drawing.  This is a helpful way of generating
+     * custom shapes quickly.  However in WEBGL mode, application
+     * performance will likely drop as a result of too many calls to
+     * beginShape() / endShape().  As a high performance alternative,
+     * please use p5.js geometry primitives.
+     * @method beginShape
+     * @param  {Number} mode webgl primitives mode.  beginShape supports the
+     *                       following modes:
+     *                       POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,
+     *                       TRIANGLE_STRIP,and TRIANGLE_FAN.
+     * @chainable
+     */
+    p5.RendererGL.prototype.beginShape = function(mode) {
+      //default shape mode is line_strip
+      this.immediateMode.shapeMode =
+        mode !== undefined ? mode : constants.LINE_STRIP;
+      //if we haven't yet initialized our
+      //immediateMode vertices & buffers, create them now!
+      if (this.immediateMode.vertices === undefined) {
+        this.immediateMode.vertices = [];
+        this.immediateMode.edges = [];
+        this.immediateMode.lineVertices = [];
+        this.immediateMode.vertexColors = [];
+        this.immediateMode.lineNormals = [];
+        this.immediateMode.uvCoords = [];
+        this.immediateMode.vertexBuffer = this.GL.createBuffer();
+        this.immediateMode.colorBuffer = this.GL.createBuffer();
+        this.immediateMode.uvBuffer = this.GL.createBuffer();
+        this.immediateMode.lineVertexBuffer = this.GL.createBuffer();
+        this.immediateMode.lineNormalBuffer = this.GL.createBuffer();
+      } else {
+        this.immediateMode.vertices.length = 0;
+        this.immediateMode.edges.length = 0;
+        this.immediateMode.lineVertices.length = 0;
+        this.immediateMode.lineNormals.length = 0;
+        this.immediateMode.vertexColors.length = 0;
+        this.immediateMode.uvCoords.length = 0;
+      }
+      this.isImmediateDrawing = true;
+      return this;
+    };
+    /**
+     * adds a vertex to be drawn in a custom Shape.
+     * @method vertex
+     * @param  {Number} x x-coordinate of vertex
+     * @param  {Number} y y-coordinate of vertex
+     * @param  {Number} z z-coordinate of vertex
+     * @chainable
+     * @TODO implement handling of p5.Vector args
+     */
+    p5.RendererGL.prototype.vertex = function(x, y) {
+      var z, u, v;
+
+      // default to (x, y) mode: all other arugments assumed to be 0.
+      z = u = v = 0;
+
+      if (arguments.length === 3) {
+        // (x, y, z) mode: (u, v) assumed to be 0.
+        z = arguments[2];
+      } else if (arguments.length === 4) {
+        // (x, y, u, v) mode: z assumed to be 0.
+        u = arguments[2];
+        v = arguments[3];
+      } else if (arguments.length === 5) {
+        // (x, y, z, u, v) mode
+        z = arguments[2];
+        u = arguments[3];
+        v = arguments[4];
+      }
+      var vert = new p5.Vector(x, y, z);
+      this.immediateMode.vertices.push(vert);
+      var vertexColor = this.curFillColor || [0.5, 0.5, 0.5, 1.0];
+      this.immediateMode.vertexColors.push(
+        vertexColor[0],
+        vertexColor[1],
+        vertexColor[2],
+        vertexColor[3]
+      );
+
+      this.immediateMode.uvCoords.push(u, v);
+
+      return this;
+    };
+
+    /**
+     * End shape drawing and render vertices to screen.
+     * @chainable
+     */
+    p5.RendererGL.prototype.endShape = function(
+      mode,
+      isCurve,
+      isBezier,
+      isQuadratic,
+      isContour,
+      shapeKind
+    ) {
+      this._useImmediateModeShader();
+
+      if (this._doStroke && this.drawMode !== constants.TEXTURE) {
+        for (var i = 0; i < this.immediateMode.vertices.length - 1; i++) {
+          this.immediateMode.edges.push([i, i + 1]);
+        }
+        if (mode === constants.CLOSE) {
+          this.immediateMode.edges.push([
+            this.immediateMode.vertices.length - 1,
+            0
+          ]);
+        }
+
+        this._edgesToVertices(this.immediateMode);
+        this._drawStrokeImmediateMode();
+      }
+      if (this._doFill) {
+        this._drawFillImmediateMode(
+          mode,
+          isCurve,
+          isBezier,
+          isQuadratic,
+          isContour,
+          shapeKind
+        );
+      }
+      //clear out our vertexPositions & colors arrays
+      //after rendering
+      this.immediateMode.vertices.length = 0;
+      this.immediateMode.vertexColors.length = 0;
+      this.immediateMode.uvCoords.length = 0;
+      this.isImmediateDrawing = false;
+
+      return this;
+    };
+
+    p5.RendererGL.prototype._drawFillImmediateMode = function(
+      mode,
+      isCurve,
+      isBezier,
+      isQuadratic,
+      isContour,
+      shapeKind
+    ) {
+      var gl = this.GL;
+      this.curFillShader.bindShader();
+
+      // initialize the fill shader's 'aPosition' buffer
+      if (this.curFillShader.attributes.aPosition) {
+        //vertex position Attribute
+        this._bindBuffer(
+          this.immediateMode.vertexBuffer,
+          gl.ARRAY_BUFFER,
+          this._vToNArray(this.immediateMode.vertices),
+          Float32Array,
+          gl.DYNAMIC_DRAW
+        );
+
+        this.curFillShader.enableAttrib(
+          this.curFillShader.attributes.aPosition.location,
+          3,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+
+      // initialize the fill shader's 'aVertexColor' buffer
+      if (
+        this.drawMode === constants.FILL &&
+        this.curFillShader.attributes.aVertexColor
+      ) {
+        this._bindBuffer(
+          this.immediateMode.colorBuffer,
+          gl.ARRAY_BUFFER,
+          this.immediateMode.vertexColors,
+          Float32Array,
+          gl.DYNAMIC_DRAW
+        );
+
+        this.curFillShader.enableAttrib(
+          this.curFillShader.attributes.aVertexColor.location,
+          4,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+
+      // initialize the fill shader's 'aTexCoord' buffer
+      if (
+        this.drawMode === constants.TEXTURE &&
+        this.curFillShader.attributes.aTexCoord
+      ) {
+        //texture coordinate Attribute
+        this._bindBuffer(
+          this.immediateMode.uvBuffer,
+          gl.ARRAY_BUFFER,
+          this.immediateMode.uvCoords,
+          Float32Array,
+          gl.DYNAMIC_DRAW
+        );
+
+        this.curFillShader.enableAttrib(
+          this.curFillShader.attributes.aTexCoord.location,
+          2,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+
+      //if (true || mode) {
+      if (this.drawMode === constants.FILL || this.drawMode === constants.TEXTURE) {
+        switch (this.immediateMode.shapeMode) {
+          case constants.LINE_STRIP:
+          case constants.LINES:
+          case constants.TRIANGLES:
+            this.immediateMode.shapeMode = constants.TRIANGLE_FAN;
+            break;
+        }
+      } else {
+        switch (this.immediateMode.shapeMode) {
+          case constants.LINE_STRIP:
+          case constants.LINES:
+            this.immediateMode.shapeMode = constants.LINE_LOOP;
+            break;
+        }
+      }
+      //}
+      //QUADS & QUAD_STRIP are not supported primitives modes
+      //in webgl.
+      if (
+        this.immediateMode.shapeMode === constants.QUADS ||
+        this.immediateMode.shapeMode === constants.QUAD_STRIP
+      ) {
+        throw new Error(
+          'sorry, ' +
+            this.immediateMode.shapeMode +
+            ' not yet implemented in webgl mode.'
+        );
+      } else {
+        this._applyColorBlend(this.curFillColor);
+        gl.enable(gl.BLEND);
+        gl.drawArrays(
+          this.immediateMode.shapeMode,
+          0,
+          this.immediateMode.vertices.length
+        );
+      }
+      // todo / optimizations? leave bound until another shader is set?
+      this.curFillShader.unbindShader();
+    };
+
+    p5.RendererGL.prototype._drawStrokeImmediateMode = function() {
+      var gl = this.GL;
+      this.curStrokeShader.bindShader();
+
+      // initialize the stroke shader's 'aPosition' buffer
+      if (this.curStrokeShader.attributes.aPosition) {
+        this._bindBuffer(
+          this.immediateMode.lineVertexBuffer,
+          gl.ARRAY_BUFFER,
+          this._flatten(this.immediateMode.lineVertices),
+          Float32Array,
+          gl.STATIC_DRAW
+        );
+
+        this.curStrokeShader.enableAttrib(
+          this.curStrokeShader.attributes.aPosition.location,
+          3,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+
+      // initialize the stroke shader's 'aDirection' buffer
+      if (this.curStrokeShader.attributes.aDirection) {
+        this._bindBuffer(
+          this.immediateMode.lineNormalBuffer,
+          gl.ARRAY_BUFFER,
+          this._flatten(this.immediateMode.lineNormals),
+          Float32Array,
+          gl.STATIC_DRAW
+        );
+        this.curStrokeShader.enableAttrib(
+          this.curStrokeShader.attributes.aDirection.location,
+          4,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+
+      this._applyColorBlend(this.curStrokeColor);
+      gl.drawArrays(gl.TRIANGLES, 0, this.immediateMode.lineVertices.length);
+
+      // todo / optimizations? leave bound until another shader is set?
+      this.curStrokeShader.unbindShader();
+    };
+
+    module.exports = p5.RendererGL;
+
+    },{"../core/constants":21,"../core/core":22}],72:[function(_dereq_,module,exports){
+    //Retained Mode. The default mode for rendering 3D primitives
+    //in WEBGL.
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    var hashCount = 0;
+    /**
+     * _initBufferDefaults
+     * @private
+     * @description initializes buffer defaults. runs each time a new geometry is
+     * registered
+     * @param  {String} gId  key of the geometry object
+     */
+    p5.RendererGL.prototype._initBufferDefaults = function(gId) {
+      this._freeBuffers(gId);
+
+      //@TODO remove this limit on hashes in gHash
+      hashCount++;
+      if (hashCount > 1000) {
+        var key = Object.keys(this.gHash)[0];
+        delete this.gHash[key];
+        hashCount--;
+      }
+
+      //create a new entry in our gHash
+      this.gHash[gId] = {};
+    };
+
+    p5.RendererGL.prototype._freeBuffers = function(gId) {
+      var geometry = this.gHash[gId];
+      if (!geometry) {
+        return;
+      }
+
+      delete this.gHash[gId];
+      hashCount--;
+
+      var gl = this.GL;
+      geometry.vertexBuffer && gl.deleteBuffer(geometry.vertexBuffer);
+      geometry.normalBuffer && gl.deleteBuffer(geometry.normalBuffer);
+      geometry.lineNormalBuffer && gl.deleteBuffer(geometry.lineNormalBuffer);
+      geometry.uvBuffer && gl.deleteBuffer(geometry.uvBuffer);
+      geometry.indexBuffer && gl.deleteBuffer(geometry.indexBuffer);
+      geometry.lineVertexBuffer && gl.deleteBuffer(geometry.lineVertexBuffer);
+    };
+    /**
+     * createBuffers description
+     * @private
+     * @param  {String} gId    key of the geometry object
+     * @param  {p5.Geometry}  obj contains geometry data
+     */
+    p5.RendererGL.prototype.createBuffers = function(gId, obj) {
+      var gl = this.GL;
+      this._setDefaultCamera();
+      //initialize the gl buffers for our geom groups
+      this._initBufferDefaults(gId);
+
+      var geometry = this.gHash[gId];
+
+      geometry.numberOfItems = obj.faces.length * 3;
+      geometry.lineVertexCount = obj.lineVertices.length;
+
+      this._useColorShader();
+
+      // initialize the stroke shader's 'aPosition' buffer, if used
+      if (this.curStrokeShader.attributes.aPosition) {
+        geometry.lineVertexBuffer = gl.createBuffer();
+
+        this._bindBuffer(
+          geometry.lineVertexBuffer,
+          gl.ARRAY_BUFFER,
+          this._flatten(obj.lineVertices),
+          Float32Array,
+          gl.STATIC_DRAW
+        );
+
+        this.curStrokeShader.enableAttrib(
+          this.curStrokeShader.attributes.aPosition.location,
+          3,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+
+      // initialize the stroke shader's 'aDirection' buffer, if used
+      if (this.curStrokeShader.attributes.aDirection) {
+        geometry.lineNormalBuffer = gl.createBuffer();
+
+        this._bindBuffer(
+          geometry.lineNormalBuffer,
+          gl.ARRAY_BUFFER,
+          this._flatten(obj.lineNormals),
+          Float32Array,
+          gl.STATIC_DRAW
+        );
+
+        this.curStrokeShader.enableAttrib(
+          this.curStrokeShader.attributes.aDirection.location,
+          4,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+
+      // initialize the fill shader's 'aPosition' buffer, if used
+      if (this.curFillShader.attributes.aPosition) {
+        geometry.vertexBuffer = gl.createBuffer();
+
+        // allocate space for vertex positions
+        this._bindBuffer(
+          geometry.vertexBuffer,
+          gl.ARRAY_BUFFER,
+          this._vToNArray(obj.vertices),
+          Float32Array,
+          gl.STATIC_DRAW
+        );
+
+        this.curFillShader.enableAttrib(
+          this.curFillShader.attributes.aPosition.location,
+          3,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+
+      // allocate space for faces
+      geometry.indexBuffer = gl.createBuffer();
+      this._bindBuffer(
+        geometry.indexBuffer,
+        gl.ELEMENT_ARRAY_BUFFER,
+        this._flatten(obj.faces),
+        Uint16Array,
+        gl.STATIC_DRAW
+      );
+
+      // initialize the fill shader's 'aNormal' buffer, if used
+      if (this.curFillShader.attributes.aNormal) {
+        geometry.normalBuffer = gl.createBuffer();
+
+        // allocate space for normals
+        this._bindBuffer(
+          geometry.normalBuffer,
+          gl.ARRAY_BUFFER,
+          this._vToNArray(obj.vertexNormals),
+          Float32Array,
+          gl.STATIC_DRAW
+        );
+
+        this.curFillShader.enableAttrib(
+          this.curFillShader.attributes.aNormal.location,
+          3,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+
+      // initialize the fill shader's 'aTexCoord' buffer, if used
+      if (this.curFillShader.attributes.aTexCoord) {
+        geometry.uvBuffer = gl.createBuffer();
+
+        // tex coords
+        this._bindBuffer(
+          geometry.uvBuffer,
+          gl.ARRAY_BUFFER,
+          this._flatten(obj.uvs),
+          Float32Array,
+          gl.STATIC_DRAW
+        );
+
+        this.curFillShader.enableAttrib(
+          this.curFillShader.attributes.aTexCoord.location,
+          2,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+      }
+      //}
+    };
+
+    /**
+     * Draws buffers given a geometry key ID
+     * @private
+     * @param  {String} gId     ID in our geom hash
+     * @chainable
+     */
+    p5.RendererGL.prototype.drawBuffers = function(gId) {
+      this._setDefaultCamera();
+      var gl = this.GL;
+      this._useColorShader();
+      var geometry = this.gHash[gId];
+
+      if (this._doStroke && geometry.lineVertexCount > 0) {
+        this.curStrokeShader.bindShader();
+
+        // bind the stroke shader's 'aPosition' buffer
+        if (geometry.lineVertexBuffer) {
+          this._bindBuffer(geometry.lineVertexBuffer, gl.ARRAY_BUFFER);
+          this.curStrokeShader.enableAttrib(
+            this.curStrokeShader.attributes.aPosition.location,
+            3,
+            gl.FLOAT,
+            false,
+            0,
+            0
+          );
+        }
+
+        // bind the stroke shader's 'aDirection' buffer
+        if (geometry.lineNormalBuffer) {
+          this._bindBuffer(geometry.lineNormalBuffer, gl.ARRAY_BUFFER);
+          this.curStrokeShader.enableAttrib(
+            this.curStrokeShader.attributes.aDirection.location,
+            4,
+            gl.FLOAT,
+            false,
+            0,
+            0
+          );
+        }
+
+        this._applyColorBlend(this.curStrokeColor);
+        this._drawArrays(gl.TRIANGLES, gId);
+        this.curStrokeShader.unbindShader();
+      }
+
+      if (this._doFill !== false) {
+        this.curFillShader.bindShader();
+
+        // bind the fill shader's 'aPosition' buffer
+        if (geometry.vertexBuffer) {
+          //vertex position buffer
+          this._bindBuffer(geometry.vertexBuffer, gl.ARRAY_BUFFER);
+          this.curFillShader.enableAttrib(
+            this.curFillShader.attributes.aPosition.location,
+            3,
+            gl.FLOAT,
+            false,
+            0,
+            0
+          );
+        }
+
+        if (geometry.indexBuffer) {
+          //vertex index buffer
+          this._bindBuffer(geometry.indexBuffer, gl.ELEMENT_ARRAY_BUFFER);
+        }
+
+        // bind the fill shader's 'aNormal' buffer
+        if (geometry.normalBuffer) {
+          this._bindBuffer(geometry.normalBuffer, gl.ARRAY_BUFFER);
+          this.curFillShader.enableAttrib(
+            this.curFillShader.attributes.aNormal.location,
+            3,
+            gl.FLOAT,
+            false,
+            0,
+            0
+          );
+        }
+
+        // bind the fill shader's 'aTexCoord' buffer
+        if (geometry.uvBuffer) {
+          // uv buffer
+          this._bindBuffer(geometry.uvBuffer, gl.ARRAY_BUFFER);
+          this.curFillShader.enableAttrib(
+            this.curFillShader.attributes.aTexCoord.location,
+            2,
+            gl.FLOAT,
+            false,
+            0,
+            0
+          );
+        }
+
+        this._applyColorBlend(this.curFillColor);
+        this._drawElements(gl.TRIANGLES, gId);
+        this.curFillShader.unbindShader();
+      }
+      return this;
+    };
+
+    /**
+     * Calls drawBuffers() with a scaled model/view matrix.
+     *
+     * This is used by various 3d primitive methods (in primitives.js, eg. plane,
+     * box, torus, etc...) to allow caching of un-scaled geometries. Those
+     * geometries are generally created with unit-length dimensions, cached as
+     * such, and then scaled appropriately in this method prior to rendering.
+     *
+     * @private
+     * @method drawBuffersScaled
+     * @param {String} gId     ID in our geom hash
+     * @param {Number} scaleX  the amount to scale in the X direction
+     * @param {Number} scaleY  the amount to scale in the Y direction
+     * @param {Number} scaleZ  the amount to scale in the Z direction
+     */
+    p5.RendererGL.prototype.drawBuffersScaled = function(
+      gId,
+      scaleX,
+      scaleY,
+      scaleZ
+    ) {
+      var uMVMatrix = this.uMVMatrix.copy();
+      try {
+        this.uMVMatrix.scale(scaleX, scaleY, scaleZ);
+        this.drawBuffers(gId);
+      } finally {
+        this.uMVMatrix = uMVMatrix;
+      }
+    };
+
+    p5.RendererGL.prototype._drawArrays = function(drawMode, gId) {
+      this.GL.drawArrays(drawMode, 0, this.gHash[gId].lineVertexCount);
+      return this;
+    };
+
+    p5.RendererGL.prototype._drawElements = function(drawMode, gId) {
+      this.GL.drawElements(
+        drawMode,
+        this.gHash[gId].numberOfItems,
+        this.GL.UNSIGNED_SHORT,
+        0
+      );
+    };
+
+    module.exports = p5.RendererGL;
+
+    },{"../core/core":22}],73:[function(_dereq_,module,exports){
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    var constants = _dereq_('../core/constants');
+    _dereq_('./p5.Shader');
+    _dereq_('../core/p5.Renderer');
+    _dereq_('./p5.Matrix');
+
+
+    var uMVMatrixStack = [];
+    var cameraMatrixStack = [];
+
+    var defaultShaders = {
+      immediateVert: "attribute vec3 aPosition;\nattribute vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uResolution;\nuniform float uPointSize;\n\nvarying vec4 vColor;\nvoid main(void) {\n  vec4 positionVec4 = vec4(aPosition, 1.0);\n  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n  vColor = aVertexColor;\n  gl_PointSize = uPointSize;\n}\n",
+      vertexColorVert: "attribute vec3 aPosition;\nattribute vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nvarying vec4 vColor;\n\nvoid main(void) {\n  vec4 positionVec4 = vec4(aPosition, 1.0);\n  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n  vColor = aVertexColor;\n}\n",
+      vertexColorFrag: "precision mediump float;\nvarying vec4 vColor;\nvoid main(void) {\n  gl_FragColor = vColor;\n}",
+      normalVert: "attribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvarying vec3 vVertexNormal;\nvarying highp vec2 vVertTexCoord;\n\nvoid main(void) {\n  vec4 positionVec4 = vec4(aPosition, 1.0);\n  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n  vVertexNormal = normalize(vec3( uNormalMatrix * aNormal ));\n  vVertTexCoord = aTexCoord;\n}\n",
+      normalFrag: "precision mediump float;\nvarying vec3 vVertexNormal;\nvoid main(void) {\n  gl_FragColor = vec4(vVertexNormal, 1.0);\n}",
+      basicFrag: "precision mediump float;\nvarying vec3 vVertexNormal;\nuniform vec4 uMaterialColor;\nvoid main(void) {\n  gl_FragColor = uMaterialColor;\n}",
+      lightVert: "attribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform mat4 uViewMatrix;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\nuniform int uAmbientLightCount;\nuniform int uDirectionalLightCount;\nuniform int uPointLightCount;\n\nuniform vec3 uAmbientColor[8];\nuniform vec3 uLightingDirection[8];\nuniform vec3 uDirectionalColor[8];\nuniform vec3 uPointLightLocation[8];\nuniform vec3 uPointLightColor[8];\nuniform bool uSpecular;\n\nvarying vec3 vVertexNormal;\nvarying vec2 vVertTexCoord;\nvarying vec3 vLightWeighting;\n\nvoid main(void){\n\n  vec4 positionVec4 = vec4(aPosition, 1.0);\n  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n\n  vec3 vertexNormal = normalize(vec3( uNormalMatrix * aNormal ));\n  vVertexNormal = vertexNormal;\n  vVertTexCoord = aTexCoord;\n\n  vec4 mvPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n  vec3 eyeDirection = normalize(-mvPosition.xyz);\n\n  float shininess = 32.0;\n  float specularFactor = 2.0;\n  float diffuseFactor = 0.3;\n\n  vec3 ambientLightFactor = vec3(0.0);\n\n  for (int i = 0; i < 8; i++) {\n    if (uAmbientLightCount == i) break;\n    ambientLightFactor += uAmbientColor[i];\n  }\n\n\n  vec3 directionalLightFactor = vec3(0.0);\n\n  for (int j = 0; j < 8; j++) {\n    if (uDirectionalLightCount == j) break;\n    vec3 dir = uLightingDirection[j];\n    float directionalLightWeighting = max(dot(vertexNormal, -dir), 0.0);\n    directionalLightFactor += uDirectionalColor[j] * directionalLightWeighting;\n  }\n\n\n  vec3 pointLightFactor = vec3(0.0);\n\n  for (int k = 0; k < 8; k++) {\n    if (uPointLightCount == k) break;\n    vec3 loc = (uViewMatrix * vec4(uPointLightLocation[k], 1.0)).xyz;\n    vec3 lightDirection = normalize(loc - mvPosition.xyz);\n\n    float directionalLightWeighting = max(dot(vertexNormal, lightDirection), 0.0);\n\n    float specularLightWeighting = 0.0;\n    if (uSpecular ){\n      vec3 reflectionDirection = reflect(-lightDirection, vertexNormal);\n      specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), shininess);\n    }\n\n    pointLightFactor += uPointLightColor[k] * (specularFactor * specularLightWeighting\n      + directionalLightWeighting * diffuseFactor);\n  }\n\n  vLightWeighting =  ambientLightFactor + directionalLightFactor + pointLightFactor;\n}\n",
+      lightTextureFrag: "precision mediump float;\n\nuniform vec4 uMaterialColor;\nuniform sampler2D uSampler;\nuniform bool isTexture;\nuniform bool uUseLighting;\n\nvarying vec3 vLightWeighting;\nvarying highp vec2 vVertTexCoord;\n\nvoid main(void) {\n  gl_FragColor = isTexture ? texture2D(uSampler, vVertTexCoord) : uMaterialColor;\n  if (uUseLighting)\n    gl_FragColor.rgb *= vLightWeighting;\n}",
+      phongVert: "precision mediump float;\n\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform vec3 uAmbientColor[8];\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\nuniform int uAmbientLightCount;\n\nvarying vec3 vNormal;\nvarying vec2 vTexCoord;\nvarying vec3 vViewPosition;\nvarying vec3 vAmbientColor;\n\nvoid main(void){\n\n  vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n\n  // Pass varyings to fragment shader\n  vViewPosition = viewModelPosition.xyz;\n  gl_Position = uProjectionMatrix * viewModelPosition;  \n\n  vNormal = normalize(uNormalMatrix * normalize(aNormal));\n  vTexCoord = aTexCoord;\n\n  vAmbientColor = vec3(0.0);\n  for (int i = 0; i < 8; i++) {\n    if (uAmbientLightCount == i) break;\n    vAmbientColor += uAmbientColor[i];\n  }\n}\n",
+      phongFrag: "precision mediump float;\n\n//uniform mat4 uModelViewMatrix;\nuniform mat4 uViewMatrix;\n\nuniform vec4 uMaterialColor;\nuniform sampler2D uSampler;\nuniform bool isTexture;\nuniform bool uUseLighting;\n\nuniform vec3 uLightingDirection[8];\nuniform vec3 uDirectionalColor[8];\nuniform vec3 uPointLightLocation[8];\nuniform vec3 uPointLightColor[8];\nuniform bool uSpecular;\n\nuniform int uDirectionalLightCount;\nuniform int uPointLightCount;\n\nvarying vec3 vNormal;\nvarying vec2 vTexCoord;\nvarying vec3 vViewPosition;\nvarying vec3 vAmbientColor;\n\nvec3 V;\nvec3 N;\n\nconst float shininess = 32.0;\nconst float specularFactor = 2.0;\nconst float diffuseFactor = 0.73;\n\nstruct LightResult {\n\tfloat specular;\n\tfloat diffuse;\n};\n\nfloat phongSpecular(\n  vec3 lightDirection,\n  vec3 viewDirection,\n  vec3 surfaceNormal,\n  float shininess) {\n\n  vec3 R = normalize(reflect(-lightDirection, surfaceNormal));  \n  return pow(max(0.0, dot(R, viewDirection)), shininess);\n}\n\nfloat lambertDiffuse(\n  vec3 lightDirection,\n  vec3 surfaceNormal) {\n  return max(0.0, dot(-lightDirection, surfaceNormal));\n}\n\nLightResult light(vec3 lightVector) {\n\n  vec3 L = normalize(lightVector);\n\n  //compute our diffuse & specular terms\n  LightResult lr;\n  if (uSpecular)\n    lr.specular = phongSpecular(L, V, N, shininess);\n  lr.diffuse = lambertDiffuse(L, N);\n  return lr;\n}\n\nvoid main(void) {\n\n  V = normalize(vViewPosition);\n  N = vNormal;\n\n  vec3 diffuse = vec3(0.0);\n  float specular = 0.0;\n\n  for (int j = 0; j < 8; j++) {\n    if (uDirectionalLightCount == j) break;\n\n    LightResult result = light(uLightingDirection[j]);\n    diffuse += result.diffuse * uDirectionalColor[j];\n    specular += result.specular;\n  }\n\n  for (int k = 0; k < 8; k++) {\n    if (uPointLightCount == k) break;\n\n    vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation[k], 1.0)).xyz;\n    vec3 lightVector = vViewPosition - lightPosition;\n\t\n    //calculate attenuation\n    float lightDistance = length(lightVector);\n    float falloff = 500.0 / (lightDistance + 500.0);\n\n    LightResult result = light(lightVector);\n    diffuse += result.diffuse * falloff * uPointLightColor[k];\n    specular += result.specular * falloff;\n  }\n\n  gl_FragColor = isTexture ? texture2D(uSampler, vTexCoord) : uMaterialColor;\n  gl_FragColor.rgb = gl_FragColor.rgb * (diffuse * diffuseFactor + vAmbientColor) + specular * specularFactor;\n}",
+      lineVert: "/*\n  Part of the Processing project - http://processing.org\n  Copyright (c) 2012-15 The Processing Foundation\n  Copyright (c) 2004-12 Ben Fry and Casey Reas\n  Copyright (c) 2001-04 Massachusetts Institute of Technology\n  This library is free software; you can redistribute it and/or\n  modify it under the terms of the GNU Lesser General Public\n  License as published by the Free Software Foundation, version 2.1.\n  This library is distributed in the hope that it will be useful,\n  but WITHOUT ANY WARRANTY; without even the implied warranty of\n  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU\n  Lesser General Public License for more details.\n  You should have received a copy of the GNU Lesser General\n  Public License along with this library; if not, write to the\n  Free Software Foundation, Inc., 59 Temple Place, Suite 330,\n  Boston, MA  02111-1307  USA\n*/\n\n#define PROCESSING_LINE_SHADER\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uStrokeWeight;\n\nuniform vec4 uViewport;\nvec3 scale = vec3(1.0);\n\nattribute vec4 aPosition;\nattribute vec4 aDirection;\n  \nvoid main() {\n  vec4 posp = uModelViewMatrix * aPosition;\n  vec4 posq = uModelViewMatrix * (aPosition + vec4(aDirection.xyz, 0));\n\n  // Moving vertices slightly toward the camera\n  // to avoid depth-fighting with the fill triangles.\n  // Discussed here:\n  // http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=252848  \n  posp.xyz = posp.xyz * scale;\n  posq.xyz = posq.xyz * scale;\n\n  vec4 p = uProjectionMatrix * posp;\n  vec4 q = uProjectionMatrix * posq;\n\n  // formula to convert from clip space (range -1..1) to screen space (range 0..[width or height])\n  // screen_p = (p.xy/p.w + <1,1>) * 0.5 * uViewport.zw\n\n  // prevent division by W by transforming the tangent formula (div by 0 causes\n  // the line to disappear, see https://github.com/processing/processing/issues/5183)\n  // t = screen_q - screen_p\n  //\n  // tangent is normalized and we don't care which aDirection it points to (+-)\n  // t = +- normalize( screen_q - screen_p )\n  // t = +- normalize( (q.xy/q.w+<1,1>)*0.5*uViewport.zw - (p.xy/p.w+<1,1>)*0.5*uViewport.zw )\n  //\n  // extract common factor, <1,1> - <1,1> cancels out\n  // t = +- normalize( (q.xy/q.w - p.xy/p.w) * 0.5 * uViewport.zw )\n  //\n  // convert to common divisor\n  // t = +- normalize( ((q.xy*p.w - p.xy*q.w) / (p.w*q.w)) * 0.5 * uViewport.zw )\n  //\n  // remove the common scalar divisor/factor, not needed due to normalize and +-\n  // (keep uViewport - can't remove because it has different components for x and y\n  //  and corrects for aspect ratio, see https://github.com/processing/processing/issues/5181)\n  // t = +- normalize( (q.xy*p.w - p.xy*q.w) * uViewport.zw )\n\n  vec2 tangent = normalize((q.xy*p.w - p.xy*q.w) * uViewport.zw);\n\n  // flip tangent to normal (it's already normalized)\n  vec2 normal = vec2(-tangent.y, tangent.x);\n\n  float thickness = aDirection.w * uStrokeWeight;\n  vec2 offset = normal * thickness / 2.0;\n\n  // Perspective ---\n  // convert from world to clip by multiplying with projection scaling factor\n  // to get the right thickness (see https://github.com/processing/processing/issues/5182)\n  // invert Y, projections in Processing invert Y\n  vec2 perspScale = (uProjectionMatrix * vec4(1, -1, 0, 0)).xy;\n\n  // No Perspective ---\n  // multiply by W (to cancel out division by W later in the pipeline) and\n  // convert from screen to clip (derived from clip to screen above)\n  vec2 noPerspScale = p.w / (0.5 * uViewport.zw);\n\n  //gl_Position.xy = p.xy + offset.xy * mix(noPerspScale, perspScale, float(perspective > 0));\n  gl_Position.xy = p.xy + offset.xy * perspScale;\n  gl_Position.zw = p.zw;\n}\n",
+      lineFrag: "precision mediump float;\nprecision mediump int;\n\nuniform vec4 uMaterialColor;\n\nvoid main() {\n  gl_FragColor = uMaterialColor;\n}"
+    };
+
+    /**
+     * 3D graphics class
+     * @class p5.RendererGL
+     * @constructor
+     * @extends p5.Renderer
+     * @todo extend class to include public method for offscreen
+     * rendering (FBO).
+     *
+     */
+    p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
+      p5.Renderer.call(this, elt, pInst, isMainCanvas);
+      this.attributes = {};
+      attr = attr || {};
+      this.attributes.alpha = attr.alpha === undefined ? true : attr.alpha;
+      this.attributes.depth = attr.depth === undefined ? true : attr.depth;
+      this.attributes.stencil = attr.stencil === undefined ? true : attr.stencil;
+      this.attributes.antialias =
+        attr.antialias === undefined ? false : attr.antialias;
+      this.attributes.premultipliedAlpha =
+        attr.premultipliedAlpha === undefined ? false : attr.premultipliedAlpha;
+      this.attributes.preserveDrawingBuffer =
+        attr.preserveDrawingBuffer === undefined
+          ? true
+          : attr.preserveDrawingBuffer;
+      this.attributes.perPixelLighting =
+        attr.perPixelLighting === undefined ? false : attr.perPixelLighting;
+      this._initContext();
+      this.isP3D = true; //lets us know we're in 3d mode
+      this.GL = this.drawingContext;
+
+      // lights
+
+      this.ambientLightColors = [];
+      this.directionalLightDirections = [];
+      this.directionalLightColors = [];
+
+      this.pointLightPositions = [];
+      this.pointLightColors = [];
+
+      /**
+       * model view, projection, & normal
+       * matrices
+       */
+      this.uMVMatrix = new p5.Matrix();
+      this.uPMatrix = new p5.Matrix();
+      this.uNMatrix = new p5.Matrix('mat3');
+
+      // Camera
+      this._curCamera = null;
+      // default camera settings, then use those to populate camera fields.
+      this._computeCameraDefaultSettings();
+      this.cameraFOV = this.defaultCameraFOV;
+      this.cameraAspect = this.defaultAspect;
+      this.cameraX = this.defaultCameraX;
+      this.cameraY = this.defaultCameraY;
+      this.cameraZ = this.defaultCameraZ;
+      this.cameraNear = this.defaultCameraNear;
+      this.cameraFar = this.defaultCameraFar;
+      this.cameraMatrix = new p5.Matrix(pInst);
+      this.camera(); // set default camera matrices
+
+      //Geometry & Material hashes
+      this.gHash = {};
+
+      this._defaultLightShader = undefined;
+      this._defaultImmediateModeShader = undefined;
+      this._defaultNormalShader = undefined;
+      this._defaultColorShader = undefined;
+
+      this.curFillShader = undefined;
+      this.curStrokeShader = undefined;
+
+      this._useColorShader();
+      this.setStrokeShader(this._getLineShader());
+
+      //Imediate Mode
+      //default drawing is done in Retained Mode
+      this.isImmediateDrawing = false;
+      this.immediateMode = {};
+
+      // note: must call fill() and stroke () AFTER
+      // default shader has been set.
+      this.fill(255, 255, 255, 255);
+      //this.stroke(0, 0, 0, 255);
+      this.pointSize = 5.0; //default point size
+      this.strokeWeight(2);
+      this.stroke(0, 0, 0);
+      // array of textures created in this gl context via this.getTexture(src)
+      this.textures = [];
+      this.name = 'p5.RendererGL'; // for friendly debugger system
+
+      return this;
+    };
+
+    p5.RendererGL.prototype = Object.create(p5.Renderer.prototype);
+
+    //////////////////////////////////////////////
+    // Setting
+    //////////////////////////////////////////////
+
+    p5.RendererGL.prototype._initContext = function() {
+      try {
+        this.drawingContext =
+          this.canvas.getContext('webgl', this.attributes) ||
+          this.canvas.getContext('experimental-webgl', this.attributes);
+        if (this.drawingContext === null) {
+          throw new Error('Error creating webgl context');
+        } else {
+          console.log('p5.RendererGL: enabled webgl context');
+          var gl = this.drawingContext;
+          gl.enable(gl.DEPTH_TEST);
+          gl.depthFunc(gl.LEQUAL);
+          gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+          this._viewport = this.drawingContext.getParameter(
+            this.drawingContext.VIEWPORT
+          );
+        }
+      } catch (er) {
+        throw new Error(er);
+      }
+    };
+
+    //This is helper function to reset the context anytime the attributes
+    //are changed with setAttributes()
+
+    p5.RendererGL.prototype._resetContext = function(attr, options, callback) {
+      var w = this.width;
+      var h = this.height;
+      var defaultId = this.canvas.id;
+      var c = this.canvas;
+      if (c) {
+        c.parentNode.removeChild(c);
+      }
+      c = document.createElement('canvas');
+      c.id = defaultId;
+      if (this._pInst._userNode) {
+        this._pInst._userNode.appendChild(c);
+      } else {
+        document.body.appendChild(c);
+      }
+      this._pInst.canvas = c;
+      var renderer = new p5.RendererGL(this._pInst.canvas, this._pInst, true, attr);
+      this._pInst._setProperty('_renderer', renderer);
+      renderer.resize(w, h);
+      renderer._applyDefaults();
+      this._pInst._elements.push(renderer);
+      if (typeof callback === 'function') {
+        //setTimeout with 0 forces the task to the back of the queue, this ensures that
+        //we finish switching out the renderer
+        setTimeout(function() {
+          callback.apply(window._renderer, options);
+        }, 0);
+      }
+    };
+    /**
+     * @module Rendering
+     * @submodule Rendering
+     * @for p5
+     */
+    /**
+     * Set attributes for the WebGL Drawing context.
+     * This is a way of adjusting ways that the WebGL
+     * renderer works to fine-tune the display and performance.
+     * This should be put in setup().
+     * The available attributes are:
+     * 

+     * alpha - indicates if the canvas contains an alpha buffer
+     * default is true
+     * 


+     * depth - indicates whether the drawing buffer has a depth buffer
+     * of at least 16 bits - default is true
+     * 


+     * stencil - indicates whether the drawing buffer has a stencil buffer
+     * of at least 8 bits
+     * 


+     * antialias - indicates whether or not to perform anti-aliasing
+     * default is false
+     * 


+     * premultipliedAlpha - indicates that the page compositor will assume
+     * the drawing buffer contains colors with pre-multiplied alpha
+     * default is false
+     * 


+     * preserveDrawingBuffer - if true the buffers will not be cleared and
+     * and will preserve their values until cleared or overwritten by author
+     * (note that p5 clears automatically on draw loop)
+     * default is true
+     * 


+     * perPixelLighting - if true, per-pixel lighting will be used in the
+     * lighting shader.
+     * default is false
+     * 


+     * @method setAttributes
+     * @for p5
+     * @param  {String}  key Name of attribute
+     * @param  {Boolean}        value New value of named attribute
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(255);
+     *   push();
+     *   rotateZ(frameCount * 0.02);
+     *   rotateX(frameCount * 0.02);
+     *   rotateY(frameCount * 0.02);
+     *   fill(0, 0, 0);
+     *   box(50);
+     *   pop();
+     * }
+     * 
+     * 

+     * 

+     * Now with the antialias attribute set to true.
+     * 

+     * 

+     * 
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   setAttributes('antialias', true);
+     * }
+     *
+     * function draw() {
+     *   background(255);
+     *   push();
+     *   rotateZ(frameCount * 0.02);
+     *   rotateX(frameCount * 0.02);
+     *   rotateY(frameCount * 0.02);
+     *   fill(0, 0, 0);
+     *   box(50);
+     *   pop();
+     * }
+     * 
+     * 

+     *
+     * 

+     * 
+     * // press the mouse button to enable perPixelLighting
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     *   noStroke();
+     *   fill(255);
+     * }
+     *
+     * var lights = [
+     *   { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+     *   { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+     *   { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+     *   { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+     *   { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+     *   { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+     * ];
+     *
+     * function draw() {
+     *   var t = millis() / 1000 + 1000;
+     *   background(0);
+     *   directionalLight(color('#222'), 1, 1, 1);
+     *
+     *   for (var i = 0; i < lights.length; i++) {
+     *     var light = lights[i];
+     *     pointLight(
+     *       color(light.c),
+     *       p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+     *     );
+     *   }
+     *
+     *   specularMaterial(255);
+     *   sphere(width * 0.1);
+     *
+     *   rotateX(t * 0.77);
+     *   rotateY(t * 0.83);
+     *   rotateZ(t * 0.91);
+     *   torus(width * 0.3, width * 0.07, 30, 10);
+     * }
+     *
+     * function mousePressed() {
+     *   setAttributes('perPixelLighting', true);
+     *   noStroke();
+     *   fill(255);
+     * }
+     * function mouseReleased() {
+     *   setAttributes('perPixelLighting', false);
+     *   noStroke();
+     *   fill(255);
+     * }
+     * 
+     * 

+     *
+     * @alt a rotating cube with smoother edges
+     */
+    /**
+     * @method setAttributes
+     * @for p5
+     * @param  {Object}  obj object with key-value pairs
+     */
+
+    p5.prototype.setAttributes = function(key, value) {
+      //@todo_FES
+      var attr;
+      if (typeof value !== 'undefined') {
+        attr = {};
+        attr[key] = value;
+      } else if (key instanceof Object) {
+        attr = key;
+      }
+      this._renderer._resetContext(attr);
+    };
+
+    /**
+     * @class p5.RendererGL
+     */
+
+    p5.RendererGL.prototype._computeCameraDefaultSettings = function() {
+      this.defaultCameraFOV = 60 / 180 * Math.PI;
+      this.defaultCameraAspect = this.width / this.height;
+      this.defaultCameraX = 0;
+      this.defaultCameraY = 0;
+      this.defaultCameraZ =
+        this.height / 2.0 / Math.tan(this.defaultCameraFOV / 2.0);
+      this.defaultCameraNear = this.defaultCameraZ * 0.1;
+      this.defaultCameraFar = this.defaultCameraZ * 10;
+    };
+
+    //detect if user didn't set the camera
+    //then call this function below
+    p5.RendererGL.prototype._setDefaultCamera = function() {
+      if (this._curCamera === null) {
+        this._computeCameraDefaultSettings();
+        this.cameraFOV = this.defaultCameraFOV;
+        this.cameraAspect = this.defaultAspect;
+        this.cameraX = this.defaultCameraX;
+        this.cameraY = this.defaultCameraY;
+        this.cameraZ = this.defaultCameraZ;
+        this.cameraNear = this.defaultCameraNear;
+        this.cameraFar = this.defaultCameraFar;
+
+        this.perspective();
+        this.camera();
+        this._curCamera = 'default';
+      }
+    };
+
+    p5.RendererGL.prototype._update = function() {
+      // reset model view and apply initial camera transform
+      // (containing only look at info; no projection).
+      this.uMVMatrix.set(
+        this.cameraMatrix.mat4[0],
+        this.cameraMatrix.mat4[1],
+        this.cameraMatrix.mat4[2],
+        this.cameraMatrix.mat4[3],
+        this.cameraMatrix.mat4[4],
+        this.cameraMatrix.mat4[5],
+        this.cameraMatrix.mat4[6],
+        this.cameraMatrix.mat4[7],
+        this.cameraMatrix.mat4[8],
+        this.cameraMatrix.mat4[9],
+        this.cameraMatrix.mat4[10],
+        this.cameraMatrix.mat4[11],
+        this.cameraMatrix.mat4[12],
+        this.cameraMatrix.mat4[13],
+        this.cameraMatrix.mat4[14],
+        this.cameraMatrix.mat4[15]
+      );
+
+      // reset light data for new frame.
+
+      this.ambientLightColors.length = 0;
+      this.directionalLightDirections.length = 0;
+      this.directionalLightColors.length = 0;
+
+      this.pointLightPositions.length = 0;
+      this.pointLightColors.length = 0;
+    };
+
+    /**
+     * [background description]
+     */
+    p5.RendererGL.prototype.background = function() {
+      var _col = this._pInst.color.apply(this._pInst, arguments);
+      var _r = _col.levels[0] / 255;
+      var _g = _col.levels[1] / 255;
+      var _b = _col.levels[2] / 255;
+      var _a = _col.levels[3] / 255;
+      this.GL.clearColor(_r, _g, _b, _a);
+      this.GL.depthMask(true);
+      this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT);
+    };
+
+    //@TODO implement this
+    // p5.RendererGL.prototype.clear = function() {
+    //@TODO
+    // };
+
+    //////////////////////////////////////////////
+    // COLOR
+    //////////////////////////////////////////////
+    /**
+     * Basic fill material for geometry with a given color
+     * @method  fill
+     * @class p5.RendererGL
+     * @param  {Number|Number[]|String|p5.Color} v1  gray value,
+     * red or hue value (depending on the current color mode),
+     * or color Array, or CSS color string
+     * @param  {Number}            [v2] green or saturation value
+     * @param  {Number}            [v3] blue or brightness value
+     * @param  {Number}            [a]  opacity
+     * @chainable
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(200, 200, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(0);
+     *   noStroke();
+     *   fill(100, 100, 240);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   box(75, 75, 75);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black canvas with purple cube spinning
+     *
+     */
+    p5.RendererGL.prototype.fill = function(v1, v2, v3, a) {
+      //see material.js for more info on color blending in webgl
+      var color = p5.prototype.color.apply(this._pInst, arguments);
+      this.curFillColor = color._array;
+
+      if (this.isImmediateDrawing) {
+        this.setFillShader(this._getImmediateModeShader());
+      } else {
+        this.setFillShader(this._getColorShader());
+      }
+      this.drawMode = constants.FILL;
+      this.curFillShader.setUniform('uMaterialColor', this.curFillColor);
+    };
+
+    /**
+     * Basic stroke material for geometry with a given color
+     * @method  stroke
+     * @param  {Number|Number[]|String|p5.Color} v1  gray value,
+     * red or hue value (depending on the current color mode),
+     * or color Array, or CSS color string
+     * @param  {Number}            [v2] green or saturation value
+     * @param  {Number}            [v3] blue or brightness value
+     * @param  {Number}            [a]  opacity
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(200, 200, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(0);
+     *   stroke(240, 150, 150);
+     *   fill(100, 100, 240);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   box(75, 75, 75);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black canvas with purple cube with pink outline spinning
+     *
+     */
+    p5.RendererGL.prototype.stroke = function(r, g, b, a) {
+      //@todo allow transparency in stroking currently doesn't have
+      //any impact and causes problems with specularMaterial
+      arguments[3] = 255;
+      var color = p5.prototype.color.apply(this._pInst, arguments);
+      this.curStrokeColor = color._array;
+      this.curStrokeShader.setUniform('uMaterialColor', this.curStrokeColor);
+    };
+
+    /**
+     * Change weight of stroke
+     * @method  strokeWeight
+     * @param  {Number} stroke weight to be used for drawing
+     * @example
+     * 

+     * 
+     * function setup() {
+     *   createCanvas(200, 400, WEBGL);
+     *   setAttributes('antialias', true);
+     * }
+     *
+     * function draw() {
+     *   background(0);
+     *   noStroke();
+     *   translate(0, -100, 0);
+     *   stroke(240, 150, 150);
+     *   fill(100, 100, 240);
+     *   push();
+     *   strokeWeight(8);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   sphere(75);
+     *   pop();
+     *   push();
+     *   translate(0, 200, 0);
+     *   strokeWeight(1);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   sphere(75);
+     *   pop();
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * black canvas with two purple rotating spheres with pink
+     * outlines the sphere on top has much heavier outlines,
+     *
+     */
+    p5.RendererGL.prototype.strokeWeight = function(w) {
+      if (this.curStrokeWeight !== w) {
+        this.pointSize = w;
+        this.curStrokeWeight = w;
+        this.curStrokeShader.setUniform('uStrokeWeight', w);
+      }
+    };
+
+    /**
+     * Returns an array of [R,G,B,A] values for any pixel or grabs a section of
+     * an image. If no parameters are specified, the entire image is returned.
+     * Use the x and y parameters to get the value of one pixel. Get a section of
+     * the display window by specifying additional w and h parameters. When
+     * getting an image, the x and y parameters define the coordinates for the
+     * upper-left corner of the image, regardless of the current imageMode().
+     * 


+     * If the pixel requested is outside of the image window, [0,0,0,255] is
+     * returned.
+     * 


+     * Getting the color of a single pixel with get(x, y) is easy, but not as fast
+     * as grabbing the data directly from pixels[]. The equivalent statement to
+     * get(x, y) is using pixels[] with pixel density d
+     *
+     *
+     * @method get
+     * @param  {Number}               [x] x-coordinate of the pixel
+     * @param  {Number}               [y] y-coordinate of the pixel
+     * @param  {Number}               [w] width
+     * @param  {Number}               [h] height
+     * @return {Number[]|Color|p5.Image}  color of pixel at x,y in array format
+     *                                    [R, G, B, A] or p5.Image
+     */
+    p5.RendererGL.prototype.get = function(x, y, w, h) {
+      return p5.Renderer2D.prototype.get.apply(this, [x, y, w, h]);
+    };
+
+    /**
+     * Loads the pixels data for this canvas into the pixels[] attribute.
+     * Note that updatePixels() and set() do not work.
+     * Any pixel manipulation must be done directly to the pixels[] array.
+     *
+     * @method loadPixels
+     *
+     */
+
+    p5.RendererGL.prototype.loadPixels = function() {
+      //@todo_FES
+      if (this.attributes.preserveDrawingBuffer !== true) {
+        console.log(
+          'loadPixels only works in WebGL when preserveDrawingBuffer ' + 'is true.'
+        );
+        return;
+      }
+      var pd = this._pInst._pixelDensity;
+      var x = 0;
+      var y = 0;
+      var w = this.width;
+      var h = this.height;
+      w *= pd;
+      h *= pd;
+      //if there isn't a renderer-level temporary pixels buffer
+      //make a new one
+      if (typeof this.pixels === 'undefined') {
+        this.pixels = new Uint8Array(
+          this.GL.drawingBufferWidth * this.GL.drawingBufferHeight * 4
+        );
+      }
+      this.GL.readPixels(
+        x,
+        y,
+        w,
+        h,
+        this.GL.RGBA,
+        this.GL.UNSIGNED_BYTE,
+        this.pixels
+      );
+      this._pInst._setProperty('pixels', this.pixels);
+    };
+
+    //////////////////////////////////////////////
+    // HASH | for geometry
+    //////////////////////////////////////////////
+
+    p5.RendererGL.prototype.geometryInHash = function(gId) {
+      return this.gHash[gId] !== undefined;
+    };
+
+    /**
+     * [resize description]
+     * @private
+     * @param  {Number} w [description]
+     * @param  {Number} h [description]
+     */
+    p5.RendererGL.prototype.resize = function(w, h) {
+      p5.Renderer.prototype.resize.call(this, w, h);
+      this.GL.viewport(
+        0,
+        0,
+        this.GL.drawingBufferWidth,
+        this.GL.drawingBufferHeight
+      );
+      this._viewport = this.GL.getParameter(this.GL.VIEWPORT);
+      // If we're using the default camera, update the aspect ratio
+      if (this._curCamera === null || this._curCamera === 'default') {
+        this._curCamera = null;
+        // camera defaults are dependent on the width & height of the screen,
+        // so we'll want to update them if the size of the screen changes.
+        this._setDefaultCamera();
+      }
+      //resize pixels buffer
+      if (typeof this.pixels !== 'undefined') {
+        this.pixels = new Uint8Array(
+          this.GL.drawingBufferWidth * this.GL.drawingBufferHeight * 4
+        );
+      }
+    };
+
+    /**
+     * clears color and depth buffers
+     * with r,g,b,a
+     * @private
+     * @param {Number} r normalized red val.
+     * @param {Number} g normalized green val.
+     * @param {Number} b normalized blue val.
+     * @param {Number} a normalized alpha val.
+     */
+    p5.RendererGL.prototype.clear = function() {
+      this.GL.clearColor(arguments[0], arguments[1], arguments[2], arguments[3]);
+      this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT);
+    };
+
+    /**
+     * [translate description]
+     * @private
+     * @param  {Number} x [description]
+     * @param  {Number} y [description]
+     * @param  {Number} z [description]
+     * @chainable
+     * @todo implement handle for components or vector as args
+     */
+    p5.RendererGL.prototype.translate = function(x, y, z) {
+      if (x instanceof p5.Vector) {
+        z = x.z;
+        y = x.y;
+        x = x.x;
+      }
+      this.uMVMatrix.translate([x, y, z]);
+      return this;
+    };
+
+    /**
+     * Scales the Model View Matrix by a vector
+     * @private
+     * @param  {Number | p5.Vector | Array} x [description]
+     * @param  {Number} [y] y-axis scalar
+     * @param  {Number} [z] z-axis scalar
+     * @chainable
+     */
+    p5.RendererGL.prototype.scale = function(x, y, z) {
+      this.uMVMatrix.scale(x, y, z);
+      return this;
+    };
+
+    p5.RendererGL.prototype.rotate = function(rad, axis) {
+      if (typeof axis === 'undefined') {
+        return this.rotateZ(rad);
+      }
+      p5.Matrix.prototype.rotate.apply(this.uMVMatrix, arguments);
+      return this;
+    };
+
+    p5.RendererGL.prototype.rotateX = function(rad) {
+      this.rotate(rad, 1, 0, 0);
+      return this;
+    };
+
+    p5.RendererGL.prototype.rotateY = function(rad) {
+      this.rotate(rad, 0, 1, 0);
+      return this;
+    };
+
+    p5.RendererGL.prototype.rotateZ = function(rad) {
+      this.rotate(rad, 0, 0, 1);
+      return this;
+    };
+
+    /**
+     * pushes a copy of the model view matrix onto the
+     * MV Matrix stack.
+     */
+    p5.RendererGL.prototype.push = function() {
+      uMVMatrixStack.push(this.uMVMatrix.copy());
+      cameraMatrixStack.push(this.cameraMatrix.copy());
+    };
+
+    /**
+     * [pop description]
+     */
+    p5.RendererGL.prototype.pop = function() {
+      if (uMVMatrixStack.length === 0) {
+        throw new Error('Invalid popMatrix!');
+      }
+      this.uMVMatrix = uMVMatrixStack.pop();
+      if (cameraMatrixStack.length === 0) {
+        throw new Error('Invalid popMatrix!');
+      }
+      this.cameraMatrix = cameraMatrixStack.pop();
+    };
+
+    p5.RendererGL.prototype.resetMatrix = function() {
+      this.uMVMatrix = p5.Matrix.identity(this._pInst);
+      return this;
+    };
+
+    // Text/Typography
+    // @TODO:
+    p5.RendererGL.prototype._applyTextProperties = function() {
+      //@TODO finish implementation
+      console.error('text commands not yet implemented in webgl');
+    };
+
+    //////////////////////////////////////////////
+    // SHADER
+    //////////////////////////////////////////////
+
+    /*
+     * Initializes and uses the specified shader, then returns
+     * that shader. Note: initialization and resetting the program
+     * is only used if needed (say, if a new value is provided)
+     * so it is safe to call this method with the same shader multiple
+     * times without a signficant performance hit).
+     *
+     * @method setFillShader
+     * @param {p5.Shader} [s] a p5.Shader object
+     * @return {p5.Shader} the current, updated fill shader
+     */
+    p5.RendererGL.prototype.setFillShader = function(s) {
+      if (this.curFillShader !== s) {
+        // only do setup etc. if shader is actually new.
+        this.curFillShader = s;
+
+        // safe to do this multiple times;
+        // init() will bail early if has already been run.
+        this.curFillShader.init();
+        //this.curFillShader.useProgram();
+      }
+      // always return this.curFillShader, even if no change was made.
+      return this.curFillShader;
+    };
+
+    /*
+     * @method setStrokeShader
+     * @param {p5.Shader} [s] a p5.Shader object
+     * @return {p5.Shader} the current, updated stroke shader
+     */
+    p5.RendererGL.prototype.setStrokeShader = function(s) {
+      if (this.curStrokeShader !== s) {
+        // only do setup etc. if shader is actually new.
+        this.curStrokeShader = s;
+        // safe to do this multiple times;
+        // init() will bail early if has already been run.
+        this.curStrokeShader.init();
+        //this.curStrokeShader.useProgram();
+      }
+      // always return this.curLineShader, even if no change was made.
+      return this.curStrokeShader;
+    };
+
+    /*
+     * shaders are created and cached on a per-renderer basis,
+     * on the grounds that each renderer will have its own gl context
+     * and the shader must be valid in that context.
+     *
+     *
+     */
+
+    p5.RendererGL.prototype._useLightShader = function() {
+      if (!this.curFillShader || !this.curFillShader.isLightShader()) {
+        this.setFillShader(this._getLightShader());
+      }
+      return this.curFillShader;
+    };
+
+    p5.RendererGL.prototype._useColorShader = function() {
+      // looking at the code within the glsl files, I'm not really
+      // sure why these are two different shaders. but, they are,
+      // and if we're drawing in retain mode but the shader is the
+      // immediate mode one, we need to switch.
+
+      // TODO: what if curFillShader is _any_ other shader?
+      if (
+        !this.curFillShader ||
+        this.curFillShader === this._defaultImmediateModeShader
+      ) {
+        // there are different immediate mode and retain mode color shaders.
+        // if we're using the immediate mode one, we need to switch to
+        // one that works for retain mode.
+        this.setFillShader(this._getColorShader());
+      }
+      return this.curFillShader;
+    };
+
+    p5.RendererGL.prototype._useImmediateModeShader = function() {
+      // TODO: what if curFillShader is _any_ other shader?
+      if (!this.curFillShader || this.curFillShader === this._defaultColorShader) {
+        // this is the fill/stroke shader for retain mode.
+        // must switch to immediate mode shader before drawing!
+        this.setFillShader(this._getImmediateModeShader());
+        // note that if we're using the texture shader...
+        // this shouldn't change. :)
+      }
+      return this.curFillShader;
+    };
+
+    p5.RendererGL.prototype._getLightShader = function() {
+      if (!this._defaultLightShader) {
+        if (this.attributes.perPixelLighting) {
+          this._defaultLightShader = new p5.Shader(
+            this,
+            defaultShaders.phongVert,
+            defaultShaders.phongFrag
+          );
+        } else {
+          this._defaultLightShader = new p5.Shader(
+            this,
+            defaultShaders.lightVert,
+            defaultShaders.lightTextureFrag
+          );
+        }
+      }
+      //this.drawMode = constants.FILL;
+      return this._defaultLightShader;
+    };
+
+    p5.RendererGL.prototype._getImmediateModeShader = function() {
+      if (!this._defaultImmediateModeShader) {
+        this._defaultImmediateModeShader = new p5.Shader(
+          this,
+          defaultShaders.immediateVert,
+          defaultShaders.vertexColorFrag
+        );
+      }
+      //this.drawMode = constants.FILL;
+      return this._defaultImmediateModeShader;
+    };
+
+    p5.RendererGL.prototype._getNormalShader = function() {
+      if (!this._defaultNormalShader) {
+        this._defaultNormalShader = new p5.Shader(
+          this,
+          defaultShaders.normalVert,
+          defaultShaders.normalFrag
+        );
+      }
+      //this.drawMode = constants.FILL;
+      return this._defaultNormalShader;
+    };
+
+    p5.RendererGL.prototype._getColorShader = function() {
+      if (!this._defaultColorShader) {
+        this._defaultColorShader = new p5.Shader(
+          this,
+          defaultShaders.normalVert,
+          defaultShaders.basicFrag
+        );
+      }
+      //this.drawMode = constants.FILL;
+      return this._defaultColorShader;
+    };
+
+    p5.RendererGL.prototype._getLineShader = function() {
+      if (!this._defaultLineShader) {
+        this._defaultLineShader = new p5.Shader(
+          this,
+          defaultShaders.lineVert,
+          defaultShaders.lineFrag
+        );
+      }
+      //this.drawMode = constants.STROKE;
+      return this._defaultLineShader;
+    };
+
+    p5.RendererGL.prototype._getEmptyTexture = function() {
+      if (!this._emptyTexture) {
+        // a plain white texture RGBA, full alpha, single pixel.
+        var im = new p5.Image(1, 1);
+        im.set(0, 0, 255);
+        this._emptyTexture = new p5.Texture(this, im);
+      }
+      return this._emptyTexture;
+    };
+
+    p5.RendererGL.prototype.getTexture = function(img) {
+      var checkSource = function(element) {
+        return element.src === img;
+      };
+      //this.drawMode = constants.TEXTURE;
+      var tex = this.textures.find(checkSource);
+      if (!tex) {
+        tex = new p5.Texture(this, img);
+        this.textures.push(tex);
+      }
+
+      return tex;
+    };
+
+    //Binds a buffer to the drawing context
+    //when passed more than two arguments it also updates or initializes
+    //the data associated with the buffer
+    p5.RendererGL.prototype._bindBuffer = function(
+      buffer,
+      target,
+      values,
+      type,
+      usage
+    ) {
+      this.GL.bindBuffer(target, buffer);
+      if (values !== undefined) {
+        var data = new type(values);
+        this.GL.bufferData(target, data, usage);
+      }
+    };
+
+    ///////////////////////////////
+    //// UTILITY FUNCTIONS
+    //////////////////////////////
+    /**
+     * turn a two dimensional array into one dimensional array
+     * @private
+     * @param  {Array} arr 2-dimensional array
+     * @return {Array}     1-dimensional array
+     * [[1, 2, 3],[4, 5, 6]] -> [1, 2, 3, 4, 5, 6]
+     */
+    p5.RendererGL.prototype._flatten = function(arr) {
+      //when empty, return empty
+      if (arr.length === 0) {
+        return [];
+      } else if (arr.length > 20000) {
+        //big models , load slower to avoid stack overflow
+        //faster non-recursive flatten via axelduch
+        //stackoverflow.com/questions/27266550/how-to-flatten-nested-array-in-javascript
+        var toString = Object.prototype.toString;
+        var arrayTypeStr = '[object Array]';
+        var result = [];
+        var nodes = arr.slice();
+        var node;
+        node = nodes.pop();
+        do {
+          if (toString.call(node) === arrayTypeStr) {
+            nodes.push.apply(nodes, node);
+          } else {
+            result.push(node);
+          }
+        } while (nodes.length && (node = nodes.pop()) !== undefined);
+        result.reverse(); // we reverse result to restore the original order
+        return result;
+      } else {
+        //otherwise if model within limits for browser
+        //use faster recursive loading
+        return [].concat.apply([], arr);
+      }
+    };
+
+    /**
+     * turn a p5.Vector Array into a one dimensional number array
+     * @private
+     * @param  {p5.Vector[]} arr  an array of p5.Vector
+     * @return {Number[]}     a one dimensional array of numbers
+     * [p5.Vector(1, 2, 3), p5.Vector(4, 5, 6)] ->
+     * [1, 2, 3, 4, 5, 6]
+     */
+    p5.RendererGL.prototype._vToNArray = function(arr) {
+      return this._flatten(
+        arr.map(function(item) {
+          return [item.x, item.y, item.z];
+        })
+      );
+    };
+
+    module.exports = p5.RendererGL;
+
+    },{"../core/constants":21,"../core/core":22,"../core/p5.Renderer":29,"./p5.Matrix":70,"./p5.Shader":74}],74:[function(_dereq_,module,exports){
+    /**
+     * This module defines the p5.Shader class
+     * @module Lights, Camera
+     * @submodule Shaders
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Shader class for WEBGL Mode
+     * @class p5.Shader
+     * @constructor
+     * @param {p5.RendererGL} renderer an instance of p5.RendererGL that
+     * will provide the GL context for this new p5.Shader
+     * @param {String} vertSrc source code for the vertex shader (as a string)
+     * @param {String} fragSrc source code for the fragment shader (as a string)
+     */
+    p5.Shader = function(renderer, vertSrc, fragSrc) {
+      // TODO: adapt this to not take ids, but rather,
+      // to take the source for a vertex and fragment shader
+      // to enable custom shaders at some later date
+      this._renderer = renderer;
+      this._vertSrc = vertSrc;
+      this._fragSrc = fragSrc;
+      this._vertShader = -1;
+      this._fragShader = -1;
+      this._glProgram = 0;
+      this._loadedAttributes = false;
+      this.attributes = {};
+      this._loadedUniforms = false;
+      this.uniforms = {};
+      this._bound = false;
+      this.samplers = [];
+
+      return this;
+    };
+
+    /**
+     * Creates, compiles, and links the shader based on its
+     * sources for the vertex and fragment shaders (provided
+     * to the constructor). Populates known attributes and
+     * uniforms from the shader.
+     * @method init
+     * @chainable
+     * @private
+     */
+    p5.Shader.prototype.init = function() {
+      if (this._glProgram === 0 /* or context is stale? */) {
+        var gl = this._renderer.GL;
+
+        // @todo: once custom shading is allowed,
+        // friendly error messages should be used here to share
+        // compiler and linker errors.
+
+        //set up the shader by
+        // 1. creating and getting a gl id for the shader program,
+        // 2. compliling its vertex & fragment sources,
+        // 3. linking the vertex and fragment shaders
+        this._vertShader = gl.createShader(gl.VERTEX_SHADER);
+        //load in our default vertex shader
+        gl.shaderSource(this._vertShader, this._vertSrc);
+        gl.compileShader(this._vertShader);
+        // if our vertex shader failed compilation?
+        if (!gl.getShaderParameter(this._vertShader, gl.COMPILE_STATUS)) {
+          console.error(
+            'Yikes! An error occurred compiling the vertex shader:' +
+              gl.getShaderInfoLog(this._vertShader)
+          );
+          return null;
+        }
+
+        this._fragShader = gl.createShader(gl.FRAGMENT_SHADER);
+        //load in our material frag shader
+        gl.shaderSource(this._fragShader, this._fragSrc);
+        gl.compileShader(this._fragShader);
+        // if our frag shader failed compilation?
+        if (!gl.getShaderParameter(this._fragShader, gl.COMPILE_STATUS)) {
+          console.error(
+            'Darn! An error occurred compiling the fragment shader:' +
+              gl.getShaderInfoLog(this._fragShader)
+          );
+          return null;
+        }
+
+        this._glProgram = gl.createProgram();
+        gl.attachShader(this._glProgram, this._vertShader);
+        gl.attachShader(this._glProgram, this._fragShader);
+        gl.linkProgram(this._glProgram);
+        if (!gl.getProgramParameter(this._glProgram, gl.LINK_STATUS)) {
+          console.error(
+            'Snap! Error linking shader program: ' +
+              gl.getProgramInfoLog(this._glProgram)
+          );
+        }
+
+        this._loadAttributes();
+        this._loadUniforms();
+      }
+      return this;
+    };
+
+    /**
+     * Queries the active attributes for this shader and loads
+     * their names and locations into the attributes array.
+     * @method _loadAttributes
+     * @private
+     */
+    p5.Shader.prototype._loadAttributes = function() {
+      if (this._loadedAttributes) {
+        return;
+      }
+
+      this.attributes = {};
+
+      var gl = this._renderer.GL;
+
+      var numAttributes = gl.getProgramParameter(
+        this._glProgram,
+        gl.ACTIVE_ATTRIBUTES
+      );
+      for (var i = 0; i < numAttributes; ++i) {
+        var attributeInfo = gl.getActiveAttrib(this._glProgram, i);
+        var name = attributeInfo.name;
+        var location = gl.getAttribLocation(this._glProgram, name);
+        var attribute = {};
+        attribute.name = name;
+        attribute.location = location;
+        attribute.type = attributeInfo.type;
+        attribute.size = attributeInfo.size;
+        this.attributes[name] = attribute;
+      }
+
+      this._loadedAttributes = true;
+    };
+
+    /**
+     * Queries the active uniforms for this shader and loads
+     * their names and locations into the uniforms array.
+     * @method _loadUniforms
+     * @private
+     */
+    p5.Shader.prototype._loadUniforms = function() {
+      if (this._loadedUniforms) {
+        return;
+      }
+
+      var gl = this._renderer.GL;
+
+      // Inspect shader and cache uniform info
+      var numUniforms = gl.getProgramParameter(this._glProgram, gl.ACTIVE_UNIFORMS);
+
+      var samplerIndex = 0;
+      for (var i = 0; i < numUniforms; ++i) {
+        var uniformInfo = gl.getActiveUniform(this._glProgram, i);
+        var uniform = {};
+        uniform.location = gl.getUniformLocation(this._glProgram, uniformInfo.name);
+        uniform.size = uniformInfo.size;
+        var uniformName = uniformInfo.name;
+        //uniforms thats are arrays have their name returned as
+        //someUniform[0] which is a bit silly so we trim it
+        //off here. The size property tells us that its an array
+        //so we dont lose any information by doing this
+        if (uniformInfo.size > 1) {
+          uniformName = uniformName.substring(0, uniformName.indexOf('[0]'));
+        }
+        uniform.name = uniformName;
+        uniform.type = uniformInfo.type;
+        if (uniform.type === gl.SAMPLER_2D) {
+          uniform.samplerIndex = samplerIndex;
+          samplerIndex++;
+          this.samplers.push(uniform);
+        }
+        this.uniforms[uniformName] = uniform;
+      }
+      this._loadedUniforms = true;
+    };
+
+    p5.Shader.prototype.compile = function() {
+      // TODO
+    };
+
+    /**
+     * initializes (if needed) and binds the shader program.
+     * @method bindShader
+     * @private
+     */
+    p5.Shader.prototype.bindShader = function() {
+      this.init();
+      if (!this._bound) {
+        this.useProgram();
+        this._bound = true;
+        this.bindTextures();
+
+        this._loadAttributes();
+        this._loadUniforms();
+
+        this._renderer._setDefaultCamera();
+        this._setMatrixUniforms();
+        if (this === this._renderer.curStrokeShader) {
+          this._setViewportUniform();
+        }
+      }
+    };
+
+    /**
+     * @method unbindShader
+     * @chainable
+     * @private
+     */
+    p5.Shader.prototype.unbindShader = function() {
+      if (this._bound) {
+        this.unbindTextures();
+        //this._renderer.GL.useProgram(0); ??
+        this._bound = false;
+      }
+      return this;
+    };
+
+    p5.Shader.prototype.bindTextures = function() {
+      var gl = this._renderer.GL;
+      for (var i = 0; i < this.samplers.length; i++) {
+        var uniform = this.samplers[i];
+        var tex = uniform.texture;
+        if (tex === undefined) {
+          // user hasn't yet supplied a texture for this slot.
+          // (or there may not be one--maybe just lighting),
+          // so we supply a default texture instead.
+          tex = this._renderer._getEmptyTexture();
+        }
+        gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
+        tex.bindTexture();
+        tex.update();
+        gl.uniform1i(uniform.location, uniform.samplerIndex);
+      }
+    };
+
+    p5.Shader.prototype.unbindTextures = function() {
+      // TODO: migrate stuff from material.js here
+      // - OR - have material.js define this function
+    };
+
+    p5.Shader.prototype._setMatrixUniforms = function() {
+      this.setUniform('uProjectionMatrix', this._renderer.uPMatrix.mat4);
+      this.setUniform('uModelViewMatrix', this._renderer.uMVMatrix.mat4);
+      this.setUniform('uViewMatrix', this._renderer.cameraMatrix.mat4);
+      if (this === this._renderer.curFillShader) {
+        this._renderer.uNMatrix.inverseTranspose(this._renderer.uMVMatrix);
+        this.setUniform('uNormalMatrix', this._renderer.uNMatrix.mat3);
+      }
+    };
+
+    p5.Shader.prototype._setViewportUniform = function() {
+      this.setUniform('uViewport', this._renderer._viewport);
+    };
+
+    /**
+     * @method useProgram
+     * @chainable
+     * @private
+     */
+    p5.Shader.prototype.useProgram = function() {
+      var gl = this._renderer.GL;
+      gl.useProgram(this._glProgram);
+      return this;
+    };
+
+    /**
+     * Wrapper around gl.uniform functions.
+     * As we store uniform info in the shader we can use that
+     * to do type checking on the supplied data and call
+     * the appropriate function.
+     * @method setUniform
+     * @chainable
+     * @param {String} uniformName the name of the uniform in the
+     * shader program
+     * @param {Object|Number|Boolean|Number[]} data the data to be associated
+     * with that uniform; type varies (could be a single numerical value, array,
+     * matrix, or texture / sampler reference)
+     */
+    p5.Shader.prototype.setUniform = function(uniformName, data) {
+      //@todo update all current gl.uniformXX calls
+
+      var uniform = this.uniforms[uniformName];
+      if (!uniform) {
+        //@todo warning?
+        return;
+      }
+      var location = uniform.location;
+
+      var gl = this._renderer.GL;
+      // todo: is this safe to do here?
+      // todo: store the values another way?
+      this.useProgram();
+
+      // TODO BIND?
+
+      switch (uniform.type) {
+        case gl.BOOL:
+          if (data === true) {
+            gl.uniform1i(location, 1);
+          } else {
+            gl.uniform1i(location, 0);
+          }
+          break;
+        case gl.INT:
+          if (uniform.size > 1) {
+            gl.uniform1iv(location, data);
+          } else {
+            gl.uniform1i(location, data);
+          }
+          break;
+        case gl.FLOAT:
+          if (uniform.size > 1) {
+            gl.uniform1fv(location, data);
+          } else {
+            gl.uniform1f(location, data);
+          }
+          break;
+        case gl.FLOAT_MAT3:
+          gl.uniformMatrix3fv(location, false, data);
+          break;
+        case gl.FLOAT_MAT4:
+          gl.uniformMatrix4fv(location, false, data);
+          break;
+        case gl.FLOAT_VEC2:
+          if (uniform.size > 1) {
+            gl.uniform2fv(location, data);
+          } else {
+            gl.uniform2f(location, data[0], data[1]);
+          }
+          break;
+        case gl.FLOAT_VEC3:
+          if (uniform.size > 1) {
+            gl.uniform3fv(location, data);
+          } else {
+            gl.uniform3f(location, data[0], data[1], data[2]);
+          }
+          break;
+        case gl.FLOAT_VEC4:
+          if (uniform.size > 1) {
+            gl.uniform4fv(location, data);
+          } else {
+            gl.uniform4f(location, data[0], data[1], data[2], data[3]);
+          }
+          break;
+        case gl.SAMPLER_2D:
+          gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
+          uniform.texture = this._renderer.getTexture(data);
+          gl.uniform1i(uniform.location, uniform.samplerIndex);
+          break;
+        //@todo complete all types
+      }
+      return this;
+    };
+
+    /* NONE OF THIS IS FAST OR EFFICIENT BUT BEAR WITH ME
+     *
+     * these shader "type" query methods are used by various
+     * facilities of the renderer to determine if changing
+     * the shader type for the required action (for example,
+     * do we need to load the default lighting shader if the
+     * current shader cannot handle lighting?)
+     *
+     **/
+
+    p5.Shader.prototype.isLightShader = function() {
+      return (
+        this.uniforms.uUseLighting !== undefined ||
+        this.uniforms.uAmbientLightCount !== undefined ||
+        this.uniforms.uDirectionalLightCount !== undefined ||
+        this.uniforms.uPointLightCount !== undefined ||
+        this.uniforms.uAmbientColor !== undefined ||
+        this.uniforms.uDirectionalColor !== undefined ||
+        this.uniforms.uPointLightLocation !== undefined ||
+        this.uniforms.uPointLightColor !== undefined ||
+        this.uniforms.uLightingDirection !== undefined ||
+        this.uniforms.uSpecular !== undefined
+      );
+    };
+
+    p5.Shader.prototype.isTextureShader = function() {
+      return this.samplerIndex > 0;
+    };
+
+    p5.Shader.prototype.isColorShader = function() {
+      return (
+        this.attributes.aVertexColor !== undefined ||
+        this.uniforms.uMaterialColor !== undefined
+      );
+    };
+
+    p5.Shader.prototype.isTexLightShader = function() {
+      return this.isLightShader() && this.isTextureShader();
+    };
+
+    p5.Shader.prototype.isStrokeShader = function() {
+      return this.uniforms.uStrokeWeight !== undefined;
+    };
+
+    /**
+     * @method enableAttrib
+     * @chainable
+     * @private
+     */
+    p5.Shader.prototype.enableAttrib = function(
+      loc,
+      size,
+      type,
+      normalized,
+      stride,
+      offset
+    ) {
+      var gl = this._renderer.GL;
+      if (loc !== -1) {
+        gl.enableVertexAttribArray(loc);
+        gl.vertexAttribPointer(loc, size, type, normalized, stride, offset);
+      }
+      return this;
+    };
+
+    module.exports = p5.Shader;
+
+    },{"../core/core":22}],75:[function(_dereq_,module,exports){
+    /**
+     * This module defines the p5.Texture class
+     * @module Lights, Camera
+     * @submodule Material
+     * @for p5
+     * @requires core
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+
+    /**
+     * Texture class for WEBGL Mode
+     * @class p5.Texture
+     * @constructor
+     * @param {p5.RendererGL} renderer an instance of p5.RendererGL that
+     * will provide the GL context for this new p5.Texture
+     * @param {p5.Image|p5.Graphics|p5.Element|p5.MediaElement} [obj] the
+     * object containing the image data to store in the texture.
+     */
+    p5.Texture = function(renderer, obj) {
+      this._renderer = renderer;
+
+      var gl = this._renderer.GL;
+
+      this.src = obj;
+      this.glTex = undefined;
+      this.glTarget = gl.TEXTURE_2D;
+      this.glFormat = gl.RGBA;
+      this.mipmaps = false;
+      this.glMinFilter = gl.LINEAR;
+      this.glMagFilter = gl.LINEAR;
+      this.glWrapS = gl.CLAMP_TO_EDGE;
+      this.glWrapT = gl.CLAMP_TO_EDGE;
+
+      // used to determine if this texture might need constant updating
+      // because it is a video or gif.
+      this.isSrcMediaElement =
+        typeof p5.MediaElement !== 'undefined' && obj instanceof p5.MediaElement;
+      this._videoPrevUpdateTime = 0;
+      this.isSrcHTMLElement =
+        typeof p5.Element !== 'undefined' &&
+        obj instanceof p5.Element &&
+        !(obj instanceof p5.Graphics);
+      this.isSrcP5Image = obj instanceof p5.Image;
+      this.isSrcP5Graphics = obj instanceof p5.Graphics;
+
+      var textureData = this._getTextureDataFromSource();
+      this.width = textureData.width;
+      this.height = textureData.height;
+
+      this.init(textureData);
+      return this;
+    };
+
+    p5.Texture.prototype._getTextureDataFromSource = function() {
+      var textureData;
+      if (this.isSrcP5Image) {
+        // param is a p5.Image
+        textureData = this.src.canvas;
+      } else if (
+        this.isSrcMediaElement ||
+        this.isSrcP5Graphics ||
+        this.isSrcHTMLElement
+      ) {
+        // if param is a video HTML element
+        textureData = this.src.elt;
+      }
+      return textureData;
+    };
+
+    /**
+     * Initializes common texture parameters, creates a gl texture,
+     * tries to upload the texture for the first time if data is
+     * already available.
+     * @private
+     * @method init
+     */
+    p5.Texture.prototype.init = function(data) {
+      var gl = this._renderer.GL;
+      this.glTex = gl.createTexture();
+      this.bindTexture();
+
+      //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.glMagFilter);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.glMinFilter);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.glWrapS);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.glWrapT);
+
+      if (
+        this.width === 0 ||
+        this.height === 0 ||
+        (this.isSrcMediaElement && !this.src.loadedmetadata)
+      ) {
+        // assign a 1x1 empty texture initially, because data is not yet ready,
+        // so that no errors occur in gl console!
+        var tmpdata = new Uint8Array([1, 1, 1, 1]);
+        gl.texImage2D(
+          this.glTarget,
+          0,
+          gl.RGBA,
+          1,
+          1,
+          0,
+          this.glFormat,
+          gl.UNSIGNED_BYTE,
+          tmpdata
+        );
+      } else {
+        // data is ready: just push the texture!
+        gl.texImage2D(
+          this.glTarget,
+          0,
+          this.glFormat,
+          this.glFormat,
+          gl.UNSIGNED_BYTE,
+          data
+        );
+      }
+    };
+
+    /**
+     * Checks if the source data for this texture has changed (if it's
+     * easy to do so) and reuploads the texture if necessary. If it's not
+     * possible or to expensive to do a calculation to determine wheter or
+     * not the data has occurred, this method simply re-uploads the texture.
+     * @method update
+     */
+    p5.Texture.prototype.update = function() {
+      var data = this.src;
+      if (data.width === 0 || data.height === 0) {
+        return; // nothing to do!
+      }
+
+      var textureData = this._getTextureDataFromSource();
+
+      var gl = this._renderer.GL;
+      // pull texture from data, make sure width & height are appropriate
+      if (textureData.width !== this.width || textureData.height !== this.height) {
+        // make sure that if the width and height of this.src have changed
+        // for some reason, we update our metadata and upload the texture again
+        this.width = textureData.width;
+        this.height = textureData.height;
+
+        this.bindTexture();
+        gl.texImage2D(
+          this.glTarget,
+          0,
+          this.glFormat,
+          this.glFormat,
+          gl.UNSIGNED_BYTE,
+          textureData
+        );
+
+        if (this.isSrcP5Image) {
+          data.setModified(false);
+        } else if (this.isSrcMediaElement || this.isSrcHTMLElement) {
+          // on the first frame the metadata comes in, the size will be changed
+          // from 0 to actual size, but pixels may not be available.
+          // flag for update in a future frame.
+          // if we don't do this, a paused video, for example, may not
+          // send the first frame to texture memory.
+          data.setModified(true);
+        }
+      } else if (this.isSrcP5Image) {
+        // for an image, we only update if the modified field has been set,
+        // for example, by a call to p5.Image.set
+        if (data.isModified()) {
+          this.bindTexture();
+          gl.texImage2D(
+            this.glTarget,
+            0,
+            this.glFormat,
+            this.glFormat,
+            gl.UNSIGNED_BYTE,
+            textureData
+          );
+          data.setModified(false);
+        }
+      } else if (this.isSrcMediaElement) {
+        var shouldUpdate = false;
+
+        // for a media element (video), we'll check if the current time in
+        // the video frame matches the last time. if it doesn't match, the
+        // video has advanced or otherwise been taken to a new frame,
+        // and we need to upload it.
+        if (data.isModified()) {
+          // p5.MediaElement may have also had set/updatePixels, etc. called
+          // on it and should be updated, or may have been set for the first
+          // time!
+          shouldUpdate = true;
+          data.setModified(false);
+        } else if (data.loadedmetadata) {
+          // if the meta data has been loaded, we can ask the video
+          // what it's current position (in time) is.
+          if (this._videoPrevUpdateTime !== data.time()) {
+            // update the texture in gpu mem only if the current
+            // video timestamp does not match the timestamp of the last
+            // time we uploaded this texture (and update the time we
+            // last uploaded, too)
+            this._videoPrevUpdateTime = data.time();
+            shouldUpdate = true;
+          }
+        }
+
+        if (shouldUpdate) {
+          this.bindTexture();
+          gl.texImage2D(
+            this.glTarget,
+            0,
+            this.glFormat,
+            this.glFormat,
+            gl.UNSIGNED_BYTE,
+            textureData
+          );
+        }
+      } else {
+        /* data instanceof p5.Graphics, probably */ // there is not enough information to tell if the texture can be
+        // conditionally updated; so to be safe, we just go ahead and upload it.
+        gl.texImage2D(
+          this.glTarget,
+          0,
+          this.glFormat,
+          this.glFormat,
+          gl.UNSIGNED_BYTE,
+          textureData
+        );
+      }
+    };
+
+    /**
+     * Binds the texture to the appropriate GL target.
+     * @method bindTexture
+     */
+    p5.Texture.prototype.bindTexture = function() {
+      // bind texture using gl context + glTarget and
+      // generated gl texture object
+      var gl = this._renderer.GL;
+      gl.bindTexture(this.glTarget, this.glTex);
+
+      return this;
+    };
+
+    /**
+     * Unbinds the texture from the appropriate GL target.
+     * @method unbindTexture
+     */
+    p5.Texture.prototype.unbindTexture = function() {
+      // unbind per above, disable texturing on glTarget
+      var gl = this._renderer.GL;
+      gl.bindTexture(this.glTarget, null);
+    };
+
+    module.exports = p5.Texture;
+
+    },{"../core/core":22}],76:[function(_dereq_,module,exports){
+    /**
+     * @module Shape
+     * @submodule 3D Primitives
+     * @for p5
+     * @requires core
+     * @requires p5.Geometry
+     */
+
+    'use strict';
+
+    var p5 = _dereq_('../core/core');
+    _dereq_('./p5.Geometry');
+    /**
+     * Draw a plane with given a width and height
+     * @method plane
+     * @param  {Number} [width]    width of the plane
+     * @param  {Number} [height]   height of the plane
+     * @param  {Integer} [detailX]  Optional number of triangle
+     *                             subdivisions in x-dimension
+     * @param {Integer} [detailY]   Optional number of triangle
+     *                             subdivisions in y-dimension
+     * @chainable
+     * @example
+     * 

+     * 
+     * //draw a plane with width 50 and height 50
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   plane(50, 50);
+     * }
+     * 
+     * 

+     *
+     * @alt
+     * Nothing displayed on canvas
+     * Rotating interior view of a box with sides that change color.
+     * 3d red and green gradient.
+     * Rotating interior view of a cylinder with sides that change color.
+     * Rotating view of a cylinder with sides that change color.
+     * 3d red and green gradient.
+     * rotating view of a multi-colored cylinder with concave sides.
+     */
+    p5.prototype.plane = function(width, height, detailX, detailY) {
+      if (typeof width === 'undefined') {
+        width = 50;
+      }
+      if (typeof height === 'undefined') {
+        height = width;
+      }
+
+      if (typeof detailX === 'undefined') {
+        detailX = 1;
+      }
+      if (typeof detailY === 'undefined') {
+        detailY = 1;
+      }
+
+      var gId = 'plane|' + detailX + '|' + detailY;
+
+      if (!this._renderer.geometryInHash(gId)) {
+        var _plane = function() {
+          var u, v, p;
+          for (var i = 0; i <= this.detailY; i++) {
+            v = i / this.detailY;
+            for (var j = 0; j <= this.detailX; j++) {
+              u = j / this.detailX;
+              p = new p5.Vector(u - 0.5, v - 0.5, 0);
+              this.vertices.push(p);
+              this.uvs.push([u, v]);
+            }
+          }
+        };
+        var planeGeom = new p5.Geometry(detailX, detailY, _plane);
+        planeGeom.computeFaces().computeNormals();
+        if (detailX <= 1 && detailY <= 1) {
+          planeGeom._makeTriangleEdges();
+          this._renderer._edgesToVertices(planeGeom);
+        } else {
+          console.log(
+            'Cannot draw stroke on plane objects with more' +
+              ' than 1 detailX or 1 detailY'
+          );
+        }
+        this._renderer.createBuffers(gId, planeGeom);
+      }
+
+      this._renderer.drawBuffersScaled(gId, width, height, 0);
+    };
+
+    /**
+     * Draw a box with given width, height and depth
+     * @method  box
+     * @param  {Number} [width]     width of the box
+     * @param  {Number} [Height]    height of the box
+     * @param  {Number} [depth]     depth of the box
+     * @param {Integer} [detailX]  Optional number of triangle
+     *                            subdivisions in x-dimension
+     * @param {Integer} [detailY]  Optional number of triangle
+     *                            subdivisions in y-dimension
+     * @chainable
+     * @example
+     * 

+     * 
+     * //draw a spinning box with width, height and depth 200
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   box(50);
+     * }
+     * 
+     * 

+     */
+    p5.prototype.box = function(width, height, depth, detailX, detailY) {
+      if (typeof width === 'undefined') {
+        width = 50;
+      }
+      if (typeof height === 'undefined') {
+        height = width;
+      }
+      if (typeof depth === 'undefined') {
+        depth = height;
+      }
+
+      if (typeof detailX === 'undefined') {
+        detailX = 4;
+      }
+      if (typeof detailY === 'undefined') {
+        detailY = 4;
+      }
+
+      var gId = 'box|' + detailX + '|' + detailY;
+      if (!this._renderer.geometryInHash(gId)) {
+        var _box = function() {
+          var cubeIndices = [
+            [0, 4, 2, 6], // -1, 0, 0],// -x
+            [1, 3, 5, 7], // +1, 0, 0],// +x
+            [0, 1, 4, 5], // 0, -1, 0],// -y
+            [2, 6, 3, 7], // 0, +1, 0],// +y
+            [0, 2, 1, 3], // 0, 0, -1],// -z
+            [4, 5, 6, 7] // 0, 0, +1] // +z
+          ];
+          //using strokeIndices instead of faces for strokes
+          //to avoid diagonal stroke lines across face of box
+          this.strokeIndices = [
+            [0, 1],
+            [1, 3],
+            [3, 2],
+            [6, 7],
+            [8, 9],
+            [9, 11],
+            [14, 15],
+            [16, 17],
+            [17, 19],
+            [18, 19],
+            [20, 21],
+            [22, 23]
+          ];
+          for (var i = 0; i < cubeIndices.length; i++) {
+            var cubeIndex = cubeIndices[i];
+            var v = i * 4;
+            for (var j = 0; j < 4; j++) {
+              var d = cubeIndex[j];
+              //inspired by lightgl:
+              //https://github.com/evanw/lightgl.js
+              //octants:https://en.wikipedia.org/wiki/Octant_(solid_geometry)
+              var octant = new p5.Vector(
+                ((d & 1) * 2 - 1) / 2,
+                ((d & 2) - 1) / 2,
+                ((d & 4) / 2 - 1) / 2
+              );
+              this.vertices.push(octant);
+              this.uvs.push([j & 1, (j & 2) / 2]);
+            }
+            this.faces.push([v, v + 1, v + 2]);
+            this.faces.push([v + 2, v + 1, v + 3]);
+          }
+        };
+        var boxGeom = new p5.Geometry(detailX, detailY, _box);
+        boxGeom.computeNormals();
+        if (detailX <= 4 && detailY <= 4) {
+          boxGeom._makeTriangleEdges();
+          this._renderer._edgesToVertices(boxGeom);
+        } else {
+          console.log(
+            'Cannot draw stroke on box objects with more' +
+              ' than 4 detailX or 4 detailY'
+          );
+        }
+        //initialize our geometry buffer with
+        //the key val pair:
+        //geometry Id, Geom object
+        this._renderer.createBuffers(gId, boxGeom);
+      }
+      this._renderer.drawBuffersScaled(gId, width, height, depth);
+
+      return this;
+    };
+
+    /**
+     * Draw a sphere with given radius
+     * @method sphere
+     * @param  {Number} [radius]          radius of circle
+     * @param  {Integer} [detailX]        number of segments,
+     *                                    the more segments the smoother geometry
+     *                                    default is 24
+     * @param  {Integer} [detailY]        number of segments,
+     *                                    the more segments the smoother geometry
+     *                                    default is 16
+     * @chainable
+     * @example
+     * 

+     * 
+     * // draw a sphere with radius 200
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   sphere(40);
+     * }
+     * 
+     * 

+     */
+    p5.prototype.sphere = function(radius, detailX, detailY) {
+      if (typeof radius === 'undefined') {
+        radius = 50;
+      }
+      if (typeof detailX === 'undefined') {
+        detailX = 24;
+      }
+      if (typeof detailY === 'undefined') {
+        detailY = 16;
+      }
+
+      this.ellipsoid(radius, radius, radius, detailX, detailY);
+
+      return this;
+    };
+
+    /**
+     * @private
+     * helper function for creating both cones and cyllinders
+     */
+    var _truncatedCone = function(
+      bottomRadius,
+      topRadius,
+      height,
+      detailX,
+      detailY,
+      topCap,
+      bottomCap
+    ) {
+      detailX = detailX < 3 ? 3 : detailX;
+      detailY = detailY < 1 ? 1 : detailY;
+      topCap = topCap === undefined ? true : topCap;
+      bottomCap = bottomCap === undefined ? true : bottomCap;
+      var extra = (topCap ? 2 : 0) + (bottomCap ? 2 : 0);
+      var vertsAroundEdge = detailX + 1;
+
+      // ensure constant slant
+      var slant = Math.atan2(bottomRadius - topRadius, height);
+      var start = topCap ? -2 : 0;
+      var end = detailY + (bottomCap ? 2 : 0);
+      var yy, ii;
+      for (yy = start; yy <= end; ++yy) {
+        var v = yy / detailY;
+        var y = height * v;
+        var ringRadius;
+        if (yy < 0) {
+          y = 0;
+          v = 1;
+          ringRadius = bottomRadius;
+        } else if (yy > detailY) {
+          y = height;
+          v = 1;
+          ringRadius = topRadius;
+        } else {
+          ringRadius = bottomRadius + (topRadius - bottomRadius) * (yy / detailY);
+        }
+        if (yy === -2 || yy === detailY + 2) {
+          ringRadius = 0;
+          v = 0;
+        }
+        y -= height / 2;
+        for (ii = 0; ii < vertsAroundEdge; ++ii) {
+          //VERTICES
+          this.vertices.push(
+            new p5.Vector(
+              Math.sin(ii * Math.PI * 2 / detailX) * ringRadius,
+              y,
+              Math.cos(ii * Math.PI * 2 / detailX) * ringRadius
+            )
+          );
+          //VERTEX NORMALS
+          this.vertexNormals.push(
+            new p5.Vector(
+              yy < 0 || yy > detailY
+                ? 0
+                : Math.sin(ii * Math.PI * 2 / detailX) * Math.cos(slant),
+              yy < 0 ? -1 : yy > detailY ? 1 : Math.sin(slant),
+              yy < 0 || yy > detailY
+                ? 0
+                : Math.cos(ii * Math.PI * 2 / detailX) * Math.cos(slant)
+            )
+          );
+          //UVs
+          this.uvs.push([ii / detailX, v]);
+        }
+      }
+      for (yy = 0; yy < detailY + extra; ++yy) {
+        for (ii = 0; ii < detailX; ++ii) {
+          this.faces.push([
+            vertsAroundEdge * (yy + 0) + 0 + ii,
+            vertsAroundEdge * (yy + 0) + 1 + ii,
+            vertsAroundEdge * (yy + 1) + 1 + ii
+          ]);
+          this.faces.push([
+            vertsAroundEdge * (yy + 0) + 0 + ii,
+            vertsAroundEdge * (yy + 1) + 1 + ii,
+            vertsAroundEdge * (yy + 1) + 0 + ii
+          ]);
+        }
+      }
+    };
+
+    /**
+     * Draw a cylinder with given radius and height
+     * @method  cylinder
+     * @param  {Number} [radius]   radius of the surface
+     * @param  {Number} [height]   height of the cylinder
+     * @param  {Integer} [detailX] number of segments,
+     *                             the more segments the smoother geometry
+     *                             default is 24
+     * @param {Integer} [detailY]  number of segments in y-dimension,
+     *                             the more segments the smoother geometry
+     *                             default is 16
+     * @chainable
+     * @example
+     * 

+     * 
+     * //draw a spinning cylinder with radius 200 and height 200
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   rotateX(frameCount * 0.01);
+     *   rotateZ(frameCount * 0.01);
+     *   cylinder(20, 50);
+     * }
+     * 
+     * 

+     */
+    p5.prototype.cylinder = function(radius, height, detailX, detailY) {
+      if (typeof radius === 'undefined') {
+        radius = 50;
+      }
+      if (typeof height === 'undefined') {
+        height = radius;
+      }
+      if (typeof detailX === 'undefined') {
+        detailX = 24;
+      }
+      if (typeof detailY === 'undefined') {
+        detailY = 16;
+      }
+
+      var gId = 'cylinder|' + detailX + '|' + detailY;
+      if (!this._renderer.geometryInHash(gId)) {
+        var cylinderGeom = new p5.Geometry(detailX, detailY);
+        _truncatedCone.call(cylinderGeom, 1, 1, 1, detailX, detailY, true, true);
+        cylinderGeom.computeNormals();
+        if (detailX <= 24 && detailY <= 16) {
+          cylinderGeom._makeTriangleEdges();
+          this._renderer._edgesToVertices(cylinderGeom);
+        } else {
+          console.log(
+            'Cannot draw stroke on cylinder objects with more' +
+              ' than 24 detailX or 16 detailY'
+          );
+        }
+        this._renderer.createBuffers(gId, cylinderGeom);
+      }
+
+      this._renderer.drawBuffersScaled(gId, radius, radius, height);
+
+      return this;
+    };
+
+    /**
+     * Draw a cone with given radius and height
+     * @method cone
+     * @param  {Number} [radius]          radius of the bottom surface
+     * @param  {Number} [height]          height of the cone
+     * @param  {Integer} [detailX]        number of segments,
+     *                                    the more segments the smoother geometry
+     *                                    default is 24
+     * @param  {Integer} [detailY]        number of segments,
+     *                                    the more segments the smoother geometry
+     *                                    default is 16
+     * @chainable
+     * @example
+     * 

+     * 
+     * //draw a spinning cone with radius 200 and height 200
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   rotateX(frameCount * 0.01);
+     *   rotateZ(frameCount * 0.01);
+     *   cone(40, 70);
+     * }
+     * 
+     * 

+     */
+    p5.prototype.cone = function(radius, height, detailX, detailY) {
+      if (typeof radius === 'undefined') {
+        radius = 50;
+      }
+      if (typeof height === 'undefined') {
+        height = radius;
+      }
+      if (typeof detailX === 'undefined') {
+        detailX = 24;
+      }
+      if (typeof detailY === 'undefined') {
+        detailY = 16;
+      }
+
+      var gId = 'cone|' + radius + '|' + height + '|' + detailX + '|' + detailY;
+      if (!this._renderer.geometryInHash(gId)) {
+        var coneGeom = new p5.Geometry(detailX, detailY);
+        _truncatedCone.call(
+          coneGeom,
+          radius,
+          0, //top radius 0
+          height,
+          detailX,
+          detailY,
+          true,
+          true
+        );
+        //for cones we need to average Normals
+        coneGeom.computeNormals();
+        if (detailX <= 24 && detailY <= 16) {
+          coneGeom._makeTriangleEdges();
+          this._renderer._edgesToVertices(coneGeom);
+        } else {
+          console.log(
+            'Cannot draw stroke on cone objects with more' +
+              ' than 24 detailX or 16 detailY'
+          );
+        }
+        this._renderer.createBuffers(gId, coneGeom);
+      }
+
+      this._renderer.drawBuffers(gId);
+
+      return this;
+    };
+
+    /**
+     * Draw an ellipsoid with given radius
+     * @method ellipsoid
+     * @param  {Number} [radiusx]         xradius of circle
+     * @param  {Number} [radiusy]         yradius of circle
+     * @param  {Number} [radiusz]         zradius of circle
+     * @param  {Integer} [detailX]        number of segments,
+     *                                    the more segments the smoother geometry
+     *                                    default is 24. Avoid detail number above
+     *                                    150, it may crash the browser.
+     * @param  {Integer} [detailY]        number of segments,
+     *                                    the more segments the smoother geometry
+     *                                    default is 16. Avoid detail number above
+     *                                    150, it may crash the browser.
+     * @chainable
+     * @example
+     * 

+     * 
+     * // draw an ellipsoid with radius 20, 30 and 40.
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   ellipsoid(20, 30, 40);
+     * }
+     * 
+     * 

+     */
+    p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) {
+      if (typeof radiusX === 'undefined') {
+        radiusX = 50;
+      }
+      if (typeof radiusY === 'undefined') {
+        radiusY = radiusX;
+      }
+      if (typeof radiusZ === 'undefined') {
+        radiusZ = radiusX;
+      }
+
+      if (typeof detailX === 'undefined') {
+        detailX = 24;
+      }
+      if (typeof detailY === 'undefined') {
+        detailY = 16;
+      }
+
+      var gId = 'ellipsoid|' + detailX + '|' + detailY;
+
+      if (!this._renderer.geometryInHash(gId)) {
+        var _ellipsoid = function() {
+          for (var i = 0; i <= this.detailY; i++) {
+            var v = i / this.detailY;
+            var phi = Math.PI * v - Math.PI / 2;
+            var cosPhi = Math.cos(phi);
+            var sinPhi = Math.sin(phi);
+
+            for (var j = 0; j <= this.detailX; j++) {
+              var u = j / this.detailX;
+              var theta = 2 * Math.PI * u;
+              var cosTheta = Math.cos(theta);
+              var sinTheta = Math.sin(theta);
+              var p = new p5.Vector(cosPhi * sinTheta, sinPhi, cosPhi * cosTheta);
+              this.vertices.push(p);
+              this.vertexNormals.push(p);
+              this.uvs.push([u, v]);
+            }
+          }
+        };
+        var ellipsoidGeom = new p5.Geometry(detailX, detailY, _ellipsoid);
+        ellipsoidGeom.computeFaces();
+        if (detailX <= 24 && detailY <= 24) {
+          ellipsoidGeom._makeTriangleEdges();
+          this._renderer._edgesToVertices(ellipsoidGeom);
+        } else {
+          console.log(
+            'Cannot draw stroke on ellipsoids with more' +
+              ' than 24 detailX or 24 detailY'
+          );
+        }
+        this._renderer.createBuffers(gId, ellipsoidGeom);
+      }
+
+      this._renderer.drawBuffersScaled(gId, radiusX, radiusY, radiusZ);
+
+      return this;
+    };
+
+    /**
+     * Draw a torus with given radius and tube radius
+     * @method torus
+     * @param  {Number} [radius]      radius of the whole ring
+     * @param  {Number} [tubeRadius]  radius of the tube
+     * @param  {Integer} [detailX]    number of segments in x-dimension,
+     *                                the more segments the smoother geometry
+     *                                default is 24
+     * @param  {Integer} [detailY]    number of segments in y-dimension,
+     *                                the more segments the smoother geometry
+     *                                default is 16
+     * @chainable
+     * @example
+     * 

+     * 
+     * //draw a spinning torus with radius 200 and tube radius 60
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   torus(50, 15);
+     * }
+     * 
+     * 

+     */
+    p5.prototype.torus = function(radius, tubeRadius, detailX, detailY) {
+      if (typeof radius === 'undefined') {
+        radius = 50;
+      } else if (!radius) {
+        return; // nothing to draw
+      }
+
+      if (typeof tubeRadius === 'undefined') {
+        tubeRadius = 10;
+      } else if (!tubeRadius) {
+        return; // nothing to draw
+      }
+
+      if (typeof detailX === 'undefined') {
+        detailX = 24;
+      }
+      if (typeof detailY === 'undefined') {
+        detailY = 16;
+      }
+
+      var tubeRatio = (tubeRadius / radius).toPrecision(4);
+      var gId = 'torus|' + tubeRatio + '|' + detailX + '|' + detailY;
+
+      if (!this._renderer.geometryInHash(gId)) {
+        var _torus = function() {
+          for (var i = 0; i <= this.detailY; i++) {
+            var v = i / this.detailY;
+            var phi = 2 * Math.PI * v;
+            var cosPhi = Math.cos(phi);
+            var sinPhi = Math.sin(phi);
+            var r = 1 + tubeRatio * cosPhi;
+
+            for (var j = 0; j <= this.detailX; j++) {
+              var u = j / this.detailX;
+              var theta = 2 * Math.PI * u;
+              var cosTheta = Math.cos(theta);
+              var sinTheta = Math.sin(theta);
+
+              var p = new p5.Vector(r * cosTheta, r * sinTheta, tubeRatio * sinPhi);
+
+              var n = new p5.Vector(cosPhi * cosTheta, cosPhi * sinTheta, sinPhi);
+
+              this.vertices.push(p);
+              this.vertexNormals.push(n);
+              this.uvs.push([u, v]);
+            }
+          }
+        };
+        var torusGeom = new p5.Geometry(detailX, detailY, _torus);
+        torusGeom.computeFaces();
+        if (detailX <= 24 && detailY <= 16) {
+          torusGeom._makeTriangleEdges();
+          this._renderer._edgesToVertices(torusGeom);
+        } else {
+          console.log(
+            'Cannot draw strokes on torus object with more' +
+              ' than 24 detailX or 16 detailY'
+          );
+        }
+        this._renderer.createBuffers(gId, torusGeom);
+      }
+      this._renderer.drawBuffersScaled(gId, radius, radius, radius);
+
+      return this;
+    };
+
+    ///////////////////////
+    /// 2D primitives
+    /////////////////////////
+
+    //@TODO
+    p5.RendererGL.prototype.point = function(x, y, z) {
+      console.log('point not yet implemented in webgl');
+      return this;
+    };
+
+    p5.RendererGL.prototype.triangle = function(args) {
+      var x1 = args[0],
+        y1 = args[1];
+      var x2 = args[2],
+        y2 = args[3];
+      var x3 = args[4],
+        y3 = args[5];
+
+      var gId = 'tri';
+      if (!this.geometryInHash(gId)) {
+        var _triangle = function() {
+          var vertices = [];
+          vertices.push(new p5.Vector(0, 0, 0));
+          vertices.push(new p5.Vector(0, 1, 0));
+          vertices.push(new p5.Vector(1, 0, 0));
+          this.strokeIndices = [[0, 1], [1, 2], [2, 0]];
+          this.vertices = vertices;
+          this.faces = [[0, 1, 2]];
+          this.uvs = [[0, 0], [0, 1], [1, 1]];
+        };
+        var triGeom = new p5.Geometry(1, 1, _triangle);
+        triGeom._makeTriangleEdges();
+        this._edgesToVertices(triGeom);
+        triGeom.computeNormals();
+        this.createBuffers(gId, triGeom);
+      }
+
+      // only one triangle is cached, one point is at the origin, and the
+      // two adjacent sides are tne unit vectors along the X & Y axes.
+      //
+      // this matrix multiplication transforms those two unit vectors
+      // onto the required vector prior to rendering, and moves the
+      // origin appropriately.
+      var uMVMatrix = this.uMVMatrix.copy();
+      try {
+        // prettier-ignore
+        var mult = new p5.Matrix([
+          x2 - x1, y2 - y1, 0, 0, // the resulting unit X-axis
+          x3 - x1, y3 - y1, 0, 0, // the resulting unit Y-axis
+          0, 0, 1, 0,             // the resulting unit Z-axis (unchanged)
+          x1, y1, 0, 1            // the resulting origin
+        ]).mult(this.uMVMatrix);
+
+        this.uMVMatrix = mult;
+
+        this.drawBuffers(gId);
+      } finally {
+        this.uMVMatrix = uMVMatrix;
+      }
+
+      return this;
+    };
+
+    p5.RendererGL.prototype.ellipse = function(args) {
+      var x = args[0];
+      var y = args[1];
+      var width = args[2];
+      var height = args[3];
+      //detailX and Y are optional 6th & 7th
+      //arguments
+      var detailX = args[4] || 24;
+      var gId = 'ellipse|' + detailX;
+      if (!this.geometryInHash(gId)) {
+        var _ellipse = function() {
+          this.vertices.push(new p5.Vector(0.5, 0.5, 0));
+          this.uvs.push([0.5, 0.5]);
+
+          for (var i = 0; i <= this.detailX; i++) {
+            var u = i / this.detailX;
+            var theta = 2 * Math.PI * u;
+
+            var _x = 0.5 + Math.cos(theta) / 2;
+            var _y = 0.5 + Math.sin(theta) / 2;
+
+            this.vertices.push(new p5.Vector(_x, _y, 0));
+            this.uvs.push([_x, _y]);
+
+            this.faces.push([0, (i + 1) % this.detailX + 1, i + 1]);
+          }
+        };
+        var ellipseGeom = new p5.Geometry(detailX, 1, _ellipse);
+        ellipseGeom.computeNormals();
+        if (detailX <= 50) {
+          ellipseGeom._makeTriangleEdges();
+          this._edgesToVertices(ellipseGeom);
+        } else {
+          console.log('Cannot stroke ellipse with more than 50 detailX');
+        }
+
+        this.createBuffers(gId, ellipseGeom);
+      }
+
+      // only a single ellipse (of a given detail) is cached: a circle of
+      // _diameter_ 1 (radius 0.5).
+      //
+      // before rendering, this circle is squished (technical term ;)
+      // appropriately and moved to the required location.
+      var uMVMatrix = this.uMVMatrix.copy();
+      try {
+        this.uMVMatrix.translate([x, y, 0]);
+        this.uMVMatrix.scale(width, height, 1);
+
+        this.drawBuffers(gId);
+      } finally {
+        this.uMVMatrix = uMVMatrix;
+      }
+      return this;
+    };
+
+    p5.RendererGL.prototype.rect = function(args) {
+      var x = args[0];
+      var y = args[1];
+      var width = args[2];
+      var height = args[3];
+      var detailX = args[4] || 24;
+      var detailY = args[5] || 16;
+      var gId = 'rect|' + detailX + '|' + detailY;
+      if (!this.geometryInHash(gId)) {
+        var _rect = function() {
+          for (var i = 0; i <= this.detailY; i++) {
+            var v = i / this.detailY;
+            for (var j = 0; j <= this.detailX; j++) {
+              var u = j / this.detailX;
+              var p = new p5.Vector(u, v, 0);
+              this.vertices.push(p);
+              this.uvs.push([u, v]);
+            }
+          }
+        };
+        var rectGeom = new p5.Geometry(detailX, detailY, _rect);
+        rectGeom
+          .computeFaces()
+          .computeNormals()
+          ._makeTriangleEdges();
+        this._edgesToVertices(rectGeom);
+        this.createBuffers(gId, rectGeom);
+      }
+
+      // only a single rectangle (of a given detail) is cached: a square with
+      // opposite corners at (0,0) & (1,1).
+      //
+      // before rendering, this square is scaled & moved to the required location.
+      var uMVMatrix = this.uMVMatrix.copy();
+      try {
+        this.uMVMatrix.translate([x, y, 0]);
+        this.uMVMatrix.scale(width, height, 1);
+
+        this.drawBuffers(gId);
+      } finally {
+        this.uMVMatrix = uMVMatrix;
+      }
+      return this;
+    };
+
+    p5.RendererGL.prototype.quad = function(x1, y1, x2, y2, x3, y3, x4, y4) {
+      var gId =
+        'quad|' +
+        x1 +
+        '|' +
+        y1 +
+        '|' +
+        x2 +
+        '|' +
+        y2 +
+        '|' +
+        x3 +
+        '|' +
+        y3 +
+        '|' +
+        x4 +
+        '|' +
+        y4;
+      if (!this.geometryInHash(gId)) {
+        var _quad = function() {
+          this.vertices.push(new p5.Vector(x1, y1, 0));
+          this.vertices.push(new p5.Vector(x2, y2, 0));
+          this.vertices.push(new p5.Vector(x3, y3, 0));
+          this.vertices.push(new p5.Vector(x4, y4, 0));
+          this.uvs.push([0, 0], [1, 0], [1, 1], [0, 1]);
+          this.strokeIndices = [[0, 1], [1, 2], [2, 3], [3, 0]];
+        };
+        var quadGeom = new p5.Geometry(2, 2, _quad);
+        quadGeom.computeNormals()._makeTriangleEdges();
+        this._edgesToVertices(quadGeom);
+        quadGeom.faces = [[0, 1, 2], [2, 3, 0]];
+        this.createBuffers(gId, quadGeom);
+      }
+      this.drawBuffers(gId);
+      return this;
+    };
+
+    //this implementation of bezier curve
+    //is based on Bernstein polynomial
+    // pretier-ignore
+    p5.RendererGL.prototype.bezier = function(
+      x1,
+      y1,
+      z1,
+      x2,
+      y2,
+      z2,
+      x3,
+      y3,
+      z3,
+      x4,
+      y4,
+      z4
+    ) {
+      var bezierDetail = this._pInst._bezierDetail || 20; //value of Bezier detail
+      this.beginShape();
+      for (var i = 0; i <= bezierDetail; i++) {
+        var c1 = Math.pow(1 - i / bezierDetail, 3);
+        var c2 = 3 * (i / bezierDetail) * Math.pow(1 - i / bezierDetail, 2);
+        var c3 = 3 * Math.pow(i / bezierDetail, 2) * (1 - i / bezierDetail);
+        var c4 = Math.pow(i / bezierDetail, 3);
+        this.vertex(
+          x1 * c1 + x2 * c2 + x3 * c3 + x4 * c4,
+          y1 * c1 + y2 * c2 + y3 * c3 + y4 * c4,
+          z1 * c1 + z2 * c2 + z3 * c3 + z4 * c4
+        );
+      }
+      this.endShape();
+      return this;
+    };
+
+    // pretier-ignore
+    p5.RendererGL.prototype.curve = function(
+      x1,
+      y1,
+      z1,
+      x2,
+      y2,
+      z2,
+      x3,
+      y3,
+      z3,
+      x4,
+      y4,
+      z4
+    ) {
+      var curveDetail = this._pInst._curveDetail;
+      this.beginShape();
+      for (var i = 0; i <= curveDetail; i++) {
+        var c1 = Math.pow(i / curveDetail, 3) * 0.5;
+        var c2 = Math.pow(i / curveDetail, 2) * 0.5;
+        var c3 = i / curveDetail * 0.5;
+        var c4 = 0.5;
+        var vx =
+          c1 * (-x1 + 3 * x2 - 3 * x3 + x4) +
+          c2 * (2 * x1 - 5 * x2 + 4 * x3 - x4) +
+          c3 * (-x1 + x3) +
+          c4 * (2 * x2);
+        var vy =
+          c1 * (-y1 + 3 * y2 - 3 * y3 + y4) +
+          c2 * (2 * y1 - 5 * y2 + 4 * y3 - y4) +
+          c3 * (-y1 + y3) +
+          c4 * (2 * y2);
+        var vz =
+          c1 * (-z1 + 3 * z2 - 3 * z3 + z4) +
+          c2 * (2 * z1 - 5 * z2 + 4 * z3 - z4) +
+          c3 * (-z1 + z3) +
+          c4 * (2 * z2);
+        this.vertex(vx, vy, vz);
+      }
+      this.endShape();
+      return this;
+    };
+
+    /**
+     * Draw a line given two points
+     * @private
+     * @param {Number} x0 x-coordinate of first vertex
+     * @param {Number} y0 y-coordinate of first vertex
+     * @param {Number} z0 z-coordinate of first vertex
+     * @param {Number} x1 x-coordinate of second vertex
+     * @param {Number} y1 y-coordinate of second vertex
+     * @param {Number} z1 z-coordinate of second vertex
+     * @chainable
+     * @example
+     * 

+     * 
+     * //draw a line
+     * function setup() {
+     *   createCanvas(100, 100, WEBGL);
+     * }
+     *
+     * function draw() {
+     *   background(200);
+     *   rotateX(frameCount * 0.01);
+     *   rotateY(frameCount * 0.01);
+     *   // Use fill instead of stroke to change the color of shape.
+     *   fill(255, 0, 0);
+     *   line(10, 10, 0, 60, 60, 20);
+     * }
+     * 
+     * 

+     */
+    p5.RendererGL.prototype.line = function() {
+      if (arguments.length === 6) {
+        this.beginShape();
+        this.vertex(arguments[0], arguments[1], arguments[2]);
+        this.vertex(arguments[3], arguments[4], arguments[5]);
+        this.endShape();
+      } else if (arguments.length === 4) {
+        this.beginShape();
+        this.vertex(arguments[0], arguments[1], 0);
+        this.vertex(arguments[2], arguments[3], 0);
+        this.endShape();
+      }
+      return this;
+    };
+
+    module.exports = p5;
+
+    },{"../core/core":22,"./p5.Geometry":69}]},{},[13])(13)
+    });
\ No newline at end of file
diff --git a/pemFioi/p5/p5.sound.js b/pemFioi/p5/p5.sound.js
new file mode 100644
index 000000000..01507c390
--- /dev/null
+++ b/pemFioi/p5/p5.sound.js
@@ -0,0 +1,12353 @@
+/*! p5.sound.js v0.3.7 2018-01-19 */
+/**
+ *  p5.sound extends p5 with Web Audio functionality including audio input,
+ *  playback, analysis and synthesis.
+ *  


+ *  p5.SoundFile: Load and play sound files.

+ *  p5.Amplitude: Get the current volume of a sound.

+ *  p5.AudioIn: Get sound from an input source, typically
+ *    a computer microphone.

+ *  p5.FFT: Analyze the frequency of sound. Returns
+ *    results from the frequency spectrum or time domain (waveform).

+ *  p5.Oscillator: Generate Sine,
+ *    Triangle, Square and Sawtooth waveforms. Base class of
+ *    p5.Noise and p5.Pulse.
+ *    

+ *  p5.Env: An Envelope is a series
+ *    of fades over time. Often used to control an object's
+ *    output gain level as an "ADSR Envelope" (Attack, Decay,
+ *    Sustain, Release). Can also modulate other parameters.

+ *  p5.Delay: A delay effect with
+ *    parameters for feedback, delayTime, and lowpass filter.

+ *  p5.Filter: Filter the frequency range of a
+ *    sound.
+ *  

+ *  p5.Reverb: Add reverb to a sound by specifying
+ *    duration and decay. 

+ *  p5.Convolver: Extends
+ *  p5.Reverb to simulate the sound of real
+ *    physical spaces through convolution.

+ *  p5.SoundRecorder: Record sound for playback
+ *    / save the .wav file.
+ *  p5.Phrase, p5.Part and
+ *  p5.Score: Compose musical sequences.
+ *  


+ *  p5.sound is on GitHub.
+ *  Download the latest version
+ *  here.
+ *
+ *  @module p5.sound
+ *  @submodule p5.sound
+ *  @for p5.sound
+ *  @main
+ */
+
+/**
+ *  p5.sound
+ *  https://p5js.org/reference/#/libraries/p5.sound
+ *
+ *  From the Processing Foundation and contributors
+ *  https://github.com/processing/p5.js-sound/graphs/contributors
+ *
+ *  MIT License (MIT)
+ *  https://github.com/processing/p5.js-sound/blob/master/LICENSE
+ *
+ *  Some of the many audio libraries & resources that inspire p5.sound:
+ *   - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js
+ *   - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/
+ *   - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0
+ *   - wavesurfer.js https://github.com/katspaugh/wavesurfer.js
+ *   - Web Audio Components by Jordan Santell https://github.com/web-audio-components
+ *   - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound
+ *
+ *   Web Audio API: http://w3.org/TR/webaudio/
+ */
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd)
+      define('p5.sound', ['p5'], function (p5) { (factory(p5));});
+    else if (typeof exports === 'object')
+      factory(require('../p5'));
+    else
+      factory(root['p5']);
+  }(this, function (p5) {
+
+  var sndcore;
+  'use strict';
+  sndcore = function () {
+    /* AudioContext Monkeypatch
+       Copyright 2013 Chris Wilson
+       Licensed under the Apache License, Version 2.0 (the "License");
+       you may not use this file except in compliance with the License.
+       You may obtain a copy of the License at
+           http://www.apache.org/licenses/LICENSE-2.0
+       Unless required by applicable law or agreed to in writing, software
+       distributed under the License is distributed on an "AS IS" BASIS,
+       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+       See the License for the specific language governing permissions and
+       limitations under the License.
+    */
+    (function () {
+      function fixSetTarget(param) {
+        if (!param)
+          // if NYI, just return
+          return;
+        if (!param.setTargetAtTime)
+          param.setTargetAtTime = param.setTargetValueAtTime;
+      }
+      if (window.hasOwnProperty('webkitAudioContext') && !window.hasOwnProperty('AudioContext')) {
+        window.AudioContext = window.webkitAudioContext;
+        if (typeof AudioContext.prototype.createGain !== 'function')
+          AudioContext.prototype.createGain = AudioContext.prototype.createGainNode;
+        if (typeof AudioContext.prototype.createDelay !== 'function')
+          AudioContext.prototype.createDelay = AudioContext.prototype.createDelayNode;
+        if (typeof AudioContext.prototype.createScriptProcessor !== 'function')
+          AudioContext.prototype.createScriptProcessor = AudioContext.prototype.createJavaScriptNode;
+        if (typeof AudioContext.prototype.createPeriodicWave !== 'function')
+          AudioContext.prototype.createPeriodicWave = AudioContext.prototype.createWaveTable;
+        AudioContext.prototype.internal_createGain = AudioContext.prototype.createGain;
+        AudioContext.prototype.createGain = function () {
+          var node = this.internal_createGain();
+          fixSetTarget(node.gain);
+          return node;
+        };
+        AudioContext.prototype.internal_createDelay = AudioContext.prototype.createDelay;
+        AudioContext.prototype.createDelay = function (maxDelayTime) {
+          var node = maxDelayTime ? this.internal_createDelay(maxDelayTime) : this.internal_createDelay();
+          fixSetTarget(node.delayTime);
+          return node;
+        };
+        AudioContext.prototype.internal_createBufferSource = AudioContext.prototype.createBufferSource;
+        AudioContext.prototype.createBufferSource = function () {
+          var node = this.internal_createBufferSource();
+          if (!node.start) {
+            node.start = function (when, offset, duration) {
+              if (offset || duration)
+                this.noteGrainOn(when || 0, offset, duration);
+              else
+                this.noteOn(when || 0);
+            };
+          } else {
+            node.internal_start = node.start;
+            node.start = function (when, offset, duration) {
+              if (typeof duration !== 'undefined')
+                node.internal_start(when || 0, offset, duration);
+              else
+                node.internal_start(when || 0, offset || 0);
+            };
+          }
+          if (!node.stop) {
+            node.stop = function (when) {
+              this.noteOff(when || 0);
+            };
+          } else {
+            node.internal_stop = node.stop;
+            node.stop = function (when) {
+              node.internal_stop(when || 0);
+            };
+          }
+          fixSetTarget(node.playbackRate);
+          return node;
+        };
+        AudioContext.prototype.internal_createDynamicsCompressor = AudioContext.prototype.createDynamicsCompressor;
+        AudioContext.prototype.createDynamicsCompressor = function () {
+          var node = this.internal_createDynamicsCompressor();
+          fixSetTarget(node.threshold);
+          fixSetTarget(node.knee);
+          fixSetTarget(node.ratio);
+          fixSetTarget(node.reduction);
+          fixSetTarget(node.attack);
+          fixSetTarget(node.release);
+          return node;
+        };
+        AudioContext.prototype.internal_createBiquadFilter = AudioContext.prototype.createBiquadFilter;
+        AudioContext.prototype.createBiquadFilter = function () {
+          var node = this.internal_createBiquadFilter();
+          fixSetTarget(node.frequency);
+          fixSetTarget(node.detune);
+          fixSetTarget(node.Q);
+          fixSetTarget(node.gain);
+          return node;
+        };
+        if (typeof AudioContext.prototype.createOscillator !== 'function') {
+          AudioContext.prototype.internal_createOscillator = AudioContext.prototype.createOscillator;
+          AudioContext.prototype.createOscillator = function () {
+            var node = this.internal_createOscillator();
+            if (!node.start) {
+              node.start = function (when) {
+                this.noteOn(when || 0);
+              };
+            } else {
+              node.internal_start = node.start;
+              node.start = function (when) {
+                node.internal_start(when || 0);
+              };
+            }
+            if (!node.stop) {
+              node.stop = function (when) {
+                this.noteOff(when || 0);
+              };
+            } else {
+              node.internal_stop = node.stop;
+              node.stop = function (when) {
+                node.internal_stop(when || 0);
+              };
+            }
+            if (!node.setPeriodicWave)
+              node.setPeriodicWave = node.setWaveTable;
+            fixSetTarget(node.frequency);
+            fixSetTarget(node.detune);
+            return node;
+          };
+        }
+      }
+      if (window.hasOwnProperty('webkitOfflineAudioContext') && !window.hasOwnProperty('OfflineAudioContext')) {
+        window.OfflineAudioContext = window.webkitOfflineAudioContext;
+      }
+    }(window));
+    // <-- end MonkeyPatch.
+    // Create the Audio Context
+    var audiocontext = new window.AudioContext();
+    /**
+     * 
Returns the Audio Context for this sketch. Useful for users
+     * who would like to dig deeper into the Web Audio API
+     * .

+     *
+     * @method getAudioContext
+     * @return {Object}    AudioContext for this sketch
+     */
+    p5.prototype.getAudioContext = function () {
+      return audiocontext;
+    };
+    // Polyfill for AudioIn, also handled by p5.dom createCapture
+    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+    /**
+     * Determine which filetypes are supported (inspired by buzz.js)
+     * The audio element (el) will only be used to test browser support for various audio formats
+     */
+    var el = document.createElement('audio');
+    p5.prototype.isSupported = function () {
+      return !!el.canPlayType;
+    };
+    var isOGGSupported = function () {
+      return !!el.canPlayType && el.canPlayType('audio/ogg; codecs="vorbis"');
+    };
+    var isMP3Supported = function () {
+      return !!el.canPlayType && el.canPlayType('audio/mpeg;');
+    };
+    var isWAVSupported = function () {
+      return !!el.canPlayType && el.canPlayType('audio/wav; codecs="1"');
+    };
+    var isAACSupported = function () {
+      return !!el.canPlayType && (el.canPlayType('audio/x-m4a;') || el.canPlayType('audio/aac;'));
+    };
+    var isAIFSupported = function () {
+      return !!el.canPlayType && el.canPlayType('audio/x-aiff;');
+    };
+    p5.prototype.isFileSupported = function (extension) {
+      switch (extension.toLowerCase()) {
+      case 'mp3':
+        return isMP3Supported();
+      case 'wav':
+        return isWAVSupported();
+      case 'ogg':
+        return isOGGSupported();
+      case 'aac':
+      case 'm4a':
+      case 'mp4':
+        return isAACSupported();
+      case 'aif':
+      case 'aiff':
+        return isAIFSupported();
+      default:
+        return false;
+      }
+    };
+    // if it is iOS, we have to have a user interaction to start Web Audio
+    // http://paulbakaus.com/tutorials/html5/web-audio-on-ios/
+    var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false;
+    if (iOS) {
+      var iosStarted = false;
+      var startIOS = function () {
+        if (iosStarted)
+          return;
+        // create empty buffer
+        var buffer = audiocontext.createBuffer(1, 1, 22050);
+        var source = audiocontext.createBufferSource();
+        source.buffer = buffer;
+        // connect to output (your speakers)
+        source.connect(audiocontext.destination);
+        // play the file
+        source.start(0);
+        console.log('start ios!');
+        if (audiocontext.state === 'running') {
+          iosStarted = true;
+        }
+      };
+      document.addEventListener('touchend', startIOS, false);
+      document.addEventListener('touchstart', startIOS, false);
+    }
+  }();
+  var master;
+  'use strict';
+  master = function () {
+    /**
+     * Master contains AudioContext and the master sound output.
+     */
+    var Master = function () {
+      var audiocontext = p5.prototype.getAudioContext();
+      this.input = audiocontext.createGain();
+      this.output = audiocontext.createGain();
+      //put a hard limiter on the output
+      this.limiter = audiocontext.createDynamicsCompressor();
+      this.limiter.threshold.value = 0;
+      this.limiter.ratio.value = 20;
+      this.audiocontext = audiocontext;
+      this.output.disconnect();
+      // connect input to limiter
+      this.input.connect(this.limiter);
+      // connect limiter to output
+      this.limiter.connect(this.output);
+      // meter is just for global Amplitude / FFT analysis
+      this.meter = audiocontext.createGain();
+      this.fftMeter = audiocontext.createGain();
+      this.output.connect(this.meter);
+      this.output.connect(this.fftMeter);
+      // connect output to destination
+      this.output.connect(this.audiocontext.destination);
+      // an array of all sounds in the sketch
+      this.soundArray = [];
+      // an array of all musical parts in the sketch
+      this.parts = [];
+      // file extensions to search for
+      this.extensions = [];
+    };
+    // create a single instance of the p5Sound / master output for use within this sketch
+    var p5sound = new Master();
+    /**
+     * Returns a number representing the master amplitude (volume) for sound
+     * in this sketch.
+     *
+     * @method getMasterVolume
+     * @return {Number} Master amplitude (volume) for sound in this sketch.
+     *                  Should be between 0.0 (silence) and 1.0.
+     */
+    p5.prototype.getMasterVolume = function () {
+      return p5sound.output.gain.value;
+    };
+    /**
+     *  
Scale the output of all sound in this sketch

+     *  Scaled between 0.0 (silence) and 1.0 (full volume).
+     *  1.0 is the maximum amplitude of a digital sound, so multiplying
+     *  by greater than 1.0 may cause digital distortion. To
+     *  fade, provide a rampTime parameter. For more
+     *  complex fades, see the Env class.
+     *
+     *  Alternately, you can pass in a signal source such as an
+     *  oscillator to modulate the amplitude with an audio signal.
+     *
+     *  
How This Works: When you load the p5.sound module, it
+     *  creates a single instance of p5sound. All sound objects in this
+     *  module output to p5sound before reaching your computer's output.
+     *  So if you change the amplitude of p5sound, it impacts all of the
+     *  sound in this module.

+     *
+     *  
If no value is provided, returns a Web Audio API Gain Node

+     *
+     *  @method  masterVolume
+     *  @param {Number|Object} volume  Volume (amplitude) between 0.0
+     *                                     and 1.0 or modulating signal/oscillator
+     *  @param {Number} [rampTime]  Fade for t seconds
+     *  @param {Number} [timeFromNow]  Schedule this event to happen at
+     *                                 t seconds in the future
+     */
+    p5.prototype.masterVolume = function (vol, rampTime, tFromNow) {
+      if (typeof vol === 'number') {
+        var rampTime = rampTime || 0;
+        var tFromNow = tFromNow || 0;
+        var now = p5sound.audiocontext.currentTime;
+        var currentVol = p5sound.output.gain.value;
+        p5sound.output.gain.cancelScheduledValues(now + tFromNow);
+        p5sound.output.gain.linearRampToValueAtTime(currentVol, now + tFromNow);
+        p5sound.output.gain.linearRampToValueAtTime(vol, now + tFromNow + rampTime);
+      } else if (vol) {
+        vol.connect(p5sound.output.gain);
+      } else {
+        // return the Gain Node
+        return p5sound.output.gain;
+      }
+    };
+    /**
+     *  `p5.soundOut` is the p5.sound master output. It sends output to
+     *  the destination of this window's web audio context. It contains
+     *  Web Audio API nodes including a dyanmicsCompressor (.limiter),
+     *  and Gain Nodes for .input and .output.
+     *
+     *  @property {Object} soundOut
+     */
+    p5.prototype.soundOut = p5.soundOut = p5sound;
+    /**
+     *  a silent connection to the DesinationNode
+     *  which will ensure that anything connected to it
+     *  will not be garbage collected
+     *
+     *  @private
+     */
+    p5.soundOut._silentNode = p5sound.audiocontext.createGain();
+    p5.soundOut._silentNode.gain.value = 0;
+    p5.soundOut._silentNode.connect(p5sound.audiocontext.destination);
+    return p5sound;
+  }();
+  var helpers;
+  'use strict';
+  helpers = function () {
+    var p5sound = master;
+    /**
+     * @for p5
+     */
+    /**
+     * Returns a number representing the sample rate, in samples per second,
+     * of all sound objects in this audio context. It is determined by the
+     * sampling rate of your operating system's sound card, and it is not
+     * currently possile to change.
+     * It is often 44100, or twice the range of human hearing.
+     *
+     * @method sampleRate
+     * @return {Number} samplerate samples per second
+     */
+    p5.prototype.sampleRate = function () {
+      return p5sound.audiocontext.sampleRate;
+    };
+    /**
+     *  Returns the closest MIDI note value for
+     *  a given frequency.
+     *
+     *  @method freqToMidi
+     *  @param  {Number} frequency A freqeuncy, for example, the "A"
+     *                             above Middle C is 440Hz
+     *  @return {Number}   MIDI note value
+     */
+    p5.prototype.freqToMidi = function (f) {
+      var mathlog2 = Math.log(f / 440) / Math.log(2);
+      var m = Math.round(12 * mathlog2) + 69;
+      return m;
+    };
+    /**
+     *  Returns the frequency value of a MIDI note value.
+     *  General MIDI treats notes as integers where middle C
+     *  is 60, C# is 61, D is 62 etc. Useful for generating
+     *  musical frequencies with oscillators.
+     *
+     *  @method  midiToFreq
+     *  @param  {Number} midiNote The number of a MIDI note
+     *  @return {Number} Frequency value of the given MIDI note
+     *  @example
+     *  

+     *  var notes = [60, 64, 67, 72];
+     *  var i = 0;
+     *
+     *  function setup() {
+     *    osc = new p5.Oscillator('Triangle');
+     *    osc.start();
+     *    frameRate(1);
+     *  }
+     *
+     *  function draw() {
+     *    var freq = midiToFreq(notes[i]);
+     *    osc.freq(freq);
+     *    i++;
+     *    if (i >= notes.length){
+     *      i = 0;
+     *    }
+     *  }
+     *  

+     */
+    p5.prototype.midiToFreq = function (m) {
+      return 440 * Math.pow(2, (m - 69) / 12);
+    };
+    /**
+     *  List the SoundFile formats that you will include. LoadSound
+     *  will search your directory for these extensions, and will pick
+     *  a format that is compatable with the client's web browser.
+     *  Here is a free online file
+     *  converter.
+     *
+     *  @method soundFormats
+     *  @param {String} [...formats] i.e. 'mp3', 'wav', 'ogg'
+     *  @example
+     *  

+     *  function preload() {
+     *    // set the global sound formats
+     *    soundFormats('mp3', 'ogg');
+     *
+     *    // load either beatbox.mp3, or .ogg, depending on browser
+     *    mySound = loadSound('assets/beatbox.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    mySound.play();
+     *  }
+     *  

+     */
+    p5.prototype.soundFormats = function () {
+      // reset extensions array
+      p5sound.extensions = [];
+      // add extensions
+      for (var i = 0; i < arguments.length; i++) {
+        arguments[i] = arguments[i].toLowerCase();
+        if ([
+            'mp3',
+            'wav',
+            'ogg',
+            'm4a',
+            'aac'
+          ].indexOf(arguments[i]) > -1) {
+          p5sound.extensions.push(arguments[i]);
+        } else {
+          throw arguments[i] + ' is not a valid sound format!';
+        }
+      }
+    };
+    p5.prototype.disposeSound = function () {
+      for (var i = 0; i < p5sound.soundArray.length; i++) {
+        p5sound.soundArray[i].dispose();
+      }
+    };
+    // register removeSound to dispose of p5sound SoundFiles, Convolvers,
+    // Oscillators etc when sketch ends
+    p5.prototype.registerMethod('remove', p5.prototype.disposeSound);
+    p5.prototype._checkFileFormats = function (paths) {
+      var path;
+      // if path is a single string, check to see if extension is provided
+      if (typeof paths === 'string') {
+        path = paths;
+        // see if extension is provided
+        var extTest = path.split('.').pop();
+        // if an extension is provided...
+        if ([
+            'mp3',
+            'wav',
+            'ogg',
+            'm4a',
+            'aac'
+          ].indexOf(extTest) > -1) {
+          if (p5.prototype.isFileSupported(extTest)) {
+            path = path;
+          } else {
+            var pathSplit = path.split('.');
+            var pathCore = pathSplit[pathSplit.length - 1];
+            for (var i = 0; i < p5sound.extensions.length; i++) {
+              var extension = p5sound.extensions[i];
+              var supported = p5.prototype.isFileSupported(extension);
+              if (supported) {
+                pathCore = '';
+                if (pathSplit.length === 2) {
+                  pathCore += pathSplit[0];
+                }
+                for (var i = 1; i <= pathSplit.length - 2; i++) {
+                  var p = pathSplit[i];
+                  pathCore += '.' + p;
+                }
+                path = pathCore += '.';
+                path = path += extension;
+                break;
+              }
+            }
+          }
+        } else {
+          for (var i = 0; i < p5sound.extensions.length; i++) {
+            var extension = p5sound.extensions[i];
+            var supported = p5.prototype.isFileSupported(extension);
+            if (supported) {
+              path = path + '.' + extension;
+              break;
+            }
+          }
+        }
+      } else if (typeof paths === 'object') {
+        for (var i = 0; i < paths.length; i++) {
+          var extension = paths[i].split('.').pop();
+          var supported = p5.prototype.isFileSupported(extension);
+          if (supported) {
+            // console.log('.'+extension + ' is ' + supported +
+            //  ' supported by your browser.');
+            path = paths[i];
+            break;
+          }
+        }
+      }
+      return path;
+    };
+    /**
+     *  Used by Osc and Env to chain signal math
+     */
+    p5.prototype._mathChain = function (o, math, thisChain, nextChain, type) {
+      // if this type of math already exists in the chain, replace it
+      for (var i in o.mathOps) {
+        if (o.mathOps[i] instanceof type) {
+          o.mathOps[i].dispose();
+          thisChain = i;
+          if (thisChain < o.mathOps.length - 1) {
+            nextChain = o.mathOps[i + 1];
+          }
+        }
+      }
+      o.mathOps[thisChain - 1].disconnect();
+      o.mathOps[thisChain - 1].connect(math);
+      math.connect(nextChain);
+      o.mathOps[thisChain] = math;
+      return o;
+    };
+    return { midiToFreq: p5.prototype.midiToFreq };
+  }(master);
+  var errorHandler;
+  'use strict';
+  errorHandler = function () {
+    /*
+        Helper function to generate an error
+        with a custom stack trace that points to the sketch
+        and removes other parts of the stack trace.
+
+        @private
+        @class customError
+        @constructor
+        @param  {String} name         custom  error name
+        @param  {String} errorTrace   custom error trace
+        @param  {String} failedPath     path to the file that failed to load
+        @property {String} name custom error name
+        @property {String} message custom error message
+        @property {String} stack trace the error back to a line in the user's sketch.
+                                 Note: this edits out stack trace within p5.js and p5.sound.
+        @property {String} originalStack unedited, original stack trace
+        @property {String} failedPath path to the file that failed to load
+        @return {Error}     returns a custom Error object
+       */
+    var CustomError = function (name, errorTrace, failedPath) {
+      var err = new Error();
+      var tempStack, splitStack;
+      err.name = name;
+      err.originalStack = err.stack + errorTrace;
+      tempStack = err.stack + errorTrace;
+      err.failedPath = failedPath;
+      // only print the part of the stack trace that refers to the user code:
+      var splitStack = tempStack.split('\n');
+      splitStack = splitStack.filter(function (ln) {
+        return !ln.match(/(p5.|native code|globalInit)/g);
+      });
+      err.stack = splitStack.join('\n');
+      return err;
+    };
+    return CustomError;
+  }();
+  var panner;
+  'use strict';
+  panner = function () {
+    var p5sound = master;
+    var ac = p5sound.audiocontext;
+    // Stereo panner
+    // if there is a stereo panner node use it
+    if (typeof ac.createStereoPanner !== 'undefined') {
+      p5.Panner = function (input, output) {
+        this.stereoPanner = this.input = ac.createStereoPanner();
+        input.connect(this.stereoPanner);
+        this.stereoPanner.connect(output);
+      };
+      p5.Panner.prototype.pan = function (val, tFromNow) {
+        var time = tFromNow || 0;
+        var t = ac.currentTime + time;
+        this.stereoPanner.pan.linearRampToValueAtTime(val, t);
+      };
+      //not implemented because stereopanner
+      //node does not require this and will automatically
+      //convert single channel or multichannel to stereo.
+      //tested with single and stereo, not with (>2) multichannel
+      p5.Panner.prototype.inputChannels = function () {
+      };
+      p5.Panner.prototype.connect = function (obj) {
+        this.stereoPanner.connect(obj);
+      };
+      p5.Panner.prototype.disconnect = function () {
+        this.stereoPanner.disconnect();
+      };
+    } else {
+      // if there is no createStereoPanner object
+      // such as in safari 7.1.7 at the time of writing this
+      // use this method to create the effect
+      p5.Panner = function (input, output, numInputChannels) {
+        this.input = ac.createGain();
+        input.connect(this.input);
+        this.left = ac.createGain();
+        this.right = ac.createGain();
+        this.left.channelInterpretation = 'discrete';
+        this.right.channelInterpretation = 'discrete';
+        // if input is stereo
+        if (numInputChannels > 1) {
+          this.splitter = ac.createChannelSplitter(2);
+          this.input.connect(this.splitter);
+          this.splitter.connect(this.left, 1);
+          this.splitter.connect(this.right, 0);
+        } else {
+          this.input.connect(this.left);
+          this.input.connect(this.right);
+        }
+        this.output = ac.createChannelMerger(2);
+        this.left.connect(this.output, 0, 1);
+        this.right.connect(this.output, 0, 0);
+        this.output.connect(output);
+      };
+      // -1 is left, +1 is right
+      p5.Panner.prototype.pan = function (val, tFromNow) {
+        var time = tFromNow || 0;
+        var t = ac.currentTime + time;
+        var v = (val + 1) / 2;
+        var rightVal = Math.cos(v * Math.PI / 2);
+        var leftVal = Math.sin(v * Math.PI / 2);
+        this.left.gain.linearRampToValueAtTime(leftVal, t);
+        this.right.gain.linearRampToValueAtTime(rightVal, t);
+      };
+      p5.Panner.prototype.inputChannels = function (numChannels) {
+        if (numChannels === 1) {
+          this.input.disconnect();
+          this.input.connect(this.left);
+          this.input.connect(this.right);
+        } else if (numChannels === 2) {
+          if (typeof (this.splitter === 'undefined')) {
+            this.splitter = ac.createChannelSplitter(2);
+          }
+          this.input.disconnect();
+          this.input.connect(this.splitter);
+          this.splitter.connect(this.left, 1);
+          this.splitter.connect(this.right, 0);
+        }
+      };
+      p5.Panner.prototype.connect = function (obj) {
+        this.output.connect(obj);
+      };
+      p5.Panner.prototype.disconnect = function () {
+        this.output.disconnect();
+      };
+    }
+  }(master);
+  var soundfile;
+  'use strict';
+  soundfile = function () {
+    var CustomError = errorHandler;
+    var p5sound = master;
+    var ac = p5sound.audiocontext;
+    var midiToFreq = helpers.midiToFreq;
+    /**
+     *  
SoundFile object with a path to a file.

+     *
+     *  
The p5.SoundFile may not be available immediately because
+     *  it loads the file information asynchronously.

+     *
+     *  
To do something with the sound as soon as it loads
+     *  pass the name of a function as the second parameter.

+     *
+     *  
Only one file path is required. However, audio file formats
+     *  (i.e. mp3, ogg, wav and m4a/aac) are not supported by all
+     *  web browsers. If you want to ensure compatability, instead of a single
+     *  file path, you may include an Array of filepaths, and the browser will
+     *  choose a format that works.

+     *
+     *  @class p5.SoundFile
+     *  @constructor
+     *  @param {String|Array} path   path to a sound file (String). Optionally,
+     *                               you may include multiple file formats in
+     *                               an array. Alternately, accepts an object
+     *                               from the HTML5 File API, or a p5.File.
+     *  @param {Function} [successCallback]   Name of a function to call once file loads
+     *  @param {Function} [errorCallback]   Name of a function to call if file fails to
+     *                                      load. This function will receive an error or
+     *                                     XMLHttpRequest object with information
+     *                                     about what went wrong.
+     *  @param {Function} [whileLoadingCallback]   Name of a function to call while file
+     *                                             is loading. That function will
+     *                                             receive progress of the request to
+     *                                             load the sound file
+     *                                             (between 0 and 1) as its first
+     *                                             parameter. This progress
+     *                                             does not account for the additional
+     *                                             time needed to decode the audio data.
+     *
+     *  @example
+     *  

+     *
+     *  function preload() {
+     *    soundFormats('mp3', 'ogg');
+     *    mySound = loadSound('assets/doorbell.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    mySound.setVolume(0.1);
+     *    mySound.play();
+     *  }
+     *
+     * 

+     */
+    p5.SoundFile = function (paths, onload, onerror, whileLoading) {
+      if (typeof paths !== 'undefined') {
+        if (typeof paths === 'string' || typeof paths[0] === 'string') {
+          var path = p5.prototype._checkFileFormats(paths);
+          this.url = path;
+        } else if (typeof paths === 'object') {
+          if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
+            // The File API isn't supported in this browser
+            throw 'Unable to load file because the File API is not supported';
+          }
+        }
+        // if type is a p5.File...get the actual file
+        if (paths.file) {
+          paths = paths.file;
+        }
+        this.file = paths;
+      }
+      // private _onended callback, set by the method: onended(callback)
+      this._onended = function () {
+      };
+      this._looping = false;
+      this._playing = false;
+      this._paused = false;
+      this._pauseTime = 0;
+      // cues for scheduling events with addCue() removeCue()
+      this._cues = [];
+      //  position of the most recently played sample
+      this._lastPos = 0;
+      this._counterNode = null;
+      this._scopeNode = null;
+      // array of sources so that they can all be stopped!
+      this.bufferSourceNodes = [];
+      // current source
+      this.bufferSourceNode = null;
+      this.buffer = null;
+      this.playbackRate = 1;
+      this.input = p5sound.audiocontext.createGain();
+      this.output = p5sound.audiocontext.createGain();
+      this.reversed = false;
+      // start and end of playback / loop
+      this.startTime = 0;
+      this.endTime = null;
+      this.pauseTime = 0;
+      // "restart" would stop playback before retriggering
+      this.mode = 'sustain';
+      // time that playback was started, in millis
+      this.startMillis = null;
+      // stereo panning
+      this.panPosition = 0;
+      this.panner = new p5.Panner(this.output, p5sound.input, 2);
+      // it is possible to instantiate a soundfile with no path
+      if (this.url || this.file) {
+        this.load(onload, onerror);
+      }
+      // add this p5.SoundFile to the soundArray
+      p5sound.soundArray.push(this);
+      if (typeof whileLoading === 'function') {
+        this._whileLoading = whileLoading;
+      } else {
+        this._whileLoading = function () {
+        };
+      }
+    };
+    // register preload handling of loadSound
+    p5.prototype.registerPreloadMethod('loadSound', p5.prototype);
+    /**
+     *  loadSound() returns a new p5.SoundFile from a specified
+     *  path. If called during preload(), the p5.SoundFile will be ready
+     *  to play in time for setup() and draw(). If called outside of
+     *  preload, the p5.SoundFile will not be ready immediately, so
+     *  loadSound accepts a callback as the second parameter. Using a
+     *  
+     *  local server is recommended when loading external files.
+     *
+     *  @method loadSound
+     *  @param  {String|Array}   path     Path to the sound file, or an array with
+     *                                    paths to soundfiles in multiple formats
+     *                                    i.e. ['sound.ogg', 'sound.mp3'].
+     *                                    Alternately, accepts an object: either
+     *                                    from the HTML5 File API, or a p5.File.
+     *  @param {Function} [successCallback]   Name of a function to call once file loads
+     *  @param {Function} [errorCallback]   Name of a function to call if there is
+     *                                      an error loading the file.
+     *  @param {Function} [whileLoading] Name of a function to call while file is loading.
+     *                                 This function will receive the percentage loaded
+     *                                 so far, from 0.0 to 1.0.
+     *  @return {SoundFile}            Returns a p5.SoundFile
+     *  @example
+     *  

+     *  function preload() {
+     *   mySound = loadSound('assets/doorbell.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    mySound.setVolume(0.1);
+     *    mySound.play();
+     *  }
+     *  

+     */
+    p5.prototype.loadSound = function (path, callback, onerror, whileLoading) {
+      // if loading locally without a server
+      if (window.location.origin.indexOf('file://') > -1 && window.cordova === 'undefined') {
+        window.alert('This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS');
+      }
+      var self = this;
+      var s = new p5.SoundFile(path, function () {
+        if (typeof callback === 'function') {
+          callback.apply(self, arguments);
+        }
+        self._decrementPreload();
+      }, onerror, whileLoading);
+      return s;
+    };
+    /**
+     * This is a helper function that the p5.SoundFile calls to load
+     * itself. Accepts a callback (the name of another function)
+     * as an optional parameter.
+     *
+     * @private
+     * @param {Function} [successCallback]   Name of a function to call once file loads
+     * @param {Function} [errorCallback]   Name of a function to call if there is an error
+     */
+    p5.SoundFile.prototype.load = function (callback, errorCallback) {
+      var self = this;
+      var errorTrace = new Error().stack;
+      if (this.url !== undefined && this.url !== '') {
+        var request = new XMLHttpRequest();
+        request.addEventListener('progress', function (evt) {
+          self._updateProgress(evt);
+        }, false);
+        request.open('GET', this.url, true);
+        request.responseType = 'arraybuffer';
+        request.onload = function () {
+          if (request.status === 200) {
+            // on sucess loading file:
+            ac.decodeAudioData(request.response, // success decoding buffer:
+            function (buff) {
+              self.buffer = buff;
+              self.panner.inputChannels(buff.numberOfChannels);
+              if (callback) {
+                callback(self);
+              }
+            }, // error decoding buffer. "e" is undefined in Chrome 11/22/2015
+            function () {
+              var err = new CustomError('decodeAudioData', errorTrace, self.url);
+              var msg = 'AudioContext error at decodeAudioData for ' + self.url;
+              if (errorCallback) {
+                err.msg = msg;
+                errorCallback(err);
+              } else {
+                console.error(msg + '\n The error stack trace includes: \n' + err.stack);
+              }
+            });
+          } else {
+            var err = new CustomError('loadSound', errorTrace, self.url);
+            var msg = 'Unable to load ' + self.url + '. The request status was: ' + request.status + ' (' + request.statusText + ')';
+            if (errorCallback) {
+              err.message = msg;
+              errorCallback(err);
+            } else {
+              console.error(msg + '\n The error stack trace includes: \n' + err.stack);
+            }
+          }
+        };
+        // if there is another error, aside from 404...
+        request.onerror = function () {
+          var err = new CustomError('loadSound', errorTrace, self.url);
+          var msg = 'There was no response from the server at ' + self.url + '. Check the url and internet connectivity.';
+          if (errorCallback) {
+            err.message = msg;
+            errorCallback(err);
+          } else {
+            console.error(msg + '\n The error stack trace includes: \n' + err.stack);
+          }
+        };
+        request.send();
+      } else if (this.file !== undefined) {
+        var reader = new FileReader();
+        reader.onload = function () {
+          ac.decodeAudioData(reader.result, function (buff) {
+            self.buffer = buff;
+            self.panner.inputChannels(buff.numberOfChannels);
+            if (callback) {
+              callback(self);
+            }
+          });
+        };
+        reader.onerror = function (e) {
+          if (onerror) {
+            onerror(e);
+          }
+        };
+        reader.readAsArrayBuffer(this.file);
+      }
+    };
+    // TO DO: use this method to create a loading bar that shows progress during file upload/decode.
+    p5.SoundFile.prototype._updateProgress = function (evt) {
+      if (evt.lengthComputable) {
+        var percentComplete = evt.loaded / evt.total * 0.99;
+        this._whileLoading(percentComplete, evt);
+      } else {
+        // Unable to compute progress information since the total size is unknown
+        this._whileLoading('size unknown');
+      }
+    };
+    /**
+     *  Returns true if the sound file finished loading successfully.
+     *
+     *  @method  isLoaded
+     *  @return {Boolean}
+     */
+    p5.SoundFile.prototype.isLoaded = function () {
+      if (this.buffer) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+    /**
+     * Play the p5.SoundFile
+     *
+     * @method play
+     * @param {Number} [startTime]            (optional) schedule playback to start (in seconds from now).
+     * @param {Number} [rate]             (optional) playback rate
+     * @param {Number} [amp]              (optional) amplitude (volume)
+     *                                     of playback
+     * @param {Number} [cueStart]        (optional) cue start time in seconds
+     * @param {Number} [duration]          (optional) duration of playback in seconds
+     */
+    p5.SoundFile.prototype.play = function (startTime, rate, amp, _cueStart, duration) {
+      var self = this;
+      var now = p5sound.audiocontext.currentTime;
+      var cueStart, cueEnd;
+      var time = startTime || 0;
+      if (time < 0) {
+        time = 0;
+      }
+      time = time + now;
+      if (typeof rate !== 'undefined') {
+        this.rate(rate);
+      }
+      if (typeof amp !== 'undefined') {
+        this.setVolume(amp);
+      }
+      // TO DO: if already playing, create array of buffers for easy stop()
+      if (this.buffer) {
+        // reset the pause time (if it was paused)
+        this._pauseTime = 0;
+        // handle restart playmode
+        if (this.mode === 'restart' && this.buffer && this.bufferSourceNode) {
+          this.bufferSourceNode.stop(time);
+          this._counterNode.stop(time);
+        }
+        //dont create another instance if already playing
+        if (this.mode === 'untildone' && this.isPlaying()) {
+          return;
+        }
+        // make a new source and counter. They are automatically assigned playbackRate and buffer
+        this.bufferSourceNode = this._initSourceNode();
+        // garbage collect counterNode and create a new one
+        delete this._counterNode;
+        this._counterNode = this._initCounterNode();
+        if (_cueStart) {
+          if (_cueStart >= 0 && _cueStart < this.buffer.duration) {
+            // this.startTime = cueStart;
+            cueStart = _cueStart;
+          } else {
+            throw 'start time out of range';
+          }
+        } else {
+          cueStart = 0;
+        }
+        if (duration) {
+          // if duration is greater than buffer.duration, just play entire file anyway rather than throw an error
+          duration = duration <= this.buffer.duration - cueStart ? duration : this.buffer.duration;
+        }
+        // if it was paused, play at the pause position
+        if (this._paused) {
+          this.bufferSourceNode.start(time, this.pauseTime, duration);
+          this._counterNode.start(time, this.pauseTime, duration);
+        } else {
+          this.bufferSourceNode.start(time, cueStart, duration);
+          this._counterNode.start(time, cueStart, duration);
+        }
+        this._playing = true;
+        this._paused = false;
+        // add source to sources array, which is used in stopAll()
+        this.bufferSourceNodes.push(this.bufferSourceNode);
+        this.bufferSourceNode._arrayIndex = this.bufferSourceNodes.length - 1;
+        // delete this.bufferSourceNode from the sources array when it is done playing:
+        var clearOnEnd = function () {
+          this._playing = false;
+          this.removeEventListener('ended', clearOnEnd, false);
+          // call the onended callback
+          self._onended(self);
+          self.bufferSourceNodes.forEach(function (n, i) {
+            if (n._playing === false) {
+              self.bufferSourceNodes.splice(i);
+            }
+          });
+          if (self.bufferSourceNodes.length === 0) {
+            self._playing = false;
+          }
+        };
+        this.bufferSourceNode.onended = clearOnEnd;
+      } else {
+        throw 'not ready to play file, buffer has yet to load. Try preload()';
+      }
+      // if looping, will restart at original time
+      this.bufferSourceNode.loop = this._looping;
+      this._counterNode.loop = this._looping;
+      if (this._looping === true) {
+        cueEnd = duration ? duration : cueStart - 1e-15;
+        this.bufferSourceNode.loopStart = cueStart;
+        this.bufferSourceNode.loopEnd = cueEnd;
+        this._counterNode.loopStart = cueStart;
+        this._counterNode.loopEnd = cueEnd;
+      }
+    };
+    /**
+     *  p5.SoundFile has two play modes: restart and
+     *  sustain. Play Mode determines what happens to a
+     *  p5.SoundFile if it is triggered while in the middle of playback.
+     *  In sustain mode, playback will continue simultaneous to the
+     *  new playback. In restart mode, play() will stop playback
+     *  and start over. With untilDone, a sound will play only if it's
+     *  not already playing. Sustain is the default mode.
+     *
+     *  @method  playMode
+     *  @param  {String} str 'restart' or 'sustain' or 'untilDone'
+     *  @example
+     *  

+     *  function setup(){
+     *    mySound = loadSound('assets/Damscray_DancingTiger.mp3');
+     *  }
+     *  function mouseClicked() {
+     *    mySound.playMode('sustain');
+     *    mySound.play();
+     *  }
+     *  function keyPressed() {
+     *    mySound.playMode('restart');
+     *    mySound.play();
+     *  }
+     *
+     * 

+     */
+    p5.SoundFile.prototype.playMode = function (str) {
+      var s = str.toLowerCase();
+      // if restart, stop all other sounds from playing
+      if (s === 'restart' && this.buffer && this.bufferSourceNode) {
+        for (var i = 0; i < this.bufferSourceNodes.length - 1; i++) {
+          var now = p5sound.audiocontext.currentTime;
+          this.bufferSourceNodes[i].stop(now);
+        }
+      }
+      // set play mode to effect future playback
+      if (s === 'restart' || s === 'sustain' || s === 'untildone') {
+        this.mode = s;
+      } else {
+        throw 'Invalid play mode. Must be either "restart" or "sustain"';
+      }
+    };
+    /**
+     *  Pauses a file that is currently playing. If the file is not
+     *  playing, then nothing will happen.
+     *
+     *  After pausing, .play() will resume from the paused
+     *  position.
+     *  If p5.SoundFile had been set to loop before it was paused,
+     *  it will continue to loop after it is unpaused with .play().
+     *
+     *  @method pause
+     *  @param {Number} [startTime] (optional) schedule event to occur
+     *                               seconds from now
+     *  @example
+     *  

+     *  var soundFile;
+     *
+     *  function preload() {
+     *    soundFormats('ogg', 'mp3');
+     *    soundFile = loadSound('assets/Damscray_02.mp3');
+     *  }
+     *  function setup() {
+     *    background(0, 255, 0);
+     *    soundFile.setVolume(0.1);
+     *    soundFile.loop();
+     *  }
+     *  function keyTyped() {
+     *    if (key == 'p') {
+     *      soundFile.pause();
+     *      background(255, 0, 0);
+     *    }
+     *  }
+     *
+     *  function keyReleased() {
+     *    if (key == 'p') {
+     *      soundFile.play();
+     *      background(0, 255, 0);
+     *    }
+     *  }
+     *  
+     *  

+     */
+    p5.SoundFile.prototype.pause = function (startTime) {
+      var now = p5sound.audiocontext.currentTime;
+      var time = startTime || 0;
+      var pTime = time + now;
+      if (this.isPlaying() && this.buffer && this.bufferSourceNode) {
+        this.pauseTime = this.currentTime();
+        this.bufferSourceNode.stop(pTime);
+        this._counterNode.stop(pTime);
+        this._paused = true;
+        this._playing = false;
+        this._pauseTime = this.currentTime();
+      } else {
+        this._pauseTime = 0;
+      }
+    };
+    /**
+     * Loop the p5.SoundFile. Accepts optional parameters to set the
+     * playback rate, playback volume, loopStart, loopEnd.
+     *
+     * @method loop
+     * @param {Number} [startTime] (optional) schedule event to occur
+     *                             seconds from now
+     * @param {Number} [rate]        (optional) playback rate
+     * @param {Number} [amp]         (optional) playback volume
+     * @param {Number} [cueLoopStart] (optional) startTime in seconds
+     * @param {Number} [duration]  (optional) loop duration in seconds
+     */
+    p5.SoundFile.prototype.loop = function (startTime, rate, amp, loopStart, duration) {
+      this._looping = true;
+      this.play(startTime, rate, amp, loopStart, duration);
+    };
+    /**
+     * Set a p5.SoundFile's looping flag to true or false. If the sound
+     * is currently playing, this change will take effect when it
+     * reaches the end of the current playback.
+     *
+     * @method setLoop
+     * @param {Boolean} Boolean   set looping to true or false
+     */
+    p5.SoundFile.prototype.setLoop = function (bool) {
+      if (bool === true) {
+        this._looping = true;
+      } else if (bool === false) {
+        this._looping = false;
+      } else {
+        throw 'Error: setLoop accepts either true or false';
+      }
+      if (this.bufferSourceNode) {
+        this.bufferSourceNode.loop = this._looping;
+        this._counterNode.loop = this._looping;
+      }
+    };
+    /**
+     * Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.
+     *
+     * @method isLooping
+     * @return {Boolean}
+     */
+    p5.SoundFile.prototype.isLooping = function () {
+      if (!this.bufferSourceNode) {
+        return false;
+      }
+      if (this._looping === true && this.isPlaying() === true) {
+        return true;
+      }
+      return false;
+    };
+    /**
+     *  Returns true if a p5.SoundFile is playing, false if not (i.e.
+     *  paused or stopped).
+     *
+     *  @method isPlaying
+     *  @return {Boolean}
+     */
+    p5.SoundFile.prototype.isPlaying = function () {
+      return this._playing;
+    };
+    /**
+     *  Returns true if a p5.SoundFile is paused, false if not (i.e.
+     *  playing or stopped).
+     *
+     *  @method  isPaused
+     *  @return {Boolean}
+     */
+    p5.SoundFile.prototype.isPaused = function () {
+      return this._paused;
+    };
+    /**
+     * Stop soundfile playback.
+     *
+     * @method stop
+     * @param {Number} [startTime] (optional) schedule event to occur
+     *                             in seconds from now
+     */
+    p5.SoundFile.prototype.stop = function (timeFromNow) {
+      var time = timeFromNow || 0;
+      if (this.mode === 'sustain' || this.mode === 'untildone') {
+        this.stopAll(time);
+        this._playing = false;
+        this.pauseTime = 0;
+        this._paused = false;
+      } else if (this.buffer && this.bufferSourceNode) {
+        var now = p5sound.audiocontext.currentTime;
+        var t = time || 0;
+        this.pauseTime = 0;
+        this.bufferSourceNode.stop(now + t);
+        this._counterNode.stop(now + t);
+        this._playing = false;
+        this._paused = false;
+      }
+    };
+    /**
+     *  Stop playback on all of this soundfile's sources.
+     *  @private
+     */
+    p5.SoundFile.prototype.stopAll = function (_time) {
+      var now = p5sound.audiocontext.currentTime;
+      var time = _time || 0;
+      if (this.buffer && this.bufferSourceNode) {
+        for (var i = 0; i < this.bufferSourceNodes.length; i++) {
+          if (typeof this.bufferSourceNodes[i] !== undefined) {
+            try {
+              this.bufferSourceNodes[i].onended = function () {
+              };
+              this.bufferSourceNodes[i].stop(now + time);
+            } catch (e) {
+            }
+          }
+        }
+        this._counterNode.stop(now + time);
+        this._onended(this);
+      }
+    };
+    /**
+     *  Multiply the output volume (amplitude) of a sound file
+     *  between 0.0 (silence) and 1.0 (full volume).
+     *  1.0 is the maximum amplitude of a digital sound, so multiplying
+     *  by greater than 1.0 may cause digital distortion. To
+     *  fade, provide a rampTime parameter. For more
+     *  complex fades, see the Env class.
+     *
+     *  Alternately, you can pass in a signal source such as an
+     *  oscillator to modulate the amplitude with an audio signal.
+     *
+     *  @method  setVolume
+     *  @param {Number|Object} volume  Volume (amplitude) between 0.0
+     *                                     and 1.0 or modulating signal/oscillator
+     *  @param {Number} [rampTime]  Fade for t seconds
+     *  @param {Number} [timeFromNow]  Schedule this event to happen at
+     *                                 t seconds in the future
+     */
+    p5.SoundFile.prototype.setVolume = function (vol, _rampTime, _tFromNow) {
+      if (typeof vol === 'number') {
+        var rampTime = _rampTime || 0;
+        var tFromNow = _tFromNow || 0;
+        var now = p5sound.audiocontext.currentTime;
+        var currentVol = this.output.gain.value;
+        this.output.gain.cancelScheduledValues(now + tFromNow);
+        this.output.gain.linearRampToValueAtTime(currentVol, now + tFromNow);
+        this.output.gain.linearRampToValueAtTime(vol, now + tFromNow + rampTime);
+      } else if (vol) {
+        vol.connect(this.output.gain);
+      } else {
+        // return the Gain Node
+        return this.output.gain;
+      }
+    };
+    // same as setVolume, to match Processing Sound
+    p5.SoundFile.prototype.amp = p5.SoundFile.prototype.setVolume;
+    // these are the same thing
+    p5.SoundFile.prototype.fade = p5.SoundFile.prototype.setVolume;
+    p5.SoundFile.prototype.getVolume = function () {
+      return this.output.gain.value;
+    };
+    /**
+     * Set the stereo panning of a p5.sound object to
+     * a floating point number between -1.0 (left) and 1.0 (right).
+     * Default is 0.0 (center).
+     *
+     * @method pan
+     * @param {Number} [panValue]     Set the stereo panner
+     * @param {Number} [timeFromNow]  schedule this event to happen
+     *                                 seconds from now
+     * @example
+     * 

+     *
+     *  var ball = {};
+     *  var soundFile;
+     *
+     *  function setup() {
+     *    soundFormats('ogg', 'mp3');
+     *    soundFile = loadSound('assets/beatbox.mp3');
+     *  }
+     *
+     *  function draw() {
+     *    background(0);
+     *    ball.x = constrain(mouseX, 0, width);
+     *    ellipse(ball.x, height/2, 20, 20)
+     *  }
+     *
+     *  function mousePressed(){
+     *    // map the ball's x location to a panning degree
+     *    // between -1.0 (left) and 1.0 (right)
+     *    var panning = map(ball.x, 0., width,-1.0, 1.0);
+     *    soundFile.pan(panning);
+     *    soundFile.play();
+     *  }
+     *  

+     */
+    p5.SoundFile.prototype.pan = function (pval, tFromNow) {
+      this.panPosition = pval;
+      this.panner.pan(pval, tFromNow);
+    };
+    /**
+     * Returns the current stereo pan position (-1.0 to 1.0)
+     *
+     * @method getPan
+     * @return {Number} Returns the stereo pan setting of the Oscillator
+     *                          as a number between -1.0 (left) and 1.0 (right).
+     *                          0.0 is center and default.
+     */
+    p5.SoundFile.prototype.getPan = function () {
+      return this.panPosition;
+    };
+    /**
+     *  Set the playback rate of a sound file. Will change the speed and the pitch.
+     *  Values less than zero will reverse the audio buffer.
+     *
+     *  @method rate
+     *  @param {Number} [playbackRate]     Set the playback rate. 1.0 is normal,
+     *                                     .5 is half-speed, 2.0 is twice as fast.
+     *                                     Values less than zero play backwards.
+     *  @example
+     *  

+     *  var song;
+     *
+     *  function preload() {
+     *    song = loadSound('assets/Damscray_DancingTiger.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    song.loop();
+     *  }
+     *
+     *  function draw() {
+     *    background(200);
+     *
+     *    // Set the rate to a range between 0.1 and 4
+     *    // Changing the rate also alters the pitch
+     *    var speed = map(mouseY, 0.1, height, 0, 2);
+     *    speed = constrain(speed, 0.01, 4);
+     *    song.rate(speed);
+     *
+     *    // Draw a circle to show what is going on
+     *    stroke(0);
+     *    fill(51, 100);
+     *    ellipse(mouseX, 100, 48, 48);
+     *  }
+     *
+     * 
+     * 

+     *
+     */
+    p5.SoundFile.prototype.rate = function (playbackRate) {
+      var reverse = false;
+      if (typeof playbackRate === 'undefined') {
+        return this.playbackRate;
+      }
+      this.playbackRate = playbackRate;
+      if (playbackRate === 0) {
+        playbackRate = 1e-13;
+      } else if (playbackRate < 0 && !this.reversed) {
+        playbackRate = Math.abs(playbackRate);
+        reverse = true;
+      } else if (playbackRate > 0 && this.reversed) {
+        reverse = true;
+      }
+      if (this.bufferSourceNode) {
+        var now = p5sound.audiocontext.currentTime;
+        this.bufferSourceNode.playbackRate.cancelScheduledValues(now);
+        this.bufferSourceNode.playbackRate.linearRampToValueAtTime(Math.abs(playbackRate), now);
+        this._counterNode.playbackRate.cancelScheduledValues(now);
+        this._counterNode.playbackRate.linearRampToValueAtTime(Math.abs(playbackRate), now);
+      }
+      if (reverse) {
+        this.reverseBuffer();
+      }
+      return this.playbackRate;
+    };
+    // TO DO: document this
+    p5.SoundFile.prototype.setPitch = function (num) {
+      var newPlaybackRate = midiToFreq(num) / midiToFreq(60);
+      this.rate(newPlaybackRate);
+    };
+    p5.SoundFile.prototype.getPlaybackRate = function () {
+      return this.playbackRate;
+    };
+    /**
+     * Returns the duration of a sound file in seconds.
+     *
+     * @method duration
+     * @return {Number} The duration of the soundFile in seconds.
+     */
+    p5.SoundFile.prototype.duration = function () {
+      // Return Duration
+      if (this.buffer) {
+        return this.buffer.duration;
+      } else {
+        return 0;
+      }
+    };
+    /**
+     * Return the current position of the p5.SoundFile playhead, in seconds.
+     * Time is relative to the normal buffer direction, so if `reverseBuffer`
+     * has been called, currentTime will count backwards.
+     *
+     * @method currentTime
+     * @return {Number}   currentTime of the soundFile in seconds.
+     */
+    p5.SoundFile.prototype.currentTime = function () {
+      return this.reversed ? Math.abs(this._lastPos - this.buffer.length) / ac.sampleRate : this._lastPos / ac.sampleRate;
+    };
+    /**
+     * Move the playhead of the song to a position, in seconds. Start timing
+     * and playback duration. If none are given, will reset the file to play
+     * entire duration from start to finish.
+     *
+     * @method jump
+     * @param {Number} cueTime    cueTime of the soundFile in seconds.
+     * @param {Number} duration    duration in seconds.
+     */
+    p5.SoundFile.prototype.jump = function (cueTime, duration) {
+      if (cueTime < 0 || cueTime > this.buffer.duration) {
+        throw 'jump time out of range';
+      }
+      if (duration > this.buffer.duration - cueTime) {
+        throw 'end time out of range';
+      }
+      var cTime = cueTime || 0;
+      var dur = duration || undefined;
+      if (this.isPlaying()) {
+        this.stop(0);
+      }
+      this.play(0, this.playbackRate, this.output.gain.value, cTime, dur);
+    };
+    /**
+    * Return the number of channels in a sound file.
+    * For example, Mono = 1, Stereo = 2.
+    *
+    * @method channels
+    * @return {Number} [channels]
+    */
+    p5.SoundFile.prototype.channels = function () {
+      return this.buffer.numberOfChannels;
+    };
+    /**
+    * Return the sample rate of the sound file.
+    *
+    * @method sampleRate
+    * @return {Number} [sampleRate]
+    */
+    p5.SoundFile.prototype.sampleRate = function () {
+      return this.buffer.sampleRate;
+    };
+    /**
+    * Return the number of samples in a sound file.
+    * Equal to sampleRate * duration.
+    *
+    * @method frames
+    * @return {Number} [sampleCount]
+    */
+    p5.SoundFile.prototype.frames = function () {
+      return this.buffer.length;
+    };
+    /**
+     * Returns an array of amplitude peaks in a p5.SoundFile that can be
+     * used to draw a static waveform. Scans through the p5.SoundFile's
+     * audio buffer to find the greatest amplitudes. Accepts one
+     * parameter, 'length', which determines size of the array.
+     * Larger arrays result in more precise waveform visualizations.
+     *
+     * Inspired by Wavesurfer.js.
+     *
+     * @method  getPeaks
+     * @params {Number} [length] length is the size of the returned array.
+     *                          Larger length results in more precision.
+     *                          Defaults to 5*width of the browser window.
+     * @returns {Float32Array} Array of peaks.
+     */
+    p5.SoundFile.prototype.getPeaks = function (length) {
+      if (this.buffer) {
+        // set length to window's width if no length is provided
+        if (!length) {
+          length = window.width * 5;
+        }
+        if (this.buffer) {
+          var buffer = this.buffer;
+          var sampleSize = buffer.length / length;
+          var sampleStep = ~~(sampleSize / 10) || 1;
+          var channels = buffer.numberOfChannels;
+          var peaks = new Float32Array(Math.round(length));
+          for (var c = 0; c < channels; c++) {
+            var chan = buffer.getChannelData(c);
+            for (var i = 0; i < length; i++) {
+              var start = ~~(i * sampleSize);
+              var end = ~~(start + sampleSize);
+              var max = 0;
+              for (var j = start; j < end; j += sampleStep) {
+                var value = chan[j];
+                if (value > max) {
+                  max = value;
+                } else if (-value > max) {
+                  max = value;
+                }
+              }
+              if (c === 0 || Math.abs(max) > peaks[i]) {
+                peaks[i] = max;
+              }
+            }
+          }
+          return peaks;
+        }
+      } else {
+        throw 'Cannot load peaks yet, buffer is not loaded';
+      }
+    };
+    /**
+     *  Reverses the p5.SoundFile's buffer source.
+     *  Playback must be handled separately (see example).
+     *
+     *  @method  reverseBuffer
+     *  @example
+     *  

+     *  var drum;
+     *
+     *  function preload() {
+     *    drum = loadSound('assets/drum.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    drum.reverseBuffer();
+     *    drum.play();
+     *  }
+     *
+     * 
+     * 

+     */
+    p5.SoundFile.prototype.reverseBuffer = function () {
+      if (this.buffer) {
+        var currentPos = this._lastPos / ac.sampleRate;
+        var curVol = this.getVolume();
+        this.setVolume(0, 0.001);
+        const numChannels = this.buffer.numberOfChannels;
+        for (var i = 0; i < numChannels; i++) {
+          this.buffer.getChannelData(i).reverse();
+        }
+        // set reversed flag
+        this.reversed = !this.reversed;
+        if (currentPos) {
+          this.jump(this.duration() - currentPos);
+        }
+        this.setVolume(curVol, 0.001);
+      } else {
+        throw 'SoundFile is not done loading';
+      }
+    };
+    /**
+     *  Schedule an event to be called when the soundfile
+     *  reaches the end of a buffer. If the soundfile is
+     *  playing through once, this will be called when it
+     *  ends. If it is looping, it will be called when
+     *  stop is called.
+     *
+     *  @method  onended
+     *  @param  {Function} callback function to call when the
+     *                              soundfile has ended.
+     */
+    p5.SoundFile.prototype.onended = function (callback) {
+      this._onended = callback;
+      return this;
+    };
+    p5.SoundFile.prototype.add = function () {
+    };
+    p5.SoundFile.prototype.dispose = function () {
+      var now = p5sound.audiocontext.currentTime;
+      // remove reference to soundfile
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      this.stop(now);
+      if (this.buffer && this.bufferSourceNode) {
+        for (var i = 0; i < this.bufferSourceNodes.length - 1; i++) {
+          if (this.bufferSourceNodes[i] !== null) {
+            this.bufferSourceNodes[i].disconnect();
+            try {
+              this.bufferSourceNodes[i].stop(now);
+            } catch (e) {
+              console.warning('no buffer source node to dispose');
+            }
+            this.bufferSourceNodes[i] = null;
+          }
+        }
+        if (this.isPlaying()) {
+          try {
+            this._counterNode.stop(now);
+          } catch (e) {
+            console.log(e);
+          }
+          this._counterNode = null;
+        }
+      }
+      if (this.output) {
+        this.output.disconnect();
+        this.output = null;
+      }
+      if (this.panner) {
+        this.panner.disconnect();
+        this.panner = null;
+      }
+    };
+    /**
+     * Connects the output of a p5sound object to input of another
+     * p5.sound object. For example, you may connect a p5.SoundFile to an
+     * FFT or an Effect. If no parameter is given, it will connect to
+     * the master output. Most p5sound objects connect to the master
+     * output when they are created.
+     *
+     * @method connect
+     * @param {Object} [object] Audio object that accepts an input
+     */
+    p5.SoundFile.prototype.connect = function (unit) {
+      if (!unit) {
+        this.panner.connect(p5sound.input);
+      } else {
+        if (unit.hasOwnProperty('input')) {
+          this.panner.connect(unit.input);
+        } else {
+          this.panner.connect(unit);
+        }
+      }
+    };
+    /**
+     * Disconnects the output of this p5sound object.
+     *
+     * @method disconnect
+     */
+    p5.SoundFile.prototype.disconnect = function () {
+      this.panner.disconnect();
+    };
+    /**
+     */
+    p5.SoundFile.prototype.getLevel = function () {
+      console.warn('p5.SoundFile.getLevel has been removed from the library. Use p5.Amplitude instead');
+    };
+    /**
+     *  Reset the source for this SoundFile to a
+     *  new path (URL).
+     *
+     *  @method  setPath
+     *  @param {String}   path     path to audio file
+     *  @param {Function} callback Callback
+     */
+    p5.SoundFile.prototype.setPath = function (p, callback) {
+      var path = p5.prototype._checkFileFormats(p);
+      this.url = path;
+      this.load(callback);
+    };
+    /**
+     *  Replace the current Audio Buffer with a new Buffer.
+     *
+     *  @method setBuffer
+     *  @param {Array} buf Array of Float32 Array(s). 2 Float32 Arrays
+     *                     will create a stereo source. 1 will create
+     *                     a mono source.
+     */
+    p5.SoundFile.prototype.setBuffer = function (buf) {
+      var numChannels = buf.length;
+      var size = buf[0].length;
+      var newBuffer = ac.createBuffer(numChannels, size, ac.sampleRate);
+      if (!(buf[0] instanceof Float32Array)) {
+        buf[0] = new Float32Array(buf[0]);
+      }
+      for (var channelNum = 0; channelNum < numChannels; channelNum++) {
+        var channel = newBuffer.getChannelData(channelNum);
+        channel.set(buf[channelNum]);
+      }
+      this.buffer = newBuffer;
+      // set numbers of channels on input to the panner
+      this.panner.inputChannels(numChannels);
+    };
+    //////////////////////////////////////////////////
+    // script processor node with an empty buffer to help
+    // keep a sample-accurate position in playback buffer.
+    // Inspired by Chinmay Pendharkar's technique for Sonoport --> http://bit.ly/1HwdCsV
+    // Copyright [2015] [Sonoport (Asia) Pte. Ltd.],
+    // Licensed under the Apache License http://apache.org/licenses/LICENSE-2.0
+    ////////////////////////////////////////////////////////////////////////////////////
+    var _createCounterBuffer = function (buffer) {
+      const len = buffer.length;
+      const audioBuf = ac.createBuffer(1, buffer.length, ac.sampleRate);
+      const arrayBuffer = audioBuf.getChannelData(0);
+      for (var index = 0; index < len; index++) {
+        arrayBuffer[index] = index;
+      }
+      return audioBuf;
+    };
+    // initialize counterNode, set its initial buffer and playbackRate
+    p5.SoundFile.prototype._initCounterNode = function () {
+      var self = this;
+      var now = ac.currentTime;
+      var cNode = ac.createBufferSource();
+      // dispose of scope node if it already exists
+      if (self._scopeNode) {
+        self._scopeNode.disconnect();
+        delete self._scopeNode.onaudioprocess;
+        delete self._scopeNode;
+      }
+      self._scopeNode = ac.createScriptProcessor(256, 1, 1);
+      // create counter buffer of the same length as self.buffer
+      cNode.buffer = _createCounterBuffer(self.buffer);
+      cNode.playbackRate.setValueAtTime(self.playbackRate, now);
+      cNode.connect(self._scopeNode);
+      self._scopeNode.connect(p5.soundOut._silentNode);
+      self._scopeNode.onaudioprocess = function (processEvent) {
+        var inputBuffer = processEvent.inputBuffer.getChannelData(0);
+        self._lastPos = inputBuffer[inputBuffer.length - 1] || 0;
+        // do any callbacks that have been scheduled
+        self._onTimeUpdate(self._lastPos);
+      };
+      return cNode;
+    };
+    // initialize sourceNode, set its initial buffer and playbackRate
+    p5.SoundFile.prototype._initSourceNode = function () {
+      var bufferSourceNode = ac.createBufferSource();
+      bufferSourceNode.buffer = this.buffer;
+      bufferSourceNode.playbackRate.value = this.playbackRate;
+      bufferSourceNode.connect(this.output);
+      return bufferSourceNode;
+    };
+    /**
+     *  processPeaks returns an array of timestamps where it thinks there is a beat.
+     *
+     *  This is an asynchronous function that processes the soundfile in an offline audio context,
+     *  and sends the results to your callback function.
+     *
+     *  The process involves running the soundfile through a lowpass filter, and finding all of the
+     *  peaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,
+     *  it decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.
+     *
+     *  @method  processPeaks
+     *  @param  {Function} callback       a function to call once this data is returned
+     *  @param  {Number}   [initThreshold] initial threshold defaults to 0.9
+     *  @param  {Number}   [minThreshold]   minimum threshold defaults to 0.22
+     *  @param  {Number}   [minPeaks]       minimum number of peaks defaults to 200
+     *  @return {Array}                  Array of timestamped peaks
+     */
+    p5.SoundFile.prototype.processPeaks = function (callback, _initThreshold, _minThreshold, _minPeaks) {
+      var bufLen = this.buffer.length;
+      var sampleRate = this.buffer.sampleRate;
+      var buffer = this.buffer;
+      var allPeaks = [];
+      var initialThreshold = _initThreshold || 0.9, threshold = initialThreshold, minThreshold = _minThreshold || 0.22, minPeaks = _minPeaks || 200;
+      // Create offline context
+      var offlineContext = new window.OfflineAudioContext(1, bufLen, sampleRate);
+      // create buffer source
+      var source = offlineContext.createBufferSource();
+      source.buffer = buffer;
+      // Create filter. TO DO: allow custom setting of filter
+      var filter = offlineContext.createBiquadFilter();
+      filter.type = 'lowpass';
+      source.connect(filter);
+      filter.connect(offlineContext.destination);
+      // start playing at time:0
+      source.start(0);
+      offlineContext.startRendering();
+      // Render the song
+      // act on the result
+      offlineContext.oncomplete = function (e) {
+        var filteredBuffer = e.renderedBuffer;
+        var bufferData = filteredBuffer.getChannelData(0);
+        // step 1:
+        // create Peak instances, add them to array, with strength and sampleIndex
+        do {
+          allPeaks = getPeaksAtThreshold(bufferData, threshold);
+          threshold -= 0.005;
+        } while (Object.keys(allPeaks).length < minPeaks && threshold >= minThreshold);
+        // step 2:
+        // find intervals for each peak in the sampleIndex, add tempos array
+        var intervalCounts = countIntervalsBetweenNearbyPeaks(allPeaks);
+        // step 3: find top tempos
+        var groups = groupNeighborsByTempo(intervalCounts, filteredBuffer.sampleRate);
+        // sort top intervals
+        var topTempos = groups.sort(function (intA, intB) {
+          return intB.count - intA.count;
+        }).splice(0, 5);
+        // set this SoundFile's tempo to the top tempo ??
+        this.tempo = topTempos[0].tempo;
+        // step 4:
+        // new array of peaks at top tempo within a bpmVariance
+        var bpmVariance = 5;
+        var tempoPeaks = getPeaksAtTopTempo(allPeaks, topTempos[0].tempo, filteredBuffer.sampleRate, bpmVariance);
+        callback(tempoPeaks);
+      };
+    };
+    // process peaks
+    var Peak = function (amp, i) {
+      this.sampleIndex = i;
+      this.amplitude = amp;
+      this.tempos = [];
+      this.intervals = [];
+    };
+    // 1. for processPeaks() Function to identify peaks above a threshold
+    // returns an array of peak indexes as frames (samples) of the original soundfile
+    function getPeaksAtThreshold(data, threshold) {
+      var peaksObj = {};
+      var length = data.length;
+      for (var i = 0; i < length; i++) {
+        if (data[i] > threshold) {
+          var amp = data[i];
+          var peak = new Peak(amp, i);
+          peaksObj[i] = peak;
+          // Skip forward ~ 1/8s to get past this peak.
+          i += 6000;
+        }
+        i++;
+      }
+      return peaksObj;
+    }
+    // 2. for processPeaks()
+    function countIntervalsBetweenNearbyPeaks(peaksObj) {
+      var intervalCounts = [];
+      var peaksArray = Object.keys(peaksObj).sort();
+      for (var index = 0; index < peaksArray.length; index++) {
+        // find intervals in comparison to nearby peaks
+        for (var i = 0; i < 10; i++) {
+          var startPeak = peaksObj[peaksArray[index]];
+          var endPeak = peaksObj[peaksArray[index + i]];
+          if (startPeak && endPeak) {
+            var startPos = startPeak.sampleIndex;
+            var endPos = endPeak.sampleIndex;
+            var interval = endPos - startPos;
+            // add a sample interval to the startPeak in the allPeaks array
+            if (interval > 0) {
+              startPeak.intervals.push(interval);
+            }
+            // tally the intervals and return interval counts
+            var foundInterval = intervalCounts.some(function (intervalCount) {
+              if (intervalCount.interval === interval) {
+                intervalCount.count++;
+                return intervalCount;
+              }
+            });
+            // store with JSON like formatting
+            if (!foundInterval) {
+              intervalCounts.push({
+                interval: interval,
+                count: 1
+              });
+            }
+          }
+        }
+      }
+      return intervalCounts;
+    }
+    // 3. for processPeaks --> find tempo
+    function groupNeighborsByTempo(intervalCounts, sampleRate) {
+      var tempoCounts = [];
+      intervalCounts.forEach(function (intervalCount) {
+        try {
+          // Convert an interval to tempo
+          var theoreticalTempo = Math.abs(60 / (intervalCount.interval / sampleRate));
+          theoreticalTempo = mapTempo(theoreticalTempo);
+          var foundTempo = tempoCounts.some(function (tempoCount) {
+            if (tempoCount.tempo === theoreticalTempo)
+              return tempoCount.count += intervalCount.count;
+          });
+          if (!foundTempo) {
+            if (isNaN(theoreticalTempo)) {
+              return;
+            }
+            tempoCounts.push({
+              tempo: Math.round(theoreticalTempo),
+              count: intervalCount.count
+            });
+          }
+        } catch (e) {
+          throw e;
+        }
+      });
+      return tempoCounts;
+    }
+    // 4. for processPeaks - get peaks at top tempo
+    function getPeaksAtTopTempo(peaksObj, tempo, sampleRate, bpmVariance) {
+      var peaksAtTopTempo = [];
+      var peaksArray = Object.keys(peaksObj).sort();
+      // TO DO: filter out peaks that have the tempo and return
+      for (var i = 0; i < peaksArray.length; i++) {
+        var key = peaksArray[i];
+        var peak = peaksObj[key];
+        for (var j = 0; j < peak.intervals.length; j++) {
+          var intervalBPM = Math.round(Math.abs(60 / (peak.intervals[j] / sampleRate)));
+          intervalBPM = mapTempo(intervalBPM);
+          if (Math.abs(intervalBPM - tempo) < bpmVariance) {
+            // convert sampleIndex to seconds
+            peaksAtTopTempo.push(peak.sampleIndex / sampleRate);
+          }
+        }
+      }
+      // filter out peaks that are very close to each other
+      peaksAtTopTempo = peaksAtTopTempo.filter(function (peakTime, index, arr) {
+        var dif = arr[index + 1] - peakTime;
+        if (dif > 0.01) {
+          return true;
+        }
+      });
+      return peaksAtTopTempo;
+    }
+    // helper function for processPeaks
+    function mapTempo(theoreticalTempo) {
+      // these scenarios create infinite while loop
+      if (!isFinite(theoreticalTempo) || theoreticalTempo === 0) {
+        return;
+      }
+      // Adjust the tempo to fit within the 90-180 BPM range
+      while (theoreticalTempo < 90)
+        theoreticalTempo *= 2;
+      while (theoreticalTempo > 180 && theoreticalTempo > 90)
+        theoreticalTempo /= 2;
+      return theoreticalTempo;
+    }
+    /*** SCHEDULE EVENTS ***/
+    // Cue inspired by JavaScript setTimeout, and the
+    // Tone.js Transport Timeline Event, MIT License Yotam Mann 2015 tonejs.org
+    var Cue = function (callback, time, id, val) {
+      this.callback = callback;
+      this.time = time;
+      this.id = id;
+      this.val = val;
+    };
+    /**
+     *  Schedule events to trigger every time a MediaElement
+     *  (audio/video) reaches a playback cue point.
+     *
+     *  Accepts a callback function, a time (in seconds) at which to trigger
+     *  the callback, and an optional parameter for the callback.
+     *
+     *  Time will be passed as the first parameter to the callback function,
+     *  and param will be the second parameter.
+     *
+     *
+     *  @method  addCue
+     *  @param {Number}   time     Time in seconds, relative to this media
+     *                             element's playback. For example, to trigger
+     *                             an event every time playback reaches two
+     *                             seconds, pass in the number 2. This will be
+     *                             passed as the first parameter to
+     *                             the callback function.
+     *  @param {Function} callback Name of a function that will be
+     *                             called at the given time. The callback will
+     *                             receive time and (optionally) param as its
+     *                             two parameters.
+     *  @param {Object} [value]    An object to be passed as the
+     *                             second parameter to the
+     *                             callback function.
+     *  @return {Number} id ID of this cue,
+     *                      useful for removeCue(id)
+     *  @example
+     *  

+     *  function setup() {
+     *    background(0);
+     *    noStroke();
+     *    fill(255);
+     *    textAlign(CENTER);
+     *    text('click to play', width/2, height/2);
+     *
+     *    mySound = loadSound('assets/beat.mp3');
+     *
+     *    // schedule calls to changeText
+     *    mySound.addCue(0.50, changeText, "hello" );
+     *    mySound.addCue(1.00, changeText, "p5" );
+     *    mySound.addCue(1.50, changeText, "what" );
+     *    mySound.addCue(2.00, changeText, "do" );
+     *    mySound.addCue(2.50, changeText, "you" );
+     *    mySound.addCue(3.00, changeText, "want" );
+     *    mySound.addCue(4.00, changeText, "to" );
+     *    mySound.addCue(5.00, changeText, "make" );
+     *    mySound.addCue(6.00, changeText, "?" );
+     *  }
+     *
+     *  function changeText(val) {
+     *    background(0);
+     *    text(val, width/2, height/2);
+     *  }
+     *
+     *  function mouseClicked() {
+     *    if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+     *      if (mySound.isPlaying() ) {
+     *        mySound.stop();
+     *      } else {
+     *        mySound.play();
+     *      }
+     *    }
+     *  }
+     *  

+     */
+    p5.SoundFile.prototype.addCue = function (time, callback, val) {
+      var id = this._cueIDCounter++;
+      var cue = new Cue(callback, time, id, val);
+      this._cues.push(cue);
+      // if (!this.elt.ontimeupdate) {
+      //   this.elt.ontimeupdate = this._onTimeUpdate.bind(this);
+      // }
+      return id;
+    };
+    /**
+     *  Remove a callback based on its ID. The ID is returned by the
+     *  addCue method.
+     *
+     *  @method removeCue
+     *  @param  {Number} id ID of the cue, as returned by addCue
+     */
+    p5.SoundFile.prototype.removeCue = function (id) {
+      var cueLength = this._cues.length;
+      for (var i = 0; i < cueLength; i++) {
+        var cue = this._cues[i];
+        if (cue.id === id) {
+          this.cues.splice(i, 1);
+        }
+      }
+      if (this._cues.length === 0) {
+      }
+    };
+    /**
+     *  Remove all of the callbacks that had originally been scheduled
+     *  via the addCue method.
+     *
+     *  @method  clearCues
+     */
+    p5.SoundFile.prototype.clearCues = function () {
+      this._cues = [];
+    };
+    // private method that checks for cues to be fired if events
+    // have been scheduled using addCue(callback, time).
+    p5.SoundFile.prototype._onTimeUpdate = function (position) {
+      var playbackTime = position / this.buffer.sampleRate;
+      var cueLength = this._cues.length;
+      for (var i = 0; i < cueLength; i++) {
+        var cue = this._cues[i];
+        var callbackTime = cue.time;
+        var val = cue.val;
+        if (this._prevTime < callbackTime && callbackTime <= playbackTime) {
+          // pass the scheduled callbackTime as parameter to the callback
+          cue.callback(val);
+        }
+      }
+      this._prevTime = playbackTime;
+    };
+  }(sndcore, errorHandler, master, helpers);
+  var amplitude;
+  'use strict';
+  amplitude = function () {
+    var p5sound = master;
+    /**
+     *  Amplitude measures volume between 0.0 and 1.0.
+     *  Listens to all p5sound by default, or use setInput()
+     *  to listen to a specific sound source. Accepts an optional
+     *  smoothing value, which defaults to 0.
+     *
+     *  @class p5.Amplitude
+     *  @constructor
+     *  @param {Number} [smoothing] between 0.0 and .999 to smooth
+     *                             amplitude readings (defaults to 0)
+     *  @example
+     *  

+     *  var sound, amplitude, cnv;
+     *
+     *  function preload(){
+     *    sound = loadSound('assets/beat.mp3');
+     *  }
+     *  function setup() {
+     *    cnv = createCanvas(100,100);
+     *    amplitude = new p5.Amplitude();
+     *
+     *    // start / stop the sound when canvas is clicked
+     *    cnv.mouseClicked(function() {
+     *      if (sound.isPlaying() ){
+     *        sound.stop();
+     *      } else {
+     *        sound.play();
+     *      }
+     *    });
+     *  }
+     *  function draw() {
+     *    background(0);
+     *    fill(255);
+     *    var level = amplitude.getLevel();
+     *    var size = map(level, 0, 1, 0, 200);
+     *    ellipse(width/2, height/2, size, size);
+     *  }
+     *
+     *  

+     */
+    p5.Amplitude = function (smoothing) {
+      // Set to 2048 for now. In future iterations, this should be inherited or parsed from p5sound's default
+      this.bufferSize = 2048;
+      // set audio context
+      this.audiocontext = p5sound.audiocontext;
+      this.processor = this.audiocontext.createScriptProcessor(this.bufferSize, 2, 1);
+      // for connections
+      this.input = this.processor;
+      this.output = this.audiocontext.createGain();
+      // smoothing defaults to 0
+      this.smoothing = smoothing || 0;
+      // the variables to return
+      this.volume = 0;
+      this.average = 0;
+      this.stereoVol = [
+        0,
+        0
+      ];
+      this.stereoAvg = [
+        0,
+        0
+      ];
+      this.stereoVolNorm = [
+        0,
+        0
+      ];
+      this.volMax = 0.001;
+      this.normalize = false;
+      this.processor.onaudioprocess = this._audioProcess.bind(this);
+      this.processor.connect(this.output);
+      this.output.gain.value = 0;
+      // this may only be necessary because of a Chrome bug
+      this.output.connect(this.audiocontext.destination);
+      // connect to p5sound master output by default, unless set by input()
+      p5sound.meter.connect(this.processor);
+      // add this p5.SoundFile to the soundArray
+      p5sound.soundArray.push(this);
+    };
+    /**
+     *  Connects to the p5sound instance (master output) by default.
+     *  Optionally, you can pass in a specific source (i.e. a soundfile).
+     *
+     *  @method setInput
+     *  @param {soundObject|undefined} [snd] set the sound source
+     *                                       (optional, defaults to
+     *                                       master output)
+     *  @param {Number|undefined} [smoothing] a range between 0.0 and 1.0
+     *                                        to smooth amplitude readings
+     *  @example
+     *  

+     *  function preload(){
+     *    sound1 = loadSound('assets/beat.mp3');
+     *    sound2 = loadSound('assets/drum.mp3');
+     *  }
+     *  function setup(){
+     *    amplitude = new p5.Amplitude();
+     *    sound1.play();
+     *    sound2.play();
+     *    amplitude.setInput(sound2);
+     *  }
+     *  function draw() {
+     *    background(0);
+     *    fill(255);
+     *    var level = amplitude.getLevel();
+     *    var size = map(level, 0, 1, 0, 200);
+     *    ellipse(width/2, height/2, size, size);
+     *  }
+     *  function mouseClicked(){
+     *    sound1.stop();
+     *    sound2.stop();
+     *  }
+     *  

+     */
+    p5.Amplitude.prototype.setInput = function (source, smoothing) {
+      p5sound.meter.disconnect();
+      if (smoothing) {
+        this.smoothing = smoothing;
+      }
+      // connect to the master out of p5s instance if no snd is provided
+      if (source == null) {
+        console.log('Amplitude input source is not ready! Connecting to master output instead');
+        p5sound.meter.connect(this.processor);
+      } else if (source instanceof p5.Signal) {
+        source.output.connect(this.processor);
+      } else if (source) {
+        source.connect(this.processor);
+        this.processor.disconnect();
+        this.processor.connect(this.output);
+      } else {
+        p5sound.meter.connect(this.processor);
+      }
+    };
+    p5.Amplitude.prototype.connect = function (unit) {
+      if (unit) {
+        if (unit.hasOwnProperty('input')) {
+          this.output.connect(unit.input);
+        } else {
+          this.output.connect(unit);
+        }
+      } else {
+        this.output.connect(this.panner.connect(p5sound.input));
+      }
+    };
+    p5.Amplitude.prototype.disconnect = function () {
+      this.output.disconnect();
+    };
+    // TO DO make this stereo / dependent on # of audio channels
+    p5.Amplitude.prototype._audioProcess = function (event) {
+      for (var channel = 0; channel < event.inputBuffer.numberOfChannels; channel++) {
+        var inputBuffer = event.inputBuffer.getChannelData(channel);
+        var bufLength = inputBuffer.length;
+        var total = 0;
+        var sum = 0;
+        var x;
+        for (var i = 0; i < bufLength; i++) {
+          x = inputBuffer[i];
+          if (this.normalize) {
+            total += Math.max(Math.min(x / this.volMax, 1), -1);
+            sum += Math.max(Math.min(x / this.volMax, 1), -1) * Math.max(Math.min(x / this.volMax, 1), -1);
+          } else {
+            total += x;
+            sum += x * x;
+          }
+        }
+        var average = total / bufLength;
+        // ... then take the square root of the sum.
+        var rms = Math.sqrt(sum / bufLength);
+        this.stereoVol[channel] = Math.max(rms, this.stereoVol[channel] * this.smoothing);
+        this.stereoAvg[channel] = Math.max(average, this.stereoVol[channel] * this.smoothing);
+        this.volMax = Math.max(this.stereoVol[channel], this.volMax);
+      }
+      // add volume from all channels together
+      var self = this;
+      var volSum = this.stereoVol.reduce(function (previousValue, currentValue, index) {
+        self.stereoVolNorm[index - 1] = Math.max(Math.min(self.stereoVol[index - 1] / self.volMax, 1), 0);
+        self.stereoVolNorm[index] = Math.max(Math.min(self.stereoVol[index] / self.volMax, 1), 0);
+        return previousValue + currentValue;
+      });
+      // volume is average of channels
+      this.volume = volSum / this.stereoVol.length;
+      // normalized value
+      this.volNorm = Math.max(Math.min(this.volume / this.volMax, 1), 0);
+    };
+    /**
+     *  Returns a single Amplitude reading at the moment it is called.
+     *  For continuous readings, run in the draw loop.
+     *
+     *  @method getLevel
+     *  @param {Number} [channel] Optionally return only channel 0 (left) or 1 (right)
+     *  @return {Number}       Amplitude as a number between 0.0 and 1.0
+     *  @example
+     *  

+     *  function preload(){
+     *    sound = loadSound('assets/beat.mp3');
+     *  }
+     *  function setup() {
+     *    amplitude = new p5.Amplitude();
+     *    sound.play();
+     *  }
+     *  function draw() {
+     *    background(0);
+     *    fill(255);
+     *    var level = amplitude.getLevel();
+     *    var size = map(level, 0, 1, 0, 200);
+     *    ellipse(width/2, height/2, size, size);
+     *  }
+     *  function mouseClicked(){
+     *    sound.stop();
+     *  }
+     *  

+     */
+    p5.Amplitude.prototype.getLevel = function (channel) {
+      if (typeof channel !== 'undefined') {
+        if (this.normalize) {
+          return this.stereoVolNorm[channel];
+        } else {
+          return this.stereoVol[channel];
+        }
+      } else if (this.normalize) {
+        return this.volNorm;
+      } else {
+        return this.volume;
+      }
+    };
+    /**
+     * Determines whether the results of Amplitude.process() will be
+     * Normalized. To normalize, Amplitude finds the difference the
+     * loudest reading it has processed and the maximum amplitude of
+     * 1.0. Amplitude adds this difference to all values to produce
+     * results that will reliably map between 0.0 and 1.0. However,
+     * if a louder moment occurs, the amount that Normalize adds to
+     * all the values will change. Accepts an optional boolean parameter
+     * (true or false). Normalizing is off by default.
+     *
+     * @method toggleNormalize
+     * @param {boolean} [boolean] set normalize to true (1) or false (0)
+     */
+    p5.Amplitude.prototype.toggleNormalize = function (bool) {
+      if (typeof bool === 'boolean') {
+        this.normalize = bool;
+      } else {
+        this.normalize = !this.normalize;
+      }
+    };
+    /**
+     *  Smooth Amplitude analysis by averaging with the last analysis
+     *  frame. Off by default.
+     *
+     *  @method smooth
+     *  @param {Number} set smoothing from 0.0 <= 1
+     */
+    p5.Amplitude.prototype.smooth = function (s) {
+      if (s >= 0 && s < 1) {
+        this.smoothing = s;
+      } else {
+        console.log('Error: smoothing must be between 0 and 1');
+      }
+    };
+    p5.Amplitude.prototype.dispose = function () {
+      // remove reference from soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      this.input.disconnect();
+      this.output.disconnect();
+      this.input = this.processor = undefined;
+      this.output = undefined;
+    };
+  }(master);
+  var fft;
+  'use strict';
+  fft = function () {
+    var p5sound = master;
+    /**
+     *  
FFT (Fast Fourier Transform) is an analysis algorithm that
+     *  isolates individual
+     *  
+     *  audio frequencies within a waveform.

+     *
+     *  
Once instantiated, a p5.FFT object can return an array based on
+     *  two types of analyses: 
 • FFT.waveform() computes
+     *  amplitude values along the time domain. The array indices correspond
+     *  to samples across a brief moment in time. Each value represents
+     *  amplitude of the waveform at that sample of time.

+     *  • FFT.analyze()  computes amplitude values along the
+     *  frequency domain. The array indices correspond to frequencies (i.e.
+     *  pitches), from the lowest to the highest that humans can hear. Each
+     *  value represents amplitude at that slice of the frequency spectrum.
+     *  Use with getEnergy() to measure amplitude at specific
+     *  frequencies, or within a range of frequencies. 

+     *
+     *  
FFT analyzes a very short snapshot of sound called a sample
+     *  buffer. It returns an array of amplitude measurements, referred
+     *  to as bins. The array is 1024 bins long by default.
+     *  You can change the bin array length, but it must be a power of 2
+     *  between 16 and 1024 in order for the FFT algorithm to function
+     *  correctly. The actual size of the FFT buffer is twice the
+     *  number of bins, so given a standard sample rate, the buffer is
+     *  2048/44100 seconds long.

+     *
+     *
+     *  @class p5.FFT
+     *  @constructor
+     *  @param {Number} [smoothing]   Smooth results of Freq Spectrum.
+     *                                0.0 < smoothing < 1.0.
+     *                                Defaults to 0.8.
+     *  @param {Number} [bins]    Length of resulting array.
+     *                            Must be a power of two between
+     *                            16 and 1024. Defaults to 1024.
+     *  @example
+     *  

+     *  function preload(){
+     *    sound = loadSound('assets/Damscray_DancingTiger.mp3');
+     *  }
+     *
+     *  function setup(){
+     *    var cnv = createCanvas(100,100);
+     *    cnv.mouseClicked(togglePlay);
+     *    fft = new p5.FFT();
+     *    sound.amp(0.2);
+     *  }
+     *
+     *  function draw(){
+     *    background(0);
+     *
+     *    var spectrum = fft.analyze();
+     *    noStroke();
+     *    fill(0,255,0); // spectrum is green
+     *    for (var i = 0; i< spectrum.length; i++){
+     *      var x = map(i, 0, spectrum.length, 0, width);
+     *      var h = -height + map(spectrum[i], 0, 255, height, 0);
+     *      rect(x, height, width / spectrum.length, h )
+     *    }
+     *
+     *    var waveform = fft.waveform();
+     *    noFill();
+     *    beginShape();
+     *    stroke(255,0,0); // waveform is red
+     *    strokeWeight(1);
+     *    for (var i = 0; i< waveform.length; i++){
+     *      var x = map(i, 0, waveform.length, 0, width);
+     *      var y = map( waveform[i], -1, 1, 0, height);
+     *      vertex(x,y);
+     *    }
+     *    endShape();
+     *
+     *    text('click to play/pause', 4, 10);
+     *  }
+     *
+     *  // fade sound if mouse is over canvas
+     *  function togglePlay() {
+     *    if (sound.isPlaying()) {
+     *      sound.pause();
+     *    } else {
+     *      sound.loop();
+     *    }
+     *  }
+     *  

+     */
+    p5.FFT = function (smoothing, bins) {
+      this.input = this.analyser = p5sound.audiocontext.createAnalyser();
+      Object.defineProperties(this, {
+        bins: {
+          get: function () {
+            return this.analyser.fftSize / 2;
+          },
+          set: function (b) {
+            this.analyser.fftSize = b * 2;
+          },
+          configurable: true,
+          enumerable: true
+        },
+        smoothing: {
+          get: function () {
+            return this.analyser.smoothingTimeConstant;
+          },
+          set: function (s) {
+            this.analyser.smoothingTimeConstant = s;
+          },
+          configurable: true,
+          enumerable: true
+        }
+      });
+      // set default smoothing and bins
+      this.smooth(smoothing);
+      this.bins = bins || 1024;
+      // default connections to p5sound fftMeter
+      p5sound.fftMeter.connect(this.analyser);
+      this.freqDomain = new Uint8Array(this.analyser.frequencyBinCount);
+      this.timeDomain = new Uint8Array(this.analyser.frequencyBinCount);
+      // predefined frequency ranges, these will be tweakable
+      this.bass = [
+        20,
+        140
+      ];
+      this.lowMid = [
+        140,
+        400
+      ];
+      this.mid = [
+        400,
+        2600
+      ];
+      this.highMid = [
+        2600,
+        5200
+      ];
+      this.treble = [
+        5200,
+        14000
+      ];
+      // add this p5.SoundFile to the soundArray
+      p5sound.soundArray.push(this);
+    };
+    /**
+     *  Set the input source for the FFT analysis. If no source is
+     *  provided, FFT will analyze all sound in the sketch.
+     *
+     *  @method  setInput
+     *  @param {Object} [source] p5.sound object (or web audio API source node)
+     */
+    p5.FFT.prototype.setInput = function (source) {
+      if (!source) {
+        p5sound.fftMeter.connect(this.analyser);
+      } else {
+        if (source.output) {
+          source.output.connect(this.analyser);
+        } else if (source.connect) {
+          source.connect(this.analyser);
+        }
+        p5sound.fftMeter.disconnect();
+      }
+    };
+    /**
+     *  Returns an array of amplitude values (between -1.0 and +1.0) that represent
+     *  a snapshot of amplitude readings in a single buffer. Length will be
+     *  equal to bins (defaults to 1024). Can be used to draw the waveform
+     *  of a sound.
+     *
+     *  @method waveform
+     *  @param {Number} [bins]    Must be a power of two between
+     *                            16 and 1024. Defaults to 1024.
+     *  @param {String} [precision] If any value is provided, will return results
+     *                              in a Float32 Array which is more precise
+     *                              than a regular array.
+     *  @return {Array}  Array    Array of amplitude values (-1 to 1)
+     *                            over time. Array length = bins.
+     *
+     */
+    p5.FFT.prototype.waveform = function () {
+      var bins, mode, normalArray;
+      for (var i = 0; i < arguments.length; i++) {
+        if (typeof arguments[i] === 'number') {
+          bins = arguments[i];
+          this.analyser.fftSize = bins * 2;
+        }
+        if (typeof arguments[i] === 'string') {
+          mode = arguments[i];
+        }
+      }
+      // getFloatFrequencyData doesnt work in Safari as of 5/2015
+      if (mode && !p5.prototype._isSafari()) {
+        timeToFloat(this, this.timeDomain);
+        this.analyser.getFloatTimeDomainData(this.timeDomain);
+        return this.timeDomain;
+      } else {
+        timeToInt(this, this.timeDomain);
+        this.analyser.getByteTimeDomainData(this.timeDomain);
+        var normalArray = new Array();
+        for (var j = 0; j < this.timeDomain.length; j++) {
+          var scaled = p5.prototype.map(this.timeDomain[j], 0, 255, -1, 1);
+          normalArray.push(scaled);
+        }
+        return normalArray;
+      }
+    };
+    /**
+     *  Returns an array of amplitude values (between 0 and 255)
+     *  across the frequency spectrum. Length is equal to FFT bins
+     *  (1024 by default). The array indices correspond to frequencies
+     *  (i.e. pitches), from the lowest to the highest that humans can
+     *  hear. Each value represents amplitude at that slice of the
+     *  frequency spectrum. Must be called prior to using
+     *  getEnergy().
+     *
+     *  @method analyze
+     *  @param {Number} [bins]    Must be a power of two between
+     *                             16 and 1024. Defaults to 1024.
+     *  @param {Number} [scale]    If "dB," returns decibel
+     *                             float measurements between
+     *                             -140 and 0 (max).
+     *                             Otherwise returns integers from 0-255.
+     *  @return {Array} spectrum    Array of energy (amplitude/volume)
+     *                              values across the frequency spectrum.
+     *                              Lowest energy (silence) = 0, highest
+     *                              possible is 255.
+     *  @example
+     *  

+     *  var osc;
+     *  var fft;
+     *
+     *  function setup(){
+     *    createCanvas(100,100);
+     *    osc = new p5.Oscillator();
+     *    osc.amp(0);
+     *    osc.start();
+     *    fft = new p5.FFT();
+     *  }
+     *
+     *  function draw(){
+     *    background(0);
+     *
+     *    var freq = map(mouseX, 0, 800, 20, 15000);
+     *    freq = constrain(freq, 1, 20000);
+     *    osc.freq(freq);
+     *
+     *    var spectrum = fft.analyze();
+     *    noStroke();
+     *    fill(0,255,0); // spectrum is green
+     *    for (var i = 0; i< spectrum.length; i++){
+     *      var x = map(i, 0, spectrum.length, 0, width);
+     *      var h = -height + map(spectrum[i], 0, 255, height, 0);
+     *      rect(x, height, width / spectrum.length, h );
+     *    }
+     *
+     *    stroke(255);
+     *    text('Freq: ' + round(freq)+'Hz', 10, 10);
+     *
+     *    isMouseOverCanvas();
+     *  }
+     *
+     *  // only play sound when mouse is over canvas
+     *  function isMouseOverCanvas() {
+     *    var mX = mouseX, mY = mouseY;
+     *    if (mX > 0 && mX < width && mY < height && mY > 0) {
+     *      osc.amp(0.5, 0.2);
+     *    } else {
+     *      osc.amp(0, 0.2);
+     *    }
+     *  }
+     *  

+     *
+     *
+     */
+    p5.FFT.prototype.analyze = function () {
+      var mode;
+      for (var i = 0; i < arguments.length; i++) {
+        if (typeof arguments[i] === 'number') {
+          this.bins = arguments[i];
+          this.analyser.fftSize = this.bins * 2;
+        }
+        if (typeof arguments[i] === 'string') {
+          mode = arguments[i];
+        }
+      }
+      if (mode && mode.toLowerCase() === 'db') {
+        freqToFloat(this);
+        this.analyser.getFloatFrequencyData(this.freqDomain);
+        return this.freqDomain;
+      } else {
+        freqToInt(this, this.freqDomain);
+        this.analyser.getByteFrequencyData(this.freqDomain);
+        var normalArray = Array.apply([], this.freqDomain);
+        normalArray.length === this.analyser.fftSize;
+        normalArray.constructor === Array;
+        return normalArray;
+      }
+    };
+    /**
+     *  Returns the amount of energy (volume) at a specific
+     *  
+     *  frequency, or the average amount of energy between two
+     *  frequencies. Accepts Number(s) corresponding
+     *  to frequency (in Hz), or a String corresponding to predefined
+     *  frequency ranges ("bass", "lowMid", "mid", "highMid", "treble").
+     *  Returns a range between 0 (no energy/volume at that frequency) and
+     *  255 (maximum energy).
+     *  NOTE: analyze() must be called prior to getEnergy(). Analyze()
+     *  tells the FFT to analyze frequency data, and getEnergy() uses
+     *  the results determine the value at a specific frequency or
+     *  range of frequencies.

+     *
+     *  @method  getEnergy
+     *  @param  {Number|String} frequency1   Will return a value representing
+     *                                energy at this frequency. Alternately,
+     *                                the strings "bass", "lowMid" "mid",
+     *                                "highMid", and "treble" will return
+     *                                predefined frequency ranges.
+     *  @param  {Number} [frequency2] If a second frequency is given,
+     *                                will return average amount of
+     *                                energy that exists between the
+     *                                two frequencies.
+     *  @return {Number}   Energy   Energy (volume/amplitude) from
+     *                              0 and 255.
+     *
+     */
+    p5.FFT.prototype.getEnergy = function (frequency1, frequency2) {
+      var nyquist = p5sound.audiocontext.sampleRate / 2;
+      if (frequency1 === 'bass') {
+        frequency1 = this.bass[0];
+        frequency2 = this.bass[1];
+      } else if (frequency1 === 'lowMid') {
+        frequency1 = this.lowMid[0];
+        frequency2 = this.lowMid[1];
+      } else if (frequency1 === 'mid') {
+        frequency1 = this.mid[0];
+        frequency2 = this.mid[1];
+      } else if (frequency1 === 'highMid') {
+        frequency1 = this.highMid[0];
+        frequency2 = this.highMid[1];
+      } else if (frequency1 === 'treble') {
+        frequency1 = this.treble[0];
+        frequency2 = this.treble[1];
+      }
+      if (typeof frequency1 !== 'number') {
+        throw 'invalid input for getEnergy()';
+      } else if (!frequency2) {
+        // if only one parameter:
+        var index = Math.round(frequency1 / nyquist * this.freqDomain.length);
+        return this.freqDomain[index];
+      } else if (frequency1 && frequency2) {
+        // if two parameters:
+        // if second is higher than first
+        if (frequency1 > frequency2) {
+          var swap = frequency2;
+          frequency2 = frequency1;
+          frequency1 = swap;
+        }
+        var lowIndex = Math.round(frequency1 / nyquist * this.freqDomain.length);
+        var highIndex = Math.round(frequency2 / nyquist * this.freqDomain.length);
+        var total = 0;
+        var numFrequencies = 0;
+        // add up all of the values for the frequencies
+        for (var i = lowIndex; i <= highIndex; i++) {
+          total += this.freqDomain[i];
+          numFrequencies += 1;
+        }
+        // divide by total number of frequencies
+        var toReturn = total / numFrequencies;
+        return toReturn;
+      } else {
+        throw 'invalid input for getEnergy()';
+      }
+    };
+    // compatability with v.012, changed to getEnergy in v.0121. Will be deprecated...
+    p5.FFT.prototype.getFreq = function (freq1, freq2) {
+      console.log('getFreq() is deprecated. Please use getEnergy() instead.');
+      var x = this.getEnergy(freq1, freq2);
+      return x;
+    };
+    /**
+       *  Returns the
+       *  
+       *  spectral centroid of the input signal.
+       *  NOTE: analyze() must be called prior to getCentroid(). Analyze()
+       *  tells the FFT to analyze frequency data, and getCentroid() uses
+       *  the results determine the spectral centroid.

+       *
+       *  @method  getCentroid
+       *  @return {Number}   Spectral Centroid Frequency   Frequency of the spectral centroid in Hz.
+       *
+       *
+       * @example
+       *  

+       *
+       *
+       *function setup(){
+       *  cnv = createCanvas(800,400);
+       *  sound = new p5.AudioIn();
+       *  sound.start();
+       *  fft = new p5.FFT();
+       *  sound.connect(fft);
+       *}
+       *
+       *
+       *function draw(){
+       *
+       *  var centroidplot = 0.0;
+       *  var spectralCentroid = 0;
+       *
+       *
+       *  background(0);
+       *  stroke(0,255,0);
+       *  var spectrum = fft.analyze();
+       *  fill(0,255,0); // spectrum is green
+       *
+       *  //draw the spectrum
+       *
+       *  for (var i = 0; i< spectrum.length; i++){
+       *    var x = map(log(i), 0, log(spectrum.length), 0, width);
+       *    var h = map(spectrum[i], 0, 255, 0, height);
+       *    var rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));
+       *    rect(x, height, rectangle_width, -h )
+       *  }
+
+       *  var nyquist = 22050;
+       *
+       *  // get the centroid
+       *  spectralCentroid = fft.getCentroid();
+       *
+       *  // the mean_freq_index calculation is for the display.
+       *  var mean_freq_index = spectralCentroid/(nyquist/spectrum.length);
+       *
+       *  centroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);
+       *
+       *
+       *  stroke(255,0,0); // the line showing where the centroid is will be red
+       *
+       *  rect(centroidplot, 0, width / spectrum.length, height)
+       *  noStroke();
+       *  fill(255,255,255);  // text is white
+       *  textSize(40);
+       *  text("centroid: "+round(spectralCentroid)+" Hz", 10, 40);
+       *}
+       * 

+       */
+    p5.FFT.prototype.getCentroid = function () {
+      var nyquist = p5sound.audiocontext.sampleRate / 2;
+      var cumulative_sum = 0;
+      var centroid_normalization = 0;
+      for (var i = 0; i < this.freqDomain.length; i++) {
+        cumulative_sum += i * this.freqDomain[i];
+        centroid_normalization += this.freqDomain[i];
+      }
+      var mean_freq_index = 0;
+      if (centroid_normalization !== 0) {
+        mean_freq_index = cumulative_sum / centroid_normalization;
+      }
+      var spec_centroid_freq = mean_freq_index * (nyquist / this.freqDomain.length);
+      return spec_centroid_freq;
+    };
+    /**
+     *  Smooth FFT analysis by averaging with the last analysis frame.
+     *
+     *  @method smooth
+     *  @param {Number} smoothing    0.0 < smoothing < 1.0.
+     *                               Defaults to 0.8.
+     */
+    p5.FFT.prototype.smooth = function (s) {
+      if (typeof s !== 'undefined') {
+        this.smoothing = s;
+      }
+      return this.smoothing;
+    };
+    p5.FFT.prototype.dispose = function () {
+      // remove reference from soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      this.analyser.disconnect();
+      this.analyser = undefined;
+    };
+    /**
+     *  Returns an array of average amplitude values for a given number
+     *  of frequency bands split equally. N defaults to 16.
+     *  NOTE: analyze() must be called prior to linAverages(). Analyze()
+     *  tells the FFT to analyze frequency data, and linAverages() uses
+     *  the results to group them into a smaller set of averages.

+     *
+     *  @method  linAverages
+     *  @param  {Number}  N                Number of returned frequency groups
+     *  @return {Array}   linearAverages   Array of average amplitude values for each group
+     */
+    p5.FFT.prototype.linAverages = function (N) {
+      var N = N || 16;
+      // This prevents undefined, null or 0 values of N
+      var spectrum = this.freqDomain;
+      var spectrumLength = spectrum.length;
+      var spectrumStep = Math.floor(spectrumLength / N);
+      var linearAverages = new Array(N);
+      // Keep a second index for the current average group and place the values accordingly
+      // with only one loop in the spectrum data
+      var groupIndex = 0;
+      for (var specIndex = 0; specIndex < spectrumLength; specIndex++) {
+        linearAverages[groupIndex] = linearAverages[groupIndex] !== undefined ? (linearAverages[groupIndex] + spectrum[specIndex]) / 2 : spectrum[specIndex];
+        // Increase the group index when the last element of the group is processed
+        if (specIndex % spectrumStep === spectrumStep - 1) {
+          groupIndex++;
+        }
+      }
+      return linearAverages;
+    };
+    /**
+     *  Returns an array of average amplitude values of the spectrum, for a given
+     *  set of 
+     *  Octave Bands
+     *  NOTE: analyze() must be called prior to logAverages(). Analyze()
+     *  tells the FFT to analyze frequency data, and logAverages() uses
+     *  the results to group them into a smaller set of averages.

+     *
+     *  @method  logAverages
+     *  @param  {Array}   octaveBands    Array of Octave Bands objects for grouping
+     *  @return {Array}   logAverages    Array of average amplitude values for each group
+     */
+    p5.FFT.prototype.logAverages = function (octaveBands) {
+      var nyquist = p5sound.audiocontext.sampleRate / 2;
+      var spectrum = this.freqDomain;
+      var spectrumLength = spectrum.length;
+      var logAverages = new Array(octaveBands.length);
+      // Keep a second index for the current average group and place the values accordingly
+      // With only one loop in the spectrum data
+      var octaveIndex = 0;
+      for (var specIndex = 0; specIndex < spectrumLength; specIndex++) {
+        var specIndexFrequency = Math.round(specIndex * nyquist / this.freqDomain.length);
+        // Increase the group index if the current frequency exceeds the limits of the band
+        if (specIndexFrequency > octaveBands[octaveIndex].hi) {
+          octaveIndex++;
+        }
+        logAverages[octaveIndex] = logAverages[octaveIndex] !== undefined ? (logAverages[octaveIndex] + spectrum[specIndex]) / 2 : spectrum[specIndex];
+      }
+      return logAverages;
+    };
+    /**
+     *  Calculates and Returns the 1/N
+     *  Octave Bands
+     *  N defaults to 3 and minimum central frequency to 15.625Hz.
+     *  (1/3 Octave Bands ~= 31 Frequency Bands)
+     *  Setting fCtr0 to a central value of a higher octave will ignore the lower bands
+     *  and produce less frequency groups.
+     *
+     *  @method   getOctaveBands
+     *  @param  {Number}  N             Specifies the 1/N type of generated octave bands
+     *  @param  {Number}  fCtr0         Minimum central frequency for the lowest band
+     *  @return {Array}   octaveBands   Array of octave band objects with their bounds
+     */
+    p5.FFT.prototype.getOctaveBands = function (N, fCtr0) {
+      var N = N || 3;
+      // Default to 1/3 Octave Bands
+      var fCtr0 = fCtr0 || 15.625;
+      // Minimum central frequency, defaults to 15.625Hz
+      var octaveBands = [];
+      var lastFrequencyBand = {
+        lo: fCtr0 / Math.pow(2, 1 / (2 * N)),
+        ctr: fCtr0,
+        hi: fCtr0 * Math.pow(2, 1 / (2 * N))
+      };
+      octaveBands.push(lastFrequencyBand);
+      var nyquist = p5sound.audiocontext.sampleRate / 2;
+      while (lastFrequencyBand.hi < nyquist) {
+        var newFrequencyBand = {};
+        newFrequencyBand.lo = lastFrequencyBand.hi;
+        newFrequencyBand.ctr = lastFrequencyBand.ctr * Math.pow(2, 1 / N);
+        newFrequencyBand.hi = newFrequencyBand.ctr * Math.pow(2, 1 / (2 * N));
+        octaveBands.push(newFrequencyBand);
+        lastFrequencyBand = newFrequencyBand;
+      }
+      return octaveBands;
+    };
+    // helper methods to convert type from float (dB) to int (0-255)
+    var freqToFloat = function (fft) {
+      if (fft.freqDomain instanceof Float32Array === false) {
+        fft.freqDomain = new Float32Array(fft.analyser.frequencyBinCount);
+      }
+    };
+    var freqToInt = function (fft) {
+      if (fft.freqDomain instanceof Uint8Array === false) {
+        fft.freqDomain = new Uint8Array(fft.analyser.frequencyBinCount);
+      }
+    };
+    var timeToFloat = function (fft) {
+      if (fft.timeDomain instanceof Float32Array === false) {
+        fft.timeDomain = new Float32Array(fft.analyser.frequencyBinCount);
+      }
+    };
+    var timeToInt = function (fft) {
+      if (fft.timeDomain instanceof Uint8Array === false) {
+        fft.timeDomain = new Uint8Array(fft.analyser.frequencyBinCount);
+      }
+    };
+  }(master);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_core_Tone;
+  Tone_core_Tone = function () {
+    'use strict';
+    var Tone = function (inputs, outputs) {
+      if (this.isUndef(inputs) || inputs === 1) {
+        this.input = this.context.createGain();
+      } else if (inputs > 1) {
+        this.input = new Array(inputs);
+      }
+      if (this.isUndef(outputs) || outputs === 1) {
+        this.output = this.context.createGain();
+      } else if (outputs > 1) {
+        this.output = new Array(inputs);
+      }
+    };
+    Tone.prototype.set = function (params, value, rampTime) {
+      if (this.isObject(params)) {
+        rampTime = value;
+      } else if (this.isString(params)) {
+        var tmpObj = {};
+        tmpObj[params] = value;
+        params = tmpObj;
+      }
+      paramLoop:
+        for (var attr in params) {
+          value = params[attr];
+          var parent = this;
+          if (attr.indexOf('.') !== -1) {
+            var attrSplit = attr.split('.');
+            for (var i = 0; i < attrSplit.length - 1; i++) {
+              parent = parent[attrSplit[i]];
+              if (parent instanceof Tone) {
+                attrSplit.splice(0, i + 1);
+                var innerParam = attrSplit.join('.');
+                parent.set(innerParam, value);
+                continue paramLoop;
+              }
+            }
+            attr = attrSplit[attrSplit.length - 1];
+          }
+          var param = parent[attr];
+          if (this.isUndef(param)) {
+            continue;
+          }
+          if (Tone.Signal && param instanceof Tone.Signal || Tone.Param && param instanceof Tone.Param) {
+            if (param.value !== value) {
+              if (this.isUndef(rampTime)) {
+                param.value = value;
+              } else {
+                param.rampTo(value, rampTime);
+              }
+            }
+          } else if (param instanceof AudioParam) {
+            if (param.value !== value) {
+              param.value = value;
+            }
+          } else if (param instanceof Tone) {
+            param.set(value);
+          } else if (param !== value) {
+            parent[attr] = value;
+          }
+        }
+      return this;
+    };
+    Tone.prototype.get = function (params) {
+      if (this.isUndef(params)) {
+        params = this._collectDefaults(this.constructor);
+      } else if (this.isString(params)) {
+        params = [params];
+      }
+      var ret = {};
+      for (var i = 0; i < params.length; i++) {
+        var attr = params[i];
+        var parent = this;
+        var subRet = ret;
+        if (attr.indexOf('.') !== -1) {
+          var attrSplit = attr.split('.');
+          for (var j = 0; j < attrSplit.length - 1; j++) {
+            var subAttr = attrSplit[j];
+            subRet[subAttr] = subRet[subAttr] || {};
+            subRet = subRet[subAttr];
+            parent = parent[subAttr];
+          }
+          attr = attrSplit[attrSplit.length - 1];
+        }
+        var param = parent[attr];
+        if (this.isObject(params[attr])) {
+          subRet[attr] = param.get();
+        } else if (Tone.Signal && param instanceof Tone.Signal) {
+          subRet[attr] = param.value;
+        } else if (Tone.Param && param instanceof Tone.Param) {
+          subRet[attr] = param.value;
+        } else if (param instanceof AudioParam) {
+          subRet[attr] = param.value;
+        } else if (param instanceof Tone) {
+          subRet[attr] = param.get();
+        } else if (!this.isFunction(param) && !this.isUndef(param)) {
+          subRet[attr] = param;
+        }
+      }
+      return ret;
+    };
+    Tone.prototype._collectDefaults = function (constr) {
+      var ret = [];
+      if (!this.isUndef(constr.defaults)) {
+        ret = Object.keys(constr.defaults);
+      }
+      if (!this.isUndef(constr._super)) {
+        var superDefs = this._collectDefaults(constr._super);
+        for (var i = 0; i < superDefs.length; i++) {
+          if (ret.indexOf(superDefs[i]) === -1) {
+            ret.push(superDefs[i]);
+          }
+        }
+      }
+      return ret;
+    };
+    Tone.prototype.toString = function () {
+      for (var className in Tone) {
+        var isLetter = className[0].match(/^[A-Z]$/);
+        var sameConstructor = Tone[className] === this.constructor;
+        if (this.isFunction(Tone[className]) && isLetter && sameConstructor) {
+          return className;
+        }
+      }
+      return 'Tone';
+    };
+    Object.defineProperty(Tone.prototype, 'numberOfInputs', {
+      get: function () {
+        if (this.input) {
+          if (this.isArray(this.input)) {
+            return this.input.length;
+          } else {
+            return 1;
+          }
+        } else {
+          return 0;
+        }
+      }
+    });
+    Object.defineProperty(Tone.prototype, 'numberOfOutputs', {
+      get: function () {
+        if (this.output) {
+          if (this.isArray(this.output)) {
+            return this.output.length;
+          } else {
+            return 1;
+          }
+        } else {
+          return 0;
+        }
+      }
+    });
+    Tone.prototype.dispose = function () {
+      if (!this.isUndef(this.input)) {
+        if (this.input instanceof AudioNode) {
+          this.input.disconnect();
+        }
+        this.input = null;
+      }
+      if (!this.isUndef(this.output)) {
+        if (this.output instanceof AudioNode) {
+          this.output.disconnect();
+        }
+        this.output = null;
+      }
+      return this;
+    };
+    Tone.prototype.connect = function (unit, outputNum, inputNum) {
+      if (Array.isArray(this.output)) {
+        outputNum = this.defaultArg(outputNum, 0);
+        this.output[outputNum].connect(unit, 0, inputNum);
+      } else {
+        this.output.connect(unit, outputNum, inputNum);
+      }
+      return this;
+    };
+    Tone.prototype.disconnect = function (destination, outputNum, inputNum) {
+      if (this.isArray(this.output)) {
+        if (this.isNumber(destination)) {
+          this.output[destination].disconnect();
+        } else {
+          outputNum = this.defaultArg(outputNum, 0);
+          this.output[outputNum].disconnect(destination, 0, inputNum);
+        }
+      } else {
+        this.output.disconnect.apply(this.output, arguments);
+      }
+    };
+    Tone.prototype.connectSeries = function () {
+      if (arguments.length > 1) {
+        var currentUnit = arguments[0];
+        for (var i = 1; i < arguments.length; i++) {
+          var toUnit = arguments[i];
+          currentUnit.connect(toUnit);
+          currentUnit = toUnit;
+        }
+      }
+      return this;
+    };
+    Tone.prototype.chain = function () {
+      if (arguments.length > 0) {
+        var currentUnit = this;
+        for (var i = 0; i < arguments.length; i++) {
+          var toUnit = arguments[i];
+          currentUnit.connect(toUnit);
+          currentUnit = toUnit;
+        }
+      }
+      return this;
+    };
+    Tone.prototype.fan = function () {
+      if (arguments.length > 0) {
+        for (var i = 0; i < arguments.length; i++) {
+          this.connect(arguments[i]);
+        }
+      }
+      return this;
+    };
+    AudioNode.prototype.chain = Tone.prototype.chain;
+    AudioNode.prototype.fan = Tone.prototype.fan;
+    Tone.prototype.defaultArg = function (given, fallback) {
+      if (this.isObject(given) && this.isObject(fallback)) {
+        var ret = {};
+        for (var givenProp in given) {
+          ret[givenProp] = this.defaultArg(fallback[givenProp], given[givenProp]);
+        }
+        for (var fallbackProp in fallback) {
+          ret[fallbackProp] = this.defaultArg(given[fallbackProp], fallback[fallbackProp]);
+        }
+        return ret;
+      } else {
+        return this.isUndef(given) ? fallback : given;
+      }
+    };
+    Tone.prototype.optionsObject = function (values, keys, defaults) {
+      var options = {};
+      if (values.length === 1 && this.isObject(values[0])) {
+        options = values[0];
+      } else {
+        for (var i = 0; i < keys.length; i++) {
+          options[keys[i]] = values[i];
+        }
+      }
+      if (!this.isUndef(defaults)) {
+        return this.defaultArg(options, defaults);
+      } else {
+        return options;
+      }
+    };
+    Tone.prototype.isUndef = function (val) {
+      return typeof val === 'undefined';
+    };
+    Tone.prototype.isFunction = function (val) {
+      return typeof val === 'function';
+    };
+    Tone.prototype.isNumber = function (arg) {
+      return typeof arg === 'number';
+    };
+    Tone.prototype.isObject = function (arg) {
+      return Object.prototype.toString.call(arg) === '[object Object]' && arg.constructor === Object;
+    };
+    Tone.prototype.isBoolean = function (arg) {
+      return typeof arg === 'boolean';
+    };
+    Tone.prototype.isArray = function (arg) {
+      return Array.isArray(arg);
+    };
+    Tone.prototype.isString = function (arg) {
+      return typeof arg === 'string';
+    };
+    Tone.noOp = function () {
+    };
+    Tone.prototype._readOnly = function (property) {
+      if (Array.isArray(property)) {
+        for (var i = 0; i < property.length; i++) {
+          this._readOnly(property[i]);
+        }
+      } else {
+        Object.defineProperty(this, property, {
+          writable: false,
+          enumerable: true
+        });
+      }
+    };
+    Tone.prototype._writable = function (property) {
+      if (Array.isArray(property)) {
+        for (var i = 0; i < property.length; i++) {
+          this._writable(property[i]);
+        }
+      } else {
+        Object.defineProperty(this, property, { writable: true });
+      }
+    };
+    Tone.State = {
+      Started: 'started',
+      Stopped: 'stopped',
+      Paused: 'paused'
+    };
+    Tone.prototype.equalPowerScale = function (percent) {
+      var piFactor = 0.5 * Math.PI;
+      return Math.sin(percent * piFactor);
+    };
+    Tone.prototype.dbToGain = function (db) {
+      return Math.pow(2, db / 6);
+    };
+    Tone.prototype.gainToDb = function (gain) {
+      return 20 * (Math.log(gain) / Math.LN10);
+    };
+    Tone.prototype.intervalToFrequencyRatio = function (interval) {
+      return Math.pow(2, interval / 12);
+    };
+    Tone.prototype.now = function () {
+      return Tone.context.now();
+    };
+    Tone.now = function () {
+      return Tone.context.now();
+    };
+    Tone.extend = function (child, parent) {
+      if (Tone.prototype.isUndef(parent)) {
+        parent = Tone;
+      }
+      function TempConstructor() {
+      }
+      TempConstructor.prototype = parent.prototype;
+      child.prototype = new TempConstructor();
+      child.prototype.constructor = child;
+      child._super = parent;
+    };
+    var audioContext;
+    Object.defineProperty(Tone, 'context', {
+      get: function () {
+        return audioContext;
+      },
+      set: function (context) {
+        if (Tone.Context && context instanceof Tone.Context) {
+          audioContext = context;
+        } else {
+          audioContext = new Tone.Context(context);
+        }
+        if (Tone.Context) {
+          Tone.Context.emit('init', audioContext);
+        }
+      }
+    });
+    Object.defineProperty(Tone.prototype, 'context', {
+      get: function () {
+        return Tone.context;
+      }
+    });
+    Tone.setContext = function (ctx) {
+      Tone.context = ctx;
+    };
+    Object.defineProperty(Tone.prototype, 'blockTime', {
+      get: function () {
+        return 128 / this.context.sampleRate;
+      }
+    });
+    Object.defineProperty(Tone.prototype, 'sampleTime', {
+      get: function () {
+        return 1 / this.context.sampleRate;
+      }
+    });
+    Object.defineProperty(Tone, 'supported', {
+      get: function () {
+        var hasAudioContext = window.hasOwnProperty('AudioContext') || window.hasOwnProperty('webkitAudioContext');
+        var hasPromises = window.hasOwnProperty('Promise');
+        var hasWorkers = window.hasOwnProperty('Worker');
+        return hasAudioContext && hasPromises && hasWorkers;
+      }
+    });
+    Tone.version = 'r10';
+    if (!window.TONE_SILENCE_VERSION_LOGGING) {
+    }
+    return Tone;
+  }();
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_SignalBase;
+  Tone_signal_SignalBase = function (Tone) {
+    'use strict';
+    Tone.SignalBase = function () {
+    };
+    Tone.extend(Tone.SignalBase);
+    Tone.SignalBase.prototype.connect = function (node, outputNumber, inputNumber) {
+      if (Tone.Signal && Tone.Signal === node.constructor || Tone.Param && Tone.Param === node.constructor || Tone.TimelineSignal && Tone.TimelineSignal === node.constructor) {
+        node._param.cancelScheduledValues(0);
+        node._param.value = 0;
+        node.overridden = true;
+      } else if (node instanceof AudioParam) {
+        node.cancelScheduledValues(0);
+        node.value = 0;
+      }
+      Tone.prototype.connect.call(this, node, outputNumber, inputNumber);
+      return this;
+    };
+    return Tone.SignalBase;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_WaveShaper;
+  Tone_signal_WaveShaper = function (Tone) {
+    'use strict';
+    Tone.WaveShaper = function (mapping, bufferLen) {
+      this._shaper = this.input = this.output = this.context.createWaveShaper();
+      this._curve = null;
+      if (Array.isArray(mapping)) {
+        this.curve = mapping;
+      } else if (isFinite(mapping) || this.isUndef(mapping)) {
+        this._curve = new Float32Array(this.defaultArg(mapping, 1024));
+      } else if (this.isFunction(mapping)) {
+        this._curve = new Float32Array(this.defaultArg(bufferLen, 1024));
+        this.setMap(mapping);
+      }
+    };
+    Tone.extend(Tone.WaveShaper, Tone.SignalBase);
+    Tone.WaveShaper.prototype.setMap = function (mapping) {
+      for (var i = 0, len = this._curve.length; i < len; i++) {
+        var normalized = i / (len - 1) * 2 - 1;
+        this._curve[i] = mapping(normalized, i);
+      }
+      this._shaper.curve = this._curve;
+      return this;
+    };
+    Object.defineProperty(Tone.WaveShaper.prototype, 'curve', {
+      get: function () {
+        return this._shaper.curve;
+      },
+      set: function (mapping) {
+        this._curve = new Float32Array(mapping);
+        this._shaper.curve = this._curve;
+      }
+    });
+    Object.defineProperty(Tone.WaveShaper.prototype, 'oversample', {
+      get: function () {
+        return this._shaper.oversample;
+      },
+      set: function (oversampling) {
+        if ([
+            'none',
+            '2x',
+            '4x'
+          ].indexOf(oversampling) !== -1) {
+          this._shaper.oversample = oversampling;
+        } else {
+          throw new RangeError('Tone.WaveShaper: oversampling must be either \'none\', \'2x\', or \'4x\'');
+        }
+      }
+    });
+    Tone.WaveShaper.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._shaper.disconnect();
+      this._shaper = null;
+      this._curve = null;
+      return this;
+    };
+    return Tone.WaveShaper;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_type_TimeBase;
+  Tone_type_TimeBase = function (Tone) {
+    Tone.TimeBase = function (val, units) {
+      if (this instanceof Tone.TimeBase) {
+        this._expr = this._noOp;
+        if (val instanceof Tone.TimeBase) {
+          this.copy(val);
+        } else if (!this.isUndef(units) || this.isNumber(val)) {
+          units = this.defaultArg(units, this._defaultUnits);
+          var method = this._primaryExpressions[units].method;
+          this._expr = method.bind(this, val);
+        } else if (this.isString(val)) {
+          this.set(val);
+        } else if (this.isUndef(val)) {
+          this._expr = this._defaultExpr();
+        }
+      } else {
+        return new Tone.TimeBase(val, units);
+      }
+    };
+    Tone.extend(Tone.TimeBase);
+    Tone.TimeBase.prototype.set = function (exprString) {
+      this._expr = this._parseExprString(exprString);
+      return this;
+    };
+    Tone.TimeBase.prototype.clone = function () {
+      var instance = new this.constructor();
+      instance.copy(this);
+      return instance;
+    };
+    Tone.TimeBase.prototype.copy = function (time) {
+      var val = time._expr();
+      return this.set(val);
+    };
+    Tone.TimeBase.prototype._primaryExpressions = {
+      'n': {
+        regexp: /^(\d+)n/i,
+        method: function (value) {
+          value = parseInt(value);
+          if (value === 1) {
+            return this._beatsToUnits(this._timeSignature());
+          } else {
+            return this._beatsToUnits(4 / value);
+          }
+        }
+      },
+      't': {
+        regexp: /^(\d+)t/i,
+        method: function (value) {
+          value = parseInt(value);
+          return this._beatsToUnits(8 / (parseInt(value) * 3));
+        }
+      },
+      'm': {
+        regexp: /^(\d+)m/i,
+        method: function (value) {
+          return this._beatsToUnits(parseInt(value) * this._timeSignature());
+        }
+      },
+      'i': {
+        regexp: /^(\d+)i/i,
+        method: function (value) {
+          return this._ticksToUnits(parseInt(value));
+        }
+      },
+      'hz': {
+        regexp: /^(\d+(?:\.\d+)?)hz/i,
+        method: function (value) {
+          return this._frequencyToUnits(parseFloat(value));
+        }
+      },
+      'tr': {
+        regexp: /^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?):?(\d+(?:\.\d+)?)?/,
+        method: function (m, q, s) {
+          var total = 0;
+          if (m && m !== '0') {
+            total += this._beatsToUnits(this._timeSignature() * parseFloat(m));
+          }
+          if (q && q !== '0') {
+            total += this._beatsToUnits(parseFloat(q));
+          }
+          if (s && s !== '0') {
+            total += this._beatsToUnits(parseFloat(s) / 4);
+          }
+          return total;
+        }
+      },
+      's': {
+        regexp: /^(\d+(?:\.\d+)?s)/,
+        method: function (value) {
+          return this._secondsToUnits(parseFloat(value));
+        }
+      },
+      'samples': {
+        regexp: /^(\d+)samples/,
+        method: function (value) {
+          return parseInt(value) / this.context.sampleRate;
+        }
+      },
+      'default': {
+        regexp: /^(\d+(?:\.\d+)?)/,
+        method: function (value) {
+          return this._primaryExpressions[this._defaultUnits].method.call(this, value);
+        }
+      }
+    };
+    Tone.TimeBase.prototype._binaryExpressions = {
+      '+': {
+        regexp: /^\+/,
+        precedence: 2,
+        method: function (lh, rh) {
+          return lh() + rh();
+        }
+      },
+      '-': {
+        regexp: /^\-/,
+        precedence: 2,
+        method: function (lh, rh) {
+          return lh() - rh();
+        }
+      },
+      '*': {
+        regexp: /^\*/,
+        precedence: 1,
+        method: function (lh, rh) {
+          return lh() * rh();
+        }
+      },
+      '/': {
+        regexp: /^\//,
+        precedence: 1,
+        method: function (lh, rh) {
+          return lh() / rh();
+        }
+      }
+    };
+    Tone.TimeBase.prototype._unaryExpressions = {
+      'neg': {
+        regexp: /^\-/,
+        method: function (lh) {
+          return -lh();
+        }
+      }
+    };
+    Tone.TimeBase.prototype._syntaxGlue = {
+      '(': { regexp: /^\(/ },
+      ')': { regexp: /^\)/ }
+    };
+    Tone.TimeBase.prototype._tokenize = function (expr) {
+      var position = -1;
+      var tokens = [];
+      while (expr.length > 0) {
+        expr = expr.trim();
+        var token = getNextToken(expr, this);
+        tokens.push(token);
+        expr = expr.substr(token.value.length);
+      }
+      function getNextToken(expr, context) {
+        var expressions = [
+          '_binaryExpressions',
+          '_unaryExpressions',
+          '_primaryExpressions',
+          '_syntaxGlue'
+        ];
+        for (var i = 0; i < expressions.length; i++) {
+          var group = context[expressions[i]];
+          for (var opName in group) {
+            var op = group[opName];
+            var reg = op.regexp;
+            var match = expr.match(reg);
+            if (match !== null) {
+              return {
+                method: op.method,
+                precedence: op.precedence,
+                regexp: op.regexp,
+                value: match[0]
+              };
+            }
+          }
+        }
+        throw new SyntaxError('Tone.TimeBase: Unexpected token ' + expr);
+      }
+      return {
+        next: function () {
+          return tokens[++position];
+        },
+        peek: function () {
+          return tokens[position + 1];
+        }
+      };
+    };
+    Tone.TimeBase.prototype._matchGroup = function (token, group, prec) {
+      var ret = false;
+      if (!this.isUndef(token)) {
+        for (var opName in group) {
+          var op = group[opName];
+          if (op.regexp.test(token.value)) {
+            if (!this.isUndef(prec)) {
+              if (op.precedence === prec) {
+                return op;
+              }
+            } else {
+              return op;
+            }
+          }
+        }
+      }
+      return ret;
+    };
+    Tone.TimeBase.prototype._parseBinary = function (lexer, precedence) {
+      if (this.isUndef(precedence)) {
+        precedence = 2;
+      }
+      var expr;
+      if (precedence < 0) {
+        expr = this._parseUnary(lexer);
+      } else {
+        expr = this._parseBinary(lexer, precedence - 1);
+      }
+      var token = lexer.peek();
+      while (token && this._matchGroup(token, this._binaryExpressions, precedence)) {
+        token = lexer.next();
+        expr = token.method.bind(this, expr, this._parseBinary(lexer, precedence - 1));
+        token = lexer.peek();
+      }
+      return expr;
+    };
+    Tone.TimeBase.prototype._parseUnary = function (lexer) {
+      var token, expr;
+      token = lexer.peek();
+      var op = this._matchGroup(token, this._unaryExpressions);
+      if (op) {
+        token = lexer.next();
+        expr = this._parseUnary(lexer);
+        return op.method.bind(this, expr);
+      }
+      return this._parsePrimary(lexer);
+    };
+    Tone.TimeBase.prototype._parsePrimary = function (lexer) {
+      var token, expr;
+      token = lexer.peek();
+      if (this.isUndef(token)) {
+        throw new SyntaxError('Tone.TimeBase: Unexpected end of expression');
+      }
+      if (this._matchGroup(token, this._primaryExpressions)) {
+        token = lexer.next();
+        var matching = token.value.match(token.regexp);
+        return token.method.bind(this, matching[1], matching[2], matching[3]);
+      }
+      if (token && token.value === '(') {
+        lexer.next();
+        expr = this._parseBinary(lexer);
+        token = lexer.next();
+        if (!(token && token.value === ')')) {
+          throw new SyntaxError('Expected )');
+        }
+        return expr;
+      }
+      throw new SyntaxError('Tone.TimeBase: Cannot process token ' + token.value);
+    };
+    Tone.TimeBase.prototype._parseExprString = function (exprString) {
+      if (!this.isString(exprString)) {
+        exprString = exprString.toString();
+      }
+      var lexer = this._tokenize(exprString);
+      var tree = this._parseBinary(lexer);
+      return tree;
+    };
+    Tone.TimeBase.prototype._noOp = function () {
+      return 0;
+    };
+    Tone.TimeBase.prototype._defaultExpr = function () {
+      return this._noOp;
+    };
+    Tone.TimeBase.prototype._defaultUnits = 's';
+    Tone.TimeBase.prototype._frequencyToUnits = function (freq) {
+      return 1 / freq;
+    };
+    Tone.TimeBase.prototype._beatsToUnits = function (beats) {
+      return 60 / Tone.Transport.bpm.value * beats;
+    };
+    Tone.TimeBase.prototype._secondsToUnits = function (seconds) {
+      return seconds;
+    };
+    Tone.TimeBase.prototype._ticksToUnits = function (ticks) {
+      return ticks * (this._beatsToUnits(1) / Tone.Transport.PPQ);
+    };
+    Tone.TimeBase.prototype._timeSignature = function () {
+      return Tone.Transport.timeSignature;
+    };
+    Tone.TimeBase.prototype._pushExpr = function (val, name, units) {
+      if (!(val instanceof Tone.TimeBase)) {
+        val = new this.constructor(val, units);
+      }
+      this._expr = this._binaryExpressions[name].method.bind(this, this._expr, val._expr);
+      return this;
+    };
+    Tone.TimeBase.prototype.add = function (val, units) {
+      return this._pushExpr(val, '+', units);
+    };
+    Tone.TimeBase.prototype.sub = function (val, units) {
+      return this._pushExpr(val, '-', units);
+    };
+    Tone.TimeBase.prototype.mult = function (val, units) {
+      return this._pushExpr(val, '*', units);
+    };
+    Tone.TimeBase.prototype.div = function (val, units) {
+      return this._pushExpr(val, '/', units);
+    };
+    Tone.TimeBase.prototype.valueOf = function () {
+      return this._expr();
+    };
+    Tone.TimeBase.prototype.dispose = function () {
+      this._expr = null;
+    };
+    return Tone.TimeBase;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_type_Time;
+  Tone_type_Time = function (Tone) {
+    Tone.Time = function (val, units) {
+      if (this instanceof Tone.Time) {
+        this._plusNow = false;
+        Tone.TimeBase.call(this, val, units);
+      } else {
+        return new Tone.Time(val, units);
+      }
+    };
+    Tone.extend(Tone.Time, Tone.TimeBase);
+    Tone.Time.prototype._unaryExpressions = Object.create(Tone.TimeBase.prototype._unaryExpressions);
+    Tone.Time.prototype._unaryExpressions.quantize = {
+      regexp: /^@/,
+      method: function (rh) {
+        return Tone.Transport.nextSubdivision(rh());
+      }
+    };
+    Tone.Time.prototype._unaryExpressions.now = {
+      regexp: /^\+/,
+      method: function (lh) {
+        this._plusNow = true;
+        return lh();
+      }
+    };
+    Tone.Time.prototype.quantize = function (subdiv, percent) {
+      percent = this.defaultArg(percent, 1);
+      this._expr = function (expr, subdivision, percent) {
+        expr = expr();
+        subdivision = subdivision.toSeconds();
+        var multiple = Math.round(expr / subdivision);
+        var ideal = multiple * subdivision;
+        var diff = ideal - expr;
+        return expr + diff * percent;
+      }.bind(this, this._expr, new this.constructor(subdiv), percent);
+      return this;
+    };
+    Tone.Time.prototype.addNow = function () {
+      this._plusNow = true;
+      return this;
+    };
+    Tone.Time.prototype._defaultExpr = function () {
+      this._plusNow = true;
+      return this._noOp;
+    };
+    Tone.Time.prototype.copy = function (time) {
+      Tone.TimeBase.prototype.copy.call(this, time);
+      this._plusNow = time._plusNow;
+      return this;
+    };
+    Tone.Time.prototype.toNotation = function () {
+      var time = this.toSeconds();
+      var testNotations = [
+        '1m',
+        '2n',
+        '4n',
+        '8n',
+        '16n',
+        '32n',
+        '64n',
+        '128n'
+      ];
+      var retNotation = this._toNotationHelper(time, testNotations);
+      var testTripletNotations = [
+        '1m',
+        '2n',
+        '2t',
+        '4n',
+        '4t',
+        '8n',
+        '8t',
+        '16n',
+        '16t',
+        '32n',
+        '32t',
+        '64n',
+        '64t',
+        '128n'
+      ];
+      var retTripletNotation = this._toNotationHelper(time, testTripletNotations);
+      if (retTripletNotation.split('+').length < retNotation.split('+').length) {
+        return retTripletNotation;
+      } else {
+        return retNotation;
+      }
+    };
+    Tone.Time.prototype._toNotationHelper = function (units, testNotations) {
+      var threshold = this._notationToUnits(testNotations[testNotations.length - 1]);
+      var retNotation = '';
+      for (var i = 0; i < testNotations.length; i++) {
+        var notationTime = this._notationToUnits(testNotations[i]);
+        var multiple = units / notationTime;
+        var floatingPointError = 0.000001;
+        if (1 - multiple % 1 < floatingPointError) {
+          multiple += floatingPointError;
+        }
+        multiple = Math.floor(multiple);
+        if (multiple > 0) {
+          if (multiple === 1) {
+            retNotation += testNotations[i];
+          } else {
+            retNotation += multiple.toString() + '*' + testNotations[i];
+          }
+          units -= multiple * notationTime;
+          if (units < threshold) {
+            break;
+          } else {
+            retNotation += ' + ';
+          }
+        }
+      }
+      if (retNotation === '') {
+        retNotation = '0';
+      }
+      return retNotation;
+    };
+    Tone.Time.prototype._notationToUnits = function (notation) {
+      var primaryExprs = this._primaryExpressions;
+      var notationExprs = [
+        primaryExprs.n,
+        primaryExprs.t,
+        primaryExprs.m
+      ];
+      for (var i = 0; i < notationExprs.length; i++) {
+        var expr = notationExprs[i];
+        var match = notation.match(expr.regexp);
+        if (match) {
+          return expr.method.call(this, match[1]);
+        }
+      }
+    };
+    Tone.Time.prototype.toBarsBeatsSixteenths = function () {
+      var quarterTime = this._beatsToUnits(1);
+      var quarters = this.toSeconds() / quarterTime;
+      var measures = Math.floor(quarters / this._timeSignature());
+      var sixteenths = quarters % 1 * 4;
+      quarters = Math.floor(quarters) % this._timeSignature();
+      sixteenths = sixteenths.toString();
+      if (sixteenths.length > 3) {
+        sixteenths = parseFloat(sixteenths).toFixed(3);
+      }
+      var progress = [
+        measures,
+        quarters,
+        sixteenths
+      ];
+      return progress.join(':');
+    };
+    Tone.Time.prototype.toTicks = function () {
+      var quarterTime = this._beatsToUnits(1);
+      var quarters = this.valueOf() / quarterTime;
+      return Math.floor(quarters * Tone.Transport.PPQ);
+    };
+    Tone.Time.prototype.toSamples = function () {
+      return this.toSeconds() * this.context.sampleRate;
+    };
+    Tone.Time.prototype.toFrequency = function () {
+      return 1 / this.toSeconds();
+    };
+    Tone.Time.prototype.toSeconds = function () {
+      return this.valueOf();
+    };
+    Tone.Time.prototype.toMilliseconds = function () {
+      return this.toSeconds() * 1000;
+    };
+    Tone.Time.prototype.valueOf = function () {
+      var val = this._expr();
+      return val + (this._plusNow ? this.now() : 0);
+    };
+    return Tone.Time;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_type_Frequency;
+  Tone_type_Frequency = function (Tone) {
+    Tone.Frequency = function (val, units) {
+      if (this instanceof Tone.Frequency) {
+        Tone.TimeBase.call(this, val, units);
+      } else {
+        return new Tone.Frequency(val, units);
+      }
+    };
+    Tone.extend(Tone.Frequency, Tone.TimeBase);
+    Tone.Frequency.prototype._primaryExpressions = Object.create(Tone.TimeBase.prototype._primaryExpressions);
+    Tone.Frequency.prototype._primaryExpressions.midi = {
+      regexp: /^(\d+(?:\.\d+)?midi)/,
+      method: function (value) {
+        return this.midiToFrequency(value);
+      }
+    };
+    Tone.Frequency.prototype._primaryExpressions.note = {
+      regexp: /^([a-g]{1}(?:b|#|x|bb)?)(-?[0-9]+)/i,
+      method: function (pitch, octave) {
+        var index = noteToScaleIndex[pitch.toLowerCase()];
+        var noteNumber = index + (parseInt(octave) + 1) * 12;
+        return this.midiToFrequency(noteNumber);
+      }
+    };
+    Tone.Frequency.prototype._primaryExpressions.tr = {
+      regexp: /^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?):?(\d+(?:\.\d+)?)?/,
+      method: function (m, q, s) {
+        var total = 1;
+        if (m && m !== '0') {
+          total *= this._beatsToUnits(this._timeSignature() * parseFloat(m));
+        }
+        if (q && q !== '0') {
+          total *= this._beatsToUnits(parseFloat(q));
+        }
+        if (s && s !== '0') {
+          total *= this._beatsToUnits(parseFloat(s) / 4);
+        }
+        return total;
+      }
+    };
+    Tone.Frequency.prototype.transpose = function (interval) {
+      this._expr = function (expr, interval) {
+        var val = expr();
+        return val * this.intervalToFrequencyRatio(interval);
+      }.bind(this, this._expr, interval);
+      return this;
+    };
+    Tone.Frequency.prototype.harmonize = function (intervals) {
+      this._expr = function (expr, intervals) {
+        var val = expr();
+        var ret = [];
+        for (var i = 0; i < intervals.length; i++) {
+          ret[i] = val * this.intervalToFrequencyRatio(intervals[i]);
+        }
+        return ret;
+      }.bind(this, this._expr, intervals);
+      return this;
+    };
+    Tone.Frequency.prototype.toMidi = function () {
+      return this.frequencyToMidi(this.valueOf());
+    };
+    Tone.Frequency.prototype.toNote = function () {
+      var freq = this.valueOf();
+      var log = Math.log(freq / Tone.Frequency.A4) / Math.LN2;
+      var noteNumber = Math.round(12 * log) + 57;
+      var octave = Math.floor(noteNumber / 12);
+      if (octave < 0) {
+        noteNumber += -12 * octave;
+      }
+      var noteName = scaleIndexToNote[noteNumber % 12];
+      return noteName + octave.toString();
+    };
+    Tone.Frequency.prototype.toSeconds = function () {
+      return 1 / this.valueOf();
+    };
+    Tone.Frequency.prototype.toFrequency = function () {
+      return this.valueOf();
+    };
+    Tone.Frequency.prototype.toTicks = function () {
+      var quarterTime = this._beatsToUnits(1);
+      var quarters = this.valueOf() / quarterTime;
+      return Math.floor(quarters * Tone.Transport.PPQ);
+    };
+    Tone.Frequency.prototype._frequencyToUnits = function (freq) {
+      return freq;
+    };
+    Tone.Frequency.prototype._ticksToUnits = function (ticks) {
+      return 1 / (ticks * 60 / (Tone.Transport.bpm.value * Tone.Transport.PPQ));
+    };
+    Tone.Frequency.prototype._beatsToUnits = function (beats) {
+      return 1 / Tone.TimeBase.prototype._beatsToUnits.call(this, beats);
+    };
+    Tone.Frequency.prototype._secondsToUnits = function (seconds) {
+      return 1 / seconds;
+    };
+    Tone.Frequency.prototype._defaultUnits = 'hz';
+    var noteToScaleIndex = {
+      'cbb': -2,
+      'cb': -1,
+      'c': 0,
+      'c#': 1,
+      'cx': 2,
+      'dbb': 0,
+      'db': 1,
+      'd': 2,
+      'd#': 3,
+      'dx': 4,
+      'ebb': 2,
+      'eb': 3,
+      'e': 4,
+      'e#': 5,
+      'ex': 6,
+      'fbb': 3,
+      'fb': 4,
+      'f': 5,
+      'f#': 6,
+      'fx': 7,
+      'gbb': 5,
+      'gb': 6,
+      'g': 7,
+      'g#': 8,
+      'gx': 9,
+      'abb': 7,
+      'ab': 8,
+      'a': 9,
+      'a#': 10,
+      'ax': 11,
+      'bbb': 9,
+      'bb': 10,
+      'b': 11,
+      'b#': 12,
+      'bx': 13
+    };
+    var scaleIndexToNote = [
+      'C',
+      'C#',
+      'D',
+      'D#',
+      'E',
+      'F',
+      'F#',
+      'G',
+      'G#',
+      'A',
+      'A#',
+      'B'
+    ];
+    Tone.Frequency.A4 = 440;
+    Tone.Frequency.prototype.midiToFrequency = function (midi) {
+      return Tone.Frequency.A4 * Math.pow(2, (midi - 69) / 12);
+    };
+    Tone.Frequency.prototype.frequencyToMidi = function (frequency) {
+      return 69 + 12 * Math.log(frequency / Tone.Frequency.A4) / Math.LN2;
+    };
+    return Tone.Frequency;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_type_TransportTime;
+  Tone_type_TransportTime = function (Tone) {
+    Tone.TransportTime = function (val, units) {
+      if (this instanceof Tone.TransportTime) {
+        Tone.Time.call(this, val, units);
+      } else {
+        return new Tone.TransportTime(val, units);
+      }
+    };
+    Tone.extend(Tone.TransportTime, Tone.Time);
+    Tone.TransportTime.prototype._unaryExpressions = Object.create(Tone.Time.prototype._unaryExpressions);
+    Tone.TransportTime.prototype._unaryExpressions.quantize = {
+      regexp: /^@/,
+      method: function (rh) {
+        var subdivision = this._secondsToTicks(rh());
+        var multiple = Math.ceil(Tone.Transport.ticks / subdivision);
+        return this._ticksToUnits(multiple * subdivision);
+      }
+    };
+    Tone.TransportTime.prototype._secondsToTicks = function (seconds) {
+      var quarterTime = this._beatsToUnits(1);
+      var quarters = seconds / quarterTime;
+      return Math.round(quarters * Tone.Transport.PPQ);
+    };
+    Tone.TransportTime.prototype.valueOf = function () {
+      var val = this._secondsToTicks(this._expr());
+      return val + (this._plusNow ? Tone.Transport.ticks : 0);
+    };
+    Tone.TransportTime.prototype.toTicks = function () {
+      return this.valueOf();
+    };
+    Tone.TransportTime.prototype.toSeconds = function () {
+      var val = this._expr();
+      return val + (this._plusNow ? Tone.Transport.seconds : 0);
+    };
+    Tone.TransportTime.prototype.toFrequency = function () {
+      return 1 / this.toSeconds();
+    };
+    return Tone.TransportTime;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_core_Emitter;
+  Tone_core_Emitter = function (Tone) {
+    'use strict';
+    Tone.Emitter = function () {
+      this._events = {};
+    };
+    Tone.extend(Tone.Emitter);
+    Tone.Emitter.prototype.on = function (event, callback) {
+      var events = event.split(/\W+/);
+      for (var i = 0; i < events.length; i++) {
+        var eventName = events[i];
+        if (!this._events.hasOwnProperty(eventName)) {
+          this._events[eventName] = [];
+        }
+        this._events[eventName].push(callback);
+      }
+      return this;
+    };
+    Tone.Emitter.prototype.off = function (event, callback) {
+      var events = event.split(/\W+/);
+      for (var ev = 0; ev < events.length; ev++) {
+        event = events[ev];
+        if (this._events.hasOwnProperty(event)) {
+          if (Tone.prototype.isUndef(callback)) {
+            this._events[event] = [];
+          } else {
+            var eventList = this._events[event];
+            for (var i = 0; i < eventList.length; i++) {
+              if (eventList[i] === callback) {
+                eventList.splice(i, 1);
+              }
+            }
+          }
+        }
+      }
+      return this;
+    };
+    Tone.Emitter.prototype.emit = function (event) {
+      if (this._events) {
+        var args = Array.apply(null, arguments).slice(1);
+        if (this._events.hasOwnProperty(event)) {
+          var eventList = this._events[event];
+          for (var i = 0, len = eventList.length; i < len; i++) {
+            eventList[i].apply(this, args);
+          }
+        }
+      }
+      return this;
+    };
+    Tone.Emitter.mixin = function (object) {
+      var functions = [
+        'on',
+        'off',
+        'emit'
+      ];
+      object._events = {};
+      for (var i = 0; i < functions.length; i++) {
+        var func = functions[i];
+        var emitterFunc = Tone.Emitter.prototype[func];
+        object[func] = emitterFunc;
+      }
+    };
+    Tone.Emitter.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._events = null;
+      return this;
+    };
+    return Tone.Emitter;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_core_Context;
+  Tone_core_Context = function (Tone) {
+    if (!window.hasOwnProperty('AudioContext') && window.hasOwnProperty('webkitAudioContext')) {
+      window.AudioContext = window.webkitAudioContext;
+    }
+    Tone.Context = function (context) {
+      Tone.Emitter.call(this);
+      if (!context) {
+        context = new window.AudioContext();
+      }
+      this._context = context;
+      for (var prop in this._context) {
+        this._defineProperty(this._context, prop);
+      }
+      this._latencyHint = 'interactive';
+      this._lookAhead = 0.1;
+      this._updateInterval = this._lookAhead / 3;
+      this._computedUpdateInterval = 0;
+      this._worker = this._createWorker();
+      this._constants = {};
+    };
+    Tone.extend(Tone.Context, Tone.Emitter);
+    Tone.Emitter.mixin(Tone.Context);
+    Tone.Context.prototype._defineProperty = function (context, prop) {
+      if (this.isUndef(this[prop])) {
+        Object.defineProperty(this, prop, {
+          get: function () {
+            if (typeof context[prop] === 'function') {
+              return context[prop].bind(context);
+            } else {
+              return context[prop];
+            }
+          },
+          set: function (val) {
+            context[prop] = val;
+          }
+        });
+      }
+    };
+    Tone.Context.prototype.now = function () {
+      return this._context.currentTime;
+    };
+    Tone.Context.prototype._createWorker = function () {
+      window.URL = window.URL || window.webkitURL;
+      var blob = new Blob(['var timeoutTime = ' + (this._updateInterval * 1000).toFixed(1) + ';' + 'self.onmessage = function(msg){' + '\ttimeoutTime = parseInt(msg.data);' + '};' + 'function tick(){' + '\tsetTimeout(tick, timeoutTime);' + '\tself.postMessage(\'tick\');' + '}' + 'tick();']);
+      var blobUrl = URL.createObjectURL(blob);
+      var worker = new Worker(blobUrl);
+      worker.addEventListener('message', function () {
+        this.emit('tick');
+      }.bind(this));
+      worker.addEventListener('message', function () {
+        var now = this.now();
+        if (this.isNumber(this._lastUpdate)) {
+          var diff = now - this._lastUpdate;
+          this._computedUpdateInterval = Math.max(diff, this._computedUpdateInterval * 0.97);
+        }
+        this._lastUpdate = now;
+      }.bind(this));
+      return worker;
+    };
+    Tone.Context.prototype.getConstant = function (val) {
+      if (this._constants[val]) {
+        return this._constants[val];
+      } else {
+        var buffer = this._context.createBuffer(1, 128, this._context.sampleRate);
+        var arr = buffer.getChannelData(0);
+        for (var i = 0; i < arr.length; i++) {
+          arr[i] = val;
+        }
+        var constant = this._context.createBufferSource();
+        constant.channelCount = 1;
+        constant.channelCountMode = 'explicit';
+        constant.buffer = buffer;
+        constant.loop = true;
+        constant.start(0);
+        this._constants[val] = constant;
+        return constant;
+      }
+    };
+    Object.defineProperty(Tone.Context.prototype, 'lag', {
+      get: function () {
+        var diff = this._computedUpdateInterval - this._updateInterval;
+        diff = Math.max(diff, 0);
+        return diff;
+      }
+    });
+    Object.defineProperty(Tone.Context.prototype, 'lookAhead', {
+      get: function () {
+        return this._lookAhead;
+      },
+      set: function (lA) {
+        this._lookAhead = lA;
+      }
+    });
+    Object.defineProperty(Tone.Context.prototype, 'updateInterval', {
+      get: function () {
+        return this._updateInterval;
+      },
+      set: function (interval) {
+        this._updateInterval = Math.max(interval, Tone.prototype.blockTime);
+        this._worker.postMessage(Math.max(interval * 1000, 1));
+      }
+    });
+    Object.defineProperty(Tone.Context.prototype, 'latencyHint', {
+      get: function () {
+        return this._latencyHint;
+      },
+      set: function (hint) {
+        var lookAhead = hint;
+        this._latencyHint = hint;
+        if (this.isString(hint)) {
+          switch (hint) {
+          case 'interactive':
+            lookAhead = 0.1;
+            this._context.latencyHint = hint;
+            break;
+          case 'playback':
+            lookAhead = 0.8;
+            this._context.latencyHint = hint;
+            break;
+          case 'balanced':
+            lookAhead = 0.25;
+            this._context.latencyHint = hint;
+            break;
+          case 'fastest':
+            lookAhead = 0.01;
+            break;
+          }
+        }
+        this.lookAhead = lookAhead;
+        this.updateInterval = lookAhead / 3;
+      }
+    });
+    function shimConnect() {
+      var nativeConnect = AudioNode.prototype.connect;
+      var nativeDisconnect = AudioNode.prototype.disconnect;
+      function toneConnect(B, outNum, inNum) {
+        if (B.input) {
+          if (Array.isArray(B.input)) {
+            if (Tone.prototype.isUndef(inNum)) {
+              inNum = 0;
+            }
+            this.connect(B.input[inNum]);
+          } else {
+            this.connect(B.input, outNum, inNum);
+          }
+        } else {
+          try {
+            if (B instanceof AudioNode) {
+              nativeConnect.call(this, B, outNum, inNum);
+            } else {
+              nativeConnect.call(this, B, outNum);
+            }
+          } catch (e) {
+            throw new Error('error connecting to node: ' + B + '\n' + e);
+          }
+        }
+      }
+      function toneDisconnect(B, outNum, inNum) {
+        if (B && B.input && Array.isArray(B.input)) {
+          if (Tone.prototype.isUndef(inNum)) {
+            inNum = 0;
+          }
+          this.disconnect(B.input[inNum], outNum, inNum);
+        } else if (B && B.input) {
+          this.disconnect(B.input, outNum, inNum);
+        } else {
+          try {
+            nativeDisconnect.apply(this, arguments);
+          } catch (e) {
+            throw new Error('error disconnecting node: ' + B + '\n' + e);
+          }
+        }
+      }
+      if (AudioNode.prototype.connect !== toneConnect) {
+        AudioNode.prototype.connect = toneConnect;
+        AudioNode.prototype.disconnect = toneDisconnect;
+      }
+    }
+    if (Tone.supported) {
+      shimConnect();
+      Tone.context = new Tone.Context();
+    } else {
+      console.warn('This browser does not support Tone.js');
+    }
+    return Tone.Context;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_type_Type;
+  Tone_type_Type = function (Tone) {
+    Tone.Type = {
+      Default: 'number',
+      Time: 'time',
+      Frequency: 'frequency',
+      TransportTime: 'transportTime',
+      Ticks: 'ticks',
+      NormalRange: 'normalRange',
+      AudioRange: 'audioRange',
+      Decibels: 'db',
+      Interval: 'interval',
+      BPM: 'bpm',
+      Positive: 'positive',
+      Cents: 'cents',
+      Degrees: 'degrees',
+      MIDI: 'midi',
+      BarsBeatsSixteenths: 'barsBeatsSixteenths',
+      Samples: 'samples',
+      Hertz: 'hertz',
+      Note: 'note',
+      Milliseconds: 'milliseconds',
+      Seconds: 'seconds',
+      Notation: 'notation'
+    };
+    Tone.prototype.toSeconds = function (time) {
+      if (this.isNumber(time)) {
+        return time;
+      } else if (this.isUndef(time)) {
+        return this.now();
+      } else if (this.isString(time)) {
+        return new Tone.Time(time).toSeconds();
+      } else if (time instanceof Tone.TimeBase) {
+        return time.toSeconds();
+      }
+    };
+    Tone.prototype.toFrequency = function (freq) {
+      if (this.isNumber(freq)) {
+        return freq;
+      } else if (this.isString(freq) || this.isUndef(freq)) {
+        return new Tone.Frequency(freq).valueOf();
+      } else if (freq instanceof Tone.TimeBase) {
+        return freq.toFrequency();
+      }
+    };
+    Tone.prototype.toTicks = function (time) {
+      if (this.isNumber(time) || this.isString(time)) {
+        return new Tone.TransportTime(time).toTicks();
+      } else if (this.isUndef(time)) {
+        return Tone.Transport.ticks;
+      } else if (time instanceof Tone.TimeBase) {
+        return time.toTicks();
+      }
+    };
+    return Tone;
+  }(Tone_core_Tone, Tone_type_Time, Tone_type_Frequency, Tone_type_TransportTime);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_core_Param;
+  Tone_core_Param = function (Tone) {
+    'use strict';
+    Tone.Param = function () {
+      var options = this.optionsObject(arguments, [
+        'param',
+        'units',
+        'convert'
+      ], Tone.Param.defaults);
+      this._param = this.input = options.param;
+      this.units = options.units;
+      this.convert = options.convert;
+      this.overridden = false;
+      this._lfo = null;
+      if (this.isObject(options.lfo)) {
+        this.value = options.lfo;
+      } else if (!this.isUndef(options.value)) {
+        this.value = options.value;
+      }
+    };
+    Tone.extend(Tone.Param);
+    Tone.Param.defaults = {
+      'units': Tone.Type.Default,
+      'convert': true,
+      'param': undefined
+    };
+    Object.defineProperty(Tone.Param.prototype, 'value', {
+      get: function () {
+        return this._toUnits(this._param.value);
+      },
+      set: function (value) {
+        if (this.isObject(value)) {
+          if (this.isUndef(Tone.LFO)) {
+            throw new Error('Include \'Tone.LFO\' to use an LFO as a Param value.');
+          }
+          if (this._lfo) {
+            this._lfo.dispose();
+          }
+          this._lfo = new Tone.LFO(value).start();
+          this._lfo.connect(this.input);
+        } else {
+          var convertedVal = this._fromUnits(value);
+          this._param.cancelScheduledValues(0);
+          this._param.value = convertedVal;
+        }
+      }
+    });
+    Tone.Param.prototype._fromUnits = function (val) {
+      if (this.convert || this.isUndef(this.convert)) {
+        switch (this.units) {
+        case Tone.Type.Time:
+          return this.toSeconds(val);
+        case Tone.Type.Frequency:
+          return this.toFrequency(val);
+        case Tone.Type.Decibels:
+          return this.dbToGain(val);
+        case Tone.Type.NormalRange:
+          return Math.min(Math.max(val, 0), 1);
+        case Tone.Type.AudioRange:
+          return Math.min(Math.max(val, -1), 1);
+        case Tone.Type.Positive:
+          return Math.max(val, 0);
+        default:
+          return val;
+        }
+      } else {
+        return val;
+      }
+    };
+    Tone.Param.prototype._toUnits = function (val) {
+      if (this.convert || this.isUndef(this.convert)) {
+        switch (this.units) {
+        case Tone.Type.Decibels:
+          return this.gainToDb(val);
+        default:
+          return val;
+        }
+      } else {
+        return val;
+      }
+    };
+    Tone.Param.prototype._minOutput = 0.00001;
+    Tone.Param.prototype.setValueAtTime = function (value, time) {
+      value = this._fromUnits(value);
+      time = this.toSeconds(time);
+      if (time <= this.now() + this.blockTime) {
+        this._param.value = value;
+      } else {
+        this._param.setValueAtTime(value, time);
+      }
+      return this;
+    };
+    Tone.Param.prototype.setRampPoint = function (now) {
+      now = this.defaultArg(now, this.now());
+      var currentVal = this._param.value;
+      if (currentVal === 0) {
+        currentVal = this._minOutput;
+      }
+      this._param.setValueAtTime(currentVal, now);
+      return this;
+    };
+    Tone.Param.prototype.linearRampToValueAtTime = function (value, endTime) {
+      value = this._fromUnits(value);
+      this._param.linearRampToValueAtTime(value, this.toSeconds(endTime));
+      return this;
+    };
+    Tone.Param.prototype.exponentialRampToValueAtTime = function (value, endTime) {
+      value = this._fromUnits(value);
+      value = Math.max(this._minOutput, value);
+      this._param.exponentialRampToValueAtTime(value, this.toSeconds(endTime));
+      return this;
+    };
+    Tone.Param.prototype.exponentialRampToValue = function (value, rampTime, startTime) {
+      startTime = this.toSeconds(startTime);
+      this.setRampPoint(startTime);
+      this.exponentialRampToValueAtTime(value, startTime + this.toSeconds(rampTime));
+      return this;
+    };
+    Tone.Param.prototype.linearRampToValue = function (value, rampTime, startTime) {
+      startTime = this.toSeconds(startTime);
+      this.setRampPoint(startTime);
+      this.linearRampToValueAtTime(value, startTime + this.toSeconds(rampTime));
+      return this;
+    };
+    Tone.Param.prototype.setTargetAtTime = function (value, startTime, timeConstant) {
+      value = this._fromUnits(value);
+      value = Math.max(this._minOutput, value);
+      timeConstant = Math.max(this._minOutput, timeConstant);
+      this._param.setTargetAtTime(value, this.toSeconds(startTime), timeConstant);
+      return this;
+    };
+    Tone.Param.prototype.setValueCurveAtTime = function (values, startTime, duration) {
+      for (var i = 0; i < values.length; i++) {
+        values[i] = this._fromUnits(values[i]);
+      }
+      this._param.setValueCurveAtTime(values, this.toSeconds(startTime), this.toSeconds(duration));
+      return this;
+    };
+    Tone.Param.prototype.cancelScheduledValues = function (startTime) {
+      this._param.cancelScheduledValues(this.toSeconds(startTime));
+      return this;
+    };
+    Tone.Param.prototype.rampTo = function (value, rampTime, startTime) {
+      rampTime = this.defaultArg(rampTime, 0);
+      if (this.units === Tone.Type.Frequency || this.units === Tone.Type.BPM || this.units === Tone.Type.Decibels) {
+        this.exponentialRampToValue(value, rampTime, startTime);
+      } else {
+        this.linearRampToValue(value, rampTime, startTime);
+      }
+      return this;
+    };
+    Object.defineProperty(Tone.Param.prototype, 'lfo', {
+      get: function () {
+        return this._lfo;
+      }
+    });
+    Tone.Param.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._param = null;
+      if (this._lfo) {
+        this._lfo.dispose();
+        this._lfo = null;
+      }
+      return this;
+    };
+    return Tone.Param;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_core_Gain;
+  Tone_core_Gain = function (Tone) {
+    'use strict';
+    if (window.GainNode && !AudioContext.prototype.createGain) {
+      AudioContext.prototype.createGain = AudioContext.prototype.createGainNode;
+    }
+    Tone.Gain = function () {
+      var options = this.optionsObject(arguments, [
+        'gain',
+        'units'
+      ], Tone.Gain.defaults);
+      this.input = this.output = this._gainNode = this.context.createGain();
+      this.gain = new Tone.Param({
+        'param': this._gainNode.gain,
+        'units': options.units,
+        'value': options.gain,
+        'convert': options.convert
+      });
+      this._readOnly('gain');
+    };
+    Tone.extend(Tone.Gain);
+    Tone.Gain.defaults = {
+      'gain': 1,
+      'convert': true
+    };
+    Tone.Gain.prototype.dispose = function () {
+      Tone.Param.prototype.dispose.call(this);
+      this._gainNode.disconnect();
+      this._gainNode = null;
+      this._writable('gain');
+      this.gain.dispose();
+      this.gain = null;
+    };
+    Tone.prototype.createInsOuts = function (inputs, outputs) {
+      if (inputs === 1) {
+        this.input = new Tone.Gain();
+      } else if (inputs > 1) {
+        this.input = new Array(inputs);
+      }
+      if (outputs === 1) {
+        this.output = new Tone.Gain();
+      } else if (outputs > 1) {
+        this.output = new Array(inputs);
+      }
+    };
+    return Tone.Gain;
+  }(Tone_core_Tone, Tone_core_Param);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Signal;
+  Tone_signal_Signal = function (Tone) {
+    'use strict';
+    Tone.Signal = function () {
+      var options = this.optionsObject(arguments, [
+        'value',
+        'units'
+      ], Tone.Signal.defaults);
+      this.output = this._gain = this.context.createGain();
+      options.param = this._gain.gain;
+      Tone.Param.call(this, options);
+      this.input = this._param = this._gain.gain;
+      this.context.getConstant(1).chain(this._gain);
+    };
+    Tone.extend(Tone.Signal, Tone.Param);
+    Tone.Signal.defaults = {
+      'value': 0,
+      'units': Tone.Type.Default,
+      'convert': true
+    };
+    Tone.Signal.prototype.connect = Tone.SignalBase.prototype.connect;
+    Tone.Signal.prototype.dispose = function () {
+      Tone.Param.prototype.dispose.call(this);
+      this._param = null;
+      this._gain.disconnect();
+      this._gain = null;
+      return this;
+    };
+    return Tone.Signal;
+  }(Tone_core_Tone, Tone_signal_WaveShaper, Tone_type_Type, Tone_core_Param);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Add;
+  Tone_signal_Add = function (Tone) {
+    'use strict';
+    Tone.Add = function (value) {
+      this.createInsOuts(2, 0);
+      this._sum = this.input[0] = this.input[1] = this.output = new Tone.Gain();
+      this._param = this.input[1] = new Tone.Signal(value);
+      this._param.connect(this._sum);
+    };
+    Tone.extend(Tone.Add, Tone.Signal);
+    Tone.Add.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._sum.dispose();
+      this._sum = null;
+      this._param.dispose();
+      this._param = null;
+      return this;
+    };
+    return Tone.Add;
+  }(Tone_core_Tone, Tone_signal_Signal);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Multiply;
+  Tone_signal_Multiply = function (Tone) {
+    'use strict';
+    Tone.Multiply = function (value) {
+      this.createInsOuts(2, 0);
+      this._mult = this.input[0] = this.output = new Tone.Gain();
+      this._param = this.input[1] = this.output.gain;
+      this._param.value = this.defaultArg(value, 0);
+    };
+    Tone.extend(Tone.Multiply, Tone.Signal);
+    Tone.Multiply.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._mult.dispose();
+      this._mult = null;
+      this._param = null;
+      return this;
+    };
+    return Tone.Multiply;
+  }(Tone_core_Tone, Tone_signal_Signal);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Scale;
+  Tone_signal_Scale = function (Tone) {
+    'use strict';
+    Tone.Scale = function (outputMin, outputMax) {
+      this._outputMin = this.defaultArg(outputMin, 0);
+      this._outputMax = this.defaultArg(outputMax, 1);
+      this._scale = this.input = new Tone.Multiply(1);
+      this._add = this.output = new Tone.Add(0);
+      this._scale.connect(this._add);
+      this._setRange();
+    };
+    Tone.extend(Tone.Scale, Tone.SignalBase);
+    Object.defineProperty(Tone.Scale.prototype, 'min', {
+      get: function () {
+        return this._outputMin;
+      },
+      set: function (min) {
+        this._outputMin = min;
+        this._setRange();
+      }
+    });
+    Object.defineProperty(Tone.Scale.prototype, 'max', {
+      get: function () {
+        return this._outputMax;
+      },
+      set: function (max) {
+        this._outputMax = max;
+        this._setRange();
+      }
+    });
+    Tone.Scale.prototype._setRange = function () {
+      this._add.value = this._outputMin;
+      this._scale.value = this._outputMax - this._outputMin;
+    };
+    Tone.Scale.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._add.dispose();
+      this._add = null;
+      this._scale.dispose();
+      this._scale = null;
+      return this;
+    };
+    return Tone.Scale;
+  }(Tone_core_Tone, Tone_signal_Add, Tone_signal_Multiply);
+  var signal;
+  'use strict';
+  signal = function () {
+    // Signal is built with the Tone.js signal by Yotam Mann
+    // https://github.com/TONEnoTONE/Tone.js/
+    var Signal = Tone_signal_Signal;
+    var Add = Tone_signal_Add;
+    var Mult = Tone_signal_Multiply;
+    var Scale = Tone_signal_Scale;
+    var Tone = Tone_core_Tone;
+    var p5sound = master;
+    Tone.setContext(p5sound.audiocontext);
+    /**
+     *  
p5.Signal is a constant audio-rate signal used by p5.Oscillator
+     *  and p5.Envelope for modulation math.

+     *
+     *  
This is necessary because Web Audio is processed on a seprate clock.
+     *  For example, the p5 draw loop runs about 60 times per second. But
+     *  the audio clock must process samples 44100 times per second. If we
+     *  want to add a value to each of those samples, we can't do it in the
+     *  draw loop, but we can do it by adding a constant-rate audio signal.This class mostly functions behind the scenes in p5.sound, and returns
+     *  a Tone.Signal from the Tone.js library by Yotam Mann.
+     *  If you want to work directly with audio signals for modular
+     *  synthesis, check out
+     *  tone.js.

+     *
+     *  @class  p5.Signal
+     *  @constructor
+     *  @return {Tone.Signal} A Signal object from the Tone.js library
+     *  @example
+     *  

+     *  function setup() {
+     *    carrier = new p5.Oscillator('sine');
+     *    carrier.amp(1); // set amplitude
+     *    carrier.freq(220); // set frequency
+     *    carrier.start(); // start oscillating
+     *
+     *    modulator = new p5.Oscillator('sawtooth');
+     *    modulator.disconnect();
+     *    modulator.amp(1);
+     *    modulator.freq(4);
+     *    modulator.start();
+     *
+     *    // Modulator's default amplitude range is -1 to 1.
+     *    // Multiply it by -200, so the range is -200 to 200
+     *    // then add 220 so the range is 20 to 420
+     *    carrier.freq( modulator.mult(-200).add(220) );
+     *  }
+     *  

+     */
+    p5.Signal = function (value) {
+      var s = new Signal(value);
+      // p5sound.soundArray.push(s);
+      return s;
+    };
+    /**
+     *  Fade to value, for smooth transitions
+     *
+     *  @method  fade
+     *  @param  {Number} value          Value to set this signal
+     *  @param  {Number} [secondsFromNow] Length of fade, in seconds from now
+     */
+    Signal.prototype.fade = Signal.prototype.linearRampToValueAtTime;
+    Mult.prototype.fade = Signal.prototype.fade;
+    Add.prototype.fade = Signal.prototype.fade;
+    Scale.prototype.fade = Signal.prototype.fade;
+    /**
+     *  Connect a p5.sound object or Web Audio node to this
+     *  p5.Signal so that its amplitude values can be scaled.
+     *
+     *  @method setInput
+     *  @param {Object} input
+     */
+    Signal.prototype.setInput = function (_input) {
+      _input.connect(this);
+    };
+    Mult.prototype.setInput = Signal.prototype.setInput;
+    Add.prototype.setInput = Signal.prototype.setInput;
+    Scale.prototype.setInput = Signal.prototype.setInput;
+    // signals can add / mult / scale themselves
+    /**
+     *  Add a constant value to this audio signal,
+     *  and return the resulting audio signal. Does
+     *  not change the value of the original signal,
+     *  instead it returns a new p5.SignalAdd.
+     *
+     *  @method  add
+     *  @param {Number} number
+     *  @return {p5.Signal} object
+     */
+    Signal.prototype.add = function (num) {
+      var add = new Add(num);
+      // add.setInput(this);
+      this.connect(add);
+      return add;
+    };
+    Mult.prototype.add = Signal.prototype.add;
+    Add.prototype.add = Signal.prototype.add;
+    Scale.prototype.add = Signal.prototype.add;
+    /**
+     *  Multiply this signal by a constant value,
+     *  and return the resulting audio signal. Does
+     *  not change the value of the original signal,
+     *  instead it returns a new p5.SignalMult.
+     *
+     *  @method  mult
+     *  @param {Number} number to multiply
+     *  @return {p5.Signal} object
+     */
+    Signal.prototype.mult = function (num) {
+      var mult = new Mult(num);
+      // mult.setInput(this);
+      this.connect(mult);
+      return mult;
+    };
+    Mult.prototype.mult = Signal.prototype.mult;
+    Add.prototype.mult = Signal.prototype.mult;
+    Scale.prototype.mult = Signal.prototype.mult;
+    /**
+     *  Scale this signal value to a given range,
+     *  and return the result as an audio signal. Does
+     *  not change the value of the original signal,
+     *  instead it returns a new p5.SignalScale.
+     *
+     *  @method  scale
+     *  @param {Number} number to multiply
+     *  @param  {Number} inMin  input range minumum
+     *  @param  {Number} inMax  input range maximum
+     *  @param  {Number} outMin input range minumum
+     *  @param  {Number} outMax input range maximum
+     *  @return {p5.Signal} object
+     */
+    Signal.prototype.scale = function (inMin, inMax, outMin, outMax) {
+      var mapOutMin, mapOutMax;
+      if (arguments.length === 4) {
+        mapOutMin = p5.prototype.map(outMin, inMin, inMax, 0, 1) - 0.5;
+        mapOutMax = p5.prototype.map(outMax, inMin, inMax, 0, 1) - 0.5;
+      } else {
+        mapOutMin = arguments[0];
+        mapOutMax = arguments[1];
+      }
+      var scale = new Scale(mapOutMin, mapOutMax);
+      this.connect(scale);
+      return scale;
+    };
+    Mult.prototype.scale = Signal.prototype.scale;
+    Add.prototype.scale = Signal.prototype.scale;
+    Scale.prototype.scale = Signal.prototype.scale;
+  }(Tone_signal_Signal, Tone_signal_Add, Tone_signal_Multiply, Tone_signal_Scale, Tone_core_Tone, master);
+  var oscillator;
+  'use strict';
+  oscillator = function () {
+    var p5sound = master;
+    var Add = Tone_signal_Add;
+    var Mult = Tone_signal_Multiply;
+    var Scale = Tone_signal_Scale;
+    /**
+     *  
Creates a signal that oscillates between -1.0 and 1.0.
+     *  By default, the oscillation takes the form of a sinusoidal
+     *  shape ('sine'). Additional types include 'triangle',
+     *  'sawtooth' and 'square'. The frequency defaults to
+     *  440 oscillations per second (440Hz, equal to the pitch of an
+     *  'A' note).

+     *
+     *  
Set the type of oscillation with setType(), or by instantiating a
+     *  specific oscillator: p5.SinOsc, p5.TriOsc, p5.SqrOsc, or p5.SawOsc.
+     *  

+     *
+     *  @class p5.Oscillator
+     *  @constructor
+     *  @param {Number} [freq] frequency defaults to 440Hz
+     *  @param {String} [type] type of oscillator. Options:
+     *                         'sine' (default), 'triangle',
+     *                         'sawtooth', 'square'
+     *  @example
+     *  

+     *  var osc;
+     *  var playing = false;
+     *
+     *  function setup() {
+     *    backgroundColor = color(255,0,255);
+     *    textAlign(CENTER);
+     *
+     *    osc = new p5.Oscillator();
+     *    osc.setType('sine');
+     *    osc.freq(240);
+     *    osc.amp(0);
+     *    osc.start();
+     *  }
+     *
+     *  function draw() {
+     *    background(backgroundColor)
+     *    text('click to play', width/2, height/2);
+     *  }
+     *
+     *  function mouseClicked() {
+     *    if (mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0) {
+     *      if (!playing) {
+     *        // ramp amplitude to 0.5 over 0.05 seconds
+     *        osc.amp(0.5, 0.05);
+     *        playing = true;
+     *        backgroundColor = color(0,255,255);
+     *      } else {
+     *        // ramp amplitude to 0 over 0.5 seconds
+     *        osc.amp(0, 0.5);
+     *        playing = false;
+     *        backgroundColor = color(255,0,255);
+     *      }
+     *    }
+     *  }
+     *   

+     */
+    p5.Oscillator = function (freq, type) {
+      if (typeof freq === 'string') {
+        var f = type;
+        type = freq;
+        freq = f;
+      }
+      if (typeof type === 'number') {
+        var f = type;
+        type = freq;
+        freq = f;
+      }
+      this.started = false;
+      // components
+      this.phaseAmount = undefined;
+      this.oscillator = p5sound.audiocontext.createOscillator();
+      this.f = freq || 440;
+      // frequency
+      this.oscillator.type = type || 'sine';
+      this.oscillator.frequency.setValueAtTime(this.f, p5sound.audiocontext.currentTime);
+      // connections
+      this.output = p5sound.audiocontext.createGain();
+      this._freqMods = [];
+      // modulators connected to this oscillator's frequency
+      // set default output gain to 0.5
+      this.output.gain.value = 0.5;
+      this.output.gain.setValueAtTime(0.5, p5sound.audiocontext.currentTime);
+      this.oscillator.connect(this.output);
+      // stereo panning
+      this.panPosition = 0;
+      this.connection = p5sound.input;
+      // connect to p5sound by default
+      this.panner = new p5.Panner(this.output, this.connection, 1);
+      //array of math operation signal chaining
+      this.mathOps = [this.output];
+      // add to the soundArray so we can dispose of the osc later
+      p5sound.soundArray.push(this);
+    };
+    /**
+     *  Start an oscillator. Accepts an optional parameter to
+     *  determine how long (in seconds from now) until the
+     *  oscillator starts.
+     *
+     *  @method  start
+     *  @param  {Number} [time] startTime in seconds from now.
+     *  @param  {Number} [frequency] frequency in Hz.
+     */
+    p5.Oscillator.prototype.start = function (time, f) {
+      if (this.started) {
+        var now = p5sound.audiocontext.currentTime;
+        this.stop(now);
+      }
+      if (!this.started) {
+        var freq = f || this.f;
+        var type = this.oscillator.type;
+        // set old osc free to be garbage collected (memory)
+        if (this.oscillator) {
+          this.oscillator.disconnect();
+          this.oscillator = undefined;
+        }
+        // var detune = this.oscillator.frequency.value;
+        this.oscillator = p5sound.audiocontext.createOscillator();
+        this.oscillator.frequency.value = Math.abs(freq);
+        this.oscillator.type = type;
+        // this.oscillator.detune.value = detune;
+        this.oscillator.connect(this.output);
+        time = time || 0;
+        this.oscillator.start(time + p5sound.audiocontext.currentTime);
+        this.freqNode = this.oscillator.frequency;
+        // if other oscillators are already connected to this osc's freq
+        for (var i in this._freqMods) {
+          if (typeof this._freqMods[i].connect !== 'undefined') {
+            this._freqMods[i].connect(this.oscillator.frequency);
+          }
+        }
+        this.started = true;
+      }
+    };
+    /**
+     *  Stop an oscillator. Accepts an optional parameter
+     *  to determine how long (in seconds from now) until the
+     *  oscillator stops.
+     *
+     *  @method  stop
+     *  @param  {Number} secondsFromNow Time, in seconds from now.
+     */
+    p5.Oscillator.prototype.stop = function (time) {
+      if (this.started) {
+        var t = time || 0;
+        var now = p5sound.audiocontext.currentTime;
+        this.oscillator.stop(t + now);
+        this.started = false;
+      }
+    };
+    /**
+     *  Set the amplitude between 0 and 1.0. Or, pass in an object
+     *  such as an oscillator to modulate amplitude with an audio signal.
+     *
+     *  @method  amp
+     *  @param  {Number|Object} vol between 0 and 1.0
+     *                              or a modulating signal/oscillator
+     *  @param {Number} [rampTime] create a fade that lasts rampTime
+     *  @param {Number} [timeFromNow] schedule this event to happen
+     *                                seconds from now
+     *  @return  {AudioParam} gain  If no value is provided,
+     *                              returns the Web Audio API
+     *                              AudioParam that controls
+     *                              this oscillator's
+     *                              gain/amplitude/volume)
+     */
+    p5.Oscillator.prototype.amp = function (vol, rampTime, tFromNow) {
+      var self = this;
+      if (typeof vol === 'number') {
+        var rampTime = rampTime || 0;
+        var tFromNow = tFromNow || 0;
+        var now = p5sound.audiocontext.currentTime;
+        this.output.gain.linearRampToValueAtTime(vol, now + tFromNow + rampTime);
+      } else if (vol) {
+        vol.connect(self.output.gain);
+      } else {
+        // return the Gain Node
+        return this.output.gain;
+      }
+    };
+    // these are now the same thing
+    p5.Oscillator.prototype.fade = p5.Oscillator.prototype.amp;
+    p5.Oscillator.prototype.getAmp = function () {
+      return this.output.gain.value;
+    };
+    /**
+     *  Set frequency of an oscillator to a value. Or, pass in an object
+     *  such as an oscillator to modulate the frequency with an audio signal.
+     *
+     *  @method  freq
+     *  @param  {Number|Object} Frequency Frequency in Hz
+     *                                        or modulating signal/oscillator
+     *  @param  {Number} [rampTime] Ramp time (in seconds)
+     *  @param  {Number} [timeFromNow] Schedule this event to happen
+     *                                   at x seconds from now
+     *  @return  {AudioParam} Frequency If no value is provided,
+     *                                  returns the Web Audio API
+     *                                  AudioParam that controls
+     *                                  this oscillator's frequency
+     *  @example
+     *  

+     *  var osc = new p5.Oscillator(300);
+     *  osc.start();
+     *  osc.freq(40, 10);
+     *  

+     */
+    p5.Oscillator.prototype.freq = function (val, rampTime, tFromNow) {
+      if (typeof val === 'number' && !isNaN(val)) {
+        this.f = val;
+        var now = p5sound.audiocontext.currentTime;
+        var rampTime = rampTime || 0;
+        var tFromNow = tFromNow || 0;
+        var t = now + tFromNow + rampTime;
+        // var currentFreq = this.oscillator.frequency.value;
+        // this.oscillator.frequency.cancelScheduledValues(now);
+        if (rampTime === 0) {
+          this.oscillator.frequency.setValueAtTime(val, tFromNow + now);
+        } else {
+          if (val > 0) {
+            this.oscillator.frequency.exponentialRampToValueAtTime(val, tFromNow + rampTime + now);
+          } else {
+            this.oscillator.frequency.linearRampToValueAtTime(val, tFromNow + rampTime + now);
+          }
+        }
+        // reset phase if oscillator has a phase
+        if (this.phaseAmount) {
+          this.phase(this.phaseAmount);
+        }
+      } else if (val) {
+        if (val.output) {
+          val = val.output;
+        }
+        val.connect(this.oscillator.frequency);
+        // keep track of what is modulating this param
+        // so it can be re-connected if
+        this._freqMods.push(val);
+      } else {
+        // return the Frequency Node
+        return this.oscillator.frequency;
+      }
+    };
+    p5.Oscillator.prototype.getFreq = function () {
+      return this.oscillator.frequency.value;
+    };
+    /**
+     *  Set type to 'sine', 'triangle', 'sawtooth' or 'square'.
+     *
+     *  @method  setType
+     *  @param {String} type 'sine', 'triangle', 'sawtooth' or 'square'.
+     */
+    p5.Oscillator.prototype.setType = function (type) {
+      this.oscillator.type = type;
+    };
+    p5.Oscillator.prototype.getType = function () {
+      return this.oscillator.type;
+    };
+    /**
+     *  Connect to a p5.sound / Web Audio object.
+     *
+     *  @method  connect
+     *  @param  {Object} unit A p5.sound or Web Audio object
+     */
+    p5.Oscillator.prototype.connect = function (unit) {
+      if (!unit) {
+        this.panner.connect(p5sound.input);
+      } else if (unit.hasOwnProperty('input')) {
+        this.panner.connect(unit.input);
+        this.connection = unit.input;
+      } else {
+        this.panner.connect(unit);
+        this.connection = unit;
+      }
+    };
+    /**
+     *  Disconnect all outputs
+     *
+     *  @method  disconnect
+     */
+    p5.Oscillator.prototype.disconnect = function () {
+      this.output.disconnect();
+      this.panner.disconnect();
+      this.output.connect(this.panner);
+      this.oscMods = [];
+    };
+    /**
+     *  Pan between Left (-1) and Right (1)
+     *
+     *  @method  pan
+     *  @param  {Number} panning Number between -1 and 1
+     *  @param  {Number} timeFromNow schedule this event to happen
+     *                                seconds from now
+     */
+    p5.Oscillator.prototype.pan = function (pval, tFromNow) {
+      this.panPosition = pval;
+      this.panner.pan(pval, tFromNow);
+    };
+    p5.Oscillator.prototype.getPan = function () {
+      return this.panPosition;
+    };
+    // get rid of the oscillator
+    p5.Oscillator.prototype.dispose = function () {
+      // remove reference from soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      if (this.oscillator) {
+        var now = p5sound.audiocontext.currentTime;
+        this.stop(now);
+        this.disconnect();
+        this.panner = null;
+        this.oscillator = null;
+      }
+      // if it is a Pulse
+      if (this.osc2) {
+        this.osc2.dispose();
+      }
+    };
+    /**
+     *  Set the phase of an oscillator between 0.0 and 1.0.
+     *  In this implementation, phase is a delay time
+     *  based on the oscillator's current frequency.
+     *
+     *  @method  phase
+     *  @param  {Number} phase float between 0.0 and 1.0
+     */
+    p5.Oscillator.prototype.phase = function (p) {
+      var delayAmt = p5.prototype.map(p, 0, 1, 0, 1 / this.f);
+      var now = p5sound.audiocontext.currentTime;
+      this.phaseAmount = p;
+      if (!this.dNode) {
+        // create a delay node
+        this.dNode = p5sound.audiocontext.createDelay();
+        // put the delay node in between output and panner
+        this.oscillator.disconnect();
+        this.oscillator.connect(this.dNode);
+        this.dNode.connect(this.output);
+      }
+      // set delay time to match phase:
+      this.dNode.delayTime.setValueAtTime(delayAmt, now);
+    };
+    // ========================== //
+    // SIGNAL MATH FOR MODULATION //
+    // ========================== //
+    // return sigChain(this, scale, thisChain, nextChain, Scale);
+    var sigChain = function (o, mathObj, thisChain, nextChain, type) {
+      var chainSource = o.oscillator;
+      // if this type of math already exists in the chain, replace it
+      for (var i in o.mathOps) {
+        if (o.mathOps[i] instanceof type) {
+          chainSource.disconnect();
+          o.mathOps[i].dispose();
+          thisChain = i;
+          // assume nextChain is output gain node unless...
+          if (thisChain < o.mathOps.length - 2) {
+            nextChain = o.mathOps[i + 1];
+          }
+        }
+      }
+      if (thisChain === o.mathOps.length - 1) {
+        o.mathOps.push(nextChain);
+      }
+      // assume source is the oscillator unless i > 0
+      if (i > 0) {
+        chainSource = o.mathOps[i - 1];
+      }
+      chainSource.disconnect();
+      chainSource.connect(mathObj);
+      mathObj.connect(nextChain);
+      o.mathOps[thisChain] = mathObj;
+      return o;
+    };
+    /**
+     *  Add a value to the p5.Oscillator's output amplitude,
+     *  and return the oscillator. Calling this method again
+     *  will override the initial add() with a new value.
+     *
+     *  @method  add
+     *  @param {Number} number Constant number to add
+     *  @return {p5.Oscillator} Oscillator Returns this oscillator
+     *                                     with scaled output
+     *
+     */
+    p5.Oscillator.prototype.add = function (num) {
+      var add = new Add(num);
+      var thisChain = this.mathOps.length - 1;
+      var nextChain = this.output;
+      return sigChain(this, add, thisChain, nextChain, Add);
+    };
+    /**
+     *  Multiply the p5.Oscillator's output amplitude
+     *  by a fixed value (i.e. turn it up!). Calling this method
+     *  again will override the initial mult() with a new value.
+     *
+     *  @method  mult
+     *  @param {Number} number Constant number to multiply
+     *  @return {p5.Oscillator} Oscillator Returns this oscillator
+     *                                     with multiplied output
+     */
+    p5.Oscillator.prototype.mult = function (num) {
+      var mult = new Mult(num);
+      var thisChain = this.mathOps.length - 1;
+      var nextChain = this.output;
+      return sigChain(this, mult, thisChain, nextChain, Mult);
+    };
+    /**
+     *  Scale this oscillator's amplitude values to a given
+     *  range, and return the oscillator. Calling this method
+     *  again will override the initial scale() with new values.
+     *
+     *  @method  scale
+     *  @param  {Number} inMin  input range minumum
+     *  @param  {Number} inMax  input range maximum
+     *  @param  {Number} outMin input range minumum
+     *  @param  {Number} outMax input range maximum
+     *  @return {p5.Oscillator} Oscillator Returns this oscillator
+     *                                     with scaled output
+     */
+    p5.Oscillator.prototype.scale = function (inMin, inMax, outMin, outMax) {
+      var mapOutMin, mapOutMax;
+      if (arguments.length === 4) {
+        mapOutMin = p5.prototype.map(outMin, inMin, inMax, 0, 1) - 0.5;
+        mapOutMax = p5.prototype.map(outMax, inMin, inMax, 0, 1) - 0.5;
+      } else {
+        mapOutMin = arguments[0];
+        mapOutMax = arguments[1];
+      }
+      var scale = new Scale(mapOutMin, mapOutMax);
+      var thisChain = this.mathOps.length - 1;
+      var nextChain = this.output;
+      return sigChain(this, scale, thisChain, nextChain, Scale);
+    };
+    // ============================== //
+    // SinOsc, TriOsc, SqrOsc, SawOsc //
+    // ============================== //
+    /**
+     *  Constructor: new p5.SinOsc().
+     *  This creates a Sine Wave Oscillator and is
+     *  equivalent to  new p5.Oscillator('sine')
+     *   or creating a p5.Oscillator and then calling
+     *  its method setType('sine').
+     *  See p5.Oscillator for methods.
+     *
+     *  @class  p5.SinOsc
+     *  @constructor
+     *  @extends p5.Oscillator
+     *  @param {Number} [freq] Set the frequency
+     */
+    p5.SinOsc = function (freq) {
+      p5.Oscillator.call(this, freq, 'sine');
+    };
+    p5.SinOsc.prototype = Object.create(p5.Oscillator.prototype);
+    /**
+     *  Constructor: new p5.TriOsc().
+     *  This creates a Triangle Wave Oscillator and is
+     *  equivalent to new p5.Oscillator('triangle')
+     *   or creating a p5.Oscillator and then calling
+     *  its method setType('triangle').
+     *  See p5.Oscillator for methods.
+     *
+     *  @class  p5.TriOsc
+     *  @constructor
+     *  @extends p5.Oscillator
+     *  @param {Number} [freq] Set the frequency
+     */
+    p5.TriOsc = function (freq) {
+      p5.Oscillator.call(this, freq, 'triangle');
+    };
+    p5.TriOsc.prototype = Object.create(p5.Oscillator.prototype);
+    /**
+     *  Constructor: new p5.SawOsc().
+     *  This creates a SawTooth Wave Oscillator and is
+     *  equivalent to  new p5.Oscillator('sawtooth')
+     *   or creating a p5.Oscillator and then calling
+     *  its method setType('sawtooth').
+     *  See p5.Oscillator for methods.
+     *
+     *  @class  p5.SawOsc
+     *  @constructor
+     *  @extends p5.Oscillator
+     *  @param {Number} [freq] Set the frequency
+     */
+    p5.SawOsc = function (freq) {
+      p5.Oscillator.call(this, freq, 'sawtooth');
+    };
+    p5.SawOsc.prototype = Object.create(p5.Oscillator.prototype);
+    /**
+     *  Constructor: new p5.SqrOsc().
+     *  This creates a Square Wave Oscillator and is
+     *  equivalent to  new p5.Oscillator('square')
+     *   or creating a p5.Oscillator and then calling
+     *  its method setType('square').
+     *  See p5.Oscillator for methods.
+     *
+     *  @class  p5.SqrOsc
+     *  @constructor
+     *  @extends p5.Oscillator
+     *  @param {Number} [freq] Set the frequency
+     */
+    p5.SqrOsc = function (freq) {
+      p5.Oscillator.call(this, freq, 'square');
+    };
+    p5.SqrOsc.prototype = Object.create(p5.Oscillator.prototype);
+  }(master, Tone_signal_Add, Tone_signal_Multiply, Tone_signal_Scale);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_core_Timeline;
+  Tone_core_Timeline = function (Tone) {
+    'use strict';
+    Tone.Timeline = function () {
+      var options = this.optionsObject(arguments, ['memory'], Tone.Timeline.defaults);
+      this._timeline = [];
+      this._toRemove = [];
+      this._iterating = false;
+      this.memory = options.memory;
+    };
+    Tone.extend(Tone.Timeline);
+    Tone.Timeline.defaults = { 'memory': Infinity };
+    Object.defineProperty(Tone.Timeline.prototype, 'length', {
+      get: function () {
+        return this._timeline.length;
+      }
+    });
+    Tone.Timeline.prototype.add = function (event) {
+      if (this.isUndef(event.time)) {
+        throw new Error('Tone.Timeline: events must have a time attribute');
+      }
+      if (this._timeline.length) {
+        var index = this._search(event.time);
+        this._timeline.splice(index + 1, 0, event);
+      } else {
+        this._timeline.push(event);
+      }
+      if (this.length > this.memory) {
+        var diff = this.length - this.memory;
+        this._timeline.splice(0, diff);
+      }
+      return this;
+    };
+    Tone.Timeline.prototype.remove = function (event) {
+      if (this._iterating) {
+        this._toRemove.push(event);
+      } else {
+        var index = this._timeline.indexOf(event);
+        if (index !== -1) {
+          this._timeline.splice(index, 1);
+        }
+      }
+      return this;
+    };
+    Tone.Timeline.prototype.get = function (time) {
+      var index = this._search(time);
+      if (index !== -1) {
+        return this._timeline[index];
+      } else {
+        return null;
+      }
+    };
+    Tone.Timeline.prototype.peek = function () {
+      return this._timeline[0];
+    };
+    Tone.Timeline.prototype.shift = function () {
+      return this._timeline.shift();
+    };
+    Tone.Timeline.prototype.getAfter = function (time) {
+      var index = this._search(time);
+      if (index + 1 < this._timeline.length) {
+        return this._timeline[index + 1];
+      } else {
+        return null;
+      }
+    };
+    Tone.Timeline.prototype.getBefore = function (time) {
+      var len = this._timeline.length;
+      if (len > 0 && this._timeline[len - 1].time < time) {
+        return this._timeline[len - 1];
+      }
+      var index = this._search(time);
+      if (index - 1 >= 0) {
+        return this._timeline[index - 1];
+      } else {
+        return null;
+      }
+    };
+    Tone.Timeline.prototype.cancel = function (after) {
+      if (this._timeline.length > 1) {
+        var index = this._search(after);
+        if (index >= 0) {
+          if (this._timeline[index].time === after) {
+            for (var i = index; i >= 0; i--) {
+              if (this._timeline[i].time === after) {
+                index = i;
+              } else {
+                break;
+              }
+            }
+            this._timeline = this._timeline.slice(0, index);
+          } else {
+            this._timeline = this._timeline.slice(0, index + 1);
+          }
+        } else {
+          this._timeline = [];
+        }
+      } else if (this._timeline.length === 1) {
+        if (this._timeline[0].time >= after) {
+          this._timeline = [];
+        }
+      }
+      return this;
+    };
+    Tone.Timeline.prototype.cancelBefore = function (time) {
+      if (this._timeline.length) {
+        var index = this._search(time);
+        if (index >= 0) {
+          this._timeline = this._timeline.slice(index + 1);
+        }
+      }
+      return this;
+    };
+    Tone.Timeline.prototype._search = function (time) {
+      var beginning = 0;
+      var len = this._timeline.length;
+      var end = len;
+      if (len > 0 && this._timeline[len - 1].time <= time) {
+        return len - 1;
+      }
+      while (beginning < end) {
+        var midPoint = Math.floor(beginning + (end - beginning) / 2);
+        var event = this._timeline[midPoint];
+        var nextEvent = this._timeline[midPoint + 1];
+        if (event.time === time) {
+          for (var i = midPoint; i < this._timeline.length; i++) {
+            var testEvent = this._timeline[i];
+            if (testEvent.time === time) {
+              midPoint = i;
+            }
+          }
+          return midPoint;
+        } else if (event.time < time && nextEvent.time > time) {
+          return midPoint;
+        } else if (event.time > time) {
+          end = midPoint;
+        } else if (event.time < time) {
+          beginning = midPoint + 1;
+        }
+      }
+      return -1;
+    };
+    Tone.Timeline.prototype._iterate = function (callback, lowerBound, upperBound) {
+      this._iterating = true;
+      lowerBound = this.defaultArg(lowerBound, 0);
+      upperBound = this.defaultArg(upperBound, this._timeline.length - 1);
+      for (var i = lowerBound; i <= upperBound; i++) {
+        callback(this._timeline[i]);
+      }
+      this._iterating = false;
+      if (this._toRemove.length > 0) {
+        for (var j = 0; j < this._toRemove.length; j++) {
+          var index = this._timeline.indexOf(this._toRemove[j]);
+          if (index !== -1) {
+            this._timeline.splice(index, 1);
+          }
+        }
+        this._toRemove = [];
+      }
+    };
+    Tone.Timeline.prototype.forEach = function (callback) {
+      this._iterate(callback);
+      return this;
+    };
+    Tone.Timeline.prototype.forEachBefore = function (time, callback) {
+      var upperBound = this._search(time);
+      if (upperBound !== -1) {
+        this._iterate(callback, 0, upperBound);
+      }
+      return this;
+    };
+    Tone.Timeline.prototype.forEachAfter = function (time, callback) {
+      var lowerBound = this._search(time);
+      this._iterate(callback, lowerBound + 1);
+      return this;
+    };
+    Tone.Timeline.prototype.forEachFrom = function (time, callback) {
+      var lowerBound = this._search(time);
+      while (lowerBound >= 0 && this._timeline[lowerBound].time >= time) {
+        lowerBound--;
+      }
+      this._iterate(callback, lowerBound + 1);
+      return this;
+    };
+    Tone.Timeline.prototype.forEachAtTime = function (time, callback) {
+      var upperBound = this._search(time);
+      if (upperBound !== -1) {
+        this._iterate(function (event) {
+          if (event.time === time) {
+            callback(event);
+          }
+        }, 0, upperBound);
+      }
+      return this;
+    };
+    Tone.Timeline.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._timeline = null;
+      this._toRemove = null;
+    };
+    return Tone.Timeline;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_TimelineSignal;
+  Tone_signal_TimelineSignal = function (Tone) {
+    'use strict';
+    Tone.TimelineSignal = function () {
+      var options = this.optionsObject(arguments, [
+        'value',
+        'units'
+      ], Tone.Signal.defaults);
+      this._events = new Tone.Timeline(10);
+      Tone.Signal.apply(this, options);
+      options.param = this._param;
+      Tone.Param.call(this, options);
+      this._initial = this._fromUnits(this._param.value);
+    };
+    Tone.extend(Tone.TimelineSignal, Tone.Param);
+    Tone.TimelineSignal.Type = {
+      Linear: 'linear',
+      Exponential: 'exponential',
+      Target: 'target',
+      Curve: 'curve',
+      Set: 'set'
+    };
+    Object.defineProperty(Tone.TimelineSignal.prototype, 'value', {
+      get: function () {
+        var now = this.now();
+        var val = this.getValueAtTime(now);
+        return this._toUnits(val);
+      },
+      set: function (value) {
+        var convertedVal = this._fromUnits(value);
+        this._initial = convertedVal;
+        this.cancelScheduledValues();
+        this._param.value = convertedVal;
+      }
+    });
+    Tone.TimelineSignal.prototype.setValueAtTime = function (value, startTime) {
+      value = this._fromUnits(value);
+      startTime = this.toSeconds(startTime);
+      this._events.add({
+        'type': Tone.TimelineSignal.Type.Set,
+        'value': value,
+        'time': startTime
+      });
+      this._param.setValueAtTime(value, startTime);
+      return this;
+    };
+    Tone.TimelineSignal.prototype.linearRampToValueAtTime = function (value, endTime) {
+      value = this._fromUnits(value);
+      endTime = this.toSeconds(endTime);
+      this._events.add({
+        'type': Tone.TimelineSignal.Type.Linear,
+        'value': value,
+        'time': endTime
+      });
+      this._param.linearRampToValueAtTime(value, endTime);
+      return this;
+    };
+    Tone.TimelineSignal.prototype.exponentialRampToValueAtTime = function (value, endTime) {
+      endTime = this.toSeconds(endTime);
+      var beforeEvent = this._searchBefore(endTime);
+      if (beforeEvent && beforeEvent.value === 0) {
+        this.setValueAtTime(this._minOutput, beforeEvent.time);
+      }
+      value = this._fromUnits(value);
+      var setValue = Math.max(value, this._minOutput);
+      this._events.add({
+        'type': Tone.TimelineSignal.Type.Exponential,
+        'value': setValue,
+        'time': endTime
+      });
+      if (value < this._minOutput) {
+        this._param.exponentialRampToValueAtTime(this._minOutput, endTime - this.sampleTime);
+        this.setValueAtTime(0, endTime);
+      } else {
+        this._param.exponentialRampToValueAtTime(value, endTime);
+      }
+      return this;
+    };
+    Tone.TimelineSignal.prototype.setTargetAtTime = function (value, startTime, timeConstant) {
+      value = this._fromUnits(value);
+      value = Math.max(this._minOutput, value);
+      timeConstant = Math.max(this._minOutput, timeConstant);
+      startTime = this.toSeconds(startTime);
+      this._events.add({
+        'type': Tone.TimelineSignal.Type.Target,
+        'value': value,
+        'time': startTime,
+        'constant': timeConstant
+      });
+      this._param.setTargetAtTime(value, startTime, timeConstant);
+      return this;
+    };
+    Tone.TimelineSignal.prototype.setValueCurveAtTime = function (values, startTime, duration, scaling) {
+      scaling = this.defaultArg(scaling, 1);
+      var floats = new Array(values.length);
+      for (var i = 0; i < floats.length; i++) {
+        floats[i] = this._fromUnits(values[i]) * scaling;
+      }
+      startTime = this.toSeconds(startTime);
+      duration = this.toSeconds(duration);
+      this._events.add({
+        'type': Tone.TimelineSignal.Type.Curve,
+        'value': floats,
+        'time': startTime,
+        'duration': duration
+      });
+      this._param.setValueAtTime(floats[0], startTime);
+      for (var j = 1; j < floats.length; j++) {
+        var segmentTime = startTime + j / (floats.length - 1) * duration;
+        this._param.linearRampToValueAtTime(floats[j], segmentTime);
+      }
+      return this;
+    };
+    Tone.TimelineSignal.prototype.cancelScheduledValues = function (after) {
+      after = this.toSeconds(after);
+      this._events.cancel(after);
+      this._param.cancelScheduledValues(after);
+      return this;
+    };
+    Tone.TimelineSignal.prototype.setRampPoint = function (time) {
+      time = this.toSeconds(time);
+      var val = this._toUnits(this.getValueAtTime(time));
+      var before = this._searchBefore(time);
+      if (before && before.time === time) {
+        this.cancelScheduledValues(time + this.sampleTime);
+      } else if (before && before.type === Tone.TimelineSignal.Type.Curve && before.time + before.duration > time) {
+        this.cancelScheduledValues(time);
+        this.linearRampToValueAtTime(val, time);
+      } else {
+        var after = this._searchAfter(time);
+        if (after) {
+          this.cancelScheduledValues(time);
+          if (after.type === Tone.TimelineSignal.Type.Linear) {
+            this.linearRampToValueAtTime(val, time);
+          } else if (after.type === Tone.TimelineSignal.Type.Exponential) {
+            this.exponentialRampToValueAtTime(val, time);
+          }
+        }
+        this.setValueAtTime(val, time);
+      }
+      return this;
+    };
+    Tone.TimelineSignal.prototype.linearRampToValueBetween = function (value, start, finish) {
+      this.setRampPoint(start);
+      this.linearRampToValueAtTime(value, finish);
+      return this;
+    };
+    Tone.TimelineSignal.prototype.exponentialRampToValueBetween = function (value, start, finish) {
+      this.setRampPoint(start);
+      this.exponentialRampToValueAtTime(value, finish);
+      return this;
+    };
+    Tone.TimelineSignal.prototype._searchBefore = function (time) {
+      return this._events.get(time);
+    };
+    Tone.TimelineSignal.prototype._searchAfter = function (time) {
+      return this._events.getAfter(time);
+    };
+    Tone.TimelineSignal.prototype.getValueAtTime = function (time) {
+      time = this.toSeconds(time);
+      var after = this._searchAfter(time);
+      var before = this._searchBefore(time);
+      var value = this._initial;
+      if (before === null) {
+        value = this._initial;
+      } else if (before.type === Tone.TimelineSignal.Type.Target) {
+        var previous = this._events.getBefore(before.time);
+        var previouVal;
+        if (previous === null) {
+          previouVal = this._initial;
+        } else {
+          previouVal = previous.value;
+        }
+        value = this._exponentialApproach(before.time, previouVal, before.value, before.constant, time);
+      } else if (before.type === Tone.TimelineSignal.Type.Curve) {
+        value = this._curveInterpolate(before.time, before.value, before.duration, time);
+      } else if (after === null) {
+        value = before.value;
+      } else if (after.type === Tone.TimelineSignal.Type.Linear) {
+        value = this._linearInterpolate(before.time, before.value, after.time, after.value, time);
+      } else if (after.type === Tone.TimelineSignal.Type.Exponential) {
+        value = this._exponentialInterpolate(before.time, before.value, after.time, after.value, time);
+      } else {
+        value = before.value;
+      }
+      return value;
+    };
+    Tone.TimelineSignal.prototype.connect = Tone.SignalBase.prototype.connect;
+    Tone.TimelineSignal.prototype._exponentialApproach = function (t0, v0, v1, timeConstant, t) {
+      return v1 + (v0 - v1) * Math.exp(-(t - t0) / timeConstant);
+    };
+    Tone.TimelineSignal.prototype._linearInterpolate = function (t0, v0, t1, v1, t) {
+      return v0 + (v1 - v0) * ((t - t0) / (t1 - t0));
+    };
+    Tone.TimelineSignal.prototype._exponentialInterpolate = function (t0, v0, t1, v1, t) {
+      v0 = Math.max(this._minOutput, v0);
+      return v0 * Math.pow(v1 / v0, (t - t0) / (t1 - t0));
+    };
+    Tone.TimelineSignal.prototype._curveInterpolate = function (start, curve, duration, time) {
+      var len = curve.length;
+      if (time >= start + duration) {
+        return curve[len - 1];
+      } else if (time <= start) {
+        return curve[0];
+      } else {
+        var progress = (time - start) / duration;
+        var lowerIndex = Math.floor((len - 1) * progress);
+        var upperIndex = Math.ceil((len - 1) * progress);
+        var lowerVal = curve[lowerIndex];
+        var upperVal = curve[upperIndex];
+        if (upperIndex === lowerIndex) {
+          return lowerVal;
+        } else {
+          return this._linearInterpolate(lowerIndex, lowerVal, upperIndex, upperVal, progress * (len - 1));
+        }
+      }
+    };
+    Tone.TimelineSignal.prototype.dispose = function () {
+      Tone.Signal.prototype.dispose.call(this);
+      Tone.Param.prototype.dispose.call(this);
+      this._events.dispose();
+      this._events = null;
+    };
+    return Tone.TimelineSignal;
+  }(Tone_core_Tone, Tone_signal_Signal);
+  var env;
+  'use strict';
+  env = function () {
+    var p5sound = master;
+    var Add = Tone_signal_Add;
+    var Mult = Tone_signal_Multiply;
+    var Scale = Tone_signal_Scale;
+    var TimelineSignal = Tone_signal_TimelineSignal;
+    var Tone = Tone_core_Tone;
+    Tone.setContext(p5sound.audiocontext);
+    /**
+     *  
Envelopes are pre-defined amplitude distribution over time.
+     *  Typically, envelopes are used to control the output volume
+     *  of an object, a series of fades referred to as Attack, Decay,
+     *  Sustain and Release (
+     *  ADSR
+     *  ). Envelopes can also control other Web Audio Parameters—for example, a p5.Env can
+     *  control an Oscillator's frequency like this: osc.freq(env).

+     *  
Use setRange to change the attack/release level.
+     *  Use setADSR to change attackTime, decayTime, sustainPercent and releaseTime.

+     *  
Use the play method to play the entire envelope,
+     *  the ramp method for a pingable trigger,
+     *  or triggerAttack/
+     *  triggerRelease to trigger noteOn/noteOff.

+     *
+     *  @class p5.Env
+     *  @constructor
+     *  @example
+     *  

+     *  var attackLevel = 1.0;
+     *  var releaseLevel = 0;
+     *
+     *  var attackTime = 0.001
+     *  var decayTime = 0.2;
+     *  var susPercent = 0.2;
+     *  var releaseTime = 0.5;
+     *
+     *  var env, triOsc;
+     *
+     *  function setup() {
+     *    var cnv = createCanvas(100, 100);
+     *
+     *    textAlign(CENTER);
+     *    text('click to play', width/2, height/2);
+     *
+     *    env = new p5.Env();
+     *    env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+     *    env.setRange(attackLevel, releaseLevel);
+     *
+     *    triOsc = new p5.Oscillator('triangle');
+     *    triOsc.amp(env);
+     *    triOsc.start();
+     *    triOsc.freq(220);
+     *
+     *    cnv.mousePressed(playEnv);
+     *  }
+     *
+     *  function playEnv(){
+     *    env.play();
+     *  }
+     *  

+     */
+    p5.Env = function (t1, l1, t2, l2, t3, l3) {
+      /**
+       * Time until envelope reaches attackLevel
+       * @property attackTime
+       */
+      this.aTime = t1 || 0.1;
+      /**
+       * Level once attack is complete.
+       * @property attackLevel
+       */
+      this.aLevel = l1 || 1;
+      /**
+       * Time until envelope reaches decayLevel.
+       * @property decayTime
+       */
+      this.dTime = t2 || 0.5;
+      /**
+       * Level after decay. The envelope will sustain here until it is released.
+       * @property decayLevel
+       */
+      this.dLevel = l2 || 0;
+      /**
+       * Duration of the release portion of the envelope.
+       * @property releaseTime
+       */
+      this.rTime = t3 || 0;
+      /**
+       * Level at the end of the release.
+       * @property releaseLevel
+       */
+      this.rLevel = l3 || 0;
+      this._rampHighPercentage = 0.98;
+      this._rampLowPercentage = 0.02;
+      this.output = p5sound.audiocontext.createGain();
+      this.control = new TimelineSignal();
+      this._init();
+      // this makes sure the envelope starts at zero
+      this.control.connect(this.output);
+      // connect to the output
+      this.connection = null;
+      // store connection
+      //array of math operation signal chaining
+      this.mathOps = [this.control];
+      //whether envelope should be linear or exponential curve
+      this.isExponential = false;
+      // oscillator or buffer source to clear on env complete
+      // to save resources if/when it is retriggered
+      this.sourceToClear = null;
+      // set to true if attack is set, then false on release
+      this.wasTriggered = false;
+      // add to the soundArray so we can dispose of the env later
+      p5sound.soundArray.push(this);
+    };
+    // this init function just smooths the starting value to zero and gives a start point for the timeline
+    // - it was necessary to remove glitches at the beginning.
+    p5.Env.prototype._init = function () {
+      var now = p5sound.audiocontext.currentTime;
+      var t = now;
+      this.control.setTargetAtTime(0.00001, t, 0.001);
+      //also, compute the correct time constants
+      this._setRampAD(this.aTime, this.dTime);
+    };
+    /**
+     *  Reset the envelope with a series of time/value pairs.
+     *
+     *  @method  set
+     *  @param {Number} attackTime     Time (in seconds) before level
+     *                                 reaches attackLevel
+     *  @param {Number} attackLevel    Typically an amplitude between
+     *                                 0.0 and 1.0
+     *  @param {Number} decayTime      Time
+     *  @param {Number} decayLevel   Amplitude (In a standard ADSR envelope,
+     *                                 decayLevel = sustainLevel)
+     *  @param {Number} releaseTime   Release Time (in seconds)
+     *  @param {Number} releaseLevel  Amplitude
+     *  @example
+     *  

+     *  var t1 = 0.1; // attack time in seconds
+     *  var l1 = 0.7; // attack level 0.0 to 1.0
+     *  var t2 = 0.3; // decay time in seconds
+     *  var l2 = 0.1; // decay level  0.0 to 1.0
+     *  var t3 = 0.2; // sustain time in seconds
+     *  var l3 = dL; // sustain level  0.0 to 1.0
+     *  // release level defaults to zero
+     *
+     *  var env;
+     *  var triOsc;
+     *
+     *  function setup() {
+     *    background(0);
+     *    noStroke();
+     *    fill(255);
+     *    textAlign(CENTER);
+     *    text('click to play', width/2, height/2);
+     *
+     *    env = new p5.Env(t1, l1, t2, l2, t3, l3);
+     *    triOsc = new p5.Oscillator('triangle');
+     *    triOsc.amp(env); // give the env control of the triOsc's amp
+     *    triOsc.start();
+     *  }
+     *
+     *  // mouseClick triggers envelope if over canvas
+     *  function mouseClicked() {
+     *    // is mouse over canvas?
+     *    if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+     *      env.play(triOsc);
+     *    }
+     *  }
+     *  

+     *
+     */
+    p5.Env.prototype.set = function (t1, l1, t2, l2, t3, l3) {
+      this.aTime = t1;
+      this.aLevel = l1;
+      this.dTime = t2 || 0;
+      this.dLevel = l2 || 0;
+      this.rTime = t3 || 0;
+      this.rLevel = l3 || 0;
+      // set time constants for ramp
+      this._setRampAD(t1, t2);
+    };
+    /**
+     *  Set values like a traditional
+     *  
+     *  ADSR envelope
+     *  .
+     *
+     *  @method  setADSR
+     *  @param {Number} attackTime    Time (in seconds before envelope
+     *                                reaches Attack Level
+     *  @param {Number} [decayTime]    Time (in seconds) before envelope
+     *                                reaches Decay/Sustain Level
+     *  @param {Number} [susRatio]    Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,
+     *                                where 1.0 = attackLevel, 0.0 = releaseLevel.
+     *                                The susRatio determines the decayLevel and the level at which the
+     *                                sustain portion of the envelope will sustain.
+     *                                For example, if attackLevel is 0.4, releaseLevel is 0,
+     *                                and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is
+     *                                increased to 1.0 (using setRange),
+     *                                then decayLevel would increase proportionally, to become 0.5.
+     *  @param {Number} [releaseTime]   Time in seconds from now (defaults to 0)
+     *  @example
+     *  

+     *  var attackLevel = 1.0;
+     *  var releaseLevel = 0;
+     *
+     *  var attackTime = 0.001
+     *  var decayTime = 0.2;
+     *  var susPercent = 0.2;
+     *  var releaseTime = 0.5;
+     *
+     *  var env, triOsc;
+     *
+     *  function setup() {
+     *    var cnv = createCanvas(100, 100);
+     *
+     *    textAlign(CENTER);
+     *    text('click to play', width/2, height/2);
+     *
+     *    env = new p5.Env();
+     *    env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+     *    env.setRange(attackLevel, releaseLevel);
+     *
+     *    triOsc = new p5.Oscillator('triangle');
+     *    triOsc.amp(env);
+     *    triOsc.start();
+     *    triOsc.freq(220);
+     *
+     *    cnv.mousePressed(playEnv);
+     *  }
+     *
+     *  function playEnv(){
+     *    env.play();
+     *  }
+     *  

+     */
+    p5.Env.prototype.setADSR = function (aTime, dTime, sPercent, rTime) {
+      this.aTime = aTime;
+      this.dTime = dTime || 0;
+      // lerp
+      this.sPercent = sPercent || 0;
+      this.dLevel = typeof sPercent !== 'undefined' ? sPercent * (this.aLevel - this.rLevel) + this.rLevel : 0;
+      this.rTime = rTime || 0;
+      // also set time constants for ramp
+      this._setRampAD(aTime, dTime);
+    };
+    /**
+     *  Set max (attackLevel) and min (releaseLevel) of envelope.
+     *
+     *  @method  setRange
+     *  @param {Number} aLevel attack level (defaults to 1)
+     *  @param {Number} rLevel release level (defaults to 0)
+     *  @example
+     *  

+     *  var attackLevel = 1.0;
+     *  var releaseLevel = 0;
+     *
+     *  var attackTime = 0.001
+     *  var decayTime = 0.2;
+     *  var susPercent = 0.2;
+     *  var releaseTime = 0.5;
+     *
+     *  var env, triOsc;
+     *
+     *  function setup() {
+     *    var cnv = createCanvas(100, 100);
+     *
+     *    textAlign(CENTER);
+     *    text('click to play', width/2, height/2);
+     *
+     *    env = new p5.Env();
+     *    env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+     *    env.setRange(attackLevel, releaseLevel);
+     *
+     *    triOsc = new p5.Oscillator('triangle');
+     *    triOsc.amp(env);
+     *    triOsc.start();
+     *    triOsc.freq(220);
+     *
+     *    cnv.mousePressed(playEnv);
+     *  }
+     *
+     *  function playEnv(){
+     *    env.play();
+     *  }
+     *  

+     */
+    p5.Env.prototype.setRange = function (aLevel, rLevel) {
+      this.aLevel = aLevel || 1;
+      this.rLevel = rLevel || 0;
+    };
+    //  private (undocumented) method called when ADSR is set to set time constants for ramp
+    //
+    //  Set the 
+    //  time constants for simple exponential ramps.
+    //  The larger the time constant value, the slower the
+    //  transition will be.
+    //
+    //  method  _setRampAD
+    //  param {Number} attackTimeConstant  attack time constant
+    //  param {Number} decayTimeConstant   decay time constant
+    //
+    p5.Env.prototype._setRampAD = function (t1, t2) {
+      this._rampAttackTime = this.checkExpInput(t1);
+      this._rampDecayTime = this.checkExpInput(t2);
+      var TCDenominator = 1;
+      /// Aatish Bhatia's calculation for time constant for rise(to adjust 1/1-e calculation to any percentage)
+      TCDenominator = Math.log(1 / this.checkExpInput(1 - this._rampHighPercentage));
+      this._rampAttackTC = t1 / this.checkExpInput(TCDenominator);
+      TCDenominator = Math.log(1 / this._rampLowPercentage);
+      this._rampDecayTC = t2 / this.checkExpInput(TCDenominator);
+    };
+    // private method
+    p5.Env.prototype.setRampPercentages = function (p1, p2) {
+      //set the percentages that the simple exponential ramps go to
+      this._rampHighPercentage = this.checkExpInput(p1);
+      this._rampLowPercentage = this.checkExpInput(p2);
+      var TCDenominator = 1;
+      //now re-compute the time constants based on those percentages
+      /// Aatish Bhatia's calculation for time constant for rise(to adjust 1/1-e calculation to any percentage)
+      TCDenominator = Math.log(1 / this.checkExpInput(1 - this._rampHighPercentage));
+      this._rampAttackTC = this._rampAttackTime / this.checkExpInput(TCDenominator);
+      TCDenominator = Math.log(1 / this._rampLowPercentage);
+      this._rampDecayTC = this._rampDecayTime / this.checkExpInput(TCDenominator);
+    };
+    /**
+     *  Assign a parameter to be controlled by this envelope.
+     *  If a p5.Sound object is given, then the p5.Env will control its
+     *  output gain. If multiple inputs are provided, the env will
+     *  control all of them.
+     *
+     *  @method  setInput
+     *  @param  {Object} [...inputs]         A p5.sound object or
+     *                                Web Audio Param.
+     */
+    p5.Env.prototype.setInput = function () {
+      for (var i = 0; i < arguments.length; i++) {
+        this.connect(arguments[i]);
+      }
+    };
+    /**
+     *  Set whether the envelope ramp is linear (default) or exponential.
+     *  Exponential ramps can be useful because we perceive amplitude
+     *  and frequency logarithmically.
+     *
+     *  @method  setExp
+     *  @param {Boolean} isExp true is exponential, false is linear
+     */
+    p5.Env.prototype.setExp = function (isExp) {
+      this.isExponential = isExp;
+    };
+    //helper method to protect against zero values being sent to exponential functions
+    p5.Env.prototype.checkExpInput = function (value) {
+      if (value <= 0) {
+        value = 1e-8;
+      }
+      return value;
+    };
+    /**
+     *  Play tells the envelope to start acting on a given input.
+     *  If the input is a p5.sound object (i.e. AudioIn, Oscillator,
+     *  SoundFile), then Env will control its output volume.
+     *  Envelopes can also be used to control any 
+     *  Web Audio Audio Param.
+     *
+     *  @method  play
+     *  @param  {Object} unit         A p5.sound object or
+     *                                Web Audio Param.
+     *  @param  {Number} [startTime]  time from now (in seconds) at which to play
+     *  @param  {Number} [sustainTime] time to sustain before releasing the envelope
+     *  @example
+     *  

+     *  var attackLevel = 1.0;
+     *  var releaseLevel = 0;
+     *
+     *  var attackTime = 0.001
+     *  var decayTime = 0.2;
+     *  var susPercent = 0.2;
+     *  var releaseTime = 0.5;
+     *
+     *  var env, triOsc;
+     *
+     *  function setup() {
+     *    var cnv = createCanvas(100, 100);
+     *
+     *    textAlign(CENTER);
+     *    text('click to play', width/2, height/2);
+     *
+     *    env = new p5.Env();
+     *    env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+     *    env.setRange(attackLevel, releaseLevel);
+     *
+     *    triOsc = new p5.Oscillator('triangle');
+     *    triOsc.amp(env);
+     *    triOsc.start();
+     *    triOsc.freq(220);
+     *
+     *    cnv.mousePressed(playEnv);
+     *  }
+     *
+     *  function playEnv(){
+     *    // trigger env on triOsc, 0 seconds from now
+     *    // After decay, sustain for 0.2 seconds before release
+     *    env.play(triOsc, 0, 0.2);
+     *  }
+     *  

+     */
+    p5.Env.prototype.play = function (unit, secondsFromNow, susTime) {
+      var tFromNow = secondsFromNow || 0;
+      var susTime = susTime || 0;
+      if (unit) {
+        if (this.connection !== unit) {
+          this.connect(unit);
+        }
+      }
+      this.triggerAttack(unit, tFromNow);
+      this.triggerRelease(unit, tFromNow + this.aTime + this.dTime + susTime);
+    };
+    /**
+     *  Trigger the Attack, and Decay portion of the Envelope.
+     *  Similar to holding down a key on a piano, but it will
+     *  hold the sustain level until you let go. Input can be
+     *  any p5.sound object, or a 
+     *  Web Audio Param.
+     *
+     *  @method  triggerAttack
+     *  @param  {Object} unit p5.sound Object or Web Audio Param
+     *  @param  {Number} secondsFromNow time from now (in seconds)
+     *  @example
+     *  

+     *
+     *  var attackLevel = 1.0;
+     *  var releaseLevel = 0;
+     *
+     *  var attackTime = 0.001
+     *  var decayTime = 0.3;
+     *  var susPercent = 0.4;
+     *  var releaseTime = 0.5;
+     *
+     *  var env, triOsc;
+     *
+     *  function setup() {
+     *    var cnv = createCanvas(100, 100);
+     *    background(200);
+     *    textAlign(CENTER);
+     *    text('click to play', width/2, height/2);
+     *
+     *    env = new p5.Env();
+     *    env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+     *    env.setRange(attackLevel, releaseLevel);
+     *
+     *    triOsc = new p5.Oscillator('triangle');
+     *    triOsc.amp(env);
+     *    triOsc.start();
+     *    triOsc.freq(220);
+     *
+     *    cnv.mousePressed(envAttack);
+     *  }
+     *
+     *  function envAttack(){
+     *    console.log('trigger attack');
+     *    env.triggerAttack();
+     *
+     *    background(0,255,0);
+     *    text('attack!', width/2, height/2);
+     *  }
+     *
+     *  function mouseReleased() {
+     *    env.triggerRelease();
+     *
+     *    background(200);
+     *    text('click to play', width/2, height/2);
+     *  }
+     *  

+     */
+    p5.Env.prototype.triggerAttack = function (unit, secondsFromNow) {
+      var now = p5sound.audiocontext.currentTime;
+      var tFromNow = secondsFromNow || 0;
+      var t = now + tFromNow;
+      this.lastAttack = t;
+      this.wasTriggered = true;
+      if (unit) {
+        if (this.connection !== unit) {
+          this.connect(unit);
+        }
+      }
+      // get and set value (with linear ramp) to anchor automation
+      var valToSet = this.control.getValueAtTime(t);
+      if (this.isExponential === true) {
+        this.control.exponentialRampToValueAtTime(this.checkExpInput(valToSet), t);
+      } else {
+        this.control.linearRampToValueAtTime(valToSet, t);
+      }
+      // after each ramp completes, cancel scheduled values
+      // (so they can be overridden in case env has been re-triggered)
+      // then, set current value (with linearRamp to avoid click)
+      // then, schedule the next automation...
+      // attack
+      t += this.aTime;
+      if (this.isExponential === true) {
+        this.control.exponentialRampToValueAtTime(this.checkExpInput(this.aLevel), t);
+        valToSet = this.checkExpInput(this.control.getValueAtTime(t));
+        this.control.cancelScheduledValues(t);
+        this.control.exponentialRampToValueAtTime(valToSet, t);
+      } else {
+        this.control.linearRampToValueAtTime(this.aLevel, t);
+        valToSet = this.control.getValueAtTime(t);
+        this.control.cancelScheduledValues(t);
+        this.control.linearRampToValueAtTime(valToSet, t);
+      }
+      // decay to decay level (if using ADSR, then decay level == sustain level)
+      t += this.dTime;
+      if (this.isExponential === true) {
+        this.control.exponentialRampToValueAtTime(this.checkExpInput(this.dLevel), t);
+        valToSet = this.checkExpInput(this.control.getValueAtTime(t));
+        this.control.cancelScheduledValues(t);
+        this.control.exponentialRampToValueAtTime(valToSet, t);
+      } else {
+        this.control.linearRampToValueAtTime(this.dLevel, t);
+        valToSet = this.control.getValueAtTime(t);
+        this.control.cancelScheduledValues(t);
+        this.control.linearRampToValueAtTime(valToSet, t);
+      }
+    };
+    /**
+     *  Trigger the Release of the Envelope. This is similar to releasing
+     *  the key on a piano and letting the sound fade according to the
+     *  release level and release time.
+     *
+     *  @method  triggerRelease
+     *  @param  {Object} unit p5.sound Object or Web Audio Param
+     *  @param  {Number} secondsFromNow time to trigger the release
+     *  @example
+     *  

+     *
+     *  var attackLevel = 1.0;
+     *  var releaseLevel = 0;
+     *
+     *  var attackTime = 0.001
+     *  var decayTime = 0.3;
+     *  var susPercent = 0.4;
+     *  var releaseTime = 0.5;
+     *
+     *  var env, triOsc;
+     *
+     *  function setup() {
+     *    var cnv = createCanvas(100, 100);
+     *    background(200);
+     *    textAlign(CENTER);
+     *    text('click to play', width/2, height/2);
+     *
+     *    env = new p5.Env();
+     *    env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+     *    env.setRange(attackLevel, releaseLevel);
+     *
+     *    triOsc = new p5.Oscillator('triangle');
+     *    triOsc.amp(env);
+     *    triOsc.start();
+     *    triOsc.freq(220);
+     *
+     *    cnv.mousePressed(envAttack);
+     *  }
+     *
+     *  function envAttack(){
+     *    console.log('trigger attack');
+     *    env.triggerAttack();
+     *
+     *    background(0,255,0);
+     *    text('attack!', width/2, height/2);
+     *  }
+     *
+     *  function mouseReleased() {
+     *    env.triggerRelease();
+     *
+     *    background(200);
+     *    text('click to play', width/2, height/2);
+     *  }
+     *  

+     */
+    p5.Env.prototype.triggerRelease = function (unit, secondsFromNow) {
+      // only trigger a release if an attack was triggered
+      if (!this.wasTriggered) {
+        // this currently causes a bit of trouble:
+        // if a later release has been scheduled (via the play function)
+        // a new earlier release won't interrupt it, because
+        // this.wasTriggered has already been set to false.
+        // If we want new earlier releases to override, then we need to
+        // keep track of the last release time, and if the new release time is
+        // earlier, then use it.
+        return;
+      }
+      var now = p5sound.audiocontext.currentTime;
+      var tFromNow = secondsFromNow || 0;
+      var t = now + tFromNow;
+      if (unit) {
+        if (this.connection !== unit) {
+          this.connect(unit);
+        }
+      }
+      // get and set value (with linear or exponential ramp) to anchor automation
+      var valToSet = this.control.getValueAtTime(t);
+      if (this.isExponential === true) {
+        this.control.exponentialRampToValueAtTime(this.checkExpInput(valToSet), t);
+      } else {
+        this.control.linearRampToValueAtTime(valToSet, t);
+      }
+      // release
+      t += this.rTime;
+      if (this.isExponential === true) {
+        this.control.exponentialRampToValueAtTime(this.checkExpInput(this.rLevel), t);
+        valToSet = this.checkExpInput(this.control.getValueAtTime(t));
+        this.control.cancelScheduledValues(t);
+        this.control.exponentialRampToValueAtTime(valToSet, t);
+      } else {
+        this.control.linearRampToValueAtTime(this.rLevel, t);
+        valToSet = this.control.getValueAtTime(t);
+        this.control.cancelScheduledValues(t);
+        this.control.linearRampToValueAtTime(valToSet, t);
+      }
+      this.wasTriggered = false;
+    };
+    /**
+     *  Exponentially ramp to a value using the first two
+     *  values from setADSR(attackTime, decayTime)
+     *  as 
+     *  time constants for simple exponential ramps.
+     *  If the value is higher than current value, it uses attackTime,
+     *  while a decrease uses decayTime.
+     *
+     *  @method  ramp
+     *  @param  {Object} unit           p5.sound Object or Web Audio Param
+     *  @param  {Number} secondsFromNow When to trigger the ramp
+     *  @param  {Number} v              Target value
+     *  @param  {Number} [v2]           Second target value (optional)
+     *  @example
+     *  

+     *  var env, osc, amp, cnv;
+     *
+     *  var attackTime = 0.001;
+     *  var decayTime = 0.2;
+     *  var attackLevel = 1;
+     *  var decayLevel = 0;
+     *
+     *  function setup() {
+     *    cnv = createCanvas(100, 100);
+     *    fill(0,255,0);
+     *    noStroke();
+     *
+     *    env = new p5.Env();
+     *    env.setADSR(attackTime, decayTime);
+     *
+     *    osc = new p5.Oscillator();
+     *    osc.amp(env);
+     *    osc.start();
+     *
+     *    amp = new p5.Amplitude();
+     *
+     *    cnv.mousePressed(triggerRamp);
+     *  }
+     *
+     *  function triggerRamp() {
+     *    env.ramp(osc, 0, attackLevel, decayLevel);
+     *  }
+     *
+     *  function draw() {
+     *    background(20,20,20);
+     *    text('click me', 10, 20);
+     *    var h = map(amp.getLevel(), 0, 0.4, 0, height);;
+     *
+     *    rect(0, height, width, -h);
+     *  }
+     *  

+     */
+    p5.Env.prototype.ramp = function (unit, secondsFromNow, v1, v2) {
+      var now = p5sound.audiocontext.currentTime;
+      var tFromNow = secondsFromNow || 0;
+      var t = now + tFromNow;
+      var destination1 = this.checkExpInput(v1);
+      var destination2 = typeof v2 !== 'undefined' ? this.checkExpInput(v2) : undefined;
+      // connect env to unit if not already connected
+      if (unit) {
+        if (this.connection !== unit) {
+          this.connect(unit);
+        }
+      }
+      //get current value
+      var currentVal = this.checkExpInput(this.control.getValueAtTime(t));
+      // this.control.cancelScheduledValues(t);
+      //if it's going up
+      if (destination1 > currentVal) {
+        this.control.setTargetAtTime(destination1, t, this._rampAttackTC);
+        t += this._rampAttackTime;
+      } else if (destination1 < currentVal) {
+        this.control.setTargetAtTime(destination1, t, this._rampDecayTC);
+        t += this._rampDecayTime;
+      }
+      // Now the second part of envelope begins
+      if (destination2 === undefined)
+        return;
+      //if it's going up
+      if (destination2 > destination1) {
+        this.control.setTargetAtTime(destination2, t, this._rampAttackTC);
+      } else if (destination2 < destination1) {
+        this.control.setTargetAtTime(destination2, t, this._rampDecayTC);
+      }
+    };
+    p5.Env.prototype.connect = function (unit) {
+      this.connection = unit;
+      // assume we're talking about output gain
+      // unless given a different audio param
+      if (unit instanceof p5.Oscillator || unit instanceof p5.SoundFile || unit instanceof p5.AudioIn || unit instanceof p5.Reverb || unit instanceof p5.Noise || unit instanceof p5.Filter || unit instanceof p5.Delay) {
+        unit = unit.output.gain;
+      }
+      if (unit instanceof AudioParam) {
+        //set the initial value
+        unit.setValueAtTime(0, p5sound.audiocontext.currentTime);
+      }
+      if (unit instanceof p5.Signal) {
+        unit.setValue(0);
+      }
+      this.output.connect(unit);
+    };
+    p5.Env.prototype.disconnect = function () {
+      this.output.disconnect();
+    };
+    // Signal Math
+    /**
+     *  Add a value to the p5.Oscillator's output amplitude,
+     *  and return the oscillator. Calling this method
+     *  again will override the initial add() with new values.
+     *
+     *  @method  add
+     *  @param {Number} number Constant number to add
+     *  @return {p5.Env} Envelope Returns this envelope
+     *                                     with scaled output
+     */
+    p5.Env.prototype.add = function (num) {
+      var add = new Add(num);
+      var thisChain = this.mathOps.length;
+      var nextChain = this.output;
+      return p5.prototype._mathChain(this, add, thisChain, nextChain, Add);
+    };
+    /**
+     *  Multiply the p5.Env's output amplitude
+     *  by a fixed value. Calling this method
+     *  again will override the initial mult() with new values.
+     *
+     *  @method  mult
+     *  @param {Number} number Constant number to multiply
+     *  @return {p5.Env} Envelope Returns this envelope
+     *                                     with scaled output
+     */
+    p5.Env.prototype.mult = function (num) {
+      var mult = new Mult(num);
+      var thisChain = this.mathOps.length;
+      var nextChain = this.output;
+      return p5.prototype._mathChain(this, mult, thisChain, nextChain, Mult);
+    };
+    /**
+     *  Scale this envelope's amplitude values to a given
+     *  range, and return the envelope. Calling this method
+     *  again will override the initial scale() with new values.
+     *
+     *  @method  scale
+     *  @param  {Number} inMin  input range minumum
+     *  @param  {Number} inMax  input range maximum
+     *  @param  {Number} outMin input range minumum
+     *  @param  {Number} outMax input range maximum
+     *  @return {p5.Env} Envelope Returns this envelope
+     *                                     with scaled output
+     */
+    p5.Env.prototype.scale = function (inMin, inMax, outMin, outMax) {
+      var scale = new Scale(inMin, inMax, outMin, outMax);
+      var thisChain = this.mathOps.length;
+      var nextChain = this.output;
+      return p5.prototype._mathChain(this, scale, thisChain, nextChain, Scale);
+    };
+    // get rid of the oscillator
+    p5.Env.prototype.dispose = function () {
+      // remove reference from soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      this.disconnect();
+      try {
+        this.control.dispose();
+        this.control = null;
+      } catch (e) {
+        console.warn(e, 'already disposed p5.Env');
+      }
+      for (var i = 1; i < this.mathOps.length; i++) {
+        this.mathOps[i].dispose();
+      }
+    };
+  }(master, Tone_signal_Add, Tone_signal_Multiply, Tone_signal_Scale, Tone_signal_TimelineSignal, Tone_core_Tone);
+  var pulse;
+  'use strict';
+  pulse = function () {
+    var p5sound = master;
+    /**
+     *  Creates a Pulse object, an oscillator that implements
+     *  Pulse Width Modulation.
+     *  The pulse is created with two oscillators.
+     *  Accepts a parameter for frequency, and to set the
+     *  width between the pulses. See 
+     *  p5.Oscillator for a full list of methods.
+     *
+     *  @class p5.Pulse
+     *  @extends p5.Oscillator
+     *  @constructor
+     *  @param {Number} [freq] Frequency in oscillations per second (Hz)
+     *  @param {Number} [w]    Width between the pulses (0 to 1.0,
+     *                         defaults to 0)
+     *  @example
+     *  

+     *  var pulse;
+     *  function setup() {
+     *    background(0);
+     *
+     *    // Create and start the pulse wave oscillator
+     *    pulse = new p5.Pulse();
+     *    pulse.amp(0.5);
+     *    pulse.freq(220);
+     *    pulse.start();
+     *  }
+     *
+     *  function draw() {
+     *    var w = map(mouseX, 0, width, 0, 1);
+     *    w = constrain(w, 0, 1);
+     *    pulse.width(w)
+     *  }
+     *  

+     */
+    p5.Pulse = function (freq, w) {
+      p5.Oscillator.call(this, freq, 'sawtooth');
+      // width of PWM, should be betw 0 to 1.0
+      this.w = w || 0;
+      // create a second oscillator with inverse frequency
+      this.osc2 = new p5.SawOsc(freq);
+      // create a delay node
+      this.dNode = p5sound.audiocontext.createDelay();
+      // dc offset
+      this.dcOffset = createDCOffset();
+      this.dcGain = p5sound.audiocontext.createGain();
+      this.dcOffset.connect(this.dcGain);
+      this.dcGain.connect(this.output);
+      // set delay time based on PWM width
+      this.f = freq || 440;
+      var mW = this.w / this.oscillator.frequency.value;
+      this.dNode.delayTime.value = mW;
+      this.dcGain.gain.value = 1.7 * (0.5 - this.w);
+      // disconnect osc2 and connect it to delay, which is connected to output
+      this.osc2.disconnect();
+      this.osc2.panner.disconnect();
+      this.osc2.amp(-1);
+      // inverted amplitude
+      this.osc2.output.connect(this.dNode);
+      this.dNode.connect(this.output);
+      this.output.gain.value = 1;
+      this.output.connect(this.panner);
+    };
+    p5.Pulse.prototype = Object.create(p5.Oscillator.prototype);
+    /**
+     *  Set the width of a Pulse object (an oscillator that implements
+     *  Pulse Width Modulation).
+     *
+     *  @method  width
+     *  @param {Number} [width]    Width between the pulses (0 to 1.0,
+     *                         defaults to 0)
+     */
+    p5.Pulse.prototype.width = function (w) {
+      if (typeof w === 'number') {
+        if (w <= 1 && w >= 0) {
+          this.w = w;
+          // set delay time based on PWM width
+          // var mW = map(this.w, 0, 1.0, 0, 1/this.f);
+          var mW = this.w / this.oscillator.frequency.value;
+          this.dNode.delayTime.value = mW;
+        }
+        this.dcGain.gain.value = 1.7 * (0.5 - this.w);
+      } else {
+        w.connect(this.dNode.delayTime);
+        var sig = new p5.SignalAdd(-0.5);
+        sig.setInput(w);
+        sig = sig.mult(-1);
+        sig = sig.mult(1.7);
+        sig.connect(this.dcGain.gain);
+      }
+    };
+    p5.Pulse.prototype.start = function (f, time) {
+      var now = p5sound.audiocontext.currentTime;
+      var t = time || 0;
+      if (!this.started) {
+        var freq = f || this.f;
+        var type = this.oscillator.type;
+        this.oscillator = p5sound.audiocontext.createOscillator();
+        this.oscillator.frequency.setValueAtTime(freq, now);
+        this.oscillator.type = type;
+        this.oscillator.connect(this.output);
+        this.oscillator.start(t + now);
+        // set up osc2
+        this.osc2.oscillator = p5sound.audiocontext.createOscillator();
+        this.osc2.oscillator.frequency.setValueAtTime(freq, t + now);
+        this.osc2.oscillator.type = type;
+        this.osc2.oscillator.connect(this.osc2.output);
+        this.osc2.start(t + now);
+        this.freqNode = [
+          this.oscillator.frequency,
+          this.osc2.oscillator.frequency
+        ];
+        // start dcOffset, too
+        this.dcOffset = createDCOffset();
+        this.dcOffset.connect(this.dcGain);
+        this.dcOffset.start(t + now);
+        // if LFO connections depend on these oscillators
+        if (this.mods !== undefined && this.mods.frequency !== undefined) {
+          this.mods.frequency.connect(this.freqNode[0]);
+          this.mods.frequency.connect(this.freqNode[1]);
+        }
+        this.started = true;
+        this.osc2.started = true;
+      }
+    };
+    p5.Pulse.prototype.stop = function (time) {
+      if (this.started) {
+        var t = time || 0;
+        var now = p5sound.audiocontext.currentTime;
+        this.oscillator.stop(t + now);
+        this.osc2.oscillator.stop(t + now);
+        this.dcOffset.stop(t + now);
+        this.started = false;
+        this.osc2.started = false;
+      }
+    };
+    p5.Pulse.prototype.freq = function (val, rampTime, tFromNow) {
+      if (typeof val === 'number') {
+        this.f = val;
+        var now = p5sound.audiocontext.currentTime;
+        var rampTime = rampTime || 0;
+        var tFromNow = tFromNow || 0;
+        var currentFreq = this.oscillator.frequency.value;
+        this.oscillator.frequency.cancelScheduledValues(now);
+        this.oscillator.frequency.setValueAtTime(currentFreq, now + tFromNow);
+        this.oscillator.frequency.exponentialRampToValueAtTime(val, tFromNow + rampTime + now);
+        this.osc2.oscillator.frequency.cancelScheduledValues(now);
+        this.osc2.oscillator.frequency.setValueAtTime(currentFreq, now + tFromNow);
+        this.osc2.oscillator.frequency.exponentialRampToValueAtTime(val, tFromNow + rampTime + now);
+        if (this.freqMod) {
+          this.freqMod.output.disconnect();
+          this.freqMod = null;
+        }
+      } else if (val.output) {
+        val.output.disconnect();
+        val.output.connect(this.oscillator.frequency);
+        val.output.connect(this.osc2.oscillator.frequency);
+        this.freqMod = val;
+      }
+    };
+    // inspiration: http://webaudiodemos.appspot.com/oscilloscope/
+    function createDCOffset() {
+      var ac = p5sound.audiocontext;
+      var buffer = ac.createBuffer(1, 2048, ac.sampleRate);
+      var data = buffer.getChannelData(0);
+      for (var i = 0; i < 2048; i++)
+        data[i] = 1;
+      var bufferSource = ac.createBufferSource();
+      bufferSource.buffer = buffer;
+      bufferSource.loop = true;
+      return bufferSource;
+    }
+  }(master, oscillator);
+  var noise;
+  'use strict';
+  noise = function () {
+    var p5sound = master;
+    /**
+     *  Noise is a type of oscillator that generates a buffer with random values.
+     *
+     *  @class p5.Noise
+     *  @extends p5.Oscillator
+     *  @constructor
+     *  @param {String} type Type of noise can be 'white' (default),
+     *                       'brown' or 'pink'.
+     */
+    p5.Noise = function (type) {
+      var assignType;
+      p5.Oscillator.call(this);
+      delete this.f;
+      delete this.freq;
+      delete this.oscillator;
+      if (type === 'brown') {
+        assignType = _brownNoise;
+      } else if (type === 'pink') {
+        assignType = _pinkNoise;
+      } else {
+        assignType = _whiteNoise;
+      }
+      this.buffer = assignType;
+    };
+    p5.Noise.prototype = Object.create(p5.Oscillator.prototype);
+    // generate noise buffers
+    var _whiteNoise = function () {
+      var bufferSize = 2 * p5sound.audiocontext.sampleRate;
+      var whiteBuffer = p5sound.audiocontext.createBuffer(1, bufferSize, p5sound.audiocontext.sampleRate);
+      var noiseData = whiteBuffer.getChannelData(0);
+      for (var i = 0; i < bufferSize; i++) {
+        noiseData[i] = Math.random() * 2 - 1;
+      }
+      whiteBuffer.type = 'white';
+      return whiteBuffer;
+    }();
+    var _pinkNoise = function () {
+      var bufferSize = 2 * p5sound.audiocontext.sampleRate;
+      var pinkBuffer = p5sound.audiocontext.createBuffer(1, bufferSize, p5sound.audiocontext.sampleRate);
+      var noiseData = pinkBuffer.getChannelData(0);
+      var b0, b1, b2, b3, b4, b5, b6;
+      b0 = b1 = b2 = b3 = b4 = b5 = b6 = 0;
+      for (var i = 0; i < bufferSize; i++) {
+        var white = Math.random() * 2 - 1;
+        b0 = 0.99886 * b0 + white * 0.0555179;
+        b1 = 0.99332 * b1 + white * 0.0750759;
+        b2 = 0.969 * b2 + white * 0.153852;
+        b3 = 0.8665 * b3 + white * 0.3104856;
+        b4 = 0.55 * b4 + white * 0.5329522;
+        b5 = -0.7616 * b5 - white * 0.016898;
+        noiseData[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
+        noiseData[i] *= 0.11;
+        // (roughly) compensate for gain
+        b6 = white * 0.115926;
+      }
+      pinkBuffer.type = 'pink';
+      return pinkBuffer;
+    }();
+    var _brownNoise = function () {
+      var bufferSize = 2 * p5sound.audiocontext.sampleRate;
+      var brownBuffer = p5sound.audiocontext.createBuffer(1, bufferSize, p5sound.audiocontext.sampleRate);
+      var noiseData = brownBuffer.getChannelData(0);
+      var lastOut = 0;
+      for (var i = 0; i < bufferSize; i++) {
+        var white = Math.random() * 2 - 1;
+        noiseData[i] = (lastOut + 0.02 * white) / 1.02;
+        lastOut = noiseData[i];
+        noiseData[i] *= 3.5;
+      }
+      brownBuffer.type = 'brown';
+      return brownBuffer;
+    }();
+    /**
+     *  Set type of noise to 'white', 'pink' or 'brown'.
+     *  White is the default.
+     *
+     *  @method setType
+     *  @param {String} [type] 'white', 'pink' or 'brown'
+     */
+    p5.Noise.prototype.setType = function (type) {
+      switch (type) {
+      case 'white':
+        this.buffer = _whiteNoise;
+        break;
+      case 'pink':
+        this.buffer = _pinkNoise;
+        break;
+      case 'brown':
+        this.buffer = _brownNoise;
+        break;
+      default:
+        this.buffer = _whiteNoise;
+      }
+      if (this.started) {
+        var now = p5sound.audiocontext.currentTime;
+        this.stop(now);
+        this.start(now + 0.01);
+      }
+    };
+    p5.Noise.prototype.getType = function () {
+      return this.buffer.type;
+    };
+    /**
+     *  Start the noise
+     *
+     *  @method start
+     */
+    p5.Noise.prototype.start = function () {
+      if (this.started) {
+        this.stop();
+      }
+      this.noise = p5sound.audiocontext.createBufferSource();
+      this.noise.buffer = this.buffer;
+      this.noise.loop = true;
+      this.noise.connect(this.output);
+      var now = p5sound.audiocontext.currentTime;
+      this.noise.start(now);
+      this.started = true;
+    };
+    /**
+     *  Stop the noise.
+     *
+     *  @method  stop
+     */
+    p5.Noise.prototype.stop = function () {
+      var now = p5sound.audiocontext.currentTime;
+      if (this.noise) {
+        this.noise.stop(now);
+        this.started = false;
+      }
+    };
+    /**
+     *  Pan the noise.
+     *
+     *  @method  pan
+     *  @param  {Number} panning Number between -1 (left)
+     *                           and 1 (right)
+     *  @param  {Number} timeFromNow schedule this event to happen
+     *                                seconds from now
+     */
+    /**
+     *  Set the amplitude of the noise between 0 and 1.0. Or,
+     *  modulate amplitude with an audio signal such as an oscillator.
+     *
+     *  @method amp
+     *  @param  {Number|Object} volume amplitude between 0 and 1.0
+     *                                     or modulating signal/oscillator
+     *  @param {Number} [rampTime] create a fade that lasts rampTime
+     *  @param {Number} [timeFromNow] schedule this event to happen
+     *                                seconds from now
+     */
+    /**
+     *  Send output to a p5.sound or web audio object
+     *
+     *  @method  connect
+     *  @param  {Object} unit
+     */
+    /**
+     *  Disconnect all output.
+     *
+     *  @method disconnect
+     */
+    p5.Noise.prototype.dispose = function () {
+      var now = p5sound.audiocontext.currentTime;
+      // remove reference from soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      if (this.noise) {
+        this.noise.disconnect();
+        this.stop(now);
+      }
+      if (this.output) {
+        this.output.disconnect();
+      }
+      if (this.panner) {
+        this.panner.disconnect();
+      }
+      this.output = null;
+      this.panner = null;
+      this.buffer = null;
+      this.noise = null;
+    };
+  }(master);
+  var audioin;
+  'use strict';
+  audioin = function () {
+    var p5sound = master;
+    // an array of input sources
+    p5sound.inputSources = [];
+    /**
+     *  
Get audio from an input, i.e. your computer's microphone.

+     *
+     *  
Turn the mic on/off with the start() and stop() methods. When the mic
+     *  is on, its volume can be measured with getLevel or by connecting an
+     *  FFT object.

+     *
+     *  
If you want to hear the AudioIn, use the .connect() method.
+     *  AudioIn does not connect to p5.sound output by default to prevent
+     *  feedback.

+     *
+     *  
Note: This uses the getUserMedia/
+     *  Stream API, which is not supported by certain browsers. Access in Chrome browser
+     *  is limited to localhost and https, but access over http may be limited.

+     *
+     *  @class p5.AudioIn
+     *  @constructor
+     *  @param {Function} [errorCallback] A function to call if there is an error
+     *                                    accessing the AudioIn. For example,
+     *                                    Safari and iOS devices do not
+     *                                    currently allow microphone access.
+     *  @example
+     *  

+     *  var mic;
+     *  function setup(){
+     *    mic = new p5.AudioIn()
+     *    mic.start();
+     *  }
+     *  function draw(){
+     *    background(0);
+     *    micLevel = mic.getLevel();
+     *    ellipse(width/2, constrain(height-micLevel*height*5, 0, height), 10, 10);
+     *  }
+     *  

+     */
+    p5.AudioIn = function (errorCallback) {
+      // set up audio input
+      this.input = p5sound.audiocontext.createGain();
+      this.output = p5sound.audiocontext.createGain();
+      this.stream = null;
+      this.mediaStream = null;
+      this.currentSource = null;
+      /**
+       *  Client must allow browser to access their microphone / audioin source.
+       *  Default: false. Will become true when the client enables acces.
+       *
+       *  @property {Boolean} enabled
+       */
+      this.enabled = false;
+      // create an amplitude, connect to it by default but not to master out
+      this.amplitude = new p5.Amplitude();
+      this.output.connect(this.amplitude.input);
+      if (!window.MediaStreamTrack || !window.navigator.mediaDevices || !window.navigator.mediaDevices.getUserMedia) {
+        errorCallback ? errorCallback() : window.alert('This browser does not support MediaStreamTrack and mediaDevices');
+      }
+      // add to soundArray so we can dispose on close
+      p5sound.soundArray.push(this);
+    };
+    /**
+     *  Start processing audio input. This enables the use of other
+     *  AudioIn methods like getLevel(). Note that by default, AudioIn
+     *  is not connected to p5.sound's output. So you won't hear
+     *  anything unless you use the connect() method.

+     *
+     *  Certain browsers limit access to the user's microphone. For example,
+     *  Chrome only allows access from localhost and over https. For this reason,
+     *  you may want to include an errorCallback—a function that is called in case
+     *  the browser won't provide mic access.
+     *
+     *  @method start
+     *  @param {Function} [successCallback] Name of a function to call on
+     *                                    success.
+     *  @param {Function} [errorCallback] Name of a function to call if
+     *                                    there was an error. For example,
+     *                                    some browsers do not support
+     *                                    getUserMedia.
+     */
+    p5.AudioIn.prototype.start = function (successCallback, errorCallback) {
+      var self = this;
+      if (this.stream) {
+        this.stop();
+      }
+      // set the audio source
+      var audioSource = p5sound.inputSources[self.currentSource];
+      var constraints = {
+        audio: {
+          sampleRate: p5sound.audiocontext.sampleRate,
+          echoCancellation: false
+        }
+      };
+      // if developers determine which source to use
+      if (p5sound.inputSources[this.currentSource]) {
+        constraints.audio.deviceId = audioSource.deviceId;
+      }
+      window.navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
+        self.stream = stream;
+        self.enabled = true;
+        // Wrap a MediaStreamSourceNode around the live input
+        self.mediaStream = p5sound.audiocontext.createMediaStreamSource(stream);
+        self.mediaStream.connect(self.output);
+        // only send to the Amplitude reader, so we can see it but not hear it.
+        self.amplitude.setInput(self.output);
+        if (successCallback)
+          successCallback();
+      }).catch(function (err) {
+        if (errorCallback)
+          errorCallback(err);
+        else
+          console.error(err);
+      });
+    };
+    /**
+     *  Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().
+     *  If re-starting, the user may be prompted for permission access.
+     *
+     *  @method stop
+     */
+    p5.AudioIn.prototype.stop = function () {
+      if (this.stream) {
+        this.stream.getTracks().forEach(function (track) {
+          track.stop();
+        });
+        this.mediaStream.disconnect();
+        delete this.mediaStream;
+        delete this.stream;
+      }
+    };
+    /**
+     *  Connect to an audio unit. If no parameter is provided, will
+     *  connect to the master output (i.e. your speakers).

+     *
+     *  @method  connect
+     *  @param  {Object} [unit] An object that accepts audio input,
+     *                          such as an FFT
+     */
+    p5.AudioIn.prototype.connect = function (unit) {
+      if (unit) {
+        if (unit.hasOwnProperty('input')) {
+          this.output.connect(unit.input);
+        } else if (unit.hasOwnProperty('analyser')) {
+          this.output.connect(unit.analyser);
+        } else {
+          this.output.connect(unit);
+        }
+      } else {
+        this.output.connect(p5sound.input);
+      }
+    };
+    /**
+     *  Disconnect the AudioIn from all audio units. For example, if
+     *  connect() had been called, disconnect() will stop sending
+     *  signal to your speakers.

+     *
+     *  @method  disconnect
+     */
+    p5.AudioIn.prototype.disconnect = function () {
+      this.output.disconnect();
+      // stay connected to amplitude even if not outputting to p5
+      this.output.connect(this.amplitude.input);
+    };
+    /**
+     *  Read the Amplitude (volume level) of an AudioIn. The AudioIn
+     *  class contains its own instance of the Amplitude class to help
+     *  make it easy to get a microphone's volume level. Accepts an
+     *  optional smoothing value (0.0 < 1.0). NOTE: AudioIn must
+     *  .start() before using .getLevel().

+     *
+     *  @method  getLevel
+     *  @param  {Number} [smoothing] Smoothing is 0.0 by default.
+     *                               Smooths values based on previous values.
+     *  @return {Number}           Volume level (between 0.0 and 1.0)
+     */
+    p5.AudioIn.prototype.getLevel = function (smoothing) {
+      if (smoothing) {
+        this.amplitude.smoothing = smoothing;
+      }
+      return this.amplitude.getLevel();
+    };
+    /**
+     *  Set amplitude (volume) of a mic input between 0 and 1.0. 

+     *
+     *  @method  amp
+     *  @param  {Number} vol between 0 and 1.0
+     *  @param {Number} [time] ramp time (optional)
+     */
+    p5.AudioIn.prototype.amp = function (vol, t) {
+      if (t) {
+        var rampTime = t || 0;
+        var currentVol = this.output.gain.value;
+        this.output.gain.cancelScheduledValues(p5sound.audiocontext.currentTime);
+        this.output.gain.setValueAtTime(currentVol, p5sound.audiocontext.currentTime);
+        this.output.gain.linearRampToValueAtTime(vol, rampTime + p5sound.audiocontext.currentTime);
+      } else {
+        this.output.gain.cancelScheduledValues(p5sound.audiocontext.currentTime);
+        this.output.gain.setValueAtTime(vol, p5sound.audiocontext.currentTime);
+      }
+    };
+    /**
+     * Returns a list of available input sources. This is a wrapper
+     * for  and it returns a Promise.
+     *
+     * @method  getSources
+     * @param  {Function} [successCallback] This callback function handles the sources when they
+     *                                      have been enumerated. The callback function
+     *                                      receives the deviceList array as its only argument
+     * @param  {Function} [errorCallback] This optional callback receives the error
+     *                                    message as its argument.
+     * @returns {Object} Returns a Promise that can be used in place of the callbacks, similar
+     *                            to the enumerateDevices() method
+     * @example
+     *  

+     *  var audiograb;
+     *
+     *  function setup(){
+     *    //new audioIn
+     *    audioGrab = new p5.AudioIn();
+     *
+     *    audioGrab.getSources(function(deviceList) {
+     *      //print out the array of available sources
+     *      console.log(deviceList);
+     *      //set the source to the first item in the deviceList array
+     *      audioGrab.setSource(0);
+     *    });
+     *  }
+     *  

+     */
+    p5.AudioIn.prototype.getSources = function (onSuccess, onError) {
+      return new Promise(function (resolve, reject) {
+        window.navigator.mediaDevices.enumerateDevices().then(function (devices) {
+          p5sound.inputSources = devices.filter(function (device) {
+            return device.kind === 'audioinput';
+          });
+          resolve(p5sound.inputSources);
+          if (onSuccess) {
+            onSuccess(p5sound.inputSources);
+          }
+        }).catch(function (error) {
+          reject(error);
+          if (onError) {
+            onError(error);
+          } else {
+            console.error('This browser does not support MediaStreamTrack.getSources()');
+          }
+        });
+      });
+    };
+    /**
+     *  Set the input source. Accepts a number representing a
+     *  position in the array returned by getSources().
+     *  This is only available in browsers that support
+     *  navigator.mediaDevices.enumerateDevices().

+     *
+     *  @method setSource
+     *  @param {number} num position of input source in the array
+     */
+    p5.AudioIn.prototype.setSource = function (num) {
+      if (p5sound.inputSources.length > 0 && num < p5sound.inputSources.length) {
+        // set the current source
+        this.currentSource = num;
+        console.log('set source to ', p5sound.inputSources[this.currentSource]);
+      } else {
+        console.log('unable to set input source');
+      }
+      // restart stream if currently active
+      if (this.stream && this.stream.active) {
+        this.start();
+      }
+    };
+    // private method
+    p5.AudioIn.prototype.dispose = function () {
+      // remove reference from soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      this.stop();
+      if (this.output) {
+        this.output.disconnect();
+      }
+      if (this.amplitude) {
+        this.amplitude.disconnect();
+      }
+      delete this.amplitude;
+      delete this.output;
+    };
+  }(master);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Negate;
+  Tone_signal_Negate = function (Tone) {
+    'use strict';
+    Tone.Negate = function () {
+      this._multiply = this.input = this.output = new Tone.Multiply(-1);
+    };
+    Tone.extend(Tone.Negate, Tone.SignalBase);
+    Tone.Negate.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._multiply.dispose();
+      this._multiply = null;
+      return this;
+    };
+    return Tone.Negate;
+  }(Tone_core_Tone, Tone_signal_Multiply);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Subtract;
+  Tone_signal_Subtract = function (Tone) {
+    'use strict';
+    Tone.Subtract = function (value) {
+      this.createInsOuts(2, 0);
+      this._sum = this.input[0] = this.output = new Tone.Gain();
+      this._neg = new Tone.Negate();
+      this._param = this.input[1] = new Tone.Signal(value);
+      this._param.chain(this._neg, this._sum);
+    };
+    Tone.extend(Tone.Subtract, Tone.Signal);
+    Tone.Subtract.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._neg.dispose();
+      this._neg = null;
+      this._sum.disconnect();
+      this._sum = null;
+      this._param.dispose();
+      this._param = null;
+      return this;
+    };
+    return Tone.Subtract;
+  }(Tone_core_Tone, Tone_signal_Add, Tone_signal_Negate, Tone_signal_Signal);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_GreaterThanZero;
+  Tone_signal_GreaterThanZero = function (Tone) {
+    'use strict';
+    Tone.GreaterThanZero = function () {
+      this._thresh = this.output = new Tone.WaveShaper(function (val) {
+        if (val <= 0) {
+          return 0;
+        } else {
+          return 1;
+        }
+      }, 127);
+      this._scale = this.input = new Tone.Multiply(10000);
+      this._scale.connect(this._thresh);
+    };
+    Tone.extend(Tone.GreaterThanZero, Tone.SignalBase);
+    Tone.GreaterThanZero.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._scale.dispose();
+      this._scale = null;
+      this._thresh.dispose();
+      this._thresh = null;
+      return this;
+    };
+    return Tone.GreaterThanZero;
+  }(Tone_core_Tone, Tone_signal_Signal, Tone_signal_Multiply);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_GreaterThan;
+  Tone_signal_GreaterThan = function (Tone) {
+    'use strict';
+    Tone.GreaterThan = function (value) {
+      this.createInsOuts(2, 0);
+      this._param = this.input[0] = new Tone.Subtract(value);
+      this.input[1] = this._param.input[1];
+      this._gtz = this.output = new Tone.GreaterThanZero();
+      this._param.connect(this._gtz);
+    };
+    Tone.extend(Tone.GreaterThan, Tone.Signal);
+    Tone.GreaterThan.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._param.dispose();
+      this._param = null;
+      this._gtz.dispose();
+      this._gtz = null;
+      return this;
+    };
+    return Tone.GreaterThan;
+  }(Tone_core_Tone, Tone_signal_GreaterThanZero, Tone_signal_Subtract);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Abs;
+  Tone_signal_Abs = function (Tone) {
+    'use strict';
+    Tone.Abs = function () {
+      this._abs = this.input = this.output = new Tone.WaveShaper(function (val) {
+        if (val === 0) {
+          return 0;
+        } else {
+          return Math.abs(val);
+        }
+      }, 127);
+    };
+    Tone.extend(Tone.Abs, Tone.SignalBase);
+    Tone.Abs.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._abs.dispose();
+      this._abs = null;
+      return this;
+    };
+    return Tone.Abs;
+  }(Tone_core_Tone, Tone_signal_WaveShaper);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Modulo;
+  Tone_signal_Modulo = function (Tone) {
+    'use strict';
+    Tone.Modulo = function (modulus) {
+      this.createInsOuts(1, 0);
+      this._shaper = new Tone.WaveShaper(Math.pow(2, 16));
+      this._multiply = new Tone.Multiply();
+      this._subtract = this.output = new Tone.Subtract();
+      this._modSignal = new Tone.Signal(modulus);
+      this.input.fan(this._shaper, this._subtract);
+      this._modSignal.connect(this._multiply, 0, 0);
+      this._shaper.connect(this._multiply, 0, 1);
+      this._multiply.connect(this._subtract, 0, 1);
+      this._setWaveShaper(modulus);
+    };
+    Tone.extend(Tone.Modulo, Tone.SignalBase);
+    Tone.Modulo.prototype._setWaveShaper = function (mod) {
+      this._shaper.setMap(function (val) {
+        var multiple = Math.floor((val + 0.0001) / mod);
+        return multiple;
+      });
+    };
+    Object.defineProperty(Tone.Modulo.prototype, 'value', {
+      get: function () {
+        return this._modSignal.value;
+      },
+      set: function (mod) {
+        this._modSignal.value = mod;
+        this._setWaveShaper(mod);
+      }
+    });
+    Tone.Modulo.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._shaper.dispose();
+      this._shaper = null;
+      this._multiply.dispose();
+      this._multiply = null;
+      this._subtract.dispose();
+      this._subtract = null;
+      this._modSignal.dispose();
+      this._modSignal = null;
+      return this;
+    };
+    return Tone.Modulo;
+  }(Tone_core_Tone, Tone_signal_WaveShaper, Tone_signal_Multiply);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Pow;
+  Tone_signal_Pow = function (Tone) {
+    'use strict';
+    Tone.Pow = function (exp) {
+      this._exp = this.defaultArg(exp, 1);
+      this._expScaler = this.input = this.output = new Tone.WaveShaper(this._expFunc(this._exp), 8192);
+    };
+    Tone.extend(Tone.Pow, Tone.SignalBase);
+    Object.defineProperty(Tone.Pow.prototype, 'value', {
+      get: function () {
+        return this._exp;
+      },
+      set: function (exp) {
+        this._exp = exp;
+        this._expScaler.setMap(this._expFunc(this._exp));
+      }
+    });
+    Tone.Pow.prototype._expFunc = function (exp) {
+      return function (val) {
+        return Math.pow(Math.abs(val), exp);
+      };
+    };
+    Tone.Pow.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._expScaler.dispose();
+      this._expScaler = null;
+      return this;
+    };
+    return Tone.Pow;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_AudioToGain;
+  Tone_signal_AudioToGain = function (Tone) {
+    'use strict';
+    Tone.AudioToGain = function () {
+      this._norm = this.input = this.output = new Tone.WaveShaper(function (x) {
+        return (x + 1) / 2;
+      });
+    };
+    Tone.extend(Tone.AudioToGain, Tone.SignalBase);
+    Tone.AudioToGain.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._norm.dispose();
+      this._norm = null;
+      return this;
+    };
+    return Tone.AudioToGain;
+  }(Tone_core_Tone, Tone_signal_WaveShaper);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_Expr;
+  Tone_signal_Expr = function (Tone) {
+    'use strict';
+    Tone.Expr = function () {
+      var expr = this._replacements(Array.prototype.slice.call(arguments));
+      var inputCount = this._parseInputs(expr);
+      this._nodes = [];
+      this.input = new Array(inputCount);
+      for (var i = 0; i < inputCount; i++) {
+        this.input[i] = this.context.createGain();
+      }
+      var tree = this._parseTree(expr);
+      var result;
+      try {
+        result = this._eval(tree);
+      } catch (e) {
+        this._disposeNodes();
+        throw new Error('Tone.Expr: Could evaluate expression: ' + expr);
+      }
+      this.output = result;
+    };
+    Tone.extend(Tone.Expr, Tone.SignalBase);
+    function applyBinary(Constructor, args, self) {
+      var op = new Constructor();
+      self._eval(args[0]).connect(op, 0, 0);
+      self._eval(args[1]).connect(op, 0, 1);
+      return op;
+    }
+    function applyUnary(Constructor, args, self) {
+      var op = new Constructor();
+      self._eval(args[0]).connect(op, 0, 0);
+      return op;
+    }
+    function getNumber(arg) {
+      return arg ? parseFloat(arg) : undefined;
+    }
+    function literalNumber(arg) {
+      return arg && arg.args ? parseFloat(arg.args) : undefined;
+    }
+    Tone.Expr._Expressions = {
+      'value': {
+        'signal': {
+          regexp: /^\d+\.\d+|^\d+/,
+          method: function (arg) {
+            var sig = new Tone.Signal(getNumber(arg));
+            return sig;
+          }
+        },
+        'input': {
+          regexp: /^\$\d/,
+          method: function (arg, self) {
+            return self.input[getNumber(arg.substr(1))];
+          }
+        }
+      },
+      'glue': {
+        '(': { regexp: /^\(/ },
+        ')': { regexp: /^\)/ },
+        ',': { regexp: /^,/ }
+      },
+      'func': {
+        'abs': {
+          regexp: /^abs/,
+          method: applyUnary.bind(this, Tone.Abs)
+        },
+        'mod': {
+          regexp: /^mod/,
+          method: function (args, self) {
+            var modulus = literalNumber(args[1]);
+            var op = new Tone.Modulo(modulus);
+            self._eval(args[0]).connect(op);
+            return op;
+          }
+        },
+        'pow': {
+          regexp: /^pow/,
+          method: function (args, self) {
+            var exp = literalNumber(args[1]);
+            var op = new Tone.Pow(exp);
+            self._eval(args[0]).connect(op);
+            return op;
+          }
+        },
+        'a2g': {
+          regexp: /^a2g/,
+          method: function (args, self) {
+            var op = new Tone.AudioToGain();
+            self._eval(args[0]).connect(op);
+            return op;
+          }
+        }
+      },
+      'binary': {
+        '+': {
+          regexp: /^\+/,
+          precedence: 1,
+          method: applyBinary.bind(this, Tone.Add)
+        },
+        '-': {
+          regexp: /^\-/,
+          precedence: 1,
+          method: function (args, self) {
+            if (args.length === 1) {
+              return applyUnary(Tone.Negate, args, self);
+            } else {
+              return applyBinary(Tone.Subtract, args, self);
+            }
+          }
+        },
+        '*': {
+          regexp: /^\*/,
+          precedence: 0,
+          method: applyBinary.bind(this, Tone.Multiply)
+        }
+      },
+      'unary': {
+        '-': {
+          regexp: /^\-/,
+          method: applyUnary.bind(this, Tone.Negate)
+        },
+        '!': {
+          regexp: /^\!/,
+          method: applyUnary.bind(this, Tone.NOT)
+        }
+      }
+    };
+    Tone.Expr.prototype._parseInputs = function (expr) {
+      var inputArray = expr.match(/\$\d/g);
+      var inputMax = 0;
+      if (inputArray !== null) {
+        for (var i = 0; i < inputArray.length; i++) {
+          var inputNum = parseInt(inputArray[i].substr(1)) + 1;
+          inputMax = Math.max(inputMax, inputNum);
+        }
+      }
+      return inputMax;
+    };
+    Tone.Expr.prototype._replacements = function (args) {
+      var expr = args.shift();
+      for (var i = 0; i < args.length; i++) {
+        expr = expr.replace(/\%/i, args[i]);
+      }
+      return expr;
+    };
+    Tone.Expr.prototype._tokenize = function (expr) {
+      var position = -1;
+      var tokens = [];
+      while (expr.length > 0) {
+        expr = expr.trim();
+        var token = getNextToken(expr);
+        tokens.push(token);
+        expr = expr.substr(token.value.length);
+      }
+      function getNextToken(expr) {
+        for (var type in Tone.Expr._Expressions) {
+          var group = Tone.Expr._Expressions[type];
+          for (var opName in group) {
+            var op = group[opName];
+            var reg = op.regexp;
+            var match = expr.match(reg);
+            if (match !== null) {
+              return {
+                type: type,
+                value: match[0],
+                method: op.method
+              };
+            }
+          }
+        }
+        throw new SyntaxError('Tone.Expr: Unexpected token ' + expr);
+      }
+      return {
+        next: function () {
+          return tokens[++position];
+        },
+        peek: function () {
+          return tokens[position + 1];
+        }
+      };
+    };
+    Tone.Expr.prototype._parseTree = function (expr) {
+      var lexer = this._tokenize(expr);
+      var isUndef = this.isUndef.bind(this);
+      function matchSyntax(token, syn) {
+        return !isUndef(token) && token.type === 'glue' && token.value === syn;
+      }
+      function matchGroup(token, groupName, prec) {
+        var ret = false;
+        var group = Tone.Expr._Expressions[groupName];
+        if (!isUndef(token)) {
+          for (var opName in group) {
+            var op = group[opName];
+            if (op.regexp.test(token.value)) {
+              if (!isUndef(prec)) {
+                if (op.precedence === prec) {
+                  return true;
+                }
+              } else {
+                return true;
+              }
+            }
+          }
+        }
+        return ret;
+      }
+      function parseExpression(precedence) {
+        if (isUndef(precedence)) {
+          precedence = 5;
+        }
+        var expr;
+        if (precedence < 0) {
+          expr = parseUnary();
+        } else {
+          expr = parseExpression(precedence - 1);
+        }
+        var token = lexer.peek();
+        while (matchGroup(token, 'binary', precedence)) {
+          token = lexer.next();
+          expr = {
+            operator: token.value,
+            method: token.method,
+            args: [
+              expr,
+              parseExpression(precedence - 1)
+            ]
+          };
+          token = lexer.peek();
+        }
+        return expr;
+      }
+      function parseUnary() {
+        var token, expr;
+        token = lexer.peek();
+        if (matchGroup(token, 'unary')) {
+          token = lexer.next();
+          expr = parseUnary();
+          return {
+            operator: token.value,
+            method: token.method,
+            args: [expr]
+          };
+        }
+        return parsePrimary();
+      }
+      function parsePrimary() {
+        var token, expr;
+        token = lexer.peek();
+        if (isUndef(token)) {
+          throw new SyntaxError('Tone.Expr: Unexpected termination of expression');
+        }
+        if (token.type === 'func') {
+          token = lexer.next();
+          return parseFunctionCall(token);
+        }
+        if (token.type === 'value') {
+          token = lexer.next();
+          return {
+            method: token.method,
+            args: token.value
+          };
+        }
+        if (matchSyntax(token, '(')) {
+          lexer.next();
+          expr = parseExpression();
+          token = lexer.next();
+          if (!matchSyntax(token, ')')) {
+            throw new SyntaxError('Expected )');
+          }
+          return expr;
+        }
+        throw new SyntaxError('Tone.Expr: Parse error, cannot process token ' + token.value);
+      }
+      function parseFunctionCall(func) {
+        var token, args = [];
+        token = lexer.next();
+        if (!matchSyntax(token, '(')) {
+          throw new SyntaxError('Tone.Expr: Expected ( in a function call "' + func.value + '"');
+        }
+        token = lexer.peek();
+        if (!matchSyntax(token, ')')) {
+          args = parseArgumentList();
+        }
+        token = lexer.next();
+        if (!matchSyntax(token, ')')) {
+          throw new SyntaxError('Tone.Expr: Expected ) in a function call "' + func.value + '"');
+        }
+        return {
+          method: func.method,
+          args: args,
+          name: name
+        };
+      }
+      function parseArgumentList() {
+        var token, expr, args = [];
+        while (true) {
+          expr = parseExpression();
+          if (isUndef(expr)) {
+            break;
+          }
+          args.push(expr);
+          token = lexer.peek();
+          if (!matchSyntax(token, ',')) {
+            break;
+          }
+          lexer.next();
+        }
+        return args;
+      }
+      return parseExpression();
+    };
+    Tone.Expr.prototype._eval = function (tree) {
+      if (!this.isUndef(tree)) {
+        var node = tree.method(tree.args, this);
+        this._nodes.push(node);
+        return node;
+      }
+    };
+    Tone.Expr.prototype._disposeNodes = function () {
+      for (var i = 0; i < this._nodes.length; i++) {
+        var node = this._nodes[i];
+        if (this.isFunction(node.dispose)) {
+          node.dispose();
+        } else if (this.isFunction(node.disconnect)) {
+          node.disconnect();
+        }
+        node = null;
+        this._nodes[i] = null;
+      }
+      this._nodes = null;
+    };
+    Tone.Expr.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._disposeNodes();
+    };
+    return Tone.Expr;
+  }(Tone_core_Tone, Tone_signal_Add, Tone_signal_Subtract, Tone_signal_Multiply, Tone_signal_GreaterThan, Tone_signal_GreaterThanZero, Tone_signal_Abs, Tone_signal_Negate, Tone_signal_Modulo, Tone_signal_Pow);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_signal_EqualPowerGain;
+  Tone_signal_EqualPowerGain = function (Tone) {
+    'use strict';
+    Tone.EqualPowerGain = function () {
+      this._eqPower = this.input = this.output = new Tone.WaveShaper(function (val) {
+        if (Math.abs(val) < 0.001) {
+          return 0;
+        } else {
+          return this.equalPowerScale(val);
+        }
+      }.bind(this), 4096);
+    };
+    Tone.extend(Tone.EqualPowerGain, Tone.SignalBase);
+    Tone.EqualPowerGain.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._eqPower.dispose();
+      this._eqPower = null;
+      return this;
+    };
+    return Tone.EqualPowerGain;
+  }(Tone_core_Tone);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_component_CrossFade;
+  Tone_component_CrossFade = function (Tone) {
+    'use strict';
+    Tone.CrossFade = function (initialFade) {
+      this.createInsOuts(2, 1);
+      this.a = this.input[0] = new Tone.Gain();
+      this.b = this.input[1] = new Tone.Gain();
+      this.fade = new Tone.Signal(this.defaultArg(initialFade, 0.5), Tone.Type.NormalRange);
+      this._equalPowerA = new Tone.EqualPowerGain();
+      this._equalPowerB = new Tone.EqualPowerGain();
+      this._invert = new Tone.Expr('1 - $0');
+      this.a.connect(this.output);
+      this.b.connect(this.output);
+      this.fade.chain(this._equalPowerB, this.b.gain);
+      this.fade.chain(this._invert, this._equalPowerA, this.a.gain);
+      this._readOnly('fade');
+    };
+    Tone.extend(Tone.CrossFade);
+    Tone.CrossFade.prototype.dispose = function () {
+      Tone.prototype.dispose.call(this);
+      this._writable('fade');
+      this._equalPowerA.dispose();
+      this._equalPowerA = null;
+      this._equalPowerB.dispose();
+      this._equalPowerB = null;
+      this.fade.dispose();
+      this.fade = null;
+      this._invert.dispose();
+      this._invert = null;
+      this.a.dispose();
+      this.a = null;
+      this.b.dispose();
+      this.b = null;
+      return this;
+    };
+    return Tone.CrossFade;
+  }(Tone_core_Tone, Tone_signal_Signal, Tone_signal_Expr, Tone_signal_EqualPowerGain);
+  var effect;
+  'use strict';
+  effect = function () {
+    var p5sound = master;
+    var CrossFade = Tone_component_CrossFade;
+    /**
+    * Effect is a base class for audio effects in p5. 

+    * This module handles the nodes and methods that are
+    * common and useful for current and future effects.
+    *
+    *
+    * This class is extended by p5.Distortion,
+    * p5.Compressor,
+    * p5.Delay,
+    * p5.Filter,
+    * p5.Reverb.
+    *
+    * @class  p5.Effect
+    * @constructor
+    *
+    * @param {Object} [ac]   Reference to the audio context of the p5 object
+    * @param {AudioNode} [input]  Gain Node effect wrapper
+    * @param {AudioNode} [output] Gain Node effect wrapper
+    * @param {Object} [_drywet]   Tone.JS CrossFade node (defaults to value: 1)
+    * @param {AudioNode} [wet]  Effects that extend this class should connect
+    *                              to the wet signal to this gain node, so that dry and wet
+    *                              signals are mixed properly.
+    */
+    p5.Effect = function () {
+      this.ac = p5sound.audiocontext;
+      this.input = this.ac.createGain();
+      this.output = this.ac.createGain();
+      /**
+      * The p5.Effect class is built
+      *   using Tone.js CrossFade
+      *   @private
+      */
+      this._drywet = new CrossFade(1);
+      /**
+       *  In classes that extend
+       *  p5.Effect, connect effect nodes
+       *  to the wet parameter
+       */
+      this.wet = this.ac.createGain();
+      this.input.connect(this._drywet.a);
+      this.wet.connect(this._drywet.b);
+      this._drywet.connect(this.output);
+      this.connect();
+      //Add to the soundArray
+      p5sound.soundArray.push(this);
+    };
+    /**
+    *  Set the output volume of the filter.
+    *
+    *  @method  amp
+    *  @param {Number} [vol] amplitude between 0 and 1.0
+    *  @param {Number} [rampTime] create a fade that lasts until rampTime
+    *  @param {Number} [tFromNow] schedule this event to happen in tFromNow seconds
+    */
+    p5.Effect.prototype.amp = function (vol, rampTime, tFromNow) {
+      var rampTime = rampTime || 0;
+      var tFromNow = tFromNow || 0;
+      var now = p5sound.audiocontext.currentTime;
+      var currentVol = this.output.gain.value;
+      this.output.gain.cancelScheduledValues(now);
+      this.output.gain.linearRampToValueAtTime(currentVol, now + tFromNow + 0.001);
+      this.output.gain.linearRampToValueAtTime(vol, now + tFromNow + rampTime + 0.001);
+    };
+    /**
+    * Link effects together in a chain
+    * Example usage: filter.chain(reverb, delay, panner);
+    * May be used with an open-ended number of arguments
+    *
+    * @method chain
+       *  @param {Object} [arguments]  Chain together multiple sound objects
+    */
+    p5.Effect.prototype.chain = function () {
+      if (arguments.length > 0) {
+        this.connect(arguments[0]);
+        for (var i = 1; i < arguments.length; i += 1) {
+          arguments[i - 1].connect(arguments[i]);
+        }
+      }
+      return this;
+    };
+    /**
+    * Adjust the dry/wet value.
+    *
+    * @method drywet
+    * @param {Number} [fade] The desired drywet value (0 - 1.0)
+    */
+    p5.Effect.prototype.drywet = function (fade) {
+      if (typeof fade !== 'undefined') {
+        this._drywet.fade.value = fade;
+      }
+      return this._drywet.fade.value;
+    };
+    /**
+    * Send output to a p5.js-sound, Web Audio Node, or use signal to
+    * control an AudioParam
+    *
+    * @method connect
+    * @param {Object} unit
+    */
+    p5.Effect.prototype.connect = function (unit) {
+      var u = unit || p5.soundOut.input;
+      this.output.connect(u.input ? u.input : u);
+    };
+    /**
+    * Disconnect all output.
+    *
+    * @method disconnect
+    */
+    p5.Effect.prototype.disconnect = function () {
+      this.output.disconnect();
+    };
+    p5.Effect.prototype.dispose = function () {
+      // remove refernce form soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      this.input.disconnect();
+      this.input = undefined;
+      this.output.disconnect();
+      this.output = undefined;
+      this._drywet.disconnect();
+      delete this._drywet;
+      this.wet.disconnect();
+      delete this.wet;
+      this.ac = undefined;
+    };
+    return p5.Effect;
+  }(master, Tone_component_CrossFade);
+  var filter;
+  'use strict';
+  filter = function () {
+    var p5sound = master;
+    var Effect = effect;
+    /**
+     *  
A p5.Filter uses a Web Audio Biquad Filter to filter
+     *  the frequency response of an input source. Subclasses
+     *  include:

+     *  * p5.LowPass:
+     *  Allows frequencies below the cutoff frequency to pass through,
+     *  and attenuates frequencies above the cutoff.

+     *  * p5.HighPass:
+     *  The opposite of a lowpass filter. 

+     *  * p5.BandPass:
+     *  Allows a range of frequencies to pass through and attenuates
+     *  the frequencies below and above this frequency range.

+     *
+     *  The .res() method controls either width of the
+     *  bandpass, or resonance of the low/highpass cutoff frequency.
+     *
+     *  This class extends p5.Effect.
+     *  Methods amp(), chain(),
+     *  drywet(), connect(), and
+     *  disconnect() are available.
+     *
+     *  @class p5.Filter
+     *  @extends p5.Effect
+     *  @constructor
+     *  @param {String} [type] 'lowpass' (default), 'highpass', 'bandpass'
+     *  @example
+     *  

+     *  var fft, noise, filter;
+     *
+     *  function setup() {
+     *    fill(255, 40, 255);
+     *
+     *    filter = new p5.BandPass();
+     *
+     *    noise = new p5.Noise();
+     *    // disconnect unfiltered noise,
+     *    // and connect to filter
+     *    noise.disconnect();
+     *    noise.connect(filter);
+     *    noise.start();
+     *
+     *    fft = new p5.FFT();
+     *  }
+     *
+     *  function draw() {
+     *    background(30);
+     *
+     *    // set the BandPass frequency based on mouseX
+     *    var freq = map(mouseX, 0, width, 20, 10000);
+     *    filter.freq(freq);
+     *    // give the filter a narrow band (lower res = wider bandpass)
+     *    filter.res(50);
+     *
+     *    // draw filtered spectrum
+     *    var spectrum = fft.analyze();
+     *    noStroke();
+     *    for (var i = 0; i < spectrum.length; i++) {
+     *      var x = map(i, 0, spectrum.length, 0, width);
+     *      var h = -height + map(spectrum[i], 0, 255, height, 0);
+     *      rect(x, height, width/spectrum.length, h);
+     *    }
+     *
+     *    isMouseOverCanvas();
+     *  }
+     *
+     *  function isMouseOverCanvas() {
+     *    var mX = mouseX, mY = mouseY;
+     *    if (mX > 0 && mX < width && mY < height && mY > 0) {
+     *      noise.amp(0.5, 0.2);
+     *    } else {
+     *      noise.amp(0, 0.2);
+     *    }
+     *  }
+     *  

+     */
+    //constructor with inheritance
+    p5.Filter = function (type) {
+      Effect.call(this);
+      //add extend Effect by adding a Biquad Filter
+      /**
+          *  The p5.Filter is built with a
+          *  
+          *  Web Audio BiquadFilter Node.
+          *
+          *  @property {DelayNode} biquadFilter
+       */
+      this.biquad = this.ac.createBiquadFilter();
+      this.input.connect(this.biquad);
+      this.biquad.connect(this.wet);
+      if (type) {
+        this.setType(type);
+      }
+      //Properties useful for the toggle method.
+      this._on = true;
+      this._untoggledType = this.biquad.type;
+    };
+    p5.Filter.prototype = Object.create(Effect.prototype);
+    /**
+     *  Filter an audio signal according to a set
+     *  of filter parameters.
+     *
+     *  @method  process
+     *  @param  {Object} Signal  An object that outputs audio
+     *  @param {Number} [freq] Frequency in Hz, from 10 to 22050
+     *  @param {Number} [res] Resonance/Width of the filter frequency
+     *                        from 0.001 to 1000
+     */
+    p5.Filter.prototype.process = function (src, freq, res, time) {
+      src.connect(this.input);
+      this.set(freq, res, time);
+    };
+    /**
+     *  Set the frequency and the resonance of the filter.
+     *
+     *  @method  set
+     *  @param {Number} [freq] Frequency in Hz, from 10 to 22050
+     *  @param {Number} [res]  Resonance (Q) from 0.001 to 1000
+     *  @param {Number} [timeFromNow] schedule this event to happen
+     *                                seconds from now
+     */
+    p5.Filter.prototype.set = function (freq, res, time) {
+      if (freq) {
+        this.freq(freq, time);
+      }
+      if (res) {
+        this.res(res, time);
+      }
+    };
+    /**
+     *  Set the filter frequency, in Hz, from 10 to 22050 (the range of
+     *  human hearing, although in reality most people hear in a narrower
+     *  range).
+     *
+     *  @method  freq
+     *  @param  {Number} freq Filter Frequency
+     *  @param {Number} [timeFromNow] schedule this event to happen
+     *                                seconds from now
+     *  @return {Number} value  Returns the current frequency value
+     */
+    p5.Filter.prototype.freq = function (freq, time) {
+      var t = time || 0;
+      if (freq <= 0) {
+        freq = 1;
+      }
+      if (typeof freq === 'number') {
+        this.biquad.frequency.value = freq;
+        this.biquad.frequency.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.biquad.frequency.exponentialRampToValueAtTime(freq, this.ac.currentTime + 0.02 + t);
+      } else if (freq) {
+        freq.connect(this.biquad.frequency);
+      }
+      return this.biquad.frequency.value;
+    };
+    /**
+     *  Controls either width of a bandpass frequency,
+     *  or the resonance of a low/highpass cutoff frequency.
+     *
+     *  @method  res
+     *  @param {Number} res  Resonance/Width of filter freq
+     *                       from 0.001 to 1000
+     *  @param {Number} [timeFromNow] schedule this event to happen
+     *                                seconds from now
+     *  @return {Number} value Returns the current res value
+     */
+    p5.Filter.prototype.res = function (res, time) {
+      var t = time || 0;
+      if (typeof res === 'number') {
+        this.biquad.Q.value = res;
+        this.biquad.Q.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.biquad.Q.linearRampToValueAtTime(res, this.ac.currentTime + 0.02 + t);
+      } else if (res) {
+        res.connect(this.biquad.Q);
+      }
+      return this.biquad.Q.value;
+    };
+    /**
+     * Controls the gain attribute of a Biquad Filter.
+     * This is distinctly different from .amp() which is inherited from p5.Effect
+     * .amp() controls the volume via the output gain node
+     * p5.Filter.gain() controls the gain parameter of a Biquad Filter node.
+     *
+     * @method gain
+     * @param  {Number} gain
+     * @return {Number} Returns the current or updated gain value
+     */
+    p5.Filter.prototype.gain = function (gain, time) {
+      var t = time || 0;
+      if (typeof gain === 'number') {
+        this.biquad.gain.value = gain;
+        this.biquad.gain.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.biquad.gain.linearRampToValueAtTime(gain, this.ac.currentTime + 0.02 + t);
+      } else if (gain) {
+        gain.connect(this.biquad.gain);
+      }
+      return this.biquad.gain.value;
+    };
+    /**
+     * Toggle function. Switches between the specified type and allpass
+     *
+     * @method toggle
+     * @return {boolean} [Toggle value]
+     */
+    p5.Filter.prototype.toggle = function () {
+      this._on = !this._on;
+      if (this._on === true) {
+        this.biquad.type = this._untoggledType;
+      } else if (this._on === false) {
+        this.biquad.type = 'allpass';
+      }
+      return this._on;
+    };
+    /**
+     *  Set the type of a p5.Filter. Possible types include:
+     *  "lowpass" (default), "highpass", "bandpass",
+     *  "lowshelf", "highshelf", "peaking", "notch",
+     *  "allpass".
+     *
+     *  @method  setType
+     *  @param {String} t
+     */
+    p5.Filter.prototype.setType = function (t) {
+      this.biquad.type = t;
+      this._untoggledType = this.biquad.type;
+    };
+    p5.Filter.prototype.dispose = function () {
+      // remove reference from soundArray
+      Effect.prototype.dispose.apply(this);
+      this.biquad.disconnect();
+      this.biquad = undefined;
+    };
+    /**
+     *  Constructor: new p5.LowPass() Filter.
+     *  This is the same as creating a p5.Filter and then calling
+     *  its method setType('lowpass').
+     *  See p5.Filter for methods.
+     *
+     *  @class p5.LowPass
+     *  @constructor
+     *  @extends p5.Filter
+     */
+    p5.LowPass = function () {
+      p5.Filter.call(this, 'lowpass');
+    };
+    p5.LowPass.prototype = Object.create(p5.Filter.prototype);
+    /**
+     *  Constructor: new p5.HighPass() Filter.
+     *  This is the same as creating a p5.Filter and then calling
+     *  its method setType('highpass').
+     *  See p5.Filter for methods.
+     *
+     *  @class p5.HighPass
+     *  @constructor
+     *  @extends p5.Filter
+     */
+    p5.HighPass = function () {
+      p5.Filter.call(this, 'highpass');
+    };
+    p5.HighPass.prototype = Object.create(p5.Filter.prototype);
+    /**
+     *  Constructor: new p5.BandPass() Filter.
+     *  This is the same as creating a p5.Filter and then calling
+     *  its method setType('bandpass').
+     *  See p5.Filter for methods.
+     *
+     *  @class p5.BandPass
+     *  @constructor
+     *  @extends p5.Filter
+     */
+    p5.BandPass = function () {
+      p5.Filter.call(this, 'bandpass');
+    };
+    p5.BandPass.prototype = Object.create(p5.Filter.prototype);
+    return p5.Filter;
+  }(master, effect);
+  var src_eqFilter;
+  'use strict';
+  src_eqFilter = function () {
+    var Filter = filter;
+    var p5sound = master;
+    /**
+     *  EQFilter extends p5.Filter with constraints
+     *  necessary for the p5.EQ
+     *
+     *  @private
+     */
+    var EQFilter = function (freq, res) {
+      Filter.call(this, 'peaking');
+      this.disconnect();
+      this.set(freq, res);
+      this.biquad.gain.value = 0;
+      delete this.input;
+      delete this.output;
+      delete this._drywet;
+      delete this.wet;
+    };
+    EQFilter.prototype = Object.create(Filter.prototype);
+    EQFilter.prototype.amp = function () {
+      console.warn('`amp()` is not available for p5.EQ bands. Use `.gain()`');
+    };
+    EQFilter.prototype.drywet = function () {
+      console.warn('`drywet()` is not available for p5.EQ bands.');
+    };
+    EQFilter.prototype.connect = function (unit) {
+      var u = unit || p5.soundOut.input;
+      if (this.biquad) {
+        this.biquad.connect(u.input ? u.input : u);
+      } else {
+        this.output.connect(u.input ? u.input : u);
+      }
+    };
+    EQFilter.prototype.disconnect = function () {
+      this.biquad.disconnect();
+    };
+    EQFilter.prototype.dispose = function () {
+      // remove reference form soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      this.disconnect();
+      delete this.biquad;
+    };
+    return EQFilter;
+  }(filter, master);
+  var eq;
+  'use strict';
+  eq = function () {
+    var Effect = effect;
+    var EQFilter = src_eqFilter;
+    /**
+     * p5.EQ is an audio effect that performs the function of a multiband
+     * audio equalizer. Equalization is used to adjust the balance of
+     * frequency compoenents of an audio signal. This process is commonly used
+     * in sound production and recording to change the waveform before it reaches
+     * a sound output device. EQ can also be used as an audio effect to create
+     * interesting distortions by filtering out parts of the spectrum. p5.EQ is
+     * built using a chain of Web Audio Biquad Filter Nodes and can be
+     * instantiated with 3 or 8 bands. Bands can be added or removed from
+     * the EQ by directly modifying p5.EQ.bands (the array that stores filters).
+     *
+     * This class extends p5.Effect.
+     * Methods amp(), chain(),
+     * drywet(), connect(), and
+     * disconnect() are available.
+     *
+     * @class p5.EQ
+     * @constructor
+     * @extends p5.Effect
+     * @param {Number} [_eqsize] Constructor will accept 3 or 8, defaults to 3
+     * @return {Object} p5.EQ object
+     *
+     * @example
+     * 

+     * var eq;
+     * var band_names;
+     * var band_index;
+     *
+     * var soundFile, play;
+     *
+     * function preload() {
+     *   soundFormats('mp3', 'ogg');
+     *   soundFile = loadSound('assets/beat');
+     * }
+     *
+     * function setup() {
+     *   eq = new p5.EQ(3);
+     *   soundFile.disconnect();
+     *   eq.process(soundFile);
+     *
+     *   band_names = ['lows','mids','highs'];
+     *   band_index = 0;
+     *   play = false;
+     *   textAlign(CENTER);
+     * }
+     *
+     * function draw() {
+     *   background(30);
+     *   noStroke();
+     *   fill(255);
+     *   text('click to kill',50,25);
+     *
+     *   fill(255, 40, 255);
+     *   textSize(26);
+     *   text(band_names[band_index],50,55);
+     *
+     *   fill(255);
+     *   textSize(9);
+     *   text('space = play/pause',50,80);
+     * }
+     *
+     * //If mouse is over canvas, cycle to the next band and kill the frequency
+     * function mouseClicked() {
+     *   for (var i = 0; i < eq.bands.length; i++) {
+     *     eq.bands[i].gain(0);
+     *   }
+     *   eq.bands[band_index].gain(-40);
+     *   if (mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0) {
+     *     band_index === 2 ? band_index = 0 : band_index++;
+     *   }
+     * }
+     *
+     * //use space bar to trigger play / pause
+     * function keyPressed() {
+     *   if (key===' ') {
+     *     play = !play
+     *     play ? soundFile.loop() : soundFile.pause();
+     *   }
+     * }
+     * 

+     */
+    p5.EQ = function (_eqsize) {
+      Effect.call(this);
+      //p5.EQ can be of size (3) or (8), defaults to 3
+      _eqsize = _eqsize === 3 || _eqsize === 8 ? _eqsize : 3;
+      var factor;
+      _eqsize === 3 ? factor = Math.pow(2, 3) : factor = 2;
+      /**
+        *  The p5.EQ is built with abstracted p5.Filter objects.
+        *  To modify any bands, use methods of the 
+        *  p5.Filter API, especially `gain` and `freq`.
+        *  Bands are stored in an array, with indices 0 - 3, or 0 - 7
+        *  @property {Array}  bands
+        *
+      */
+      this.bands = [];
+      var freq, res;
+      for (var i = 0; i < _eqsize; i++) {
+        if (i === _eqsize - 1) {
+          freq = 21000;
+          res = 0.01;
+        } else if (i === 0) {
+          freq = 100;
+          res = 0.1;
+        } else if (i === 1) {
+          freq = _eqsize === 3 ? 360 * factor : 360;
+          res = 1;
+        } else {
+          freq = this.bands[i - 1].freq() * factor;
+          res = 1;
+        }
+        this.bands[i] = this._newBand(freq, res);
+        if (i > 0) {
+          this.bands[i - 1].connect(this.bands[i].biquad);
+        } else {
+          this.input.connect(this.bands[i].biquad);
+        }
+      }
+      this.bands[_eqsize - 1].connect(this.output);
+    };
+    p5.EQ.prototype = Object.create(Effect.prototype);
+    /**
+     * Process an input by connecting it to the EQ
+     * @method  process
+     * @param  {Object} src Audio source
+     */
+    p5.EQ.prototype.process = function (src) {
+      src.connect(this.input);
+    };
+    //  /**
+    //   * Set the frequency and gain of each band in the EQ. This method should be
+    //   * called with 3 or 8 frequency and gain pairs, depending on the size of the EQ.
+    //   * ex. eq.set(freq0, gain0, freq1, gain1, freq2, gain2);
+    //   *
+    //   * @method  set
+    //   * @param {Number} [freq0] Frequency value for band with index 0
+    //   * @param {Number} [gain0] Gain value for band with index 0
+    //   * @param {Number} [freq1] Frequency value for band with index 1
+    //   * @param {Number} [gain1] Gain value for band with index 1
+    //   * @param {Number} [freq2] Frequency value for band with index 2
+    //   * @param {Number} [gain2] Gain value for band with index 2
+    //   * @param {Number} [freq3] Frequency value for band with index 3
+    //   * @param {Number} [gain3] Gain value for band with index 3
+    //   * @param {Number} [freq4] Frequency value for band with index 4
+    //   * @param {Number} [gain4] Gain value for band with index 4
+    //   * @param {Number} [freq5] Frequency value for band with index 5
+    //   * @param {Number} [gain5] Gain value for band with index 5
+    //   * @param {Number} [freq6] Frequency value for band with index 6
+    //   * @param {Number} [gain6] Gain value for band with index 6
+    //   * @param {Number} [freq7] Frequency value for band with index 7
+    //   * @param {Number} [gain7] Gain value for band with index 7
+    //   */
+    p5.EQ.prototype.set = function () {
+      if (arguments.length === this.bands.length * 2) {
+        for (var i = 0; i < arguments.length; i += 2) {
+          this.bands[i / 2].freq(arguments[i]);
+          this.bands[i / 2].gain(arguments[i + 1]);
+        }
+      } else {
+        console.error('Argument mismatch. .set() should be called with ' + this.bands.length * 2 + ' arguments. (one frequency and gain value pair for each band of the eq)');
+      }
+    };
+    /**
+     * Add a new band. Creates a p5.Filter and strips away everything but
+     * the raw biquad filter. This method returns an abstracted p5.Filter,
+     * which can be added to p5.EQ.bands, in order to create new EQ bands.
+     * @private
+     * @method  _newBand
+     * @param  {Number} freq
+     * @param  {Number} res
+     * @return {Object}      Abstracted Filter
+     */
+    p5.EQ.prototype._newBand = function (freq, res) {
+      return new EQFilter(freq, res);
+    };
+    p5.EQ.prototype.dispose = function () {
+      Effect.prototype.dispose.apply(this);
+      while (this.bands.length > 0) {
+        delete this.bands.pop().dispose();
+      }
+      delete this.bands;
+    };
+    return p5.EQ;
+  }(effect, src_eqFilter);
+  var panner3d;
+  'use strict';
+  panner3d = function () {
+    var p5sound = master;
+    var Effect = effect;
+    /**
+     * Panner3D is based on the 
+     * Web Audio Spatial Panner Node.
+     * This panner is a spatial processing node that allows audio to be positioned
+     * and oriented in 3D space.
+     *
+     * The position is relative to an 
+     * Audio Context Listener, which can be accessed
+     * by p5.soundOut.audiocontext.listener
+     *
+     *
+     * @class p5.Panner3D
+     * @constructor
+     */
+    p5.Panner3D = function () {
+      Effect.call(this);
+      /**
+       *  
+       *  Web Audio Spatial Panner Node
+       *
+       *  Properties include
+       *    -  panningModel: "equal power" or "HRTF"
+       *    -  distanceModel: "linear", "inverse", or "exponential"
+       *
+       *  @property {AudioNode} panner
+       *
+       */
+      this.panner = this.ac.createPanner();
+      this.panner.panningModel = 'HRTF';
+      this.panner.distanceModel = 'linear';
+      this.panner.connect(this.output);
+      this.input.connect(this.panner);
+    };
+    p5.Panner3D.prototype = Object.create(Effect.prototype);
+    /**
+     * Connect an audio sorce
+     *
+     * @method  process
+     * @param  {Object} src Input source
+     */
+    p5.Panner3D.prototype.process = function (src) {
+      src.connect(this.input);
+    };
+    /**
+     * Set the X,Y,Z position of the Panner
+     * @method set
+     * @param  {Number} xVal
+     * @param  {Number} yVal
+     * @param  {Number} zVal
+     * @param  {Number} time
+     * @return {Array}      Updated x, y, z values as an array
+     */
+    p5.Panner3D.prototype.set = function (xVal, yVal, zVal, time) {
+      this.positionX(xVal, time);
+      this.positionY(yVal, time);
+      this.positionZ(zVal, time);
+      return [
+        this.panner.positionX.value,
+        this.panner.positionY.value,
+        this.panner.positionZ.value
+      ];
+    };
+    /**
+     * Getter and setter methods for position coordinates
+     * @method positionX
+     * @return {Number}      updated coordinate value
+     */
+    /**
+     * Getter and setter methods for position coordinates
+     * @method positionY
+     * @return {Number}      updated coordinate value
+     */
+    /**
+     * Getter and setter methods for position coordinates
+     * @method positionZ
+     * @return {Number}      updated coordinate value
+     */
+    p5.Panner3D.prototype.positionX = function (xVal, time) {
+      var t = time || 0;
+      if (typeof xVal === 'number') {
+        this.panner.positionX.value = xVal;
+        this.panner.positionX.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.panner.positionX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t);
+      } else if (xVal) {
+        xVal.connect(this.panner.positionX);
+      }
+      return this.panner.positionX.value;
+    };
+    p5.Panner3D.prototype.positionY = function (yVal, time) {
+      var t = time || 0;
+      if (typeof yVal === 'number') {
+        this.panner.positionY.value = yVal;
+        this.panner.positionY.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.panner.positionY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t);
+      } else if (yVal) {
+        yVal.connect(this.panner.positionY);
+      }
+      return this.panner.positionY.value;
+    };
+    p5.Panner3D.prototype.positionZ = function (zVal, time) {
+      var t = time || 0;
+      if (typeof zVal === 'number') {
+        this.panner.positionZ.value = zVal;
+        this.panner.positionZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.panner.positionZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t);
+      } else if (zVal) {
+        zVal.connect(this.panner.positionZ);
+      }
+      return this.panner.positionZ.value;
+    };
+    /**
+     * Set the X,Y,Z position of the Panner
+     * @method  orient
+     * @param  {Number} xVal
+     * @param  {Number} yVal
+     * @param  {Number} zVal
+     * @param  {Number} time
+     * @return {Array}      Updated x, y, z values as an array
+     */
+    p5.Panner3D.prototype.orient = function (xVal, yVal, zVal, time) {
+      this.orientX(xVal, time);
+      this.orientY(yVal, time);
+      this.orientZ(zVal, time);
+      return [
+        this.panner.orientationX.value,
+        this.panner.orientationY.value,
+        this.panner.orientationZ.value
+      ];
+    };
+    /**
+     * Getter and setter methods for orient coordinates
+     * @method orientX
+     * @return {Number}      updated coordinate value
+     */
+    /**
+     * Getter and setter methods for orient coordinates
+     * @method orientY
+     * @return {Number}      updated coordinate value
+     */
+    /**
+     * Getter and setter methods for orient coordinates
+     * @method orientZ
+     * @return {Number}      updated coordinate value
+     */
+    p5.Panner3D.prototype.orientX = function (xVal, time) {
+      var t = time || 0;
+      if (typeof xVal === 'number') {
+        this.panner.orientationX.value = xVal;
+        this.panner.orientationX.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.panner.orientationX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t);
+      } else if (xVal) {
+        xVal.connect(this.panner.orientationX);
+      }
+      return this.panner.orientationX.value;
+    };
+    p5.Panner3D.prototype.orientY = function (yVal, time) {
+      var t = time || 0;
+      if (typeof yVal === 'number') {
+        this.panner.orientationY.value = yVal;
+        this.panner.orientationY.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.panner.orientationY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t);
+      } else if (yVal) {
+        yVal.connect(this.panner.orientationY);
+      }
+      return this.panner.orientationY.value;
+    };
+    p5.Panner3D.prototype.orientZ = function (zVal, time) {
+      var t = time || 0;
+      if (typeof zVal === 'number') {
+        this.panner.orientationZ.value = zVal;
+        this.panner.orientationZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.panner.orientationZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t);
+      } else if (zVal) {
+        zVal.connect(this.panner.orientationZ);
+      }
+      return this.panner.orientationZ.value;
+    };
+    /**
+     * Set the rolloff factor and max distance
+     * @method  setFalloff
+     * @param {Number} [maxDistance]
+     * @param {Number} [rolloffFactor]
+     */
+    p5.Panner3D.prototype.setFalloff = function (maxDistance, rolloffFactor) {
+      this.maxDist(maxDistance);
+      this.rolloff(rolloffFactor);
+    };
+    /**
+     * Maxium distance between the source and the listener
+     * @method  maxDist
+     * @param  {Number} maxDistance
+     * @return {Number} updated value
+     */
+    p5.Panner3D.prototype.maxDist = function (maxDistance) {
+      if (typeof maxDistance === 'number') {
+        this.panner.maxDistance = maxDistance;
+      }
+      return this.panner.maxDistance;
+    };
+    /**
+     * How quickly the volume is reduced as the source moves away from the listener
+     * @method  rollof
+     * @param  {Number} rolloffFactor
+     * @return {Number} updated value
+     */
+    p5.Panner3D.prototype.rolloff = function (rolloffFactor) {
+      if (typeof rolloffFactor === 'number') {
+        this.panner.rolloffFactor = rolloffFactor;
+      }
+      return this.panner.rolloffFactor;
+    };
+    p5.Panner3D.dispose = function () {
+      Effect.prototype.dispose.apply(this);
+      this.panner.disconnect();
+      delete this.panner;
+    };
+    return p5.Panner3D;
+  }(master, effect);
+  var listener3d;
+  'use strict';
+  listener3d = function () {
+    var p5sound = master;
+    var Effect = effect;
+    //  /**
+    //   * listener is a class that can construct both a Spatial Panner
+    //   * and a Spatial Listener. The panner is based on the
+    //   * Web Audio Spatial Panner Node
+    //   * https://www.w3.org/TR/webaudio/#the-listenernode-interface
+    //   * This panner is a spatial processing node that allows audio to be positioned
+    //   * and oriented in 3D space.
+    //   *
+    //   * The Listener modifies the properties of the Audio Context Listener.
+    //   * Both objects types use the same methods. The default is a spatial panner.
+    //   *
+    //   * p5.Panner3D - Constructs a Spatial Panner

+    //   * p5.Listener3D - Constructs a Spatial Listener

+    //   *
+    //   * @class listener
+    //   * @constructor
+    //   * @return {Object} p5.Listener3D Object
+    //   *
+    //   * @param {Web Audio Node} listener Web Audio Spatial Panning Node
+    //   * @param {AudioParam} listener.panningModel "equal power" or "HRTF"
+    //   * @param {AudioParam} listener.distanceModel "linear", "inverse", or "exponential"
+    //   * @param {String} [type] [Specify construction of a spatial panner or listener]
+    //   */
+    p5.Listener3D = function (type) {
+      this.ac = p5sound.audiocontext;
+      this.listener = this.ac.listener;
+    };
+    //  /**
+    //   * Connect an audio sorce
+    //   * @param  {Object} src Input source
+    //   */
+    p5.Listener3D.prototype.process = function (src) {
+      src.connect(this.input);
+    };
+    //  /**
+    //   * Set the X,Y,Z position of the Panner
+    //   * @param  {[Number]} xVal
+    //   * @param  {[Number]} yVal
+    //   * @param  {[Number]} zVal
+    //   * @param  {[Number]} time
+    //   * @return {[Array]}      [Updated x, y, z values as an array]
+    //   */
+    p5.Listener3D.prototype.position = function (xVal, yVal, zVal, time) {
+      this.positionX(xVal, time);
+      this.positionY(yVal, time);
+      this.positionZ(zVal, time);
+      return [
+        this.listener.positionX.value,
+        this.listener.positionY.value,
+        this.listener.positionZ.value
+      ];
+    };
+    //  /**
+    //   * Getter and setter methods for position coordinates
+    //   * @return {Number}      [updated coordinate value]
+    //   */
+    p5.Listener3D.prototype.positionX = function (xVal, time) {
+      var t = time || 0;
+      if (typeof xVal === 'number') {
+        this.listener.positionX.value = xVal;
+        this.listener.positionX.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.listener.positionX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t);
+      } else if (xVal) {
+        xVal.connect(this.listener.positionX);
+      }
+      return this.listener.positionX.value;
+    };
+    p5.Listener3D.prototype.positionY = function (yVal, time) {
+      var t = time || 0;
+      if (typeof yVal === 'number') {
+        this.listener.positionY.value = yVal;
+        this.listener.positionY.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.listener.positionY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t);
+      } else if (yVal) {
+        yVal.connect(this.listener.positionY);
+      }
+      return this.listener.positionY.value;
+    };
+    p5.Listener3D.prototype.positionZ = function (zVal, time) {
+      var t = time || 0;
+      if (typeof zVal === 'number') {
+        this.listener.positionZ.value = zVal;
+        this.listener.positionZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.listener.positionZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t);
+      } else if (zVal) {
+        zVal.connect(this.listener.positionZ);
+      }
+      return this.listener.positionZ.value;
+    };
+    // cannot define method when class definition is commented
+    //  /**
+    //   * Overrides the listener orient() method because Listener has slightly
+    //   * different params. In human terms, Forward vectors are the direction the
+    //   * nose is pointing. Up vectors are the direction of the top of the head.
+    //   *
+    //   * @method orient
+    //   * @param  {Number} xValF  Forward vector X direction
+    //   * @param  {Number} yValF  Forward vector Y direction
+    //   * @param  {Number} zValF  Forward vector Z direction
+    //   * @param  {Number} xValU  Up vector X direction
+    //   * @param  {Number} yValU  Up vector Y direction
+    //   * @param  {Number} zValU  Up vector Z direction
+    //   * @param  {Number} time
+    //   * @return {Array}       All orienation params
+    //   */
+    p5.Listener3D.prototype.orient = function (xValF, yValF, zValF, xValU, yValU, zValU, time) {
+      if (arguments.length === 3 || arguments.length === 4) {
+        time = arguments[3];
+        this.orientForward(xValF, yValF, zValF, time);
+      } else if (arguments.length === 6 || arguments === 7) {
+        this.orientForward(xValF, yValF, zValF);
+        this.orientUp(xValU, yValU, zValU, time);
+      }
+      return [
+        this.listener.forwardX.value,
+        this.listener.forwardY.value,
+        this.listener.forwardZ.value,
+        this.listener.upX.value,
+        this.listener.upY.value,
+        this.listener.upZ.value
+      ];
+    };
+    p5.Listener3D.prototype.orientForward = function (xValF, yValF, zValF, time) {
+      this.forwardX(xValF, time);
+      this.forwardY(yValF, time);
+      this.forwardZ(zValF, time);
+      return [
+        this.listener.forwardX,
+        this.listener.forwardY,
+        this.listener.forwardZ
+      ];
+    };
+    p5.Listener3D.prototype.orientUp = function (xValU, yValU, zValU, time) {
+      this.upX(xValU, time);
+      this.upY(yValU, time);
+      this.upZ(zValU, time);
+      return [
+        this.listener.upX,
+        this.listener.upY,
+        this.listener.upZ
+      ];
+    };
+    //  /**
+    //   * Getter and setter methods for orient coordinates
+    //   * @return {Number}      [updated coordinate value]
+    //   */
+    p5.Listener3D.prototype.forwardX = function (xVal, time) {
+      var t = time || 0;
+      if (typeof xVal === 'number') {
+        this.listener.forwardX.value = xVal;
+        this.listener.forwardX.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.listener.forwardX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t);
+      } else if (xVal) {
+        xVal.connect(this.listener.forwardX);
+      }
+      return this.listener.forwardX.value;
+    };
+    p5.Listener3D.prototype.forwardY = function (yVal, time) {
+      var t = time || 0;
+      if (typeof yVal === 'number') {
+        this.listener.forwardY.value = yVal;
+        this.listener.forwardY.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.listener.forwardY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t);
+      } else if (yVal) {
+        yVal.connect(this.listener.forwardY);
+      }
+      return this.listener.forwardY.value;
+    };
+    p5.Listener3D.prototype.forwardZ = function (zVal, time) {
+      var t = time || 0;
+      if (typeof zVal === 'number') {
+        this.listener.forwardZ.value = zVal;
+        this.listener.forwardZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.listener.forwardZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t);
+      } else if (zVal) {
+        zVal.connect(this.listener.forwardZ);
+      }
+      return this.listener.forwardZ.value;
+    };
+    p5.Listener3D.prototype.upX = function (xVal, time) {
+      var t = time || 0;
+      if (typeof xVal === 'number') {
+        this.listener.upX.value = xVal;
+        this.listener.upX.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.listener.upX.linearRampToValueAtTime(xVal, this.ac.currentTime + 0.02 + t);
+      } else if (xVal) {
+        xVal.connect(this.listener.upX);
+      }
+      return this.listener.upX.value;
+    };
+    p5.Listener3D.prototype.upY = function (yVal, time) {
+      var t = time || 0;
+      if (typeof yVal === 'number') {
+        this.listener.upY.value = yVal;
+        this.listener.upY.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.listener.upY.linearRampToValueAtTime(yVal, this.ac.currentTime + 0.02 + t);
+      } else if (yVal) {
+        yVal.connect(this.listener.upY);
+      }
+      return this.listener.upY.value;
+    };
+    p5.Listener3D.prototype.upZ = function (zVal, time) {
+      var t = time || 0;
+      if (typeof zVal === 'number') {
+        this.listener.upZ.value = zVal;
+        this.listener.upZ.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.listener.upZ.linearRampToValueAtTime(zVal, this.ac.currentTime + 0.02 + t);
+      } else if (zVal) {
+        zVal.connect(this.listener.upZ);
+      }
+      return this.listener.upZ.value;
+    };
+    return p5.Listener3D;
+  }(master, effect);
+  var delay;
+  'use strict';
+  delay = function () {
+    var Filter = filter;
+    var Effect = effect;
+    /**
+     *  Delay is an echo effect. It processes an existing sound source,
+     *  and outputs a delayed version of that sound. The p5.Delay can
+     *  produce different effects depending on the delayTime, feedback,
+     *  filter, and type. In the example below, a feedback of 0.5 (the
+     *  defaul value) will produce a looping delay that decreases in
+     *  volume by 50% each repeat. A filter will cut out the high
+     *  frequencies so that the delay does not sound as piercing as the
+     *  original source.
+     *
+     *
+     *  This class extends p5.Effect.
+     *  Methods amp(), chain(),
+     *  drywet(), connect(), and
+     *  disconnect() are available.
+     *  @class p5.Delay
+     *  @extends p5.Effect
+     *  @constructor
+     *  @example
+     *  

+     *  var noise, env, delay;
+     *
+     *  function setup() {
+     *    background(0);
+     *    noStroke();
+     *    fill(255);
+     *    textAlign(CENTER);
+     *    text('click to play', width/2, height/2);
+     *
+     *    noise = new p5.Noise('brown');
+     *    noise.amp(0);
+     *    noise.start();
+     *
+     *    delay = new p5.Delay();
+     *
+     *    // delay.process() accepts 4 parameters:
+     *    // source, delayTime, feedback, filter frequency
+     *    // play with these numbers!!
+     *    delay.process(noise, .12, .7, 2300);
+     *
+     *    // play the noise with an envelope,
+     *    // a series of fades ( time / value pairs )
+     *    env = new p5.Env(.01, 0.2, .2, .1);
+     *  }
+     *
+     *  // mouseClick triggers envelope
+     *  function mouseClicked() {
+     *    // is mouse over canvas?
+     *    if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+     *      env.play(noise);
+     *    }
+     *  }
+     *  

+     */
+    p5.Delay = function () {
+      Effect.call(this);
+      this._split = this.ac.createChannelSplitter(2);
+      this._merge = this.ac.createChannelMerger(2);
+      this._leftGain = this.ac.createGain();
+      this._rightGain = this.ac.createGain();
+      /**
+       *  The p5.Delay is built with two
+       *  
+       *  Web Audio Delay Nodes, one for each stereo channel.
+       *
+       *  @property {DelayNode} leftDelay
+       */
+      this.leftDelay = this.ac.createDelay();
+      /**
+       *  The p5.Delay is built with two
+       *  
+       *  Web Audio Delay Nodes, one for each stereo channel.
+       *
+       *  @property {DelayNode} rightDelay
+       */
+      this.rightDelay = this.ac.createDelay();
+      this._leftFilter = new Filter();
+      this._rightFilter = new Filter();
+      this._leftFilter.disconnect();
+      this._rightFilter.disconnect();
+      this._leftFilter.biquad.frequency.setValueAtTime(1200, this.ac.currentTime);
+      this._rightFilter.biquad.frequency.setValueAtTime(1200, this.ac.currentTime);
+      this._leftFilter.biquad.Q.setValueAtTime(0.3, this.ac.currentTime);
+      this._rightFilter.biquad.Q.setValueAtTime(0.3, this.ac.currentTime);
+      // graph routing
+      this.input.connect(this._split);
+      this.leftDelay.connect(this._leftGain);
+      this.rightDelay.connect(this._rightGain);
+      this._leftGain.connect(this._leftFilter.input);
+      this._rightGain.connect(this._rightFilter.input);
+      this._merge.connect(this.wet);
+      this._leftFilter.biquad.gain.setValueAtTime(1, this.ac.currentTime);
+      this._rightFilter.biquad.gain.setValueAtTime(1, this.ac.currentTime);
+      // default routing
+      this.setType(0);
+      this._maxDelay = this.leftDelay.delayTime.maxValue;
+      // set initial feedback to 0.5
+      this.feedback(0.5);
+    };
+    p5.Delay.prototype = Object.create(Effect.prototype);
+    /**
+     *  Add delay to an audio signal according to a set
+     *  of delay parameters.
+     *
+     *  @method  process
+     *  @param  {Object} Signal  An object that outputs audio
+     *  @param  {Number} [delayTime] Time (in seconds) of the delay/echo.
+     *                               Some browsers limit delayTime to
+     *                               1 second.
+     *  @param  {Number} [feedback]  sends the delay back through itself
+     *                               in a loop that decreases in volume
+     *                               each time.
+     *  @param  {Number} [lowPass]   Cutoff frequency. Only frequencies
+     *                               below the lowPass will be part of the
+     *                               delay.
+     */
+    p5.Delay.prototype.process = function (src, _delayTime, _feedback, _filter) {
+      var feedback = _feedback || 0;
+      var delayTime = _delayTime || 0;
+      if (feedback >= 1) {
+        throw new Error('Feedback value will force a positive feedback loop.');
+      }
+      if (delayTime >= this._maxDelay) {
+        throw new Error('Delay Time exceeds maximum delay time of ' + this._maxDelay + ' second.');
+      }
+      src.connect(this.input);
+      this.leftDelay.delayTime.setValueAtTime(delayTime, this.ac.currentTime);
+      this.rightDelay.delayTime.setValueAtTime(delayTime, this.ac.currentTime);
+      this._leftGain.gain.value = feedback;
+      this._rightGain.gain.value = feedback;
+      if (_filter) {
+        this._leftFilter.freq(_filter);
+        this._rightFilter.freq(_filter);
+      }
+    };
+    /**
+     *  Set the delay (echo) time, in seconds. Usually this value will be
+     *  a floating point number between 0.0 and 1.0.
+     *
+     *  @method  delayTime
+     *  @param {Number} delayTime Time (in seconds) of the delay
+     */
+    p5.Delay.prototype.delayTime = function (t) {
+      // if t is an audio node...
+      if (typeof t !== 'number') {
+        t.connect(this.leftDelay.delayTime);
+        t.connect(this.rightDelay.delayTime);
+      } else {
+        this.leftDelay.delayTime.cancelScheduledValues(this.ac.currentTime);
+        this.rightDelay.delayTime.cancelScheduledValues(this.ac.currentTime);
+        this.leftDelay.delayTime.linearRampToValueAtTime(t, this.ac.currentTime);
+        this.rightDelay.delayTime.linearRampToValueAtTime(t, this.ac.currentTime);
+      }
+    };
+    /**
+     *  Feedback occurs when Delay sends its signal back through its input
+     *  in a loop. The feedback amount determines how much signal to send each
+     *  time through the loop. A feedback greater than 1.0 is not desirable because
+     *  it will increase the overall output each time through the loop,
+     *  creating an infinite feedback loop. The default value is 0.5
+     *
+     *  @method  feedback
+     *  @param {Number|Object} feedback 0.0 to 1.0, or an object such as an
+     *                                  Oscillator that can be used to
+     *                                  modulate this param
+     *  @returns {Number} Feedback value
+     *
+     */
+    p5.Delay.prototype.feedback = function (f) {
+      // if f is an audio node...
+      if (f && typeof f !== 'number') {
+        f.connect(this._leftGain.gain);
+        f.connect(this._rightGain.gain);
+      } else if (f >= 1) {
+        throw new Error('Feedback value will force a positive feedback loop.');
+      } else if (typeof f === 'number') {
+        this._leftGain.gain.value = f;
+        this._rightGain.gain.value = f;
+      }
+      // return value of feedback
+      return this._leftGain.gain.value;
+    };
+    /**
+     *  Set a lowpass filter frequency for the delay. A lowpass filter
+     *  will cut off any frequencies higher than the filter frequency.
+     *
+     *  @method  filter
+     *  @param {Number|Object} cutoffFreq  A lowpass filter will cut off any
+     *                              frequencies higher than the filter frequency.
+     *  @param {Number|Object} res  Resonance of the filter frequency
+     *                              cutoff, or an object (i.e. a p5.Oscillator)
+     *                              that can be used to modulate this parameter.
+     *                              High numbers (i.e. 15) will produce a resonance,
+     *                              low numbers (i.e. .2) will produce a slope.
+     */
+    p5.Delay.prototype.filter = function (freq, q) {
+      this._leftFilter.set(freq, q);
+      this._rightFilter.set(freq, q);
+    };
+    /**
+     *  Choose a preset type of delay. 'pingPong' bounces the signal
+     *  from the left to the right channel to produce a stereo effect.
+     *  Any other parameter will revert to the default delay setting.
+     *
+     *  @method  setType
+     *  @param {String|Number} type 'pingPong' (1) or 'default' (0)
+     */
+    p5.Delay.prototype.setType = function (t) {
+      if (t === 1) {
+        t = 'pingPong';
+      }
+      this._split.disconnect();
+      this._leftFilter.disconnect();
+      this._rightFilter.disconnect();
+      this._split.connect(this.leftDelay, 0);
+      this._split.connect(this.rightDelay, 1);
+      switch (t) {
+      case 'pingPong':
+        this._rightFilter.setType(this._leftFilter.biquad.type);
+        this._leftFilter.output.connect(this._merge, 0, 0);
+        this._rightFilter.output.connect(this._merge, 0, 1);
+        this._leftFilter.output.connect(this.rightDelay);
+        this._rightFilter.output.connect(this.leftDelay);
+        break;
+      default:
+        this._leftFilter.output.connect(this._merge, 0, 0);
+        this._rightFilter.output.connect(this._merge, 0, 1);
+        this._leftFilter.output.connect(this.leftDelay);
+        this._rightFilter.output.connect(this.rightDelay);
+      }
+    };
+    // DocBlocks for methods inherited from p5.Effect
+    /**
+     *  Set the output level of the delay effect.
+     *
+     *  @method  amp
+     *  @param  {Number} volume amplitude between 0 and 1.0
+     *  @param {Number} [rampTime] create a fade that lasts rampTime
+     *  @param {Number} [timeFromNow] schedule this event to happen
+     *                                seconds from now
+     */
+    /**
+     *  Send output to a p5.sound or web audio object
+     *
+     *  @method  connect
+     *  @param  {Object} unit
+     */
+    /**
+     *  Disconnect all output.
+     *
+     *  @method disconnect
+     */
+    p5.Delay.prototype.dispose = function () {
+      Effect.prototype.dispose.apply(this);
+      this._split.disconnect();
+      this._leftFilter.dispose();
+      this._rightFilter.dispose();
+      this._merge.disconnect();
+      this._leftGain.disconnect();
+      this._rightGain.disconnect();
+      this.leftDelay.disconnect();
+      this.rightDelay.disconnect();
+      this._split = undefined;
+      this._leftFilter = undefined;
+      this._rightFilter = undefined;
+      this._merge = undefined;
+      this._leftGain = undefined;
+      this._rightGain = undefined;
+      this.leftDelay = undefined;
+      this.rightDelay = undefined;
+    };
+  }(filter, effect);
+  var reverb;
+  'use strict';
+  reverb = function () {
+    var CustomError = errorHandler;
+    var Effect = effect;
+    /**
+     *  Reverb adds depth to a sound through a large number of decaying
+     *  echoes. It creates the perception that sound is occurring in a
+     *  physical space. The p5.Reverb has paramters for Time (how long does the
+     *  reverb last) and decayRate (how much the sound decays with each echo)
+     *  that can be set with the .set() or .process() methods. The p5.Convolver
+     *  extends p5.Reverb allowing you to recreate the sound of actual physical
+     *  spaces through convolution.
+     *
+     *  This class extends p5.Effect.
+     *  Methods amp(), chain(),
+     *  drywet(), connect(), and
+     *  disconnect() are available.
+     *
+     *  @class p5.Reverb
+     *  @extends p5.Effect
+     *  @constructor
+     *  @example
+     *  

+     *  var soundFile, reverb;
+     *  function preload() {
+     *    soundFile = loadSound('assets/Damscray_DancingTiger.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    reverb = new p5.Reverb();
+     *    soundFile.disconnect(); // so we'll only hear reverb...
+     *
+     *    // connect soundFile to reverb, process w/
+     *    // 3 second reverbTime, decayRate of 2%
+     *    reverb.process(soundFile, 3, 2);
+     *    soundFile.play();
+     *  }
+     *  

+     */
+    p5.Reverb = function () {
+      Effect.call(this);
+      this.convolverNode = this.ac.createConvolver();
+      // otherwise, Safari distorts
+      this.input.gain.value = 0.5;
+      this.input.connect(this.convolverNode);
+      this.convolverNode.connect(this.wet);
+      // default params
+      this._seconds = 3;
+      this._decay = 2;
+      this._reverse = false;
+      this._buildImpulse();
+    };
+    p5.Reverb.prototype = Object.create(Effect.prototype);
+    /**
+     *  Connect a source to the reverb, and assign reverb parameters.
+     *
+     *  @method  process
+     *  @param  {Object} src     p5.sound / Web Audio object with a sound
+     *                           output.
+     *  @param  {Number} [seconds] Duration of the reverb, in seconds.
+     *                           Min: 0, Max: 10. Defaults to 3.
+     *  @param  {Number} [decayRate] Percentage of decay with each echo.
+     *                            Min: 0, Max: 100. Defaults to 2.
+     *  @param  {Boolean} [reverse] Play the reverb backwards or forwards.
+     */
+    p5.Reverb.prototype.process = function (src, seconds, decayRate, reverse) {
+      src.connect(this.input);
+      var rebuild = false;
+      if (seconds) {
+        this._seconds = seconds;
+        rebuild = true;
+      }
+      if (decayRate) {
+        this._decay = decayRate;
+      }
+      if (reverse) {
+        this._reverse = reverse;
+      }
+      if (rebuild) {
+        this._buildImpulse();
+      }
+    };
+    /**
+     *  Set the reverb settings. Similar to .process(), but without
+     *  assigning a new input.
+     *
+     *  @method  set
+     *  @param  {Number} [seconds] Duration of the reverb, in seconds.
+     *                           Min: 0, Max: 10. Defaults to 3.
+     *  @param  {Number} [decayRate] Percentage of decay with each echo.
+     *                            Min: 0, Max: 100. Defaults to 2.
+     *  @param  {Boolean} [reverse] Play the reverb backwards or forwards.
+     */
+    p5.Reverb.prototype.set = function (seconds, decayRate, reverse) {
+      var rebuild = false;
+      if (seconds) {
+        this._seconds = seconds;
+        rebuild = true;
+      }
+      if (decayRate) {
+        this._decay = decayRate;
+      }
+      if (reverse) {
+        this._reverse = reverse;
+      }
+      if (rebuild) {
+        this._buildImpulse();
+      }
+    };
+    // DocBlocks for methods inherited from p5.Effect
+    /**
+     *  Set the output level of the reverb effect.
+     *
+     *  @method  amp
+     *  @param  {Number} volume amplitude between 0 and 1.0
+     *  @param  {Number} [rampTime] create a fade that lasts rampTime
+     *  @param  {Number} [timeFromNow] schedule this event to happen
+     *                                seconds from now
+     */
+    /**
+     *  Send output to a p5.sound or web audio object
+     *
+     *  @method  connect
+     *  @param  {Object} unit
+     */
+    /**
+     *  Disconnect all output.
+     *
+     *  @method disconnect
+     */
+    /**
+     *  Inspired by Simple Reverb by Jordan Santell
+     *  https://github.com/web-audio-components/simple-reverb/blob/master/index.js
+     *
+     *  Utility function for building an impulse response
+     *  based on the module parameters.
+     *
+     *  @private
+     */
+    p5.Reverb.prototype._buildImpulse = function () {
+      var rate = this.ac.sampleRate;
+      var length = rate * this._seconds;
+      var decay = this._decay;
+      var impulse = this.ac.createBuffer(2, length, rate);
+      var impulseL = impulse.getChannelData(0);
+      var impulseR = impulse.getChannelData(1);
+      var n, i;
+      for (i = 0; i < length; i++) {
+        n = this._reverse ? length - i : i;
+        impulseL[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
+        impulseR[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
+      }
+      this.convolverNode.buffer = impulse;
+    };
+    p5.Reverb.prototype.dispose = function () {
+      Effect.prototype.dispose.apply(this);
+      if (this.convolverNode) {
+        this.convolverNode.buffer = null;
+        this.convolverNode = null;
+      }
+    };
+    // =======================================================================
+    //                          *** p5.Convolver ***
+    // =======================================================================
+    /**
+     *  
p5.Convolver extends p5.Reverb. It can emulate the sound of real
+     *  physical spaces through a process called 
+     *  convolution.

+     *
+     *  
Convolution multiplies any audio input by an "impulse response"
+     *  to simulate the dispersion of sound over time. The impulse response is
+     *  generated from an audio file that you provide. One way to
+     *  generate an impulse response is to pop a balloon in a reverberant space
+     *  and record the echo. Convolution can also be used to experiment with
+     *  sound.

+     *
+     *  
Use the method createConvolution(path) to instantiate a
+     *  p5.Convolver with a path to your impulse response audio file.

+     *
+     *  @class p5.Convolver
+     *  @extends p5.Effect
+     *  @constructor
+     *  @param  {String}   path     path to a sound file
+     *  @param  {Function} [callback] function to call when loading succeeds
+     *  @param  {Function} [errorCallback] function to call if loading fails.
+     *                                     This function will receive an error or
+     *                                     XMLHttpRequest object with information
+     *                                     about what went wrong.
+     *  @example
+     *  

+     *  var cVerb, sound;
+     *  function preload() {
+     *    // We have both MP3 and OGG versions of all sound assets
+     *    soundFormats('ogg', 'mp3');
+     *
+     *    // Try replacing 'bx-spring' with other soundfiles like
+     *    // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
+     *    cVerb = createConvolver('assets/bx-spring.mp3');
+     *
+     *    // Try replacing 'Damscray_DancingTiger' with
+     *    // 'beat', 'doorbell', lucky_dragons'
+     *    sound = loadSound('assets/Damscray_DancingTiger.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    // disconnect from master output...
+     *    sound.disconnect();
+     *
+     *    // ...and process with cVerb
+     *    // so that we only hear the convolution
+     *    cVerb.process(sound);
+     *
+     *    sound.play();
+     *  }
+     *  

+     */
+    p5.Convolver = function (path, callback, errorCallback) {
+      Effect.call(this);
+      /**
+       *  Internally, the p5.Convolver uses the a
+       *  
+       *  Web Audio Convolver Node.
+       *
+       *  @property {ConvolverNode} convolverNod
+       */
+      this.convolverNode = this.ac.createConvolver();
+      // otherwise, Safari distorts
+      this.input.gain.value = 0.5;
+      this.input.connect(this.convolverNode);
+      this.convolverNode.connect(this.wet);
+      if (path) {
+        this.impulses = [];
+        this._loadBuffer(path, callback, errorCallback);
+      } else {
+        // parameters
+        this._seconds = 3;
+        this._decay = 2;
+        this._reverse = false;
+        this._buildImpulse();
+      }
+    };
+    p5.Convolver.prototype = Object.create(p5.Reverb.prototype);
+    p5.prototype.registerPreloadMethod('createConvolver', p5.prototype);
+    /**
+     *  Create a p5.Convolver. Accepts a path to a soundfile
+     *  that will be used to generate an impulse response.
+     *
+     *  @method  createConvolver
+     *  @param  {String}   path     path to a sound file
+     *  @param  {Function} [callback] function to call if loading is successful.
+     *                                The object will be passed in as the argument
+     *                                to the callback function.
+     *  @param  {Function} [errorCallback] function to call if loading is not successful.
+     *                                A custom error will be passed in as the argument
+     *                                to the callback function.
+     *  @return {p5.Convolver}
+     *  @example
+     *  

+     *  var cVerb, sound;
+     *  function preload() {
+     *    // We have both MP3 and OGG versions of all sound assets
+     *    soundFormats('ogg', 'mp3');
+     *
+     *    // Try replacing 'bx-spring' with other soundfiles like
+     *    // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
+     *    cVerb = createConvolver('assets/bx-spring.mp3');
+     *
+     *    // Try replacing 'Damscray_DancingTiger' with
+     *    // 'beat', 'doorbell', lucky_dragons'
+     *    sound = loadSound('assets/Damscray_DancingTiger.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    // disconnect from master output...
+     *    sound.disconnect();
+     *
+     *    // ...and process with cVerb
+     *    // so that we only hear the convolution
+     *    cVerb.process(sound);
+     *
+     *    sound.play();
+     *  }
+     *  

+     */
+    p5.prototype.createConvolver = function (path, callback, errorCallback) {
+      // if loading locally without a server
+      if (window.location.origin.indexOf('file://') > -1 && window.cordova === 'undefined') {
+        alert('This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS');
+      }
+      var cReverb = new p5.Convolver(path, callback, errorCallback);
+      cReverb.impulses = [];
+      return cReverb;
+    };
+    /**
+     *  Private method to load a buffer as an Impulse Response,
+     *  assign it to the convolverNode, and add to the Array of .impulses.
+     *
+     *  @param   {String}   path
+     *  @param   {Function} callback
+     *  @param   {Function} errorCallback
+     *  @private
+     */
+    p5.Convolver.prototype._loadBuffer = function (path, callback, errorCallback) {
+      var path = p5.prototype._checkFileFormats(path);
+      var self = this;
+      var errorTrace = new Error().stack;
+      var ac = p5.prototype.getAudioContext();
+      var request = new XMLHttpRequest();
+      request.open('GET', path, true);
+      request.responseType = 'arraybuffer';
+      request.onload = function () {
+        if (request.status === 200) {
+          // on success loading file:
+          ac.decodeAudioData(request.response, function (buff) {
+            var buffer = {};
+            var chunks = path.split('/');
+            buffer.name = chunks[chunks.length - 1];
+            buffer.audioBuffer = buff;
+            self.impulses.push(buffer);
+            self.convolverNode.buffer = buffer.audioBuffer;
+            if (callback) {
+              callback(buffer);
+            }
+          }, // error decoding buffer. "e" is undefined in Chrome 11/22/2015
+          function () {
+            var err = new CustomError('decodeAudioData', errorTrace, self.url);
+            var msg = 'AudioContext error at decodeAudioData for ' + self.url;
+            if (errorCallback) {
+              err.msg = msg;
+              errorCallback(err);
+            } else {
+              console.error(msg + '\n The error stack trace includes: \n' + err.stack);
+            }
+          });
+        } else {
+          var err = new CustomError('loadConvolver', errorTrace, self.url);
+          var msg = 'Unable to load ' + self.url + '. The request status was: ' + request.status + ' (' + request.statusText + ')';
+          if (errorCallback) {
+            err.message = msg;
+            errorCallback(err);
+          } else {
+            console.error(msg + '\n The error stack trace includes: \n' + err.stack);
+          }
+        }
+      };
+      // if there is another error, aside from 404...
+      request.onerror = function () {
+        var err = new CustomError('loadConvolver', errorTrace, self.url);
+        var msg = 'There was no response from the server at ' + self.url + '. Check the url and internet connectivity.';
+        if (errorCallback) {
+          err.message = msg;
+          errorCallback(err);
+        } else {
+          console.error(msg + '\n The error stack trace includes: \n' + err.stack);
+        }
+      };
+      request.send();
+    };
+    p5.Convolver.prototype.set = null;
+    /**
+     *  Connect a source to the reverb, and assign reverb parameters.
+     *
+     *  @method  process
+     *  @param  {Object} src     p5.sound / Web Audio object with a sound
+     *                           output.
+     *  @example
+     *  

+     *  var cVerb, sound;
+     *  function preload() {
+     *    soundFormats('ogg', 'mp3');
+     *
+     *    cVerb = createConvolver('assets/concrete-tunnel.mp3');
+     *
+     *    sound = loadSound('assets/beat.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    // disconnect from master output...
+     *    sound.disconnect();
+     *
+     *    // ...and process with (i.e. connect to) cVerb
+     *    // so that we only hear the convolution
+     *    cVerb.process(sound);
+     *
+     *    sound.play();
+     *  }
+     *  

+     */
+    p5.Convolver.prototype.process = function (src) {
+      src.connect(this.input);
+    };
+    /**
+     *  If you load multiple impulse files using the .addImpulse method,
+     *  they will be stored as Objects in this Array. Toggle between them
+     *  with the toggleImpulse(id) method.
+     *
+     *  @property {Array} impulses
+     */
+    p5.Convolver.prototype.impulses = [];
+    /**
+     *  Load and assign a new Impulse Response to the p5.Convolver.
+     *  The impulse is added to the .impulses array. Previous
+     *  impulses can be accessed with the .toggleImpulse(id)
+     *  method.
+     *
+     *  @method  addImpulse
+     *  @param  {String}   path     path to a sound file
+     *  @param  {Function} callback function (optional)
+     *  @param  {Function} errorCallback function (optional)
+     */
+    p5.Convolver.prototype.addImpulse = function (path, callback, errorCallback) {
+      // if loading locally without a server
+      if (window.location.origin.indexOf('file://') > -1 && window.cordova === 'undefined') {
+        alert('This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS');
+      }
+      this._loadBuffer(path, callback, errorCallback);
+    };
+    /**
+     *  Similar to .addImpulse, except that the .impulses
+     *  Array is reset to save memory. A new .impulses
+     *  array is created with this impulse as the only item.
+     *
+     *  @method  resetImpulse
+     *  @param  {String}   path     path to a sound file
+     *  @param  {Function} callback function (optional)
+     *  @param  {Function} errorCallback function (optional)
+     */
+    p5.Convolver.prototype.resetImpulse = function (path, callback, errorCallback) {
+      // if loading locally without a server
+      if (window.location.origin.indexOf('file://') > -1 && window.cordova === 'undefined') {
+        alert('This sketch may require a server to load external files. Please see http://bit.ly/1qcInwS');
+      }
+      this.impulses = [];
+      this._loadBuffer(path, callback, errorCallback);
+    };
+    /**
+     *  If you have used .addImpulse() to add multiple impulses
+     *  to a p5.Convolver, then you can use this method to toggle between
+     *  the items in the .impulses Array. Accepts a parameter
+     *  to identify which impulse you wish to use, identified either by its
+     *  original filename (String) or by its position in the .impulses
+     *   Array (Number).

+     *  You can access the objects in the .impulses Array directly. Each
+     *  Object has two attributes: an .audioBuffer (type:
+     *  Web Audio 
+     *  AudioBuffer) and a .name, a String that corresponds
+     *  with the original filename.
+     *
+     *  @method toggleImpulse
+     *  @param {String|Number} id Identify the impulse by its original filename
+     *                            (String), or by its position in the
+     *                            .impulses Array (Number).
+     */
+    p5.Convolver.prototype.toggleImpulse = function (id) {
+      if (typeof id === 'number' && id < this.impulses.length) {
+        this.convolverNode.buffer = this.impulses[id].audioBuffer;
+      }
+      if (typeof id === 'string') {
+        for (var i = 0; i < this.impulses.length; i++) {
+          if (this.impulses[i].name === id) {
+            this.convolverNode.buffer = this.impulses[i].audioBuffer;
+            break;
+          }
+        }
+      }
+    };
+    p5.Convolver.prototype.dispose = function () {
+      Effect.prototype.dispose.apply(this);
+      // remove all the Impulse Response buffers
+      for (var i in this.impulses) {
+        if (this.impulses[i]) {
+          this.impulses[i] = null;
+        }
+      }
+      this.convolverNode.disconnect();
+      this.concolverNode = null;
+    };
+  }(errorHandler, effect, sndcore);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_core_TimelineState;
+  Tone_core_TimelineState = function (Tone) {
+    'use strict';
+    Tone.TimelineState = function (initial) {
+      Tone.Timeline.call(this);
+      this._initial = initial;
+    };
+    Tone.extend(Tone.TimelineState, Tone.Timeline);
+    Tone.TimelineState.prototype.getValueAtTime = function (time) {
+      var event = this.get(time);
+      if (event !== null) {
+        return event.state;
+      } else {
+        return this._initial;
+      }
+    };
+    Tone.TimelineState.prototype.setStateAtTime = function (state, time) {
+      this.add({
+        'state': state,
+        'time': time
+      });
+    };
+    return Tone.TimelineState;
+  }(Tone_core_Tone, Tone_core_Timeline);
+  /** Tone.js module by Yotam Mann, MIT License 2016  http://opensource.org/licenses/MIT **/
+  var Tone_core_Clock;
+  Tone_core_Clock = function (Tone) {
+    'use strict';
+    Tone.Clock = function () {
+      Tone.Emitter.call(this);
+      var options = this.optionsObject(arguments, [
+        'callback',
+        'frequency'
+      ], Tone.Clock.defaults);
+      this.callback = options.callback;
+      this._nextTick = 0;
+      this._lastState = Tone.State.Stopped;
+      this.frequency = new Tone.TimelineSignal(options.frequency, Tone.Type.Frequency);
+      this._readOnly('frequency');
+      this.ticks = 0;
+      this._state = new Tone.TimelineState(Tone.State.Stopped);
+      this._boundLoop = this._loop.bind(this);
+      this.context.on('tick', this._boundLoop);
+    };
+    Tone.extend(Tone.Clock, Tone.Emitter);
+    Tone.Clock.defaults = {
+      'callback': Tone.noOp,
+      'frequency': 1,
+      'lookAhead': 'auto'
+    };
+    Object.defineProperty(Tone.Clock.prototype, 'state', {
+      get: function () {
+        return this._state.getValueAtTime(this.now());
+      }
+    });
+    Tone.Clock.prototype.start = function (time, offset) {
+      time = this.toSeconds(time);
+      if (this._state.getValueAtTime(time) !== Tone.State.Started) {
+        this._state.add({
+          'state': Tone.State.Started,
+          'time': time,
+          'offset': offset
+        });
+      }
+      return this;
+    };
+    Tone.Clock.prototype.stop = function (time) {
+      time = this.toSeconds(time);
+      this._state.cancel(time);
+      this._state.setStateAtTime(Tone.State.Stopped, time);
+      return this;
+    };
+    Tone.Clock.prototype.pause = function (time) {
+      time = this.toSeconds(time);
+      if (this._state.getValueAtTime(time) === Tone.State.Started) {
+        this._state.setStateAtTime(Tone.State.Paused, time);
+      }
+      return this;
+    };
+    Tone.Clock.prototype._loop = function () {
+      var now = this.now();
+      var lookAhead = this.context.lookAhead;
+      var updateInterval = this.context.updateInterval;
+      var lagCompensation = this.context.lag * 2;
+      var loopInterval = now + lookAhead + updateInterval + lagCompensation;
+      while (loopInterval > this._nextTick && this._state) {
+        var currentState = this._state.getValueAtTime(this._nextTick);
+        if (currentState !== this._lastState) {
+          this._lastState = currentState;
+          var event = this._state.get(this._nextTick);
+          if (currentState === Tone.State.Started) {
+            this._nextTick = event.time;
+            if (!this.isUndef(event.offset)) {
+              this.ticks = event.offset;
+            }
+            this.emit('start', event.time, this.ticks);
+          } else if (currentState === Tone.State.Stopped) {
+            this.ticks = 0;
+            this.emit('stop', event.time);
+          } else if (currentState === Tone.State.Paused) {
+            this.emit('pause', event.time);
+          }
+        }
+        var tickTime = this._nextTick;
+        if (this.frequency) {
+          this._nextTick += 1 / this.frequency.getValueAtTime(this._nextTick);
+          if (currentState === Tone.State.Started) {
+            this.callback(tickTime);
+            this.ticks++;
+          }
+        }
+      }
+    };
+    Tone.Clock.prototype.getStateAtTime = function (time) {
+      time = this.toSeconds(time);
+      return this._state.getValueAtTime(time);
+    };
+    Tone.Clock.prototype.dispose = function () {
+      Tone.Emitter.prototype.dispose.call(this);
+      this.context.off('tick', this._boundLoop);
+      this._writable('frequency');
+      this.frequency.dispose();
+      this.frequency = null;
+      this._boundLoop = null;
+      this._nextTick = Infinity;
+      this.callback = null;
+      this._state.dispose();
+      this._state = null;
+    };
+    return Tone.Clock;
+  }(Tone_core_Tone, Tone_signal_TimelineSignal, Tone_core_TimelineState, Tone_core_Emitter);
+  var metro;
+  'use strict';
+  metro = function () {
+    var p5sound = master;
+    // requires the Tone.js library's Clock (MIT license, Yotam Mann)
+    // https://github.com/TONEnoTONE/Tone.js/
+    var Clock = Tone_core_Clock;
+    p5.Metro = function () {
+      this.clock = new Clock({ 'callback': this.ontick.bind(this) });
+      this.syncedParts = [];
+      this.bpm = 120;
+      // gets overridden by p5.Part
+      this._init();
+      this.prevTick = 0;
+      this.tatumTime = 0;
+      this.tickCallback = function () {
+      };
+    };
+    p5.Metro.prototype.ontick = function (tickTime) {
+      var elapsedTime = tickTime - this.prevTick;
+      var secondsFromNow = tickTime - p5sound.audiocontext.currentTime;
+      if (elapsedTime - this.tatumTime <= -0.02) {
+        return;
+      } else {
+        // console.log('ok', this.syncedParts[0].phrases[0].name);
+        this.prevTick = tickTime;
+        // for all of the active things on the metro:
+        var self = this;
+        this.syncedParts.forEach(function (thisPart) {
+          if (!thisPart.isPlaying)
+            return;
+          thisPart.incrementStep(secondsFromNow);
+          // each synced source keeps track of its own beat number
+          thisPart.phrases.forEach(function (thisPhrase) {
+            var phraseArray = thisPhrase.sequence;
+            var bNum = self.metroTicks % phraseArray.length;
+            if (phraseArray[bNum] !== 0 && (self.metroTicks < phraseArray.length || !thisPhrase.looping)) {
+              thisPhrase.callback(secondsFromNow, phraseArray[bNum]);
+            }
+          });
+        });
+        this.metroTicks += 1;
+        this.tickCallback(secondsFromNow);
+      }
+    };
+    p5.Metro.prototype.setBPM = function (bpm, rampTime) {
+      var beatTime = 60 / (bpm * this.tatums);
+      var now = p5sound.audiocontext.currentTime;
+      this.tatumTime = beatTime;
+      var rampTime = rampTime || 0;
+      this.clock.frequency.setValueAtTime(this.clock.frequency.value, now);
+      this.clock.frequency.linearRampToValueAtTime(bpm, now + rampTime);
+      this.bpm = bpm;
+    };
+    p5.Metro.prototype.getBPM = function () {
+      return this.clock.getRate() / this.tatums * 60;
+    };
+    p5.Metro.prototype._init = function () {
+      this.metroTicks = 0;
+    };
+    // clear existing synced parts, add only this one
+    p5.Metro.prototype.resetSync = function (part) {
+      this.syncedParts = [part];
+    };
+    // push a new synced part to the array
+    p5.Metro.prototype.pushSync = function (part) {
+      this.syncedParts.push(part);
+    };
+    p5.Metro.prototype.start = function (timeFromNow) {
+      var t = timeFromNow || 0;
+      var now = p5sound.audiocontext.currentTime;
+      this.clock.start(now + t);
+      this.setBPM(this.bpm);
+    };
+    p5.Metro.prototype.stop = function (timeFromNow) {
+      var t = timeFromNow || 0;
+      var now = p5sound.audiocontext.currentTime;
+      this.clock.stop(now + t);
+    };
+    p5.Metro.prototype.beatLength = function (tatums) {
+      this.tatums = 1 / tatums / 4;
+    };
+  }(master, Tone_core_Clock);
+  var looper;
+  'use strict';
+  looper = function () {
+    var p5sound = master;
+    var BPM = 120;
+    /**
+     *  Set the global tempo, in beats per minute, for all
+     *  p5.Parts. This method will impact all active p5.Parts.
+     *
+     *  @method setBPM
+     *  @param {Number} BPM      Beats Per Minute
+     *  @param {Number} rampTime Seconds from now
+     */
+    p5.prototype.setBPM = function (bpm, rampTime) {
+      BPM = bpm;
+      for (var i in p5sound.parts) {
+        if (p5sound.parts[i]) {
+          p5sound.parts[i].setBPM(bpm, rampTime);
+        }
+      }
+    };
+    /**
+     *  
A phrase is a pattern of musical events over time, i.e.
+     *  a series of notes and rests.

+     *
+     *  
Phrases must be added to a p5.Part for playback, and
+     *  each part can play multiple phrases at the same time.
+     *  For example, one Phrase might be a kick drum, another
+     *  could be a snare, and another could be the bassline.

+     *
+     *  
The first parameter is a name so that the phrase can be
+     *  modified or deleted later. The callback is a a function that
+     *  this phrase will call at every step—for example it might be
+     *  called playNote(value){}. The array determines
+     *  which value is passed into the callback at each step of the
+     *  phrase. It can be numbers, an object with multiple numbers,
+     *  or a zero (0) indicates a rest so the callback won't be called).

+     *
+     *  @class p5.Phrase
+     *  @constructor
+     *  @param {String}   name     Name so that you can access the Phrase.
+     *  @param {Function} callback The name of a function that this phrase
+     *                             will call. Typically it will play a sound,
+     *                             and accept two parameters: a time at which
+     *                             to play the sound (in seconds from now),
+     *                             and a value from the sequence array. The
+     *                             time should be passed into the play() or
+     *                             start() method to ensure precision.
+     *  @param {Array}   sequence    Array of values to pass into the callback
+     *                            at each step of the phrase.
+     *  @example
+     *  

+     *  var mySound, myPhrase, myPart;
+     *  var pattern = [1,0,0,2,0,2,0,0];
+     *  var msg = 'click to play';
+     *
+     *  function preload() {
+     *    mySound = loadSound('assets/beatbox.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    noStroke();
+     *    fill(255);
+     *    textAlign(CENTER);
+     *    masterVolume(0.1);
+     *
+     *    myPhrase = new p5.Phrase('bbox', makeSound, pattern);
+     *    myPart = new p5.Part();
+     *    myPart.addPhrase(myPhrase);
+     *    myPart.setBPM(60);
+     *  }
+     *
+     *  function draw() {
+     *    background(0);
+     *    text(msg, width/2, height/2);
+     *  }
+     *
+     *  function makeSound(time, playbackRate) {
+     *    mySound.rate(playbackRate);
+     *    mySound.play(time);
+     *  }
+     *
+     *  function mouseClicked() {
+     *    if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+     *      myPart.start();
+     *      msg = 'playing pattern';
+     *    }
+     *  }
+     *
+     *  

+     */
+    p5.Phrase = function (name, callback, sequence) {
+      this.phraseStep = 0;
+      this.name = name;
+      this.callback = callback;
+      /**
+       * Array of values to pass into the callback
+       * at each step of the phrase. Depending on the callback
+       * function's requirements, these values may be numbers,
+       * strings, or an object with multiple parameters.
+       * Zero (0) indicates a rest.
+       *
+       * @property {Array} sequence
+       */
+      this.sequence = sequence;
+    };
+    /**
+     *  
A p5.Part plays back one or more p5.Phrases. Instantiate a part
+     *  with steps and tatums. By default, each step represents 1/16th note.

+     *
+     *  
See p5.Phrase for more about musical timing.

+     *
+     *  @class p5.Part
+     *  @constructor
+     *  @param {Number} [steps]   Steps in the part
+     *  @param {Number} [tatums] Divisions of a beat (default is 1/16, a quarter note)
+     *  @example
+     *  

+     *  var box, drum, myPart;
+     *  var boxPat = [1,0,0,2,0,2,0,0];
+     *  var drumPat = [0,1,1,0,2,0,1,0];
+     *  var msg = 'click to play';
+     *
+     *  function preload() {
+     *    box = loadSound('assets/beatbox.mp3');
+     *    drum = loadSound('assets/drum.mp3');
+     *  }
+     *
+     *  function setup() {
+     *    noStroke();
+     *    fill(255);
+     *    textAlign(CENTER);
+     *    masterVolume(0.1);
+     *
+     *    var boxPhrase = new p5.Phrase('box', playBox, boxPat);
+     *    var drumPhrase = new p5.Phrase('drum', playDrum, drumPat);
+     *    myPart = new p5.Part();
+     *    myPart.addPhrase(boxPhrase);
+     *    myPart.addPhrase(drumPhrase);
+     *    myPart.setBPM(60);
+     *    masterVolume(0.1);
+     *  }
+     *
+     *  function draw() {
+     *    background(0);
+     *    text(msg, width/2, height/2);
+     *  }
+     *
+     *  function playBox(time, playbackRate) {
+     *    box.rate(playbackRate);
+     *    box.play(time);
+     *  }
+     *
+     *  function playDrum(time, playbackRate) {
+     *    drum.rate(playbackRate);
+     *    drum.play(time);
+     *  }
+     *
+     *  function mouseClicked() {
+     *    if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+     *      myPart.start();
+     *      msg = 'playing part';
+     *    }
+     *  }
+     *  

+     */
+    p5.Part = function (steps, bLength) {
+      this.length = steps || 0;
+      // how many beats
+      this.partStep = 0;
+      this.phrases = [];
+      this.isPlaying = false;
+      this.noLoop();
+      this.tatums = bLength || 0.0625;
+      // defaults to quarter note
+      this.metro = new p5.Metro();
+      this.metro._init();
+      this.metro.beatLength(this.tatums);
+      this.metro.setBPM(BPM);
+      p5sound.parts.push(this);
+      this.callback = function () {
+      };
+    };
+    /**
+     *  Set the tempo of this part, in Beats Per Minute.
+     *
+     *  @method  setBPM
+     *  @param {Number} BPM      Beats Per Minute
+     *  @param {Number} [rampTime] Seconds from now
+     */
+    p5.Part.prototype.setBPM = function (tempo, rampTime) {
+      this.metro.setBPM(tempo, rampTime);
+    };
+    /**
+     *  Returns the Beats Per Minute of this currently part.
+     *
+     *  @method getBPM
+     *  @return {Number}
+     */
+    p5.Part.prototype.getBPM = function () {
+      return this.metro.getBPM();
+    };
+    /**
+     *  Start playback of this part. It will play
+     *  through all of its phrases at a speed
+     *  determined by setBPM.
+     *
+     *  @method  start
+     *  @param  {Number} [time] seconds from now
+     */
+    p5.Part.prototype.start = function (time) {
+      if (!this.isPlaying) {
+        this.isPlaying = true;
+        this.metro.resetSync(this);
+        var t = time || 0;
+        this.metro.start(t);
+      }
+    };
+    /**
+     *  Loop playback of this part. It will begin
+     *  looping through all of its phrases at a speed
+     *  determined by setBPM.
+     *
+     *  @method  loop
+     *  @param  {Number} [time] seconds from now
+     */
+    p5.Part.prototype.loop = function (time) {
+      this.looping = true;
+      // rest onended function
+      this.onended = function () {
+        this.partStep = 0;
+      };
+      var t = time || 0;
+      this.start(t);
+    };
+    /**
+     *  Tell the part to stop looping.
+     *
+     *  @method  noLoop
+     */
+    p5.Part.prototype.noLoop = function () {
+      this.looping = false;
+      // rest onended function
+      this.onended = function () {
+        this.stop();
+      };
+    };
+    /**
+     *  Stop the part and cue it to step 0.
+     *
+     *  @method  stop
+     *  @param  {Number} [time] seconds from now
+     */
+    p5.Part.prototype.stop = function (time) {
+      this.partStep = 0;
+      this.pause(time);
+    };
+    /**
+     *  Pause the part. Playback will resume
+     *  from the current step.
+     *
+     *  @method  pause
+     *  @param  {Number} time seconds from now
+     */
+    p5.Part.prototype.pause = function (time) {
+      this.isPlaying = false;
+      var t = time || 0;
+      this.metro.stop(t);
+    };
+    /**
+     *  Add a p5.Phrase to this Part.
+     *
+     *  @method  addPhrase
+     *  @param {p5.Phrase}   phrase   reference to a p5.Phrase
+     */
+    p5.Part.prototype.addPhrase = function (name, callback, array) {
+      var p;
+      if (arguments.length === 3) {
+        p = new p5.Phrase(name, callback, array);
+      } else if (arguments[0] instanceof p5.Phrase) {
+        p = arguments[0];
+      } else {
+        throw 'invalid input. addPhrase accepts name, callback, array or a p5.Phrase';
+      }
+      this.phrases.push(p);
+      // reset the length if phrase is longer than part's existing length
+      if (p.sequence.length > this.length) {
+        this.length = p.sequence.length;
+      }
+    };
+    /**
+     *  Remove a phrase from this part, based on the name it was
+     *  given when it was created.
+     *
+     *  @method  removePhrase
+     *  @param  {String} phraseName
+     */
+    p5.Part.prototype.removePhrase = function (name) {
+      for (var i in this.phrases) {
+        if (this.phrases[i].name === name) {
+          this.phrases.splice(i, 1);
+        }
+      }
+    };
+    /**
+     *  Get a phrase from this part, based on the name it was
+     *  given when it was created. Now you can modify its array.
+     *
+     *  @method  getPhrase
+     *  @param  {String} phraseName
+     */
+    p5.Part.prototype.getPhrase = function (name) {
+      for (var i in this.phrases) {
+        if (this.phrases[i].name === name) {
+          return this.phrases[i];
+        }
+      }
+    };
+    /**
+     *  Get a phrase from this part, based on the name it was
+     *  given when it was created. Now you can modify its array.
+     *
+     *  @method  replaceSequence
+     *  @param  {String} phraseName
+     *  @param  {Array} sequence  Array of values to pass into the callback
+     *                            at each step of the phrase.
+     */
+    p5.Part.prototype.replaceSequence = function (name, array) {
+      for (var i in this.phrases) {
+        if (this.phrases[i].name === name) {
+          this.phrases[i].sequence = array;
+        }
+      }
+    };
+    p5.Part.prototype.incrementStep = function (time) {
+      if (this.partStep < this.length - 1) {
+        this.callback(time);
+        this.partStep += 1;
+      } else {
+        if (!this.looping && this.partStep === this.length - 1) {
+          console.log('done');
+          // this.callback(time);
+          this.onended();
+        }
+      }
+    };
+    /**
+     *  Fire a callback function at every step.
+     *
+     *  @method onStep
+     *  @param  {Function} callback The name of the callback
+     *                              you want to fire
+     *                              on every beat/tatum.
+     */
+    p5.Part.prototype.onStep = function (callback) {
+      this.callback = callback;
+    };
+    // ===============
+    // p5.Score
+    // ===============
+    /**
+     *  A Score consists of a series of Parts. The parts will
+     *  be played back in order. For example, you could have an
+     *  A part, a B part, and a C part, and play them back in this order
+     *  new p5.Score(a, a, b, a, c)
+     *
+     *  @class p5.Score
+     *  @constructor
+     *  @param {p5.Part} [...parts] One or multiple parts, to be played in sequence.
+     */
+    p5.Score = function () {
+      // for all of the arguments
+      this.parts = [];
+      this.currentPart = 0;
+      var thisScore = this;
+      for (var i in arguments) {
+        if (arguments[i] && this.parts[i]) {
+          this.parts[i] = arguments[i];
+          this.parts[i].nextPart = this.parts[i + 1];
+          this.parts[i].onended = function () {
+            thisScore.resetPart(i);
+            playNextPart(thisScore);
+          };
+        }
+      }
+      this.looping = false;
+    };
+    p5.Score.prototype.onended = function () {
+      if (this.looping) {
+        // this.resetParts();
+        this.parts[0].start();
+      } else {
+        this.parts[this.parts.length - 1].onended = function () {
+          this.stop();
+          this.resetParts();
+        };
+      }
+      this.currentPart = 0;
+    };
+    /**
+     *  Start playback of the score.
+     *
+     *  @method  start
+     */
+    p5.Score.prototype.start = function () {
+      this.parts[this.currentPart].start();
+      this.scoreStep = 0;
+    };
+    /**
+     *  Stop playback of the score.
+     *
+     *  @method  stop
+     */
+    p5.Score.prototype.stop = function () {
+      this.parts[this.currentPart].stop();
+      this.currentPart = 0;
+      this.scoreStep = 0;
+    };
+    /**
+     *  Pause playback of the score.
+     *
+     *  @method  pause
+     */
+    p5.Score.prototype.pause = function () {
+      this.parts[this.currentPart].stop();
+    };
+    /**
+     *  Loop playback of the score.
+     *
+     *  @method  loop
+     */
+    p5.Score.prototype.loop = function () {
+      this.looping = true;
+      this.start();
+    };
+    /**
+     *  Stop looping playback of the score. If it
+     *  is currently playing, this will go into effect
+     *  after the current round of playback completes.
+     *
+     *  @method  noLoop
+     */
+    p5.Score.prototype.noLoop = function () {
+      this.looping = false;
+    };
+    p5.Score.prototype.resetParts = function () {
+      var self = this;
+      this.parts.forEach(function (part) {
+        self.resetParts[part];
+      });
+    };
+    p5.Score.prototype.resetPart = function (i) {
+      this.parts[i].stop();
+      this.parts[i].partStep = 0;
+      for (var p in this.parts[i].phrases) {
+        if (this.parts[i]) {
+          this.parts[i].phrases[p].phraseStep = 0;
+        }
+      }
+    };
+    /**
+     *  Set the tempo for all parts in the score
+     *
+     *  @method setBPM
+     *  @param {Number} BPM      Beats Per Minute
+     *  @param {Number} rampTime Seconds from now
+     */
+    p5.Score.prototype.setBPM = function (bpm, rampTime) {
+      for (var i in this.parts) {
+        if (this.parts[i]) {
+          this.parts[i].setBPM(bpm, rampTime);
+        }
+      }
+    };
+    function playNextPart(aScore) {
+      aScore.currentPart++;
+      if (aScore.currentPart >= aScore.parts.length) {
+        aScore.scoreStep = 0;
+        aScore.onended();
+      } else {
+        aScore.scoreStep = 0;
+        aScore.parts[aScore.currentPart - 1].stop();
+        aScore.parts[aScore.currentPart].start();
+      }
+    }
+  }(master);
+  var soundloop;
+  'use strict';
+  soundloop = function () {
+    var p5sound = master;
+    var Clock = Tone_core_Clock;
+    /**
+     * SoundLoop
+     *
+     * @class p5.SoundLoop
+     * @constructor
+     *
+     * @param {Function} callback this function will be called on each iteration of theloop
+     * @param {Number|String} [interval] amount of time or beats for each iteration of the loop
+     *                                       defaults to 1
+     *
+     * @example
+     * 

+     * var click;
+     * var looper1;
+     *
+     * function preload() {
+     *   click = loadSound('assets/drum.mp3');
+     * }
+     *
+     * function setup() {
+     *   //the looper's callback is passed the timeFromNow
+     *   //this value should be used as a reference point from
+     *   //which to schedule sounds
+     *   looper1 = new p5.SoundLoop(function(timeFromNow){
+     *     click.play(timeFromNow);
+     *     background(255 * (looper1.iterations % 2));
+     *     }, 2);
+     *
+     *   //stop after 10 iteratios;
+     *   looper1.maxIterations = 10;
+     *   //start the loop
+     *   looper1.start();
+     * }
+     * 

+     */
+    p5.SoundLoop = function (callback, interval) {
+      this.callback = callback;
+      /**
+         * musicalTimeMode uses Tone.Time convention
+      * true if string, false if number
+         * @property {Boolean} musicalTimeMode
+         */
+      this.musicalTimeMode = typeof this._interval === 'number' ? false : true;
+      this._interval = interval || 1;
+      /**
+       * musicalTimeMode variables
+       * modify these only when the interval is specified in musicalTime format as a string
+       */
+      this._timeSignature = 4;
+      this._bpm = 60;
+      this.isPlaying = false;
+      /**
+       * Set a limit to the number of loops to play. defaults to Infinity
+       * @property {Number} maxIterations
+       */
+      this.maxIterations = Infinity;
+      var self = this;
+      this.clock = new Clock({
+        'callback': function (time) {
+          var timeFromNow = time - p5sound.audiocontext.currentTime;
+          /**
+           * Do not initiate the callback if timeFromNow is < 0
+           * This ususually occurs for a few milliseconds when the page
+           * is not fully loaded
+           *
+           * The callback should only be called until maxIterations is reached
+           */
+          if (timeFromNow > 0 && self.iterations <= self.maxIterations) {
+            self.callback(timeFromNow);
+          }
+        },
+        'frequency': this._calcFreq()
+      });
+    };
+    /**
+     * Start the loop
+     * @method  start
+     * @param  {Number} [timeFromNow] schedule a starting time
+     */
+    p5.SoundLoop.prototype.start = function (timeFromNow) {
+      var t = timeFromNow || 0;
+      var now = p5sound.audiocontext.currentTime;
+      if (!this.isPlaying) {
+        this.clock.start(now + t);
+        this.isPlaying = true;
+      }
+    };
+    /**
+     * Stop the loop
+     * @method  stop
+     * @param  {Number} [timeFromNow] schedule a stopping time
+     */
+    p5.SoundLoop.prototype.stop = function (timeFromNow) {
+      var t = timeFromNow || 0;
+      var now = p5sound.audiocontext.currentTime;
+      if (this.isPlaying) {
+        this.clock.stop(now + t);
+        this.isPlaying = false;
+      }
+    };
+    /**
+     * Pause the loop
+     * @method pause
+     * @param  {Number} [timeFromNow] schedule a pausing time
+     */
+    p5.SoundLoop.prototype.pause = function (timeFromNow) {
+      var t = timeFromNow || 0;
+      if (this.isPlaying) {
+        this.clock.pause(t);
+        this.isPlaying = false;
+      }
+    };
+    /**
+     * Synchronize loops. Use this method to start two more more loops in synchronization
+     * or to start a loop in synchronization with a loop that is already playing
+     * This method will schedule the implicit loop in sync with the explicit master loop
+     * i.e. loopToStart.syncedStart(loopToSyncWith)
+     *
+     * @method  syncedStart
+     * @param  {Object} otherLoop   a p5.SoundLoop to sync with
+     * @param  {Number} [timeFromNow] Start the loops in sync after timeFromNow seconds
+     */
+    p5.SoundLoop.prototype.syncedStart = function (otherLoop, timeFromNow) {
+      var t = timeFromNow || 0;
+      var now = p5sound.audiocontext.currentTime;
+      if (!otherLoop.isPlaying) {
+        otherLoop.clock.start(now + t);
+        otherLoop.isPlaying = true;
+        this.clock.start(now + t);
+        this.isPlaying = true;
+      } else if (otherLoop.isPlaying) {
+        var time = otherLoop.clock._nextTick - p5sound.audiocontext.currentTime;
+        this.clock.start(now + time);
+        this.isPlaying = true;
+      }
+    };
+    /**
+     * Updates frequency value, reflected in next callback
+     * @private
+     * @method  _update
+     */
+    p5.SoundLoop.prototype._update = function () {
+      this.clock.frequency.value = this._calcFreq();
+    };
+    /**
+     * Calculate the frequency of the clock's callback based on bpm, interval, and timesignature
+     * @private
+     * @method  _calcFreq
+     * @return {Number} new clock frequency value
+     */
+    p5.SoundLoop.prototype._calcFreq = function () {
+      //Seconds mode, bpm / timesignature has no effect
+      if (typeof this._interval === 'number') {
+        this.musicalTimeMode = false;
+        return 1 / this._interval;
+      } else if (typeof this._interval === 'string') {
+        this.musicalTimeMode = true;
+        return this._bpm / 60 / this._convertNotation(this._interval) * (this._timeSignature / 4);
+      }
+    };
+    /**
+     * Convert notation from musical time format to seconds
+     * Uses Tone.Time convention
+     * @private
+     * @method _convertNotation
+     * @param  {String} value value to be converted
+     * @return {Number}       converted value in seconds
+     */
+    p5.SoundLoop.prototype._convertNotation = function (value) {
+      var type = value.slice(-1);
+      value = Number(value.slice(0, -1));
+      switch (type) {
+      case 'm':
+        return this._measure(value);
+      case 'n':
+        return this._note(value);
+      default:
+        console.warn('Specified interval is not formatted correctly. See Tone.js ' + 'timing reference for more info: https://github.com/Tonejs/Tone.js/wiki/Time');
+      }
+    };
+    /**
+     * Helper conversion methods of measure and note
+     * @private
+     * @method  _measure
+     * @private
+     * @method  _note
+     */
+    p5.SoundLoop.prototype._measure = function (value) {
+      return value * this._timeSignature;
+    };
+    p5.SoundLoop.prototype._note = function (value) {
+      return this._timeSignature / value;
+    };
+    /**
+     * Getters and Setters, setting any paramter will result in a change in the clock's
+     * frequency, that will be reflected after the next callback
+     * beats per minute (defaults to 60)
+     * @property {Number} bpm
+     */
+    Object.defineProperty(p5.SoundLoop.prototype, 'bpm', {
+      get: function () {
+        return this._bpm;
+      },
+      set: function (bpm) {
+        if (!this.musicalTimeMode) {
+          console.warn('Changing the BPM in "seconds" mode has no effect. ' + 'BPM is only relevant in musicalTimeMode ' + 'when the interval is specified as a string ' + '("2n", "4n", "1m"...etc)');
+        }
+        this._bpm = bpm;
+        this._update();
+      }
+    });
+    /**
+     * number of quarter notes in a measure (defaults to 4)
+     * @property {Number} timeSignature
+     */
+    Object.defineProperty(p5.SoundLoop.prototype, 'timeSignature', {
+      get: function () {
+        return this._timeSignature;
+      },
+      set: function (timeSig) {
+        if (!this.musicalTimeMode) {
+          console.warn('Changing the timeSignature in "seconds" mode has no effect. ' + 'BPM is only relevant in musicalTimeMode ' + 'when the interval is specified as a string ' + '("2n", "4n", "1m"...etc)');
+        }
+        this._timeSignature = timeSig;
+        this._update();
+      }
+    });
+    /**
+     * length of the loops interval
+     * @property {Number|String} interval
+     */
+    Object.defineProperty(p5.SoundLoop.prototype, 'interval', {
+      get: function () {
+        return this._interval;
+      },
+      set: function (interval) {
+        this.musicalTimeMode = typeof interval === 'Number' ? false : true;
+        this._interval = interval;
+        this._update();
+      }
+    });
+    /**
+     * how many times the callback has been called so far
+     * @property {Number} iterations
+     * @readonly
+     */
+    Object.defineProperty(p5.SoundLoop.prototype, 'iterations', {
+      get: function () {
+        return this.clock.ticks;
+      }
+    });
+    return p5.SoundLoop;
+  }(master, Tone_core_Clock);
+  var compressor;
+  compressor = function () {
+    'use strict';
+    var p5sound = master;
+    var Effect = effect;
+    var CustomError = errorHandler;
+    /**
+     * Compressor is an audio effect class that performs dynamics compression
+     * on an audio input source. This is a very commonly used technique in music
+     * and sound production. Compression creates an overall louder, richer,
+     * and fuller sound by lowering the volume of louds and raising that of softs.
+     * Compression can be used to avoid clipping (sound distortion due to
+     * peaks in volume) and is especially useful when many sounds are played
+     * at once. Compression can be used on indivudal sound sources in addition
+     * to the master output.
+     *
+     * This class extends p5.Effect.
+     * Methods amp(), chain(),
+     * drywet(), connect(), and
+     * disconnect() are available.
+     *
+     * @class p5.Compressor
+     * @constructor
+     * @extends p5.Effect
+     *
+     *
+     */
+    p5.Compressor = function () {
+      Effect.call(this);
+      /**
+         * The p5.Compressor is built with a Web Audio Dynamics Compressor Node
+       *   
+         * @property {AudioNode} compressor
+         */
+      this.compressor = this.ac.createDynamicsCompressor();
+      this.input.connect(this.compressor);
+      this.compressor.connect(this.wet);
+    };
+    p5.Compressor.prototype = Object.create(Effect.prototype);
+    /**
+    * Performs the same function as .connect, but also accepts
+    * optional parameters to set compressor's audioParams
+    * @method process
+    *
+    * @param {Object} src         Sound source to be connected
+    *
+    * @param {Number} [attack]     The amount of time (in seconds) to reduce the gain by 10dB,
+    *                            default = .003, range 0 - 1
+    * @param {Number} [knee]       A decibel value representing the range above the
+    *                            threshold where the curve smoothly transitions to the "ratio" portion.
+    *                            default = 30, range 0 - 40
+    * @param {Number} [ratio]      The amount of dB change in input for a 1 dB change in output
+    *                            default = 12, range 1 - 20
+    * @param {Number} [threshold]  The decibel value above which the compression will start taking effect
+    *                            default = -24, range -100 - 0
+    * @param {Number} [release]    The amount of time (in seconds) to increase the gain by 10dB
+    *                            default = .25, range 0 - 1
+    */
+    p5.Compressor.prototype.process = function (src, attack, knee, ratio, threshold, release) {
+      src.connect(this.input);
+      this.set(attack, knee, ratio, threshold, release);
+    };
+    /**
+     * Set the paramters of a compressor.
+     * @method  set
+     * @param {Number} attack     The amount of time (in seconds) to reduce the gain by 10dB,
+     *                            default = .003, range 0 - 1
+     * @param {Number} knee       A decibel value representing the range above the
+     *                            threshold where the curve smoothly transitions to the "ratio" portion.
+     *                            default = 30, range 0 - 40
+     * @param {Number} ratio      The amount of dB change in input for a 1 dB change in output
+     *                            default = 12, range 1 - 20
+     * @param {Number} threshold  The decibel value above which the compression will start taking effect
+     *                            default = -24, range -100 - 0
+     * @param {Number} release    The amount of time (in seconds) to increase the gain by 10dB
+     *                            default = .25, range 0 - 1
+     */
+    p5.Compressor.prototype.set = function (attack, knee, ratio, threshold, release) {
+      if (typeof attack !== 'undefined') {
+        this.attack(attack);
+      }
+      if (typeof knee !== 'undefined') {
+        this.knee(knee);
+      }
+      if (typeof ratio !== 'undefined') {
+        this.ratio(ratio);
+      }
+      if (typeof threshold !== 'undefined') {
+        this.threshold(threshold);
+      }
+      if (typeof release !== 'undefined') {
+        this.release(release);
+      }
+    };
+    /**
+     * Get current attack or set value w/ time ramp
+     *
+     *
+     * @method attack
+     * @param {Number} [attack] Attack is the amount of time (in seconds) to reduce the gain by 10dB,
+     *                          default = .003, range 0 - 1
+     * @param {Number} [time]  Assign time value to schedule the change in value
+     */
+    p5.Compressor.prototype.attack = function (attack, time) {
+      var t = time || 0;
+      if (typeof attack == 'number') {
+        this.compressor.attack.value = attack;
+        this.compressor.attack.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.compressor.attack.linearRampToValueAtTime(attack, this.ac.currentTime + 0.02 + t);
+      } else if (typeof attack !== 'undefined') {
+        attack.connect(this.compressor.attack);
+      }
+      return this.compressor.attack.value;
+    };
+    /**
+     * Get current knee or set value w/ time ramp
+     *
+     * @method knee
+     * @param {Number} [knee] A decibel value representing the range above the
+     *                        threshold where the curve smoothly transitions to the "ratio" portion.
+     *                        default = 30, range 0 - 40
+     * @param {Number} [time]  Assign time value to schedule the change in value
+     */
+    p5.Compressor.prototype.knee = function (knee, time) {
+      var t = time || 0;
+      if (typeof knee == 'number') {
+        this.compressor.knee.value = knee;
+        this.compressor.knee.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.compressor.knee.linearRampToValueAtTime(knee, this.ac.currentTime + 0.02 + t);
+      } else if (typeof knee !== 'undefined') {
+        knee.connect(this.compressor.knee);
+      }
+      return this.compressor.knee.value;
+    };
+    /**
+     * Get current ratio or set value w/ time ramp
+     * @method ratio
+     *
+     * @param {Number} [ratio]      The amount of dB change in input for a 1 dB change in output
+     *                            default = 12, range 1 - 20
+     * @param {Number} [time]  Assign time value to schedule the change in value
+     */
+    p5.Compressor.prototype.ratio = function (ratio, time) {
+      var t = time || 0;
+      if (typeof ratio == 'number') {
+        this.compressor.ratio.value = ratio;
+        this.compressor.ratio.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.compressor.ratio.linearRampToValueAtTime(ratio, this.ac.currentTime + 0.02 + t);
+      } else if (typeof ratio !== 'undefined') {
+        ratio.connect(this.compressor.ratio);
+      }
+      return this.compressor.ratio.value;
+    };
+    /**
+     * Get current threshold or set value w/ time ramp
+     * @method threshold
+     *
+     * @param {Number} threshold  The decibel value above which the compression will start taking effect
+     *                            default = -24, range -100 - 0
+     * @param {Number} [time]  Assign time value to schedule the change in value
+     */
+    p5.Compressor.prototype.threshold = function (threshold, time) {
+      var t = time || 0;
+      if (typeof threshold == 'number') {
+        this.compressor.threshold.value = threshold;
+        this.compressor.threshold.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.compressor.threshold.linearRampToValueAtTime(threshold, this.ac.currentTime + 0.02 + t);
+      } else if (typeof threshold !== 'undefined') {
+        threshold.connect(this.compressor.threshold);
+      }
+      return this.compressor.threshold.value;
+    };
+    /**
+     * Get current release or set value w/ time ramp
+     * @method release
+     *
+     * @param {Number} release    The amount of time (in seconds) to increase the gain by 10dB
+     *                            default = .25, range 0 - 1
+     *
+     * @param {Number} [time]  Assign time value to schedule the change in value
+     */
+    p5.Compressor.prototype.release = function (release, time) {
+      var t = time || 0;
+      if (typeof release == 'number') {
+        this.compressor.release.value = release;
+        this.compressor.release.cancelScheduledValues(this.ac.currentTime + 0.01 + t);
+        this.compressor.release.linearRampToValueAtTime(release, this.ac.currentTime + 0.02 + t);
+      } else if (typeof number !== 'undefined') {
+        release.connect(this.compressor.release);
+      }
+      return this.compressor.release.value;
+    };
+    /**
+     * Return the current reduction value
+     *
+     * @method reduction
+     * @return {Number} Value of the amount of gain reduction that is applied to the signal
+     */
+    p5.Compressor.prototype.reduction = function () {
+      return this.compressor.reduction.value;
+    };
+    p5.Compressor.prototype.dispose = function () {
+      Effect.prototype.dispose.apply(this);
+      this.compressor.disconnect();
+      this.compressor = undefined;
+    };
+    return p5.Compressor;
+  }(master, effect, errorHandler);
+  var soundRecorder;
+  'use strict';
+  soundRecorder = function () {
+    var p5sound = master;
+    var ac = p5sound.audiocontext;
+    /**
+     *  
Record sounds for playback and/or to save as a .wav file.
+     *  The p5.SoundRecorder records all sound output from your sketch,
+     *  or can be assigned a specific source with setInput().

+     *  
The record() method accepts a p5.SoundFile as a parameter.
+     *  When playback is stopped (either after the given amount of time,
+     *  or with the stop() method), the p5.SoundRecorder will send its
+     *  recording to that p5.SoundFile for playback.

+     *
+     *  @class p5.SoundRecorder
+     *  @constructor
+     *  @example
+     *  

+     *  var mic, recorder, soundFile;
+     *  var state = 0;
+     *
+     *  function setup() {
+     *    background(200);
+     *    // create an audio in
+     *    mic = new p5.AudioIn();
+     *
+     *    // prompts user to enable their browser mic
+     *    mic.start();
+     *
+     *    // create a sound recorder
+     *    recorder = new p5.SoundRecorder();
+     *
+     *    // connect the mic to the recorder
+     *    recorder.setInput(mic);
+     *
+     *    // this sound file will be used to
+     *    // playback & save the recording
+     *    soundFile = new p5.SoundFile();
+     *
+     *    text('keyPress to record', 20, 20);
+     *  }
+     *
+     *  function keyPressed() {
+     *    // make sure user enabled the mic
+     *    if (state === 0 && mic.enabled) {
+     *
+     *      // record to our p5.SoundFile
+     *      recorder.record(soundFile);
+     *
+     *      background(255,0,0);
+     *      text('Recording!', 20, 20);
+     *      state++;
+     *    }
+     *    else if (state === 1) {
+     *      background(0,255,0);
+     *
+     *      // stop recorder and
+     *      // send result to soundFile
+     *      recorder.stop();
+     *
+     *      text('Stopped', 20, 20);
+     *      state++;
+     *    }
+     *
+     *    else if (state === 2) {
+     *      soundFile.play(); // play the result!
+     *      save(soundFile, 'mySound.wav');
+     *      state++;
+     *    }
+     *  }
+     *  

+     */
+    p5.SoundRecorder = function () {
+      this.input = ac.createGain();
+      this.output = ac.createGain();
+      this.recording = false;
+      this.bufferSize = 1024;
+      this._channels = 2;
+      // stereo (default)
+      this._clear();
+      // initialize variables
+      this._jsNode = ac.createScriptProcessor(this.bufferSize, this._channels, 2);
+      this._jsNode.onaudioprocess = this._audioprocess.bind(this);
+      /**
+       *  callback invoked when the recording is over
+       *  @private
+       *  @type Function(Float32Array)
+       */
+      this._callback = function () {
+      };
+      // connections
+      this._jsNode.connect(p5.soundOut._silentNode);
+      this.setInput();
+      // add this p5.SoundFile to the soundArray
+      p5sound.soundArray.push(this);
+    };
+    /**
+     *  Connect a specific device to the p5.SoundRecorder.
+     *  If no parameter is given, p5.SoundRecorer will record
+     *  all audible p5.sound from your sketch.
+     *
+     *  @method  setInput
+     *  @param {Object} [unit] p5.sound object or a web audio unit
+     *                         that outputs sound
+     */
+    p5.SoundRecorder.prototype.setInput = function (unit) {
+      this.input.disconnect();
+      this.input = null;
+      this.input = ac.createGain();
+      this.input.connect(this._jsNode);
+      this.input.connect(this.output);
+      if (unit) {
+        unit.connect(this.input);
+      } else {
+        p5.soundOut.output.connect(this.input);
+      }
+    };
+    /**
+     *  Start recording. To access the recording, provide
+     *  a p5.SoundFile as the first parameter. The p5.SoundRecorder
+     *  will send its recording to that p5.SoundFile for playback once
+     *  recording is complete. Optional parameters include duration
+     *  (in seconds) of the recording, and a callback function that
+     *  will be called once the complete recording has been
+     *  transfered to the p5.SoundFile.
+     *
+     *  @method  record
+     *  @param  {p5.SoundFile}   soundFile    p5.SoundFile
+     *  @param  {Number}   [duration] Time (in seconds)
+     *  @param  {Function} [callback] The name of a function that will be
+     *                                called once the recording completes
+     */
+    p5.SoundRecorder.prototype.record = function (sFile, duration, callback) {
+      this.recording = true;
+      if (duration) {
+        this.sampleLimit = Math.round(duration * ac.sampleRate);
+      }
+      if (sFile && callback) {
+        this._callback = function () {
+          this.buffer = this._getBuffer();
+          sFile.setBuffer(this.buffer);
+          callback();
+        };
+      } else if (sFile) {
+        this._callback = function () {
+          this.buffer = this._getBuffer();
+          sFile.setBuffer(this.buffer);
+        };
+      }
+    };
+    /**
+     *  Stop the recording. Once the recording is stopped,
+     *  the results will be sent to the p5.SoundFile that
+     *  was given on .record(), and if a callback function
+     *  was provided on record, that function will be called.
+     *
+     *  @method  stop
+     */
+    p5.SoundRecorder.prototype.stop = function () {
+      this.recording = false;
+      this._callback();
+      this._clear();
+    };
+    p5.SoundRecorder.prototype._clear = function () {
+      this._leftBuffers = [];
+      this._rightBuffers = [];
+      this.recordedSamples = 0;
+      this.sampleLimit = null;
+    };
+    /**
+     *  internal method called on audio process
+     *
+     *  @private
+     *  @param   {AudioProcessorEvent} event
+     */
+    p5.SoundRecorder.prototype._audioprocess = function (event) {
+      if (this.recording === false) {
+        return;
+      } else if (this.recording === true) {
+        // if we are past the duration, then stop... else:
+        if (this.sampleLimit && this.recordedSamples >= this.sampleLimit) {
+          this.stop();
+        } else {
+          // get channel data
+          var left = event.inputBuffer.getChannelData(0);
+          var right = event.inputBuffer.getChannelData(1);
+          // clone the samples
+          this._leftBuffers.push(new Float32Array(left));
+          this._rightBuffers.push(new Float32Array(right));
+          this.recordedSamples += this.bufferSize;
+        }
+      }
+    };
+    p5.SoundRecorder.prototype._getBuffer = function () {
+      var buffers = [];
+      buffers.push(this._mergeBuffers(this._leftBuffers));
+      buffers.push(this._mergeBuffers(this._rightBuffers));
+      return buffers;
+    };
+    p5.SoundRecorder.prototype._mergeBuffers = function (channelBuffer) {
+      var result = new Float32Array(this.recordedSamples);
+      var offset = 0;
+      var lng = channelBuffer.length;
+      for (var i = 0; i < lng; i++) {
+        var buffer = channelBuffer[i];
+        result.set(buffer, offset);
+        offset += buffer.length;
+      }
+      return result;
+    };
+    p5.SoundRecorder.prototype.dispose = function () {
+      this._clear();
+      // remove reference from soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      this._callback = function () {
+      };
+      if (this.input) {
+        this.input.disconnect();
+      }
+      this.input = null;
+      this._jsNode = null;
+    };
+    /**
+     *  Save a p5.SoundFile as a .wav audio file.
+     *
+     *  @method saveSound
+     *  @param  {p5.SoundFile} soundFile p5.SoundFile that you wish to save
+     *  @param  {String} name      name of the resulting .wav file.
+     */
+    p5.prototype.saveSound = function (soundFile, name) {
+      var leftChannel, rightChannel;
+      leftChannel = soundFile.buffer.getChannelData(0);
+      // handle mono files
+      if (soundFile.buffer.numberOfChannels > 1) {
+        rightChannel = soundFile.buffer.getChannelData(1);
+      } else {
+        rightChannel = leftChannel;
+      }
+      var interleaved = interleave(leftChannel, rightChannel);
+      // create the buffer and view to create the .WAV file
+      var buffer = new window.ArrayBuffer(44 + interleaved.length * 2);
+      var view = new window.DataView(buffer);
+      // write the WAV container,
+      // check spec at: https://ccrma.stanford.edu/courses/422/projects/WaveFormat/
+      // RIFF chunk descriptor
+      writeUTFBytes(view, 0, 'RIFF');
+      view.setUint32(4, 36 + interleaved.length * 2, true);
+      writeUTFBytes(view, 8, 'WAVE');
+      // FMT sub-chunk
+      writeUTFBytes(view, 12, 'fmt ');
+      view.setUint32(16, 16, true);
+      view.setUint16(20, 1, true);
+      // stereo (2 channels)
+      view.setUint16(22, 2, true);
+      view.setUint32(24, 44100, true);
+      view.setUint32(28, 44100 * 4, true);
+      view.setUint16(32, 4, true);
+      view.setUint16(34, 16, true);
+      // data sub-chunk
+      writeUTFBytes(view, 36, 'data');
+      view.setUint32(40, interleaved.length * 2, true);
+      // write the PCM samples
+      var lng = interleaved.length;
+      var index = 44;
+      var volume = 1;
+      for (var i = 0; i < lng; i++) {
+        view.setInt16(index, interleaved[i] * (32767 * volume), true);
+        index += 2;
+      }
+      p5.prototype.writeFile([view], name, 'wav');
+    };
+    // helper methods to save waves
+    function interleave(leftChannel, rightChannel) {
+      var length = leftChannel.length + rightChannel.length;
+      var result = new Float32Array(length);
+      var inputIndex = 0;
+      for (var index = 0; index < length;) {
+        result[index++] = leftChannel[inputIndex];
+        result[index++] = rightChannel[inputIndex];
+        inputIndex++;
+      }
+      return result;
+    }
+    function writeUTFBytes(view, offset, string) {
+      var lng = string.length;
+      for (var i = 0; i < lng; i++) {
+        view.setUint8(offset + i, string.charCodeAt(i));
+      }
+    }
+  }(sndcore, master);
+  var peakdetect;
+  'use strict';
+  peakdetect = function () {
+    /**
+     *  
PeakDetect works in conjunction with p5.FFT to
+     *  look for onsets in some or all of the frequency spectrum.
+     *  

+     *  

+     *  To use p5.PeakDetect, call update in the draw loop
+     *  and pass in a p5.FFT object.
+     *  

+     *  

+     *  You can listen for a specific part of the frequency spectrum by
+     *  setting the range between freq1 and freq2.
+     *  

+     *
+     *  
threshold is the threshold for detecting a peak,
+     *  scaled between 0 and 1. It is logarithmic, so 0.1 is half as loud
+     *  as 1.0.

+     *
+     *  

+     *  The update method is meant to be run in the draw loop, and
+     *  frames determines how many loops must pass before
+     *  another peak can be detected.
+     *  For example, if the frameRate() = 60, you could detect the beat of a
+     *  120 beat-per-minute song with this equation:
+     *   framesPerPeak = 60 / (estimatedBPM / 60 );
+     *  

+     *
+     *  

+     *  Based on example contribtued by @b2renger, and a simple beat detection
+     *  explanation by Felix Turner.
+     *  

+     *
+     *  @class  p5.PeakDetect
+     *  @constructor
+     *  @param {Number} [freq1]     lowFrequency - defaults to 20Hz
+     *  @param {Number} [freq2]     highFrequency - defaults to 20000 Hz
+     *  @param {Number} [threshold] Threshold for detecting a beat between 0 and 1
+     *                            scaled logarithmically where 0.1 is 1/2 the loudness
+     *                            of 1.0. Defaults to 0.35.
+     *  @param {Number} [framesPerPeak]     Defaults to 20.
+     *  @example
+     *  

+     *
+     *  var cnv, soundFile, fft, peakDetect;
+     *  var ellipseWidth = 10;
+     *
+     *  function setup() {
+     *    background(0);
+     *    noStroke();
+     *    fill(255);
+     *    textAlign(CENTER);
+     *
+     *    soundFile = loadSound('assets/beat.mp3');
+     *
+     *    // p5.PeakDetect requires a p5.FFT
+     *    fft = new p5.FFT();
+     *    peakDetect = new p5.PeakDetect();
+     *
+     *  }
+     *
+     *  function draw() {
+     *    background(0);
+     *    text('click to play/pause', width/2, height/2);
+     *
+     *    // peakDetect accepts an fft post-analysis
+     *    fft.analyze();
+     *    peakDetect.update(fft);
+     *
+     *    if ( peakDetect.isDetected ) {
+     *      ellipseWidth = 50;
+     *    } else {
+     *      ellipseWidth *= 0.95;
+     *    }
+     *
+     *    ellipse(width/2, height/2, ellipseWidth, ellipseWidth);
+     *  }
+     *
+     *  // toggle play/stop when canvas is clicked
+     *  function mouseClicked() {
+     *    if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+     *      if (soundFile.isPlaying() ) {
+     *        soundFile.stop();
+     *      } else {
+     *        soundFile.play();
+     *      }
+     *    }
+     *  }
+     *  

+     */
+    p5.PeakDetect = function (freq1, freq2, threshold, _framesPerPeak) {
+      // framesPerPeak determines how often to look for a beat.
+      // If a beat is provided, try to look for a beat based on bpm
+      this.framesPerPeak = _framesPerPeak || 20;
+      this.framesSinceLastPeak = 0;
+      this.decayRate = 0.95;
+      this.threshold = threshold || 0.35;
+      this.cutoff = 0;
+      // how much to increase the cutoff
+      // TO DO: document this / figure out how to make it accessible
+      this.cutoffMult = 1.5;
+      this.energy = 0;
+      this.penergy = 0;
+      // TO DO: document this property / figure out how to make it accessible
+      this.currentValue = 0;
+      /**
+       *  isDetected is set to true when a peak is detected.
+       *
+       *  @attribute isDetected {Boolean}
+       *  @default  false
+       */
+      this.isDetected = false;
+      this.f1 = freq1 || 40;
+      this.f2 = freq2 || 20000;
+      // function to call when a peak is detected
+      this._onPeak = function () {
+      };
+    };
+    /**
+     *  The update method is run in the draw loop.
+     *
+     *  Accepts an FFT object. You must call .analyze()
+     *  on the FFT object prior to updating the peakDetect
+     *  because it relies on a completed FFT analysis.
+     *
+     *  @method  update
+     *  @param  {p5.FFT} fftObject A p5.FFT object
+     */
+    p5.PeakDetect.prototype.update = function (fftObject) {
+      var nrg = this.energy = fftObject.getEnergy(this.f1, this.f2) / 255;
+      if (nrg > this.cutoff && nrg > this.threshold && nrg - this.penergy > 0) {
+        // trigger callback
+        this._onPeak();
+        this.isDetected = true;
+        // debounce
+        this.cutoff = nrg * this.cutoffMult;
+        this.framesSinceLastPeak = 0;
+      } else {
+        this.isDetected = false;
+        if (this.framesSinceLastPeak <= this.framesPerPeak) {
+          this.framesSinceLastPeak++;
+        } else {
+          this.cutoff *= this.decayRate;
+          this.cutoff = Math.max(this.cutoff, this.threshold);
+        }
+      }
+      this.currentValue = nrg;
+      this.penergy = nrg;
+    };
+    /**
+     *  onPeak accepts two arguments: a function to call when
+     *  a peak is detected. The value of the peak,
+     *  between 0.0 and 1.0, is passed to the callback.
+     *
+     *  @method  onPeak
+     *  @param  {Function} callback Name of a function that will
+     *                              be called when a peak is
+     *                              detected.
+     *  @param  {Object}   [val]    Optional value to pass
+     *                              into the function when
+     *                              a peak is detected.
+     *  @example
+     *  

+     *  var cnv, soundFile, fft, peakDetect;
+     *  var ellipseWidth = 0;
+     *
+     *  function setup() {
+     *    cnv = createCanvas(100,100);
+     *    textAlign(CENTER);
+     *
+     *    soundFile = loadSound('assets/beat.mp3');
+     *    fft = new p5.FFT();
+     *    peakDetect = new p5.PeakDetect();
+     *
+     *    setupSound();
+     *
+     *    // when a beat is detected, call triggerBeat()
+     *    peakDetect.onPeak(triggerBeat);
+     *  }
+     *
+     *  function draw() {
+     *    background(0);
+     *    fill(255);
+     *    text('click to play', width/2, height/2);
+     *
+     *    fft.analyze();
+     *    peakDetect.update(fft);
+     *
+     *    ellipseWidth *= 0.95;
+     *    ellipse(width/2, height/2, ellipseWidth, ellipseWidth);
+     *  }
+     *
+     *  // this function is called by peakDetect.onPeak
+     *  function triggerBeat() {
+     *    ellipseWidth = 50;
+     *  }
+     *
+     *  // mouseclick starts/stops sound
+     *  function setupSound() {
+     *    cnv.mouseClicked( function() {
+     *      if (soundFile.isPlaying() ) {
+     *        soundFile.stop();
+     *      } else {
+     *        soundFile.play();
+     *      }
+     *    });
+     *  }
+     *  

+     */
+    p5.PeakDetect.prototype.onPeak = function (callback, val) {
+      var self = this;
+      self._onPeak = function () {
+        callback(self.energy, val);
+      };
+    };
+  }();
+  var gain;
+  'use strict';
+  gain = function () {
+    var p5sound = master;
+    /**
+     *  A gain node is usefull to set the relative volume of sound.
+     *  It's typically used to build mixers.
+     *
+     *  @class p5.Gain
+     *  @constructor
+     *  @example
+     *  

+     *
+     * // load two soundfile and crossfade beetween them
+     * var sound1,sound2;
+     * var gain1, gain2, gain3;
+     *
+     * function preload(){
+     *   soundFormats('ogg', 'mp3');
+     *   sound1 = loadSound('../_files/Damscray_01');
+     *   sound2 = loadSound('../_files/beat.mp3');
+     * }
+     *
+     * function setup() {
+     *   createCanvas(400,200);
+     *
+     *   // create a 'master' gain to which we will connect both soundfiles
+     *   gain3 = new p5.Gain();
+     *   gain3.connect();
+     *
+     *   // setup first sound for playing
+     *   sound1.rate(1);
+     *   sound1.loop();
+     *   sound1.disconnect(); // diconnect from p5 output
+     *
+     *   gain1 = new p5.Gain(); // setup a gain node
+     *   gain1.setInput(sound1); // connect the first sound to its input
+     *   gain1.connect(gain3); // connect its output to the 'master'
+     *
+     *   sound2.rate(1);
+     *   sound2.disconnect();
+     *   sound2.loop();
+     *
+     *   gain2 = new p5.Gain();
+     *   gain2.setInput(sound2);
+     *   gain2.connect(gain3);
+     *
+     * }
+     *
+     * function draw(){
+     *   background(180);
+     *
+     *   // calculate the horizontal distance beetween the mouse and the right of the screen
+     *   var d = dist(mouseX,0,width,0);
+     *
+     *   // map the horizontal position of the mouse to values useable for volume control of sound1
+     *   var vol1 = map(mouseX,0,width,0,1);
+     *   var vol2 = 1-vol1; // when sound1 is loud, sound2 is quiet and vice versa
+     *
+     *   gain1.amp(vol1,0.5,0);
+     *   gain2.amp(vol2,0.5,0);
+     *
+     *   // map the vertical position of the mouse to values useable for 'master volume control'
+     *   var vol3 = map(mouseY,0,height,0,1);
+     *   gain3.amp(vol3,0.5,0);
+     * }
+     *

+     *
+     */
+    p5.Gain = function () {
+      this.ac = p5sound.audiocontext;
+      this.input = this.ac.createGain();
+      this.output = this.ac.createGain();
+      // otherwise, Safari distorts
+      this.input.gain.value = 0.5;
+      this.input.connect(this.output);
+      // add  to the soundArray
+      p5sound.soundArray.push(this);
+    };
+    /**
+     *  Connect a source to the gain node.
+     *
+     *  @method  setInput
+     *  @param  {Object} src     p5.sound / Web Audio object with a sound
+     *                           output.
+     */
+    p5.Gain.prototype.setInput = function (src) {
+      src.connect(this.input);
+    };
+    /**
+     *  Send output to a p5.sound or web audio object
+     *
+     *  @method  connect
+     *  @param  {Object} unit
+     */
+    p5.Gain.prototype.connect = function (unit) {
+      var u = unit || p5.soundOut.input;
+      this.output.connect(u.input ? u.input : u);
+    };
+    /**
+     *  Disconnect all output.
+     *
+     *  @method disconnect
+     */
+    p5.Gain.prototype.disconnect = function () {
+      this.output.disconnect();
+    };
+    /**
+     *  Set the output level of the gain node.
+     *
+     *  @method  amp
+     *  @param  {Number} volume amplitude between 0 and 1.0
+     *  @param  {Number} [rampTime] create a fade that lasts rampTime
+     *  @param  {Number} [timeFromNow] schedule this event to happen
+     *                                seconds from now
+     */
+    p5.Gain.prototype.amp = function (vol, rampTime, tFromNow) {
+      var rampTime = rampTime || 0;
+      var tFromNow = tFromNow || 0;
+      var now = p5sound.audiocontext.currentTime;
+      var currentVol = this.output.gain.value;
+      this.output.gain.cancelScheduledValues(now);
+      this.output.gain.linearRampToValueAtTime(currentVol, now + tFromNow);
+      this.output.gain.linearRampToValueAtTime(vol, now + tFromNow + rampTime);
+    };
+    p5.Gain.prototype.dispose = function () {
+      // remove reference from soundArray
+      var index = p5sound.soundArray.indexOf(this);
+      p5sound.soundArray.splice(index, 1);
+      this.output.disconnect();
+      this.input.disconnect();
+      this.output = undefined;
+      this.input = undefined;
+    };
+  }(master, sndcore);
+  var audioVoice;
+  'use strict';
+  audioVoice = function () {
+    var p5sound = master;
+    /**
+     * Base class for monophonic synthesizers. Any extensions of this class
+     * should follow the API and implement the methods below in order to
+     * remain compatible with p5.PolySynth();
+     *
+     * @class p5.AudioVoice
+     * @constructor
+     */
+    p5.AudioVoice = function () {
+      this.ac = p5sound.audiocontext;
+      this.output = this.ac.createGain();
+      this.connect();
+      p5sound.soundArray.push(this);
+    };
+    /**
+     * This method converts midi notes specified as a string "C4", "Eb3"...etc
+     * to frequency
+     * @private
+     * @method  _setNote
+     * @param {String} note
+     */
+    p5.AudioVoice.prototype._setNote = function (note) {
+      var wholeNotes = {
+        A: 21,
+        B: 23,
+        C: 24,
+        D: 26,
+        E: 28,
+        F: 29,
+        G: 31
+      };
+      var value = wholeNotes[note[0]];
+      var octave = typeof Number(note.slice(-1)) === 'number' ? note.slice(-1) : 0;
+      value += 12 * octave;
+      value = note[1] === '#' ? value + 1 : note[1] === 'b' ? value - 1 : value;
+      //return midi value converted to frequency
+      return p5.prototype.midiToFreq(value);
+    };
+    p5.AudioVoice.prototype.play = function (note, velocity, secondsFromNow, sustime) {
+    };
+    p5.AudioVoice.prototype.triggerAttack = function (note, velocity, secondsFromNow) {
+    };
+    p5.AudioVoice.prototype.triggerRelease = function (secondsFromNow) {
+    };
+    p5.AudioVoice.prototype.amp = function (vol, rampTime) {
+    };
+    /**
+     * Connect to p5 objects or Web Audio Nodes
+     * @method  connect
+     * @param {Object} unit
+     */
+    p5.AudioVoice.prototype.connect = function (unit) {
+      var u = unit || p5sound.input;
+      this.output.connect(u.input ? u.input : u);
+    };
+    /**
+     * Disconnect from soundOut
+     * @method  disconnect
+     */
+    p5.AudioVoice.prototype.disconnect = function () {
+      this.output.disconnect();
+    };
+    p5.AudioVoice.prototype.dispose = function () {
+      this.output.disconnect();
+      delete this.output;
+    };
+    return p5.AudioVoice;
+  }(master);
+  var monosynth;
+  'use strict';
+  monosynth = function () {
+    var p5sound = master;
+    var AudioVoice = audioVoice;
+    /**
+    *  An MonoSynth is used as a single voice for sound synthesis.
+    *  This is a class to be used in conjonction with the PolySynth
+    *  class. Custom synthetisers should be built inheriting from
+    *  this class.
+    *
+    *  @class p5.MonoSynth
+    *  @constructor
+    *  @example
+    *  

+    *  var monosynth;
+    *  var x;
+    *
+    *  function setup() {
+    *    monosynth = new p5.MonoSynth();
+    *    monosynth.loadPreset('simpleBass');
+    *    monosynth.play(45,1,x=0,1);
+    *    monosynth.play(49,1,x+=1,0.25);
+    *    monosynth.play(50,1,x+=0.25,0.25);
+    *    monosynth.play(49,1,x+=0.5,0.25);
+    *    monosynth.play(50,1,x+=0.25,0.25);
+    *  }
+    *  

+    **/
+    p5.MonoSynth = function () {
+      AudioVoice.call(this);
+      this.oscillator = new p5.Oscillator();
+      // this.oscillator.disconnect();
+      this.env = new p5.Env();
+      this.env.setRange(1, 0);
+      this.env.setExp(true);
+      //set params
+      this.setADSR(0.02, 0.25, 0.05, 0.35);
+      // filter
+      this.filter = new p5.Filter('highpass');
+      this.filter.set(5, 1);
+      // oscillator --> env --> filter --> this.output (gain) --> p5.soundOut
+      this.oscillator.disconnect();
+      this.oscillator.connect(this.filter);
+      this.env.disconnect();
+      this.env.setInput(this.oscillator);
+      // this.env.connect(this.filter);
+      this.filter.connect(this.output);
+      this.oscillator.start();
+      this.connect();
+      //Audiovoices are connected to soundout by default
+      this._isOn = false;
+      p5sound.soundArray.push(this);
+    };
+    p5.MonoSynth.prototype = Object.create(p5.AudioVoice.prototype);
+    /**
+     *  Play tells the MonoSynth to start playing a note. This method schedules
+     *  the calling of .triggerAttack and .triggerRelease.
+     *
+     *  @method play
+     *  @param {String | Number} note the note you want to play, specified as a
+     *                                 frequency in Hertz (Number) or as a midi
+     *                                 value in Note/Octave format ("C4", "Eb3"...etc")
+     *                                 See 
+     *                                 Tone. Defaults to 440 hz.
+     *  @param  {Number} [velocity] velocity of the note to play (ranging from 0 to 1)
+     *  @param  {Number} [secondsFromNow]  time from now (in seconds) at which to play
+     *  @param  {Number} [sustainTime] time to sustain before releasing the envelope
+     *
+     */
+    p5.MonoSynth.prototype.play = function (note, velocity, secondsFromNow, susTime) {
+      // set range of env (TO DO: allow this to be scheduled in advance)
+      var susTime = susTime || this.sustain;
+      this.susTime = susTime;
+      this.triggerAttack(note, velocity, secondsFromNow);
+      this.triggerRelease(secondsFromNow + susTime);
+    };
+    /**
+     *  Trigger the Attack, and Decay portion of the Envelope.
+     *  Similar to holding down a key on a piano, but it will
+     *  hold the sustain level until you let go.
+     *
+     *  @param {String | Number} note the note you want to play, specified as a
+     *                                 frequency in Hertz (Number) or as a midi
+     *                                 value in Note/Octave format ("C4", "Eb3"...etc")
+     *                                 See 
+     *                                 Tone. Defaults to 440 hz
+     *  @param  {Number} [velocity] velocity of the note to play (ranging from 0 to 1)
+     *  @param  {Number} [secondsFromNow]  time from now (in seconds) at which to play
+     *  @method  triggerAttack
+     */
+    p5.MonoSynth.prototype.triggerAttack = function (note, velocity, secondsFromNow) {
+      var secondsFromNow = secondsFromNow || 0;
+      //triggerAttack uses ._setNote to convert a midi string to a frequency if necessary
+      var freq = typeof note === 'string' ? this._setNote(note) : typeof note === 'number' ? note : 440;
+      var vel = velocity || 1;
+      this._isOn = true;
+      this.oscillator.freq(freq, 0, secondsFromNow);
+      this.env.ramp(this.output, secondsFromNow, vel);
+    };
+    /**
+     *  Trigger the release of the Envelope. This is similar to releasing
+     *  the key on a piano and letting the sound fade according to the
+     *  release level and release time.
+     *
+     *  @param  {Number} secondsFromNow time to trigger the release
+     *  @method  triggerRelease
+     */
+    p5.MonoSynth.prototype.triggerRelease = function (secondsFromNow) {
+      var secondsFromNow = secondsFromNow || 0;
+      this.env.ramp(this.output, secondsFromNow, 0);
+      this._isOn = false;
+    };
+    /**
+     *  Set values like a traditional
+     *  
+     *  ADSR envelope
+     *  .
+     *
+     *  @method  setADSR
+     *  @param {Number} attackTime    Time (in seconds before envelope
+     *                                reaches Attack Level
+     *  @param {Number} [decayTime]    Time (in seconds) before envelope
+     *                                reaches Decay/Sustain Level
+     *  @param {Number} [susRatio]    Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,
+     *                                where 1.0 = attackLevel, 0.0 = releaseLevel.
+     *                                The susRatio determines the decayLevel and the level at which the
+     *                                sustain portion of the envelope will sustain.
+     *                                For example, if attackLevel is 0.4, releaseLevel is 0,
+     *                                and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is
+     *                                increased to 1.0 (using setRange),
+     *                                then decayLevel would increase proportionally, to become 0.5.
+     *  @param {Number} [releaseTime]   Time in seconds from now (defaults to 0)
+     */
+    p5.MonoSynth.prototype.setADSR = function (attack, decay, sustain, release) {
+      this.env.setADSR(attack, decay, sustain, release);
+    };
+    /**
+     * Getters and Setters
+     * @property {Number} attack
+     */
+    /**
+     * @property {Number} decay
+     */
+    /**
+     * @property {Number} sustain
+     */
+    /**
+     * @property {Number} release
+     */
+    Object.defineProperties(p5.MonoSynth.prototype, {
+      'attack': {
+        get: function () {
+          return this.env.aTime;
+        },
+        set: function (attack) {
+          this.env.setADSR(attack, this.env.dTime, this.env.sPercent, this.env.rTime);
+        }
+      },
+      'decay': {
+        get: function () {
+          return this.env.dTime;
+        },
+        set: function (decay) {
+          this.env.setADSR(this.env.aTime, decay, this.env.sPercent, this.env.rTime);
+        }
+      },
+      'sustain': {
+        get: function () {
+          return this.env.sPercent;
+        },
+        set: function (sustain) {
+          this.env.setADSR(this.env.aTime, this.env.dTime, sustain, this.env.rTime);
+        }
+      },
+      'release': {
+        get: function () {
+          return this.env.rTime;
+        },
+        set: function (release) {
+          this.env.setADSR(this.env.aTime, this.env.dTime, this.env.sPercent, release);
+        }
+      }
+    });
+    /**
+     * MonoSynth amp
+     * @method  amp
+     * @param  {Number} vol      desired volume
+     * @param  {Number} [rampTime] Time to reach new volume
+     * @return {Number}          new volume value
+     */
+    p5.MonoSynth.prototype.amp = function (vol, rampTime) {
+      var t = rampTime || 0;
+      if (typeof vol !== 'undefined') {
+        this.oscillator.amp(vol, t);
+      }
+      return this.oscillator.amp().value;
+    };
+    /**
+     *  Connect to a p5.sound / Web Audio object.
+     *
+     *  @method  connect
+     *  @param  {Object} unit A p5.sound or Web Audio object
+     */
+    p5.MonoSynth.prototype.connect = function (unit) {
+      var u = unit || p5sound.input;
+      this.output.connect(u.input ? u.input : u);
+    };
+    /**
+     *  Disconnect all outputs
+     *
+     *  @method  disconnect
+     */
+    p5.MonoSynth.prototype.disconnect = function () {
+      this.output.disconnect();
+    };
+    /**
+     *  Get rid of the MonoSynth and free up its resources / memory.
+     *
+     *  @method  dispose
+     */
+    p5.MonoSynth.prototype.dispose = function () {
+      AudioVoice.prototype.dispose.apply(this);
+      this.filter.dispose();
+      this.env.dispose();
+      try {
+        this.oscillator.dispose();
+      } catch (e) {
+        console.error('mono synth default oscillator already disposed');
+      }
+    };
+  }(master, audioVoice);
+  var polysynth;
+  'use strict';
+  polysynth = function () {
+    var p5sound = master;
+    var TimelineSignal = Tone_signal_TimelineSignal;
+    /**
+    *  An AudioVoice is used as a single voice for sound synthesis.
+    *  The PolySynth class holds an array of AudioVoice, and deals
+    *  with voices allocations, with setting notes to be played, and
+    *  parameters to be set.
+    *
+    *  @class p5.PolySynth
+    *  @constructor
+    *
+    *  @param {Number} [synthVoice]   A monophonic synth voice inheriting
+    *                                 the AudioVoice class. Defaults to p5.MonoSynth
+    *  @param {Number} [polyValue] Number of voices, defaults to 8;
+    *
+    *
+    *  @example
+    *  

+    *  var polysynth;
+    *  function setup() {
+    *    polysynth = new p5.PolySynth();
+    *    polysynth.play(53,1,0,3);
+    *    polysynth.play(60,1,0,2.9);
+    *    polysynth.play(69,1,0,3);
+    *    polysynth.play(71,1,0,3);
+    *    polysynth.play(74,1,0,3);
+    *  }
+    *  

+    *
+    **/
+    p5.PolySynth = function (audioVoice, polyValue) {
+      //audiovoices will contain polyValue many monophonic synths
+      this.audiovoices = [];
+      /**
+       * An object that holds information about which notes have been played and
+       * which notes are currently being played. New notes are added as keys
+       * on the fly. While a note has been attacked, but not released, the value of the
+       * key is the audiovoice which is generating that note. When notes are released,
+       * the value of the key becomes undefined.
+       * @property notes
+       */
+      this.notes = {};
+      //indices of the most recently used, and least recently used audiovoice
+      this._newest = 0;
+      this._oldest = 0;
+      /**
+       * A PolySynth must have at least 1 voice, defaults to 8
+       * @property polyvalue
+       */
+      this.polyValue = polyValue || 8;
+      /**
+       * Monosynth that generates the sound for each note that is triggered. The
+       * p5.PolySynth defaults to using the p5.MonoSynth as its voice.
+       * @property AudioVoice
+       */
+      this.AudioVoice = audioVoice === undefined ? p5.MonoSynth : audioVoice;
+      /**
+         * This value must only change as a note is attacked or released. Due to delay
+         * and sustain times, Tone.TimelineSignal is required to schedule the change in value.
+      * @private
+         * @property {Tone.TimelineSignal} _voicesInUse
+         */
+      this._voicesInUse = new TimelineSignal(0);
+      this.output = p5sound.audiocontext.createGain();
+      this.connect();
+      //Construct the appropriate number of audiovoices
+      this._allocateVoices();
+      p5sound.soundArray.push(this);
+    };
+    /**
+     * Construct the appropriate number of audiovoices
+     * @private
+     * @method  _allocateVoices
+     */
+    p5.PolySynth.prototype._allocateVoices = function () {
+      for (var i = 0; i < this.polyValue; i++) {
+        this.audiovoices.push(new this.AudioVoice());
+        this.audiovoices[i].disconnect();
+        this.audiovoices[i].connect(this.output);
+      }
+    };
+    /**
+     *  Play a note by triggering noteAttack and noteRelease with sustain time
+     *
+     *  @method  play
+     *  @param  {Number} [note] midi note to play (ranging from 0 to 127 - 60 being a middle C)
+     *  @param  {Number} [velocity] velocity of the note to play (ranging from 0 to 1)
+     *  @param  {Number} [secondsFromNow]  time from now (in seconds) at which to play
+     *  @param  {Number} [sustainTime] time to sustain before releasing the envelope
+     */
+    p5.PolySynth.prototype.play = function (note, velocity, secondsFromNow, susTime) {
+      var susTime = susTime || 1;
+      this.noteAttack(note, velocity, secondsFromNow);
+      this.noteRelease(note, secondsFromNow + susTime);
+    };
+    /**
+     *  noteADSR sets the envelope for a specific note that has just been triggered.
+     *  Using this method modifies the envelope of whichever audiovoice is being used
+     *  to play the desired note. The envelope should be reset before noteRelease is called
+     *  in order to prevent the modified envelope from being used on other notes.
+     *
+     *  @method  noteADSR
+     *  @param {Number} [note]        Midi note on which ADSR should be set.
+     *  @param {Number} [attackTime]  Time (in seconds before envelope
+     *                                reaches Attack Level
+     *  @param {Number} [decayTime]   Time (in seconds) before envelope
+     *                                reaches Decay/Sustain Level
+     *  @param {Number} [susRatio]    Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,
+     *                                where 1.0 = attackLevel, 0.0 = releaseLevel.
+     *                                The susRatio determines the decayLevel and the level at which the
+     *                                sustain portion of the envelope will sustain.
+     *                                For example, if attackLevel is 0.4, releaseLevel is 0,
+     *                                and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is
+     *                                increased to 1.0 (using setRange),
+     *                                then decayLevel would increase proportionally, to become 0.5.
+     *  @param {Number} [releaseTime]   Time in seconds from now (defaults to 0)
+     **/
+    p5.PolySynth.prototype.noteADSR = function (note, a, d, s, r, timeFromNow) {
+      var now = p5sound.audiocontext.currentTime;
+      var timeFromNow = timeFromNow || 0;
+      var t = now + timeFromNow;
+      this.audiovoices[this.notes[note].getValueAtTime(t)].setADSR(a, d, s, r);
+    };
+    /**
+     * Set the PolySynths global envelope. This method modifies the envelopes of each
+     * monosynth so that all notes are played with this envelope.
+     *
+     *  @method  setADSR
+     *  @param {Number} [note]        Midi note on which ADSR should be set.
+     *  @param {Number} [attackTime]  Time (in seconds before envelope
+     *                                reaches Attack Level
+     *  @param {Number} [decayTime]   Time (in seconds) before envelope
+     *                                reaches Decay/Sustain Level
+     *  @param {Number} [susRatio]    Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,
+     *                                where 1.0 = attackLevel, 0.0 = releaseLevel.
+     *                                The susRatio determines the decayLevel and the level at which the
+     *                                sustain portion of the envelope will sustain.
+     *                                For example, if attackLevel is 0.4, releaseLevel is 0,
+     *                                and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is
+     *                                increased to 1.0 (using setRange),
+     *                                then decayLevel would increase proportionally, to become 0.5.
+     *  @param {Number} [releaseTime]   Time in seconds from now (defaults to 0)
+     **/
+    p5.PolySynth.prototype.setADSR = function (a, d, s, r) {
+      this.audiovoices.forEach(function (voice) {
+        voice.setADSR(a, d, s, r);
+      });
+    };
+    /**
+     *  Trigger the Attack, and Decay portion of a MonoSynth.
+     *  Similar to holding down a key on a piano, but it will
+     *  hold the sustain level until you let go.
+     *
+     *  @method  noteAttack
+     *  @param  {Number} [note]           midi note on which attack should be triggered.
+     *  @param  {Number} [velocity]       velocity of the note to play (ranging from 0 to 1)/
+     *  @param  {Number} [secondsFromNow] time from now (in seconds)
+     *
+     */
+    p5.PolySynth.prototype.noteAttack = function (_note, _velocity, secondsFromNow) {
+      var now = p5sound.audiocontext.currentTime;
+      //this value goes to the audiovoices which handle their own scheduling
+      var tFromNow = secondsFromNow || 0;
+      //this value is used by this._voicesInUse
+      var t = now + tFromNow;
+      //Convert note to frequency if necessary. This is because entries into this.notes
+      //should be based on frequency for the sake of consistency.
+      var note = typeof _note === 'string' ? this.AudioVoice.prototype._setNote(_note) : typeof _note === 'number' ? _note : 440;
+      var velocity = _velocity === undefined ? 1 : _velocity;
+      var currentVoice;
+      //Release the note if it is already playing
+      if (this.notes[note] !== undefined && this.notes[note].getValueAtTime(t) !== null) {
+        this.noteRelease(note, 0);
+      }
+      //Check to see how many voices are in use at the time the note will start
+      if (this._voicesInUse.getValueAtTime(t) < this.polyValue) {
+        currentVoice = this._voicesInUse.getValueAtTime(t);
+      } else {
+        currentVoice = this._oldest;
+        var oldestNote = p5.prototype.freqToMidi(this.audiovoices[this._oldest].oscillator.freq().value);
+        this.noteRelease(oldestNote);
+        this._oldest = (this._oldest + 1) % (this.polyValue - 1);
+      }
+      //Overrite the entry in the notes object. A note (frequency value)
+      //corresponds to the index of the audiovoice that is playing it
+      this.notes[note] = new TimelineSignal();
+      this.notes[note].setValueAtTime(currentVoice, t);
+      //Find the scheduled change in this._voicesInUse that will be previous to this new note
+      //Add 1 and schedule this value at time 't', when this note will start playing
+      var previousVal = this._voicesInUse._searchBefore(t) === null ? 0 : this._voicesInUse._searchBefore(t).value;
+      this._voicesInUse.setValueAtTime(previousVal + 1, t);
+      //Then update all scheduled values that follow to increase by 1
+      this._updateAfter(t, 1);
+      this._newest = currentVoice;
+      //The audiovoice handles the actual scheduling of the note
+      if (typeof velocity === 'number') {
+        var maxRange = 1 / this._voicesInUse.getValueAtTime(t) * 2;
+        velocity = velocity > maxRange ? maxRange : velocity;
+      }
+      this.audiovoices[currentVoice].triggerAttack(note, velocity, tFromNow);
+    };
+    /**
+     * Private method to ensure accurate values of this._voicesInUse
+     * Any time a new value is scheduled, it is necessary to increment all subsequent
+     * scheduledValues after attack, and decrement all subsequent
+     * scheduledValues after release
+     *
+     * @private
+     * @param  {[type]} time  [description]
+     * @param  {[type]} value [description]
+     * @return {[type]}       [description]
+     */
+    p5.PolySynth.prototype._updateAfter = function (time, value) {
+      if (this._voicesInUse._searchAfter(time) === null) {
+        return;
+      } else {
+        this._voicesInUse._searchAfter(time).value += value;
+        var nextTime = this._voicesInUse._searchAfter(time).time;
+        this._updateAfter(nextTime, value);
+      }
+    };
+    /**
+     *  Trigger the Release of an AudioVoice note. This is similar to releasing
+     *  the key on a piano and letting the sound fade according to the
+     *  release level and release time.
+     *
+     *  @method  noteRelease
+     *  @param  {Number} [note]           midi note on which attack should be triggered.
+     *  @param  {Number} [secondsFromNow] time to trigger the release
+     *
+     */
+    p5.PolySynth.prototype.noteRelease = function (_note, secondsFromNow) {
+      //Make sure note is in frequency inorder to query the this.notes object
+      var note = typeof _note === 'string' ? this.AudioVoice.prototype._setNote(_note) : typeof _note === 'number' ? _note : this.audiovoices[this._newest].oscillator.freq().value;
+      var now = p5sound.audiocontext.currentTime;
+      var tFromNow = secondsFromNow || 0;
+      var t = now + tFromNow;
+      if (this.notes[note].getValueAtTime(t) === null) {
+        console.warn('Cannot release a note that is not already playing');
+      } else {
+        //Find the scheduled change in this._voicesInUse that will be previous to this new note
+        //subtract 1 and schedule this value at time 't', when this note will stop playing
+        var previousVal = this._voicesInUse._searchBefore(t) === null ? 0 : this._voicesInUse._searchBefore(t).value;
+        this._voicesInUse.setValueAtTime(previousVal - 1, t);
+        //Then update all scheduled values that follow to decrease by 1
+        this._updateAfter(t, -1);
+        this.audiovoices[this.notes[note].getValueAtTime(t)].triggerRelease(tFromNow);
+        this.notes[note].setValueAtTime(null, t);
+        this._newest = this._newest === 0 ? 0 : (this._newest - 1) % (this.polyValue - 1);
+      }
+    };
+    /**
+    *  Connect to a p5.sound / Web Audio object.
+    *
+    *  @method  connect
+    *  @param  {Object} unit A p5.sound or Web Audio object
+    */
+    p5.PolySynth.prototype.connect = function (unit) {
+      var u = unit || p5sound.input;
+      this.output.connect(u.input ? u.input : u);
+    };
+    /**
+    *  Disconnect all outputs
+    *
+    *  @method  disconnect
+    */
+    p5.PolySynth.prototype.disconnect = function () {
+      this.output.disconnect();
+    };
+    /**
+    *  Get rid of the MonoSynth and free up its resources / memory.
+    *
+    *  @method  dispose
+    */
+    p5.PolySynth.prototype.dispose = function () {
+      this.audiovoices.forEach(function (voice) {
+        voice.dispose();
+      });
+      this.output.disconnect();
+      delete this.output;
+    };
+  }(master, Tone_signal_TimelineSignal, sndcore);
+  var distortion;
+  'use strict';
+  distortion = function () {
+    var Effect = effect;
+    /*
+     * Adapted from [Kevin Ennis on StackOverflow](http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion)
+     */
+    function makeDistortionCurve(amount) {
+      var k = typeof amount === 'number' ? amount : 50;
+      var numSamples = 44100;
+      var curve = new Float32Array(numSamples);
+      var deg = Math.PI / 180;
+      var i = 0;
+      var x;
+      for (; i < numSamples; ++i) {
+        x = i * 2 / numSamples - 1;
+        curve[i] = (3 + k) * x * 20 * deg / (Math.PI + k * Math.abs(x));
+      }
+      return curve;
+    }
+    /**
+     * A Distortion effect created with a Waveshaper Node,
+     * with an approach adapted from
+     * [Kevin Ennis](http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion)
+     *
+     * This class extends p5.Effect.
+     * Methods amp(), chain(),
+     * drywet(), connect(), and
+     * disconnect() are available.
+     *
+     * @class p5.Distortion
+     * @extends p5.Effect
+     * @constructor
+     * @param {Number} [amount=0.25] Unbounded distortion amount.
+     *                                Normal values range from 0-1.
+     * @param {String} [oversample='none'] 'none', '2x', or '4x'.
+     *
+     */
+    p5.Distortion = function (amount, oversample) {
+      Effect.call(this);
+      if (typeof amount === 'undefined') {
+        amount = 0.25;
+      }
+      if (typeof amount !== 'number') {
+        throw new Error('amount must be a number');
+      }
+      if (typeof oversample === 'undefined') {
+        oversample = '2x';
+      }
+      if (typeof oversample !== 'string') {
+        throw new Error('oversample must be a String');
+      }
+      var curveAmount = p5.prototype.map(amount, 0, 1, 0, 2000);
+      /**
+       *  The p5.Distortion is built with a
+       *  
+       *  Web Audio WaveShaper Node.
+       *
+       *  @property {AudioNode} WaveShaperNode
+       */
+      this.waveShaperNode = this.ac.createWaveShaper();
+      this.amount = curveAmount;
+      this.waveShaperNode.curve = makeDistortionCurve(curveAmount);
+      this.waveShaperNode.oversample = oversample;
+      this.input.connect(this.waveShaperNode);
+      this.waveShaperNode.connect(this.wet);
+    };
+    p5.Distortion.prototype = Object.create(Effect.prototype);
+    /**
+     * Process a sound source, optionally specify amount and oversample values.
+     *
+     * @method process
+     * @param {Number} [amount=0.25] Unbounded distortion amount.
+     *                                Normal values range from 0-1.
+     * @param {String} [oversample='none'] 'none', '2x', or '4x'.
+     */
+    p5.Distortion.prototype.process = function (src, amount, oversample) {
+      src.connect(this.input);
+      this.set(amount, oversample);
+    };
+    /**
+     * Set the amount and oversample of the waveshaper distortion.
+     *
+     * @method set
+     * @param {Number} [amount=0.25] Unbounded distortion amount.
+     *                                Normal values range from 0-1.
+     * @param {String} [oversample='none'] 'none', '2x', or '4x'.
+     */
+    p5.Distortion.prototype.set = function (amount, oversample) {
+      if (amount) {
+        var curveAmount = p5.prototype.map(amount, 0, 1, 0, 2000);
+        this.amount = curveAmount;
+        this.waveShaperNode.curve = makeDistortionCurve(curveAmount);
+      }
+      if (oversample) {
+        this.waveShaperNode.oversample = oversample;
+      }
+    };
+    /**
+     *  Return the distortion amount, typically between 0-1.
+     *
+     *  @method  getAmount
+     *  @return {Number} Unbounded distortion amount.
+     *                   Normal values range from 0-1.
+     */
+    p5.Distortion.prototype.getAmount = function () {
+      return this.amount;
+    };
+    /**
+     *  Return the oversampling.
+     *
+     *  @method getOversample
+     *
+     *  @return {String} Oversample can either be 'none', '2x', or '4x'.
+     */
+    p5.Distortion.prototype.getOversample = function () {
+      return this.waveShaperNode.oversample;
+    };
+    p5.Distortion.prototype.dispose = function () {
+      Effect.prototype.dispose.apply(this);
+      this.waveShaperNode.disconnect();
+      this.waveShaperNode = null;
+    };
+  }(effect);
+  var src_app;
+  'use strict';
+  src_app = function () {
+    var p5SOUND = sndcore;
+    return p5SOUND;
+  }(sndcore, master, helpers, errorHandler, panner, soundfile, amplitude, fft, signal, oscillator, env, pulse, noise, audioin, filter, eq, panner3d, listener3d, delay, reverb, metro, looper, soundloop, compressor, soundRecorder, peakdetect, gain, monosynth, polysynth, distortion, audioVoice, monosynth, polysynth);
+  }));
\ No newline at end of file
diff --git a/pemFioi/p5/player_p5.js b/pemFioi/p5/player_p5.js
new file mode 100644
index 000000000..1a8471e0e
--- /dev/null
+++ b/pemFioi/p5/player_p5.js
@@ -0,0 +1,379 @@
+function PlayerP5(options) {
+
+    var defaults = {
+        parent: document.body,
+        channels: 3,
+        min_frequency: 100,
+        max_frequency: 8000,
+        width: 400,
+        height: 400,
+        visualize_wave: true,
+        visualize_bars: true,
+        visualization_fps: 20,
+        visualization_smoothing: 0.3,
+        visualization_resolution: 64, // Must be a power of two between 16 and 1024.
+        visualization_stroke_color: '#333333',
+        visualization_fill_color: '#990000',
+        filesRepository: null
+    }
+
+    var options = (function() {
+        var res = {}
+        for(var k in defaults) {
+            res[k] = k in options ? options[k] : defaults[k]
+        }
+        return res
+    })()
+
+
+
+    // play waveforms or noise
+    function SignalChannel() {
+
+
+        function createGenerator(type, frequency, amplitude) {
+            var generator;
+            if(type == 'noise') {
+                generator = new p5.Noise('white');
+                generator.freq = function() {}
+            } else {
+                generator = new p5.Oscillator();
+                generator.setType(type);
+            }
+            return generator;
+        }
+
+
+        function realFrequency(frequency, rate) {
+            return Math.min(24000, frequency * rate);
+        }
+
+
+        this.init = function(type, frequency, amplitude) {
+            if(amplitude < 0 || amplitude > 1) {
+                throw new Error('Amplitude is out of range [0..1]');
+            }
+            if(frequency < options.min_frequency || frequency > options.max_frequency) {
+                throw new Error('Frequency is out of range [' + options.min_frequency + '..' + options.max_frequency + ']');
+            }
+            if(type !== this.type) {
+                this.reset();
+                this.generator = createGenerator(type);
+                this.type = type;
+            }
+            if(amplitude !== this.amplitude) {
+                this.generator.amp(amplitude);
+                this.amplitude = amplitude;
+            }
+            this.frequency = frequency;
+        }
+
+
+        this.setRate = function(rate) {
+            if(this.generator && rate > 0) {
+                this.generator.freq(realFrequency(this.frequency, rate));
+            }
+        }
+
+
+        this.play = function() {
+            if(this.playing || !this.generator) return;
+            this.generator.start();
+            this.playing = true;
+        }
+
+
+        this.pause = function() {
+            this.generator && this.generator.stop();
+            this.playing = false;
+        }
+
+
+        this.reset = function() {
+            this.playing = false;
+            this.generator && this.generator.stop();
+            this.generator = null;
+            this.type = null;
+            this.frequency = null;
+            this.amplitude = null;
+        }
+
+        this.reset();
+    }
+
+
+
+    // play file
+    function FileChannel() {
+
+        this.init = function(url, frequency, onLoadEnd, onLoadError, onLoadProgress) {
+            if(frequency < options.min_frequency || frequency > options.max_frequency) {
+                throw new Error('Frequency is out of range [' + options.min_frequency + '..' + options.max_frequency + ']');
+            }
+            if(url !== this.url) {
+                if(!url) {
+                    throw new Error('Wrong file param');
+                }                
+                this.reset();
+                this.url = url;
+                this.file = new p5.SoundFile(
+                    options.filesRepository.getFile(url),
+                    onLoadEnd,
+                    onLoadError,
+                    onLoadProgress
+                );
+                this.file.disconnect();
+                this.filter = new p5.LowPass()
+                this.filter.freq(frequency);
+                this.frequency = frequency;
+                this.file.connect(this.filter);
+                this.file.playMode('restart');
+            } else {
+                if(frequency !== this.frequency) {
+                    this.filter.freq(frequency);
+                    this.frequency = frequency;
+                }
+                onLoadEnd();
+            }
+        }
+
+
+        this.play = function() {
+            if(this.playing || !this.file) return;
+            this.playing = true;
+            this.file.play();
+        }
+
+
+        this.setRate = function(rate) {
+            if(!this.file || !rate) return;
+            this.file.rate(rate);
+        }
+
+
+        this.pause = function() {
+            this.playing = false;
+            this.file && this.file.pause();
+        }
+
+
+        this.reset = function() {
+            this.file && this.file.stop();
+            this.playing = false;
+            this.url = null;
+            this.frequency = null;
+            this.file = null;
+            this.filter = null;
+        }
+
+        this.reset();
+    }
+
+
+
+
+
+
+
+
+    function Visualizator() {
+
+        var canvas = document.createElement('canvas');
+        canvas.width = options.width;
+        canvas.height = options.height;
+        options.parent.appendChild(canvas);
+
+        var context = canvas.getContext('2d');
+        context.strokeStyle = options.visualization_stroke_color;
+
+        var fft = new p5.FFT(options.visualization_smoothing, options.visualization_resolution);
+
+        var microphone = null;
+        var microphone_enabled = false;
+        var playback_render = false;
+
+
+        function getFFT() {
+            return !playback_render && microphone_fft ? microphone_fft : fft;
+        }
+
+        // waveform
+        function renderWave(y, height) {
+            var waveform = fft.waveform();
+            var dx = Math.round(options.width / waveform.length);
+            var wave_amp = height * 0.5;
+            var wave_y = y + wave_amp;
+
+            function dy(i) {
+                return wave_y + wave_amp * waveform[i];
+            }
+            context.beginPath();
+            context.moveTo(0, dy(0))
+            for(var i=1; i options.channels) {
+            throw new Error('Channel is out of range [1..' + options.channels + ']');
+        }
+        channels[channel].init(type, frequency, amplitude);
+    }
+
+
+    this.initRecord = function(url, frequency, onLoadProgress, onLoadEnd) {
+        channels[channels.length - 1].init(url, frequency, onLoadProgress, onLoadEnd);
+    }
+
+
+    this.setRate = function(rate) {
+        for(var i=0, channel; channel=channels[i]; i++) {
+            channel.setRate(rate);
+        }
+    }
+
+
+    this.play = function() {
+        visualizator.start();
+        for(var i=0, channel; channel=channels[i]; i++) {
+            channel.play();
+        }
+    }
+
+
+    this.pause = function() {
+        visualizator.stop();
+        for(var i=0, channel; channel=channels[i]; i++) {
+            channel.pause();
+        }
+    }
+
+
+    this.toggleMicrophone = function(enabled) {
+        visualizator.toggleMicrophone(enabled);
+    }
+
+
+    this.resetChannels = function() {
+        for(var i=0, channel; channel=channels[i]; i++) {
+            channel.reset();
+        }
+    }
+
+
+    this.destroy = function() {
+        this.resetChannels();
+        channels = null;
+        visualizator.destroy();
+        visualizator = null;
+    }
+
+}
\ No newline at end of file
diff --git a/pemFioi/post_processor.js b/pemFioi/post_processor.js
new file mode 100644
index 000000000..1d3a2aec0
--- /dev/null
+++ b/pemFioi/post_processor.js
@@ -0,0 +1,26 @@
+// markdown & mathjax
+(function() {
+    function markdown() {
+        if(!window.showdown) return;
+        var showdownConverter = new showdown.Converter({
+            headerLevelStart: 3,
+            backslashEscapesHTMLTags: true
+        });
+        $('.markdown').each(function() {
+            var newDiv = $('
'), el = $(this);
+            newDiv.html(showdownConverter.makeHtml(el.html()));
+            newDiv.addClass('markdown-translated');
+            newDiv.insertAfter(el);
+            el.remove();
+        });
+    }
+
+    if(window.MathJax) {
+        MathJax.Hub.Config({
+            tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
+        });
+        MathJax.Hub.Queue(markdown);
+    } else {
+        $(document).ready(markdown);
+    }
+})()
\ No newline at end of file
diff --git a/pemFioi/progTaskConfig-1.0.js b/pemFioi/progTaskConfig-1.0.js
index 35ee43110..e35755055 100644
--- a/pemFioi/progTaskConfig-1.0.js
+++ b/pemFioi/progTaskConfig-1.0.js
@@ -18,6 +18,7 @@ requirejs.config({
     "miniPlatform": modulesPath+"/integrationAPI.01/official/miniPlatform",
     "models": taskPlatformPath+"/shared/models",
     "modelsManager": modulesPath+"/pemFioi/modelsManager-1.0",
+    "get-locale": taskPlatformPath+"/get-locale",
     "jschannel": modulesPath+"/ext/jschannel/jschannel",
     "fioi-task-tools": modulesPath+"/pemFioi/fioi-task-tools",
     "installationToModel": modulesPath+"/pemFioi/installationToModel-1.0",
@@ -49,7 +50,7 @@ requirejs.config({
     "platform-pr": {"deps": ["jquery", "jschannel"]},
     "angular-sanitize": {"deps": ["angular"]},
     "ng-i18next": {"deps": ["angular-sanitize", "i18next", "i18next-xhr-backend"]},
-    "taskController": {"deps": ["angular-ui-ace", 'ng-i18next', 'lodash']},
+    "taskController": {"deps": ["angular-ui-ace", 'ng-i18next', 'lodash', "get-locale"]},
     "pem-api": {"deps": ["taskController", "platform-pr","angular-ui-ace", 'lodash']},
     "limitsDirective": {"deps": ["taskController", "angular-ui-ace", 'lodash']},
     "hintsDirective": {"deps": ["taskController", "angular-ui-ace", 'lodash']},
diff --git a/pemFioi/pythonCount-1.0.js b/pemFioi/pythonCount-1.0.js
index a166cb960..de08d3a65 100644
--- a/pemFioi/pythonCount-1.0.js
+++ b/pemFioi/pythonCount-1.0.js
@@ -1,6 +1,6 @@
-// TODO :: move to code-editor
+// TODO :: move to quickAlgo
 
-/* 
+/*
 pythonCount:
    returns number of Blockly blocks corresponding to some Python code.
 
@@ -16,14 +16,16 @@ var pythonCountPatterns = [
    {pattern: /^from\s+\w+\s+import\s+[^\n\r]/, block: false}, // from robot import *
    {pattern: /^import\s+[^\n\r]+/, block: false}, // import x, y, z
    {pattern: /^for\s+\w+\s+in\s+range/, block: false}, // for i in range(5): is only one block; it's a bit tricky
+   {pattern: /^def\s[^:]+:/, block: true}, // for i in range(5): is only one block; it's a bit tricky
 
+   {pattern: /^\d+\.\d*/, block: true},
    {pattern: /^\w+/, block: true},
 
    // Strings
-   {pattern: /^'''(?:[^\\']|\\.|'[^']|'[^'])+'''/, block: true},
-   {pattern: /^'(?:[^\\']|\\.)+'/, block: true},
-   {pattern: /^"""(?:[^\\"]|\\.|"[^"]|""[^"])+"""/, block: true},
-   {pattern: /^"(?:[^\\"]|\\.)+"/, block: true},
+   {pattern: /^'''(?:[^\\']|\\.|'[^']|'[^'])*'''/, block: true},
+   {pattern: /^'(?:[^\\']|\\.)*'/, block: true},
+   {pattern: /^"""(?:[^\\"]|\\.|"[^"]|""[^"])*"""/, block: true},
+   {pattern: /^"(?:[^\\"]|\\.)*"/, block: true},
 
    // Operators
    {pattern: /^[+*\/%=!<>&|^~]+/, block: true},
@@ -55,8 +57,15 @@ function pythonCount(text) {
 }
 
 var pythonForbiddenBlocks = {
-   'logic': {
+    'dicts': {
+      'dicts_create_with': ['dict_brackets'],
+      'dict_get_literal': ['dict_brackets'],
+      'dict_set_literal': ['dict_brackets'],
+      'dict_keys': ['dict_brackets']
+    },
+    'logic': {
       'controls_if': ['if', 'else', 'elif'],
+      'controls_if_else': ['if', 'else', 'elif'],
       'logic_negate': ['not'],
       'logic_operation': ['and', 'or']
     },
@@ -66,39 +75,54 @@ var pythonForbiddenBlocks = {
       'controls_for': ['for'],
       'controls_forEach': ['for'],
       'controls_whileUntil': ['while'],
-      'controls_untilWhile': ['while']
+      'controls_untilWhile': ['while'],
+      'controls_infiniteloop': ['while']
     },
     'lists': {
-      'lists_create_with_empty': ['list', 'set', 'list_brackets'],
-      'lists_create_with': ['list', 'set', 'list_brackets'],
-      'lists_repeat' : ['list', 'set', 'list_brackets'],
-      'lists_length' : ['list', 'set', 'list_brackets'],
-      'lists_isEmpty' : ['list', 'set', 'list_brackets'],
-      'lists_indexOf' : ['list', 'set', 'list_brackets'],
-      'lists_getIndex': ['list', 'set', 'list_brackets'],
-      'lists_setIndex': ['list', 'set', 'list_brackets'],
-      'lists_getSublist': ['list', 'set', 'list_brackets'],
-      'lists_sort' : ['list', 'set', 'list_brackets'],
-      'lists_split' : ['list', 'set', 'list_brackets'],
-      'lists_append': ['list', 'set', 'list_brackets']
+      'lists_create_with_empty': ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_create_with': ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_repeat' : ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_length' : ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_isEmpty' : ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_indexOf' : ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_getIndex': ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_setIndex': ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_getSublist': ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_sort' : ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_split' : ['list', 'set', 'list_brackets', '__getitem__', '__setitem__'],
+      'lists_append': ['list', 'set', 'list_brackets', '__getitem__', '__setitem__']
+    },
+    'maths': {
+      'math_number': ['math_number']
     },
     'functions': {
-      'procedures_defnoreturn': ['def'],
-      'procedures_defreturn': ['def']
+      'procedures_defnoreturn': ['def', 'lambda'],
+      'procedures_defreturn': ['def', 'lambda']
+    },
+    'variables': {
+      'variables_set': ['var_assign']
     }
 };
 
 function pythonForbiddenLists(includeBlocks) {
    // Check for forbidden keywords in code
-   var forbidden = ['for', 'while', 'if', 'else', 'elif', 'not', 'and', 'or', 'list', 'set', 'list_brackets', 'dict_brackets', 'def', 'break', 'continue'];
+   var forbidden = ['for', 'while', 'if', 'else', 'elif', 'not', 'and', 'or', 'list', 'set', 'list_brackets', 'dict_brackets', '__getitem__', '__setitem__', 'var_assign', 'def', 'lambda', 'break', 'continue', 'setattr', 'map', 'split'];
    var allowed = []
 
    if(!includeBlocks) {
      return {forbidden: forbidden, allowed: allowed};
    }
 
+   var forced = includeBlocks.pythonForceForbidden ? includeBlocks.pythonForceForbidden : [];
+   for(var k=0; k= 0) {
             forbidden.splice(idx, 1);
@@ -107,7 +131,20 @@ function pythonForbiddenLists(includeBlocks) {
       }
    };
 
-   if(includeBlocks && includeBlocks.standardBlocks && !includeBlocks.standardBlocks.includeAll) {
+   var pfa = includeBlocks.pythonForceAllowed ? includeBlocks.pythonForceAllowed : [];
+   removeForbidden(pfa);
+   for(var k=0; k]=[^=!<>]/;
+         if(re.exec(code)) {
+            // Forbidden keyword found
+            return '= (assignation de variable)'; // TODO :: i18n ?
+         }
+      } else if(forbidden[i] == 'def_args') {
+         var re = /def\s*\w+\([^\s]+\)/;
+         if(re.exec(code)) {
+            // Forbidden keyword found
+            return 'fonction avec arguments'; // TODO :: i18n ?
+         }
+      } else if(forbidden[i] != 'strings') {
          var re = new RegExp('(^|\\W)'+forbidden[i]+'(\\W|$)');
          if(re.exec(code)) {
             // Forbidden keyword found
@@ -180,3 +267,82 @@ function pythonForbidden(code, includeBlocks) {
    // No forbidden keyword found
    return false;
 }
+
+function pythonFindLimited(code, limitedUses, blockToCode) {
+   if(!code || !limitedUses) { return false; }
+   var limitedPointers = {};
+   var usesCount = {};
+   for(var i=0; i < limitedUses.length; i++) {
+      var curLimit = limitedUses[i];
+      var pythonKeys = [];
+      for(var b=0; b= 0) { continue; }
+            pythonKeys.push(blockToCode[blockName]);
+         }
+         for(var categoryName in pythonForbiddenBlocks) {
+            var targetKeys = pythonForbiddenBlocks[categoryName][blockName];
+            if(!targetKeys) { continue; }
+            for(var j=0; j < targetKeys.length; j++) {
+               var pyKey = pythonForbiddenBlocks[categoryName][blockName][j];
+               if(pythonKeys.indexOf(pyKey) >= 0) { continue; }
+               pythonKeys.push(pyKey);
+            }
+         }
+      }
+
+      for(var j=0; j < pythonKeys.length; j++) {
+          var pyKey = pythonKeys[j];
+          if(!limitedPointers[pyKey]) {
+              limitedPointers[pyKey] = [];
+          }
+          limitedPointers[pyKey].push(i);
+      }
+   }
+
+   for(var pyKey in limitedPointers) {
+      // Keys to ignore
+      if(pyKey == 'else') {
+         continue;
+      }
+      // Special keys
+      if(pyKey == 'list_brackets') {
+         var re = /[\[\]]/g;
+      } else if(pyKey == 'dict_brackets') {
+         var re = /[\{\}]/g;
+      } else if(pyKey == 'math_number') {
+         var re = /\W\d+(\.\d*)?/g;
+      } else {
+         // Check for assign statements
+         var re = new RegExp('=\\W*'+pyKey+'([^(]|$)');
+         if(re.exec(code)) {
+            return {type: 'assign', name: pyKey};
+         }
+
+         var re = new RegExp('(^|\\W)'+pyKey+'(\\W|$)', 'g');
+      }
+      var count = (code.match(re) || []).length;
+
+      for(var i = 0; i < limitedPointers[pyKey].length; i++) {
+         var pointer = limitedPointers[pyKey][i];
+         if(!usesCount[pointer]) { usesCount[pointer] = 0; }
+         usesCount[pointer] += count;
+         if(usesCount[pointer] > limitedUses[pointer].nbUses) {
+            // TODO :: i18n ?
+            if(pyKey == 'list_brackets') {
+               var name = 'crochets [ ]';
+            } else if(pyKey == 'dict_brackets') {
+               var name = 'accolades { }';
+            } else if(pyKey == 'math_number') {
+               var name = 'nombres';
+            } else {
+               var name = pyKey;
+            }
+            return {type: 'uses', name: name};
+         }
+      }
+   }
+
+   return false;
+}
diff --git a/pemFioi/quickAlgo/README.md b/pemFioi/quickAlgo/README.md
new file mode 100644
index 000000000..13d42028c
--- /dev/null
+++ b/pemFioi/quickAlgo/README.md
@@ -0,0 +1,233 @@
+# quickAlgo
+
+quickAlgo is a type of bebras task that lets users code a program in Blockly,
+Scratch or Python, to solve interactive problems such as moving a Robot
+collecting and dropping objects. The interface executes the code browser-side,
+displays the current status of the task being solved during the execution, and
+the end result.
+
+It supports configuring the blocks / functions available, step-by-step
+execution while highlighting the current block / instruction, and a plethora of
+options to configure its behavior. It can also be used as a library for Blockly
+or Scratch edition and translation into Python ;
+[TaskPlatform](https://github.com/France-ioi/TaskPlatform) and its editor
+[fioi-editor2](https://github.com/France-ioi/fioi-editor2) use it for Blockly
+and Scratch edition.
+
+
+## task.js options
+
+A typical task will use a task.js defining the options and data for the task.
+
+**This documentation is still being written.**
+
+### Level-specific options
+
+Each option can be directly the corresponding value, or an object with a key
+for each difficulty of the task (basic, easy, medium, hard), for instance,
+`maxInstructions` can be defined as :
+```
+maxInstructions: 20
+maxInstructions: { easy: 20, medium: 30, hard: 40 }
+```
+
+In the second case, `maxInstructions` will be 20 for the easy level, 30 for the
+medium one, and 40 for the hard one.
+
+Options which are an object or an array can also have a `shared` key when set
+as level-specific options, for instance :
+```
+hideControls: {
+   easy: {nextStep: true, goToEnd: true},
+   shared: {speedSlider: true}
+}
+```
+
+The keys or array items from the `shared` key will be added to the value defined
+for each level.
+
+### gridInfos options
+
+#### example and startingExample
+
+Type : object
+
+These two objects allow to specify a snippet of code to be either used as the
+starting blocks (startingExample), or as an example to be inserted when the
+user clicks on the "Insert example" button (example).
+
+The possible keys for these objects are each of the languages supported by
+quickAlgo.
+
+For example :
+```
+startingExample: {
+    easy: {
+        blockly: '',
+        python: "from robot import *\nbas()\ndroite()\n"
+    }
+}
+```
+
+#### hasTestThumbnails
+
+**DEPRECATED** : this option will be removed soon.
+
+Type : boolean
+
+Enables displaying test thumbnails in the test selector. The thumbnails must be
+present in the folder, and the filename must be `test_[level]_[number].png`, for
+example `testEasy1.png`.
+
+#### hideControls
+
+Type : object
+
+Allows to hide some controls from the user. Set a key to `true` to hide it.
+(Partly supported in the old interface, fully supported in the mobileFirst
+interface.)
+
+Possible keys (all booleans) :
+
+* `restart` : Hides the "restart" button
+* `saveOrLoad` : Hides the program save and load buttons
+* `loadBestAnswer` : Hides the "load your best answer" button
+* `speedSlider` : Hides the speed slider
+* `backToFirst` : Hides the `|<<` "back to first" button
+* `nextStep` : Hides the `>|` step button
+* `goToEnd` : Hides the `>|` "go to end" button
+
+#### introMaxHeight
+
+Type : string, default `"33%"`
+
+Max height the task intro can take in the "desktop" layout of the responsive
+interface.
+
+#### includeBlocks
+
+Type : object
+
+Defines which Blockly blocks are allowed for the task. This will be
+automatically translated into blocks for Scratch and authorized syntax for
+Python.
+
+Check section below for more information.
+
+#### maxListSize
+
+Type : int, default 100
+
+Maximum allowed list size (only supported in Blockly and Scratch).
+
+#### scrollbars
+
+Type : boolean, default `true`
+
+Displays scrollbars (only supported in Blockly and Scratch).
+
+#### zoom
+
+Type : object
+
+Allow to add zoom controls or change the default zoom (only supported in
+Blockly and Scratch).
+
+Possible keys :
+
+* `controls` (boolean, default `false`) : display zoom buttons
+* `scale` (float, default `1`, or `1.1` if `maxInstructions <= 20`) : zoom
+scale as a multiplier (`1` is the normal scale)
+
+For example:
+```
+zoom: {
+   controls: true,
+   scale: 0.5
+},
+```
+
+### includeBlocks options
+
+Full example of `includeBlocks` :
+
+```
+includeBlocks: {
+   generatedBlocks: {
+      robot: ["south", "east", "west"]
+   },
+   standardBlocks: {
+      includeAll: false,
+      blockSets: ['textBasic'],
+      wholeCategories: ['logic'],
+      singleBlocks: ['lists_repeat', 'lists_getIndex', 'lists_setIndex'],
+      excludedBlocks: ['text_print']
+   },
+   groupByCategory: true,
+   variables: ['index'],
+   variablesOnlyBlocks: ['get', 'incr']
+}
+```
+
+#### generatedBlocks
+
+Type : object
+
+Selects blocks from the currently loaded context / library.
+
+Each key of the object must be a category of blocks from the loaded context, and contain the list of blocks which are allowed from this context.
+
+Example : `{robot: ["south", "east", "west"]}`
+
+#### standardBlocks
+
+Type : object
+
+Selects blocks from the standard Blockly blocks.
+
+Possible keys :
+* `includeAll` (boolean, default `false`) : allow the user to use almost any block. If enabled, this mode gives the user access to coherent set of blocks that should allow to program anything ; all restrictions are disabled.
+* `blockSets` (array of strings) : include block sets. Block sets are shortcuts to a combination of `wholeCategories`, `singleBlocks` and `excludedBlocks` that behave the same as if these were set in `includeBlocks`.
+* `wholeCategories` (array of strings) : include a whole category.
+* `singleBlocks` (array of strings) : include single blocks.
+* `excludedBlocks` (array of strings) : exclude blocks, even if they were included through `blockSets`, `wholeCategories` or `singleBlocks`. This is ignored if `includeAll` is `true`.
+
+Note about `includeAll` and `wholeCategories` : some blocks are excluded by default as to not clutter the list, but can be added manually through `singleBlocks`.
+
+Example :
+```
+{
+   includeAll: false,
+   blockSets: ['textBasic'],
+   wholeCategories: ['logic'],
+   singleBlocks: ['lists_repeat', 'lists_getIndex', 'lists_setIndex'],
+   excludedBlocks: ['text_print']
+}
+```
+
+#### groupByCategory
+
+Type : boolean, default `false`
+
+Displays blocks grouped by category. Mandatory if variables or procedures are allowed.
+
+#### variables
+
+Type : list
+
+Preset a list of variables which will be available to the user. If `'*'` is
+present in this list, or if the category `variables` is allowed through
+`includeBlocks.standardBlocks.wholeCategories`, the user will be able to create
+new variables as well.
+
+#### variablesOnlyBlocks
+
+Type : list, default all allowed
+
+Lists the variable operation blocks to allow among :
+
+* `get` : get the value of a variable
+* `set` : set the value of a variable
+* `incr` : increment the value of a variable by a value
+
+Example : `["get", "set"]`
diff --git a/pemFioi/quickAlgo/blockly_blocks.js b/pemFioi/quickAlgo/blockly_blocks.js
index a1be9bbc7..a1fe457fe 100644
--- a/pemFioi/quickAlgo/blockly_blocks.js
+++ b/pemFioi/quickAlgo/blockly_blocks.js
@@ -3,11 +3,24 @@
         Block generation and configuration logic for the Blockly mode
 */
 
+// Sets of blocks
+var blocklySets = {
+   allDefault: {
+      wholeCategories: ["input", "logic", "loops", "math", "texts", "lists", "dicts", "tables", "variables", "functions"]
+      },
+   allJls: {
+      wholeCategories: ["input", "logic", "loops", "math", "texts", "lists", "dicts", "tables", "variables", "functions"],
+      excludedBlocks: ['text_eval', 'text_print', 'text_print_noend']
+      }
+   };
+
+
 // Blockly to Scratch translations
 var blocklyToScratch = {
    singleBlocks: {
       'controls_if': ['control_if'],
       'controls_if_else': ['control_if_else'],
+      'controls_infiniteloop': ['control_forever'],
       'controls_repeat': ['control_repeat'],
       'controls_repeat_ext': ['control_repeat'],
       'controls_whileUntil': ['control_repeat_until'],
@@ -18,22 +31,209 @@ var blocklyToScratch = {
       'lists_setIndex': ['data_replaceitemoflist'],
       'logic_negate': ['operator_not'],
       'logic_boolean': [],
-      'logic_compare': ['operator_equals', 'operator_gt', 'operator_lt'],
+      'logic_compare': ['operator_equals', 'operator_gt', 'operator_gte', 'operator_lt', 'operator_lte', 'operator_not'],
       'logic_operation': ['operator_and', 'operator_or'],
+      'text': [],
+      'text_append': [],
       'text_join': ['operator_join'],
-      'math_arithmetic': ['operator_add', 'operator_subtract', 'operator_multiply', 'operator_divide'],
+      'math_arithmetic': ['operator_add', 'operator_subtract', 'operator_multiply', 'operator_divide', 'operator_dividefloor'],
       'math_change': ['data_changevariableby'],
-      'math_number': [],
+      'math_number': ['math_number'],
       'variables_get': ['data_variable'],
       'variables_set': ['data_setvariableto']
-    }
+   },
+   wholeCategories: {
+      'loops': 'control',
+      'logic': 'operator',
+      'math': 'operator'
+   }
 };
 
+// Allowed blocks that make another block allowed as well
+var blocklyAllowedSiblings = {
+   'controls_repeat_ext_noShadow': ['controls_repeat_ext'],
+   'controls_whileUntil': ['controls_untilWhile'],
+   'controls_untilWhile': ['controls_whileUntil'],
+   'controls_if_else': ['controls_if'],
+   'lists_create_with_empty': ['lists_create_with']
+}
+
+
 function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
    // TODO :: completely split the logic so it can be a separate object
 
    return {
       allBlocksAllowed: [],
+
+      addBlocksAllowed: function(blocks) {
+         for(var i=0; i < blocks.length; i++) {
+            var name = blocks[i];
+            if(arrayContains(this.allBlocksAllowed, name)) { continue; }
+            this.allBlocksAllowed.push(name);
+            if(blocklyAllowedSiblings[name]) {
+               this.addBlocksAllowed(blocklyAllowedSiblings[name]);
+            }
+         }
+      },
+
+      getBlocksAllowed: function() {
+         return this.scratchMode ? this.blocksToScratch(this.allBlocksAllowed) : this.allBlocksAllowed;
+      },
+
+      getBlockLabel: function(type, addQuotes) {
+         // Fetch user-friendly name for the block
+         // TODO :: Names for Blockly/Scratch blocks
+
+         if(typeof type != 'string' && type.length > 1) {
+            var res = [];
+            for(var i = 0; i < type.length; i++) {
+               res.push(this.getBlockLabel(type[i], addQuotes));
+            }
+            return res.join(', ');
+         }
+
+         var msg = this.mainContext.strings.label[type];
+         msg = msg ? msg : type;
+         msg = msg.replace(/%\d/g, '_');
+         if(addQuotes) {
+            msg = '"' + msg + '"';
+         }
+         return msg;
+      },
+
+      checkConstraints: function(workspace) {
+         // Check we satisfy constraints
+         return this.getRemainingCapacity(workspace) >= 0 && !this.findLimited(workspace);
+      },
+
+      normalizeType: function(type) {
+         // Clean up type
+         var res = type;
+         if(res.substr(res.length - 9) == '_noShadow') {
+            res = res.substr(0, res.length - 9);
+         }
+         return res;
+      },
+
+      makeLimitedUsesPointers: function() {
+         // Make the list of pointers for each block to the limitedUses it
+         // appears in
+         if(this.limitedPointers && this.limitedPointers.limitedUses === this.mainContext.infos.limitedUses) { return; }
+         this.limitedPointers = {
+            // Keep in memory the limitedUses these limitedPointers were made for
+            limitedUses: this.mainContext.infos.limitedUses
+            };
+         for(var i=0; i < this.mainContext.infos.limitedUses.length; i++) {
+            var curLimit = this.mainContext.infos.limitedUses[i];
+            if(this.scratchMode) {
+                // Convert block list to Scratch
+                var blocks = [];
+                for(var j=0; j < curLimit.blocks.length; j++) {
+                    var curBlock = curLimit.blocks[j];
+                    var convBlockList = blocklyToScratch.singleBlocks[curBlock];
+                    if(convBlockList) {
+                        for(var k=0; k < convBlockList.length; k++) {
+                            addInSet(blocks, this.normalizeType(convBlockList[k]));
+                        }
+                    } else {
+                        addInSet(blocks, this.normalizeType(curBlock));
+                    }
+                }
+            } else {
+                var blocks = curLimit.blocks;
+            }
+
+            for(var j=0; j < blocks.length; j++) {
+                var block = blocks[j];
+                if(!this.limitedPointers[block]) {
+                    this.limitedPointers[block] = [];
+                }
+                this.limitedPointers[block].push(i);
+            }
+         }
+      },
+
+      findLimited: function(workspace) {
+         // Check we don't use blocks with limited uses too much
+         // Returns false if there's none, else the name of the first block
+         // found which is over the limit
+         if(!this.mainContext.infos || !this.mainContext.infos.limitedUses) { return false; }
+         this.makeLimitedUsesPointers();
+
+         var workspaceBlocks = workspace.getAllBlocks();
+         var usesCount = {};
+
+         for(var i = 0; i < workspaceBlocks.length; i++) {
+            var blockType = workspaceBlocks[i].type;
+            blockType = this.normalizeType(blockType);
+            if(!this.limitedPointers[blockType]) { continue; }
+            for(var j = 0; j < this.limitedPointers[blockType].length; j++) {
+                // Each pointer is a position in the limitedUses array that
+                // this block appears in
+                var pointer = this.limitedPointers[blockType][j];
+                if(!usesCount[pointer]) { usesCount[pointer] = 0; }
+                usesCount[pointer]++;
+
+                // Exceeded the number of uses
+                var limits = this.mainContext.infos.limitedUses[pointer];
+                if(usesCount[pointer] > limits.nbUses) {
+                    return limits.blocks;
+                }
+            }
+         }
+
+         // All blocks are under the use limit
+         return false;
+      },
+
+      getRemainingCapacity: function(workspace) {
+         // Get the number of blocks allowed
+         if(!this.maxBlocks) { return Infinity; }
+         var remaining = workspace.remainingCapacity(this.maxBlocks+1);
+         if(this.maxBlocks && remaining == Infinity) {
+            // Blockly won't return anything as we didn't set a limit
+            remaining = this.maxBlocks+1 - workspace.getAllBlocks().length;
+         }
+         return remaining;
+      },
+
+      isEmpty: function(workspace) {
+         // Check if workspace is empty
+         if(!workspace) { workspace = this.workspace; }
+         var blocks = workspace.getAllBlocks();
+         if(blocks.length == 1) {
+            return blocks[0].type == 'robot_start';
+         } else {
+            return blocks.length == 0;
+         }
+      },
+
+      getAllCodes: function(answer) {
+         // Generate codes for each node
+         var codes = [];
+         for (var iNode = 0; iNode < this.mainContext.nbNodes; iNode++) {
+            if(this.mainContext.codeIdForNode) {
+               var iCode = this.mainContext.codeIdForNode(iNode);
+            } else {
+               var iCode = Math.min(iNode, this.mainContext.nbCodes-1);
+            }
+            var language = this.languages[iCode];
+            if (language == "blockly") {
+               language = "blocklyJS";
+            }
+            if(answer) {
+               // Generate codes for specified answer
+               var code = this.getCodeFromXml(answer[iCode].blockly, "javascript");
+               codes[iNode] = this.getFullCode(code);
+            } else {
+               // Generate codes for current program
+               codes[iNode] = this.getFullCode(this.programs[iCode][language]);
+            }
+         }
+
+         return codes;
+      },
+
       getCodeFromXml: function(xmlText, language) {
          try {
            var xml = Blockly.Xml.textToDom(xmlText)
@@ -60,11 +260,11 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          return code;
       },
 
-      getCode: function(language, codeWorkspace) {
+      getCode: function(language, codeWorkspace, noReportValue) {
          if (codeWorkspace == undefined) {
             codeWorkspace = this.workspace;
          }
-         if(codeWorkspace.remainingCapacity(this.maxBlocks) < 0) {
+         if(!this.checkConstraints(codeWorkspace)) {
             // Safeguard: avoid generating code when we use too many blocks
             return 'throw "'+this.strings.tooManyBlocks+'";';
          }
@@ -78,6 +278,11 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          }
          languageObj.init(codeWorkspace);
 
+         var oldReportValues = this.reportValues;
+         if(noReportValue) {
+            this.reportValues = false;
+         }
+
          var code = [];
          var comments = [];
          for (var b = 0; b < blocks.length; b++) {
@@ -99,9 +304,19 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          var code = code.join("\n");
          code += "\n";
          code += comments.join("\n");
+
+         this.reportValues = oldReportValues;
+
          return code;
       },
 
+      getPyfeCode: function() {
+         var that = this;
+         return Blockly.Python.blocksToCommentedCode(function() {
+            return that.getCode('python');
+            });
+      },
+
       completeBlockHandler: function(block, objectName, context) {
          if (typeof block.handler == "undefined") {
             block.handler = context[objectName][block.name];
@@ -134,19 +349,29 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
             if (block.yieldsValue) {
                block.blocklyJson.output = null;
                if(this.scratchMode) {
-                   block.blocklyJson.outputShape = Blockly.OUTPUT_SHAPE_HEXAGONAL;
-                   block.blocklyJson.colour = Blockly.Colours.sensing.primary;
-                   block.blocklyJson.colourSecondary = Blockly.Colours.sensing.secondary;
-                   block.blocklyJson.colourTertiary = Blockly.Colours.sensing.tertiary;
+                   if(block.yieldsValue == 'int') {
+                       block.blocklyJson.outputShape = Blockly.OUTPUT_SHAPE_ROUND;
+                   } else {
+                       block.blocklyJson.outputShape = Blockly.OUTPUT_SHAPE_HEXAGONAL;
+                   }
+
+                   if(typeof block.blocklyJson.colour == "undefined") {
+                      block.blocklyJson.colour = Blockly.Colours.sensing.primary;
+                      block.blocklyJson.colourSecondary = Blockly.Colours.sensing.secondary;
+                      block.blocklyJson.colourTertiary = Blockly.Colours.sensing.tertiary;
+                   }
                }
             }
             else {
                block.blocklyJson.previousStatement = null;
                block.blocklyJson.nextStatement = null;
+
                if(this.scratchMode) {
-                   block.blocklyJson.colour = Blockly.Colours.motion.primary;
-                   block.blocklyJson.colourSecondary = Blockly.Colours.motion.secondary;
-                   block.blocklyJson.colourTertiary = Blockly.Colours.motion.tertiary;
+                   if(typeof block.blocklyJson.colour == "undefined") {
+                      block.blocklyJson.colour = Blockly.Colours.motion.primary;
+                      block.blocklyJson.colourSecondary = Blockly.Colours.motion.secondary;
+                      block.blocklyJson.colourTertiary = Blockly.Colours.motion.tertiary;
+                   }
                }
             }
          }
@@ -172,7 +397,7 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          // Add message string
          if (typeof block.blocklyJson.message0 == "undefined") {
             block.blocklyJson.message0 = context.strings.label[block.name];
-
+// TODO: Load default colours + custom styles
             if (typeof block.blocklyJson.message0 == "undefined") {
                block.blocklyJson.message0 = "";
             }
@@ -185,7 +410,8 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                       || block.blocklyJson.args0[iArgs0].type == "field_number"
                       || block.blocklyJson.args0[iArgs0].type == "field_angle"
                       || block.blocklyJson.args0[iArgs0].type == "field_colour"
-                      || block.blocklyJson.args0[iArgs0].type == "field_dropdown") {
+                      || block.blocklyJson.args0[iArgs0].type == "field_dropdown"
+                      || block.blocklyJson.args0[iArgs0].type == "field_input") {
                      block.blocklyJson.message0 += " %" + (iArgs0 + 1);
                   }
                }
@@ -205,7 +431,7 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
             } else {
                var colours = this.getDefaultColours();
                block.blocklyJson.colour = 210; // default: blue
-               if ("blocks" in colours &&  block.name in colours.blocks) {
+               if ("blocks" in colours && block.name in colours.blocks) {
                   block.blocklyJson.colour = colours.blocks[block.name];
                }
                else if ("categories" in colours) {
@@ -229,10 +455,13 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
             blockInfo.codeGenerators = {};
          }
 
+         var that = this;
+
          // for closure:
          var args0 = blockInfo.blocklyJson.args0;
          var code = this.mainContext.strings.code[blockInfo.name];
          var output = blockInfo.blocklyJson.output;
+         var blockParams = blockInfo.params;
 
          for (var language in {JavaScript: null, Python: null}) {
             if (typeof blockInfo.codeGenerators[language] == "undefined") {
@@ -258,11 +487,17 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                         }
                         if (args0[iArgs0].type == "field_number"
                             || args0[iArgs0].type == "field_angle"
-                            || args0[iArgs0].type == "field_dropdown") {
+                            || args0[iArgs0].type == "field_dropdown"
+                            || args0[iArgs0].type == "field_input") {
                            if (iParam) {
                               params += ", ";
                            }
-                           params += JSON.stringify(block.getFieldValue('PARAM_' + iParam));
+                           var fieldValue = block.getFieldValue('PARAM_' + iParam);
+                           if(blockParams && blockParams[iArgs0] == 'Number') {
+                              params += parseInt(fieldValue);
+                           } else {
+                              params += JSON.stringify(fieldValue);
+                           }
                            iParam += 1;
                         }
                         if (args0[iArgs0].type == "field_colour") {
@@ -276,7 +511,11 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
 
                      var callCode = code + '(' + params + ')';
                      // Add reportValue to show the value in step-by-step mode
-                     var reportedCode = "reportBlockValue('" + block.id + "', " + callCode + ")";
+                     if(that.reportValues) {
+                        var reportedCode = "reportBlockValue('" + block.id + "', " + callCode + ")";
+                     } else {
+                        var reportedCode = callCode;
+                     }
 
                      if (typeof output == "undefined") {
                         return callCode + ";\n";
@@ -506,6 +745,9 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          return colours;
       },
 
+      getPlaceholderBlock: function(name) {
+         return this.placeholderBlocks ? "" : '';
+      },
 
       getStdBlocks: function() {
          return this.scratchMode ? this.getStdScratchBlocks() : this.getStdBlocklyBlocks();
@@ -542,11 +784,16 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
             logic: [
                {
                   name: "controls_if",
-                  blocklyXml: ""
+                  blocklyXml: "" +
+                              this.getPlaceholderBlock('DO0') +
+                              ""
                },
                {
                   name: "controls_if_else",
-                  blocklyXml: "",
+                  blocklyXml: "" +
+                              this.getPlaceholderBlock('DO0') +
+                              this.getPlaceholderBlock('ELSE') +
+                              "",
                   excludedByDefault: this.mainContext ? this.mainContext.showIfMutator : false
                },
                {
@@ -555,7 +802,7 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                },
                {
                   name: "logic_operation",
-                  blocklyXml: ""
+                  blocklyXml: ""
                },
                {
                   name: "logic_negate",
@@ -577,9 +824,16 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                }
             ],
             loops: [
+               {
+                  name: "controls_loop",
+                  blocklyXml: "",
+                  excludedByDefault: true
+               },
                {
                   name: "controls_repeat",
-                  blocklyXml: "",
+                  blocklyXml: "" +
+                              this.getPlaceholderBlock('DO') +
+                              "",
                   excludedByDefault: true
                },
                {
@@ -590,6 +844,7 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                               "      10" +
                               "    " +
                               "  " +
+                              this.getPlaceholderBlock('DO') +
                               ""
                },
                {
@@ -660,7 +915,12 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                {
                   name: "controls_flow_statements",
                   blocklyXml: ""
-               }
+               },
+               {
+                  name: "controls_infiniteloop",
+                  blocklyXml: "",
+                  excludedByDefault: true
+               },
             ],
             math: [
                {
@@ -873,6 +1133,10 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                   name: "text",
                   blocklyXml: ""
                },
+               {
+                  name: "text_eval",
+                  blocklyXml: ""
+               },
                {
                   name: "text_print",
                   blocklyXml: "" +
@@ -1105,7 +1369,7 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                },
                {
                   name: "lists_sort_place",
-                  blocklyXml: ""
+                  blocklyXml: "{listVariable}"
                },
                {
                   name: "lists_sort",
@@ -1123,7 +1387,134 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                },
                {
                   name: "lists_append",
-                  blocklyXml: ""
+                  blocklyXml: "{listVariable}"
+               }
+            ],
+            tables: [
+               {
+                  name: "tables_2d_init",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      0" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_2d_set",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      0" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_2d_get",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_3d_init",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      0" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_3d_set",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      0" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_3d_get",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              ""
                }
             ],
             // Note :: this category is not enabled unless explicitly specified
@@ -1216,11 +1607,16 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
             control: [
                   {
                      name: "control_if",
-                     blocklyXml: ""
+                     blocklyXml: "" +
+                                 this.getPlaceholderBlock('SUBSTACK') +
+                                 ""
                   },
                   {
                      name: "control_if_else",
-                     blocklyXml: ""
+                     blocklyXml: "" +
+                                 this.getPlaceholderBlock('SUBSTACK') +
+                                 this.getPlaceholderBlock('SUBSTACK2') +
+                                 ""
                   },
                   {
                      name: "control_repeat",
@@ -1230,11 +1626,19 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                                  "      10" +
                                  "    " +
                                  "  " +
+                                 this.getPlaceholderBlock('SUBSTACK') +
                                  ""
                   },
                   {
                      name: "control_repeat_until",
-                     blocklyXml: ""
+                     blocklyXml: "" +
+                                 this.getPlaceholderBlock('SUBSTACK') +
+                                 ""
+                  },
+                  {
+                     name: "control_forever",
+                     blocklyXml: "",
+                     excludedByDefault: true
                   }
                ],
             input: [
@@ -1309,7 +1713,7 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                   },
                   {
                      name: "lists_sort_place",
-                     blocklyXml: ""
+                     blocklyXml: "{listVariable}"
                   }
                ],
             math: [
@@ -1347,6 +1751,13 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                                  "  " +
                                  ""
                   },
+                  {
+                     name: "operator_dividefloor",
+                     blocklyXml: "" +
+                                 "  " +
+                                 "  " +
+                                 ""
+                  },
                   {
                      name: "operator_equals",
                      blocklyXml: "" +
@@ -1361,6 +1772,13 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                                  "  " +
                                  ""
                   },
+                  {
+                     name: "operator_gte",
+                     blocklyXml: "" +
+                                 "  " +
+                                 "  " +
+                                 ""
+                  },
                   {
                      name: "operator_lt",
                      blocklyXml: "" +
@@ -1368,6 +1786,13 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                                  "  " +
                                  ""
                   },
+                  {
+                     name: "operator_lte",
+                     blocklyXml: "" +
+                                 "  " +
+                                 "  " +
+                                 ""
+                  },
                   {
                      name: "operator_and",
                      blocklyXml: ""
@@ -1388,6 +1813,133 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                                  ""
                   }
                ],
+            tables: [
+               {
+                  name: "tables_2d_init",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      0" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_2d_set",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      0" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_2d_get",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_3d_init",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      0" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_3d_set",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      0" +
+                              "    " +
+                              "  " +
+                              ""
+               },
+               {
+                  name: "tables_3d_get",
+                  blocklyXml: "" +
+                              "  " +
+                              "    " +
+                              "      2" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              "  " +
+                              "    " +
+                              "      1" +
+                              "    " +
+                              "  " +
+                              ""
+               }
+            ],
             texts: [
                {
                   name: "text_print",
@@ -1408,6 +1960,10 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                               "    " +
                               "  " +
                               ""
+               },
+               {
+                  name: "text_eval",
+                  blocklyXml: ""
                }
                ],
             variables: [],
@@ -1447,8 +2003,11 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                   colour: colours.blocks[blockName]
                };
             }
-            categoriesInfos[categoryName].blocksXml.push(blockXmlInfo.xml);
-            this.allBlocksAllowed.push(blockName);
+            var blockXml = blockXmlInfo.xml;
+            if(categoriesInfos[categoryName].blocksXml.indexOf(blockXml) == -1) {
+               categoriesInfos[categoryName].blocksXml.push(blockXml);
+            }
+            this.addBlocksAllowed([blockName]);
          }
 
          // by the way, just change the defaul colours of the blockly blocks:
@@ -1465,26 +2024,19 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          var colours = this.getDefaultColours();
 
          // Reset the flyoutOptions for the variables and the procedures
-         Blockly.Variables.flyoutOptions = {
-            any: false,
-            anyButton: !!this.includeBlocks.groupByCategory,
-            fixed: [],
-            includedBlocks: {get: true, set: true, incr: true},
-            shortList: true
-         };
-
-         Blockly.Procedures.flyoutOptions = {
-            includedBlocks: {noret: false, ret: false, ifret: false}
-         };
+         Blockly.Variables.resetFlyoutOptions();
+         Blockly.Procedures.resetFlyoutOptions();
 
          // Initialize allBlocksAllowed
-         this.allBlocksAllowed = ['robot_start'];
+         this.allBlocksAllowed = [];
+         this.addBlocksAllowed(['robot_start', 'placeholder_statement']);
          if(this.scratchMode) {
-            this.allBlocksAllowed = this.allBlocksAllowed.concat(['math_number', 'text']);
+            this.addBlocksAllowed(['math_number', 'text']);
          }
 
 
-         if('wholeCategories' in this.includeBlocks.generatedBlocks) {
+         // *** Blocks from the lib
+         if(this.includeBlocks.generatedBlocks && 'wholeCategories' in this.includeBlocks.generatedBlocks) {
             for(var blockType in this.includeBlocks.generatedBlocks.wholeCategories) {
               var categories = this.includeBlocks.generatedBlocks.wholeCategories[blockType];
               for(var i=0; i 0) ? this.includeBlocks.variables : [];
             if (typeof this.includeBlocks.variablesOnlyBlocks !== 'undefined') {
@@ -1644,13 +2247,13 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          }
 
          if(Blockly.Variables.flyoutOptions.includedBlocks['get']) {
-            this.allBlocksAllowed.push('variables_get');
+            this.addBlocksAllowed(['variables_get']);
          }
          if(Blockly.Variables.flyoutOptions.includedBlocks['set']) {
-            this.allBlocksAllowed.push('variables_set');
+            this.addBlocksAllowed(['variables_set']);
          }
          if(Blockly.Variables.flyoutOptions.includedBlocks['incr']) {
-            this.allBlocksAllowed.push('math_change');
+            this.addBlocksAllowed(['math_change']);
          }
 
          var xmlString = "";
@@ -1697,6 +2300,21 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          Blockly.JavaScript['controls_untilWhile'] = Blockly.JavaScript['controls_whileUntil'];
          Blockly.Python['controls_untilWhile'] = Blockly.Python['controls_whileUntil'];
 
+         Blockly.Blocks['math_angle'] = {
+            init: function() {
+               this.setOutput(true, 'Number');
+               this.appendDummyInput()
+                   .appendField(new Blockly.FieldAngle(90), "ANGLE");
+               this.setColour(Blockly.Blocks.math.HUE);
+            }
+         };
+         Blockly.JavaScript['math_angle'] = function(block) {
+           return ['' + block.getFieldValue('ANGLE'), Blockly.JavaScript.ORDER_FUNCTION_CALL];
+         };
+         Blockly.Python['math_angle'] = function(block) {
+           return ['' + block.getFieldValue('ANGLE'), Blockly.Python.ORDER_FUNCTION_CALL];
+         };
+
          Blockly.Blocks['math_extra_single'] = {
            /**
             * Block for advanced math operators with single operand.
@@ -1791,13 +2409,61 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
            return [code, Blockly.Python.ORDER_FUNCTION_CALL];
          };
 
+         Blockly.Blocks['controls_loop'] = {
+           init: function() {
+             this.appendDummyInput()
+             .appendField(that.strings.loopRepeat);
+             this.appendStatementInput("inner_blocks")
+             .setCheck(null)
+             .appendField(that.strings.loopDo);
+             this.setPreviousStatement(true, null);
+             this.setNextStatement(true, null);
+             this.setColour(that.getDefaultColours().categories["loops"])
+             this.setTooltip("");
+             this.setHelpUrl("");
+           }
+         }
+         Blockly.JavaScript['controls_loop'] = function(block) {
+           var statements = Blockly.JavaScript.statementToCode(block, 'inner_blocks');
+           var code = 'while(true){\n' + statements + '}\n';
+           return code;
+         };
+
+
+         Blockly.Blocks['controls_infiniteloop'] = {
+           init: function() {
+             this.appendStatementInput("inner_blocks")
+             .setCheck(null)
+             .appendField(that.strings.infiniteLoop);
+             this.setPreviousStatement(true, null);
+             this.setNextStatement(false, null);
+             this.setColour(that.getDefaultColours().categories["loops"])
+             this.setTooltip("");
+             this.setHelpUrl("");
+           }
+         }
+         Blockly.JavaScript['controls_infiniteloop'] = function(block) {
+           var statements = Blockly.JavaScript.statementToCode(block, 'inner_blocks');
+           var code = 'while(true){\n' + statements + '}\n';
+           return code;
+         };
+         Blockly.Python['controls_infiniteloop'] = function(block) {
+            // Do while/until loop.
+            var branch = Blockly.Python.statementToCode(block, 'inner_blocks');
+            branch = Blockly.Python.addLoopTrap(branch, block.id) ||
+                Blockly.Python.PASS;
+
+            return 'while True:\n' + branch;
+          };
 
          if(this.scratchMode) {
             Blockly.Blocks['robot_start'] = {
               init: function() {
                 this.jsonInit({
                   "id": "event_whenflagclicked",
-                  "message0": that.strings.flagClicked,
+                  "message0": that.strings.startingBlockName,
+                  // former Scratch-like display
+                  /*"message0": that.strings.flagClicked,
                   "args0": [
                     {
                       "type": "field_image",
@@ -1807,7 +2473,7 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
                       "alt": "flag",
                       "flip_rtl": true
                     }
-                  ],
+                  ],*/
                   "inputsInline": true,
                   "nextStatement": null,
                   "category": Blockly.Categories.event,
@@ -1818,8 +2484,39 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
               }
             };
 
+            Blockly.Blocks['placeholder_statement'] = {
+              init: function() {
+                this.jsonInit({
+                  "id": "placeholder_statement",
+                  "message0": "",
+                  "inputsInline": true,
+                  "previousStatement": null,
+                  "nextStatement": null,
+                  "category": Blockly.Categories.event,
+                  "colour": "#BDCCDB",
+                  "colourSecondary": "#BDCCDB",
+                  "colourTertiary": "#BDCCDB"
+                });
+                this.appendDummyInput().appendField("                    ");
+              }
+            };
+
+            Blockly.JavaScript['control_forever'] = function(block) {
+              var statements = Blockly.JavaScript.statementToCode(block, 'SUBSTACK');
+              var code = 'while(true){\n' + statements + '}\n';
+              return code;
+            };
+            Blockly.Python['control_forever'] = function(block) {
+              // Do while/until loop.
+              var branch = Blockly.Python.statementToCode(block, 'SUBSTACK');
+              branch = Blockly.Python.addLoopTrap(branch, block.id) ||
+                  Blockly.Python.PASS;
+
+              return 'while True:\n' + branch;
+           };
+
          } else {
-            if (!(this.mainContext.showIfMutator)) {
+            if (!this.mainContext.infos || !this.mainContext.infos.showIfMutator) {
                var old = Blockly.Blocks.controls_if.init;
                Blockly.Blocks.controls_if.init = function() {
                   old.call(this);
@@ -1840,6 +2537,18 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
             //    this.setHelpUrl('http://www.example.com/');
               }
             };
+
+            Blockly.Blocks['placeholder_statement'] = {
+              init: function() {
+                this.appendDummyInput()
+                    .appendField("                    ");
+                this.setPreviousStatement(true);
+                this.setNextStatement(true);
+                this.setColour(210);
+                this.setTooltip('');
+            //    this.setHelpUrl('http://www.example.com/');
+              }
+            };
          }
 
          Blockly.JavaScript['robot_start'] = function(block) {
@@ -1849,6 +2558,14 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          Blockly.Python['robot_start'] = function(block) {
            return "";
          };
+
+         Blockly.JavaScript['placeholder_statement'] = function(block) {
+           return "";
+         };
+
+         Blockly.Python['placeholder_statement'] = function(block) {
+           return "pass";
+         }
       },
 
       blocksToScratch: function(blockList) {
@@ -1867,7 +2584,7 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
       },
 
       fixScratch: function() {
-         // Store the maxBlocks information somehwere, as Scratch ignores it
+         // Store the maxBlocks information somewhere, as Scratch ignores it
          Blockly.Workspace.prototype.maxBlocks = function () { return maxBlocks; };
 
          // Translate requested Blocks from Blockly to Scratch blocks
@@ -1879,32 +2596,90 @@ function getBlocklyBlockFunctions(maxBlocks, nbTestCases) {
          return this.getBlocklyLibCode(this.generators) + code + "program_end()";
       },
 
-      checkBlocksAreAllowed: function(xml) {
-         var allowed = this.scratchMode ? this.blocksToScratch(this.allBlocksAllowed) : this.allBlocksAllowed;
+      checkCode: function(code, display) {
+         // TODO :: check a code is okay for validation; for now it's checked
+         // by getCode so this function is not useful in the Blockly/Scratch
+         // version
+         return true;
+      },
+
+      checkCodes: function(codes, display) {
+         // Check multiple codes
+         for(var i = 0; i < codes.length; i++) {
+            if(!this.checkCode(codes[i], display)) {
+               return false;
+            }
+         }
+         return true;
+      },
+
+      checkBlocksAreAllowed: function(xml, silent) {
+         if(this.includeBlocks && this.includeBlocks.standardBlocks && this.includeBlocks.standardBlocks.includeAll) { return true; }
+         var allowed = this.getBlocksAllowed();
          var blockList = xml.getElementsByTagName('block');
          var notAllowed = [];
-         for(var i=0; i 0) {
+         for(var i=0; i 0) {
             console.error('Error: tried to load programs with unallowed blocks '+notAllowed.join(', '));
          }
          return !(notAllowed.length);
       },
 
-      cleanBlockIds: function(xml) {
-         // Clean up block IDs which contain now forbidden characters
+      cleanBlockAttributes: function(xml, origin) {
+         // Clean up block attributes
+         if(!origin) {
+            origin = {x: 0, y: 0};
+         }
          var blockList = xml.getElementsByTagName('block');
+         var minX = Infinity, minY = Infinity;
          for(var i=0; i" + $("submitBtn").html());
          }
       },
-      
+
       loadContext: function (mainContext) {
          this.mainContext = mainContext;
          this.createGeneratorsAndBlocks();
@@ -85,36 +96,58 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
             this.strings.startingBlockName = options.startingBlockName;
          }
 
+         if (options.maxListSize) {
+            FioiBlockly.maxListSize = options.maxListSize;
+         }
+         this.placeholderBlocks = options.placeholderBlocks;
+
          this.locale = locale;
          this.nbTestCases = nbTestCases;
          this.options = options;
 
+         this.addExtraBlocks();
+         this.createSimpleGeneratorsAndBlocks();
+
+         this.display = display;
+
          if (display) {
             this.loadHtml(nbTestCases);
-            this.addExtraBlocks();
-            this.createSimpleGeneratorsAndBlocks();
             var xml = this.getToolboxXml();
             var wsConfig = {
                toolbox: ""+xml+"",
+               comments: true,
                sounds: false,
-               media: this.mediaUrl
+               trashcan: true,
+               media: this.mediaUrl,
+               scrollbars: true,
+               zoom: { startScale: 1 }
             };
-            wsConfig.comments = true;
-            wsConfig.scrollbars = true;
-            wsConfig.trashcan = true;
-            if (maxBlocks != undefined) {
-               wsConfig.maxBlocks = maxBlocks;
-            }
-            if (options.readOnly) {
-               wsConfig.readOnly = true;
+
+            if(typeof options.scrollbars != 'undefined') { wsConfig.scrollbars = !!options.scrollbars; }
+            // IE <= 10 needs scrollbars
+            if(navigator.userAgent.indexOf("MSIE") > -1) { wsConfig.scrollbars = true; }
+
+            wsConfig.readOnly = !!options.readOnly || this.readOnly;
+            if(options.zoom) {
+               wsConfig.zoom.controls = !!options.zoom.controls;
+               wsConfig.zoom.startScale = options.zoom.scale ? options.zoom.scale : 1;
             }
             if (this.scratchMode) {
-               wsConfig.zoom = { startScale: 0.75 };
+               wsConfig.zoom.startScale = wsConfig.zoom.startScale * 0.75;
+            }
+            this.initialScale = wsConfig.zoom.startScale;
+            if(wsConfig.zoom.controls && window.blocklyUserScale) {
+               wsConfig.zoom.startScale *= window.blocklyUserScale;
             }
             if(this.trashInToolbox) {
                Blockly.Trashcan.prototype.MARGIN_SIDE_ = $('#blocklyDiv').width() - 110;
             }
-            this.workspace = Blockly.inject(this.divId, wsConfig);
+
+            // Clean events if the previous unload wasn't done properly
+            Blockly.removeEvents();
+
+            // Inject Blockly
+            window.blocklyWorkspace = this.workspace = Blockly.inject(this.divId, wsConfig);
 
             // Start checking whether it's hidden, to sort out contents
             // automatically when it's displayed
@@ -129,7 +162,18 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
             if (toolboxNode.length != 0) {
                toolboxNode.html(xml);
             }
-            
+
+            // Restore clipboard if allowed
+            if(window.blocklyClipboardSaved) {
+               if(this.checkBlocksAreAllowed(window.blocklyClipboardSaved)) {
+                  Blockly.clipboardXml_ = window.blocklyClipboardSaved;
+               } else {
+                  // Set to false to indicate that blocks were disallowed
+                  Blockly.clipboardXml_ = false;
+               }
+               Blockly.clipboardSource_ = this.workspace;
+            }
+
             $(".blocklyToolboxDiv").css("background-color", "rgba(168, 168, 168, 0.5)");
             this.workspace.addChangeListener(this.onChange.bind(this));
             this.onChange();
@@ -139,19 +183,20 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
          }
 
          this.programs = [];
-         for (var iPlayer = this.mainContext.nbRobots - 1; iPlayer >= 0; iPlayer--) {
-            this.programs[iPlayer] = {blockly: null, blocklyJS: "", blocklyPython: "", javascript: ""};
-            this.languages[iPlayer] = "blockly";
-            this.setPlayer(iPlayer);
-            if(this.startingBlock) {
+         for (var iCode = this.mainContext.nbCodes - 1; iCode >= 0; iCode--) {
+            this.programs[iCode] = {blockly: null, blocklyJS: "", blocklyPython: "", javascript: ""};
+            this.languages[iCode] = "blockly";
+            this.setCodeId(iCode);
+            if(this.startingBlock || options.startingExample) {
                var xml = this.getDefaultContent();
-
                Blockly.Events.recordUndo = false;
                Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), this.workspace);
                Blockly.Events.recordUndo = true;
             }
             this.savePrograms();
          }
+
+         if(window.quickAlgoInterface) { quickAlgoInterface.updateControlsDisplay(); }
       },
 
       unloadLevel: function() {
@@ -164,6 +209,12 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
             // Need to hide the WidgetDiv before disposing of the workspace
             Blockly.WidgetDiv.hide();
          } catch(e) {}
+
+         // Save clipboard
+         if(this.display && Blockly.clipboardXml_) {
+            window.blocklyClipboardSaved = Blockly.clipboardXml_;
+         }
+
          var ws = this.workspace;
          if (ws != null) {
             try {
@@ -182,6 +233,7 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
 
       reload: function() {
          // Reload Blockly editor
+         this.reloading = true;
          this.savePrograms();
          var programs = this.programs;
          this.unloadLevel();
@@ -189,6 +241,49 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
          this.load(this.locale, true, this.nbTestCases, this.options);
          this.programs = programs;
          this.loadPrograms();
+         if(window.quickAlgoInterface) {
+            quickAlgoInterface.onResize();
+         }
+         this.reloading = false;
+      },
+
+      setReadOnly: function(newState) {
+         if(!!newState == this.readOnly) { return; }
+         this.readOnly = !!newState;
+
+         // options.readOnly has priority
+         if(this.options.readOnly) { return; }
+
+         this.reload();
+      },
+
+      onResizeFct: function() {
+         // onResize function to be called by the interface
+         if(document.documentElement.clientHeight < 600 || document.documentElement.clientWidth < 800) {
+            FioiBlockly.trashcanScale = 0.75;
+            FioiBlockly.zoomControlsScale = 0.9;
+         } else {
+            FioiBlockly.trashcanScale = 1;
+            FioiBlockly.zoomControlsScale = 1;
+         }
+         Blockly.svgResize(this.workspace);
+
+         // Reload Blockly if the flyout is not properly rendered
+         // TODO :: find why it's not properly rendered in the first place
+         if(!this.scratchMode && this.workspace.flyout_ && this.reloadForFlyout < 5) {
+            var flyoutWidthDiff = Math.abs(this.workspace.flyout_.svgGroup_.getBoundingClientRect().width -
+               this.workspace.flyout_.svgBackground_.getBoundingClientRect().width);
+            if(flyoutWidthDiff > 5) {
+               this.reloadForFlyout += 1;
+               this.reload();
+            }
+         }
+      },
+
+      onResize: function() {
+         // This function will replace itself with the debounced onResizeFct
+         this.onResize = debounce(this.onResizeFct.bind(this), 500, false);
+         this.onResizeFct();
       },
 
       hiddenCheck: function() {
@@ -198,7 +293,6 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
             this.hidden = false;
             // Reload the Blockly editor to remove display issues after
             // being hidden
-            console.log('reload');
             this.reload();
             return; // it will be restarted by reload
          }
@@ -206,6 +300,66 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
          this.hiddenCheckTimeout = setTimeout(this.hiddenCheck.bind(this), 500);
       },
 
+      onChangeResetDisplayFct: function() {
+         if(this.unloaded || this.reloading) { return; }
+         this.highlightBlock(null);
+         if(this.quickAlgoInterface && !this.reloading) {
+            this.quickAlgoInterface.resetTestScores();
+         }
+         if(this.keepDisplayedError) {
+            // Do not clear the error this time
+            this.keepDisplayedError = false;
+         } else {
+            this.displayError('');
+         }
+      },
+
+      onChangeResetDisplay: function() {
+         // This function will replace itself with the debounced onChangeResetDisplayFct
+         this.onChangeResetDisplay = debounce(this.onChangeResetDisplayFct.bind(this), 500, false);
+         this.onChangeResetDisplayFct();
+      },
+
+      resetDisplay: function() {
+         this.highlightBlock(null);
+         if(!this.scratchMode && Blockly.selected) {
+            // Do not execute that while the user is moving blocks around
+            Blockly.selected.unselect();
+         }
+      },
+
+      getCapacityInfo: function() {
+         var remaining = 1;
+         var text = '';
+         if(maxBlocks) {
+            // Update the remaining blocks display
+            remaining = this.getRemainingCapacity(this.workspace);
+            var optLimitBlocks = {
+               maxBlocks: maxBlocks,
+               remainingBlocks: Math.abs(remaining)
+            };
+            var strLimitBlocks = remaining < 0 ? this.strings.limitBlocksOver : this.strings.limitBlocks;
+            text = strLimitBlocks.format(optLimitBlocks);
+         }
+
+         if(remaining < 0) {
+            return {text: text, invalid: true, type: 'capacity'};
+         }
+
+         // We're over the block limit, is there any block used too often?
+         var limited = this.findLimited(this.workspace);
+         if(limited) {
+            var errorMsg = typeof limited == 'string' ? this.strings.limitedBlock : this.strings.limitedBlocks;
+            errorMsg += ' ';
+            errorMsg += this.getBlockLabel(limited, true);
+            errorMsg += '.';
+            return {text: errorMsg, invalid: true, type: 'limited'};
+         } else if(remaining == 0) {
+            return {text: text, warning: true, type: 'capacity'};
+         }
+         return {text: text, type: 'capacity'};
+      },
+
       onChange: function(event) {
          var eventType = event ? event.constructor : null;
 
@@ -216,37 +370,26 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
             eventType === Blockly.Events.Change) : true;
 
          if(isBlockEvent) {
-            if(eventType === Blockly.Events.Create || eventType === Blockly.Events.Delete) {
-               // Update the remaining blocks display
-               var remaining = this.workspace.remainingCapacity(maxBlocks);
-               var optLimitBlocks = {
-                  maxBlocks: maxBlocks,
-                  remainingBlocks: Math.abs(remaining)
-               };
-               var strLimitBlocks = remaining < 0 ? this.strings.limitBlocksOver : this.strings.limitBlocks;
-               $('#capacity').css('color', remaining < 0 ? 'red' : '');
-               $('#capacity').html(strLimitBlocks.format(optLimitBlocks));
-            }
-
-            // TODO :: put into a resetDisplay function, find other elements to reset
-            if(this.mainContext.runner && this.mainContext.runner.nbRunning() > 0) {
-               this.mainContext.runner.stop();
-               this.mainContext.reset();
-            }
-            if(this.scratchMode) {
-               this.glowBlock(null);
-            }
-
-            if(this.quickAlgoInterface) {
-               this.quickAlgoInterface.resetTestScores();
+            var capacityInfo = this.getCapacityInfo();
+            if(window.quickAlgoInterface) {
+               if(eventType === Blockly.Events.Move) {
+                  // Only display popup when we drop the block, not on creation
+                  capacityInfo.popup = true;
+               }
+               window.quickAlgoInterface.displayCapacity(capacityInfo);
+               window.quickAlgoInterface.onEditorChange();
+            } else {
+               $('#capacity').html(capacityInfo.text);
             }
+            this.onChangeResetDisplay();
+            this.subTask.onChange();
          } else {
             Blockly.svgResize(this.workspace);
          }
 
          // Refresh the toolbox for new procedures (same with variables
          // but it's already handled correctly there)
-         if(this.scratchMode && this.includeBlocks.groupByCategory) {
+         if(this.scratchMode && this.includeBlocks.groupByCategory && this.workspace.toolbox_) {
             this.workspace.toolbox_.refreshSelection();
          }
       },
@@ -255,8 +398,8 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
          this.includeBlocks = includeBlocks;
       },
 
-      getDefaultContent: function () {
-         if (this.startingBlock) {
+      getEmptyContent: function() {
+         if(this.startingBlock) {
             if(this.scratchMode) {
                return '';
             } else {
@@ -268,6 +411,14 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
          }
       },
 
+      getDefaultContent: function() {
+         if(this.options.startingExample) {
+            var xml = this.options.startingExample[this.language];
+            if(xml) { return xml; }
+         }
+         return this.getEmptyContent();
+      },
+
       checkRobotStart: function () {
          if(!this.startingBlock || !this.workspace) { return; }
          var blocks = this.workspace.getTopBlocks(true);
@@ -275,35 +426,45 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
             if(blocks[b].type == 'robot_start') { return;}
          }
 
-         var xml = Blockly.Xml.textToDom(this.getDefaultContent())
+         var xml = Blockly.Xml.textToDom(this.getEmptyContent())
          Blockly.Xml.domToWorkspace(xml, this.workspace);
       },
 
-      setPlayer: function(newPlayer) {
-         this.player = newPlayer;
-         $("#selectPlayer").val(this.player);
+      getOrigin: function() {
+         // Get x/y origin
+         if(this.includeBlocks.groupByCategory && typeof this.options.scrollbars != 'undefined' && !this.options.scrollbars) {
+            return this.scratchMode ? {x: 340, y: 20} : {x: 105, y: 2};
+         }
+         return this.scratchMode ? {x: 4, y: 20} : {x: 2, y: 2};
+      },
+
+      // TODO :: New version of these three functions when we'll have multiple
+      // node programs we can edit
+      setCodeId: function(newCodeId) {
+         this.codeId = newCodeId;
+         $("#selectCodeId").val(this.codeId);
          $(".robot0, .robot1").hide();
-         $(".robot" + this.player).show();
+         $(".robot" + this.codeId).show();
       },
 
-      changePlayer: function() {
-         this.loadPlayer($("#selectPlayer").val());
+      changeCodeId: function() {
+         this.loadCodeId($("#selectCodeId").val());
       },
 
-      loadPlayer: function(player) {
+      loadCodeId: function(codeId) {
          this.savePrograms();
-         this.player = player;
-         for (var iRobot = 0; iRobot < this.mainContext.nbRobots; iRobot++) {
-            $(".robot" + iRobot).hide();
+         this.codeId = codeId;
+         for (var iCode = 0; iCode < this.mainContext.nbCodes; iCode++) {
+            $(".robot" + iCode).hide();
          }
-         $(".robot" + this.player).show();
+         $(".robot" + this.codeId).show();
 
          $(".language_blockly, .language_javascript").hide();
-         $(".language_" + this.languages[this.player]).show();
-         
+         $(".language_" + this.languages[this.codeId]).show();
+
          var blocklyElems = $(".blocklyToolboxDiv, .blocklyWidgetDiv");
-         $("#selectLanguage").val(this.languages[this.player]);
-         if (this.languages[this.player] == "blockly") {
+         $("#selectLanguage").val(this.languages[this.codeId]);
+         if (this.languages[this.codeId] == "blockly") {
             blocklyElems.show();
          } else {
             blocklyElems.hide();
@@ -318,70 +479,97 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
             return;
          }
 
+         // Save zoom
+         if(this.display && this.workspace.scale) {
+             window.blocklyUserScale = this.workspace.scale / this.initialScale;
+         }
+
          this.checkRobotStart();
 
-         this.programs[this.player].javascript = $("#program").val();
+         this.programs[this.codeId].javascript = $("#program").val();
          if (this.workspace != null) {
             var xml = Blockly.Xml.workspaceToDom(this.workspace);
-            this.programs[this.player].blockly = Blockly.Xml.domToText(xml);
-            this.programs[this.player].blocklyJS = this.getCode("javascript");
-            //this.programs[this.player].blocklyPython = this.getCode("python");
+            this.cleanBlockAttributes(xml);
+
+            // The additional variable contain all additional things that we can save, for example quickpi sensors,
+            // subject title when edition is enabled...
+            var additional = {};
+
+            if (this.quickAlgoInterface.saveAdditional)
+               this.quickAlgoInterface.saveAdditional(additional);
+
+            var additionalNode = document.createElement("additional");
+            additionalNode.innerText = JSON.stringify(additional);
+            xml.appendChild(additionalNode);
+
+            this.programs[this.codeId].blockly = Blockly.Xml.domToText(xml);
+            this.programs[this.codeId].blocklyJS = this.getCode("javascript");
+            //this.programs[this.codeId].blocklyPython = this.getCode("python");
          }
       },
 
       loadPrograms: function() {
          if (this.workspace != null) {
-            var xml = Blockly.Xml.textToDom(this.programs[this.player].blockly);
+            var xml = Blockly.Xml.textToDom(this.programs[this.codeId].blockly);
             this.workspace.clear();
-            this.cleanBlockIds(xml);
+            this.cleanBlockAttributes(xml, this.getOrigin());
             Blockly.Xml.domToWorkspace(xml, this.workspace);
+
+            var additionalXML = xml.getElementsByTagName("additional");
+            if (additionalXML.length > 0) {
+               var additional = JSON.parse(additionalXML[0].innerText);
+               // load additional from quickAlgoInterface
+               if (this.quickAlgoInterface.loadAdditional) {
+                  this.quickAlgoInterface.loadAdditional(additional);
+               }
+            }
          }
-         $("#program").val(this.programs[this.player].javascript);
+         $("#program").val(this.programs[this.codeId].javascript);
       },
 
-      loadExample: function(exampleObj) {
-         var example = this.scratchMode ? exampleObj.scratch : exampleObj.blockly
-         if (this.workspace != null && example) {
-            var xml = Blockly.Xml.textToDom(example);
-            this.cleanBlockIds(xml);
+      loadProgramFromDom: function(xml) {
+         if(!this.checkBlocksAreAllowed(xml)) {
+            return;
+         }
 
-            
+         // Shift to x=200 y=20 + offset
+         if(!this.exampleOffset) { this.exampleOffset = 0; }
+         var origin = this.getOrigin();
+         origin.x += 200 + this.exampleOffset;
+         origin.y += 20 + this.exampleOffset;
+         // Add an offset of 10 each time, so if someone clicks the button
+         // multiple times the blocks don't stack
+         this.exampleOffset += 10;
 
-            // Remove robot_start
-            if(xml.children.length == 1 && xml.children[0].getAttribute('type') == 'robot_start') {
-               xml = xml.firstChild.firstChild;
-            }
+         // Remove robot_start
+         if(xml.children.length == 1 && xml.children[0].getAttribute('type') == 'robot_start') {
+            xml = xml.firstChild.firstChild;
+         }
 
-            // Shift to x=200 y=20 + offset
-            if(!this.exampleOffset) { this.exampleOffset = 0; }
-            xml.firstChild.setAttribute('x', 200 + this.exampleOffset);
-            xml.firstChild.setAttribute('y', 20 + this.exampleOffset);
-            // Add an offset of 10 each time, so if someone clicks the button
-            // multiple times the blocks don't stack
-            this.exampleOffset += 10;
+         this.cleanBlockAttributes(xml, origin);
 
-            Blockly.Xml.domToWorkspace(xml, this.workspace);
+         Blockly.Xml.domToWorkspace(xml, this.workspace);
 
-            if(this.scratchMode) {
-               this.glowBlock(this.glowingBlock);
-               this.glowingBlock = xml.firstChild.getAttribute('id');
-            } else {
-               this.workspace.traceOn(true);
-               this.workspace.highlightBlock(xml.firstChild.getAttribute('id'));
-            }
+         this.highlightBlock(xml.firstChild.getAttribute('id'));
+      },
+
+      loadExample: function(exampleObj) {
+         var example = this.scratchMode ? exampleObj.scratch : exampleObj.blockly
+         if (this.workspace != null && example) {
+            var xml = Blockly.Xml.textToDom(example);
+            this.loadProgramFromDom(xml);
          }
       },
 
       changeLanguage: function() {
-         this.languages[this.player] = $("#selectLanguage").val();
-         this.loadPlayer(this.player);
+         this.languages[this.codeId] = $("#selectLanguage").val();
+         this.loadCodeId(this.codeId);
       },
 
       importFromBlockly: function() {
-          //var player = $("#selectPlayer").val();
-          var player = 0;
-          this.programs[player].javascript = this.getCode("javascript");
-          $("#program").val(this.programs[player].javascript);
+          var codeId = 0;
+          this.programs[this.codeId].javascript = this.getCode("javascript");
+          $("#program").val(this.programs[this.codeId].javascript);
       },
 
       handleFiles: function(files) {
@@ -399,31 +587,34 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
                if (code[0] == "<") {
                   try {
                      var xml = Blockly.Xml.textToDom(code);
+                     that.cleanBlockAttributes(xml);
                      if(!that.checkBlocksAreAllowed(xml)) {
-                        //throw 'not allowed'; // TODO :: do something; for now do nothing as the system might not be complete
+                        throw 'not allowed'; // TODO :: check it's working properly
                      }
-                     that.programs[that.player].blockly = code;
-                     that.languages[that.player] = "blockly";
+                     that.programs[that.codeId].blockly = code;
+                     that.languages[that.codeId] = "blockly";
                   } catch(e) {
-                     $("#errors").html(''+that.strings.invalidContent+'');
+                     that.displayError(''+that.strings.invalidContent+'');
+                     that.keepDisplayedError = true;
                   }
                } else {
-                  that.programs[that.player].javascript = code;
-                  that.languages[that.player] = "javascript";
+                  that.programs[that.codeId].javascript = code;
+                  that.languages[that.codeId] = "javascript";
                }
                that.loadPrograms();
-               that.loadPlayer(that.player);
+               that.loadCodeId(that.codeId);
             }
 
             reader.readAsText(file);
          } else {
-            $("#errors").html(''+this.strings.unknownFileType+'');
+            that.displayError(''+this.strings.unknownFileType+'');
+            that.keepDisplayedError = true;
          }
       },
 
       saveProgram: function() {
          this.savePrograms();
-         var code = this.programs[this.player][this.languages[this.player]];
+         var code = this.programs[this.codeId][this.languages[this.codeId]];
          var data = new Blob([code], {type: 'text/plain'});
 
          // If we are replacing a previously generated file we need to
@@ -454,15 +645,30 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
          this.updateSize();
       },
 
-      updateSize: function() {
+      updateSize: function(force) {
+         if(window.experimentalSize) {
+            // Temporary test
+            var isPortrait = $(window).width() <= $(window).height();
+            if(isPortrait && !this.wasPortrait) {
+               this.reload();
+            }
+            this.wasPortrait = isPortrait;
+            $('#blocklyDiv').height($('#blocklyLibContent').height() - 34);
+            $('#blocklyDiv').width($('#blocklyLibContent').width() - 4);
+            if (this.trashInToolbox) {
+               Blockly.Trashcan.prototype.MARGIN_SIDE_ = panelWidth - 90;
+            }
+            Blockly.svgResize(this.workspace);
+            return;
+         }
          var panelWidth = 500;
-         if (this.languages[this.player] == "blockly") {
+         if (this.languages[this.codeId] == "blockly") {
             panelWidth = $("#blocklyDiv").width() - 10;
          } else {
             panelWidth = $("#program").width() + 20;
          }
-         if (panelWidth != this.prevWidth) {
-            if (this.languages[this.player] == "blockly") {
+         if (force || panelWidth != this.prevWidth) {
+            if (this.languages[this.codeId] == "blockly") {
                if (this.trashInToolbox) {
                   Blockly.Trashcan.prototype.MARGIN_SIDE_ = panelWidth - 90;
                }
@@ -472,17 +678,41 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
          this.prevWidth = panelWidth;
       },
 
-      glowBlock: function(id) {
-         // highlightBlock replacement for Scratch
-         if(this.glowingBlock) {
-            try {
-               this.workspace.glowBlock(this.glowingBlock, false);
-            } catch(e) {}
+      highlightBlock: function(id, keep) {
+         if(!id) { keep = false; }
+
+         if(!keep) {
+            for(var i = 0; i < this.highlightedBlocks.length; i++) {
+               var bid = this.highlightedBlocks[i];
+               if(this.scratchMode) {
+                  try {
+                     this.workspace.glowBlock(bid, false);
+                  } catch(e) {}
+               } else {
+                  var block = this.workspace.getBlockById(bid);
+                  if(block) { block.removeSelect(); }
+               }
+            }
+            this.highlightedBlocks = [];
+         }
+
+         if(this.scratchMode) {
+            if(id) {
+               this.workspace.glowBlock(id, true);
+            }
+         } else {
+            this.workspace.traceOn(true);
+            if(keep) {
+               var block = this.workspace.getBlockById(id);
+               if(block) { block.addSelect(); }
+            } else {
+               this.workspace.highlightBlock(id);
+            }
          }
+
          if(id) {
-            this.workspace.glowBlock(id, true);
+            this.highlightedBlocks.push(id);
          }
-         this.glowingBlock = id;
       },
 
       initRun: function() {
@@ -513,53 +743,100 @@ function getBlocklyInterface(maxBlocks, nbTestCases) {
                } // There can be multiple robot_start blocks sometimes
             }
             if(!robotStartHasChildren) {
-               $("#errors").html('' + window.languageStrings.errorEmptyProgram + '');
+               this.displayError('' + window.languageStrings.errorEmptyProgram + '');
                return;
             }
          }
-            
+
          this.savePrograms();
 
-         var codes = [];
-         for (var iRobot = 0; iRobot < this.mainContext.nbRobots; iRobot++) {
-            var language = this.languages[iRobot];
-            if (language == "blockly") {
-               language = "blocklyJS";
-            }
-            codes[iRobot] = this.getFullCode(this.programs[iRobot][language]);
+         this.highlightPause = false;
+         if(this.getRemainingCapacity(that.workspace) < 0) {
+            this.displayError(''+this.strings.tooManyBlocks+'');
+            return;
          }
-         that.highlightPause = false;
-         if(this.scratchMode) {
-            if(that.workspace.remainingCapacity(maxBlocks) < 0) {
-               $("#errors").html(''+this.strings.tooManyBlocks+'');
-               return;
-            }
-         } else {
-            that.workspace.traceOn(true);
-            that.workspace.highlightBlock(null);
+         var limited = this.findLimited(this.workspace);
+         if(limited) {
+            var errorMsg = typeof limited == 'string' ? this.strings.limitedBlock : this.strings.limitedBlocks;
+            errorMsg += ' ';
+            errorMsg += this.getBlockLabel(limited, true);
+            errorMsg += '.';
+            this.displayError(''+errorMsg+'');
+            return;
          }
+         if(!this.scratchMode) {
+            this.highlightBlock(null);
+         }
+         var codes = this.getAllCodes();
          this.mainContext.runner.initCodes(codes);
+         return true;
       },
 
-      
+
       run: function () {
-         this.initRun();
+         if(!this.initRun()) { return; }
          this.mainContext.runner.run();
       },
 
       step: function () {
          if(this.mainContext.runner.nbRunning() <= 0) {
-            this.initRun();
+            if(!this.initRun()) { return; }
          }
          this.mainContext.runner.step();
-      }
+      },
+
+
+      displayError: function(message) {
+        if(this.quickAlgoInterface) {
+            this.quickAlgoInterface.displayError(message);
+            this.quickAlgoInterface.setPlayPause(false);
+         } else {
+            $('#errors').html(message);
+         }
+      },
+
+      canPaste: function() {
+         // Note that when changing versions, the clipboard is checked for
+         // compatibility
+         return Blockly.clipboardXml_ === null ? null : !!Blockly.clipboardXml_;
+      },
+
+      canConvertBlocklyToPython: function() {
+         return true;
+      },
+
+      copyProgram: function() {
+         var block = Blockly.selected;
+         if(!block) {
+            var blocks = this.workspace.getTopBlocks();
+            for(var i=0; i' + Blockly.Xml.domToText(Blockly.clipboardXml_) + '');
+         this.loadProgramFromDom(xml);
+      },
+
+      hideSkulptAnalysis: function() {}
    }
 }
 
-function getBlocklyHelper(maxBlocks, nbTestCases) {
+function getBlocklyHelper(maxBlocks, subTask) {
    // TODO :: temporary until splitting of the block functions logic is done
-   var blocklyHelper = getBlocklyInterface(maxBlocks, nbTestCases);
-   var blocklyBlockFunc = getBlocklyBlockFunctions(maxBlocks, nbTestCases);
+   var blocklyHelper = getBlocklyInterface(maxBlocks, subTask);
+   var blocklyBlockFunc = getBlocklyBlockFunctions(maxBlocks);
    for(var property in blocklyBlockFunc) {
       blocklyHelper[property] = blocklyBlockFunc[property];
    }
diff --git a/pemFioi/quickAlgo/blockly_runner.js b/pemFioi/quickAlgo/blockly_runner.js
index f2b81f627..38621969c 100644
--- a/pemFioi/quickAlgo/blockly_runner.js
+++ b/pemFioi/quickAlgo/blockly_runner.js
@@ -12,10 +12,18 @@ function initBlocklyRunner(context, messageCallback) {
       runner.nbActions = 0;
       runner.scratchMode = context.blocklyHelper ? context.blocklyHelper.scratchMode : false;
       runner.delayFactory = new DelayFactory();
+      runner.resetDone = false;
+
+      // Node status
+      runner.nbNodes = 1;
+      runner.curNode = 0;
+      runner.nodesReady = [];
+      runner.waitingOnReadyNode = false;
 
       // Iteration limits
       runner.maxIter = 400000;
       runner.maxIterWithoutAction = 500;
+      runner.allowStepsWithoutDelay = 0;
 
       // Counts the call stack depth to know when to reset it
       runner.stackCount = 0;
@@ -37,12 +45,14 @@ function initBlocklyRunner(context, messageCallback) {
          var itp = interpreters[0];
          if(itp.isa(value, itp.ARRAY)) {
             var strs = [];
-            for(var i = 0; i < value.length; i++) {
+            for(var i = 0; i < value.properties.length; i++) {
                strs[i] = runner.valueToString(value.properties[i]);
             }
             return '['+strs.join(', ')+']';
-         } else {
+         } else if(value && value.toString) {
             return value.toString();
+         } else {
+            return "" + value;
          }
       };
 
@@ -50,10 +60,12 @@ function initBlocklyRunner(context, messageCallback) {
          // Show a popup displaying the value of a block in step-by-step mode
          if(context.display && runner.stepMode) {
             var displayStr = runner.valueToString(value);
-            if(value.type == 'boolean') {
+            if(value && value.type == 'boolean') {
                displayStr = value.data ? runner.strings.valueTrue : runner.strings.valueFalse;
             }
-            if(varName) {
+            if(varName == '@@LOOP_ITERATION@@') {
+               displayStr = runner.strings.loopIteration + ' ' + displayStr;
+            } else if(varName) {
                varName = varName.toString();
                // Get the original variable name
                for(var dbIdx in Blockly.JavaScript.variableDB_.db_) {
@@ -76,33 +88,69 @@ function initBlocklyRunner(context, messageCallback) {
          }
          return value;
       };
-      
+
       runner.waitDelay = function(callback, value, delay) {
          if (delay > 0) {
             runner.stackCount = 0;
-            runner.delayFactory.createTimeout("wait" + context.curRobot + "_" + Math.random(), function() {
+            runner.delayFactory.createTimeout("wait" + context.curNode + "_" + Math.random(), function() {
                   runner.noDelay(callback, value);
                },
                delay
             );
+            runner.allowStepsWithoutDelay = Math.min(runner.allowStepsWithoutDelay + Math.ceil(delay/10), 100);
          } else {
             runner.noDelay(callback, value);
          }
       };
 
+      runner.waitEvent = function(callback, target, eventName, func) {
+         runner.stackCount = 0;
+         var listenerFunc = null;
+         listenerFunc = function(e) {
+            target.removeEventListener(eventName, listenerFunc);
+            runner.noDelay(callback, func(e));
+         };
+         target.addEventListener(eventName, listenerFunc);
+      };
+
+      runner.waitCallback = function(callback) {
+         // Returns a callback to be called once we can continue the execution
+         //runner.stackCount = 0;
+         return function(value) {
+            runner.noDelay(callback, value);
+         }
+      };
+
       runner.noDelay = function(callback, value) {
          var primitive = undefined;
-         if (value != undefined) {
-            primitive = interpreters[context.curRobot].createPrimitive(value);
+         if (value !== undefined) {
+            if(value && (typeof value.length != 'undefined' ||
+                         typeof value === 'object')) {
+               // It's an array, create a primitive out of it
+               primitive = interpreters[context.curNode].nativeToPseudo(value);
+            } else {
+               primitive = value;
+            }
          }
-         if (runner.stackCount > 100) {
+         var infiniteLoopDelay = false;
+         if(context.allowInfiniteLoop) {
+            if(runner.allowStepsWithoutDelay > 0) {
+               runner.allowStepsWithoutDelay -= 1;
+            } else {
+               infiniteLoopDelay = true;
+            }
+         }
+         if(runner.stackCount > 100 || (infiniteLoopDelay && runner.stackCount > 5)) {
+            // In case of an infinite loop, add some delay to slow down a bit
+            var delay = infiniteLoopDelay ? 50 : 0;
+
             runner.stackCount = 0;
             runner.stackResetting = true;
             runner.delayFactory.createTimeout("wait_" + Math.random(), function() {
                runner.stackResetting = false;
                callback(primitive);
                runner.runSyncBlock();
-            }, 0);
+            }, delay);
          } else {
             runner.stackCount += 1;
             callback(primitive);
@@ -110,7 +158,99 @@ function initBlocklyRunner(context, messageCallback) {
          }
       };
 
+      runner.allowSwitch = function(callback) {
+         // Tells the runner that we can switch the execution to another node
+         var curNode = context.curNode;
+         var ready = function(readyCallback) {
+            if(!runner.isRunning()) { return; }
+            if(runner.waitingOnReadyNode) {
+               runner.curNode = curNode;
+               runner.waitingOnReadyNode = false;
+               context.setCurNode(curNode);
+               readyCallback(callback);
+            } else {
+               runner.nodesReady[curNode] = function() {
+                  readyCallback(callback);
+               };
+            }
+         };
+         runner.nodesReady[curNode] = false;
+         runner.startNextNode(curNode);
+         return ready;
+      };
+
+      runner.defaultSelectNextNode = function(runner, previousNode) {
+         var i = previousNode + 1;
+         if(i >= runner.nbNodes) { i = 0; }
+         while(i != previousNode) {
+            if(runner.nodesReady[i]) {
+               break;
+            } else {
+               i++;
+            }
+            if(i >= runner.nbNodes) { i = 0; }
+         }
+         return i;
+      };
+
+      // Allow the next node selection process to be customized
+      runner.selectNextNode = runner.defaultSelectNextNode;
+
+      runner.startNextNode = function(curNode) {
+         // Start the next node when one has been switched from
+         var newNode = runner.selectNextNode(runner, curNode);
+         function setWaiting() {
+            for(var i = 0; i < runner.nodesReady.length ; i++) {
+               if(!context.programEnded[i]) {
+                  // TODO :: Timeout?
+                  runner.waitingOnReadyNode = true;
+                  return;
+               }
+            }
+            // All nodes finished their program
+            // TODO :: better message
+            if(runner.nodesReady.length > 1) {
+               throw "all nodes finished (blockly_runner)";
+            }
+         }
+         if(newNode == curNode) {
+            // No ready node
+            setWaiting();
+         } else {
+            runner.curNode = newNode;
+            var ready = runner.nodesReady[newNode];
+            if(ready) {
+               context.setCurNode(newNode);
+               runner.nodesReady[newNode] = false;
+               if(typeof ready == 'function') {
+                  ready();
+               } else {
+                  runner.runSyncBlock();
+               }
+            } else {
+               setWaiting();
+            }
+         }
+      };
+
       runner.initInterpreter = function(interpreter, scope) {
+         // Wrapper for async functions
+         var createAsync = function(func) {
+            return function() {
+               var args = [];
+               for(var i=0; i < arguments.length-1; i++) {
+                  // TODO :: Maybe JS-Interpreter has a better way of knowing?
+                  if(typeof arguments[i] != 'undefined' && arguments[i].isObject) {
+                     args.push(interpreter.pseudoToNative(arguments[i]));
+                  } else {
+                     args.push(arguments[i]);
+                  }
+               }
+               args.push(arguments[arguments.length-1]);
+               func.apply(func, args);
+               };
+         };
+
          var makeHandler = function(runner, handler) {
             // For commands belonging to the "actions" category, we count the
             // number of actions to put a limit on steps without actions
@@ -119,7 +259,7 @@ function initBlocklyRunner(context, messageCallback) {
                handler.apply(this, arguments);
             };
          };
-         
+
          for (var objectName in context.customBlocks) {
             for (var category in context.customBlocks[objectName]) {
                for (var iBlock in context.customBlocks[objectName][category]) {
@@ -135,35 +275,55 @@ function initBlocklyRunner(context, messageCallback) {
                   } else {
                      var handler = blockInfo.handler;
                   }
-                  
-                  interpreter.setProperty(scope, code, interpreter.createAsyncFunction(handler));
+
+                  interpreter.setProperty(scope, code, interpreter.createAsyncFunction(createAsync(handler)));
+               }
+            }
+         }
+
+         var makeNative = function(func) {
+            return function() {
+               var value = func.apply(func, arguments);
+               var primitive = undefined;
+               if (value != undefined) {
+                  if(typeof value.length != 'undefined') {
+                     // It's an array, create a primitive out of it
+                     primitive = interpreters[context.curNode].nativeToPseudo(value);
+                  } else {
+                     primitive = value;
+                  }
                }
-            }            
+               return primitive;
+            };
+         }
+
+         if(Blockly.JavaScript.externalFunctions) {
+            for(var name in Blockly.JavaScript.externalFunctions) {
+               interpreter.setProperty(scope, name, interpreter.createNativeFunction(makeNative(Blockly.JavaScript.externalFunctions[name])));
+            }
          }
-         
-         
+
          /*for (var objectName in context.generators) {
             for (var iGen = 0; iGen < context.generators[objectName].length; iGen++) {
                var generator = context.generators[objectName][iGen];
                interpreter.setProperty(scope, objectName + "_" + generator.labelEn, interpreter.createAsyncFunction(generator.fct));
             }
          }*/
-         interpreter.setProperty(scope, "program_end", interpreter.createAsyncFunction(context.program_end));
+         interpreter.setProperty(scope, "program_end", interpreter.createAsyncFunction(createAsync(runner.program_end)));
 
          function highlightBlock(id, callback) {
             id = id ? id.toString() : '';
-            
+
             if (context.display) {
-               if(!runner.scratchMode) {
-                  context.blocklyHelper.workspace.traceOn(true);
-                  context.blocklyHelper.workspace.highlightBlock(id);
-                  highlightPause = true;
-               } else {
-                  context.blocklyHelper.glowBlock(id);
-                  highlightPause = true;
-               }
+               try {
+                  if(context.infos && !context.infos.actionDelay) {
+                     id = null;
+                  }
+                  context.blocklyHelper.highlightBlock(id);
+                  highlightPause = !!id;
+               } catch(e) {}
             }
-            
+
             // We always execute directly the first highlightBlock
             if(runner.firstHighlight || !runner.stepMode) {
                runner.firstHighlight = false;
@@ -178,14 +338,25 @@ function initBlocklyRunner(context, messageCallback) {
          }
 
          // Add an API function for highlighting blocks.
-         interpreter.setProperty(scope, 'highlightBlock', interpreter.createAsyncFunction(highlightBlock));
+         interpreter.setProperty(scope, 'highlightBlock', interpreter.createAsyncFunction(createAsync(highlightBlock)));
 
          // Add an API function to report a value.
          interpreter.setProperty(scope, 'reportBlockValue', interpreter.createNativeFunction(runner.reportBlockValue));
-        
+
       };
 
-      runner.stop = function() {
+      runner.program_end = function(callback) {
+         var curNode = context.curNode;
+         if(!context.programEnded[curNode]) {
+            context.programEnded[curNode] = true;
+            if(context.programEnded.indexOf(false) == -1) {
+               context.infos.checkEndCondition(context, true);
+            }
+         }
+         runner.noDelay(callback);
+      };
+
+      runner.stop = function(aboutToPlay) {
          for (var iInterpreter = 0; iInterpreter < interpreters.length; iInterpreter++) {
             if (isRunning[iInterpreter]) {
                toStop[iInterpreter] = true;
@@ -195,7 +366,11 @@ function initBlocklyRunner(context, messageCallback) {
 
          if(runner.scratchMode) {
             Blockly.DropDownDiv.hide();
-            context.blocklyHelper.glowBlock(null);
+            context.blocklyHelper.highlightBlock(null);
+         }
+
+         if(!aboutToPlay && window.quickAlgoInterface) {
+            window.quickAlgoInterface.setPlayPause(false);
          }
 
          runner.nbActions = 0;
@@ -205,7 +380,9 @@ function initBlocklyRunner(context, messageCallback) {
       };
 
       runner.runSyncBlock = function() {
+         runner.resetDone = false;
          runner.stepInProgress = true;
+         runner.oneStepDone = false;
          // Handle the callback from last highlightBlock
          if(runner.nextCallback) {
             runner.nextCallback();
@@ -213,39 +390,55 @@ function initBlocklyRunner(context, messageCallback) {
          }
 
          try {
-            for (var iInterpreter = 0; iInterpreter < interpreters.length; iInterpreter++) {
-               context.curRobot = iInterpreter;
-               if (context.infos.checkEndEveryTurn) {
-                  context.infos.checkEndCondition(context, false);
+            if(runner.stepMode && runner.oneStepDone) {
+               runner.stepInProgress = false;
+               return;
+            }
+            var iInterpreter = runner.curNode;
+            context.setCurNode(iInterpreter);
+            if (context.infos.checkEndEveryTurn) {
+               context.infos.checkEndCondition(context, false);
+            }
+            var interpreter = interpreters[iInterpreter];
+            var wasPaused = interpreter.paused_;
+            while(!context.programEnded[iInterpreter]) {
+               if(!context.allowInfiniteLoop &&
+                     (context.curSteps[iInterpreter].total >= runner.maxIter || context.curSteps[iInterpreter].withoutAction >= runner.maxIterWithoutAction)) {
+                  break;
                }
-               var interpreter = interpreters[iInterpreter];
-               while (context.curSteps[iInterpreter].total < runner.maxIter && context.curSteps[iInterpreter].withoutAction < runner.maxIterWithoutAction && !context.programEnded[iInterpreter]) {
-                  if (!interpreter.step() || toStop[iInterpreter]) {
-                     isRunning[iInterpreter] = false;
-                     break;
-                  }
-                  if (interpreter.paused_) {
-                     break;
-                  }
-                  context.curSteps[iInterpreter].total++;
-                  if(context.curSteps[iInterpreter].lastNbMoves != runner.nbActions) {
-                     context.curSteps[iInterpreter].lastNbMoves = runner.nbActions;
-                     context.curSteps[iInterpreter].withoutAction = 0;
-                  } else {
-                     context.curSteps[iInterpreter].withoutAction++;
-                  }
+               if (!interpreter.step() || toStop[iInterpreter]) {
+                  isRunning[iInterpreter] = false;
+                  return;
                }
-               if (!context.programEnded[iInterpreter]) {
-                  if (context.curSteps[iInterpreter].total >= runner.maxIter) {
-                     isRunning[iInterpreter] = false;
-                     throw context.blocklyHelper.strings.tooManyIterations;
-                  } else if(context.curSteps[iInterpreter].withoutAction >= runner.maxIterWithoutAction) {
-                     isRunning[iInterpreter] = false;
-                     throw context.blocklyHelper.strings.tooManyIterationsWithoutAction;
-                  }
+               if (interpreter.paused_) {
+                  runner.oneStepDone = !wasPaused;
+                  return;
+               }
+               context.curSteps[iInterpreter].total++;
+               if(context.curSteps[iInterpreter].lastNbMoves != runner.nbActions) {
+                  context.curSteps[iInterpreter].lastNbMoves = runner.nbActions;
+                  context.curSteps[iInterpreter].withoutAction = 0;
+               } else {
+                  context.curSteps[iInterpreter].withoutAction++;
                }
             }
+
+            if (!context.programEnded[iInterpreter] && !context.allowInfiniteLoop) {
+               if (context.curSteps[iInterpreter].total >= runner.maxIter) {
+                  isRunning[iInterpreter] = false;
+                  throw context.blocklyHelper.strings.tooManyIterations;
+               } else if(context.curSteps[iInterpreter].withoutAction >= runner.maxIterWithoutAction) {
+                  isRunning[iInterpreter] = false;
+                  throw context.blocklyHelper.strings.tooManyIterationsWithoutAction;
+               }
+            }
+
+            if(context.programEnded[iInterpreter] && !runner.interpreterEnded[iInterpreter]) {
+               runner.interpreterEnded[iInterpreter] = true;
+               runner.startNextNode(iInterpreter);
+            }
          } catch (e) {
+            context.onExecutionEnd && context.onExecutionEnd();
             runner.stepInProgress = false;
 
             for (var iInterpreter = 0; iInterpreter < interpreters.length; iInterpreter++) {
@@ -253,7 +446,7 @@ function initBlocklyRunner(context, messageCallback) {
                context.programEnded[iInterpreter] = true;
             }
 
-            var message = e.toString();
+            var message = e.message || e.toString();
 
             // Translate "Unknown identifier" message
             if(message.substring(0, 20) == "Unknown identifier: ") {
@@ -267,7 +460,12 @@ function initBlocklyRunner(context, messageCallback) {
                }
                message = runner.strings.uninitializedVar + ' ' + varName;
             }
-            
+
+            if(message.indexOf('undefined') != -1) {
+               console.error(e)
+               message += '. ' + runner.strings.undefinedMsg;
+            }
+
             if ((context.nbTestCases != undefined) && (context.nbTestCases > 1)) {
                if (context.success) {
                   message = context.messagePrefixSuccess + message;
@@ -276,12 +474,15 @@ function initBlocklyRunner(context, messageCallback) {
                }
             }
             if (context.success) {
-               message = "" + message + ""; 
+               message = "" + message + "";
                if (context.linkBack) {
                   //message += "
Retour à la liste des questions";
                }
             }
             runner.delayFactory.destroyAll();
+            if(window.quickAlgoInterface) {
+               window.quickAlgoInterface.setPlayPause(false);
+            }
             setTimeout(function() { messageCallback(message); }, 0);
          }
       };
@@ -289,14 +490,20 @@ function initBlocklyRunner(context, messageCallback) {
       runner.initCodes = function(codes) {
          runner.delayFactory.destroyAll();
          interpreters = [];
+         runner.nbNodes = codes.length;
+         runner.curNode = 0;
+         runner.nodesReady = [];
+         runner.waitingOnReadyNode = false;
          runner.nbActions = 0;
          runner.stepInProgress = false;
          runner.stepMode = false;
+         runner.allowStepsWithoutDelay = 0;
          runner.firstHighlight = true;
          runner.stackCount = 0;
          context.programEnded = [];
+         runner.interpreterEnded = [];
          context.curSteps = [];
-         context.reset();
+         runner.reset(true);
          for (var iInterpreter = 0; iInterpreter < codes.length; iInterpreter++) {
             context.curSteps[iInterpreter] = {
                total: 0,
@@ -304,9 +511,21 @@ function initBlocklyRunner(context, messageCallback) {
                lastNbMoves: 0
             };
             context.programEnded[iInterpreter] = false;
+            runner.interpreterEnded[iInterpreter] = false;
+
             interpreters.push(new Interpreter(codes[iInterpreter], runner.initInterpreter));
+            runner.nodesReady.push(true);
             isRunning[iInterpreter] = true;
             toStop[iInterpreter] = false;
+
+            if(iInterpreter > 0) {
+               // This is a fix for pseudoToNative identity comparisons (===),
+               // as without that fix, pseudo-objects coming from another
+               // interpreter would not get recognized to the right type.
+               interpreters[iInterpreter].ARRAY = interpreters[0].ARRAY;
+               interpreters[iInterpreter].ARRAY_PROTO = interpreters[0].ARRAY_PROTO;
+               interpreters[iInterpreter].REGEXP = interpreters[0].REGEXP;
+            }
          }
          runner.maxIter = 400000;
          if (context.infos.maxIter != undefined) {
@@ -322,7 +541,9 @@ function initBlocklyRunner(context, messageCallback) {
             runner.maxIterWithoutAction = runner.maxIter;
          }
       };
+
       runner.runCodes = function(codes) {
+         if(!codes || !codes.length) { return; }
          runner.initCodes(codes);
          runner.runSyncBlock();
       };
@@ -330,8 +551,11 @@ function initBlocklyRunner(context, messageCallback) {
       runner.run = function () {
          runner.stepMode = false;
          if(!runner.stepInProgress) {
-            for (var iInterpreter = 0; iInterpreter < interpreters.length; iInterpreter++) {
-               interpreters[iInterpreter].paused_ = false;
+            // XXX :: left to avoid breaking tasks in case I'm wrong, but we
+            // should be able to remove this code (it breaks multi-interpreter
+            // step-by-step)
+            if(interpreters.length == 1) {
+               interpreters[0].paused_ = false;
             }
             runner.runSyncBlock();
          }
@@ -340,14 +564,16 @@ function initBlocklyRunner(context, messageCallback) {
       runner.step = function () {
          runner.stepMode = true;
          if(!runner.stepInProgress) {
-            for (var iInterpreter = 0; iInterpreter < interpreters.length; iInterpreter++) {
-               interpreters[iInterpreter].paused_ = false;
+            // XXX :: left to avoid breaking tasks in case I'm wrong, but we
+            // should be able to remove this code (it breaks multi-interpreter
+            // step-by-step)
+            if(interpreters.length == 1) {
+               interpreters[0].paused_ = false;
             }
             runner.runSyncBlock();
          }
       };
 
-
       runner.nbRunning = function() {
          var nbRunning = 0;
          for (var iInterpreter = 0; iInterpreter < interpreters.length; iInterpreter++) {
@@ -362,6 +588,20 @@ function initBlocklyRunner(context, messageCallback) {
          return this.nbRunning() > 0;
       };
 
+      runner.reset = function(aboutToPlay) {
+         if(runner.resetDone) { return; }
+         context.reset();
+         runner.stop(aboutToPlay);
+         runner.resetDone = true;
+      };
+
+      runner.signalAction = function() {
+         // Allows contexts to signal an "action" happened
+         for (var iInterpreter = 0; iInterpreter < interpreters.length; iInterpreter++) {
+            context.curSteps[iInterpreter].withoutAction = 0;
+         }
+      };
+
       context.runner = runner;
       context.callCallback = runner.noDelay;
       context.programEnded = [];
diff --git a/pemFioi/quickAlgo/context.js b/pemFioi/quickAlgo/context.js
index b246d6dfd..10b7d8412 100644
--- a/pemFioi/quickAlgo/context.js
+++ b/pemFioi/quickAlgo/context.js
@@ -2,11 +2,19 @@ var quickAlgoContext = function(display, infos) {
   var context = {
     display: display,
     infos: infos,
-    nbRobots: 1
+    nbCodes: 1, // How many different codes the user can edit
+    nbNodes: 1 // How many nodes will be executing programs
     };
 
   // Set the localLanguageStrings for this context
   context.setLocalLanguageStrings = function(localLanguageStrings) {
+    if(window.BlocksHelper && infos && infos.blocksLanguage) {
+      localLanguageStrings = BlocksHelper.mutateBlockStrings(
+        localLanguageStrings,
+        infos.blocksLanguage
+        );
+    }
+
     context.localLanguageStrings = localLanguageStrings;
     window.stringsLanguage = window.stringsLanguage || "fr";
     window.languageStrings = window.languageStrings || {};
@@ -26,16 +34,21 @@ var quickAlgoContext = function(display, infos) {
       return;
     }
     for (var key1 in source) {
-      if (dest[key1] != undefined) {
-        if (typeof dest[key1] == "object") {
-          replaceStringsRec(source[key1], dest[key1]);
-        } else {
-          dest[key1] = source[key1];
-        }
+      if (dest[key1] != undefined && typeof dest[key1] == "object") {
+        context.importLanguageStrings(source[key1], dest[key1]);
+      } else {
+        dest[key1] = source[key1];
       }
     }
   };
 
+  // Get the list of concepts
+  // List can be defined either in context.conceptList, or by redefining this
+  // function
+  context.getConceptList = function() {
+    return context.conceptList || [];
+  };
+
   // Default implementations
   context.changeDelay = function(newDelay) {
     // Change the action delay while displaying
@@ -62,6 +75,11 @@ var quickAlgoContext = function(display, infos) {
     }
   };
 
+  context.setCurNode = function(curNode) {
+    // Set the current node
+    context.curNode = curNode;
+  };
+
   context.debug_alert = function(message, callback) {
     // Display debug information
     message = message ? message.toString() : '';
@@ -91,14 +109,181 @@ var quickAlgoContext = function(display, infos) {
     // Unload the context, cleaning up
   };
 
-  context.program_end = function(callback) {
-    var curRobot = context.curRobot;
-    if (!context.programEnded[curRobot]) {
-      context.programEnded[curRobot] = true;
-      infos.checkEndCondition(context, true);
-    }
-    context.waitDelay(callback);
+  context.provideBlocklyColours = function() {
+    // Provide colours for Blockly
+    return {};
   };
 
+  // Properties we expect the context to have
+  context.localLanguageStrings = {};
+  context.customBlocks = {};
+  context.customConstants = {};
+  context.conceptList = [];
+
   return context;
 };
+
+
+// Global variable allowing access to each getContext
+var quickAlgoLibraries = {
+  libs: {},
+  order: [],
+  contexts: {},
+  mergedMode: false,
+
+  get: function(name) {
+    return this.libs[name];
+  },
+
+  getContext: function() {
+    // Get last context registered
+    if(this.order.length) {
+      if(this.mergedMode) {
+        var gc = this.getMergedContext();
+        return gc.apply(gc, arguments);
+      } else {
+        var gc = this.libs[this.order[this.order.length-1]];
+        return gc.apply(gc, arguments);
+      }
+    } else {
+      if(getContext) {
+        return getContext.apply(getContext, arguments);
+      } else {
+        throw "No context registered!";
+      }
+    }
+  },
+
+  setMergedMode: function(options) {
+    // Set to retrieve a context merged from all contexts registered
+    // options can be true or an object with the following properties:
+    // -displayed: name of module to display first
+    this.mergedMode = options;
+  },
+
+  getMergedContext: function() {
+    // Make a context merged from multiple contexts
+    if(this.mergedMode.displayed && this.order.indexOf(this.mergedMode.displayed) > -1) {
+      this.order.splice(this.order.indexOf(this.mergedMode.displayed), 1);
+      this.order.unshift(this.mergedMode.displayed);
+    }
+    var that = this;
+
+    return function(display, infos) {
+      // Merged context
+      var context = quickAlgoContext(display, infos);
+      var localLanguageStrings = {};
+      context.customBlocks = {};
+      context.customConstants = {};
+      context.conceptList = [];
+
+      var subContexts = [];
+      for(var scIdx=0; scIdx < that.order.length; scIdx++) {
+        // Only the first context gets display = true
+        var newContext = that.libs[that.order[scIdx]](display && (scIdx == 0), infos);
+        subContexts.push(newContext);
+
+        // Merge objects
+        mergeIntoObject(localLanguageStrings, newContext.localLanguageStrings);
+        mergeIntoObject(context.customBlocks, newContext.customBlocks);
+        mergeIntoObject(context.customConstants, newContext.customConstants);
+        mergeIntoArray(context.conceptList, newContext.conceptList);
+
+        // Merge namespaces
+        for(var namespace in newContext.customBlocks) {
+          if(!context[namespace]) { context[namespace] = {}; }
+          for(var category in newContext.customBlocks[namespace]) {
+            var blockList = newContext.customBlocks[namespace][category];
+            for(var i=0; i < blockList.length; i++) {
+              var name = blockList[i].name;
+              if(name && !context[namespace][name] && newContext[namespace][name]) {
+                context[namespace][name] = function(nc, func) {
+                  return function() {
+                    context.propagate(nc);
+                    func.apply(nc, arguments);
+                    };
+                }(newContext, newContext[namespace][name]);
+              }
+            }
+          }
+        }
+      }
+
+      var strings = context.setLocalLanguageStrings(localLanguageStrings);
+
+      // Propagate properties to the subcontexts
+      context.propagate = function(subContext) {
+        var properties = ['raphaelFactory', 'delayFactory', 'blocklyHelper', 'display', 'runner'];
+        for(var i=0; i < properties.length; i++) {
+          subContext[properties[i]] = context[properties[i]];
+        }
+      }
+
+      // Merge functions
+      context.reset = function(taskInfos) {
+        for(var i=0; i < subContexts.length; i++) {
+          context.propagate(subContexts[i]);
+          subContexts[i].reset(taskInfos);
+        }
+      };
+      context.resetDisplay = function() {
+        for(var i=0; i < subContexts.length; i++) {
+          context.propagate(subContexts[i]);
+          subContexts[i].resetDisplay();
+        }
+      };
+      context.updateScale = function() {
+        for(var i=0; i < subContexts.length; i++) {
+          context.propagate(subContexts[i]);
+          subContexts[i].updateScale();
+        }
+      };
+      context.unload = function() {
+        for(var i=subContexts.length-1; i >= 0; i--) {
+          // Do the unload in reverse order
+          context.propagate(subContexts[i]);
+          subContexts[i].unload();
+        }
+      };
+      context.provideBlocklyColours = function() {
+        var colours = {};
+        for(var i=0; i < subContexts.length; i++) {
+          mergeIntoObject(colours, subContexts[i].provideBlocklyColours());
+        }
+        return colours;
+      };
+
+      // Fetch some other data / functions some contexts have
+      for(var i=0; i < subContexts.length; i++) {
+        for(var prop in subContexts[i]) {
+          if(typeof context[prop] != 'undefined') { continue; }
+          if(typeof subContexts[i][prop] == 'function') {
+            context[prop] = function(sc, func) {
+              return function() {
+                context.propagate(sc);
+                func.apply(sc, arguments);
+              }
+            }(subContexts[i], subContexts[i][prop]);
+          } else {
+            context[prop] = subContexts[i][prop];
+          }
+        }
+      };
+
+      return context;
+    };
+  },
+
+  register: function(name, func) {
+    if(this.order.indexOf(name) > -1) { return; }
+    this.libs[name] = func;
+    this.order.push(name);
+  }
+};
+
+// Initialize with contexts loaded before
+if(window.quickAlgoLibrariesList) {
+  for(var i=0; i` and `
` tags,
+  and user instructions in the `
` tag.
+
+In the `task.js` file, change the word `template` to the name of your library.
+
+From there, you can open the file `index.html` in your browser and have fun
+with the three effectless blocks.
+
+## Program your first block
+
+As an example, we’ll give parts of an `amicable` library that has a block which checks
+if two given numbers are amicable and sets a global variable to `false` if they are not.
+
+### Global data initialization
+
+Firstly, you should add data in your `context.myLib` variable. Your blocks will register internally
+their effect on this data so that it can be checked for the task’s validation.
+
+In our example, we need two variables: `allAmicable` which is our boolean flag
+and `testedPairs` which saves how many pairs of numbers have been tested.
+
+```js
+context.amicable = {
+   allAmicable: true,
+   testedPairs: 0,
+};
+```
+
+The variables must be reassigned their initial value in the `context.reset` function:
+```js
+context.reset = function(taskInfos) {
+   context.amicable.allAmicable = true;
+   context.amicable.testedPairs = 0;
+   if (context.display) context.resetDisplay();
+}
+```
+
+### The block’s function
+
+Now you can create the function that will realize the action of your block.
+It must be a member of `context.myLib` and must have an additional `callback` parameter.
+The callback must be called at the end of your function for quickAlgo to work,
+this way: `context.waitDelay(callback)`.
+
+If the display is available, the function should do the necessary display changes
+before calling the callback. We’ll treat this just after.
+
+```js
+context.amicable.testPair = function(nb1, nb2, callback) {
+   var divisSum1 = 0, divisSum2 = 0;
+   for (var divis = 2; divis < Math.floor(Math.max(nb1, nb2) / 2); divis++) {
+      if (nb1 % divis == 0) divisSum1 += divis;
+      if (nb2 % divis == 0) divisSum2 += divis;
+   }
+   if (divisSum1 != divisSum2) context.amicable.allAmicable = false;
+   context.amicable.testedPairs++;
+
+   if (context.display) {
+      // ...
+   }
+
+   context.waitDelay(callback);
+}
+```
+
+### Displaying the block’s effect
+
+The display must be initialized in the `context.resetDisplay` function.
+A HTML element whose ID is `grid` is provided by quickAlgo as an area for displaying.
+Here, we simply empty the element.
+
+```js
+context.resetDisplay = function() {
+   $('#grid').empty();
+   context.blocklyHelper.updateSize();
+   context.updateScale();
+}
+```
+
+Our `testPair` block shows the result of the test as colored text.
+
+```js
+context.amicable.testPair = function(nb1, nb2, callback) {
+   // ...
+
+   if (context.display) {
+      var right = divisSum1 == divisSum2;
+      $('#grid').append(
+         $('
').css('color', right ? 'green' : 'red')
+            .text(nb1 + " and " + nb2 + (right ? " are amicable." : "are not amicable!")));
+   }
+
+   context.waitDelay(callback);
+}
+```
+
+### Lists of blocks
+
+Your block must be listed in the `context.customBlocks` object with prototype information.
+Just imitate the given examples: your function should be included in a namespace
+(usually the name of your library) and a category, and may have parameters and a return value.
+
+```js
+context.customBlocks = {
+   amicable: {
+      testing: [
+         { name: 'testPair', params: [null, null] },
+      ],
+   },
+};
+```
+
+For the block to be usable in your task, you must add it in `task.js`,
+in `subTask.gridInfos.includeBlocks.generatedBlocks` as `namespace: ["block"]`.
+In the case of the `testPair` block of the `amicable` library it looks like:
+```js
+subTask.gridInfos = {
+   // ...
+   includeBlocks: {
+      // ...
+      generatedBlocks: {
+         amicable: ["testPair"],
+      }
+      // ...
+   }
+   // ...
+};
+```
+
+### Localization and color
+
+In `localLanguageStrings`, you must specify texts for Blockly and Python,
+at least in the `label` and `code` parts:
+```js
+var localLanguageStrings = {
+   en: {
+      label: {
+         testPair: "test if %1 and %2 are amicable"
+      },
+      code: {
+         testPair: "testPair"
+      }
+   }
+};
+```
+* `label` is for the block. `%1`, `%2`, etc. are required placeholders for the parameters.
+* `code` is the function name in Python.
+
+Additionnally, you may specify a color for the category (for `testPair` it’s `testing`)
+in the `context.provideBlocklyColours` function.
+
+Now, your block should be fully functional and usable in your sample task.
+
+## Manage the display
+
+… (use Raphael and Processing as examples)
+
+## Check end conditions
+
+Your library should provide functions that are outside of the context
+to check if a context has reached the winning state or an invalid state.
+Such functions should throw the relevant message to the user, with the `throw` keyword.
+
+For the amicable library, we could have the following function:
+```js
+var amicableCheckEndConditions = {
+   checkAllAmicable: function(context, lastTurn) {
+      if (!context.amicable.allAmicable) {
+         throw("You gave a pair that is not composed of amicable numbers!");
+      } else if (lastTurn) {
+         throw("All numbers have been tested and they’re all amicable.");
+      }
+      return true;
+   }
+};
+```
+
+The `lastTurn` parameter is a boolean which indicates if the checking
+is done after all blocks have been run.
+
+If the function has nothing to say, it should return `true`.
+
+The function you use in your task must be specified in `task.js`, in `subTask.gridInfos.checkEndCondition`:
+```js
+subTask.gridInfos = {
+   // ...
+   checkEndEveryTurn: true,
+   checkEndCondition: amicableCheckEndConditions.checkAllAmicable,
+   // ...
+};
+```
+
+The `checkEndEveryTurn` controls whether the program should be checked for each block.
+If it’s `false`, the `lastTurn` parameter given to the checking function will always be `true`.
+
+Note that the checking function might receive a context that has no display,
+so you should not scan the display to do your checking. Everything that has to be checked
+must be stored within variables that a display-less context has.
+
+## Define advanced blocks
+
+### Parameter types and return values
+
+…
+
+### Default values
+
+…
+
+### Custom blocks
+
+… ([link to Blockly doc](https://developers.google.com/blockly/guides/create-custom-blocks/overview))
+
+## Texts and translations
+
+…
diff --git a/pemFioi/quickAlgo/doc.html b/pemFioi/quickAlgo/doc.html
index 770a5fc55..f38d1d2f3 100644
--- a/pemFioi/quickAlgo/doc.html
+++ b/pemFioi/quickAlgo/doc.html
@@ -24,6 +24,10 @@
   
   
+  
+  
   ');
+    },
+
+    bindBlocklyHelper: function(blocklyHelper) {
+        this.blocklyHelper = blocklyHelper;
+    },
+
+    devMode: function() {
+        $('#editorMenu .item').show();
+    },
+
+    onScaleDrawingChange: function(e) {
+        var scaled = $(e.target).prop('checked');
+        $("#gridContainer").toggleClass('gridContainerScaled', scaled);
+        $("#blocklyLibContent").toggleClass('blocklyLibContentScaled', scaled);
+        this.context.setScale(scaled ? 2 : 1);
+    },
+
+    onEditorChangeFct: function() {
+        if(this.displayedAltCode == 'python') {
+            this.displayBlocklyPython();
+        }
+    },
+    onEditorChange: function() {
+        // This function will replace itself with the debounced onEditorChangeFct
+        this.onEditorChange = debounce(this.onEditorChangeFct.bind(this), 500, false);
+        this.onEditorChangeFct();
+    },
+
+    blinkRemaining: function(times, red) {
+        var capacity = $('.capacity');
+        if(times % 2 == 0) {
+            capacity.removeClass('capacityRed');
+        } else {
+            capacity.addClass('capacityRed');
+        }
+        this.delayFactory.destroy('blinkRemaining');
+        if(times > (red ? 1 : 0)) {
+            this.delayFactory.createTimeout('blinkRemaining', function() { quickAlgoInterface.blinkRemaining(times - 1, red); }, 400);
+        }
+    },
+
+    displayCapacity: function(info) {
+        // Display remaining capacity
+        // Accepts an info item with optional keys :
+        // -text : Text to display
+        // -warning : Display as a warning
+        // -invalid : Display as invalid (program can't be executed)
+        // -type : Type of the text displayed (capacity, forbidden, limited)
+
+        $('.capacity').html(info.text ? info.text : '');
+
+        if(info.invalid) {
+            this.blinkRemaining(11, true);
+
+            // Lock player controls
+            this.displayError(info.text, true);
+
+            if(displayHelper && info.popup && info.type == 'capacity' && !this.capacityPopupDisplayed[info.type]) {
+                // Display warning (only for capacity-type messages)
+                displayHelper.showPopupMessage(this.strings.capacityWarning, 'blanket', displayHelper.strings.alright, null, null, "warning");
+                this.capacityPopupDisplayed[info.type] = true;
+            }
+        } else if(info.warning) {
+            this.blinkRemaining(6);
+            this.displayError(null, true);
+        } else {
+            this.blinkRemaining(0);
+            this.displayError(null, true);
+        }
+    },
+
+
+    stepDelayMin: 25,
+    stepDelayMax: 250,
+
+    refreshStepDelay: function() {
+        var v = parseInt($('.speedCursor').val(), 10);
+        var delay = this.stepDelayMax - v;
+        task.displayedSubTask.setStepDelay(delay);
+    },
+
+    initPlaybackControls: function() {
+        var speedControls =
+            '
' +
+                '
' +
+                    '
' +
+                    '
' +
+                    '
' +
+                    '
' +
+                    '
' +
+                '
' +
+                '
' +
+                    '' +
+                    '' +
+                    '' +
+                    '' +
+                '
' +
+            '
';
+        if($('#task .speedControls').length) {
+            return;
+        }
+        // place speed controls depending on layout
+        // speed controls in taskToolbar on mobiles
+        // in intro on portrait tablets
+        // in introGrid on other layouts (landscape tablets and desktop)
+
+        $('#mode-player').append(speedControls);
+        $('#introGrid').append(speedControls);
+        this.updateControlsDisplay();
+    },
+
+    playerControls: function(ctrl) {
+        if(ctrl == 'backToFirst') {
+            task.displayedSubTask.stop();
+            this.setPlayPause(false);
+        } else if(ctrl == 'playPause') {
+            if($('.playerControls .playPause').hasClass('play')) {
+                this.refreshStepDelay();
+                this.setPlayPause(true);
+                task.displayedSubTask.play();
+            } else {
+                this.setPlayPause(false);
+                task.displayedSubTask.pause();
+            }
+        } else if(ctrl == 'nextStep') {
+            this.setPlayPause(false);
+            task.displayedSubTask.step();
+        } else if(ctrl == 'goToEnd') {
+            task.displayedSubTask.setStepDelay(0);
+            task.displayedSubTask.play();
+            this.setPlayPause(false);
+        } else if(ctrl == 'displaySpeedSlider') {
+            $('#mode-player').addClass('displaySpeedSlider');
+            $('#introGrid .speedControls').addClass('displaySpeedSlider');
+        } else if(ctrl == 'hideSpeedSlider') {
+           $('#mode-player').removeClass('displaySpeedSlider');
+           $('#introGrid .speedControls').removeClass('displaySpeedSlider');
+        } else if(ctrl == 'speedSlower') {
+            var el = $('.speedCursor'),
+                maxVal = parseInt(el.attr('max'), 10),
+                delta = Math.floor(maxVal / 10),
+                newVal = parseInt(el.val(), 10) - delta;
+            el.val(Math.max(newVal, 0));
+            quickAlgoInterface.refreshStepDelay();
+        } else if(ctrl == 'speedFaster') {
+            var el = $('.speedCursor'),
+                maxVal = parseInt(el.attr('max'), 10),
+                delta = Math.floor(maxVal / 10),
+                newVal = parseInt(el.val(), 10) + delta;
+            el.val(Math.min(newVal, maxVal));
+            quickAlgoInterface.refreshStepDelay();
+        }
+    },
+
+    setPlayPause: function(isPlaying) {
+        if(isPlaying) {
+            $('.playerControls .playPause').html('');
+            $('.playerControls .playPause').removeClass('play').addClass('pause');
+        } else {
+            $('.playerControls .playPause').html('');
+            $('.playerControls .playPause').removeClass('pause').addClass('play');
+        }
+    },
+
+    initTestSelector: function (nbTestCases) {
+        // Create the DOM for the tests display
+        this.nbTestCases = nbTestCases;
+        var curLevel = this.level;
+        var testTabs = '
';
+        for(var iTest=0; iTest 1) {
+                var curTest = iTest + 1;
+                var testImg = '';
+                // Test thumbnail
+                var levelTestImg = $('img#test_' + curLevel + '_' + curTest);
+                if(levelTestImg.length) {
+                    testImg = '
' +
+                                 'grid thumbnail for test '+curTest+'' +
+                              '
';
+                } else if (this.options.hasTestThumbnails) {
+                    // hasTestThumbnails is a legacy option
+                    // TODO :: remove
+                    testImg = '
' +
+                            'grid thumbnail for test '+curTest+'' +
+                        '
';
+                }
+                testTabs += '' +
+                    '
' +
+                        '' +
+                        testImg +
+                    '
';
+            }
+        }
+        testTabs += "
";
+        $('#testSelector').html(testTabs);
+
+        this.updateTestSelector(0);
+        this.resetTestScores();
+        this.initPlaybackControls();
+    },
+
+
+    updateTestScores: function (testScores) {
+        // Display test results
+        var testData = task.displayedSubTask.data[task.displayedSubTask.level];
+
+        for(var iTest=0; iTest';
+            } else if(testScores[iTest].successRate >= 1) {
+                var icon = '\
+                    \
+                        \
+                    ';
+            } else if(testScores[iTest].successRate > 0) {
+                var icon = '\
+                    \
+                        \
+                    ';
+            } else {
+                var icon = '\
+                    \
+                        \
+                    ';
+            }
+
+            var testName = this.strings.testLabel + ' '+(iTest+1);
+            if (testData[iTest].hasOwnProperty("testName"))
+            {
+                testName = testData[iTest].testName;
+            }
+            $('#testTab'+iTest+' .testTitle').html(icon+' ' + testName);
+        }
+    },
+
+    resetTestScores: function () {
+        // Reset test results display
+        var testData = task.displayedSubTask.data[task.displayedSubTask.level];
+
+        for(var iTest=0; iTest  ' + testName);
+        }
+    },
+
+    updateTestSelector: function (newCurTest) {
+        $("#testSelector .testTab").removeClass('currentTest');
+        $("#testSelector .testTab .testThumbnail").show();
+        $("#testTab"+newCurTest).addClass('currentTest');
+        $("#testTab"+newCurTest + " .testThumbnail").hide();
+        $("#task").append($('#messages'));
+        //$("#testTab"+newCurTest+" .panel-body").prepend($('#grid')).append($('#messages')).show();
+    },
+
+    updateBestAnswerStatus: function() {
+        this.hasBestAnswer = window.displayHelper && window.displayHelper.hasSavedAnswer();
+        $('.editorActions div[rel=best-answer]').toggleClass('editorActionDisabled', !this.hasBestAnswer);
+    },
+
+    createModeTaskToolbar: function() {
+        if($('#taskToolbar').length) { return; }
+        $("#task").append('' +
+            '
' +
+                '
' +
+                    '
' +
+                        '' + this.strings.instructions + '' +
+                    '
' +
+                    '
' +
+                        '' +
+                            '' +
+                            '' + this.strings.editor + '' +
+                        '' +
+                        '' +
+                            "" +
+                            "" +
+                            "" +
+                        '' +
+                    '
' +
+                    '
' +
+                        '' +
+                    '
' +
+                '
' +
+            '
');
+    },
+
+    selectMode: function(mode) {
+        if(mode === this.curMode) return;
+
+        $('#modeSelector').children('div').removeClass('active');
+        $('#modeSelector #' + mode).addClass('active');
+        $('#task').removeClass(this.curMode).addClass(mode);
+        $('#mode-player').removeClass('displaySpeedSlider'); // there should be a better way to achieve this
+        if(mode != 'mode-instructions' && this.blocklyHelper) {
+            this.blocklyHelper.reload();
+        }
+
+        if (mode === 'mode-editor') {
+            this.hideAnalysis();
+        } else if (mode === 'mode-player') {
+            this.showAnalysis();
+        }
+
+        this.curMode = mode;
+        this.onResize();
+    },
+
+    setupTaskIntro: function(level) {
+        if(this.taskIntroContent === null) {
+            this.taskIntroContent = $('#taskIntro').html();
+        }
+        $('#taskIntro').html(this.taskIntroContent);
+        if(level) {
+            for(var otherLevel in displayHelper.levelsRanks) {
+                if(otherLevel == level) { continue; }
+                $('#taskIntro .' + otherLevel).not('.'+level).remove();
+            }
+            $('#taskIntro .' + level).show();
+        }
+        var levelIntroContent = $('#taskIntro').html();
+        var hasLong = $('#taskIntro').find('.long').length;
+        var needLongButton = true;
+        if(window.conceptViewer && conceptViewer.version == 2) {
+            conceptViewer.setIntroHtml(levelIntroContent);
+        } else if (hasLong) {
+            $('#taskIntro').addClass('hasLongIntro');
+            // if long version of introduction exists, append its content to #blocklyLibContent
+            // with proper title and close button
+            // add titles
+            // add display long version button
+            var introLong = '' +
+                '';
+        '
' +
+        '  
' +
+        '    
' +
+        displayStr +
+        '    
' +
+        '  
' +
+        '  
' +
+        '
';
 
     $('.blocklyDropDownDiv').remove();
     $('body').append(dropDownDiv);
@@ -409,6 +715,7 @@ function PythonInterpreter(context, msgCallback) {
     for (var i = 0; i < this._timeouts.length; i += 1) {
       window.clearTimeout(this._timeouts[i]);
     }
+    this._timeouts = [];
     this.removeEditorMarker();
     if(Sk.runQueue) {
       for (var i=0; i 0) {
       var nextExec = Sk.runQueue.shift();
       setTimeout(function () { nextExec.ctrl.runCodes(nextExec.codes); }, 100);
@@ -450,11 +764,20 @@ function PythonInterpreter(context, msgCallback) {
     }
   };
 
+  this.reset = function() {
+    if(this._resetDone) { return; }
+    if(this.isRunning()) {
+      this.stop();
+    }
+    this.context.reset();
+    this._resetDone = true;
+  };
+
   this.step = function () {
     this._resetCallstack();
     this._stepInProgress = true;
     var editor = this.context.blocklyHelper._aceEditor;
-    var markDelay = this.context.infos ? this.context.infos.actionDelay/4 : 0;
+    var markDelay = this.context.infos ? Math.floor(this.context.infos.actionDelay/4) : 0;
     if(this.context.display && (this.stepMode || markDelay > 30)) {
       var curSusp = this._debugger.suspension_stack[this._debugger.suspension_stack.length-1];
       if(curSusp && curSusp.lineno) {
@@ -462,14 +785,30 @@ function PythonInterpreter(context, msgCallback) {
         var splitCode = this._code.split(/[\r\n]/);
         var Range = ace.require('ace/range').Range;
         this._editorMarker = editor.session.addMarker(
-          new Range(curSusp.lineno-1, curSusp.colno, curSusp.lineno, 0),
-          "aceHighlight",
-          "line");
+            new Range(curSusp.lineno-1, curSusp.colno, curSusp.lineno, 0),
+            "aceHighlight",
+            "line");
       }
-      this._paused = true;
-      setTimeout(this.realStep.bind(this), this.context.infos.actionDelay/4);
     } else {
       this.removeEditorMarker();
+    }
+
+    var stepDelay = 0;
+    if(!this.stepMode && this.context.allowInfiniteLoop) {
+      // Add a delay in infinite loops to avoid using all CPU
+      if(this._allowStepsWithoutDelay > 0) {
+        // We just had a waitDelay, don't delay further
+        this._allowStepsWithoutDelay -= 1;
+      } else {
+        stepDelay = 10;
+      }
+    }
+    var realStepDelay = markDelay + stepDelay;
+
+    if(realStepDelay > 0) {
+      this._paused = true;
+      setTimeout(this.realStep.bind(this), realStepDelay);
+    } else {
       this.realStep();
     }
   };
@@ -490,28 +829,54 @@ function PythonInterpreter(context, msgCallback) {
     }
   };
 
-  this._onStepSuccess = function (){
-    this._stepInProgress = false;
+  this._onStepSuccess = function () {
+    // If there are still timeouts, there's still a step in progress
+    this._stepInProgress = !!this._timeouts.length;
     this._continue();
   };
 
   this._onStepError = function (message) {
+    context.onExecutionEnd && context.onExecutionEnd();
+    // We always get there, even on a success
     this.stop();
 
-    message = "" + message + "";
+    message = '' + message;
+
+    // Skulpt doesn't support well NoneTypes
+    if(message.indexOf("TypeError: Cannot read property") > -1 && message.indexOf("undefined") > -1) {
+      message = message.replace(/^.* line/, "TypeError: NoneType value used in operation on line");
+    }
+
+    if(message.indexOf('undefined') > -1) {
+      message += '. ' + window.languageStrings.undefinedMsg;
+    }
+
+    // Transform message depending on whether we successfully
+    if(this.context.success) {
+      message = "" + message + "";
+    } else {
+      message = this.context.messagePrefixFailure + message;
+    }
 
-    this.messageCallback(this.context.messagePrefixFailure + message);
+    this.messageCallback(message);
   };
 
   this._setBreakpoint = function (bp, isTemporary) {
     this._debugger.add_breakpoint(this._editor_filename + ".py", bp, "0", isTemporary);
   };
 
-  this._asyncCallback = function () {
-    return Sk.importMainWithBody(this._editor_filename, true, this._code, true);
-  }
+  this._asyncCallback = function (editor_filename, code) {
+    return function() {
+      return Sk.importMainWithBody(editor_filename, true, code, true);
+    };
+  };
+
+  this.signalAction = function () {
+    // Allows a context to signal an "action" happened
+    this._stepsWithoutAction = 0;
+  };
 }
 
 function initBlocklyRunner(context, msgCallback) {
-   return new PythonInterpreter(context, msgCallback);
+  return new PythonInterpreter(context, msgCallback);
 };
diff --git a/pemFioi/quickAlgo/python_runner_1.5.js b/pemFioi/quickAlgo/python_runner_1.5.js
new file mode 100644
index 000000000..86c2c5b55
--- /dev/null
+++ b/pemFioi/quickAlgo/python_runner_1.5.js
@@ -0,0 +1,899 @@
+/*
+    python_runner:
+        Python code runner.
+*/
+
+var currentPythonContext = null;
+
+function PythonInterpreter(context, msgCallback) {
+  this.context = context;
+  this.messageCallback = msgCallback;
+  this._code = '';
+  this._editor_filename = "";
+  this.context.runner = this;
+  this._maxIterations = 4000;
+  this._maxIterWithoutAction = 50;
+  this._resetCallstackOnNextStep = false;
+  this._paused = false;
+  this._isRunning = false;
+  this._stepInProgress = false;
+  this._resetDone = true;
+  this.stepMode = false;
+  this._steps = 0;
+  this._stepsWithoutAction = 0;
+  this._lastNbActions = null;
+  this._hasActions = false;
+  this._nbActions = 0;
+  this._allowStepsWithoutDelay = 0;
+  this._timeouts = [];
+  this._editorMarker = null;
+  this.availableModules = [];
+  this._argumentsByBlock = {};
+  this._definedFunctions = [];
+
+  this.nbNodes = 0;
+  this.curNode = 0;
+  this.readyNodes = [];
+  this.finishedNodes = [];
+  this.nodeStates = [];
+  this.waitingOnReadyNode = false;
+
+  var that = this;
+
+  this._skulptifyHandler = function (name, generatorName, blockName, nbArgs, type) {
+    if(!arrayContains(this._definedFunctions, name)) { this._definedFunctions.push(name); }
+
+    var handler = '';
+    handler += "\tcurrentPythonContext.runner.checkArgs('" + name + "', '" + generatorName + "', '" + blockName + "', arguments);";
+
+    handler += "\n\tvar susp = new Sk.misceval.Suspension();";
+    handler += "\n\tvar result = Sk.builtin.none.none$;";
+
+    // If there are arguments, convert them from Skulpt format to the libs format
+    handler += "\n\tvar args = Array.prototype.slice.call(arguments);";
+    handler += "\n\tfor(var i=0; i 0) {
+        msg = name + "() takes no arguments (" + args.length + " given)";
+        throw new Sk.builtin.TypeError(msg);
+      }
+    } else if(nbsArgs.indexOf(args.length) == -1 && nbsArgs.indexOf(Infinity) == -1) {
+      var minArgs = nbsArgs[0];
+      var maxArgs = nbsArgs[0];
+      for(var i=1; i < nbsArgs.length; i++) {
+        minArgs = Math.min(minArgs, nbsArgs[i]);
+        maxArgs = Math.max(maxArgs, nbsArgs[i]);
+      }
+      if (minArgs === maxArgs) {
+        msg = name + "() takes exactly " + minArgs + " arguments";
+      } else if (args.length < minArgs) {
+        msg = name + "() takes at least " + minArgs + " arguments";
+      } else if (args.length > maxArgs){
+        msg = name + "() takes at most " + maxArgs + " arguments";
+      } else {
+        msg = name + "() doesn't have a variant accepting this number of arguments";
+      }
+      msg += " (" + args.length + " given)";
+      throw new Sk.builtin.TypeError(msg);
+    }
+  };
+
+  this._definePythonNumber = function() {
+    // Create a class which behaves as a Number, but can have extra properties
+    this.pythonNumber = function(val) {
+      this.val = new Number(val);
+    }
+    this.pythonNumber.prototype = Object.create(Number.prototype);
+    function makePrototype(func) {
+      return function() { return Number.prototype[func].call(this.val); }
+    }
+    var funcs = ['toExponential', 'toFixed', 'toLocaleString', 'toPrecision', 'toSource', 'toString', 'valueOf'];
+    for(var i = 0; i < funcs.length ; i++) {
+      this.pythonNumber.prototype[funcs[i]] = makePrototype(funcs[i]);
+    }
+  }
+
+  this.skToJs = function(val) {
+    // Convert Skulpt item to JavaScript
+    // TODO :: Might be partly replaceable with Sk.ffi.remapToJs
+    if(val instanceof Sk.builtin.bool) {
+      return val.v ? true : false;
+    } else if(val instanceof Sk.builtin.func) {
+      return function() {
+        var args = [];
+        for(var i = 0; i < arguments.length; i++) {
+          args.push(that._createPrimitive(arguments[i]));
+        }
+        var retp = new Promise(function(resolve, reject) {
+          var p = Sk.misceval.asyncToPromise(function() { return val.tp$call(args); });
+          p.then(function(val) { resolve(that.skToJs(val)); });
+        });
+        return retp;
+      }
+    } else if(val instanceof Sk.builtin.dict) {
+      var dictKeys = Object.keys(val);
+      var retVal = {};
+      for(var i = 0; i < dictKeys.length; i++) {
+        var key = dictKeys[i];
+        if(key == 'size' || key == '__class__') { continue; }
+        var subItems = val[key].items;
+        for(var j = 0; j < subItems.length; j++) {
+          var subItem = subItems[j];
+          retVal[subItem.lhs.v] = this.skToJs(subItem.rhs);
+        }
+      }
+      return retVal;
+    } else {
+      var retVal = val.v;
+      if(val instanceof Sk.builtin.tuple || val instanceof Sk.builtin.list) {
+        retVal = [];
+        for(var i = 0; i < val.v.length; i++) {
+          retVal[i] = this.skToJs(val.v[i]);
+        }
+      }
+      if(val instanceof Sk.builtin.tuple) {
+        retVal.isTuple = true;
+      }
+      if(val instanceof Sk.builtin.float_) {
+        retVal = new this.pythonNumber(retVal);
+        retVal.isFloat = true;
+      }
+      return retVal;
+    }
+  };
+
+  this.getDefinedFunctions = function() {
+    this._injectFunctions();
+    return this._definedFunctions.slice();
+  };
+
+  this._setTimeout = function(func, time) {
+    var timeoutId = null;
+    var that = this;
+    function wrapper() {
+      var idx = that._timeouts.indexOf(timeoutId);
+      if(idx > -1) { that._timeouts.splice(idx, 1); }
+      func();
+    }
+    timeoutId = window.setTimeout(wrapper, time);
+    this._timeouts.push(timeoutId);
+  }
+
+  this.waitDelay = function (callback, value, delay) {
+    this._paused = true;
+    if (delay > 0) {
+      var _noDelay = this.noDelay.bind(this, callback, value);
+      this._setTimeout(_noDelay, delay);
+      // We just waited some time, allow next steps to not be delayed
+      this._allowStepsWithoutDelay = Math.min(this._allowStepsWithoutDelay + Math.ceil(delay / 10), 100);
+    } else {
+      this.noDelay(callback, value);
+    }
+  };
+
+  this.waitEvent = function (callback, target, eventName, func) {
+    this._paused = true;
+    var listenerFunc = null;
+    var that = this;
+    listenerFunc = function(e) {
+      target.removeEventListener(eventName, listenerFunc);
+      that.noDelay(callback, func(e));
+    };
+    target.addEventListener(eventName, listenerFunc);
+  };
+
+  this.waitCallback = function (callback) {
+    // Returns a callback to be called once we can continue the execution
+    this._paused = true;
+    var that = this;
+    return function(value) {
+      that.noDelay(callback, value);
+    };
+  };
+
+  this.noDelay = function (callback, value) {
+    var primitive = this._createPrimitive(value);
+    if (primitive !== Sk.builtin.none.none$) {
+      // Apparently when we create a new primitive, the debugger adds a call to
+      // the callstack.
+      this._resetCallstackOnNextStep = true;
+      this.reportValue(value);
+    }
+    this._paused = false;
+    callback(primitive);
+    this._setTimeout(this._continue.bind(this), 10);
+  };
+
+  this.allowSwitch = function(callback) {
+    // Tells the runner that we can switch the execution to another node
+    var curNode = context.curNode;
+    var ready = function(readyCallback) {
+      that.readyNodes[curNode] = function() {
+        readyCallback(callback);
+      };
+      if(that.waitingOnReadyNode) {
+        that.waitingOnReadyNode = false;
+        that.startNode(that.curNode, curNode);
+      }
+    };
+    this.readyNodes[curNode] = false;
+    this.startNextNode(curNode);
+    return ready;
+  };
+
+  this.defaultSelectNextNode = function(runner, previousNode) {
+    var i = previousNode + 1;
+    if(i >= runner.nbNodes) { i = 0; }
+    do {
+      if(runner.readyNodes[i]) {
+        break;
+      } else {
+        i++;
+      }
+      if(i >= runner.nbNodes) { i = 0; }
+    } while(i != previousNode);
+    return i;
+  };
+
+  // Allow the next node selection process to be customized
+  this.selectNextNode = this.defaultSelectNextNode;
+
+  this.startNextNode = function(curNode) {
+    // Start the next node when one has been switched from
+    var newNode = this.selectNextNode(this, curNode);
+    this._paused = true;
+    if(newNode == curNode) {
+      // No ready node
+      this.waitingOnReadyNode = true;
+    } else {
+      // TODO :: switch execution
+      this.startNode(curNode, newNode);
+    }
+  };
+
+  this.startNode = function(curNode, newNode) {
+    setTimeout(function() {
+      that.nodeStates[curNode] = that._debugger.suspension_stack.slice();
+      that._debugger.suspension_stack = that.nodeStates[newNode];
+      that.curNode = newNode;
+      var ready = that.readyNodes[newNode];
+      if(ready) {
+        that.readyNodes[newNode] = false;
+        context.setCurNode(newNode);
+        if(typeof ready == 'function') {
+          ready();
+        } else {
+          that._paused = false;
+          that._continue();
+        }
+      } else {
+        that.waitingOnReadyNode = true;
+      }
+    }, 0);
+  };
+
+  this._createPrimitive = function (data) {
+    // TODO :: Might be replaceable with Sk.ffi.remapToPy
+    if (data === undefined || data === null) {
+      return Sk.builtin.none.none$;  // Reuse the same object.
+    }
+    var type = typeof data;
+    var result = {v: data}; // Emulate a Skulpt object as default
+    if (type === 'number') {
+      if(Math.floor(data) == data) { // isInteger isn't supported by IE
+        result = new Sk.builtin.int_(data);
+      } else {
+        result = new Sk.builtin.float_(data);
+      }
+    } else if (type === 'string') {
+      result = new Sk.builtin.str(data);
+    } else if (type === 'boolean') {
+      result = new Sk.builtin.bool(data);
+    } else if (typeof data.length != 'undefined') {
+      var skl = [];
+      for(var i = 0; i < data.length; i++) {
+        skl.push(this._createPrimitive(data[i]));
+      }
+      result = new Sk.builtin.list(skl);
+    } else if (data) {
+      // Create a dict if it's an object with properties
+      var props = [];
+      for(var prop in data) {
+        if(data.hasOwnProperty(prop)) {
+          // We can pass a list [prop1name, prop1val, ...] to Skulpt's dict
+          // constructor ; however to work properly they need to be Skulpt
+          // primitives too
+          props.push(this._createPrimitive(prop));
+          props.push(this._createPrimitive(data[prop]));
+        }
+      }
+      if(props.length > 0) {
+        result = new Sk.builtin.dict(props);
+      }
+    }
+    return result;
+  };
+
+  this._onOutput = function (_output) {
+    that.print(_output);
+  };
+
+  this._onDebugOut = function (text) {
+    // console.log('DEBUG: ', text);
+  };
+
+  this._configure = function () {
+    Sk.configure({
+      output: this._onOutput,
+      debugout: this._onDebugOut,
+      read: this._builtinRead.bind(this),
+      yieldLimit: null,
+      execLimit: null,
+      debugging: true,
+      breakpoints: this._debugger.check_breakpoints.bind(this._debugger),
+      __future__: Sk.python3
+    });
+    Sk.pre = "edoutput";
+    Sk.pre = "codeoutput";
+
+    // Disable document library
+    delete Sk.builtinFiles["files"]["src/lib/document.js"];
+
+    this._definePythonNumber();
+
+    this.context.callCallback = this.noDelay.bind(this);
+  };
+
+  this.print = function (message, className) {
+    if (message.trim() === 'Program execution complete') {
+      this._onFinished();
+    }
+    if (message) {
+      //console.log('PRINT: ', message, className || '');
+    }
+  };
+
+  this._onFinished = function () {
+    this.finishedNodes[this.curNode] = true;
+    this.readyNodes[this.curNode] = false;
+
+    if(this.finishedNodes.indexOf(false) != -1) {
+      // At least one node is not finished
+      this.startNextNode(this.curNode);
+    } else {
+      // All nodes are finished, stop the execution
+      this.stop();
+    }
+
+    try {
+      this.context.infos.checkEndCondition(this.context, true);
+    } catch (e) {
+      this._onStepError(e);
+    }
+  };
+
+  this._builtinRead = function (x) {
+    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
+      throw "File not found: '" + x + "'";
+    return Sk.builtinFiles["files"][x];
+  };
+
+  this.get_source_line = function (lineno) {
+    return this._code.split('\n')[lineno];
+  };
+
+  this._continue = function () {
+    if (this.context.infos.checkEndEveryTurn) {
+      try {
+        this.context.infos.checkEndCondition(context, false);
+      } catch(e) {
+        this._onStepError(e);
+        return;
+      }
+    }
+    if (!this.context.allowInfiniteLoop && this._steps >= this._maxIterations) {
+      this._onStepError(window.languageStrings.tooManyIterations);
+    } else if (!this.context.allowInfiniteLoop && this._stepsWithoutAction >= this._maxIterWithoutAction) {
+      this._onStepError(window.languageStrings.tooManyIterationsWithoutAction);
+    } else if (!this._paused && this._isRunning) {
+      this.step();
+    }
+  };
+
+  this.initCodes = function (codes) {
+    // For reportValue in Skulpt.
+    window.currentPythonRunner = this;
+
+    if(Sk.running) {
+      if(typeof Sk.runQueue === 'undefined') {
+        Sk.runQueue = [];
+      }
+      Sk.runQueue.push({ctrl: this, codes: codes});
+      return;
+    }
+
+    currentPythonContext = this.context;
+    this._debugger = new Sk.Debugger(this._editor_filename, this);
+    this._configure();
+    this._injectFunctions();
+
+    /**
+     * Add a last instruction at the end of the code so Skupt will generate a Suspension state
+     * for after the user's last instruction. Otherwise it would be impossible to retrieve the
+     * modifications made by the last user's line. For skulpt analysis.
+     */
+    this._code = codes[0] + "\npass";
+
+    this._setBreakpoint(1, false);
+
+    if(typeof this.context.infos.maxIter !== 'undefined') {
+      this._maxIterations = Math.ceil(this.context.infos.maxIter/10);
+    }
+    if(typeof this.context.infos.maxIterWithoutAction !== 'undefined') {
+      this._maxIterWithoutAction = Math.ceil(this.context.infos.maxIterWithoutAction/10);
+    }
+    if(!this._hasActions) {
+      // No limit on
+      this._maxIterWithoutAction = this._maxIterations;
+    }
+
+    var susp_handlers = {};
+    susp_handlers["*"] = this._debugger.suspension_handler.bind(this);
+
+    this.nbNodes = codes.length;
+    this.curNode = 0;
+    context.setCurNode(this.curNode);
+    this.readyNodes = [];
+    this.finishedNodes = [];
+    this.nodeStates = [];
+
+    for(var i = 0; i < codes.length ; i++) {
+      this.readyNodes.push(true);
+      this.finishedNodes.push(false);
+
+      try {
+        var promise = this._debugger.asyncToPromise(this._asyncCallback(this._editor_filename, codes[i]), susp_handlers, this._debugger);
+        promise.then(this._debugger.success.bind(this._debugger), this._debugger.error.bind(this._debugger));
+      } catch (e) {
+        this._onOutput(e.toString() + "\n");
+      }
+
+      this.nodeStates.push(this._debugger.suspension_stack);
+      this._debugger.suspension_stack = [];
+    }
+
+    this._debugger.suspension_stack = this.nodeStates[0];
+
+    this._resetInterpreterState();
+    Sk.running = true;
+    this._isRunning = true;
+  };
+
+  this.run = function () {
+    if(this.stepMode) {
+      this._paused = this._stepInProgress;
+      this.stepMode = false;
+    }
+    this._setTimeout(this._continue.bind(this), 100);
+  };
+
+  this.runCodes = function(codes) {
+    this.initCodes(codes);
+    this.run();
+  };
+
+  this.runStep = function (resolve, reject) {
+    this.stepMode = true;
+    if (this._isRunning && !this._stepInProgress) {
+      this.step(resolve, reject);
+    }
+  };
+
+  this.nbRunning = function () {
+    return this._isRunning ? 1 : 0;
+  };
+
+  this.removeEditorMarker = function () {
+    var editor = this.context.blocklyHelper._aceEditor;
+    if(editor && this._editorMarker) {
+      editor.session.removeMarker(this._editorMarker);
+      this._editorMarker = null;
+    }
+  };
+
+  this.unSkulptValue = function (origValue) {
+    // Transform a value, possibly a Skulpt one, into a printable value
+    if(typeof origValue !== 'object' || origValue === null) {
+      var value = origValue;
+    } else if(origValue.constructor === Sk.builtin.dict) {
+      var keys = Object.keys(origValue);
+      var dictElems = [];
+      for(var i=0; i 0) {
+      var target = highlighted.find('.ace_start')[0];
+    } else {
+      var target = highlighted[0];
+    }
+    var bbox = target.getBoundingClientRect();
+
+    var leftPos = bbox.left+10;
+    var topPos = bbox.top-14;
+
+    if(typeof value == 'boolean') {
+      var displayStr = value ? window.languageStrings.valueTrue : window.languageStrings.valueFalse;
+    } else if(value === null) {
+      var displayStr = "None"
+    } else {
+      var displayStr = value.toString();
+    }
+    if(typeof value == 'boolean') {
+      displayStr = value ? window.languageStrings.valueTrue : window.languageStrings.valueFalse;
+    }
+    if(varName) {
+      displayStr = '' + varName + ' = ' + displayStr;
+    }
+
+    var dropDownDiv = '' +
+        '
' +
+        '  
' +
+        '    
' +
+        displayStr +
+        '    
' +
+        '  
' +
+        '  
' +
+        '
';
+
+    $('.blocklyDropDownDiv').remove();
+    $('body').append(dropDownDiv);
+
+    return origValue;
+  };
+
+  this.stop = function () {
+    for (var i = 0; i < this._timeouts.length; i += 1) {
+      window.clearTimeout(this._timeouts[i]);
+    }
+    this._timeouts = [];
+    this.removeEditorMarker();
+    if(Sk.runQueue) {
+      for (var i=0; i 0) {
+      var nextExec = Sk.runQueue.shift();
+      setTimeout(function () { nextExec.ctrl.runCodes(nextExec.codes); }, 100);
+    }
+  };
+
+  this._resetCallstack = function () {
+    if (this._resetCallstackOnNextStep) {
+      this._resetCallstackOnNextStep = false;
+      this._debugger.suspension_stack.pop();
+    }
+  };
+
+  this.reset = function() {
+    if(this._resetDone) { return; }
+    if(this.isRunning()) {
+      this.stop();
+    }
+    this.context.reset();
+    this._resetDone = true;
+  };
+
+  this.step = function (resolve, reject) {
+    this._resetCallstack();
+    this._stepInProgress = true;
+    var editor = this.context.blocklyHelper._aceEditor;
+    var markDelay = this.context.infos ? Math.floor(this.context.infos.actionDelay/4) : 0;
+    if(this.context.display && (this.stepMode || markDelay > 30)) {
+      var curSusp = this._debugger.suspension_stack[this._debugger.suspension_stack.length-1];
+      if(curSusp && curSusp.$lineno) {
+        this.removeEditorMarker();
+        var splitCode = this._code.split(/[\r\n]/);
+        var Range = ace.require('ace/range').Range;
+        this._editorMarker = editor.session.addMarker(
+            new Range(curSusp.$lineno-1, curSusp.$colno, curSusp.$lineno, 0),
+            "aceHighlight",
+            "line");
+      }
+    } else {
+      this.removeEditorMarker();
+    }
+
+    var stepDelay = 0;
+    if(!this.stepMode && this.context.allowInfiniteLoop) {
+      // Add a delay in infinite loops to avoid using all CPU
+      if(this._allowStepsWithoutDelay > 0) {
+        // We just had a waitDelay, don't delay further
+        this._allowStepsWithoutDelay -= 1;
+      } else {
+        stepDelay = 10;
+      }
+    }
+    var realStepDelay = markDelay + stepDelay;
+
+    if(realStepDelay > 0) {
+      this._paused = true;
+
+      var self = this;
+      setTimeout(function() {
+        self.realStep(resolve, reject);
+      }, realStepDelay);
+    } else {
+      this.realStep(resolve, reject);
+    }
+  };
+
+  this.realStep = function (resolve, reject) {
+    this._paused = this.stepMode;
+    this._debugger.enable_step_mode();
+    this._debugger.resume.call(this._debugger, resolve, reject);
+    this._steps += 1;
+    if(this._lastNbActions != this._nbActions) {
+      this._lastNbActions = this._nbActions;
+      this._stepsWithoutAction = 0;
+    } else {
+      this._stepsWithoutAction += 1;
+    }
+  };
+
+  this._onStepSuccess = function (callback) {
+    // If there are still timeouts, there's still a step in progress
+    this._stepInProgress = !!this._timeouts.length;
+    this._continue();
+
+    if (typeof callback === 'function') {
+      callback();
+    }
+  };
+
+  this._onStepError = function (message, callback) {
+    context.onExecutionEnd && context.onExecutionEnd();
+    // We always get there, even on a success
+    this.stop();
+
+    message = '' + message;
+
+    // Skulpt doesn't support well NoneTypes
+    if(message.indexOf("TypeError: Cannot read property") > -1 && message.indexOf("undefined") > -1) {
+      message = message.replace(/^.* line/, "TypeError: NoneType value used in operation on line");
+    }
+
+    if(message.indexOf('undefined') > -1) {
+      message += '. ' + window.languageStrings.undefinedMsg;
+    }
+
+    // Transform message depending on whether we successfully
+    if(this.context.success) {
+      message = "" + message + "";
+    } else {
+      message = this.context.messagePrefixFailure + message;
+    }
+
+    this.messageCallback(message);
+
+    if (typeof callback === 'function') {
+      callback();
+    }
+  };
+
+  this._setBreakpoint = function (bp, isTemporary) {
+    this._debugger.add_breakpoint(this._editor_filename + ".py", bp, "0", isTemporary);
+  };
+
+  this._asyncCallback = function (editor_filename, code) {
+    var dumpJS = false;
+
+    return function() {
+      return Sk.importMainWithBody(editor_filename, dumpJS, code, true);
+    };
+  };
+
+  this.signalAction = function () {
+    // Allows a context to signal an "action" happened
+    this._stepsWithoutAction = 0;
+  };
+}
+
+function initBlocklyRunner(context, msgCallback) {
+  return new PythonInterpreter(context, msgCallback);
+};
diff --git a/pemFioi/quickAlgo/quickAlgo-mobileFirst.css b/pemFioi/quickAlgo/quickAlgo-mobileFirst.css
new file mode 100644
index 000000000..18285ad41
--- /dev/null
+++ b/pemFioi/quickAlgo/quickAlgo-mobileFirst.css
@@ -0,0 +1,1920 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+html {
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+}
+body, select {
+  font-size: 12px;
+  position: relative;
+  overflow-x: hidden;
+  font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
+  color: #9b9b9b;
+}
+
+code { 
+  padding: 2px 4px;
+  font-size: 90%;
+  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+  color: #a91c66;
+  background-color:#f9f2f6;
+  border-radius: 4px;
+}
+
+@media screen and (min-width: 1024px) {
+  body, select {
+    font-size: 16px;
+  }
+}
+body.blockly > *,
+body > * {
+  width: auto;
+}
+* {
+  box-sizing: border-box;
+}
+
+.interfaceToggled {
+  display: none !important;
+}
+input:disabled,
+select:disabled {
+  background-color: #eee !important;
+  cursor: not-allowed !important;
+}
+button:disabled {
+  background-color: #e3e3e3 !important;
+  cursor: not-allowed !important;
+}
+/*****************
+  EDITOR MENU
+*****************/
+#tabsContainer.noLevelTabs {
+  -webkit-box-pack: end;
+    -ms-flex-pack: end;
+        justify-content: flex-end;
+}
+#openEditorMenu {
+  position: relative;
+  background-color: #4a4a4a;
+  padding: 8px 13px;
+  border-radius: 5px 0 0 5px;
+  color: #fff;
+  cursor: pointer;
+  order: 1;
+  font-size: 12px;
+}
+@media screen and (orientation: landscape) { /* horizontal screen layout */
+  #openEditorMenu {
+    /*align-self: flex-end;*/
+  }
+}
+@media screen and (min-width: 1024px) {
+  #openEditorMenu {
+    /*align-self: flex-end;*/
+  }
+}
+#openEditorMenu::before,
+#openEditorMenu::after {
+  content: " ";
+  position: absolute;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  background: transparent;
+}
+#openEditorMenu::before {
+  top: -10px;
+  border-radius: 50% 0;
+  box-shadow: 0px 5px 0 #4a4a4a;
+}
+#openEditorMenu::after {
+  bottom: -10px;
+  border-radius: 0 50%;
+  box-shadow: 0px -5px 0 #4a4a4a;
+}
+#editorMenu {
+  height: 100%;
+  position: absolute;
+  right: -50%;
+  width: 50%;
+  top: 0;
+  box-shadow: 2px 0 0 #000 inset;
+  background-color: #4a4a4a;
+  color: #FFF;
+  z-index: 99;
+  overflow: auto;
+}
+#editorMenu .editorMenuHeader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 12px 20px;
+  z-index: 1;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape),
+  screen and (min-width: 1025px) and (min-height: 450px) {
+  #editorMenu {
+    width: 250px;
+    right: -250px;
+  }
+  #editorMenu .editorMenuHeader {
+    position: static;
+  }
+}
+#editorMenu #closeEditorMenu {
+  position: absolute;
+  top: 12px;
+  right: 15px;
+  cursor: pointer;
+}
+#editorMenu #closeEditorMenu:hover {
+  color:#4a90e2;
+}
+#editorMenu .editorActions {
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  text-transform: uppercase;
+}
+#editorMenu .editorActions div {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+  padding: 20px;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-top: 1px solid #5c5c5c;
+  cursor: pointer;
+  text-align: center;
+}
+#editorMenu .editorActions div.editorActionDisabled,
+#editorMenu .editorActions div.editorActionDisabled:hover {
+  color: #707070;
+}
+#editorMenu .editorActions div.editorActionForbidden,
+#editorMenu .editorActions div.editorActionForbidden:hover {
+  color: #ff001f;
+}
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape),
+  screen and (min-width: 1025px) and (min-height: 450px) {
+  #editorMenu .editorActions {
+    height: auto;
+  }
+  #editorMenu .editorActions div {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+  }
+}
+#editorMenu .editorActions div:first-child {
+  border-top-width: 0;
+}
+#editorMenu .editorActions div:hover {
+  color:#4a90e2;
+}
+#editorMenu .editorActions div span.fas,
+#editorMenu .editorActions div span.far {
+  font-size: 32px;
+}
+@media /* Landscape mobiles */
+  screen and (min-width: 480px) and (max-width: 854.9px) and (orientation: landscape),
+  screen and (min-width: 480px) and (max-height: 449.9px) and (orientation: landscape) {
+  #editorMenu .editorActions {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+  }
+  #editorMenu .editorActions div {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 50%;
+            flex: 1 1 50%;
+    padding: 20px 0;
+    font-size: 10px;
+    border-right: 1px solid #5c5c5c;
+    border-bottom: 1px solid #5c5c5c;
+    margin-bottom: -1px;
+  }
+  #editorMenu .editorActions div:first-child {
+    border-top-width: 1px;
+  }
+}
+#editorMenu #saveUrl {
+  display: none;
+}
+#editorMenu input[type=file] {
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  -moz-opacity: 0;
+  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
+}
+
+/************************
+  LAYOUT & GENERIC ELEMENTS
+*************************/
+h2.sectionTitle {
+  font-size: 22px;
+  font-weight: 100;
+  color: #4a90e2;
+  margin: 0;
+}
+h2.sectionTitle .icon {
+  color: #fff;
+  background-color: #4a90e2;
+  border-radius: 50%;
+  width: 2em;
+  line-height: 2em;
+  text-align: center;
+  font-size: 14px;
+  vertical-align: text-bottom;
+  margin-right: 10px;
+}
+p {
+  margin: 0 0 15px 0;
+}
+#task {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: stretch;
+      -ms-flex-pack: stretch;
+          justify-content: stretch;
+  height: 100vh;
+  width: 100vw;
+}
+#taskContent {
+  -webkit-box-flex: 2;
+      -ms-flex: 2 0 0px;
+          flex: 2 0 0;
+  position: static !important;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: stretch;
+      -ms-flex-pack: stretch;
+          justify-content: stretch;
+  min-height: 0;
+}
+#introGrid {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 40%;
+          flex: 1 1 40%;
+  min-height: 0;
+}
+#taskIntro {
+  padding: 10px 20px;
+  overflow: auto;
+}
+#taskIntro .introContent {
+  max-height: 100%;
+  overflow: auto;
+}
+#gridContainer {
+  background-color: #fff;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 50%;
+          flex: 1 0 50%;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+@media /* Mobiles */
+  screen and (max-width: 767.9px) and (orientation: portrait),
+  screen and (min-width: 480px) and (max-width: 854.9px) and (orientation: landscape),
+  screen and (min-width: 480px) and (max-height: 449.9px) and (orientation: landscape) {
+  .mode-player #taskContent {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .mode-player #introGrid {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 40%;
+        flex: 1 0 40%;
+  }
+  .mode-instructions #introGrid {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+  }
+  .mode-instructions #taskIntro {
+    -webkit-box-ordinal-group: 3;
+        -ms-flex-order: 2;
+            order: 2;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 0px;
+            flex: 1 1 0;
+  }
+  .mode-player #taskIntro,
+  .mode-instructions #blocklyLibContent,
+  .mode-editor #introGrid {
+    display: none;
+  }
+  .mode-player #editorBar {
+    display: none !important;
+  }
+  .mode-instructions .notificationMessage,
+  .mode-player .notificationMessage.notificationMessageLock {
+    display: none;
+  }
+}
+
+@media /* Landscape mobiles */
+  screen and (min-width: 480px) and (max-width: 854.9px) and (orientation: landscape),
+  screen and (min-width: 480px) and (max-height: 449.9px) and (orientation: landscape) {
+
+  #taskContent {
+    background-color: #fff;
+  }
+  .mode-player #taskContent {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+  }
+  .mode-player #introGrid {
+    min-width: 0;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 50%;
+            flex: 0 0 50%;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .mode-instructions #introGrid {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  }
+  .mode-editor #editorBar {
+    display: none;
+  }
+  .fullscreen .mode-editor #editorBar {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  #taskIntro {
+    background-color: #f1f2f7;
+    padding: 15px;
+    overflow: auto;
+    border-radius: 5px 5px 0 0;
+    margin: 10px 10px 0 10px;
+  }
+  #gridContainer #gridButtonsAfter {
+    padding-bottom: 5px;
+  }
+  .mode-instructions #introGrid {
+    -webkit-box-flex: 1;
+      -ms-flex: 1 0 40%;
+          flex: 1 0 40%;
+  }
+  .mode-instructions #gridContainer {
+    min-width: 0;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 40%;
+            flex: 0 0 40%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .mode-player #blocklyLibContent {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 60%;
+            flex: 0 0 60%;
+    min-width: 0;
+    margin: 10px 10px 0 10px;
+  }
+}
+@media /* Tablets portrait */
+  screen and (min-width: 768px) and (orientation: portrait) {
+
+  #taskContent {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  /* introGrid : takes the height it needs up to max-height, but keeps at least
+     min-height so the grid, player and test buttons display correctly */
+  #introGrid {
+    position: relative;
+    margin-bottom: 10px;
+    -webkit-box-flex: 1;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    min-height: 250px;
+    max-height: 40%;
+  }
+  #introGrid .speedControls {
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 40%; /* Must be the same width as the task intro */
+    padding-top: 10px;
+    border-top: 3px solid #fff;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: space-evenly;
+        -ms-flex-pack: space-evenly;
+      justify-content: space-evenly;
+    background-color: #f1f2f7;
+    -webkit-box-shadow: 0 1px 0 0px #ccc inset;
+            box-shadow: 0 1px 0 0px #ccc inset;
+  }
+  #taskIntro {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 40%;
+            flex: 1 1 40%;
+    background-color: #fff;
+    padding-bottom: 50px;
+  }
+  #gridContainer {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 0 60%;
+            flex: 1 0 60%;
+    min-width: 0;
+  }
+  #taskIntro {
+    overflow: visible;
+    padding: 0;
+  }
+  #taskIntro .introContent {
+    padding: 10px 20px;
+    max-height: 100%;
+    overflow: auto;
+    margin-bottom: 20px;
+  }
+  #taskIntro.hasLongIntro .introContent {
+    padding-bottom: 70px;
+  }
+}
+@media /* Tablets landscape and desktop */
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape) {
+  #introGrid {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    max-width: 40%;
+  }
+  /* introGrid elements
+     taskIntro takes the height it needs up to max-height (set by
+     quickAlgoInterface) ; then whatever is left goes to gridContainer */
+  #taskIntro {
+    background-color: #fff;
+    -webkit-box-flex: 1;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+  }
+  #gridContainer {
+    background-color: transparent;
+    -webkit-box-flex: 0;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
+  }
+
+  #gridContainer .gridArea {
+    background-color: #fff;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+  }
+  #taskIntro {
+    overflow: visible;
+    padding: 0;
+  }
+  #taskIntro .introContent {
+    padding: 10px 20px;
+    max-height: 100%;
+    overflow: auto;
+    margin-bottom: 20px;
+  }
+  #taskIntro.hasLongIntro .introContent {
+    padding-bottom: 40px;
+  }
+}
+/*****************
+  TASK GRID & TESTS
+*****************/
+.gridArea {
+    position: relative;
+    overflow-x: auto;
+    max-width: 100%;
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+            flex-grow: 1;
+    z-index: 2;
+    text-align: center;
+    min-height: 150px;
+    min-width: 200px;
+}
+#grid {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+#testSelector {
+    padding-left: 10px;
+}
+.testResult {
+    margin-left: 10px;
+    padding: 3px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 50px;
+    color: #FFFFFF;
+    width: 250px;
+    font-size: 12px;
+    font-weight: 500;
+}
+.testResult.testSuccess {
+    background-color: green;
+}
+.testResult.testPartial {
+    background-color: orange;
+}
+.testResult.testFailure {
+    background-color: red;
+}
+.testResult.testEvaluating {
+    background-color: purple;
+}
+.testResultIcon.testSuccess span {
+  background: #b8e986;
+  border-radius: 100%;
+  color: #fff;
+  padding: 5px;
+}
+.testResultIcon.testPartial,
+.testResultIcon.testFailure {
+  color: #ff001f;
+}
+#gridContainer #gridButtonsAfter {
+  background-color: #f1f2f7;
+}
+#gridButtonsAfter #testSelector {
+  padding: 0;
+}
+#testSelector .tabs {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  line-height: 24px;
+  text-align: center;
+}
+#testSelector .tabs .testTab {
+  -webkit-box-flex: 1;
+    -ms-flex: 1 0 auto;
+        flex: 1 0 auto;
+  cursor: pointer;
+  padding: 2px;
+  text-transform: uppercase;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+    -ms-flex-pack: center;
+  justify-content: center;
+  align-items: center;
+}
+#testSelector .testTab.currentTest {
+  box-shadow: 0 1px 0 0px #ccc;
+  color: #4a90e2;
+  border-radius: 0 0 10px 10px;
+  background-color: #fff;
+  z-index: 1;
+}
+#testSelector .testTab.currentTest::before,
+#testSelector .testTab.currentTest:not(:last-child)::after {
+  content: " ";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: transparent;
+}
+#testSelector .testTab.currentTest::before {
+  top: -3px;
+  border-radius: 0 70%;
+  box-shadow: 0px 1px 0 #ccc inset;
+  left: -10px;
+  z-index: 1;
+  border-top: 3px solid #fff;
+  border-right: 6px solid #fff;
+}
+#testSelector .testTab.currentTest::after {
+  top: -3px;
+  border-radius: 70% 0;
+  box-shadow: 0px 1px 0 #ccc inset;
+  right: -10px;
+  z-index: 1;
+  border-top: 3px solid #fff;
+  border-left: 6px solid #fff;
+}
+#testSelector .tabs .testTab:not(.currentTest) {
+  box-shadow: 0 1px 0 0px #ccc inset;
+  color: #ababac;
+  font-size: 12px;
+  line-height: 16px;
+}
+#testSelector .tabs .testTab .testThumbnail {
+  width: 80%;
+}
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape),
+  screen and (min-width: 1025px) and (min-height: 450px) {
+  #testSelector .tabs .testTab {
+    line-height: 36px;
+  }
+}
+
+/*****************
+  PLAYER CONTROLS
+*****************/
+.playerControls {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+        justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  margin-right: 20px;
+}
+.speedControls {
+  position: relative;
+  -ms-flex-negative: 0;
+    flex-shrink: 0;
+}
+#introGrid .speedControls .icon span {
+  padding: 5px 10px;
+}
+#taskToolbar .speedControls .icon span {
+  padding: 0 12px;
+}
+/* toggle player controls and speed slider visibility */
+@media screen and (max-width: 480.9px) { /* Portrait mobiles and low res display */
+  #mode-player.displaySpeedSlider > div.playerControls,
+  #mode-player.displaySpeedSlider > div.speedSlider {
+    flex-basis: 100%;
+  }
+  #mode-player.displaySpeedSlider .playerControls,
+  #mode-player.displaySpeedSlider > span.far,
+  #mode-player.displaySpeedSlider > span.fas {
+    display: none;
+  }
+  #mode-player:not(.displaySpeedSlider) .speedSlider {
+    display: none;
+  }
+}
+@media /* Small tablets portrait */
+  screen and (min-width: 768px) and (max-width: 854.999px) and (orientation: portrait) {
+  #introGrid .speedControls > div.playerControls,
+  #introGrid .speedControls > div.speedSlider {
+    flex-basis: 100%;
+  }
+  #introGrid .speedControls.displaySpeedSlider .playerControls,
+  #introGrid .speedControls.displaySpeedSlider > span.far,
+  #introGrid .speedControls.displaySpeedSlider > span.fas {
+    display: none;
+  }
+  #introGrid .speedControls:not(.displaySpeedSlider) .speedSlider {
+    display: none;
+  }
+}
+@media screen and (min-width: 481px) {
+  #taskToolbar .icon.displaySpeedSlider,
+  #taskToolbar .icon.hideSpeedSlider {
+    display: none;
+  }
+}
+@media /* Some tablets and desktop */
+  screen and (min-width: 855px) and (min-height: 450px) {
+  #introGrid .icon.displaySpeedSlider,
+  #introGrid .icon.hideSpeedSlider {
+    display: none;
+  }
+}
+
+/*****************
+  SPEED CONTROLS
+*****************/
+#introGrid .speedControls {
+  display: none;
+}
+#taskToolbar .mode:not(.active) .speedControls {
+  display: none;
+}
+#taskToolbar .mode .speedControls {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+    -ms-flex-pack: center;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: -4px;
+}
+.speedSlider {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.speedCursor {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  margin-top: 6px;
+}
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape),
+  screen and (min-width: 1025px) and (min-height: 450px) {
+  .speedCursor {
+    width: 100%;
+  }
+}
+
+/* Chrome */
+.speedCursor::-webkit-slider-runnable-track {
+  background-color: rgba(0,0,0,0.3);
+  height: 5px;
+  border-radius: 5px;
+  margin-top: -6px;
+}
+.speedCursor::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: none;
+  height: 20px;
+  width: 28px;
+  border-radius: 100px;
+  background-color: #fff;
+  margin-top: -7px;
+  cursor: ew-resize;
+}
+.speedCursor:focus {
+  outline: none;
+}
+.speedCursor:focus::-webkit-slider-runnable-track {
+  background-color: rgba(0,0,0,0.3);
+}
+/* Firefox */
+.speedCursor::-moz-range-track {
+  height: 5px;
+  background-color: rgba(0,0,0,0.3);
+  border: none;
+  border-radius: 5px;
+}
+.speedCursor::-moz-range-thumb {
+  border: none;
+  height: 20px;
+  width: 28px;
+  border-radius: 100px;
+  background-color: #fff;
+  cursor: ew-resize;
+}
+/* Edge / IE10+ */
+.speedCursor::-ms-track {
+  width: 100%;
+  height: 5px;
+  background: transparent;
+  /*leave room for the larger thumb to overflow with a transparent border */
+  border-color: transparent;
+  border-width: 6px 0;
+  /*remove default tick marks*/
+  color: transparent;
+}
+.speedCursor::-ms-fill-lower {
+  background: #db8b0a;
+  border-radius: 5px;
+}
+.speedCursor::-ms-fill-upper {
+  background: rgba(0,0,0,0.3);
+  border-radius: 5px;
+}
+.speedCursor::-ms-thumb {
+  border: none;
+  height: 20px;
+  width: 28px;
+  border-radius: 100px;
+  background: #fff;
+  cursor: ew-resize;
+}
+.speedCursor:focus::-ms-fill-lower {
+  background: #db8b0a;
+}
+.speedCursor:focus::-ms-fill-upper {
+  background: rgba(0,0,0,0.3);
+}
+
+#introGrid .speedControls {
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+  padding: 5px 10px;
+  align-items: center;
+  height: 53px;
+}
+#introGrid .playerControls,
+#introGrid .speedSlider {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  width: 100%;
+}
+#introGrid .playerControls .icon {
+  margin-right: 15px;
+  cursor: pointer;
+}
+#introGrid .playerControls .icon span {
+  padding: 0;
+  border-radius: 50%;
+  line-height: 30px;
+  width: 30px;
+  text-align: center;
+}
+#introGrid .speedControls.speedControlsDisabled .playerControls .icon span {
+  background-color: #9b9b9b;
+}
+#introGrid .playerControls .icon:not(.playPause) span {
+  color: #fff;
+  background-color: #4a90e2;
+  font-size: 16px;
+}
+#introGrid .playerControls .icon.playPause span {
+  color: #fff;
+  background-color: #4a90e2;
+  width: 40px;
+  vertical-align: middle;
+  line-height: 40px;
+}
+#introGrid .playerControls .icon.playPause span.fa-play {
+  font-size: 28px;
+  padding-left: 6px;
+}
+#introGrid .playerControls .icon.playPause span.fa-pause {
+  font-size: 22px;
+  padding-left: 0px;
+}
+#introGrid .speedSlider {
+  background-color: rgba(0,0,0,0.10);
+  box-shadow: 1px 1px 0 0 rgba(0,0,0,0.10) inset ;
+  border-radius: 5px;
+  font-size: 18px;
+  color: #4a4a4a;
+}
+
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape),
+  screen and (min-width: 1025px) and (min-height: 450px) {
+  #introGrid .speedControls {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  #introGrid .playerControls {
+    -webkit-box-pack: center;
+      -ms-flex-pack: center;
+    justify-content: space-evenly;
+    flex-basis: 50%;
+  }
+  #introGrid .speedSlider {
+    flex-basis: 50%;
+  }
+}
+@media /* Tablets portrait */
+  screen and (min-width: 768px) and (orientation: portrait) {
+  .speedControls {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    qq-ms-flex-pack: distribute;
+    justify-content: space-around;
+    padding: 0 10px;
+  }
+}
+@media /* Tablets landscape and desktop */
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape) {
+  #introGrid .playerControls .icon {
+    margin-right: 15px;
+  }
+}
+
+/*****************
+  CODE EDITOR
+*****************/
+body.fullscreen #miniPlatformHeader,
+body.fullscreen #tabsContainer,
+body.fullscreen #introGrid,
+body.fullscreen #taskToolbar {
+  display: none;
+}
+#blocklyContainer {
+  position: relative;
+}
+#blocklyLibContent {
+  width: 100%;
+  -webkit-box-flex: 1;
+    -ms-flex: 1 0 60%;
+        flex: 1 0 60%;
+}
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape),
+  screen and (min-width: 1025px) and (min-height: 450px) {
+  #blocklyLibContent {
+    width: auto;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 60%;
+        flex: 1 0 60%;
+    min-width: 0;
+    background: #fff;
+  }
+}
+#blocklyDiv {
+  width: 100%;
+  height: 100%;
+}
+#blocklyLibContent {
+  position: relative;
+}
+
+/* Editor Bar */
+#editorBar {
+  pointer-events: none;
+}
+#editorBar .buttons button {
+  pointer-events: auto;
+  cursor: pointer;
+}
+.buttons button > span {
+  min-width: 12px;
+}
+@media /* Portrait mobiles */
+  screen and (max-width: 767.9px) and (orientation: portrait) {
+    #editorBar {
+      height: 30px;
+      background-color: #fff;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+      justify-content: space-between;
+    }
+    #capacity {
+      -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+              flex-grow: 1;
+    }
+    #editorBar button {
+      border: 0;
+      background-color: transparent;
+      box-shadow: none;
+      line-height: 30px;
+    }
+    #mode-editor .capacity,
+    #mode-editor button {
+      display: none;
+    }
+}
+@media /* landscape mobiles, tablets and desktop */
+  screen and (min-width: 480px) and (max-width: 854.9px) and (orientation: landscape),
+  screen and (min-width: 480px) and (max-height: 449.9px) and (orientation: landscape),
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (orientation: landscape),
+  screen and (min-width: 1025px) {
+  #editorBar {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    padding-top: 10px;
+    z-index: 10;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+          align-items: flex-start;
+  }
+  #capacity {
+    margin-right: 5px;
+  }
+  #editorBar button {
+    position: relative;
+    display: block;
+    font-size: 14px;
+    padding: 8px 12px;
+    -webkit-box-flex: 0;
+    -ms-flex-positive: 0;
+        flex-grow: 0;
+    color: #fff;
+    background: #4a90e2;
+    border: 0;
+    box-shadow: none;
+    border-radius: 5px 0 0 5px;
+    outline: 0;
+  }
+  #editorBar #fullscreenButton {
+    margin-bottom: 10px;
+  }
+}
+#languageInterface {
+  position: relative;
+}
+#capacity {
+  line-height: 30px;
+  background-color: white;
+  background-color: rgba(255, 255, 255, 0.85);
+  color: #787878;
+  text-align: center;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 5px;
+  pointer-events: none;
+}
+#capacity.capacityRed {
+  background-color: #FF9794;
+  background-color: rgba(255, 150, 150, 0.85);
+  color: black;
+  padding-left: 5px;
+}
+
+.scaleDrawingControl {
+  display: none;
+}
+#testCaseName {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+#messages {
+  padding-top:10px;
+  min-height: 28px;
+}
+#errors .testError {
+  color: red;
+}
+.blocklyToolboxDiv {
+    background-color: #ddd !important;
+}
+
+.blocklyFlyoutBackground {
+    fill-opacity: 1 !important;
+}
+.blocklyDropDownDiv {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    display: none;
+    border: 1px solid;
+    border-radius: 4px;
+    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .3);
+    padding: 4px;
+    -webkit-user-select: none;
+}
+.blocklyDropDownContent {
+    max-height: 300px;
+    overflow: auto;
+}
+.blocklyDropDownArrow {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 16px;
+    height: 16px;
+    z-index: -1;
+    background-color: inherit;
+    border-color: inherit;
+}
+.blocklyDropDownButton {
+    display: inline-block;
+    float: left;
+    padding: 0;
+    margin: 4px;
+    border-radius: 4px;
+    outline: none;
+    border: 1px solid;
+    transition: box-shadow .1s;
+    cursor: pointer;
+}
+.blocklyDropDownButtonHover {
+    box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.1);
+}
+.blocklyDropDownButton:active {
+    box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.1);
+}
+.blocklyDropDownButton > img {
+    width: 80%;
+    height: 80%;
+    margin-top: 5%
+}
+.blocklyDropDownPlaceholder {
+    display: inline-block;
+    float: left;
+    padding: 0;
+    margin: 4px;
+}
+.arrowTop {
+    border-top: 1px solid;
+    border-left: 1px solid;
+    border-top-left-radius: 4px;
+    border-color: inherit;
+}
+.arrowBottom {
+    border-bottom: 1px solid;
+    border-right: 1px solid;
+    border-bottom-right-radius: 4px;
+    border-color: inherit;
+}
+.valueReportBox {
+    min-width: 50px;
+    max-width: 300px;
+    max-height: 200px;
+    overflow: auto;
+    word-wrap: break-word;
+    text-align: center;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
+    font-size: .8em;
+}
+.aceHighlight {
+   position: absolute;
+   background: rgba(100, 100, 200, 0.5);
+   z-index: 20;
+}
+
+/*****************
+  TASK TOOLBAR
+*****************/
+#taskToolbar {
+  -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+  z-index: 1;
+  position: relative;
+}
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape),
+  screen and (min-width: 1025px) and (min-height: 450px) {
+/* Hide task toolbar for tablets and desktop,
+  but keep element as it is used to calculate other elements position in JS */
+  #taskToolbar {
+    visibility: hidden;
+    overflow: hidden;
+    height: 0;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 0px;
+        flex: 0 0 0;
+  }
+}
+#taskToolbar::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  width: 100%;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.8) inset;
+  height: 2px;
+}
+#taskToolbar .fas,
+#taskToolbar .far {
+  font-size: 18px;
+}
+#taskToolbar .playerControls .fa-play {
+  font-size: 24px;
+}
+#modeSelector {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  line-height: 25px;
+}
+#modeSelector .mode {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 1 51px;
+          flex: 0 1 51px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 12px;
+  background-color: #4a4a4a;
+  color: #fff;
+  position: relative;
+}
+#modeSelector .mode#mode-editor {
+  -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+        justify-content: space-between;
+}
+#modeSelector .mode:not(.active) {
+  -webkit-box-pack: center;
+    -ms-flex-pack: center;
+        justify-content: center;
+}
+#modeSelector .mode.active {
+  background: #4a90e2;
+  -webkit-box-flex: 2;
+    -ms-flex: 2 0 auto;
+        flex: 2 0 auto;
+}
+#modeSelector .mode.active::before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 16px;
+  border: 5px solid transparent;
+  border-top-color: #f1f2f7;
+  z-index: 1;
+}
+#modeSelector .mode:not(.active) + .mode:not(.active) {
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 1px 0px 0px 0px #000 inset;
+}
+#modeSelector button {
+  background-color: rgba(0,0,0,0.3);
+  border-radius: 50%;
+  padding: 6px 9px;
+  font-size: 13px;
+  margin-top: -4px;
+  margin-bottom: -3px;
+  color: #fff;
+  border: 0;
+}
+#modeSelector .capacity {
+  margin-right: 6px;
+}
+#modeSelector .mode:not(.active) button {
+  display: none;
+}
+#modeSelector .mode:not(.active) .capacity {
+  display: none;
+}
+#modeSelector button .fas {
+  font-size: 13px;
+}
+#modeSelector .mode .label {
+  text-transform: uppercase;
+  margin-left: 10px;
+  font-weight: bold;
+}
+#modeSelector .mode:not(.active) .label {
+  display: none;
+}
+#modeSelector #mode-player.active .selectIcon {
+  display: none;
+}
+
+/************************
+  DISPLAY HELPER ELEMENTS
+*************************/
+#displayHelperAnswering {
+  display: none;
+}
+
+/************************
+  DISPLAY NOTIFICATIONS
+*************************/
+.notificationMessage {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 11px 0;
+  color: #fff;
+  font-weight: bold;
+  z-index: 1;
+  border-radius: 5px 5px 0 0;
+  line-height: 1.1em;
+}
+@media /* Mobiles */
+  screen and (max-width: 767.9px) and (orientation: portrait),
+  screen and (min-width: 480px) and (max-width: 854.9px) and (orientation: landscape),
+  screen and (min-width: 480px) and (max-height: 449.9px) and (orientation: landscape) {
+  .notificationMessage {
+    box-shadow: 0px 0px 0 2px #fff;
+  }
+}
+.notificationMessage.errorMessage {
+  background-color: #db8b0a;
+}
+.notificationMessage.successMessage {
+  background-color: #8bbb0a;
+}
+.notificationMessage.waitMessage {
+  background-color: #4a90e2;
+}
+.notificationMessage .messageWrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.notificationMessage .messageWrapper .icon {
+  width: 28px;
+  margin: 0 10px;
+  line-height: 28px;
+  text-align: center;
+  color: #fff;
+  background-color: rgba(0,0,0,0.20);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.notificationMessage .messageWrapper .message {
+  -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+  margin: 0;
+}
+.notificationMessage .messageWrapper code {
+  color: #777777;
+}
+
+.notificationMessage .notificationMessageClose {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  color: rgba(0,0,0,0.20);
+  cursor: pointer;
+}
+.notificationMessage .notificationMessageClose span {
+  font-size: 18px;
+}
+.successMessage .btn {
+  background-color: #669900;
+  border: none;
+  box-shadow: none;
+  border-radius: 30px;
+  color: #fff;
+  cursor: pointer;
+  margin-left: 10px;
+  padding: 2px 10px;
+}
+.notificationMessage.notificationMessageLock.errorMessage {
+  background-color: #FF9794;
+}
+.notificationMessage.notificationMessageLock button {
+  display: none;
+}
+.notificationMessage .testResults {
+  padding: 2px 10px;
+  margin: 0px 6px;
+  border-radius: 10px;
+  background-color: white;
+}
+.notificationMessage .testSuccess {
+  color: green;
+}
+.notificationMessage .testResults .testError {
+  color: #FF001F;
+}
+.notificationMessage .testLink {
+  color: #4A90E2;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+
+
+.modalWrapper {
+  display: none;
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #777;
+  background-color: rgba(0,0,0,0.7);
+  transition: all 250ms;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.modalWrapper .modal {
+  width: 800px;
+  margin: 0 auto;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 20px;
+  position: relative;
+}
+.modalWrapper .modalError {
+  background: #fdd;
+  border: 1px solid #caa;
+  color: #600;
+}
+.modalWrapper .modal>.btn.close {
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1em;
+  color: #a7a6a6;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+/************************
+  INTRODUCTION
+*************************/
+#taskIntro,
+#taskIntroLong {
+  color: #787878;
+  /*font-weight: bold;*/
+  font-size: 18px;
+  position: relative;
+}
+#taskIntro .introTitleIcon {
+  float: left;
+  margin: 0px 15px 9px 0;
+  line-height: 1;
+}
+#taskIntro .introTitleIcon .icon {
+  color: #fff;
+  background-color: #4a90e2;
+  border-radius: 50%;
+  width: 2em;
+  line-height: 2em;
+  text-align: center;
+  font-size: 14px;
+}
+#taskIntroLong h2.sectionTitle {
+  font-size: 22px;
+  font-weight: 100;
+  color: #4a90e2;
+}
+button.videoBtn {
+  position: relative;
+  color: #4a90e2;
+  border: 1px solid #4a90e2;
+  border-radius: 50px;
+  box-shadow: none;
+  padding: 8px 15px 8px 40px;
+  cursor: pointer;
+  background: #fff;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+}
+button.videoBtn .icon {
+  position: absolute;
+  left: 15px;
+  top: 10px;
+}
+
+#taskIntroLong .panel-body {
+  padding: 20px;
+  overflow: auto;
+  max-height: calc(100% - 62px); /* 100% - height of panel-heading */
+}
+#taskIntro video {
+  max-width: 100%;
+  margin: 20px auto;
+}
+
+/* Intro controls
+  QuickPi Connexion, QuickPi connexion status, display long intro
+ */
+#introControls {
+  position: absolute;
+  width: 100%;
+  right: 0;
+  bottom: 10px;
+  padding: 0 10px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap-reverse;
+  margin-bottom: -10px; /* Compensate margin bottom needed when buttons wrapped */
+  z-index: 1;
+}
+#introControls .showLongIntro {
+  align-self: flex-end;
+  margin-bottom: 10px; /* Needed to space buttons when wrapped */
+}
+
+button.showLongIntro {
+  position: relative;
+  color: #4a90e2;
+  border: 1px solid #4a90e2;
+  border-radius: 50px;
+  box-shadow: none;
+  padding: 8px 15px 8px 40px;
+  cursor: pointer;
+  background: #fff;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  display: none;
+}
+button.showLongIntro .icon {
+  position: absolute;
+  left: 15px;
+  top: 10px;
+}
+@media /* Tablets portrait */
+  screen and (min-width: 768px) and (orientation: portrait) {
+  #introControls {
+    bottom: 47px;
+  }
+}
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape),
+  screen and (min-width: 1025px) and (min-height: 450px) {
+  button.showLongIntro {
+    display: block;
+  }
+}
+
+/* Long version of task introduction */
+#taskIntroLong {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #fff;
+  z-index: 30;
+}
+#taskIntroLong .short {
+  display: none;
+}
+#taskIntroLong.displayIntroLong {
+  display: block !important;
+}
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9px) and (orientation: portrait),
+  screen and (min-width: 855px) and (min-height: 450px) and (orientation: landscape),
+  screen and (min-width: 1025px) and (min-height: 450px) {
+  #taskIntro .long {
+    display: none;
+  }
+}
+.pythonIntroBtn {
+  color: #4D87CE;
+  font-weight: bold;
+  text-decoration: none;
+}
+.pythonIntroSelect {
+  display: inline-block;
+}
+.pythonIntroSelectBtn {
+  display: inline-block;
+}
+.pythonIntroSelectBtn span {
+  cursor: pointer;
+  padding: 0px 4px;
+  border-radius: 50%;
+  font-size: 14px;
+  line-height: 24px;
+  width: 24px;
+  text-align: center;
+  color: #fff;
+  background-color: #4a90e2;
+  margin: 0px 4px;
+}
+.panel-heading {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+.panel-heading .exit {
+  cursor: pointer;
+  font-size: 18px;
+  color: #4a90e2;
+  border: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+/* QuickPi */
+#taskIntro.piui .introContent {
+  padding: 10px 20px 2em;
+}
+@media /* Tablets portrait */
+  screen and (min-width: 768px) and (orientation: portrait) {
+  #taskIntro.piui .introContent {
+    padding-bottom: 60px;
+  }
+}
+.piui #introControls {
+  justify-content: space-between;
+}
+#piui > * {
+  margin-bottom: 10px;
+}
+#piui .btn {
+  color: #fff;
+  background: #4a90e2;
+  border: none;
+  border-radius: 50px;
+  box-shadow: none;
+  padding: 8px 15px;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+}
+#piui .btn span + span {
+  margin-left: 10px;
+}
+.btn#piconnect {
+  background-color: #f5a623;
+}
+.connectPi #piconnectionlabel {
+  text-align: center;
+}
+.connectPi #piconnectionlabel .deviceName {
+  color: #4a90e2;
+  font-weight: bold;
+}
+.connectPi #piconnectionlabel .deviceName i {
+  padding-right: 10px;
+}
+
+/************************
+  MODAL POPUPS
+*************************/
+
+
+
+/********
+  KEYPAD
+*********/
+
+#quickAlgo-keypad {
+  position: absolute;
+  z-index: 50;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+
+.blocklyWidgetDiv {
+  z-index: 49 !important;
+}
+
+.keypad {
+  position: absolute;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  background-color: #E2F4FC;
+  width: 228px;
+  height: 260px;
+  padding: 8px;
+  border-radius: 6px;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.keypad-value {
+  width: 204px;
+  height: 30px;
+  background-color: #FFF;
+  color: #4A90E2;
+  border-radius: 6px;
+  text-align: center;
+  line-height: 30px;
+  font-size: 26px;
+}
+.keypad-value.keypad-value-small {
+  font-size: 18px;
+}
+
+.keypad-row {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 4px;
+}
+.keypad-row.keypad-row-margin {
+  margin-top: 8px;
+}
+
+.keypad-btn {
+  background-color: #4A90E2;
+  color: #FFF;
+  width: 64px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  font-size: 26px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.keypad-btn.keypad-btn-r {
+  background-color: #DB8B0A;
+}
+
+.keypad-btn.keypad-btn-v {
+  width: 136px;
+  background-color: #88BB88;
+  font-size: 24px;
+}
+
+.keypad-exit {
+  position: absolute;
+  right: -20px;
+  top: -20px;
+  height: 40px;
+  width: 40px;
+  text-align:  center;
+  background-color: #e86E64;
+  border-radius: 20px;
+  font-size: 20px;
+  color: #FFF;
+  line-height: 40px;
+}
+
+
+#quickAlgo-altcode {
+    z-index: 50;
+    position: absolute;
+    top: calc(51% - (50vh / 2));
+    left: calc(50% - (50vw / 2));
+    width: 50vw;
+    height: 50vh;
+    background-color: #fff;
+    border-radius: 5px;
+    border: 2px solid #4a90e2;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    resize: both;
+    overflow: auto;
+    box-shadow: 2px 4px;
+}
+
+#quickAlgo-altcode textarea {
+    height: 100%;
+    width: 100%;
+    resize: none;
+}
+#quickAlgo-altcode textarea:focus {
+    background-color: #DAE9F9;
+}
+
+.panel-heading.panel-heading-nopadding {
+    padding: 0px;
+}
+#editExerciseTitle {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 44px;
+}
+#editExerciseTitle label {
+  font-size: 12px;
+}
+#editExerciseTitle input {
+  width: 90%;
+}
+#editExerciseDescription label {
+  font-size: 12px;
+}
+#editExerciseDescription textarea {
+  width: 100%;
+  height: 100%;
+  resize: vertical;
+  margin-right: 44px;
+}
+#panel-body-bottom {
+  padding-top: 8px;
+  display: flex;
+  justify-content: right;
+}
+.panel-body #aboutAuthorsLicense {
+  font-size: 1.5em;
+}
+#aboutPanel p {
+  text-align: center;
+}
+#aboutLicenseIcon {
+  color: #4a90e2;
+}
+#aboutAuthorsLicense {
+  text-align: center;
+}
+#aboutLicenseIcon {
+  cursor: pointer;
+}
diff --git a/pemFioi/quickAlgo/quickAlgo.css b/pemFioi/quickAlgo/quickAlgo.css
index dca392bff..887199797 100644
--- a/pemFioi/quickAlgo/quickAlgo.css
+++ b/pemFioi/quickAlgo/quickAlgo.css
@@ -62,7 +62,7 @@ body > * {
 }
 #blocklyDiv {
 	height: 100%;
-	width: 100%;
+    width: 100%;
 }
 
 #testCaseName {
@@ -189,8 +189,18 @@ input[type=button] {
 	float: right;
 }
 
-/* Save or load Modal */
-#saveOrLoadModal {
+.btn.close {
+	border: none;
+	font-weight: bold;
+    font-size: 24px;
+    line-height: 18px;
+	color: #a7a6a6;
+}
+
+/* Modal popup */
+.modalWrapper {
+    display: none;
+    z-index: 1000;
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -200,7 +210,7 @@ input[type=button] {
 	background-color: rgba(0,0,0,0.7);
 	transition: all 250ms;
 }
-#saveOrLoadModal .modal {
+.modalWrapper .modal {
 	width: 800px;
 	margin: 0 auto;
 	background: #fff;
@@ -209,15 +219,11 @@ input[type=button] {
 	padding: 20px;
 	position: relative;
 }
-#saveOrLoadModal .btn.close {
-	border: none;
-	font-weight: bold;
-	font-size: 24px;
+.modalWrapper .modal>.btn.close {
+	line-height: 1em;
 	position: absolute;
 	top: 0px;
-	right: 0px;
-	color: #a7a6a6;
-	line-height: 1em;
+    right: 0px;
 }
 .blocklyFlyoutBackground {
     fill-opacity: 1 !important;
@@ -303,6 +309,13 @@ input[type=button] {
    background: rgba(100, 100, 200, 0.5);
    z-index: 20;
 }
+#capacity {
+    display: inline;
+}
+.capacityRed {
+    background-color: #E77471;
+    color: black;
+}
 #testSelector {
     padding-left: 10px;
 }
@@ -391,10 +404,33 @@ input[type=button] {
 .panel-body:after {
   clear: both;
 }
+#testSelector .panel.currentTest {
+  border-color: #2991d6;
+}
 #testSelector .panel-heading {
-  border: 1px solid transparent;
+  border: 1px solid #8bc4e9;
+  background-color: #ddedf8;
+  position: relative;
 }
 #testSelector .panel-heading:hover {
   cursor: pointer;
   border: 1px solid #000000;
 }
+#testSelector .panel-heading::after {
+  content: "\25bc";
+  position: absolute;
+  right: 10px;
+  top: 3px;
+}
+#testSelector .currentTest .panel-heading {
+  background-color: #a1cfed;
+  border-color: transparent;
+  color: #333;
+}
+#testSelector .currentTest .panel-heading:hover {
+  cursor: default;
+  border-color: transparent;
+}
+#testSelector .currentTest .panel-heading::after {
+  content: normal;
+}
diff --git a/pemFioi/quickAlgo/subtask.js b/pemFioi/quickAlgo/subtask.js
index 0fb6217ef..8848887b2 100644
--- a/pemFioi/quickAlgo/subtask.js
+++ b/pemFioi/quickAlgo/subtask.js
@@ -1,343 +1,682 @@
-/*
-    subtask:
-        Logic for quickAlgo tasks, implements the Bebras task API.
-*/
-
-var initBlocklySubTask = function(subTask, language) {
-   // Blockly tasks need to always have the level-specific behavior from
-   // beaver-task-2.0
-   subTask.assumeLevels = true;
-
-   if (subTask.data["medium"] == undefined) {
-      subTask.load = function(views, callback) {
-         subTask.loadLevel("easy");
-         callback();
-      };
-   }
-
-   if (language == undefined) {
-      language = "fr";
-   }
-
-   subTask.loadLevel = function(curLevel) {
-      subTask.levelGridInfos = extractLevelSpecific(subTask.gridInfos, curLevel);
-
-      subTask.blocklyHelper = getBlocklyHelper(subTask.levelGridInfos.maxInstructions);
-      subTask.answer = null;
-      subTask.state = {};
-      subTask.iTestCase = 0;
-      if(!window.taskResultsCache) {
-         window.taskResultsCache = {};
-      }
-      if(!window.taskResultsCache[curLevel]) {
-         window.taskResultsCache[curLevel] = {};
-      }
-
-      this.level = curLevel;
-
-      // TODO: fix bebras platform to make this unnecessary
-      try {
-         $('#question-iframe', window.parent.document).css('width', '100%');
-      } catch(e) {
-      }
-      $('body').css("width", "100%").addClass('blockly');
-      window.focus();
-
-      this.iTestCase = 0;
-      this.nbTestCases = subTask.data[curLevel].length;
-
-      this.context = getContext(this.display, subTask.levelGridInfos, curLevel);
-      this.context.raphaelFactory = this.raphaelFactory;
-      this.context.delayFactory = this.delayFactory;
-      this.context.blocklyHelper = this.blocklyHelper;
-
-      if (this.display) {
-        window.quickAlgoInterface.loadInterface(this.context);
-        if (subTask.levelGridInfos.hideSaveOrLoad) {
-           $("#saveOrLoadBtn").hide();
-        }
-        if (subTask.levelGridInfos.example && subTask.levelGridInfos.example[subTask.blocklyHelper.language]) {
-           $("#loadExampleBtn").show();
-        }
-     }
-
-      this.blocklyHelper.loadContext(this.context);
-
-      //this.answer = task.getDefaultAnswerObject();
-      displayHelper.hideValidateButton = true;
-      displayHelper.timeoutMinutes = 30;
-
-      this.blocklyHelper.setIncludeBlocks(extractLevelSpecific(this.context.infos.includeBlocks, curLevel));
-
-      var blocklyOptions = {
-         readOnly: !!subTask.taskParams.readOnly
-         };
-
-      this.blocklyHelper.load(stringsLanguage, this.display, this.data[curLevel].length, blocklyOptions);
-
-      if(this.display) {
-         window.quickAlgoInterface.initTestSelector(this.nbTestCases);
-      }
-
-      subTask.changeTest(0);
-   };
-
-   subTask.updateScale = function() {
-      this.context.updateScale();
-      this.blocklyHelper.updateSize();
-   };
-
-   var resetScores = function() {
-   };
-
-   var updateScores = function() {
-   };
-
-   function changeScore(robot, deltaScore) {
-      scores[robot] += deltaScore;
-      updateScores();
-   };
-
-   subTask.unloadLevel = function(callback) {
-      window.quickAlgoInterface.resetTestScores();
-      this.context.unload();
-      this.blocklyHelper.unloadLevel();
-      callback();
-   };
-
-   subTask.unload = function(callback) {
-      var that = this;
-      subTask.unloadLevel(function () {
-         that.blocklyHelper.unload();
-         callback();
-      });
-   };
-
-   subTask.reset = function() {
-      this.context.reset();
-   };
-
-   subTask.program_end = function(callback) {
-      this.context.program_end(callback);
-   };
-
-   var initContextForLevel = function(iTestCase) {
-      subTask.iTestCase = iTestCase;
-      subTask.context.reset(subTask.data[subTask.level][iTestCase]);
-      subTask.context.iTestCase = iTestCase;
-      subTask.context.nbTestCases = subTask.nbTestCases;
-      //      var prefix = "Test " + (subTask.iTestCase + 1) + "/" + subTask.nbTestCases + " : ";
-      subTask.context.messagePrefixFailure = '';
-      subTask.context.messagePrefixSuccess = '';
-      subTask.context.linkBack = false;
-   };
-
-   subTask.run = function() {
-      initBlocklyRunner(subTask.context, function(message, success) {
-         $("#errors").html(''+message+'');
-      });
-      initContextForLevel(subTask.iTestCase);
-      subTask.blocklyHelper.run(subTask.context);
-   };
-
-   subTask.submit = function() {
-      this.context.display = false;
-      this.getAnswerObject(); // to fill this.answer;
-
-      $('#displayHelper_graderMessage').html('
' + languageStrings.gradingInProgress + '
');
-
-      this.getGrade(function(result) {
-         $('#displayHelper_graderMessage').html("");
-         subTask.context.display = true;
-         subTask.context.changeDelay(200);
-         initBlocklyRunner(subTask.context, function(message, success) {
-            $("#errors").html(''+message+'');
-            platform.validate("done");
-         });
-         subTask.changeTest(result.iTestCase - subTask.iTestCase);
-         initContextForLevel(result.iTestCase);
-         subTask.context.linkBack = true;
-         subTask.context.messagePrefixSuccess = window.languageStrings.allTests;
-         subTask.blocklyHelper.run(subTask.context);
-      }, true);
-   };
-
-   subTask.step = function () {
-      subTask.context.changeDelay(200);
-      if(!subTask.context.runner || subTask.context.runner.nbRunning() <= 0) {
-        initBlocklyRunner(subTask.context, function(message, success) {
-           $("#errors").html(''+message+'');
-        });
-        initContextForLevel(subTask.iTestCase);
-      }
-      subTask.blocklyHelper.step(subTask.context);
-   };
-
-   subTask.stop = function() {
-      if(this.context.runner) {
-         this.context.runner.stop();
-      }
-      this.context.reset();
-   };
-
-   subTask.reloadStateObject = function(stateObj) {
-      this.state = stateObj;
-//      this.level = state.level;
-
-//      initContextForLevel(this.level);
-
-//      this.context.runner.stop();
-   };
-
-   subTask.loadExample = function() {
-      subTask.blocklyHelper.loadExample(subTask.levelGridInfos.example);
-   };
-
-   subTask.getDefaultStateObject = function() {
-      return { level: "easy" };
-   };
-
-   subTask.getStateObject = function() {
-      this.state.level = this.level;
-      return this.state;
-   };
-
-   subTask.changeSpeed =  function(speed) {
-      this.context.changeDelay(speed);
-      if ((this.context.runner == undefined) || !this.context.runner.isRunning()) {
-         this.run();
-      } else if (this.context.runner.stepMode) {
-         this.context.runner.run();
-      }
-   };
-
-   subTask.getAnswerObject = function() {
-      this.blocklyHelper.savePrograms();
-
-      this.answer = this.blocklyHelper.programs;
-      return this.answer;
-   };
-
-   subTask.reloadAnswerObject = function(answerObj) {
-      if(typeof answerObj === "undefined") {
-        this.answer = this.getDefaultAnswerObject();
-      } else {
-        this.answer = answerObj;
-      }
-      this.blocklyHelper.programs = this.answer;
-      if (this.answer != undefined) {
-         this.blocklyHelper.loadPrograms();
-      }
-   };
-
-   subTask.getDefaultAnswerObject = function() {
-      var defaultBlockly = this.blocklyHelper.getDefaultContent();
-      return [{javascript:"", blockly: defaultBlockly, blocklyJS: ""}];
-   };
-
-   subTask.changeTest = function(delta) {
-      var newTest = subTask.iTestCase + delta;
-      if ((newTest >= 0) && (newTest < this.nbTestCases)) {
-         if(this.context.runner) {
-            this.context.runner.stop();
-         }
-         initContextForLevel(newTest);
-         if(subTask.context.display) {
-            window.quickAlgoInterface.updateTestSelector(newTest);
-         }
-      }
-   };
-
-   subTask.changeTestTo = function(iTest) {
-      var delta = iTest - subTask.iTestCase;
-      if(delta != 0) {
-         subTask.changeTest(delta);
-      }
-   };
-
-   subTask.getGrade = function(callback, display) {
-      subTask.context.changeDelay(0);
-      var code = subTask.blocklyHelper.getCodeFromXml(subTask.answer[0].blockly, "javascript");
-      code = subTask.blocklyHelper.getFullCode(code);
-      var codes = [code]; // We only ever send one code to grade
-      subTask.iTestCase = 0;
-
-/*      var levelResultsCache = window.taskResultsCache[this.level];
-
-      if(levelResultsCache[code]) {
-         // We already have a cached result for that
-         window.quickAlgoInterface.updateTestScores(levelResultsCache[code].fullResults);
-         callback(levelResultsCache[code].results);
-         return;
-      }*/
-
-      initBlocklyRunner(subTask.context, function(message, success) {
-         var computeGrade = function(context, message) {
-            var rate = 0;
-            if (context.success) {
-               rate = 1;
-            }
-            return {
-               successRate: rate,
-               message: message
-            };
-         }
-         if (subTask.levelGridInfos.computeGrade != undefined) {
-            computeGrade = subTask.levelGridInfos.computeGrade;
-         }
-         subTask.testCaseResults[subTask.iTestCase] = computeGrade(subTask.context, message)
-         subTask.iTestCase++;
-         if (subTask.iTestCase < subTask.nbTestCases) {
-            initContextForLevel(subTask.iTestCase);
-            subTask.context.runner.runCodes(codes);
-         } else {
-            var iWorstTestCase = 0;
-            var worstRate = 1;
-            var nbSuccess = 0;
-            for (var iCase = 0; iCase < subTask.nbTestCases; iCase++) {
-               if (subTask.testCaseResults[iCase].successRate >= 1) {
-                  nbSuccess++;
-               }
-               if (subTask.testCaseResults[iCase].successRate < worstRate) {
-                  worstRate = subTask.testCaseResults[iCase].successRate;
-                  iWorstTestCase = iCase;
-               }
-            }
-            subTask.testCaseResults[iWorstTestCase].iTestCase = iWorstTestCase;
-            if(display) {
-               window.quickAlgoInterface.updateTestScores(subTask.testCaseResults);
-            }
-            if(subTask.testCaseResults[iWorstTestCase].successRate < 1) {
-               if(subTask.nbTestCases == 1) {
-                  var msg = subTask.testCaseResults[iWorstTestCase].message;
-               } else if(nbSuccess > 0) {
-                  var msg = languageStrings.resultsPartialSuccess.format({
-                     nbSuccess: nbSuccess,
-                     nbTests: subTask.nbTestCases
-                     });
-               } else {
-                  var msg = languageStrings.resultsNoSuccess;
-               }
-               var results = {
-                  message: msg,
-                  successRate: subTask.testCaseResults[iWorstTestCase].successRate,
-                  iTestCase: iWorstTestCase
-               };
-            } else {
-               var results = subTask.testCaseResults[iWorstTestCase];
-            }
-            /*levelResultsCache[code] = {
-               results: results,
-               fullResults: subTask.testCaseResults
-               };*/
-            callback(results);
-         }
-      });
-      subTask.iTestCase = 0;
-      subTask.testCaseResults = [];
-      initContextForLevel(subTask.iTestCase);
-      subTask.context.linkBack = true;
-      subTask.context.messagePrefixSuccess = window.languageStrings.allTests;
-      subTask.context.runner.runCodes(codes);
-   };
-}
+/*
+    subtask:
+        Logic for quickAlgo tasks, implements the Bebras task API.
+*/
+
+var initBlocklySubTask = function(subTask, language) {
+   // Blockly tasks need to always have the level-specific behavior from
+   // beaver-task-2.0
+   subTask.assumeLevels = true;
+
+   if (window.forcedLevel != null) {
+      for (var level in subTask.data) {
+         if (window.forcedLevel != level) {
+            subTask.data[level] = undefined;
+         }
+      }
+      subTask.load = function(views, callback) {
+         subTask.loadLevel(window.forcedLevel);
+         callback();
+      };
+   } else if (subTask.data["medium"] == undefined) {
+      subTask.load = function(views, callback) {
+         subTask.loadLevel("easy");
+         callback();
+      };
+   }
+
+   if (language == undefined) {
+      language = "fr";
+   }
+
+   subTask.loadLevel = function(curLevel) {
+      var levelGridInfos = extractLevelSpecific(subTask.gridInfos, curLevel);
+      subTask.levelGridInfos = levelGridInfos;
+
+      // Convert legacy options
+      if(!levelGridInfos.hideControls) { levelGridInfos.hideControls = {}; }
+      levelGridInfos.hideControls.saveOrLoad = levelGridInfos.hideControls.saveOrLoad || !!levelGridInfos.hideSaveOrLoad;
+      levelGridInfos.hideControls.loadBestAnswer = levelGridInfos.hideControls.loadBestAnswer || !!levelGridInfos.hideLoadBestAnswers;
+
+      subTask.blocklyHelper = getBlocklyHelper(subTask.levelGridInfos.maxInstructions, subTask);
+      subTask.answer = null;
+      subTask.state = {};
+      subTask.iTestCase = 0;
+      subTask.nbExecutions = 0;
+      subTask.clearWbe();
+      if(!window.taskResultsCache) {
+         window.taskResultsCache = {};
+      }
+      if(!window.taskResultsCache[curLevel]) {
+         window.taskResultsCache[curLevel] = {};
+      }
+      window.modulesLanguage = subTask.blocklyHelper.language;
+
+      this.level = curLevel;
+
+      // TODO: fix bebras platform to make this unnecessary
+      try {
+         $('#question-iframe', window.parent.document).css('width', '100%');
+      } catch(e) {
+      }
+      $('body').css("width", "100%").addClass('blockly');
+      window.focus();
+
+      this.iTestCase = 0;
+      this.nbTestCases = subTask.data[curLevel].length;
+
+      this.context = quickAlgoLibraries.getContext(this.display, levelGridInfos, curLevel);
+      this.context.raphaelFactory = this.raphaelFactory;
+      this.context.delayFactory = this.delayFactory;
+      this.context.blocklyHelper = this.blocklyHelper;
+
+      if (this.display) {
+         if (window.quickAlgoInterface.loadUserTaskData)
+            window.quickAlgoInterface.loadUserTaskData(levelGridInfos.userTaskData);
+         window.quickAlgoInterface.loadInterface(this.context, curLevel);
+         window.quickAlgoInterface.setOptions({
+            hasExample: levelGridInfos.example && levelGridInfos.example[subTask.blocklyHelper.language],
+            conceptViewer: levelGridInfos.conceptViewer,
+            conceptViewerLang: this.blocklyHelper.language,
+            hasTestThumbnails: levelGridInfos.hasTestThumbnails,
+            hideControls: levelGridInfos.hideControls,
+            introMaxHeight: levelGridInfos.introMaxHeight,
+            canEditSubject: !!levelGridInfos.canEditSubject
+         });
+         window.quickAlgoInterface.bindBlocklyHelper(this.blocklyHelper);
+      }
+
+      this.blocklyHelper.loadContext(this.context);
+
+      //this.answer = task.getDefaultAnswerObject();
+      displayHelper.hideValidateButton = true;
+      displayHelper.timeoutMinutes = subTask.gridInfos.timeoutMinutes ? subTask.gridInfos.timeoutMinutes : 30;
+
+      var curIncludeBlocks = extractLevelSpecific(this.context.infos.includeBlocks, curLevel);
+
+      // Load concepts into conceptViewer; must be done before loading
+      // Blockly/Scratch, as scratch-mode will modify includeBlocks
+      if(this.display && levelGridInfos.conceptViewer) {
+         var allConcepts = this.context.getConceptList();
+         allConcepts = allConcepts.concat(getConceptViewerBaseConcepts());
+
+         var concepts = window.getConceptsFromBlocks(curIncludeBlocks, allConcepts, this.context);
+         if(levelGridInfos.conceptViewer.length) {
+            concepts = concepts.concat(levelGridInfos.conceptViewer);
+         } else {
+            concepts.push('base');
+         }
+         concepts = window.conceptsFill(concepts, allConcepts);
+         window.conceptViewer.loadConcepts(concepts, levelGridInfos.conceptViewerMain);
+         window.conceptViewer.contextTitle = this.context.title;
+      }
+
+      this.blocklyHelper.setIncludeBlocks(curIncludeBlocks);
+
+      var blocklyOptions = {
+         readOnly: !!subTask.taskParams.readOnly,
+         defaultCode: subTask.defaultCode,
+         maxListSize: this.context.infos.maxListSize,
+         startingExample: this.context.infos.startingExample,
+         placeholderBlocks: !!(this.context.placeholderBlocks || this.context.infos.placeholderBlocks)
+      };
+
+      // Handle zoom options
+      var maxInstructions = this.context.infos.maxInstructions ? this.context.infos.maxInstructions : Infinity;
+      var zoomOptions = {
+         controls: false,
+         scale: maxInstructions > 20 ? 1 : 1.1
+      };
+      if(this.context.infos && this.context.infos.zoom) {
+         zoomOptions.controls = !!this.context.infos.zoom.controls;
+         zoomOptions.scale = (typeof this.context.infos.zoom.scale != 'undefined') ? this.context.infos.zoom.scale : zoomOptions.scale;
+      }
+      blocklyOptions.zoom = zoomOptions;
+
+      // Handle scroll
+//      blocklyOptions.scrollbars = maxInstructions > 10;
+      blocklyOptions.scrollbars = true;
+      if(typeof this.context.infos.scrollbars != 'undefined') {
+         blocklyOptions.scrollbars = this.context.infos.scrollbars;
+      }
+
+      this.blocklyHelper.load(stringsLanguage, this.display, this.data[curLevel].length, blocklyOptions);
+
+      if(this.display) {
+         window.quickAlgoInterface.initTestSelector(this.nbTestCases);
+         window.quickAlgoInterface.onResize();
+      }
+
+      subTask.changeTest(0);
+
+      // Log the loaded level after a second
+      if(window.levelLogActivityTimeout) { clearTimeout(window.levelLogActivityTimeout); }
+      window.levelLogActivityTimeout = setTimeout(function() {
+         subTask.logActivity('loadLevel;' + curLevel);
+         window.levelLogActivityTimeout = null;
+      }, 1000);
+   };
+
+   subTask.updateScale = function() {
+      setTimeout(function() {
+         try {
+            subTask.context.updateScale();
+            subTask.blocklyHelper.updateSize();
+         } catch(e) {}
+      }, 0);
+   };
+
+   var resetScores = function() {
+   };
+
+   var updateScores = function() {
+   };
+
+   function changeScore(robot, deltaScore) {
+      scores[robot] += deltaScore;
+      updateScores();
+   };
+
+   subTask.unloadLevel = function(callback) {
+      if(this.display) {
+         window.quickAlgoInterface.unloadLevel();
+      }
+      this.context.unload();
+      this.blocklyHelper.unloadLevel();
+      if(window.conceptViewer) {
+         window.conceptViewer.unload();
+      }
+      callback();
+   };
+
+   subTask.unload = function(callback) {
+      var that = this;
+      subTask.unloadLevel(function () {
+         that.blocklyHelper.unload();
+         callback();
+      });
+   };
+
+   subTask.reset = function() {
+      this.context.reset();
+   };
+
+   subTask.program_end = function(callback) {
+      this.context.program_end(callback);
+   };
+
+   var initContextForLevel = function(iTestCase) {
+      //      var prefix = "Test " + (subTask.iTestCase + 1) + "/" + subTask.nbTestCases + " : ";
+      subTask.iTestCase = iTestCase;
+      subTask.context.iTestCase = iTestCase;
+      subTask.context.nbTestCases = subTask.nbTestCases;
+      subTask.context.messagePrefixFailure = '';
+      subTask.context.messagePrefixSuccess = '';
+      subTask.context.linkBack = false;
+      subTask.context.reset(subTask.data[subTask.level][iTestCase]);
+   };
+
+   subTask.logActivity = function(details) {
+      var logOption = subTask.taskParams && subTask.taskParams.options && subTask.taskParams.options.log;
+      if(!logOption) { return; }
+
+      if(!details) {
+         // Sends a validate("log") to the platform if the log GET parameter is set
+         // Performance note : we don't call getAnswerObject, as it's already
+         // called every second by buttonsAndMessages.
+         if(JSON.stringify(subTask.answer) != subTask.lastLoggedAnswer) {
+            platform.validate("log");
+            subTask.lastLoggedAnswer = JSON.stringify(subTask.answer);
+         }
+         return;
+      }
+
+      // We can only log extended activity if the platform gave us a
+      // logActivity function
+      if(!window.logActivity) { return; }
+      window.logActivity(details);
+   };
+
+   subTask.waitBetweenExecutions = function() {
+      // After a user-started execution, wait a few seconds if required by
+      // the task
+      var wbe = subTask.levelGridInfos.waitBetweenExecutions;
+      if(!wbe) { return; }
+
+      subTask.nbExecutions++;
+
+      if(typeof wbe == "number") {
+         var wait = wbe * 1000;
+         var maxExecutions = 0;
+      } else {
+         var wait = wbe.wait * 1000;
+         var maxExecutions = wbe.nbExecutions || 0;
+      }
+
+      if(subTask.nbExecutions < maxExecutions) { return; }
+
+      subTask.waitBetweenExecutionsTimeout = setTimeout(subTask.clearWbe, wait);
+   };
+
+   subTask.onChange = function() {
+      if(subTask.context.runner) {
+         if(subTask.context.display) {
+            subTask.context.runner.reset();
+         } else {
+            subTask.resetRunnerAfterGrading = true;
+         }
+      }
+
+      if(subTask.waitBetweenExecutionsTimeout && window.quickAlgoInterface) {
+         var msg = subTask.levelGridInfos.waitBetweenExecutions.message || window.languageStrings.waitBetweenExecutions;
+         quickAlgoInterface.displayNotification('wait', msg, true);
+      }
+   };
+
+   subTask.clearWbe = function() {
+      subTask.waitBetweenExecutionsTimeout = null;
+      if(window.quickAlgoInterface) {
+         quickAlgoInterface.displayNotification('wait', null, true);
+      }
+   };
+
+   subTask.initRun = function(callback) {
+      if(window.quickAlgoInterface) {
+         quickAlgoInterface.toggleMoreDetails(false);
+      }
+      var initialTestCase = subTask.iTestCase;
+      initBlocklyRunner(subTask.context, function(message, success) {
+         if(typeof success == 'undefined') {
+            success = subTask.context.success;
+         }
+         function handleResults(results) {
+            subTask.context.display = true;
+            if(callback) {
+               callback(message, success);
+            } else if(results.successRate >= 1) {
+               // All tests passed, request validate from the platform
+               platform.validate("done");
+            }
+            if(results.successRate < 1) {
+               // Display the execution message as it won't be shown through
+               // validate
+               window.quickAlgoInterface.displayResults(
+                   {iTestCase: initialTestCase, message: message, successRate: success ? 1 : 0},
+                   results
+               );
+            }
+         }
+         // Log the attempt
+         subTask.logActivity();
+
+         // Wait between attempts
+         subTask.waitBetweenExecutions();
+
+         // Launch an evaluation after the execution
+         if (!subTask.context.doNotStartGrade ) {
+            subTask.context.display = false;
+            subTask.getGrade(handleResults, true, subTask.iTestCase);
+         } else {
+            if (!subTask.context.success)
+               window.quickAlgoInterface.displayError(message);
+         }
+      });
+      initContextForLevel(initialTestCase);
+   };
+
+   subTask.run = function(callback) {
+      if(subTask.validating) { return; }
+      subTask.initRun(callback);
+      subTask.blocklyHelper.run(subTask.context);
+   };
+
+   subTask.submit = function() {
+      this.stop();
+      this.context.display = false;
+      this.getAnswerObject(); // to fill this.answer;
+
+      $('#displayHelper_graderMessage').html('
' + languageStrings.gradingInProgress + '
');
+
+      this.getGrade(function(result) {
+         $('#displayHelper_graderMessage').html("");
+         subTask.context.display = true;
+         initBlocklyRunner(subTask.context, function(message, success) {
+            window.quickAlgoInterface.displayError(''+message+'');
+            platform.validate("done");
+         });
+         subTask.changeTest(result.iTestCase - subTask.iTestCase);
+         initContextForLevel(result.iTestCase);
+         subTask.context.linkBack = true;
+         subTask.context.messagePrefixSuccess = window.languageStrings.allTests;
+         subTask.blocklyHelper.run(subTask.context);
+      }, true);
+   };
+
+   subTask.step = function () {
+      if(subTask.validating) { return; }
+      subTask.context.changeDelay(200);
+      if ((this.context.runner === undefined) || !this.context.runner.isRunning()) {
+         this.initRun();
+      }
+      subTask.blocklyHelper.step(subTask.context);
+   };
+
+   subTask.stop = function() {
+      if(subTask.validating) { return; }
+      this.clearAnalysis();
+
+      if(this.context.runner) {
+         this.context.runner.stop();
+      }
+
+      // Reset everything through changeTest
+      subTask.changeTest(0);
+   };
+
+   /**
+    * Clears the analysis container.
+    */
+   subTask.clearAnalysis = function() {
+      if (this.blocklyHelper.clearSkulptAnalysis) {
+         this.blocklyHelper.clearSkulptAnalysis();
+      }
+   };
+
+   subTask.reloadStateObject = function(stateObj) {
+      this.state = stateObj;
+//      this.level = state.level;
+
+//      initContextForLevel(this.level);
+
+//      this.context.runner.stop();
+   };
+
+   subTask.loadExample = function(exampleObj) {
+      subTask.blocklyHelper.loadExample(exampleObj ? exampleObj : subTask.levelGridInfos.example);
+   };
+
+   subTask.getDefaultStateObject = function() {
+      return { level: "easy" };
+   };
+
+   subTask.getStateObject = function() {
+      this.state.level = this.level;
+      return this.state;
+   };
+
+   subTask.changeSpeed = function(speed) {
+      this.context.changeDelay(speed);
+      if ((this.context.runner === undefined) || !this.context.runner.isRunning()) {
+         this.run();
+      } else if (this.context.runner.stepMode) {
+         this.context.runner.run();
+      }
+   };
+
+   // used in new playback controls with speed slider
+   subTask.setStepDelay = function(delay) {
+      this.context.changeDelay(delay);
+   };
+
+   // used in new playback controls with speed slider
+   subTask.pause = function() {
+      if(subTask.validating) { return; }
+      if(this.context.runner) {
+         this.context.runner.stepMode = true;
+      }
+   };
+
+   // used in new playback controls with speed slider
+   subTask.play = function() {
+      if(subTask.validating) { return; }
+      this.clearAnalysis();
+
+      if ((this.context.runner === undefined) || !this.context.runner.isRunning()) {
+         this.run();
+      } else if (this.context.runner.stepMode) {
+         this.context.runner.run();
+      }
+   };
+
+   subTask.getAnswerObject = function() {
+      this.blocklyHelper.savePrograms();
+
+      this.answer = this.blocklyHelper.programs;
+      return this.answer;
+   };
+
+   subTask.reloadAnswerObject = function(answerObj) {
+      if(typeof answerObj == "undefined") {
+         this.answer = this.getDefaultAnswerObject();
+      } else {
+         this.answer = answerObj;
+      }
+      this.blocklyHelper.programs = this.answer;
+      if (this.answer != undefined) {
+         this.blocklyHelper.loadPrograms();
+      }
+      window.quickAlgoInterface.updateBestAnswerStatus();
+   };
+
+   subTask.getDefaultAnswerObject = function() {
+      var defaultBlockly = this.blocklyHelper.getDefaultContent();
+      return [{javascript:"", blockly: defaultBlockly, blocklyJS: ""}];
+   };
+
+   subTask.changeTest = function(delta) {
+      var newTest = subTask.iTestCase + delta;
+      if ((newTest >= 0) && (newTest < this.nbTestCases)) {
+         if(this.context.runner) {
+            this.context.runner.stop();
+         }
+         initContextForLevel(newTest);
+         if(window.quickAlgoInterface) {
+            window.quickAlgoInterface.displayError(null);
+            if(subTask.context.display) {
+               window.quickAlgoInterface.updateTestSelector(newTest);
+            }
+         }
+      }
+   };
+
+   subTask.changeTestTo = function(iTest) {
+      var delta = iTest - subTask.iTestCase;
+      if(delta != 0) {
+         subTask.changeTest(delta);
+      }
+   };
+
+   subTask.getGrade = function(callback, display, mainTestCase) {
+      // mainTest : set to indicate the first iTestCase to test (typically,
+      // current iTestCase) before others; test will then stop if the
+      if(subTask.context.infos && subTask.context.infos.hideValidate) {
+         // There's no validation
+         callback({
+            message: '',
+            successRate: 1,
+            iTestCase: 0
+         });
+         return;
+      }
+
+      // XXX :: Related to platform-pr.js#L67 : why does it start two
+      // evaluations at the same time? This can cause serious issues with the
+      // Python runner, and on some contexts such as quick-pi
+      if(window.subTaskValidating && window.subTaskValidationAttempts < 5) {
+         setTimeout(function() { subTask.getGrade(callback, display, mainTestCase); }, 1000);
+         window.subTaskValidationAttempts += 1;
+         console.log("Queueing validation... (attempt " + window.subTaskValidationAttempts + ")");
+         return;
+      }
+      window.subTaskValidationAttempts = 0;
+      window.subTaskValidating = true;
+      subTask.validating = true;
+      if(display) {
+        quickAlgoInterface.setValidating(true);
+      }
+
+      var oldDelay = subTask.context.infos.actionDelay;
+      subTask.context.changeDelay(0);
+      var codes = subTask.blocklyHelper.getAllCodes(subTask.answer);
+
+      var checkError = '';
+      var checkDisplay = function(err) { checkError = err; }
+      if(!subTask.blocklyHelper.checkCodes(codes, checkDisplay)) {
+         var results = {
+            message: checkError,
+            successRate: 0,
+            iTestCase: 0
+         };
+         subTask.context.changeDelay(oldDelay);
+         subTask.postGrading();
+         callback(results);
+         return;
+      }
+
+      var oldTestCase = subTask.iTestCase;
+
+      /*      var levelResultsCache = window.taskResultsCache[this.level];
+
+            if(levelResultsCache[code]) {
+               // We already have a cached result for that
+               window.quickAlgoInterface.updateTestScores(levelResultsCache[code].fullResults);
+               subTask.context.changeDelay(oldDelay);
+               callback(levelResultsCache[code].results);
+               return;
+            }*/
+
+      function startEval() {
+         // Start evaluation on iTestCase
+         initContextForLevel(subTask.iTestCase);
+         subTask.testCaseResults[subTask.iTestCase] = {evaluating: true};
+         if(display) {
+            window.quickAlgoInterface.updateTestScores(subTask.testCaseResults);
+         }
+         var codes = subTask.blocklyHelper.getAllCodes(subTask.answer);
+         subTask.context.runner.runCodes(codes);
+      }
+
+      function postEval() {
+         // Behavior after an eval
+         if(typeof mainTestCase == 'undefined') {
+            // Normal behavior : evaluate all tests
+            subTask.iTestCase++;
+            if (subTask.iTestCase < subTask.nbTestCases) {
+               startEval();
+               return;
+            }
+         } else if(subTask.testCaseResults[subTask.iTestCase].successRate >= 1) {
+            // A mainTestCase is defined, evaluate mainTestCase first then the
+            // others until a test fails
+            if(subTask.iTestCase == mainTestCase && subTask.iTestCase != 0) {
+               subTask.iTestCase = 0;
+               startEval();
+               return;
+            }
+            subTask.iTestCase++;
+            if(subTask.iTestCase == mainTestCase) { subTask.iTestCase++ }; // Already done
+            if (subTask.iTestCase < subTask.nbTestCases) {
+               startEval();
+               return;
+            }
+         }
+
+         // All evaluations done, tally results
+         subTask.iTestCase = oldTestCase;
+         if(typeof mainTestCase == 'undefined') {
+            var iWorstTestCase = 0;
+            var worstRate = 1;
+         } else {
+            // Priority to the mainTestCase if worst test case
+            var iWorstTestCase = mainTestCase;
+            var worstRate = subTask.testCaseResults[mainTestCase].successRate;
+            // Change back to the mainTestCase
+         }
+         var nbSuccess = 0;
+         for (var iCase = 0; iCase < subTask.nbTestCases; iCase++) {
+            var sr = subTask.testCaseResults[iCase] ? subTask.testCaseResults[iCase].successRate : 0;
+            if(sr >= 1) {
+               nbSuccess++;
+            }
+            if(sr < worstRate) {
+               worstRate = sr;
+               iWorstTestCase = iCase;
+            }
+         }
+         subTask.testCaseResults[iWorstTestCase].iTestCase = iWorstTestCase;
+         if(display) {
+            window.quickAlgoInterface.updateTestScores(subTask.testCaseResults);
+         }
+         if(subTask.testCaseResults[iWorstTestCase].successRate < 1) {
+            if(subTask.nbTestCases == 1) {
+               var msg = subTask.testCaseResults[iWorstTestCase].message;
+            } else if(nbSuccess > 0) {
+               var msg = languageStrings.resultsPartialSuccess.format({
+                  nbSuccess: nbSuccess,
+                  nbTests: subTask.nbTestCases
+               });
+            } else {
+               var msg = languageStrings.resultsNoSuccess;
+            }
+            var results = {
+               message: msg,
+               successRate: subTask.testCaseResults[iWorstTestCase].successRate,
+               iTestCase: iWorstTestCase
+            };
+         } else {
+            var results = subTask.testCaseResults[iWorstTestCase];
+         }
+         /*levelResultsCache[code] = {
+            results: results,
+            fullResults: subTask.testCaseResults
+            };*/
+         subTask.context.changeDelay(oldDelay);
+         subTask.postGrading();
+         callback(results);
+         window.quickAlgoInterface.updateBestAnswerStatus();
+      }
+
+      initBlocklyRunner(subTask.context, function(message, success) {
+         // Record grade from this evaluation into testCaseResults
+         var computeGrade = function(context, message) {
+            var rate = 0;
+            if (context.success) {
+               rate = 1;
+            }
+            return {
+               successRate: rate,
+               message: message
+            };
+         }
+         if (subTask.levelGridInfos.computeGrade != undefined) {
+            computeGrade = subTask.levelGridInfos.computeGrade;
+         }
+         subTask.testCaseResults[subTask.iTestCase] = computeGrade(subTask.context, message)
+         postEval();
+      });
+
+      subTask.iTestCase = typeof mainTestCase != 'undefined' ? mainTestCase : 0;
+      subTask.testCaseResults = [];
+      for(var i=0; i < subTask.iTestCase; i++) {
+         // Fill testCaseResults up to the first iTestCase
+         subTask.testCaseResults.push(null);
+      }
+      subTask.context.linkBack = true;
+      subTask.context.messagePrefixSuccess = window.languageStrings.allTests;
+
+      startEval();
+   };
+
+   subTask.postGrading = function() {
+      window.subTaskValidating = false;
+      if(subTask.resetRunnerAfterGrading && subTask.context.runner) {
+         subTask.context.runner.reset();
+         subTask.resetRunnerAfterGrading = false;
+      }
+      setTimeout(function() {
+         subTask.validating = false;
+         quickAlgoInterface.setValidating(false);
+         }, 1000);
+   };
+
+}
diff --git a/pemFioi/quickAlgo/utils.js b/pemFioi/quickAlgo/utils.js
index 75f98328d..7b2533539 100644
--- a/pemFioi/quickAlgo/utils.js
+++ b/pemFioi/quickAlgo/utils.js
@@ -22,6 +22,47 @@ var arrayContains = function(array, needle) {
       }
    }
    return false;
+};
+
+/**
+ * This method allow us to verify if the current value is primitive. A primitive is a string or a number or boolean
+ * (any value that can be safely compared
+ * @param obj The object to check if it is a primitive or not
+ * @return {boolean} true if object is primitive, false otherwise
+ */
+function isPrimitive(obj)
+{
+    return (obj !== Object(obj));
+}
+
+/**
+ * THis function allow us to compare two objects. Do not call with {@code null} or {@code undefined}
+ * Be careful! Do not use this with circular objects.
+ * @param obj1 The first object to compare
+ * @param obj2 The second object to compare
+ * @return {boolean} true if objects are equals, false otherwise.
+ */
+function deepEqual(obj1, obj2) {
+
+    if (obj1 === obj2) // it's just the same object. No need to compare.
+        return true;
+
+    // if one is primitive and not the other, then we can return false. If both are primitive, then the up
+    // comparison can return true
+    if (isPrimitive(obj1) || isPrimitive(obj2))
+        return false;
+
+    if (Object.keys(obj1).length !== Object.keys(obj2).length)
+        return false;
+
+    // compare objects with same number of keys
+    for (var key in obj1)
+    {
+        if (!(key in obj2)) return false; //other object doesn't have this prop
+        if (!deepEqual(obj1[key], obj2[key])) return false;
+    }
+
+    return true;
 }
 
 var highlightPause = false;
@@ -54,7 +95,7 @@ if (!String.prototype.format) {
 
 
 function showModal(id) {
-   var el = '#' + id
+   var el = '#' + id;
    $(el).show();
 }
 function closeModal(id) {
@@ -206,3 +247,64 @@ function debounce(fn, threshold, wait) {
       timeout = setTimeout(delayed, threshold || 100);
    }
 }
+
+function addInSet(l, val) {
+   // Add val to list l if not already present
+   if(l.indexOf(val) == -1) {
+      l.push(val);
+   }
+}
+
+// From w3schools.com
+function dragElement(elmnt) {
+  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+  if (document.getElementById(elmnt.id + "-header")) {
+    // if present, the header is where you move the DIV from:
+    document.getElementById(elmnt.id + "-header").onmousedown = dragMouseDown;
+  } else {
+    // otherwise, move the DIV from anywhere inside the DIV:
+    elmnt.onmousedown = dragMouseDown;
+  }
+
+  function dragMouseDown(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // get the mouse cursor position at startup:
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    // set the element's new position:
+    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+  }
+
+  function closeDragElement() {
+    // stop moving when mouse button is released:
+    document.onmouseup = null;
+    document.onmousemove = null;
+  }
+}
+
+
+window.iOSDetected = (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) || (navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform));
+
+(function() {
+   var detectTouch = null;
+   detectTouch = function() {
+      window.touchDetected = true;
+      window.removeEventListener('touchstart', detectTouch);
+      }
+   window.addEventListener('touchstart', detectTouch);
+})();
diff --git a/pemFioi/quickpi/blocklyQuickPiDistributed_lib.js b/pemFioi/quickpi/blocklyQuickPiDistributed_lib.js
new file mode 100644
index 000000000..a154c6eee
--- /dev/null
+++ b/pemFioi/quickpi/blocklyQuickPiDistributed_lib.js
@@ -0,0 +1,2460 @@
+var getContext = function (display, infos, curLevel) {
+   // Local language strings for each language
+   var localLanguageStrings = {
+      fr: { // French strings
+         label: {
+            // Labels for the blocks
+            getNodeID: "get Current Node ID",
+            getNeighbors: "Get list of neighbors",
+            getNextMessage: "Get next message",
+            getNextMessageWithTimeout: "Get next message timeout %1 seconds",
+            sendMessage: "Send Message",
+            submitAnswer: "Submit Answer",
+            isMessageWaiting: "Is there a message waiting",
+            broadcastMessage: "Broadcast Message",
+            log: "Log",
+            currentTime: "Time in milliseconds",
+         },
+         code: {
+            // Names of the functions in Python, or Blockly translated in JavaScript
+            getNodeID: "getNodeID",
+            getNeighbors: "getNeighbors",
+            getNextMessage: "getNextMessage",
+            getNextMessageWithTimeout: "getNextMessage",
+            sendMessage: "sendMessage",
+            submitAnswer: "submitAnswer",
+            isMessageWaiting: "isMessageWaiting",
+            broadcastMessage: "broadcastMessage",
+            log: "log",
+            currentTime: "currentTime",
+         },
+         description: {
+            // Descriptions of the functions in Python (optional)
+            getNodeID: "getNodeID() Get current node ID",
+            getNeighbors: "getNeighbors() Get list of Neighbors",
+            getNextMessage: "getNextMessage() Get next message sent to this node",
+            getNextMessageWithTimeout: "getNextMessage(timeout) Get next message sent to this node",
+            sendMessage: "sendMessage(nodeID, message) Send a message to a neighbor",
+            submitAnswer: "submitAnswer(answer) Submit answer",
+            isMessageWaiting: "isMessageWaiting() Returns true if we have a message waiting on the current node queue",
+            broadcastMessage: "broadcastMessage() Broadcast a message to all nodes",
+            log: "log(string) Prints a string for debugging purposes",
+            currentTime: "currentTime(milliseconds) Time in milliseconds",
+         },
+         constant: {
+         },
+         startingBlockName: "Programme", // Name for the starting block
+         messages: {
+         }
+      },
+      none: {
+         comment: {
+            // Comments for each block, used in the auto-generated documentation for task writers
+            getNodeID: "Get current node ID",
+            getNeighbors: "Get list of Neighbors",
+            getNextMessage: "Get next message sent to this node",
+            getNextMessageWithTimeout: "Get next message sent to this node",
+            sendMessage: "Send a message to a neighbor",
+            submitAnswer: "Submit answer",
+            isMessageWaiting: "Is a message waiting in the queue",
+            broadcastMessage: "Broadcast a message to all nodes",
+            log: "Prints a string for debugging purposes"
+         }
+      }
+   }
+
+   var introControls = null;
+   // Create a base context
+   var context = quickAlgoContext(display, infos);
+   // Import our localLanguageStrings into the global scope
+   var strings = context.setLocalLanguageStrings(localLanguageStrings);
+
+   // Some data can be made accessible by the library through the context object
+   context.distributed = {};
+
+   if(window.quickAlgoInterface) {
+      window.quickAlgoInterface.stepDelayMax = 500;
+  }
+
+   function getSessionStorage(name) {
+      // Use a try in case it gets blocked
+      try {
+         return sessionStorage[name];
+      } catch (e) {
+         return null;
+      }
+   }
+
+   function setSessionStorage(name, value) {
+      // Use a try in case it gets blocked
+      try {
+         sessionStorage[name] = value;
+      } catch (e) { }
+   }
+
+   if (window.getQuickPiConnection) {
+      var lockstring = getSessionStorage('lockstring');
+      if (!lockstring) {
+         lockstring = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+         setSessionStorage('lockstring', lockstring);
+      }
+
+      context.quickPiConnection = getQuickPiConnection(lockstring, raspberryPiConnected, raspberryPiDisconnected, raspberryPiChangeBoard);
+      context.quickPiConnection.onDistributedEvent = raspberryPiDistributedEvent;
+   }
+
+
+   function raspberryPiConnected() {
+      console.log("Raspberry pi connected");
+   }
+
+   function raspberryPiDisconnected(wasConnected, wrongversion) {
+      console.log("Raspberry pi disconnected");
+   }
+
+   function raspberryPiChangeBoard(board) {
+      console.log("change board");
+   }
+
+   context.findNodeById = function (nodeId) {
+      for (var i = 0; i < context.nodesAndNeighbors.length; i++) {
+         if (context.nodesAndNeighbors[i].nodeId == nodeId)
+            return context.nodesAndNeighbors[i];
+      }
+
+      return null;
+   }
+
+   context.findNodeByVertice = function (verticeId) {
+      for (var i = 0; i < context.nodesAndNeighbors.length; i++) {
+         if (context.nodesAndNeighbors[i].vertice == verticeId)
+            return context.nodesAndNeighbors[i];
+      }
+
+      return null;
+   }
+
+   context.isNeighbor = function (node, neighborId) {
+
+      for (var i = 0; i < node.neighbors.length; i++) {
+
+         if (node.neighbors[i] == neighborId)
+            return true;
+      }
+
+      return false;
+   }
+
+
+
+
+   function raspberryPiDistributedEvent(event) {
+      //console.log("Distributed event: ");
+      console.log(event);
+
+      if (event.event == "submitAnswer") {
+         window.task.displayedSubTask.context.setNodeAnswer(event.nodeId, event.answer);
+
+      } else if (event.event == "sendMessage") {
+         var context = window.task.displayedSubTask.context;
+         var messageKey = event.fromId + "-" + event.toId;
+
+
+         context.nodeMessages[messageKey].push(event);
+
+         //$("#messageTable").insertRow();
+
+         var table = document.getElementById("messageTable");
+         var row = table.insertRow();
+
+         var no = row.insertCell();
+         var source = row.insertCell();
+         var dest = row.insertCell();
+         var message = row.insertCell();
+         var status = row.insertCell();
+
+         no.appendChild(document.createTextNode("0"));
+         source.appendChild(document.createTextNode(event.fromId));
+         dest.appendChild(document.createTextNode(event.toId));
+         message.appendChild(document.createTextNode(event.message));
+
+
+      } else if (event.event == "nodeStatus") {
+         window.task.displayedSubTask.context.setNodeStatus(event.nodeId, event.status);
+      }
+   };
+
+   context.drawMessageInTimeLine = function(messageInfo) {
+      var messageKey = messageInfo.fromId + "-" + messageInfo.toId;
+      var fromNode = context.findNodeById(messageInfo.fromId);
+      var toNode = context.findNodeById(messageInfo.toId);
+
+      {
+         var timelinex = fromNode.timeLinePos.x + (context.currentTime * 50);
+
+         var messagepath = timelinePaper.path(["M", timelinex, fromNode.timeLinePos.y]);
+         messagepath.attr({ "stroke-width": 3,
+                            "stroke":  "#00A2E8",
+                          });
+
+         var pointingdown = false;
+         if (fromNode.timeLinePos.y < toNode.timeLinePos.y)
+            pointingdown = true;
+
+
+         var circle = timelinePaper.circle(timelinex, fromNode.timeLinePos.y, 5);
+         circle.attr({
+            "fill": "#678AB4",
+            "stroke": "#678AB4"
+         });
+
+
+         var trinaglesize = 8;
+
+         if (pointingdown)
+         {
+            var targetpath = ["M", timelinex, fromNode.timeLinePos.y,
+               "L", timelinex + trinaglesize, fromNode.timeLinePos.y - trinaglesize,
+               "L", timelinex - trinaglesize, fromNode.timeLinePos.y - trinaglesize,
+               "L", timelinex, fromNode.timeLinePos.y];
+
+         }
+         else
+         {
+
+            var targetpath = ["M", timelinex, fromNode.timeLinePos.y,
+               "L", timelinex - trinaglesize, fromNode.timeLinePos.y + trinaglesize,
+               "L", timelinex + trinaglesize, fromNode.timeLinePos.y + trinaglesize,
+               "L", timelinex, fromNode.timeLinePos.y];
+         }
+
+         var triangle = timelinePaper.path(targetpath);
+         triangle.attr({
+               "fill": "#678AB4",
+               "stroke": "#678AB4"
+         });
+
+         var linesize = toNode.timeLinePos.y - fromNode.timeLinePos.y;
+
+         var _transformedPath = Raphael.transformPath(targetpath, 'T0,' + linesize);
+         triangle.animate({path: _transformedPath}, context.infos.actionDelay);
+
+
+         messagepath.animate({ path: ["M", timelinex, fromNode.timeLinePos.y, "L", timelinex, toNode.timeLinePos.y] },
+            context.infos.actionDelay, "linear", function () {
+            }
+         );
+
+         messagepath.hover(
+            // Enter hover
+            function (event) {
+               $('#screentooltip').remove();
+               $("body").append('
');
+
+               var html = "
Message:
From: " + messageInfo.fromId + "
To: " + messageInfo.toId + "
" + JSON.stringify(messageInfo.message) + "
";
+
+               $('#screentooltip').html(html);
+
+
+               $('#screentooltip').css("position", "absolute");
+               $('#screentooltip').css("border", "1px solid gray");
+               $('#screentooltip').css("background-color", "#efefef");
+               $('#screentooltip').css("padding", "30px");
+               $('#screentooltip').css("z-index", "1000");
+               //$('#screentooltip').css("width", "262px");
+               //$('#screentooltip').css("height", "70px");
+
+               $('#screentooltip').css("left", event.clientX + 2).css("top", event.clientY + 2);
+
+            },
+            // Exit
+            function () {
+               $('#screentooltip').remove();
+            }
+         );
+      }
+   };
+
+
+   context.displayMessage = function (messageInfo) {
+         var fromNode = context.findNodeById(messageInfo.fromId);
+         var toNode = context.findNodeById(messageInfo.toId);
+
+         var table = document.getElementById("messageTable");
+         var row = table.insertRow();
+
+         var no = row.insertCell();
+         var source = row.insertCell();
+         var dest = row.insertCell();
+         var messageRow = row.insertCell();
+         var statusRow = row.insertCell();
+
+         
+         no.appendChild(document.createTextNode(context.globalMessageCount.toString()));
+         if (messageInfo.fromId == 0) {
+            source.appendChild(document.createTextNode("0/system"));
+         }
+         else {
+            source.appendChild(document.createTextNode((fromNode.nodeIndex + 1) + "/" + fromNode.nodeId));
+         }
+         dest.appendChild(document.createTextNode((toNode.nodeIndex + 1) + "/" + toNode.nodeId));
+         messageRow.appendChild(document.createTextNode(JSON.stringify(messageInfo.message)));
+         statusRow.appendChild(document.createTextNode("queued"));
+         statusRow.id = "message-" + messageInfo.messageId + "-status";
+
+         context.updateMessageStatus(messageInfo.messageId, messageInfo.status);
+
+         $('#nodeMessages').scrollTop($('#nodeMessages')[0].scrollHeight); 
+   };
+
+   context.sendMessage = function (messageInfo, display) {
+      var messageKey = messageInfo.fromId + "-" + messageInfo.toId;
+      var fromNode = context.findNodeById(messageInfo.fromId);
+      var toNode = context.findNodeById(messageInfo.toId);
+
+      if (toNode) {
+         context.nodeMessages.push(messageInfo);
+         toNode.messages.push(messageInfo);
+
+         //context.nodeMessages[messageKey].push(event);
+
+         // Call ready function for recipient node
+         var omr = context.onMessageReceived[toNode.nodeId];
+         if(omr) {
+            console.log("omr for " + toNode.nodeId);
+            omr();
+            context.onMessageReceived[toNode.nodeId] = null;
+         }
+
+         if (context.display && display) {
+            context.displayMessage(messageInfo);
+         }
+      }
+   };
+
+   context.updateMessageStatus = function (messageId, status) {
+      if (context.display)
+         $("#message-" + messageId + "-status").text(status);
+   };
+
+   context.setNodeStatus = function (nodeId, status) {
+
+      var node = context.findNodeById(nodeId);
+      node.status = status;
+
+      //console.log(nodeId, status);
+
+      if (context.display) {
+         $("#node-" + nodeId + "-status").text(status);
+
+         var vertexObject = context.vGraph.getRaphaelsFromID(node.vertice)[0];
+
+         $("#node-" + nodeId + "-row").css("background-color", "");
+         if (status == "running") {
+            $("#node-" + nodeId + "-row").css("background-color", "lightblue");
+
+            vertexObject.attr({ fill: "lightblue" });
+         }
+         else if (status == "sleeping") {
+            vertexObject.attr({ fill: "lightgray" });
+         }
+         else if (status == "finished") {
+            vertexObject.attr({ fill: "green" });
+         }
+         else if (status == "waitingformessage") {
+            vertexObject.attr({ fill: "blue" });
+         }
+
+      }
+   };
+
+   context.setNodeAnswer = function (nodeId, answer) {
+      //console.log("Answer", nodeId, answer);
+
+      var node = context.findNodeById(nodeId);
+      node.answer = answer;
+
+      if (context.display) {
+         $("#node-" + nodeId + "-answer").text(JSON.stringify(answer));
+
+
+         var answerRectWidth = 100;
+         var pixelsPerTime = 50;
+         var pixelsPerTimeHalf = pixelsPerTime / 2;
+         var timelinex = node.timeLinePos.x + (context.currentTime * pixelsPerTime);
+         var timelinexhalf = node.timeLinePos.x + (context.currentTime * pixelsPerTime) - pixelsPerTime / 2;
+
+          
+         var answerRect = timelinePaper.rect(timelinexhalf, node.timeLinePos.y - pixelsPerTimeHalf, answerRectWidth, pixelsPerTime, 10);
+         answerRect.attr( { 
+            "fill": "#22B14C",
+            "fill-opacity": 1
+         });
+
+         var answerText = JSON.stringify(answer);
+         var text = timelinePaper.text(timelinexhalf + 2, node.timeLinePos.y, answerText);
+
+         text.attr( {
+            "font-size": pixelsPerTime / 3,
+            "text-anchor" : "start"
+         });
+
+         var bbox = text.getBBox();
+
+         while ((bbox.width + 2) > answerRectWidth && answerText.length > 0) {
+            answerText = answerText.substring(0, answerText.length - 1);
+            text.attr( { text: (answerText + "...") } );
+
+            bbox = text.getBBox();
+         }
+
+         text.click(function()
+         {
+            $('#screentooltip').remove();
+            $("body").append('
');
+
+            var html = JSON.stringify(answer);
+
+            $('#screentooltip').html(html);
+
+            $('#screentooltip').css("position", "absolute");
+            $('#screentooltip').css("border", "1px solid gray");
+            $('#screentooltip').css("background-color", "#efefef");
+            $('#screentooltip').css("padding", "0px");
+            $('#screentooltip').css("z-index", "1000");
+            //$('#screentooltip').css("width", "262px");
+            //$('#screentooltip').css("height", "70px");
+
+            $('#screentooltip').css("left", event.clientX + 2).css("top", event.clientY + 2);
+         });
+      }
+   };
+
+
+   infos.checkEndEveryTurn = false;
+   infos.checkEndCondition = function (context, lastTurn) {
+      if (lastTurn) {
+         var node = context.nodesAndNeighbors[context.curNode];
+         var nodeId = context.nodesAndNeighbors[context.curNode].nodeId;
+
+         context.incTime();
+         if (context.display)
+         {
+            var pixelsPerTime = 50;
+            var rombussize = 35;
+            var pixelsPerTimeHalf = rombussize / 2;
+            var timelinex = node.timeLinePos.x + (context.currentTime * pixelsPerTime);
+            var timelinexhalf = node.timeLinePos.x + (context.currentTime * pixelsPerTime) - rombussize / 2;
+   
+             
+            var answerRect = timelinePaper.rect(timelinexhalf, node.timeLinePos.y - pixelsPerTimeHalf, rombussize, rombussize);
+            answerRect.attr( { 
+               fill: "#F36D74"
+            });
+
+            answerRect.rotate(45);
+
+            var text = timelinePaper.text(timelinex, node.timeLinePos.y, "End");
+            text.attr( {
+               "font-size": rombussize / 2
+            });
+         }
+
+         //console.log (nodeId, "is done ");
+
+         context.setNodeStatus(nodeId, "finished");
+         context.maybeWakeUpNodeInGrading(nodeId);
+         var allFinished = true;
+
+         for (var i = 0; i < context.nodesAndNeighbors.length; i++) {
+
+            if (context.nodesAndNeighbors[i].status != "finished") {
+               allFinished = false;
+               break;
+            }
+         }
+
+         if (allFinished) {
+            console.log("All nodes are done!");
+
+            if (context.validateAnswer) {
+               var status = context.validateAnswer(context.nodesAndNeighbors);
+               context.success = status.status;
+               if (!status.error) {
+                  if (context.success)
+                     status.error = "All answers are correct";
+                  else
+                     status.error = "Some node answers are wrong";
+               }
+               throw (status.error);
+            }
+            else {
+               context.success = false;
+               //throw "All nodes are done (no validation for this task)";
+            }
+
+         }
+      }
+   };
+
+
+   // A context must have a reset function to get back to the initial state
+   context.reset = function (taskInfos) {
+      // Do something here
+
+      
+      context.currentWallTime = new Date().getTime();
+      context.failures = null;
+      if (taskInfos != undefined) {
+
+         // Copy graph to avoid modifying the taskInfos orignal
+         context.graphDefinition = JSON.parse(JSON.stringify(taskInfos.graphDefinition));
+         context.Graph = Graph.fromJSON(JSON.stringify(context.graphDefinition.minGraph));
+
+         context.validateAnswer = taskInfos.validateAnswer;
+         context.systemMessages = taskInfos.systemMessages;
+
+         context.failures = taskInfos.failures;
+      }
+
+
+      var vertices = context.Graph.getAllVertices();
+      context.nodesAndNeighbors = [];
+      context.nodeMessages = [];
+      context.onMessageReceived = {};
+      context.currentTime = 0;
+
+      for (var iVertices = 0; iVertices < vertices.length; iVertices++) {
+         var neighbors = context.Graph.getNeighbors(vertices[iVertices]);
+         var nodeId;
+
+         // Generate a non repeated random Id
+         do {
+            nodeId = Math.floor(Math.random() * 900) + 100;
+         } while (context.findNodeById(nodeId) != null);
+
+         context.nodesAndNeighbors.push(
+            {
+               vertice: vertices[iVertices],
+               nodeIndex: iVertices,
+               nodeId: nodeId,
+               status: "stopped",
+               answer: null,
+               messages: [],
+               log: [],
+            }
+         );
+      }
+
+      for (var iVertices = 0; iVertices < vertices.length; iVertices++) {
+         var neighbors = context.Graph.getNeighbors(vertices[iVertices]);
+
+         for (var i = 0; i < neighbors.length; i++) {
+            neighbors[i] = context.findNodeByVertice(neighbors[i]).nodeId;
+         }
+
+         context.nodesAndNeighbors[iVertices].neighbors = neighbors;
+      }
+
+      if (context.systemMessages) {
+         for (var i = 0; i < context.systemMessages.length; i++) {
+            var message = context.systemMessages[i];
+            var node = context.nodesAndNeighbors[message.nodeIndex - 1];
+            var messageId = context.globalMessageCount++;
+
+            var messageInfo = {
+               fromId: 0,
+               toId: node.nodeId,
+               message: message.message,
+               status: "queued",
+               messageId: messageId,
+               circle: null
+            };
+
+            context.sendMessage(messageInfo, false);
+         }
+      }
+
+      context.nbNodes = vertices.length;
+
+      context.globalMessageCount = 0;
+
+      if (context.display) {
+         context.resetDisplay();
+      }
+   };
+
+   context.resetTimeLineDisplay = function () {
+
+      context.timeLineGraphW = 800;
+      context.timeLineGraphH = 800;
+
+      timelinePaper = this.raphaelFactory.create(
+         "paperTimeline",
+         "timeLineGraph",
+         context.timeLineGraphW,
+         context.timeLineGraphH
+      );
+
+      context.timeLineVerticeRadius = context.verticeRadius / 1.5;
+
+
+      var vertexAttr = {
+         r: context.timeLineVerticeRadius,
+         stroke: "none",
+         fill: "lightgray"
+      };
+      var edgeAttr = {
+         stroke: '#a05000',
+         "stroke-width": 5
+      };
+
+      var straighEdges = [];
+      var vertices = context.Graph.getAllVertices();
+      var lastId = null;
+      $.each(vertices, function (index) {
+         var id = vertices[index];
+         if (lastId) {
+            var edges = context.Graph.getEdgesBetween(id, lastId);
+            if (edges.length > 0)
+               straighEdges.push(edges[0]);
+         }
+
+         lastId = id;
+      });
+
+      var timeLineedgeVisualInfo = {};
+      var edges = context.Graph.getAllEdges();
+      var sweep = 0;
+      $.each(edges, function (index) {
+         var id = edges[index];
+
+         timeLineedgeVisualInfo[id] = {};
+
+         if ($.inArray(id, straighEdges) == -1) {
+            timeLineedgeVisualInfo[id] = {
+               "sweep": sweep,
+               "large-arc": 0,
+               "radius-ratio": 1
+            };
+
+            if (sweep == 1)
+               sweep = 0;
+            else
+               sweep = 1;
+         }
+      });
+
+
+      var graphDrawer = new SimpleGraphDrawer(vertexAttr, edgeAttr);
+
+      var vertexVisualInfoTimeline = JSON.parse(JSON.stringify(context.graphDefinition.vertexVisualInfo));
+      context.vGraphTimeline = new VisualGraph("vGraphTimeline", timelinePaper, context.Graph, graphDrawer, true, vertexVisualInfoTimeline, timeLineedgeVisualInfo);
+
+      this.graphMouseTimeline = new GraphMouse("GraphMouseTimeline", context.Graph, context.vGraph);
+
+
+      var pixelsPerVertice = context.timeLineGraphH / context.nodesAndNeighbors.length;
+
+
+      $.each(vertices, function (index) {
+         var id = vertices[index];
+         var node = context.findNodeByVertice(id);
+         node.timeLinePos = {
+            x: context.verticeRadius * 4,
+            y: context.verticeRadius + (pixelsPerVertice * index),
+         };
+
+         context.vGraphTimeline.graphDrawer.moveVertex(id, node.timeLinePos.x, node.timeLinePos.y);
+      });
+
+      context.vGraphTimeline.redraw();
+      //timelinePaper.setSize($('#timeLineGraph').width() - 10, $('#timeLineGraph').height() - 10);
+      //timelinePaper.setViewBox(0, 0, context.timeLineGraphW, context.timeLineGraphH);
+      context.updateTimeLineScale();
+
+      $('#timeLineGraph').scroll(function (event) {
+
+         $('#screentooltip').remove();
+         var scrolloffset = $('#timeLineGraph').scrollLeft();
+
+         console.log("scrolloffset ", scrolloffset);
+
+
+         $.each(vertices, function (index) {
+            var id = vertices[index];
+            var pos = context.vGraphTimeline.graphDrawer.getVertexPosition(id);
+            var vertexObject = context.vGraphTimeline.getRaphaelsFromID(id)[0];
+
+            context.vGraphTimeline.graphDrawer.moveVertex(id, scrolloffset + (context.verticeRadius * 4), pos.y);
+
+            if (scrolloffset == 0)
+               vertexObject.attr({ opacity: 1 });
+            else
+               vertexObject.attr({ opacity: 0.3 });
+         });
+
+         context.vGraphTimeline.redraw();
+
+         $.each(vertices, function (index) {
+            var id = vertices[index];
+            var pos = context.vGraphTimeline.graphDrawer.getVertexPosition(id);
+            var vertexObject = context.vGraphTimeline.getRaphaelsFromID(id)[0];
+
+            if (scrolloffset == 0)
+               vertexObject.attr({ opacity: 1 });
+            else
+               vertexObject.attr({ opacity: 0.3 });
+         });
+
+         var edges = context.Graph.getAllEdges();
+         $.each(edges, function (index) {
+            var id = edges[index];
+            var edgeObject = context.vGraphTimeline.getRaphaelsFromID(id)[0];
+            if (scrolloffset == 0)
+               edgeObject.attr({ opacity: 1 });
+            else
+               edgeObject.attr({ opacity: 0.3 });
+
+         });
+   
+   
+      });
+
+      `
+      var draggingTimeline = false;
+      var draggingStartX = 0;
+      var draggingStartY = 0;
+      var viewBoxX = 0;
+      var viewBoxY = 0;
+      var dX = 0;
+
+      $('#timeLineGraph').mousedown(function(e){
+         if (timelinePaper.getElementByPoint( e.pageX, e.pageY ) != null) {
+            return;
+         }
+
+         draggingTimeline = true;
+         draggingStartX = e.pageX; 
+         draggingStartY = e.pageY;  
+     });
+
+      
+      $('#timeLineGraph').mousemove(function(e){
+         if (draggingTimeline == false)
+            return;
+
+         dX = draggingStartX - e.pageX;
+         var x = context.timeLineGraphW / timelinePaper.width; 
+
+         dX *= x; 
+         
+         if (viewBoxX + dX >= 0) {
+            timelinePaper.setViewBox(viewBoxX + dX, 0, context.timeLineGraphW, context.timeLineGraphH);
+
+            $.each(vertices, function (index) {
+               var id = vertices[index];
+               var pos = context.vGraphTimeline.graphDrawer.getVertexPosition(id);
+               var vertexObject = context.vGraph.getRaphaelsFromID(id)[0];
+
+               if (viewBoxX + dX == 0)
+                  vertexObject.attr({ opacity: 1 });
+               else
+                  vertexObject.attr({ opacity: 0.3 });
+                  
+               context.vGraphTimeline.graphDrawer.moveVertex(id, viewBoxX + dX + (context.verticeRadius * 4), pos.y);
+            });
+
+            context.vGraphTimeline.redraw();
+         }   
+       });
+            
+        $('#timeLineGraph').mouseup(function(e){
+            if (draggingTimeline == false)
+               return; 
+
+            viewBoxX += dX; 
+
+            draggingTimeline = false; 
+        });
+      `
+   };
+
+   // Reset the context's display
+   context.resetDisplay = function () {
+      if (!context.display || !this.raphaelFactory)
+         return;
+
+      $('#screentooltip').remove();
+
+      // Do something here
+      var hasIntroControls = $('#taskIntro').find('#introControls').length;
+      if (!hasIntroControls) {
+         $('#taskIntro').append(`
`);
+      }
+      
+      if (introControls === null) {
+         introControls = true;
+
+    
+         $('#introControls').html(`
+         
+         

+         
+         
+         

+         `);
+
+         $('#piconnect').click(function () {
+            context.quickPiConnection.connect("ws://192.168.0.5/api/v1/commands");
+         });
+
+         $('#showGraphView').click(function () {
+            $('#screentooltip').remove();
+            if ($('#timelineView').css("display") != "none")
+            {
+               $('#timelineView').css("display", "none");
+               $('#graphView').css("display", "");
+
+               context.updateScale();
+               
+               context.vGraph.redraw();
+            }
+         });
+
+         $('#showTimelineView').click(function () {
+            $('#screentooltip').remove();
+            if ($('#graphView').css("display") != "none")
+            {
+               $('#timelineView').css("display", "");
+               $('#graphView').css("display", "none");
+
+               context.updateScale();
+               context.updateTimeLineScale();
+               context.vGraphTimeline.redraw();
+            }
+         });      
+
+         $('#grid').html(`
+         
+            
+      
+            

+            
+            
+            
+            
+            
+            
+            
+
+            
+            

+               

+            		   
+               
Hello 2

+            

+               
Hello 3

+            

+            

+         `);
+      }
+
+
+
+      context.verticeRadius = 35;
+
+      var tableStatus = "
#IDStatusAnswer
";
+      $('#nodeStatus').html(tableStatus);
+      var table = document.getElementById("node-status-table");
+
+      $.each(context.nodesAndNeighbors, function (index) {
+         //console.log(context.nodesAndNeighbors[index]);
+         var node = context.nodesAndNeighbors[index];
+         var row = table.insertRow();
+         row.id = "node-" + node.nodeId + "-row";
+
+         var indexCell = row.insertCell();
+         var nodeIdCell = row.insertCell();
+         var statusCell = row.insertCell();
+         var answerCell = row.insertCell();
+
+         indexCell.appendChild(document.createTextNode((node.nodeIndex + 1)));
+         $(indexCell).css("padding", "7px");
+
+         nodeIdCell.appendChild(document.createTextNode(node.nodeId));
+         $(nodeIdCell).css("padding", "7px");
+
+         statusCell.appendChild(document.createTextNode(node.status));
+         $(statusCell).css("padding", "7px");
+         statusCell.id = "node-" + node.nodeId + "-status";
+
+         answerCell.appendChild(document.createTextNode(""));
+         $(answerCell).css("padding", "7px");
+         answerCell.id = "node-" + node.nodeId + "-answer";
+      });
+
+
+      var tableMessages = "
NoSourceDestinationMessageStatus
";
+      $('#nodeMessages').html(tableMessages);
+
+      $.each(context.nodeMessages, function (index) {
+         var messageInfo = context.nodeMessages[index];
+
+         context.displayMessage(messageInfo);
+      });
+
+      $('#piinstall').click(function () {
+         context.blocklyHelper.reportValues = false;
+
+
+         python_code = window.task.displayedSubTask.blocklyHelper.getCode('python');
+
+         python_code = python_code.replace("from quickpi import *", "");
+         python_code = python_code.replace("from distributed import *", "");
+
+         if (context.runner)
+            context.runner.stop();
+
+         context.quickPiConnection.runDistributed(python_code, context.nodesAndNeighbors, function () {
+            context.justinstalled = true;
+         });
+      });
+
+      var graphW = $('#nodeGraph').width();
+      var graphH = $('#nodeGraph').height();
+
+      this.raphaelFactory.destroyAll();
+      paper = this.raphaelFactory.create(
+         "paperMain",
+         "nodeGraph",
+         graphW,
+         graphH
+      );
+
+      var vertexAttr = {
+         r: context.verticeRadius,
+         stroke: "none",
+         fill: "lightgray"
+      };
+      var edgeAttr = {
+         stroke: 'yellowgreen',
+         "stroke-width": 5
+      };
+
+
+      var graphDrawer = new SimpleGraphDrawer(vertexAttr, edgeAttr);
+      context.vGraph = new VisualGraph("vGraph", paper, context.Graph, graphDrawer, true, context.graphDefinition.vertexVisualInfo, context.graphDefinition.edgeVisualInfo);
+
+      this.graphMouse = new GraphMouse("GraphMouse", context.Graph, context.vGraph);
+
+      var vertices = context.Graph.getAllVertices();
+
+
+      context.graphOriginalW = 0;
+      context.graphOriginalH = 0;
+
+
+      $.each(vertices, function (index) {
+         var id = vertices[index];
+
+         //var pos = vGraph.graphDrawer.getVertexPosition(id);
+
+         var vertexObject = context.vGraph.getRaphaelsFromID(id)[0];
+         var r = vertexObject.attrs['r'];
+         var x = vertexObject.attrs['cx'] + r;
+         var y = vertexObject.attrs['cy'] + r;
+
+         if (x > context.graphOriginalW)
+            context.graphOriginalW = x;
+
+         if (y > context.graphOriginalH)
+            context.graphOriginalH = y;
+      });
+
+      var scaleFactorW = graphW / context.graphOriginalW;
+      var scaleFactorH = graphH / context.graphOriginalH;
+
+      $.each(vertices, function (index) {
+         var id = vertices[index];
+         var node = context.findNodeByVertice(id);
+
+         //var pos = context.vGraph.graphDrawer.getVertexPosition(id);
+
+         //context.vGraph.graphDrawer.moveVertex(id, pos.x * scaleFactorW, pos.y * scaleFactorH);
+
+
+         var vertexInfo = context.Graph.getVertexInfo(id);
+         vertexInfo.label = (node.nodeIndex + 1).toString(10) + "\n" + node.nodeId.toString(10);
+      });
+
+      //console.log("resetDisplay", graphW, scaleFactorW, graphW  / scaleFactorW, graphH, scaleFactorH, graphH / scaleFactorH);
+
+      paper.setViewBox(0, 0, graphW / scaleFactorW, graphH / scaleFactorH);
+
+
+      context.vGraph.redraw();
+
+      var a = new PaperMouseEvent("paperMain", paper, "mousemove", function () {
+         console.log("Hello");
+      }, true);
+
+
+      //this.graphMouse.addEvent("whatever", "click", "vertex", null, [function() { console.log("test") }]);
+
+      this.graphMouse.addEvent("whatever2", "click", "edge", null, [function (id) {
+         var id = (Beav.Navigator.isIE8()) ? elementID : this.data("id");
+         var vertexObject = context.vGraph.getRaphaelsFromID(id)[0];
+
+         var a = vertexObject.node.getBoundingClientRect();
+
+      }]);
+
+      //VertexToggler("whatever", context.Graph, context.vGraph, this.graphMouse, function(id, selected) {
+      this.graphMouse.addEvent("whatever", "hover", "vertex", null, [function (id) {
+         var id = (Beav.Navigator.isIE8()) ? elementID : this.data("id");
+         var vertexObject = context.vGraph.getRaphaelsFromID(id)[0];
+
+         var a = vertexObject.node.getBoundingClientRect();
+         var x = a.x + 50;
+         var y = a.y;
+
+
+         $('#screentooltip').remove();
+         $("body").append('
');
+
+
+         var node = context.findNodeByVertice(id);
+         var html = "
Node Id: " + node.nodeId + "
Log:
";
+         for (var i = 0; i < node.log.length; i++) {
+            html += "" + JSON.stringify(node.log[i]) + "
";
+
+            console.log(JSON.stringify(node.log[i]));
+         }
+
+         $('#screentooltip').html(html);
+
+
+         $('#screentooltip').css("position", "absolute");
+         $('#screentooltip').css("border", "1px solid gray");
+         $('#screentooltip').css("background-color", "#efefef");
+         $('#screentooltip').css("padding", "30px");
+         $('#screentooltip').css("z-index", "1000");
+         //$('#screentooltip').css("width", "262px");
+         //$('#screentooltip').css("height", "70px");
+
+         $('#screentooltip').css("left", x).css("top", y);
+      },
+      function (a) {
+         $('#screentooltip').remove();
+      }
+      ]);
+
+
+      context.resetTimeLineDisplay();
+
+
+      // Ask the parent to update sizes
+      context.blocklyHelper.updateSize();
+      context.updateScale();
+   };
+
+   // Update the context's display to the new scale (after a window resize for instance)
+   context.updateScale = function () {
+      if (!context.display) {
+         return;
+      }
+
+      var width = $('#nodeGraph').width();
+      var height = $('#nodeGraph').height();
+
+      if (!context.oldwidth ||
+         !context.oldheight ||
+         context.oldwidth != width ||
+         context.oldheight != height) {
+
+         context.oldwidth = width;
+         context.oldheight = height;
+
+
+
+         var scaleFactorW = width / context.graphOriginalW;
+         var scaleFactorH = height / context.graphOriginalH;
+
+         paper.setViewBox(0, 0, width / scaleFactorW, height / scaleFactorH);
+         paper.setSize(width, height);
+
+
+         context.updateTimeLineScale();
+         //timelinePaper.setViewBox(0, 0, context.timeLineGraphW, context.timeLineGraphH);
+         //timelinePaper.setSize($('#timeLineGraph').width() - 10, $('#timeLineGraph').height() - 10);
+         
+
+         //console.log("timeline paper", $('#timeLineGraph').width() - 10, $('#timeLineGraph').height() - 10);
+
+         context.vGraphTimeline.redraw();
+
+         //context.resetDisplay();
+      }
+   };
+
+   context.updateTimeLineScale = function() {
+      timelinePaper.setSize(timelinePaper.width - 15, $('#timeLineGraph').height() - 10);
+      timelinePaper.setViewBox(0, 0, timelinePaper.width /*context.timeLineGraphW*/, context.timeLineGraphH, false);
+      
+      timelinePaper.canvas.setAttribute('preserveAspectRatio', 'none'); 
+      
+   }
+
+   // When the context is unloaded, this function is called to clean up
+   // anything the context may have created
+   context.unload = function () {
+      // Do something here
+      if (context.display) {
+         // Do something here
+      }
+   };
+
+
+
+   context.setCurNode = function (curNode) {
+      //console.log("context.setCurNode", curNode);
+      context.curNode = curNode;
+      var node = context.nodesAndNeighbors[context.curNode];
+
+      //console.log("Running ", node.nodeId, "current status", node.status);
+
+      if (node.status != "finished") {
+         for (var i = 0; i < context.nodesAndNeighbors.length; i++) {
+            if (context.nodesAndNeighbors[i].status == "running") {
+
+               //console.log("Change node ", context.nodesAndNeighbors[i].nodeId, "to sleeping")
+               context.setNodeStatus(context.nodesAndNeighbors[i].nodeId, "sleeping");
+               break;
+            }
+         }
+
+         //console.log("Change node ", node.nodeId, "to running")
+         context.setNodeStatus(node.nodeId, "running");
+      }
+   }
+
+   context.findEdgeObject = function(node1, node2)
+   {
+      var edges = context.Graph.getEdgesBetween(node1.vertice, node2.vertice);
+
+      if (edges.length > 0) {
+         var edgePath = context.vGraph.getRaphaelsFromID(edges[0])[0];
+
+         return edgePath;
+      }
+
+      return null;
+   }
+
+   context.findVerticeObject = function(node)
+   {
+      var vertexObject = context.vGraph.getRaphaelsFromID(node.vertice)[0];
+
+      return vertexObject;
+   }
+
+
+   context.incTime = function () {
+      context.currentTime++;
+
+      //console.log("current time", context.currentTime);
+      if (context.failures) {
+         for (var i = 0; i < context.failures.length; i++) {
+            var currentFailure = context.failures[i];
+
+            if (context.currentTime >= currentFailure.startTime &&
+               context.currentTime <= currentFailure.endTime) {
+
+               if (!currentFailure.active)
+               {
+                  currentFailure.active = true;
+                  console.log("Matched failiure ", i);
+
+                  if (currentFailure.type == "nodeboth") {
+                     var node = context.nodesAndNeighbors[currentFailure.node];
+
+                     var vertexObject = context.findVerticeObject(node);
+
+                     vertexObject.attr({
+                        "opacity": 0.3,
+                     });
+
+                     function animateVertex()
+                     {
+                        var targetOpacity = 0.1;
+                     
+                        if (vertexObject.attr('opacity') >= 0.1)
+                        {
+                           targetOpacity = 0.01;
+                        }
+
+                        vertexObject.animate({ "opacity": targetOpacity }, 1000, "linear", function() {
+                           animateVertex();
+                        });
+                     }
+
+                     animateVertex();
+                  }
+                  else if (currentFailure.type == "connection") {
+                     var node1 = context.nodesAndNeighbors[currentFailure.nodes[0]];
+                     var node2 = context.nodesAndNeighbors[currentFailure.nodes[1]];
+
+                     var edgePath = context.findEdgeObject(node1, node2);
+
+                     edgePath.attr({
+                           "stroke": "red",
+                           "opacity": 0.1
+                     });
+
+                     function animateEdge()
+                     {
+                        var targetOpacity = 0.1;
+                     
+                        if (edgePath.attr('opacity') >= 0.1)
+                        {
+                           targetOpacity = 0.01;
+                        }
+
+                        edgePath.animate({ "opacity": targetOpacity }, 1000, "linear", function() {
+                  
+                           animateEdge();
+                        });
+                     }
+
+                     animateEdge();
+                  }
+               }
+            }
+            else if (currentFailure.active) {
+               currentFailure.active = false;
+
+               if (currentFailure.type == "connection")
+               {
+                  var node1 = context.nodesAndNeighbors[currentFailure.nodes[0]];
+                  var node2 = context.nodesAndNeighbors[currentFailure.nodes[1]];
+
+                  var edgePath = context.findEdgeObject(node1, node2);
+
+                  edgePath.stop();
+                  edgePath.attr({
+                        "stroke": "yellowgreen",
+                        "opacity": 1
+                  });
+               }
+            }
+         }
+      }
+
+
+      if (context.display) {
+
+         var node = context.nodesAndNeighbors[0];
+
+         var timelinewidth = Math.max(node.timeLinePos.x + (context.currentTime * 50) + 30, $('#timeLineGraph').width() - 10);
+
+         timelinePaper.setSize(timelinewidth, $('#timeLineGraph').height() - 10);
+
+         context.updateTimeLineScale();
+
+         $('#timeLineGraph').scrollLeft(timelinewidth);
+
+
+         $.each(context.nodesAndNeighbors, function (index) {
+            var node = context.nodesAndNeighbors[index];
+
+            if (node.status == "finished")
+               return;
+
+            if (!node.messagepath)
+               node.messagepath = timelinePaper.path(["M", node.timeLinePos.x + context.timeLineVerticeRadius, node.timeLinePos.y]);
+               
+            node.messagepath.animate({
+               path: ["M", node.timeLinePos.x + context.timeLineVerticeRadius, node.timeLinePos.y,
+                  "L", node.timeLinePos.x + (context.currentTime * 50), node.timeLinePos.y]
+            }, 100);
+         });
+      }
+   };
+
+
+   context.maybeWakeUpNodeInGrading = function (nodeIdToSkip) {
+      if (context.display)
+         return;
+
+      var allsleepingordone = true;
+      var nodeToWakeup = null;
+      for(var i = 0; i < context.nodesAndNeighbors.length; i++) {
+         var node = context.nodesAndNeighbors[i];
+
+         if (node.nodeId != nodeIdToSkip && context.onMessageReceived[node.nodeId])
+            nodeToWakeup = node;
+
+         if (!context.onMessageReceived[node.nodeId] && node.status != "finished") {
+            allsleepingordone = false;
+            break;
+         }
+      }
+
+      console.log("All nodes are sleep ?!",allsleepingordone );
+      if (allsleepingordone && nodeToWakeup) {
+         var omr = context.onMessageReceived[nodeToWakeup.nodeId];
+         context.onMessageReceived[nodeToWakeup.nodeId] = null;
+
+         setTimeout(omr, 0);
+      }
+   };
+
+   /***** Functions *****/
+   /* Here we define each function of the library.
+      Blocks will generally use context.group.blockName as their handler
+      function, hence we generally use this name for the functions. */
+
+
+   context.distributed.getNodeID = function (callback) {
+      var nodeId = context.nodesAndNeighbors[context.curNode].nodeId;
+
+      context.runner.waitDelay(callback, nodeId);
+   };
+   context.distributed.getNeighbors = function (callback) {
+      var node = context.nodesAndNeighbors[context.curNode];
+
+      context.runner.waitDelay(callback, node.neighbors);
+   };
+
+   context.distributed.getNextMessage = function() {
+      if(typeof arguments[0] == 'function') {
+         var timeout = -1;
+         var callback = arguments[0];
+      } else {
+         var timeout = arguments[0];
+         var callback = arguments[1];
+      }
+      var node = context.nodesAndNeighbors[context.curNode];
+      //console.log("getNextMessage");
+
+      var ready = context.runner.allowSwitch(callback);
+
+      function processMessage(cb) {
+         if(node.messages.length > 0) {
+            var message = node.messages.shift();
+            message.status = "read";
+
+
+            context.updateMessageStatus(message.messageId, message.status);
+
+            if (context.display) {
+               var toPos = context.vGraph.graphDrawer.getVertexPosition(node.vertice);
+
+               if (message.circle) {
+                  message.circle.animate({ cx: toPos.x, cy: toPos.y }, context.infos.actionDelay, "linear", function () {
+                     message.circle.remove();
+                  });
+
+                  message.messageCountText.remove();
+                  message.messageCountText = null;
+
+                  var messageCount = node.messages.reduce(function (acum, value) {
+                     if (value.fromId == message.fromId)
+                        return acum + 1;
+
+                     return acum;
+                  }, 0);
+
+                  node.messages.forEach(function (element) {
+                     if (element.fromId == message.fromId && element.messageCountText) {
+                        element.messageCountText.attr({ "text": messageCount.toString() });
+                     }
+                  });
+               }
+
+               context.runner.waitDelay(cb, { "from": message.fromId, "payload": message.message, "status": true }, context.infos.actionDelay);
+            }
+            else {
+               context.runner.noDelay(cb, { "from": message.fromId, "payload": message.message, "status": true });
+            }
+         }
+         else
+         {
+            //console.log("return status = false");
+            context.runner.waitDelay(cb, { "status": false }, context.infos.actionDelay);
+            //context.runner.noDelay(cb, { "status": false });
+         }
+      }
+
+      if(node.messages.length > 0 || timeout == 0) {
+         ready(processMessage);
+      } else {
+         var timeoutID = 0;
+
+         if (timeout > 0)
+            timeoutID = setTimeout(function() {
+               console.log("timeout!");
+               context.onMessageReceived[node.nodeId] = null;
+               ready(processMessage);
+            }, timeout * 1000);
+
+         context.onMessageReceived[node.nodeId] = function () { 
+            if (timeoutID != 0)
+               clearTimeout(timeoutID);
+            ready(processMessage); 
+         };
+         context.maybeWakeUpNodeInGrading(node.nodeId);
+      }
+   };
+
+   context.distributed.getNextMessageWithTimeout = context.distributed.getNextMessage;
+
+
+   context.canNodeSendMessages = function(fromNode, toNode) {
+      if (!context.failures)
+         return true;
+         
+      for (var i = 0; i < context.failures.length; i++) {
+         var currentFailure = context.failures[i];
+
+         if (currentFailure.active)
+         {
+            if (currentFailure.type == "connection") { 
+
+               if ((currentFailure.nodes[0] == fromNode.nodeIndex && currentFailure.nodes[1] == toNode.nodeIndex) ||
+                   (currentFailure.nodes[1] == fromNode.nodeIndex && currentFailure.nodes[0] == toNode.nodeIndex)) {
+                  
+                  return false;
+               }
+            }
+         }
+      }
+
+      return true;
+   };
+
+   context.distributed.sendMessage = function (recipientId, message, callback) {
+      var fromNode = context.nodesAndNeighbors[context.curNode];
+      var toNode = context.findNodeById(recipientId);
+      var messageId = context.globalMessageCount++;
+      var messageDelay = context.infos.actionDelay;
+
+      //console.log("sendMessage");
+
+
+      if (!context.isNeighbor(fromNode, toNode.nodeId)) {
+         context.success = false;
+         throw ("Tried to send a message to node " + toNode.nodeId + " which is not a neighbor");
+      }
+
+      context.incTime();
+
+      var messageInfo = {
+         fromId: fromNode.nodeId,
+         toId: toNode.nodeId,
+         message: message,
+         status: "queued",
+         messageId: messageId,
+         circle: null
+      };
+
+      var canSendMessage = context.canNodeSendMessages(fromNode, toNode);
+
+      if (context.display) {
+         var fromVertice = fromNode.vertice;
+         var toVertice = toNode.vertice;
+         var fromPos = context.vGraph.graphDrawer.getVertexPosition(fromVertice);
+
+         var edges = context.Graph.getEdgesBetween(fromVertice, toVertice);
+
+
+         if (edges.length > 0) {
+            context.drawMessageInTimeLine(messageInfo);
+
+            var verticesOrder = context.Graph.getEdgeVertices(edges[0]);
+            var edgePath = context.vGraph.getRaphaelsFromID(edges[0])[0];
+
+            messageInfo.circle = paper.circle(fromPos.x, fromPos.y, 10);
+            messageInfo.circle.attr("fill", "lightblue");
+
+            var path = edgePath.attrs["path"];
+            var s = path.toString();
+
+            var pathLen = edgePath.getTotalLength();
+            var startAt = 1 - ((pathLen - context.verticeRadius) / (pathLen));
+
+
+            var fromPercentage = 1;
+            var toPercentage = startAt;
+            if (verticesOrder[0] == fromVertice) {
+               fromPercentage = startAt;
+               toPercentage = 1;
+            }
+
+            if (canSendMessage) {
+               messageInfo.circle.animateAlong({
+                  path: s,
+                  rotate: false,
+                  duration: messageDelay,
+                  easing: 'linear',
+                  debug: false,
+                  fromPercentage: fromPercentage,
+                  toPercentage: toPercentage,
+               },
+                  {
+                  },
+                  function () {
+                     var messageCount = toNode.messages.reduce(function (acum, value) {
+                        if (value.fromId == fromNode.nodeId)
+                           return acum + 1;
+
+                        return acum;
+                     }, 0);
+
+                     messageInfo.messageCountText = paper.text(messageInfo.circle.attr("cx"),
+                        messageInfo.circle.attr("cy"),
+                        (messageCount + 1).toString());
+
+                     context.sendMessage(messageInfo, true);
+                  });
+            } else  {
+               console.log("Failing message!");
+
+               if (fromPercentage == 1)
+               {
+                  toPercentage = 0.7;
+               }
+               else if (toPercentage == 1)
+               {
+                  toPercentage = 0.3;
+               }
+
+               messageInfo.circle.animateAlong({
+                  path: s,
+                  rotate: false,
+                  duration: messageDelay,
+                  easing: 'linear',
+                  debug: false,
+                  fromPercentage: fromPercentage,
+                  toPercentage: toPercentage,
+               },
+                  {
+                  },
+                  function () {
+                     var messageCount = toNode.messages.reduce(function (acum, value) {
+                        if (value.fromId == fromNode.nodeId)
+                           return acum + 1;
+
+                        return acum;
+                     }, 0);
+
+                     messageInfo.circle.attr("fill", "red");
+                     messageInfo.circle.animate({ "opacity": 0 }, messageDelay, "linear", function() {                  
+                        messageInfo.circle.remove();
+                     });
+
+                     messageInfo.status = "failed";
+                     context.displayMessage(messageInfo);
+
+                     //context.sendMessage(messageInfo, true);
+                  });
+            }
+         }
+
+         context.runner.waitDelay(callback, null, messageDelay);
+      }
+      else {
+         if (canSendMessage)
+            context.sendMessage(messageInfo, true);
+
+         context.runner.noDelay(callback);
+      }
+   };
+
+   context.distributed.submitAnswer = function (answer, callback) {
+      var node = context.nodesAndNeighbors[context.curNode];
+
+      console.log("submitAnswer ", context.curNode, answer);
+
+      if (node.answer != null) {
+         context.success = false;
+         throw ("Node " + node.nodeId + " already submitted an answer");
+      }
+
+      context.incTime();
+
+      context.setNodeAnswer(node.nodeId, answer);
+
+      context.incTime();
+
+      context.runner.waitDelay(callback);
+   };
+
+   context.distributed.isMessageWaiting = function (callback) {
+      var node = context.nodesAndNeighbors[context.curNode];
+      var message = null;
+      var retVal = false;
+
+      if (node.messages.length > 0)
+         retVal = true;
+
+      context.runner.waitDelay(callback, retVal);
+   };
+
+   context.distributed.broadcastMessage = function (message, callback) {
+      var fromNode = context.nodesAndNeighbors[context.curNode];
+      var messageId = context.globalMessageCount++;
+      var messageDelay = 1000;
+
+      /*
+            if (!context.isNeighbor(fromNode, toNode.nodeId)) {
+               context.success = false;
+               throw ("Tried to send a message to node " + toNode.nodeId + " which is not a neighbor");
+            }
+            */
+
+      context.incTime();
+
+      if (context.display) {
+
+         var fromPos = context.vGraph.graphDrawer.getVertexPosition(fromNode.vertice);
+
+         for (var index in context.nodesAndNeighbors) {
+            var node = context.nodesAndNeighbors[index];
+            // Don't send to current sender
+            if (node.nodeId == fromNode.nodeId)
+               continue;
+
+            var toPos = context.vGraph.graphDrawer.getVertexPosition(node.vertice);
+
+            let messageInfo = {
+               fromId: fromNode.nodeId,
+               toId: node.nodeId,
+               message: message,
+               status: "queued",
+               messageId: messageId,
+               circle: null
+            };
+
+            messageInfo.circle = paper.circle(fromPos.x, fromPos.y, 10);
+            messageInfo.circle.attr("fill", "lightblue");
+
+            messageInfo.circle.animate({ cx: toPos.x, cy: toPos.y }, messageDelay);
+
+            context.sendMessage(messageInfo, true);
+         }
+
+         context.runner.waitDelay(callback, null, messageDelay);
+      }
+      else {
+         for (var index in context.nodesAndNeighbors) {
+            var node = context.nodesAndNeighbors[index];
+
+            let messageInfo = {
+               fromId: fromNode.nodeId,
+               toId: node.nodeId,
+               message: message,
+               status: "queued",
+               messageId: messageId,
+               circle: null
+            };
+
+            context.sendMessage(messageInfo, true);
+         }
+            
+         context.runner.noDelay(callback);
+      }
+   };
+
+   context.distributed.log = function (string, callback) {
+      var node = context.nodesAndNeighbors[context.curNode];
+
+      if (context.display)
+         node.log.push(string);
+
+      context.runner.waitDelay(callback);
+   };
+
+   context.distributed.currentTime = function (callback) {
+      var millis = new Date().getTime() - context.currentWallTime;
+
+      console.log("millis", millis);
+
+      context.runner.waitDelay(callback, millis);
+  };
+
+
+   /*
+    * Each function must end its main execution thread by calling one of :
+    * `context.runner.noDelay(callback, value)` : return value `value`
+    * `context.runner.waitDelay(callback, value, delay)` : return value `value` after `delay` milliseconds
+    * `context.runner.waitEvent(callback, target, eventName, func)` : listen for JavaScript event `eventName` on DOM element `target`, until one event `e` is received, and return `func(e)`
+    * `context.runner.waitCallback(callback)` : returns a callback `cb` ; wait for `cb` to be called with `cb(value)`, and return `value`
+    * If you need to make an asynchronous call, you must still call one of these
+    * functions (for instance waitCallback) ; do not call them inside a
+    * setTimeout or the execution thread may be broken.
+    */
+
+
+   /***** Blocks definitions *****/
+   /* Here we define all blocks/functions of the library.
+      Structure is as follows:
+      {
+         group: [{
+            name: "someName",
+            // category: "categoryName",
+            // yieldsValue: optional true: Makes a block with return value rather than simple command
+            // params: optional array of parameter types. The value 'null' denotes /any/ type. For specific types, see the Blockly documentation ([1,2])
+            // handler: optional handler function. Otherwise the function context.group.blockName will be used
+            // blocklyJson: optional Blockly JSON objects
+            // blocklyInit: optional function for Blockly.Blocks[name].init
+            //   if not defined, it will be defined to call 'this.jsonInit(blocklyJson);
+            // blocklyXml: optional Blockly xml string
+            // codeGenerators: optional object:
+            //   { Python: function that generates Python code
+            //     JavaScript: function that generates JS code
+            //   }
+         }]
+      }
+      [1] https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks
+      [2] https://developers.google.com/blockly/guides/create-custom-blocks/type-checks
+   */
+
+   context.customBlocks = {
+      // Define our blocks for our namespace "distributed"
+      distributed: {
+         // Categories are reflected in the Blockly menu
+         actuator: [
+            { name: "getNodeID", yieldsValue: true },
+            { name: "getNeighbors", yieldsValue: true },
+            { name: "getNextMessage", yieldsValue: true },
+            {
+               name: "getNextMessageWithTimeout", yieldsValue: true, params: ["Number"],
+               blocklyJson: {
+                  "args0": [
+                     { "type": "input_value", "name": "PARAM_0" },
+                  ]
+               },
+               blocklyXml: "" +
+                  "5" +
+                  ""
+            },
+            { name: "sendMessage", params: [null, null] },
+            { name: "submitAnswer", params: [null] },
+            { name: "isMessageWaiting", yieldsValue: true },
+            { name: "broadcastMessage", params: [null] },
+            { name: "log", params: [null] },
+            { name: "currentTime", yieldsValue: true },
+         ],
+         sensors: [
+         ]
+      }
+      // We can add multiple namespaces by adding other keys to customBlocks.
+   };
+
+   // Color indexes of block categories (as a hue in the range 0–420)
+   context.provideBlocklyColours = function () {
+      return {
+         categories: {
+            actuator: 0,
+            sensors: 100
+         }
+      };
+   };
+
+   // Constants available in Python
+   context.customConstants = {
+      distributed: [
+
+      ]
+   };
+
+   // Don't forget to return our newly created context!
+   return context;
+}
+
+
+var distributedTaskUtilities = {
+   twoNodes: {
+      "vertexVisualInfo": {
+         "v_0": {
+            "x": 34,
+            "y": 54
+         },
+         "v_1": {
+            "x": 206,
+            "y": 54
+         }
+      },
+      "edgeVisualInfo": {
+         "e_0": {}
+      },
+      "minGraph": {
+         "vertexInfo": {
+            "v_0": {
+               "content": "test, virgule\nTEST, VIRGULE\nAAAAAAAAAAAAA\ntest\ntest"
+            },
+            "v_1": {
+               "content": "test, virgule\ntest"
+            }
+         },
+         "edgeInfo": {
+            "e_0": {}
+         },
+         "edgeVertices": {
+            "e_0": [
+               "v_0",
+               "v_1"
+            ]
+         },
+         "directed": false
+      }
+   },
+   ringGraph: {
+      "vertexVisualInfo": {
+         "v_0": {
+            "x": 31,
+            "y": 346
+         },
+         "v_1": {
+            "x": 35,
+            "y": 143
+         },
+         "v_2": {
+            "x": 237,
+            "y": 34
+         },
+         "v_3": {
+            "x": 461,
+            "y": 88
+         },
+         "v_4": {
+            "x": 489,
+            "y": 242
+         },
+
+         "v_5": {
+            "x": 443,
+            "y": 413
+         },
+         "v_6": {
+            "x": 221,
+            "y": 465
+         }
+      },
+      "edgeVisualInfo": {
+         "e_1": {},
+         "e_0": {},
+         "e_4": {},
+         "e_5": {},
+         "e_6": {},
+         "e_7": {},
+         "e_2": {},
+      },
+      "minGraph": {
+         "vertexInfo": {
+            "v_0": {
+               "label": ""
+            },
+            "v_1": {
+               "label": ""
+            },
+            "v_2": {
+               "label": ""
+            },
+            "v_3": {
+               "label": ""
+            },
+            "v_4": {
+               "label": ""
+            },
+
+            "v_5": {
+               "label": ""
+            },
+            "v_6": {
+               "label": ""
+            }
+         },
+         "edgeInfo": {
+            "e_1": {},
+            "e_0": {},
+            "e_4": {},
+            "e_5": {},
+            "e_6": {},
+            "e_7": {},
+            "e_2": {}
+         },
+         "edgeVertices": {
+            "e_1": [
+               "v_0",
+               "v_1"
+            ],
+            "e_0": [
+               "v_6",
+               "v_0"
+            ],
+            "e_4": [
+               "v_6",
+               "v_5"
+            ],
+            "e_5": [
+               "v_5",
+               "v_4"
+            ],
+            "e_6": [
+               "v_4",
+               "v_3"
+            ],
+            "e_7": [
+               "v_2",
+               "v_1"
+            ],
+            "e_2": [
+               "v_2",
+               "v_3"
+            ]
+         },
+         "directed": false
+      }
+   },
+   ringGraph14: {
+      "vertexVisualInfo": {
+         "v_0": {
+           "x": 276,
+           "y": 449
+         },
+         "v_1": {
+           "x": 173,
+           "y": 429
+         },
+         "v_2": {
+           "x": 450,
+           "y": 91
+         },
+         "v_3": {
+           "x": 494,
+           "y": 161
+         },
+         "v_4": {
+           "x": 498,
+           "y": 259
+         },
+         "v_5": {
+           "x": 471,
+           "y": 368
+         },
+         "v_6": {
+           "x": 382,
+           "y": 432
+         },
+         "v_7": {
+           "x": 52,
+           "y": 286
+         },
+         "v_8": {
+           "x": 83,
+           "y": 372
+         },
+         "v_9": {
+           "x": 53,
+           "y": 190
+         },
+         "v_10": {
+           "x": 97,
+           "y": 111
+         },
+         "v_11": {
+           "x": 175,
+           "y": 54
+         },
+         "v_12": {
+           "x": 268,
+           "y": 29
+         },
+         "v_13": {
+           "x": 376,
+           "y": 38
+         }
+       },
+       "edgeVisualInfo": {
+         "e_1": {},
+         "e_0": {},
+         "e_4": {},
+         "e_5": {},
+         "e_6": {},
+         "e_2": {},
+         "e_3": {},
+         "e_7": {},
+         "e_8": {},
+         "e_9": {},
+         "e_10": {},
+         "e_11": {},
+         "e_12": {},
+         "e_13": {}
+       },
+       "minGraph": {
+         "vertexInfo": {
+           "v_0": {
+             "label": ""
+           },
+           "v_1": {
+             "label": ""
+           },
+           "v_2": {
+             "label": ""
+           },
+           "v_3": {
+             "label": ""
+           },
+           "v_4": {
+             "label": ""
+           },
+           "v_5": {
+             "label": ""
+           },
+           "v_6": {
+             "label": ""
+           },
+           "v_7": {},
+           "v_8": {},
+           "v_9": {},
+           "v_10": {},
+           "v_11": {},
+           "v_12": {},
+           "v_13": {}
+         },
+         "edgeInfo": {
+           "e_1": {},
+           "e_0": {},
+           "e_4": {},
+           "e_5": {},
+           "e_6": {},
+           "e_2": {},
+           "e_3": {},
+           "e_7": {},
+           "e_8": {},
+           "e_9": {},
+           "e_10": {},
+           "e_11": {},
+           "e_12": {
+             "selected": false
+           },
+           "e_13": {}
+         },
+         "edgeVertices": {
+           "e_1": [
+             "v_0",
+             "v_1"
+           ],
+           "e_0": [
+             "v_6",
+             "v_0"
+           ],
+           "e_4": [
+             "v_6",
+             "v_5"
+           ],
+           "e_5": [
+             "v_5",
+             "v_4"
+           ],
+           "e_6": [
+             "v_4",
+             "v_3"
+           ],
+           "e_2": [
+             "v_2",
+             "v_3"
+           ],
+           "e_3": [
+             "v_8",
+             "v_7"
+           ],
+           "e_7": [
+             "v_1",
+             "v_8"
+           ],
+           "e_8": [
+             "v_7",
+             "v_9"
+           ],
+           "e_9": [
+             "v_9",
+             "v_10"
+           ],
+           "e_10": [
+             "v_10",
+             "v_11"
+           ],
+           "e_11": [
+             "v_11",
+             "v_12"
+           ],
+           "e_12": [
+             "v_12",
+             "v_13"
+           ],
+           "e_13": [
+             "v_13",
+             "v_2"
+           ]
+         },
+         "directed": false
+       }
+   },
+   ringGraph4: {
+      "vertexVisualInfo": {
+         "v_0": {
+           "x": 31,
+           "y": 288
+         },
+         "v_1": {
+           "x": 34,
+           "y": 33
+         },
+         "v_2": {
+           "x": 288,
+           "y": 32
+         },
+         "v_3": {
+           "x": 287,
+           "y": 288
+         }
+       },
+       "edgeVisualInfo": {
+         "e_1": {},
+         "e_7": {},
+         "e_2": {},
+         "e_0": {}
+       },
+       "minGraph": {
+         "vertexInfo": {
+           "v_0": {
+             "label": ""
+           },
+           "v_1": {
+             "label": ""
+           },
+           "v_2": {
+             "label": ""
+           },
+           "v_3": {
+             "label": ""
+           }
+         },
+         "edgeInfo": {
+           "e_1": {},
+           "e_7": {},
+           "e_2": {},
+           "e_0": {}
+         },
+         "edgeVertices": {
+           "e_1": [
+             "v_0",
+             "v_1"
+           ],
+           "e_7": [
+             "v_2",
+             "v_1"
+           ],
+           "e_2": [
+             "v_2",
+             "v_3"
+           ],
+           "e_0": [
+             "v_3",
+             "v_0"
+           ]
+         },
+         "directed": false
+       }
+   },
+   allToAllGraph: {
+      "vertexVisualInfo": {
+         "v_3": {
+            "x": 28,
+            "y": 346
+         },
+         "v_4": {
+            "x": 363,
+            "y": 346
+         },
+         "v_1": {
+            "x": 29,
+            "y": 29
+         },
+         "v_2": {
+            "x": 360,
+            "y": 29
+         },
+         "v_5": {
+            "x": 193,
+            "y": 190
+         }
+      },
+      "edgeVisualInfo": {
+         "e_0": {},
+         "e_1": {},
+         "e_2": {},
+         "e_3": {},
+         "e_4": {},
+         "e_5": {},
+         "e_6": {},
+         "e_7": {},
+         "e_8": {
+            "sweep": 1,
+            "large-arc": 0,
+            "radius-ratio": 0.75
+         },
+         "e_9": {
+            "sweep": 0,
+            "large-arc": 0,
+            "radius-ratio": 0.9
+         },
+      },
+      "minGraph": {
+         "vertexInfo": {
+            "v_3": {
+               "label": ""
+            },
+            "v_4": {
+               "label": ""
+            },
+            "v_1": {
+               "label": ""
+            },
+            "v_2": {
+               "label": ""
+            },
+            "v_5": {
+               "label": ""
+            }
+         },
+         "edgeInfo": {
+            "e_0": {},
+            "e_1": {},
+            "e_2": {},
+            "e_3": {},
+            "e_4": {},
+            "e_5": {},
+            "e_6": {},
+            "e_7": {},
+            "e_8": {},
+            "e_9": {}
+         },
+         "edgeVertices": {
+            "e_0": [
+               "v_1",
+               "v_2"
+            ],
+            "e_1": [
+               "v_2",
+               "v_4"
+            ],
+            "e_2": [
+               "v_4",
+               "v_5"
+            ],
+            "e_3": [
+               "v_4",
+               "v_3"
+            ],
+            "e_4": [
+               "v_3",
+               "v_1"
+            ],
+            "e_5": [
+               "v_3",
+               "v_5"
+            ],
+            "e_6": [
+               "v_5",
+               "v_1"
+            ],
+            "e_7": [
+               "v_5",
+               "v_2"
+            ],
+            "e_8": [
+               "v_3",
+               "v_2"
+            ],
+            "e_9": [
+               "v_4",
+               "v_1"
+            ]
+         },
+         "directed": false
+      }
+   },
+   singleMasterGraph: {
+      "vertexVisualInfo": {
+         "v_3": {
+            "x": 115,
+            "y": 199
+         },
+         "v_4": {
+            "x": 212,
+            "y": 198
+         },
+         "v_0": {
+            "x": 505,
+            "y": 198
+         },
+         "v_1": {
+            "x": 262,
+            "y": 52
+         },
+         "v_2": {
+            "x": 26,
+            "y": 198
+         },
+         "v_5": {
+            "x": 315,
+            "y": 198
+         },
+         "v_6": {
+            "x": 409,
+            "y": 195
+         }
+      },
+      "edgeVisualInfo": {
+         "e_0": {},
+         "e_1": {},
+         "e_2": {},
+         "e_3": {},
+         "e_4": {},
+         "e_5": {}
+      },
+      "minGraph": {
+         "vertexInfo": {
+            "v_3": {
+               "label": ""
+            },
+            "v_4": {
+               "label": ""
+            },
+            "v_0": {
+               "label": ""
+            },
+            "v_1": {
+               "label": ""
+            },
+            "v_2": {
+               "label": ""
+            },
+            "v_5": {
+               "label": ""
+            },
+            "v_6": {
+               "label": ""
+            }
+         },
+         "edgeInfo": {
+            "e_0": {},
+            "e_1": {},
+            "e_2": {},
+            "e_3": {},
+            "e_4": {},
+            "e_5": {},
+         },
+         "edgeVertices": {
+            "e_0": [
+               "v_1",
+               "v_2"
+            ],
+            "e_1": [
+               "v_1",
+               "v_3"
+            ],
+            "e_2": [
+               "v_1",
+               "v_4"
+            ],
+            "e_3": [
+               "v_1",
+               "v_5"
+            ],
+            "e_4": [
+               "v_1",
+               "v_6"
+            ],
+            "e_5": [
+               "v_1",
+               "v_0"
+            ]
+         },
+         "directed": false
+      }
+   }
+}
+
+Raphael.el.animateAlong = function (params, props, callback) {
+   var element = this,
+      paper = element.paper,
+      path = params.path,
+      rotate = params.rotate,
+      duration = params.duration,
+      easing = params.easing,
+      debug = params.debug,
+      fromPercentage = params.fromPercentage,
+      toPercentage = params.toPercentage,
+      isElem = typeof path !== 'string';
+
+   element.path =
+      isElem
+         ? path
+         : paper.path(path);
+   element.pathLen = element.path.getTotalLength();
+   element.rotateWith = rotate;
+
+   element.path.attr({
+      stroke: debug ? 'red' : isElem ? path.attr('stroke') : 'rgba(0,0,0,0)',
+      'stroke-width': debug ? 2 : isElem ? path.attr('stroke-width') : 0
+   });
+
+   paper.customAttributes.along = function (v) {
+      var point = this.path.getPointAtLength(v * this.pathLen),
+         attrs = {
+            cx: point.x,
+            cy: point.y
+         };
+      this.rotateWith && (attrs.transform = 'r' + point.alpha);
+      // TODO: rotate along a path while also not messing
+      //       up existing transformations
+
+      return attrs;
+   };
+
+   if (props instanceof Function) {
+      callback = props;
+      props = null;
+   }
+   if (!props) {
+      props = {
+         along: toPercentage
+      };
+   } else {
+      props.along = toPercentage;
+   }
+
+   var startAlong = element.attr('along') || fromPercentage;
+
+   element.attr({ along: startAlong }).animate(props, duration, easing, function () {
+      !isElem && element.path.remove();
+
+      callback && callback.call(element);
+   });
+};
+
+// Register the library; change "template" by the name of your library in lowercase
+if (window.quickAlgoLibraries) {
+   quickAlgoLibraries.register('distributed', getContext);
+} else {
+   if (!window.quickAlgoLibrariesList) { window.quickAlgoLibrariesList = []; }
+   window.quickAlgoLibrariesList.push(['distributed', getContext]);
+}
diff --git a/pemFioi/quickpi/blocklyQuickPi_lib.js b/pemFioi/quickpi/blocklyQuickPi_lib.js
new file mode 100644
index 000000000..4bac06976
--- /dev/null
+++ b/pemFioi/quickpi/blocklyQuickPi_lib.js
@@ -0,0 +1,10552 @@
+//"use strict";
+var quickPiLocalLanguageStrings = {
+    fr: { // French strings
+        label: {
+            // Labels for the blocks
+            sleep: "attendre %1 millisecondes",
+            currentTime: "temps écoulé en millisecondes",
+
+            turnLedOn: "allumer la LED",
+            turnLedOff: "éteindre la LED",
+
+            setLedState: "passer la LED %1 à %2 ",
+            toggleLedState: "inverser la LED %1",
+
+            isLedOn: "LED allumée",
+            isLedOnWithName: "LED %1 allumée",
+
+            setLedBrightness: "mettre la luminosité de %1 à %2",
+            getLedBrightness: "lire la luminosité de %1",
+
+            turnBuzzerOn: "allumer le buzzer",
+            turnBuzzerOff: "éteindre le buzzer",
+            setBuzzerState: "mettre le buzzer %1 à %2",
+            isBuzzerOn: "buzzer allumé",
+            isBuzzerOnWithName: "buzzer %1 allumé",
+
+            setBuzzerNote: "jouer la fréquence %2Hz sur %1",
+            getBuzzerNote: "fréquence du buzzer %1",
+
+            isButtonPressed: "bouton enfoncé",
+            isButtonPressedWithName: "bouton  %1 enfoncé",
+            waitForButton: "attendre une pression sur le bouton",
+            buttonWasPressed: "le bouton a été enfoncé",
+
+            displayText: "afficher %1",
+            displayText2Lines: "afficher Ligne 1 : %1 Ligne 2 : %2",
+
+            readTemperature: "température ambiante",
+            getTemperatureFromCloud: "temperature de la ville %1",
+
+            readRotaryAngle: "état du potentiomètre %1",
+            readDistance: "distance mesurée par %1",
+            readLightIntensity: "intensité lumineuse",
+            readHumidity: "humidité ambiante",
+
+            setServoAngle: "mettre le servo %1 à l'angle %2",
+            getServoAngle: "angle du servo %1",
+
+            setContinousServoDirection: "la direction du servo continu  %1 %2",
+
+            drawPoint: "dessiner un pixel en x₀: %1 y₀: %2",
+            isPointSet: "pixel affiché en x₀: %1 y₀: %2",
+            drawLine: "ligne x₀: %1 y₀: %2 x₁: %3 y₁: %4",
+            drawRectangle: "rectangle x₀: %1 y₀: %2 largeur₀: %3 hauteur₀: %4",
+            drawCircle: "cercle x₀: %1 y₀: %2 diamètre₀: %3",
+            clearScreen: "effacer tout l'écran",
+            updateScreen: "mettre à jour l'écran",
+            autoUpdate: "mode de mise à jour automatique de l'écran",
+
+            fill: "mettre la couleur de remplissage à %1",
+            noFill: "ne pas remplir les formes",
+            stroke: "mettre la couleur de tracé à %1",
+            noStroke: "ne pas dessiner les contours",
+
+            readAcceleration: "accélération en (m/s²) dans l'axe %1",
+            computeRotation: "calcul de l'angle de rotation (°) sur l'accéléromètre %1",
+            readSoundLevel: "volume sonore",
+
+            readMagneticForce: "champ magnétique (µT) sur %1",
+            computeCompassHeading: "direction de la boussole en (°)",
+
+            readInfraredState: "infrarouge détecté sur %1",
+            setInfraredState: "mettre l'émetteur infrarouge %1 à %2",
+
+            // Gyroscope
+            readAngularVelocity: "vitesse angulaire (°/s) du gyroscope %1",
+            setGyroZeroAngle: "initialiser le gyroscope à l'état zéro",
+            computeRotationGyro: "calculer la rotation du gyroscope %1",
+
+            //Internet store
+            connectToCloudStore: "se connecter au cloud. Identifiant %1 Mot de passe %2",
+            writeToCloudStore: "écrire dans le cloud : identifiant %1 clé %2 valeur %3",
+            readFromCloudStore: "lire dans le cloud : identifiant %1 clé %2",
+
+            // IR Remote
+            readIRMessage: "attendre un message IR nom : %1 pendant : %2 ms",
+            sendIRMessage: "envoi du message préparé IR nommé %2 sur %1",
+            presetIRMessage: "préparer un message IR de nom %1 et contenu %2",
+        },
+        code: {
+            // Names of the functions in Python, or Blockly translated in JavaScript
+            turnLedOn: "turnLedOn",
+            turnLedOff: "turnLedOff",
+            setLedState: "setLedState",
+
+            isButtonPressed: "isButtonPressed",
+            isButtonPressedWithName : "isButtonPressed",
+            waitForButton: "waitForButton",
+            buttonWasPressed: "buttonWasPressed",
+
+            toggleLedState: "toggleLedState",
+            displayText: "displayText",
+            displayText2Lines: "displayText",
+            readTemperature: "readTemperature",
+            sleep: "sleep",
+            setServoAngle: "setServoAngle",
+            readRotaryAngle: "readRotaryAngle",
+            readDistance: "readDistance",
+            readLightIntensity: "readLightIntensity",
+            readHumidity: "readHumidity",
+            currentTime: "currentTime",
+            getTemperatureFromCloud: "getTemperatureFromCloud",
+
+            isLedOn: "isLedOn",
+            isLedOnWithName: "isLedOn",
+
+            setBuzzerNote: "setBuzzerNote",
+            getBuzzerNote: "getBuzzerNote",
+            setLedBrightness: "setLedBrightness",
+            getLedBrightness: "getLedBrightness",
+            getServoAngle: "getServoAngle",
+
+            setBuzzerState: "setBuzzerState",
+            setBuzzerNote: "setBuzzerNote",
+
+            turnBuzzerOn: "turnBuzzerOn",
+            turnBuzzerOff: "turnBuzzerOff",
+            isBuzzerOn: "isBuzzerOn",
+            isBuzzerOnWithName: "isBuzzerOn",
+
+
+            drawPoint: "drawPoint",
+            isPointSet: "isPointSet",
+            drawLine: "drawLine",
+            drawRectangle: "drawRectangle",
+            drawCircle: "drawCircle",
+            clearScreen: "clearScreen",
+            updateScreen: "updateScreen",
+            autoUpdate: "autoUpdate",
+
+            fill: "fill",
+            noFill: "noFill",
+            stroke: "stroke",
+            noStroke: "noStroke",
+
+
+            readAcceleration: "readAcceleration",
+            computeRotation: "computeRotation",
+
+            readSoundLevel: "readSoundLevel",
+
+
+            readMagneticForce: "readMagneticForce",
+            computeCompassHeading: "computeCompassHeading",
+
+            readInfraredState: "readInfraredState",
+            setInfraredState: "setInfraredState",
+
+
+            // Gyroscope
+            readAngularVelocity: "readAngularVelocity",
+            setGyroZeroAngle: "setGyroZeroAngle",
+            computeRotationGyro: "computeRotationGyro",
+
+            //Internet store
+            connectToCloudStore: "connectToCloudStore",
+            writeToCloudStore: "writeToCloudStore",
+            readFromCloudStore: "readFromCloudStore",                
+
+            // IR Remote
+            readIRMessage: "readIRMessage",
+            sendIRMessage: "sendIRMessage",
+            presetIRMessage: "presetIRMessage",
+
+            //Continous servo
+            setContinousServoDirection: "setContinousServoDirection",
+        },
+        description: {
+            // Descriptions of the functions in Python (optional)
+            turnLedOn: "turnLedOn() allume la LED",
+            turnLedOff: "turnLedOff() éteint la LED",
+            isButtonPressed: "isButtonPressed() retourne True si le bouton est enfoncé, False sinon",
+            isButtonPressedWithName: "isButtonPressed(button) retourne True si le bouton est enfoncé, False sinon",
+            waitForButton: "waitForButton(button) met en pause l'exécution jusqu'à ce que le bouton soit appuyé",
+            buttonWasPressed: "buttonWasPressed(button) indique si le bouton a été appuyé depuis le dernier appel à cette fonction",
+            setLedState: "setLedState(led, state) modifie l'état de la LED : True pour l'allumer, False pour l'éteindre",
+            toggleLedState: "toggleLedState(led) inverse l'état de la LED",
+            displayText: "displayText(line1, line2) affiche une ou deux lignes de texte. line2 est optionnel",
+            displayText2Lines: "displayText(line1, line2) affiche une ou deux lignes de texte. line2 est optionnel",
+            readTemperature: "readTemperature(thermometer) retourne la température ambiante",
+            sleep: "sleep(milliseconds) met en pause l'exécution pendant une durée en ms",
+            setServoAngle: "setServoAngle(servo, angle) change l'angle du servomoteur",
+            readRotaryAngle: "readRotaryAngle(potentiometer) retourne la position potentiomètre",
+            readDistance: "readDistance(distanceSensor) retourne la distance mesurée",
+            readLightIntensity: "readLightIntensity(lightSensor) retourne l'intensité lumineuse",
+            readHumidity: "readHumidity(hygrometer) retourne l'humidité ambiante",
+            currentTime: "currentTime() temps en millisecondes depuis le début du programme",
+
+            setLedBrightness: "setLedBrightness(led, brightness) règle l'intensité lumineuse de la LED",
+            getLedBrightness: "getLedBrightness(led) retourne l'intensité lumineuse de la LED",
+            getServoAngle: "getServoAngle(servo) retourne l'angle du servomoteur",
+
+            isLedOn: "isLedOn() retourne True si la LED est allumée, False si elle est éteinte",
+            isLedOnWithName: "isLedOn(led) retourne True si la LED est allumée, False sinon",
+
+            turnBuzzerOn: "turnBuzzerOn() allume le buzzer",
+            turnBuzzerOff: "turnBuzzerOff() éteint le buzzer",
+
+            isBuzzerOn: "isBuzzerOn() retourne True si le buzzer est allumé, False sinon",
+            isBuzzerOnWithName: "isBuzzerOn(buzzer) retourne True si le buzzer est allumé, False sinon",
+
+            setBuzzerState: "setBuzzerState(buzzer, state) modifie l'état du buzzer: True pour allumé, False sinon",
+            setBuzzerNote: "setBuzzerNote(buzzer, frequency) fait sonner le buzzer à la fréquence indiquée",
+            getBuzzerNote: "getBuzzerNote(buzzer) retourne la fréquence actuelle du buzzer",
+
+            getTemperatureFromCloud: "getTemperatureFromCloud(town) retourne la température dans la ville donnée",
+
+            drawPoint: "drawPoint(x, y) dessine un point de un pixel aux coordonnées données",
+            isPointSet: "isPointSet(x, y) retourne True si le point aux coordonées x, y est actif",
+            drawLine: "drawLine(x0, y0, x1, y1) dessine un segment commençant en x0, y0 jusqu'à x1, y1",
+            drawRectangle: "drawRectangle(x0, y0, width, height) dessine un rectangle, de coin haut gauche (x0,y0)",
+            drawCircle: "drawCircle(x0, y0, diameter) dessine un cercle de centre x0, y0 et de diamètre donné",
+            clearScreen: "clearScreen() efface le contenu de l'écran",
+            updateScreen: "updateScreen() mettre à jour l'écran",
+            autoUpdate: "autoUpdate(auto) change le mode d'actualisation de l'écran",
+
+            fill: "fill(color) Remplir les formes avec la couleur donnée",
+            noFill: "noFill() Ne pas remplir les formes",
+            stroke: "stroke(color) dessiner les bords des figures avec la couleur donnée",
+            noStroke: "noStroke() ne pas dessiner les bordures des figures",
+
+
+            readAcceleration: "readAcceleration(axis) lit l'accélération en m/s² sur l'axe (X, Y ou Z)",
+            computeRotation: "computeRotation(axis) calcule l'angle de rotation en degrés sur l'accéléromètre",
+
+            readSoundLevel: "readSoundLevel(port) retourne le volume ambiant",
+
+
+            readMagneticForce: "readMagneticForce(axis) retourne le champ magnétique (µT) sur l'axe (X, Y ou Z)",
+            computeCompassHeading: "computeCompassHeading() retourne la direction de la boussole en degrés",
+
+            readInfraredState: "readInfraredState(IRReceiver) retourne True si un signal infra-rouge est détecté, False sinon",
+            setInfraredState: "setInfraredState(IREmitter, state) modifie l'état de l'émetteur : True pour l'allumer, False pour l'éteindre",
+
+            // Gyroscope
+            readAngularVelocity: "readAngularVelocity(axis) retourne la vitesse engulairee (°/s) du gyroscope",
+            setGyroZeroAngle: "setGyroZeroAngle() initialize le gyroscope à l'état 0",
+            computeRotationGyro: "computeRotationGyro(axis) calcule la rotation du gyroscope en degrés",
+
+            //Internet store
+            connectToCloudStore: "connectToCloudStore(identifier, password) se connecter au cloud avec le nom d'utilisateur et le mot de passe donnés",
+            writeToCloudStore: "writeToCloudStore(identifier, key, value) écrire une valeur sur une clé dans le cloud",
+            readFromCloudStore: "readFromCloudStore(identifier, key) retourne la valeur lue dans le cloud de la clé donnée",
+
+            // IR Remote
+            readIRMessage: "readIRMessage(irrec, timeout) attends un message infrarouge pendant le temps donné en millisecondes et le renvois",
+            sendIRMessage: "sendIRMessage(irtrans, name) envoi un message infrarouge précédement configurer avec le nom donné",
+            presetIRMessage: "presetIRMessage(name, data) configure un message infrarouge de nom name et de donné data",
+
+            //Continous servo
+            setContinousServoDirection: "setContinousServoDirection(servo, direction)",
+        },
+        constant: {
+        },
+
+        startingBlockName: "Programme", // Name for the starting block
+        messages: {
+            sensorNotFound: "Accès à un capteur ou actuateur inexistant : {0}.",
+            manualTestSuccess: "Test automatique validé.",
+            testSuccess: "Bravo ! La sortie est correcte",
+            wrongState: "Test échoué : {0} a été dans l'état {1} au lieu de {2} à t={3}ms.",
+            wrongStateDrawing: "Test échoué : {0} diffère de {1} pixels par rapport à l'affichage attendu à t={2}ms.",
+            wrongStateSensor: "Test échoué : votre programme n'a pas lu l'état de {0} après t={1}ms.",
+            programEnded: "programme terminé.",
+            piPlocked: "L'appareil est verrouillé. Déverrouillez ou redémarrez.",
+            cantConnect: "Impossible de se connecter à l'appareil.",
+            wrongVersion: "Votre Raspberry Pi a une version trop ancienne, mettez le à jour.",
+            sensorInOnlineMode: "Vous ne pouvez pas agir sur les capteurs en mode connecté.",
+            actuatorsWhenRunning: "Impossible de modifier les actionneurs lors de l'exécution d'un programme",
+            cantConnectoToUSB: 'Tentative de connexion par USB en cours, veuillez brancher votre Raspberry sur le port USB ',
+            cantConnectoToBT: 'Tentative de connection par Bluetooth, veuillez connecter votre appareil au Raspberry par Bluetooth ',
+            canConnectoToUSB: "Connecté en USB.",
+            canConnectoToBT: "Connecté en Bluetooth.",
+            noPortsAvailable: "Aucun port compatible avec ce {0} n'est disponible (type {1})",
+            sensor: "capteur",
+            actuator: "actionneur",
+            removeConfirmation: "Êtes-vous certain de vouloir retirer ce capteur ou actuateur?",
+            remove: "Retirer",
+            keep: "Garder",
+            minutesago: "Last seen {0} minutes ago",
+            hoursago: "Last seen more than one hour ago",
+            drawing: "dessin",
+            timeLabel: "Temps",
+            seconds: "secondes",
+
+            changeBoard: "Changer de carte",
+            connect: "Connecter",
+            install: "Installer",
+            config: "Config",
+
+     
+            raspiConfig: "Configuration du Raspberry Pi",
+            local: "Local",
+            schoolKey: "Indiquez un identifiant d'école",
+            connectList: "Sélectionnez un appareil à connecter dans la liste suivante",
+            enterIpAddress: "ou entrez son adesse IP",
+            getPiList: "Obtenir la liste",
+            connectTroughtTunnel: "Connecter à travers le France-ioi tunnel",
+
+            connectToLocalhost: "Connecter l'interface à la machine sur laquelle tourne ce navigateur",
+            connectToWindowLocation: "Connecter au Raspberry Pi depuis lequel cette page est chargée",
+
+            connectToDevice: "Connecter l'appareil",
+            disconnectFromDevice: "Déconnecter",
+       
+
+            irReceiverTitle: "Recevoir des codes infrarouges",
+            directIrControl: "Dirigez votre télécommande vers votre carte QuickPi et appuyez sur un des boutons",
+            getIrCode: "Recevoir un code",
+            closeDialog: "Fermer",
+
+            irRemoteControl: "Télécommande IR",
+            
+            noIrPresets: "Veuillez utiliser la fonction de préparation de messages IR pour ajouter des commandes de télécommande",
+            irEnableContinous: "Activer l'émission IR en continu",
+            irDisableContinous: "Désactiver l'émission IR en continu",
+
+            connectToLocalHost: "Connecter l'interface à la machine sur laquelle tourne ce navigateur",
+
+            up: "up",
+            down: "down",
+            left: "left",
+            right: "right",
+            center: "center",
+
+            on: "On",
+            off: "Off",
+
+            grovehat: "Grove Base Hat for Raspberry Pi",
+            quickpihat: "France IOI QuickPi Hat",
+            pinohat: "Raspberry Pi without hat",
+            led: "LED",
+            blueled: "LED bleue",
+            greenled: "LED verte",
+            orangeled: "LED orange",
+            redled: "LED rouge",
+            buzzer: "Buzzer",
+            grovebuzzer: "Grove Buzzer",
+            quickpibuzzer: "Quick Pi Passive Buzzer",
+            servo: "Servo Motor",
+            screen: "Screen",
+            grove16x2lcd: "Grove 16x2 LCD",
+            oled128x32: "128x32 Oled Screen",
+            irtrans: "IR Transmiter",
+            button: "Button",
+            fivewaybutton: "5 way button",
+            tempsensor: "Temperature sensor",
+            groveanalogtempsensor: "Grove Analog tempeature sensor",
+            quickpigyrotempsensor: "Quick Pi Accelerometer+Gyroscope temperature sensor",
+            dht11tempsensor: "DHT11 Tempeature Sensor",
+            potentiometer: "Potentiometer",
+            lightsensor: "Light sensor",
+            distancesensor: "Capteur de distance",
+            timeofflightranger: "Time of flight distance sensor",
+            ultrasonicranger: "Capteur de distance à ultrason",
+            humiditysensor: "Humidity sensor",
+            soundsensor: "Sound sensor",
+            accelerometerbmi160: "Accelerometer sensor (BMI160)",
+            gyrobmi160: "Gyropscope sensor (BMI160)",
+            maglsm303c: "Magnetometer sensor (LSM303C)",
+            irreceiver: "IR Receiver",
+            cloudstore: "Cloud Store",
+            addcomponent: "Ajouter un composant",
+            selectcomponent: "Sélectionnez un composant à ajouter à votre Raspberry Pi et attachez-le à un port.",
+            add: "Ajouter",
+            builtin: "(builtin)",
+            chooseBoard: "Choisissez votre carte",
+            nameandports: "Noms et ports des capteurs et actionneurs QuickPi",
+            name: "Name",
+            port: "Port",
+            state: "State",
+
+            cloudTypes: {
+                object: "Dictionnaire",
+                array: "Tableau",
+                boolean: "Booléen",
+                number: "Nombre",
+                string: "Chaîne de caractère"
+            },
+            cloudMissingKey: "Test échoué : Il vous manque la clé {0} dans le cloud.",
+            cloudMoreKey: "Test échoué : La clé {0} est en trop dans le cloud",
+            cloudUnexpectedKeyCorrection: "Test échoué : La clé {0} n'étais pas attendu dans le cloud",
+            cloudPrimitiveWrongKey: "Test échoué : À la clé {0} du cloud, la valeur {1} était attendue au lieu de {2}",
+            cloudArrayWrongKey: "Test échoué : Le tableau à la clé {0} du cloud diffère de celui attendu.",
+            cloudDictionaryWrongKey: "Test échoué : Le dictionnaire à la clé {0} diffère de celui attendu",
+            cloudWrongType: "Test échoué : Vous avez stocké une valeur de type \"{0}\" dans la clé {1} du cloud, mais le type \"{2}\" était attendu.",
+
+            cloudKeyNotExists: "La clé n'existe pas : {0} ",
+            cloudWrongValue: "Clé {0} : la valeur {2} n'est pas celle attendue, {1}.",
+            cloudUnexpectedKey: "La clé {0} n'est pas une clé attendue",
+            hello: "Bonjour",
+
+            getTemperatureFromCloudWrongValue: "getTemperatureFromCloud: {0} n'est pas une ville supportée par getTemperatureFromCloud",
+
+            experiment: "Expérimenter",
+            validate: "Valider",
+            validate1: "Valider 1",
+            validate2: "Valider 2",
+            validate3: "Valider 3",
+
+            sensorNameBuzzer: "buzzer",
+            sensorNameLed: "led",
+            sensorNameRedLed: "redled",
+            sensorNameGreenLed: "greenled",
+            sensorNameBlueLed: "blueled",
+            sensorNameOrangeLed: "orangeled",
+            sensorNameScreen: "screen",
+            sensorNameIrTrans: "irtran",
+            sensorNameIrRecv: "irrec",
+            sensorNameMicrophone: "micro",
+            sensorNameTemperature: "temp",
+            sensorNameGyroscope: "gyroscope",
+            sensorNameMagnetometer: "magneto",
+            sensorNameDistance: "distance",
+            sensorNameAccelerometer: "accel",
+            sensorNameButton: "button",
+            sensorNameLight: "light",
+            sensorNameStick: "stick",
+            sensorNameServo: "servo",
+            sensorNameHumidity: "humidity",
+            sensorNamePotentiometer: "pot",
+            sensorNameCloudStore: "cloud"
+        },
+        concepts: {
+            quickpi_start: 'Créer un programme',
+            quickpi_validation: 'Valider son programme',
+            quickpi_buzzer: 'Buzzer',
+            quickpi_led: 'LEDs',
+            quickpi_button: 'Boutons et manette',
+            quickpi_screen: 'Écran',
+            quickpi_draw: 'Dessiner',
+            quickpi_range: 'Capteur de distance',
+            quickpi_servo: 'Servomoteur',
+            quickpi_thermometer: 'Thermomètre',
+            quickpi_microphone: 'Microphone',
+            quickpi_light_sensor: 'Capteur de luminosité',
+            quickpi_accelerometer: 'Accéléromètre',
+            quickpi_wait: 'Gestion du temps',
+            quickpi_magneto: 'Magnétomètre',
+            quickpi_ir_receiver: 'Récepteur infrarouge',
+            quickpi_ir_emitter: 'Émetteur infrarouge',
+            quickpi_potentiometer: "Potentiomètre",
+            quickpi_gyroscope: "Gyroscope",
+            quickpi_cloud: 'Stockage dans le cloud'
+        }
+    },
+    es: {
+        label: {
+            // Labels for the blocks
+            sleep: "esperar %1 milisegundos",
+            currentTime: "tiempo transcurrido en milisegundos",
+
+            turnLedOn: "encender el LED",
+            turnLedOff: "apagar el LED",
+
+            setLedState: "cambiar el LED %1 a %2 ",
+            toggleLedState: "invertir el estado del LED %1",
+
+            isLedOn: "LED encendido",
+            isLedOnWithName: "LED %1 encendido",
+
+            setLedBrightness: "Cambiar el brillo de %1 a %2",
+            getLedBrightness: "Obtener el brillo de %1",
+
+            turnBuzzerOn: "encender el zumbador",
+            turnBuzzerOff: "apagar el zumbador",
+            setBuzzerState: "cambiar el zumbador %1 a %2",
+            isBuzzerOn: "zumbador encendido",
+            isBuzzerOnWithName: "zumbador %1 encendido",
+
+            setBuzzerNote: "frequencia de reproducción %2Hz en %1",
+            getBuzzerNote: "frequncia del zumbador %1",
+
+            isButtonPressed: "botón presionado",
+            isButtonPressedWithName: "botón  %1 presionado",
+            waitForButton: "esperar a que se presione un botón",
+            buttonWasPressed: "el botón ha sido presionado",
+
+            displayText: "desplegar texto %1",
+            displayText2Lines: "desplegar texto Linea 1 : %1 Linea 2 : %2",
+
+            readTemperature: "temperatura ambiente",
+            getTemperatureFromCloud: "temperatura de la ciudad %1", // TODO: verify
+
+            readRotaryAngle: "estado del potenciómetro %1",
+            readDistance: "distancia medida por %1",
+            readLightIntensity: "intensidad de luz",
+            readHumidity: "humedad ambiental",
+
+            setServoAngle: "cambiar el ángulo de el servo %1 a %2°",
+            getServoAngle: "ángulo del servo %1",
+
+
+            drawPoint: "dibuja un pixel",
+            isPointSet: "este pixel esta dibujado",
+            drawLine: "linea desde x₀: %1 y₀: %2 hasta x₁: %3 y₁: %4",
+            drawRectangle: "rectángulo  x: %1 y: %2 largo: %3 alto: %4",
+            drawCircle: "circulo x₀: %1 y₀: %2 diametro: %3",
+            clearScreen: "limpiar toda la pantalla",
+            updateScreen: "actualizar pantalla",
+            autoUpdate: "modo de actualización de pantalla automática",
+
+            fill: "establecer el color de fondo en %1",
+            noFill: "no rellenar figuras",
+            stroke: "color de los bordes %1",
+            noStroke: "no dibujar los contornos",
+
+            readAcceleration: "aceleración en m/s² en el eje %1",
+            computeRotation: "cálculo del ángulo de rotación (°) en el acelerómetro %1",
+            readSoundLevel: "volumen de sonido",
+
+            readMagneticForce: "campo magnético (µT) en %1",
+            computeCompassHeading: "dirección de la brújula en (°)",
+
+            readInfraredState: "infrarrojos detectados en %1",
+            setInfraredState: "cambiar emisor de infrarrojos %1 a %2",
+
+            // Gyroscope
+            readAngularVelocity: "velocidad angular (°/s) del guroscopio %1",
+            setGyroZeroAngle: "inicializar el giroscopio a estado cero",
+            computeRotationGyro: "calcular la rotación del giroscopio %1",
+
+            //Internet store
+            connectToCloudStore: "conectar a la nube. Usuario %1 Contraseña %2",
+            writeToCloudStore: "escribir en la nube : Usuario %1 llave %2 valor %3",
+            readFromCloudStore: "leer de la nube : Usuario %1 lave %2",
+
+            // IR Remote
+            readIRMessage: "esperar un mensaje de infrarrojos : %1 durante : %2 ms",
+            sendIRMessage: "enviar el mensaje por infrarrojos %2 por %1",
+            presetIRMessage: "preparar un mensaje de infrarrojos con el nombre %1 y el contenido %2",
+
+            //Continous servo
+            setContinousServoDirection: "cambiar la dirección del servomotor continuo %1 %2",
+        },
+        code: {
+            // Names of the functions in Python, or Blockly translated in JavaScript
+            turnLedOn: "turnLedOn",
+            turnLedOff: "turnLedOff",
+            setLedState: "setLedState",
+
+            isButtonPressed: "isButtonPressed",
+            isButtonPressedWithName : "isButtonPressed",
+            waitForButton: "waitForButton",
+            buttonWasPressed: "buttonWasPressed",
+
+            toggleLedState: "toggleLedState",
+            displayText: "displayText",
+            displayText2Lines: "displayText",
+            readTemperature: "readTemperature",
+            sleep: "sleep",
+            setServoAngle: "setServoAngle",
+            readRotaryAngle: "readRotaryAngle",
+            readDistance: "readDistance",
+            readLightIntensity: "readLightIntensity",
+            readHumidity: "readHumidity",
+            currentTime: "currentTime",
+            getTemperatureFromCloud: "getTemperatureFromCloud",
+
+            isLedOn: "isLedOn",
+            isLedOnWithName: "isLedOn",
+
+            setBuzzerNote: "setBuzzerNote",
+            getBuzzerNote: "getBuzzerNote",
+            setLedBrightness: "setLedBrightness",
+            getLedBrightness: "getLedBrightness",
+            getServoAngle: "getServoAngle",
+
+            setBuzzerState: "setBuzzerState",
+            setBuzzerNote: "setBuzzerNote",
+
+            turnBuzzerOn: "turnBuzzerOn",
+            turnBuzzerOff: "turnBuzzerOff",
+            isBuzzerOn: "isBuzzerOn",
+            isBuzzerOnWithName: "isBuzzerOn",
+
+
+            drawPoint: "drawPoint",
+            isPointSet: "isPointSet",
+            drawLine: "drawLine",
+            drawRectangle: "drawRectangle",
+            drawCircle: "drawCircle",
+            clearScreen: "clearScreen",
+            updateScreen: "updateScreen",
+            autoUpdate: "autoUpdate",
+
+            fill: "fill",
+            noFill: "noFill",
+            stroke: "stroke",
+            noStroke: "noStroke",
+
+
+            readAcceleration: "readAcceleration",
+            computeRotation: "computeRotation",
+
+            readSoundLevel: "readSoundLevel",
+
+
+            readMagneticForce: "readMagneticForce",
+            computeCompassHeading: "computeCompassHeading",
+
+            readInfraredState: "readInfraredState",
+            setInfraredState: "setInfraredState",
+
+
+            // Gyroscope
+            readAngularVelocity: "readAngularVelocity",
+            setGyroZeroAngle: "setGyroZeroAngle",
+            computeRotationGyro: "computeRotationGyro",
+
+            //Internet store
+            connectToCloudStore: "connectToCloudStore",
+            writeToCloudStore: "writeToCloudStore",
+            readFromCloudStore: "readFromCloudStore",                
+
+            // IR Remote
+            readIRMessage: "readIRMessage",
+            sendIRMessage: "sendIRMessage",
+            presetIRMessage: "presetIRMessage",
+
+            //Continous servo
+            setContinousServoDirection: "setContinousServoDirection",
+        },
+        description: {
+            // Descriptions of the functions in Python (optional)
+            turnLedOn: "turnLedOn() enciende el LED",
+            turnLedOff: "turnLedOff() apaga el led LED",
+            isButtonPressed: "isButtonPressed() devuelve True si el boton esta presionado, False de otra manera",
+            isButtonPressedWithName: "isButtonPressed(button) devuelve True si el boton esta presionado, False de otra manera",
+            waitForButton: "waitForButton(button) pausa la ejecución hasta que se presiona el botón",
+            buttonWasPressed: "buttonWasPressed(button) indica si se ha pulsado el botón desde la última llamada a esta función",
+            setLedState: "setLedState(led, state) modifica el estado del LED: True para encenderlo, False para apagarlo",
+            toggleLedState: "toggleLedState(led) invierte el estado del LED",
+            displayText: "displayText(line1, line2) muestra una o dos líneas de texto. line2 es opcional",
+            displayText2Lines: "displayText(line1, line2) muestra una o dos líneas de texto. line2 es opcional",
+            readTemperature: "readTemperature(thermometer) devuelve la temperatura ambiente",
+            sleep: "sleep(milliseconds) pausa la ejecución por un tiempo en milisegundos",
+            setServoAngle: "setServoAngle(servo, angle) cambiar el ángulo del servomotor",
+            readRotaryAngle: "readRotaryAngle(potentiometer) devuelve la posición del potenciómetro",
+            readDistance: "readDistance(distanceSensor) devuelve la distancia medida",
+            readLightIntensity: "readLightIntensity(lightSensor) devuelve la intensidad de la luz",
+            readHumidity: "readHumidity(hygrometer) devuelve la humedad ambiental",
+            currentTime: "currentTime() tiempo en milisegundos desde el inicio del programa",
+
+            setLedBrightness: "setLedBrightness(led, brightness) ajusta la intensidad de la luz del LED",
+            getLedBrightness: "getLedBrightness(led) devuelve la intensidad de luz del LED",
+            getServoAngle: "getServoAngle(servo) devuelve el ángulo del servomotor",
+
+            isLedOn: "isLedOn() devuelve True si el LED está encendido, False si está apagado",
+            isLedOnWithName: "isLedOn(led) devuelve True si el LED está encendido, False si está apagado",
+
+            turnBuzzerOn: "turnBuzzerOn() enciende el zumbador",
+            turnBuzzerOff: "turnBuzzerOff() apaga el zumbador",
+
+            isBuzzerOn: "isBuzzerOn() devuelve True si el zumbador está encendido, False si está apagado",
+            isBuzzerOnWithName: "isBuzzerOn(buzzer) devuelve True si el zumbador está encendido, False si está apagado",
+
+            setBuzzerState: "setBuzzerState(buzzer, state) modifica el estado del zumbador: Verdadero para encendido, Falso para apagado",
+            setBuzzerNote: "setBuzzerNote(buzzer, frequency) suena el zumbador en la frecuencia indicada",
+            getBuzzerNote: "getBuzzerNote(buzzer) devuelve la frecuencia actual del zumbador",
+
+            getTemperatureFromCloud: "getTemperatureFromCloud(town) obtiene la temperatura de la ciudad", // TODO: Verify
+
+            drawPoint: "drawPoint(x, y) dibuja un punto en las coordenadas x, y",
+            isPointSet: "isPointSet(x, y) devuelve True se dibujó sobre el punto x, y, False de lo contrario",
+            drawLine: "drawLine(x0, y0, x1, y1) dibuja una linea empezando desde el punto x0, x1, hasta el punto x1, y1",
+            drawRectangle: "drawRectangle(x0, y0, width, height) dibuja un rectángulo empezando en el punto x0, y0 con el ancho y altura dados",
+            drawCircle: "drawCircle(x0, y0, diameter) dibuja un circulo con centro en x0, y0 y el diametro dado",
+            clearScreen: "clearScreen() limpia toda la pantalla",
+            updateScreen: "updateScreen() actualiza los contenidos de la pantalla",
+            autoUpdate: "autoUpdate(auto) cambia el modo de actualización de pantalla automatica",
+
+            fill: "fill(color) rellenar las figuras con el color dado",
+            noFill: "noFill() no rellenar las figuras",
+            stroke: "stroke(color) dibujar los bordes de las figuras con el color dado",
+            noStroke: "noStroke() no dibujar los bordes de las figuras",
+
+
+            readAcceleration: "readAcceleration(axis) leer la acceleración (m/s²) en el eje (X, Y o Z)",
+            computeRotation: "computeRotation(axis) calcular el ángulo de rotación (°) en el acelerómetro",
+
+            readSoundLevel: "readSoundLevel(port) devuelve el volumen del sonido ambiente",
+
+
+            readMagneticForce: "readMagneticForce(axis) devuelve el campo magnético (µT) en el eje (X, Y o Z)",
+            computeCompassHeading: "computeCompassHeading() devuelve la dirección de la brujula en grados",
+
+            readInfraredState: "readInfraredState() devuelve True si se detecta una señal infrarroja, Falso de otra manera",
+            setInfraredState: "setInfraredState(state) si se le pasa True enciende el transmisor infrarrojo, Falso lo apaga",
+
+            // Gyroscope
+            readAngularVelocity: "readAngularVelocity(axis) devuelve la velocidad angular (°/s) del gyroscopio",
+            setGyroZeroAngle: "setGyroZeroAngle() inicializa el giroscopio a estado cero",
+            computeRotationGyro: "computeRotationGyro(axis) calcula la rotación del giroscopio (°)",
+
+            //Internet store
+            connectToCloudStore: "connectToCloudStore(identifier, password) se conecta a la nube con el usuario y password dados",
+            writeToCloudStore: "writeToCloudStore(identifier, key, value) escribe un valor a un llave en la nube",
+            readFromCloudStore: "readFromCloudStore(identifier, key) devuelve un valor leido de la nube de la llave dada",
+
+            // IR Remote
+            readIRMessage: "readIRMessage(irrec, timeout) espera por un mensaje infrarrojo y lo devuelve durante el tiempo dado en milisegundos",
+            sendIRMessage: "sendIRMessage(irtrans, name) envia un mensaje infrarrojo previamente configurado con el nombre dado",
+            presetIRMessage: "presetIRMessage(name, data) configura un mensaje infrarrojo con el nombre y datos dados",
+
+            //Continous servo
+            setContinousServoDirection: "setContinousServoDirection(servo, direction) cambia la dirección de un servomotor",
+        },
+        constant: {
+        },
+
+        startingBlockName: "Programa", // Name for the starting block
+        messages: {
+            sensorNotFound: "Acceso a un componente inexistente: {0}.",
+            manualTestSuccess: "Prueba automática validada.",
+            testSuccess: "Bien hecho! El resultado es correcto",
+            wrongState: "Prueba fallida: {0} estaba en etado {1} en lugar de {2} en t={3}ms.",
+            wrongStateDrawing: "Prueba fallida: {0} difiere en {1} píxeles de la visualización esperada en t = {2} ms.",
+            wrongStateSensor: "Prueba fallida: su programa no leyó el estado de {0} después de t = {1} ms.",
+            programEnded: "Programa completado.",
+            piPlocked: "El dispositivo está bloqueado. Desbloquear o reiniciar.",
+            cantConnect: "No puede conectarse al dispositivo.",
+            wrongVersion: "El software en tu Raspberry Pi es demasiado antiguo, actualízalo.",
+            sensorInOnlineMode: "No se pueden modificar sensores en modo conectado.",
+            actuatorsWhenRunning: "No se pueden cambiar los actuadores mientras se ejecuta un programa",
+            cantConnectoToUSB: 'Intentado conectarse por USB, conecta tu Raspberry Pi al puerto USB ',
+            cantConnectoToBT: 'Intentando conectarse por Bluetooth, conecta tu Raspberry Pi por Bluetooth ',
+            canConnectoToUSB: "USB Conectado.",
+            canConnectoToBT: "Bluetooth Conectado.",
+            noPortsAvailable: "No hay ningún puerto compatible con {0} disponible (type {1})",
+            sensor: "Sensor",
+            actuator: "Actuador",
+            removeConfirmation: "¿Estás seguro de que deseas quitar este componente?",
+            remove: "Eliminar",
+            keep: "Mantener",
+            minutesago: "Visto por última vez hace {0} minutos",
+            hoursago: "Visto por ultima vez hace mas de una hora",
+            drawing: "dibujando",
+            timeLabel: "Tiempo",
+            seconds: "segundos",
+
+            changeBoard: "Cambiar tablero",
+            connect: "Conectar",
+            install: "Instalar",
+            config: "Configuración",
+
+     
+            raspiConfig: "Configuración de Raspberry Pi",
+            local: "Local",
+            schoolKey: "Ingresa una identificación de la escuela",
+            connectList: "Selecciona un dispositivo para conectarte de la siguiente lista",
+            enterIpAddress: "o ingresa una dirección IP",
+            getPiList: "Obtener la lista",
+            connectTroughtTunnel: "Conéctate a través del túnel de France-ioi",
+
+            connectToLocalhost: "Conectarse al dispositivo que ejecuta este navegador",
+            connectToWindowLocation: "Conéctate a la Raspberry Pi desde la que se carga esta página",
+
+            connectToDevice: "Conectar al dispositivo",
+            disconnectFromDevice: "Desconectar",
+       
+
+            irReceiverTitle: "Recibir códigos infrarrojos",
+            directIrControl: "Apunta tu control remoto a tu tablero QuickPi y presiona uno de los botones",
+            getIrCode: "Recibir un código",
+            closeDialog: "Cerrar",
+
+            irRemoteControl: "Control remoto Infrarrojo",
+            
+            noIrPresets: "Utiliza la función de preparación de mensajes IR para agregar comandos de control remoto",
+            irEnableContinous: "Activar la emisión IR continua",
+            irDisableContinous: "Desactivar la emisión IR continua",
+
+            getTemperatureFromCloudWrongValue: "getTemperatureFromCloud: {0} is not a town supported by getTemperatureFromCloud", // TODO: translate
+
+            up: "arriba",
+            down: "abajo",
+            left: "izquierda",
+            right: "derecha",
+            center: "centro",
+
+            on: "Encendido",
+            off: "Apagado",
+
+            grovehat: "Sombrero Grove para Raspberry Pi",
+            quickpihat: "Sobrero QuickPi de France IOI",
+            pinohat: "Raspberry Pi sin sombrero",
+            led: "LED",
+            blueled: "LED azul",
+            greenled: "LED verde",
+            orangeled: "LED naranja",
+            redled: "LED rojo",
+            buzzer: "Zumbador",
+            grovebuzzer: "Zumbador Grove",
+            quickpibuzzer: "Zumbador passive de QuickPi",
+            servo: "Motor Servo",
+            screen: "Pantalla",
+            grove16x2lcd: "Pantalla Grove 16x2",
+            oled128x32: "Pantalla 128x32 Oled",
+            irtrans: "Transmisor de infrarrojos",
+            button: "Botón",
+            fivewaybutton: "Botón de 5 direcciones",
+            tempsensor: "Sensor de temperatura",
+            groveanalogtempsensor: "Sensor de temperatura analógico Grove",
+            quickpigyrotempsensor: "Sensor de temperaturea en el Acelerometro y Gyroscopio de QuickPi",
+            dht11tempsensor: "Sensor de Temperatura DHT11",
+            potentiometer: "Potenciómetro",
+            lightsensor: "Sensor de luz",
+            distancesensor: "Sensor de distancia",
+            timeofflightranger: "Sensor de distancia por rebote de luz",
+            ultrasonicranger: "Sensor de distancia por últrasonido",
+            humiditysensor: "Sensor de humedad",
+            soundsensor: "Sensor de sonido",
+            accelerometerbmi160: "Acelerómetro (BMI160)",
+            gyrobmi160: "Giroscopio (BMI160)",
+            maglsm303c: "Magnetómetro (LSM303C)",
+            irreceiver: "Receptor de infrarrojos",
+            cloudstore: "Almacenamiento en la nube",
+            addcomponent: "Agregar componente",
+            selectcomponent: "Selecciona un componente para agregar a tu Raspberry Pi y conéctalo a un puerto.",
+            add: "Agregar",
+            builtin: "(incorporado)",
+            chooseBoard: "Elije tu tablero",
+            nameandports: "Nombres y puertos de sensores y actuadores QuickPi",
+            name: "Nombre",
+            port: "Puerto",
+            state: "Estado",
+
+            cloudTypes: {
+                object: "Dictionnaire", // TODO: translate (dictionary)
+                array: "Tableau", // TODO: translate
+                boolean: "Booléen", // TODO: translate
+                number: "Nombre", // TODO: translate
+                string: "Chaîne de caractère" // TODO: translate
+            },
+            cloudMissingKey: "Test échoué : Il vous manque la clé {0} dans le cloud.", // TODO: translate
+            cloudMoreKey: "Test échoué : La clé {0} est en trop dans le cloud", // TODO: translate
+            cloudUnexpectedKeyCorrection: "Test échoué : La clé {0} n'étais pas attendu dans le cloud", // TODO: translate
+            cloudPrimitiveWrongKey: "Test échoué : À la clé {0} du cloud, la valeur {1} était attendue au lieu de {2}", // TODO: translate
+            cloudArrayWrongKey: "Test échoué : Le tableau à la clé {0} du cloud diffère de celui attendu.", // TODO: translate
+            cloudDictionaryWrongKey: "Test échoué : Le dictionnaire à la clé {0} diffère de celui attendu", // TODO: translate
+            cloudWrongType: "Test échoué : Vous avez stocké une valeur de type \"{0}\" dans la clé {1} du cloud, mais le type \"{2}\" était attendu.", // TODO: translate
+
+            cloudKeyNotExists: "La llave no existe : {0} ",
+            cloudWrongValue: "Llave {0}: el valor {2} no es el esperado, {1}.",
+            cloudUnexpectedKey: "La llave {0} no es una llave esperada",
+            hello: "Hola",
+            experiment: "Experimentar",
+            validate: "Validar",
+            validate1: "Validar 1",
+            validate2: "Validar 2",
+            validate3: "Validar 3",
+
+            sensorNameBuzzer: "timbre",
+            sensorNameLed: "led",
+            sensorNameRedLed: "ledrojo",
+            sensorNameGreenLed: "ledverde",
+            sensorNameBlueLed: "ledazul",
+            sensorNameScreen: "pantalla",
+            sensorNameIrTrans: "tranir",
+            sensorNameIrRecv: "recir",
+            sensorNameMicrophone: "micro",
+            sensorNameTemperature: "temp",
+            sensorNameGyroscope: "gyro",
+            sensorNameMagnetometer: "magneto",
+            sensorNameDistance: "distancia",
+            sensorNameAccelerometer: "acel",
+            sensorNameButton: "boton",
+            sensorNameLight: "luz",
+            sensorNameStick: "stick",
+            sensorNameServo: "servo",
+            sensorNameHumidity: "humedad",
+            sensorNamePotentiometer: "pot",
+            sensorNameCloudStore: "nube",
+        },
+        concepts: {
+            quickpi_start: 'Crea tu primer programa y ejecútalo',
+            quickpi_validation: 'Prueba y valida tus programas',
+            quickpi_buzzer: 'Zumbador',
+            quickpi_led: 'LEDs o diodos electroluminiscentes',
+            quickpi_button: 'Botón',
+            quickpi_screen: 'Pantalla',
+            quickpi_draw: 'Dibujar sobre la pantalla',
+            quickpi_range: 'Sensor de distancia',
+            quickpi_servo: 'Servo motor',
+            quickpi_thermometer: 'Termómetro',
+            quickpi_microphone: 'Micrófono',
+            quickpi_light_sensor: 'Sensor de luz',
+            quickpi_accelerometer: 'Acelerómetro',
+            quickpi_wait: 'Gestión del tiempo',
+            quickpi_magneto: 'Magnetómetro', // TODO: verify
+            quickpi_ir_receiver: 'Receptor de infrarrojos', // TODO: verify
+            quickpi_ir_emitter: 'Emisor de infrarrojos', // TODO: verify
+            quickpi_potentiometer: "Potenciómetro", // TODO: verify
+            quickpi_gyroscope: "giroscopio", // TODO: verify
+            quickpi_cloud: 'Almacenamiento en la nube'
+        }
+    },
+    it: { // Italian strings // TODO
+        label: {
+            // Labels for the blocks
+            sleep: "attendi %1 millisecondei",
+            currentTime: "tempo calcolato in millisecondi",
+
+            turnLedOn: "accendi il LED",
+            turnLedOff: "spegni il LED",
+
+            setLedState: "passa il LED da %1 a %2 ",
+            toggleLedState: "inverti il LED %1",
+
+            isLedOn: "LED acceso",
+            isLedOnWithName: "LED %1 acceso",
+
+            setLedBrightness: "imposta la luminosità da %1 a %2",
+            getLedBrightness: "leggi la luminosità di %1",
+
+            turnBuzzerOn: "accendi il cicalino",
+            turnBuzzerOff: "spegni il cicalino",
+            setBuzzerState: "imposta il cicalino %1 a %2",
+            isBuzzerOn: "cicalino acceso",
+            isBuzzerOnWithName: "cicalino %1 acceso",
+
+            setBuzzerNote: "suona la frequenza %2Hz su %1",
+            getBuzzerNote: "frequenza del cicalino %1",
+
+            isButtonPressed: "pulsante premuto",
+            isButtonPressedWithName: "pulsante %1 premuto",
+            waitForButton: "attendi una pressione sul pulsante",
+            buttonWasPressed: "il pulsante è stato premuto",
+
+            displayText: "mostra %1",
+            displayText2Lines: "mostra Riga 1 : %1 Riga 2 : %2",
+
+            readTemperature: "temperatura ambiente",
+            getTemperatureFromCloud: "temperatura della cità %1", // TODO: verify
+
+            readRotaryAngle: "stato del potenziometro %1",
+            readDistance: "distanza misurata all'%1",
+            readLightIntensity: "intensità luminosa",
+            readHumidity: "umidità ambiente",
+
+            setServoAngle: "metti il servomotore %1 all'angolo %2",
+            getServoAngle: "angolo del servomotore %1",
+
+            setContinousServoDirection: "imposta la direzione continua del servo %1 %2",
+
+            drawPoint: "draw pixel",
+            isPointSet: "is pixel set in screen",
+            drawLine: "riga x₀: %1 y₀: %2 x₁: %3 y₁: %4",
+            drawRectangle: "rettangolo x₀: %1 y₀: %2 larghezza₀: %3 altezza₀: %4",
+            drawCircle: "cerchio x₀: %1 y₀: %2 diametro₀: %3",
+            clearScreen: "cancella tutta la schermata",
+            updateScreen: "aggiorna schermata",
+            autoUpdate: "aggiornamento automatico della schermata",
+
+            fill: "metti il colore di fondo a %1",
+            noFill: "non riempire le forme",
+            stroke: "impostare il colore del percorso a %1",
+            noStroke: "non disegnare i contorni",
+
+            readAcceleration: "accelerazione in (m/s²) nell'asse %1",
+            computeRotation: "calcolo dell'angolo di rotazione (°) sull'accelerometro %1",
+            readSoundLevel: "volume sonoro",
+
+            readMagneticForce: "campo magnetico (µT) su %1",
+            computeCompassHeading: "direzione della bussola in (°)",
+
+            readInfraredState: "infrarosso rilevato su %1",
+            setInfraredState: "imposta il trasmettitore a infrarossi %1 a %2",
+
+            // Gyroscope
+            readAngularVelocity: "velocità angolare (°/s) del giroscopio %1",
+            setGyroZeroAngle: "inizializza il giroscopio allo stato zero",
+            computeRotationGyro: "calcola la rotazione del giroscopio %1",
+
+            //Internet store
+            connectToCloudStore: "connettersi al cloud. Nome utente %1 Password %2",
+            writeToCloudStore: "scrivi nel cloud : id %1 chiave %2 valore %3",
+            readFromCloudStore: "leggi nel cloud : id %1 chiave %2",
+
+            // IR Remote
+            readIRMessage: "attendi un messaggio IR nome : %1 per : %2 ms",
+            sendIRMessage: "invio del messaggio prepato IR nominato %2 su %1",
+            presetIRMessage: "prepara un messaggio IR con il nome %1 e contenuto %2",
+        },
+        code: {
+            // Names of the functions in Python, or Blockly translated in JavaScript
+            turnLedOn: "turnLedOn",
+            turnLedOff: "turnLedOff",
+            setLedState: "setLedState",
+
+            isButtonPressed: "isButtonPressed",
+            isButtonPressedWithName : "isButtonPressed",
+            waitForButton: "waitForButton",
+            buttonWasPressed: "buttonWasPressed",
+
+            toggleLedState: "toggleLedState",
+            displayText: "displayText",
+            displayText2Lines: "displayText",
+            readTemperature: "readTemperature",
+            sleep: "sleep",
+            setServoAngle: "setServoAngle",
+            readRotaryAngle: "readRotaryAngle",
+            readDistance: "readDistance",
+            readLightIntensity: "readLightIntensity",
+            readHumidity: "readHumidity",
+            currentTime: "currentTime",
+            getTemperatureFromCloud: "getTemperatureFromCloud",
+
+            isLedOn: "isLedOn",
+            isLedOnWithName: "isLedOn",
+
+            setBuzzerNote: "setBuzzerNote",
+            getBuzzerNote: "getBuzzerNote",
+            setLedBrightness: "setLedBrightness",
+            getLedBrightness: "getLedBrightness",
+            getServoAngle: "getServoAngle",
+
+            setBuzzerState: "setBuzzerState",
+            setBuzzerNote: "setBuzzerNote",
+
+            turnBuzzerOn: "turnBuzzerOn",
+            turnBuzzerOff: "turnBuzzerOff",
+            isBuzzerOn: "isBuzzerOn",
+            isBuzzerOnWithName: "isBuzzerOn",
+
+
+            drawPoint: "drawPoint",
+            isPointSet: "isPointSet",
+            drawLine: "drawLine",
+            drawRectangle: "drawRectangle",
+            drawCircle: "drawCircle",
+            clearScreen: "clearScreen",
+            updateScreen: "updateScreen",
+            autoUpdate: "autoUpdate",
+
+            fill: "fill",
+            noFill: "noFill",
+            stroke: "stroke",
+            noStroke: "noStroke",
+
+
+            readAcceleration: "readAcceleration",
+            computeRotation: "computeRotation",
+
+            readSoundLevel: "readSoundLevel",
+
+
+            readMagneticForce: "readMagneticForce",
+            computeCompassHeading: "computeCompassHeading",
+
+            readInfraredState: "readInfraredState",
+            setInfraredState: "setInfraredState",
+
+
+            // Gyroscope
+            readAngularVelocity: "readAngularVelocity",
+            setGyroZeroAngle: "setGyroZeroAngle",
+            computeRotationGyro: "computeRotationGyro",
+
+            //Internet store
+            connectToCloudStore: "connectToCloudStore",
+            writeToCloudStore: "writeToCloudStore",
+            readFromCloudStore: "readFromCloudStore",                
+
+            // IR Remote
+            readIRMessage: "readIRMessage",
+            sendIRMessage: "sendIRMessage",
+            presetIRMessage: "presetIRMessage",
+
+            //Continous servo
+            setContinousServoDirection: "setContinousServoDirection",
+        },
+        description: {
+            // Descriptions of the functions in Python (optional)
+            turnLedOn: "turnLedOn() accendi il LED",
+            turnLedOff: "turnLedOff() spegni il LED",
+            isButtonPressed: "isButtonPressed() riporta True se il pulsante è premuto, False nel caso contrario",
+            isButtonPressedWithName: "isButtonPressed(button) riporta True se il pulsante è premuto, False se non lo è",
+            waitForButton: "waitForButton(button) sospende l'esecuzione fino a quando non viene premuto il pulsante",
+            buttonWasPressed: "buttonWasPressed(button) indica se il tasto è stato premuto dall'ultima volta che questa funzione è stata utilizzata.",
+            setLedState: "setLedState(led, state) modifica lo stato del LED : True per accenderlo, False per spegnerlo",
+            toggleLedState: "toggleLedState(led) inverte lo stato del LED",
+            displayText: "displayText(line1, line2) mostra una o due righe di testo. La line2 è opzionale",
+            displayText2Lines: "displayText(line1, line2) mostra una o due righe di testo. La line2 è opzionale",
+            readTemperature: "readTemperature(thermometer) riporta la temperatura ambiente",
+            sleep: "sleep(milliseconds) mette in pausa l'esecuzione per una durata in ms",
+            setServoAngle: "setServoAngle(servo, angle) cambia l'angolo del servomotore",
+            readRotaryAngle: "readRotaryAngle(potentiometer) riporta la posizione del potenziometro",
+            readDistance: "readDistance(distanceSensor) riporta la distanza misurata",
+            readLightIntensity: "readLightIntensity(lightSensor) riporta l'intensità luminosa",
+            readHumidity: "readHumidity(hygrometer) riporta l'umidità dell'ambiente",
+            currentTime: "currentTime() tempo in millisecondi dall'avvio del programma",
+
+            setLedBrightness: "setLedBrightness(led, brightness) regola l'intensità luminosa del LED",
+            getLedBrightness: "getLedBrightness(led) riporta l'intensità luminosa del LED",
+            getServoAngle: "getServoAngle(servo) riporta l'angolo del servomotore",
+
+            isLedOn: "isLedOn() riporta True se il LED è acceso, False se è spento",
+            isLedOnWithName: "isLedOn(led) riporta True se il LED è acceso, False se è spento",
+
+            turnBuzzerOn: "turnBuzzerOn() accende il cicalino",
+            turnBuzzerOff: "turnBuzzerOff() spegne il cicalino",
+
+            isBuzzerOn: "isBuzzerOn() riporta True se il cicalino è acceso, False se è spento",
+            isBuzzerOnWithName: "isBuzzerOn(buzzer) riporta True se il cicalino è acceso, False se è spento",
+
+            setBuzzerState: "setBuzzerState(buzzer, state) modifica lo stato del cicalino: True per acceso, False nel caso contrario",
+            setBuzzerNote: "setBuzzerNote(buzzer, frequency) fa suonare il cicalino alla frequenza indicata",
+            getBuzzerNote: "getBuzzerNote(buzzer) riporta la frequenza attuale del cicalino",
+
+            getTemperatureFromCloud: "getTemperatureFromCloud(town) get the temperature from the town given", // TODO: Translate
+
+            drawPoint: "drawPoint(x, y) draw a point of 1 pixel at given coordinates", // TODO: Translate
+            isPointSet: "isPointSet(x, y) return True if the point at coordinates x, y is on", // TODO: Translate
+            drawLine: "drawLine(x0, y0, x1, y1) draw a line starting at x0, y0 to x1, y1", // TODO: Translate
+            drawRectangle: "drawRectangle(x0, y0, width, height) disegna un rettangolo, con angolo in alto a sinistra (x0,y0)",
+            drawCircle: "drawCircle(x0, y0, diameter) draw a circle of center x0, y0 and of given diameter", // TODO: Translate
+            clearScreen: "clearScreen() cancella il contenuto della schermata",
+            updateScreen: "updateScreen() update screen content", // TODO: Translate
+            autoUpdate: "autoUpdate(auto) change the screen actualisation mode", // TODO: Translate
+
+            fill: "fill(color) fill the shapes with the color given", // TODO: Translate
+            noFill: "noFill() do not fill the shapes", // TODO: Translate
+            stroke: "stroke(color) draw the borders of shapes with the color given", // TODO: Translate
+            noStroke: "noStroke() do not draw the borders of shapes", // TODO: Translate
+
+
+            readAcceleration: "readAcceleration(axis) read the acceleration (m/s²) in the axis (X, Y or Z)", // TODO: Translate
+            computeRotation: "computeRotation(axis) compute the rotation angle (°) in the accelerometro", // TODO: Translate
+
+            readSoundLevel: "readSoundLevel(port) return the ambien sound", // TODO: Translate
+
+
+            readMagneticForce: "readMagneticForce(axis) return the magnetic force (µT) in the axis (X, Y ou Z)", // TODO : Translate
+            computeCompassHeading: "computeCompassHeading() return the compass direction in degres", // TODO: Translate
+
+            readInfraredState: "readInfraredState(IRReceiver) riporta True se viene rilevato un segnale infrarosso, False nel caso in contrario",
+            setInfraredState: "setInfraredState(IREmitter, state) modifica lo stato del trasmettitore : True per accenderlo, False per spegnerlo",
+
+            // Gyroscope
+            readAngularVelocity: "readAngularVelocity(axis) return the angular speed (°/s) of the gyroscope", // TODO: Translate
+            setGyroZeroAngle: "setGyroZeroAngle() initialize the gyroscope at the 0 state", // TODO: Translate
+            computeRotationGyro: "computeRotationGyro(axis) compute the rotations of the gyroscope in degres", // TODO: Translate
+
+            //Internet store
+            connectToCloudStore: "connectToCloudStore(identifier, password) connect to cloud store with the given username and password", // TODO: Translate
+            writeToCloudStore: "writeToCloudStore(identifier, key, value) write a value at a key to the cloud", // TODO: Translate
+            readFromCloudStore: "readFromCloudStore(identifier, key) read the value at the given key from the cloud", // TODO: Translate
+
+            // IR Remote
+            readIRMessage: "readIRMessage(irrec, timeout) wait for an IR message during the given time and then return it", // TODO: Translate
+            sendIRMessage: "sendIRMessage(irtrans, name) send an IR message previously configured with the given name", // TODO: Translate
+            presetIRMessage: "presetIRMessage(name, data) configure an IR message with the given name and data", // TODO: Translate
+
+            //Continous servo
+            setContinousServoDirection: "setContinousServoDirection(servo, direction)",           
+        },
+        constant: {
+        },
+
+        startingBlockName: "Programma", // Name for the starting block
+        messages: {
+            sensorNotFound: "Accesso a un sensore o attuatore inesistente : {0}.",
+            manualTestSuccess: "Test automatico convalidato.",
+            testSuccess: "Bravo ! Il risultato è corretto",
+            wrongState: "Test fallito : {0} è rimasto nello stato {1} invece di {2} a t={3}ms.",
+            wrongStateDrawing: "Test fallito : {0} differisce di {1} pixel rispetto alla visualizzazione prevista a t={2}ms.",
+            wrongStateSensor: "Test fallito : il tuo programma non ha letto lo stato di {0} dopo t={1}ms.",
+            programEnded: "programma terminato.",
+            piPlocked: "L'unità è bloccata. Sbloccare o riavviare.",
+            cantConnect: "Impossibile connettersi all'apparecchio.",
+            wrongVersion: "Il tuo Raspberry Pi è una versione troppo vecchia, aggiornala.",
+            sensorInOnlineMode: "Non è possibile agire sui sensori in modalità connessa.",
+            actuatorsWhenRunning: "Impossibile modificare gli azionatori durante l'esecuzione di un programma",
+            cantConnectoToUSB: 'Tentativo di connessione via USB in corso, si prega di collegare il Raspberry alla porta USB. ',
+            cantConnectoToBT: 'Tentativo di connessione via Bluetooth, si prega di collegare il dispositivo al Raspberry via Bluetooth ',
+            canConnectoToUSB: "Connesso via USB.",
+            canConnectoToBT: "Connesso via Bluetooth.",
+            noPortsAvailable: "Non è disponibile alcuna porta compatibile con questo {0} (type {1})",
+            sensor: "sensore",
+            actuator: "azionatore",
+            removeConfirmation: "Sei sicuro di voler rimuovere questo sensore o attuatore?",
+            remove: "Rimuovi",
+            keep: "Tieni",
+            minutesago: "Last seen {0} minutes ago",
+            hoursago: "Last seen more than one hour ago",
+            drawing: "disegno",
+            timeLabel: "Tempo",
+            seconds: "secondi",
+
+            changeBoard: "Cambia scheda",
+            connect: "Connetti",
+            install: "Installa",
+            config: "Config",
+
+     
+            raspiConfig: "Configurazione del Raspberry Pi",
+            local: "Local",
+            schoolKey: "Indica un ID scolastico",
+            connectList: "Seleziona un apparecchio da connettere nel seguente elenco",
+            enterIpAddress: "o inserisci il tuo indirizzo IP",
+            getPiList: "Ottieni l'elenco",
+            connectTroughtTunnel: "Collegamento attraverso il canale France-ioi",
+
+            connectToLocalhost: "Collegamento dell'interfaccia al computer su cui funziona questo browser",
+            connectToWindowLocation: "Connettiti al Rasberry Pi da cui è stata caricata questa pagina",
+
+            connectToDevice: "Connetti l'apparecchio",
+            disconnectFromDevice: "Disconnetti",
+       
+
+            irReceiverTitle: "Ricevi codici infrarossi",
+            directIrControl: "Punta il telecomando verso la scheda QuickPi e premi uno dei tasti.s",
+            getIrCode: "Ricevi un codice",
+            closeDialog: "Chiudi",
+
+            irRemoteControl: "Telecomando IR",
+            
+            noIrPresets: "Si prega di utilizzare la funzione di preparazione dei messaggi IR per aggiungere comandi di controllo remoto.",
+            irEnableContinous: "Attiva la trasmissione IR continua",
+            irDisableContinous: "Disattiva la trasmissione IR continua",
+
+            connectToLocalHost: "Collegamento dell'interfaccia alla periferica su cui funziona questo browser",
+
+            up: "up",
+            down: "down",
+            left: "left",
+            right: "right",
+            center: "center",
+
+            on: "On",
+            off: "Off",
+
+            getTemperatureFromCloudWrongValue: "getTemperatureFromCloud: {0} is not a town supported by getTemperatureFromCloud", // TODO: translate
+
+            grovehat: "Grove Base Hat for Raspberry Pi",
+            quickpihat: "France IOI QuickPi Hat",
+            pinohat: "Raspberry Pi without hat",
+            led: "LED",
+            blueled: "LED blu",
+            greenled: "LED verde",
+            orangeled: "LED arancione",
+            redled: "LED rosso",
+            buzzer: "Buzzer",
+            grovebuzzer: "Grove Buzzer",
+            quickpibuzzer: "Quick Pi Passive Buzzer",
+            servo: "Servomotore",
+            screen: "Screen",
+            grove16x2lcd: "Grove 16x2 LCD",
+            oled128x32: "128x32 Oled Screen",
+            irtrans: "IR Transmiter",
+            button: "Button",
+            fivewaybutton: "5 way button",
+            tempsensor: "Temperature sensor",
+            groveanalogtempsensor: "Grove Analog tempeature sensor",
+            quickpigyrotempsensor: "Quick Pi Accelerometer+Gyroscope temperature sensor",
+            dht11tempsensor: "DHT11 Tempeature Sensor",
+            potentiometer: "Potentiometer",
+            lightsensor: "Light sensor",
+            distancesensor: "Sensore di distanza",
+            timeofflightranger: "Time of flight distance sensor",
+            ultrasonicranger: "Sensore di distanza a ultrasuoni",
+            humiditysensor: "Humidity sensor",
+            soundsensor: "Sound sensor",
+            accelerometerbmi160: "Accelerometer sensor (BMI160)",
+            gyrobmi160: "Gyropscope sensor (BMI160)",
+            maglsm303c: "Magnetometer sensor (LSM303C)",
+            irreceiver: "IR Receiver",
+            cloudstore: "Cloud Store",
+            addcomponent: "Aggiungi un componente",
+            selectcomponent: "Seleziona un componente da aggiungere al tuo Raspberry Pi e collegalo a una porta.",
+            add: "Aggiungi",
+            builtin: "(builtin)",
+            chooseBoard: "Scegli la tua scheda",
+            nameandports: "Nomi e porte dei sensori e azionatori QuickPi",
+            name: "Name",
+            port: "Port",
+            state: "State",
+
+            cloudTypes: {
+                object: "Dictionnaire", // TODO: translate (dictionary)
+                array: "Tableau", // TODO: translate
+                boolean: "Booléen", // TODO: translate
+                number: "Nombre", // TODO: translate
+                string: "Chaîne de caractère" // TODO: translate
+            },
+            cloudMissingKey: "Test échoué : Il vous manque la clé {0} dans le cloud.", // TODO: translate
+            cloudMoreKey: "Test échoué : La clé {0} est en trop dans le cloud", // TODO: translate
+            cloudUnexpectedKeyCorrection: "Test échoué : La clé {0} n'étais pas attendu dans le cloud", // TODO: translate
+            cloudPrimitiveWrongKey: "Test échoué : À la clé {0} du cloud, la valeur {1} était attendue au lieu de {2}", // TODO: translate
+            cloudArrayWrongKey: "Test échoué : Le tableau à la clé {0} du cloud diffère de celui attendu.", // TODO: translate
+            cloudDictionaryWrongKey: "Test échoué : Le dictionnaire à la clé {0} diffère de celui attendu", // TODO: translate
+            cloudWrongType: "Test échoué : Vous avez stocké une valeur de type \"{0}\" dans la clé {1} du cloud, mais le type \"{2}\" était attendu.", // TODO: translate
+
+            cloudKeyNotExists: "La chiave non esiste : {0} ",
+            cloudWrongValue: "Chiave {0} : il valore {2} non è quello previsto, {1}.",
+            cloudUnexpectedKey: "La chiave {0} non è una chiave prevista",
+            hello: "Buongiorno",
+
+            experiment: "Testa",
+            validate: "Convalida",
+            validate1: "Convalida 1",
+            validate2: "Convalida 2",
+            validate3: "Convalida 3",
+
+            sensorNameBuzzer: "buzzer",
+            sensorNameLed: "led",
+            sensorNameRedLed: "redled",
+            sensorNameGreenLed: "greenled",
+            sensorNameBlueLed: "blueled",
+            sensorNameOrangeLed: "orangeled",
+            sensorNameScreen: "screen",
+            sensorNameIrTrans: "irtran",
+            sensorNameIrRecv: "irrec",
+            sensorNameMicrophone: "micro",
+            sensorNameTemperature: "temp",
+            sensorNameGyroscope: "gyroscope",
+            sensorNameMagnetometer: "magneto",
+            sensorNameDistance: "distance",
+            sensorNameAccelerometer: "accel",
+            sensorNameButton: "button",
+            sensorNameLight: "light",
+            sensorNameStick: "stick",
+            sensorNameServo: "servo",
+            sensorNameHumidity: "humidity",
+            sensorNamePotentiometer: "pot",
+            sensorNameCloudStore: "cloud",
+        },
+        concepts: {
+            quickpi_start: 'Crea un programma',
+            quickpi_validation: 'Convalida il tuo programma',
+            quickpi_buzzer: 'Cicalino',
+            quickpi_led: 'LED',
+            quickpi_button: 'Pulsanti e joystick',
+            quickpi_screen: 'Schermo',
+            quickpi_draw: 'Disegna',
+            quickpi_range: 'Sensore di distanza',
+            quickpi_servo: 'Servomotore',
+            quickpi_thermometer: 'Termometro',
+            quickpi_microphone: 'Microfono',
+            quickpi_light_sensor: 'Sensore di luminosità',
+            quickpi_accelerometer: 'Accelerometro',
+            quickpi_wait: 'Gestione del tempo',
+            quickpi_magneto: 'Magnetometro', // TODO: verify
+            quickpi_ir_receiver: 'Ricevitore a infrarossi', // TODO: verify
+            quickpi_ir_emitter: 'Emettitore a infrarossi', // TODO: verify
+            quickpi_potentiometer: "Potenziometro", // TODO: verify
+            quickpi_gyroscope: "giroscopio", // TODO: verify
+            quickpi_cloud: 'Memorizzazione nel cloud'
+        }
+    },
+    
+    none: {
+        comment: {
+            // Comments for each block, used in the auto-generated documentation for task writers
+            turnLedOn: "Turns on a light connected to Raspberry",
+            turnLedOff: "Turns off a light connected to Raspberry",
+            isButtonPressed: "Returns the state of a button, Pressed means True and not pressed means False",
+            waitForButton: "Stops program execution until a button is pressed",
+            buttonWasPressed: "Returns true if the button has been pressed and will clear the value",
+            setLedState: "Change led state in the given port",
+            toggleLedState: "If led is on, turns it off, if it's off turns it on",
+            isButtonPressedWithName: "Returns the state of a button, Pressed means True and not pressed means False",
+            displayText: "Display text in LCD screen",
+            displayText2Lines: "Display text in LCD screen (two lines)",
+            readTemperature: "Read Ambient temperature",
+            sleep: "pause program execute for a number of seconds",
+            setServoAngle: "Set servo motor to an specified angle",
+            readRotaryAngle: "Read state of potentiometer",
+            readDistance: "Read distance using ultrasonic sensor",
+            readLightIntensity: "Read light intensity",
+            readHumidity: "lire l'humidité ambiante",
+            currentTime: "returns current time",
+            setBuzzerState: "sonnerie",
+            setBuzzerNote: "sonnerie note",
+            getTemperatureFromCloud: "Get temperature from town",
+            setBuzzerNote: "Set buzzer note",
+            getBuzzerNote: "Get buzzer note",
+            setLedBrightness: "Set Led Brightness",
+            getLedBrightness: "Get Led Brightness",
+            getServoAngle: "Get Servo Angle",
+            isLedOn: "Get led state",
+            isLedOnWithName: "Get led state",
+            turnBuzzerOn: "Turn Buzzer on",
+            turnBuzzerOff: "Turn Buzzer off",
+            isBuzzerOn: "Is Buzzer On",
+            isBuzzerOnWithName: "get buzzer state",
+            drawPoint: "drawPoint",
+            isPointSet: "isPointSet",
+            drawLine: "drawLine",
+            drawRectangle: "drawRectangle",
+            drawCircle: "drawCircle",
+            clearScreen: "clearScreen",
+            updateScreen: "updateScreen",
+            autoUpdate: "autoUpdate",
+            fill: "fill",
+            noFill: "noFill",
+            stroke: "stroke",
+            noStroke: "noStroke",
+            readAcceleration: "readAcceleration",
+            computeRotation: "computeRotation",
+            readSoundLevel: "readSoundLevel",
+            readMagneticForce: "readMagneticForce",
+            computeCompassHeading: "computeCompassHeading",
+            readInfraredState: "readInfraredState",
+            setInfraredState: "setInfraredState",
+
+            // Gyroscope
+            readAngularVelocity: "readAngularVelocity",
+            setGyroZeroAngle: "setGyroZeroAngle",
+            computeRotationGyro: "computeRotationGyro",
+
+            //Internet store
+            connectToCloudStore: "connectToCloudStore",
+            writeToCloudStore: "writeToCloudStore",
+            readFromCloudStore: "readFromCloudStore",
+
+            // IR Remote
+            readIRMessage: "readIRMessage",
+            sendIRMessage: "sendIRMessage",
+            presetIRMessage: "presetIRMessage",
+
+            //Continous servo  
+            setContinousServoDirection: "setContinousServoDirection",
+        }
+    }
+}
+
+
+var buzzerSound = {
+    context: null,
+    default_freq: 200,
+    channels: {},
+    muted: {},
+
+    getContext: function() {
+        if(!this.context) {
+            this.context = ('AudioContext' in window) || ('webkitAudioContext' in window) ? new(window.AudioContext || window.webkitAudioContext)() : null;
+        }
+        return this.context;
+    },
+
+    startOscillator: function(freq) {
+        var o = this.context.createOscillator();
+        o.type = 'sine';
+        o.frequency.value = freq;
+        o.connect(this.context.destination);
+        o.start();
+        return o;
+    },
+
+
+    start: function(channel, freq=this.default_freq) {
+        if(!this.channels[channel]) {
+            this.channels[channel] = {
+                muted: false
+            }
+        }
+        if(this.channels[channel].freq === freq) {
+            return;
+        }
+        var context = this.getContext();
+        if(!context) {
+            return;
+        }
+        this.stop(channel);
+
+        if (freq == 0 || this.channels[channel].muted) {
+            return;
+        }
+        
+        this.channels[channel].oscillator = this.startOscillator(freq);
+        this.channels[channel].freq = freq;
+    },
+
+    stop: function(channel) {
+        if(this.channels[channel]) {
+            this.channels[channel].oscillator && this.channels[channel].oscillator.stop();
+            delete this.channels[channel].oscillator;
+            delete this.channels[channel].freq;
+        }
+    },
+
+    mute: function(channel) {
+        if(!this.channels[channel]) {
+            this.channels[channel] = {
+                muted: true
+            }
+            return;
+        }
+        this.channels[channel].muted = true;
+        this.channels[channel].oscillator && this.channels[channel].oscillator.stop();
+        delete this.channels[channel].oscillator;
+    },
+
+    unmute: function(channel) {
+        if(!this.channels[channel]) {
+            this.channels[channel] = {
+                muted: false
+            }
+            return;
+        }
+        this.channels[channel].muted = false;
+        if(this.channels[channel].freq) {
+            this.channels[channel].oscillator = this.startOscillator(this.channels[channel].freq);
+        }
+    },
+
+    isMuted: function(channel) {
+        if(this.channels[channel]) {
+            return this.channels[channel].muted;
+        }
+        return false;
+    },
+
+    stopAll: function() {
+        for(var channel in this.channels) {
+            if(this.channels.hasOwnProperty(channel)) {
+                this.stop(channel);
+            }
+        }
+    }
+}
+
+
+
+var gyroscope3D = (function() {
+
+    var instance;
+
+    function createInstance(width, height) {
+        var canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+
+        // debug code start
+        /*
+        canvas.style.zIndex = 99999;
+        canvas.style.position = 'fixed';
+        canvas.style.top = '0';
+        canvas.style.left = '0';
+        document.body.appendChild(canvas);
+        */
+        // debug code end
+
+        try {
+            var renderer = new zen3d.Renderer(canvas, { antialias: true, alpha: true });
+        } catch(e) {
+            return false;
+        }
+        
+        renderer.glCore.state.colorBuffer.setClear(0, 0, 0, 0);
+    
+        var scene = new zen3d.Scene();
+    
+        var lambert = new zen3d.LambertMaterial();
+        lambert.diffuse.setHex(0x468DDF);            
+       
+        var cube_geometry = new zen3d.CubeGeometry(10, 2, 10);
+        var cube = new zen3d.Mesh(cube_geometry, lambert);
+        cube.position.x = 0;
+        cube.position.y = 0;
+        cube.position.z = 0;
+        scene.add(cube);
+    
+        var ambientLight = new zen3d.AmbientLight(0xffffff, 2);
+        scene.add(ambientLight);
+    
+        var pointLight = new zen3d.PointLight(0xffffff, 1, 100);
+        pointLight.position.set(-20, 40, 10);
+        scene.add(pointLight);            
+    
+        var camera = new zen3d.Camera();
+        camera.position.set(0, 13, 13);
+        camera.lookAt(new zen3d.Vector3(0, 0, 0), new zen3d.Vector3(0, 1, 0));
+        camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
+        scene.add(camera);    
+    
+    
+        return {
+            resize: function(width, height) {
+                camera.setPerspective(
+                    45 / 180 * Math.PI, 
+                    width / height, 
+                    1, 
+                    1000
+                );
+            },
+    
+            render: function(ax, ay, az) {
+                cube.euler.x = Math.PI * ax / 360;
+                cube.euler.y = Math.PI * ay / 360;
+                cube.euler.z = Math.PI * az / 360;
+                renderer.render(scene, camera);
+                return canvas;
+            }
+        }
+    }
+
+    return {
+        getInstance: function(width, height) {
+            if(!instance) {
+                instance = createInstance(width, height);
+            } else {
+                instance.resize(width, height)
+            }
+            return instance;
+        }
+    }
+
+})();
+
+
+
+function QuickStore(rwidentifier, rwpassword) {
+    var url = 'https://cloud.quick-pi.org';
+    var connected = (rwidentifier === undefined);
+
+    function post(path, data, callback) {
+        $.ajax({
+            type: 'POST',
+            url: url + path,
+            crossDomain: true,
+            data: data,
+            dataType: 'json',
+            success: callback
+        });
+    }
+
+    return {
+        connected: rwpassword,
+        read: function(identifier, key, callback) {
+            var data = {
+                    prefix: identifier,
+                    key: key
+            };
+            post('/api/data/read', data, callback);
+        },
+
+        write: function(identifier, key, value, callback) {
+            if (identifier != rwidentifier)
+            {
+                callback({
+                    sucess: false,
+                    message: "Écriture sur un identifiant en lecture seule : " + identifier,
+                });
+            }
+            else {
+                var data = {
+                    prefix: identifier,
+                    password: rwpassword,
+                    key: key,
+                    value: JSON.stringify(value)
+                };
+                post('/api/data/write', data, callback);
+            }
+        }
+    }
+}
+
+// This is a template of library for use with quickAlgo.
+var getContext = function (display, infos, curLevel) {
+
+    // Local language strings for each language
+    var introControls = null;
+
+    // Create a base context
+    var context = quickAlgoContext(display, infos);
+
+    // we set the lib involved to Quick-Pi
+    context.title = "Quick-Pi";
+
+    // Import our localLanguageStrings into the global scope
+    var strings = context.setLocalLanguageStrings(quickPiLocalLanguageStrings);
+
+    context.disableAutoCompletion = false;
+
+    // Some data can be made accessible by the library through the context object
+    context.quickpi = {};
+
+
+    // List of concepts to be included by conceptViewer
+    context.getConceptList = function() {
+        var conceptList = [{id: 'language', ignore: true}];
+        var quickPiConceptList = [
+            {
+                id: 'quickpi_start',
+                isBase: true,
+                order: 1,
+                python: []
+            },
+            {
+                id: 'quickpi_validation',
+                isBase: true,
+                order: 2,
+                python: []
+            },
+            {
+                id: 'quickpi_buzzer',
+                order: 200,
+                python: ['setBuzzerState', 'setBuzzerNote','turnBuzzerOn','turnBuzzerOff', 'setBuzzerState',
+                    'getBuzzerNote', 'isBuzzerOn']
+            },
+            {
+                id: 'quickpi_led',
+                order: 201,
+                python: ['setLedState','toggleLedState','turnLedOn','turnLedOff', 'setLedBrightness', 'getLedBrightness', 'isLedOn']
+            },
+            {
+                id: 'quickpi_button',
+                order: 202,
+                python: ['isButtonPressed', 'isButtonPressedWithName', 'waitForButton', 'buttonWasPressed']
+            },  
+            {   
+                id: 'quickpi_screen',
+                order: 203,
+                python: ['displayText']
+            },
+            {   
+                id: 'quickpi_draw',
+                order: 203,
+                python: ['drawRectangle','drawLine','drawCircle', 'drawPoint', 'clearScreen', 'fill', 'noFill',
+                    'stroke', 'noStroke','updateScreen', 'autoUpdate', 'isPointSet']
+            },
+            {
+                id: 'quickpi_range',
+                order: 204,
+                python: ['readDistance']
+            },
+            {
+                id: 'quickpi_servo',
+                order: 205,
+                python: ['setServoAngle', 'getServoAngle']
+            },
+            {
+                id: 'quickpi_thermometer',
+                order: 206,
+                python: ['readTemperature']
+            },
+            {
+                id: 'quickpi_microphone',
+                order: 207,
+                python: ['readSoundLevel']
+            },
+            {
+                id: 'quickpi_light_sensor',
+                order: 208,
+                python: ['readLightIntensity']
+            },
+            {
+                id: 'quickpi_accelerometer',
+                order: 209,
+                python: ['readAcceleration', 'computeRotation']
+            },
+            {
+                id: 'quickpi_wait',
+                order: 250,
+                python: ['sleep', 'currentTime']
+            },
+            {
+                id: 'quickpi_magneto',
+                order: 210,
+                python: ['readMagneticForce', 'computeCompassHeading']
+            },
+            {
+                id: 'quickpi_ir_receiver',
+                order: 211,
+                python: ['readInfraredState', 'readIRMessage']
+            },
+            {
+                id: "quickpi_ir_emitter",
+                order: 212,
+                python: ["setInfraredState", "sendIRMessage", "presetIRMessage"]
+            },
+            {
+                id: "quickpi_potentiometer",
+                order: 213,
+                python: ["readRotaryAngle"]
+            },
+            {
+                id: "quickpi_gyroscope",
+                order: 214,
+                python: ["readAngularVelocity", "setGyroZeroAngle", "computeRotationGyro"]
+            },
+            {
+                id: 'quickpi_cloud',
+                order: 220,
+                python: ['writeToCloudStore','connectToCloudStore','readFromCloudStore', 'getTemperatureFromCloud']
+            }
+        ];
+
+        if(window.stringsLanguage == 'fr' || !strings.concepts) {
+            var conceptStrings = quickPiLocalLanguageStrings.fr.concepts;
+            var conceptIndex = 'quickpi.html';
+        } else {
+            var conceptStrings = strings.concepts;
+            var conceptIndex = 'quickpi_' + window.stringsLanguage + '.html';
+        }
+        var conceptBaseUrl = 'https://static4.castor-informatique.fr/help/'+conceptIndex;
+
+        for(var i = 0; i < quickPiConceptList.length; i++) {
+            var concept = quickPiConceptList[i];
+            concept.name = conceptStrings[concept.id];
+            concept.url = conceptBaseUrl + '#' + concept.id;
+            if(!concept.language) { concept.language = 'all'; }
+            conceptList.push(concept);
+        }
+        return conceptList;
+    }
+
+    var boardDefinitions = [
+        {
+            name: "grovepi",
+            friendlyName: strings.messages.grovehat,
+            image: "grovepihat.png",
+            adc: "grovepi",
+            portTypes: {
+                "D": [5, 16, 18, 22, 24, 26],
+                "A": [0, 2, 4, 6],
+                "i2c": ["i2c"],
+            },
+            default: [
+                { type: "screen", suggestedName: strings.messages.sensorNameScreen + "1", port: "i2c", subType: "16x2lcd" },
+                { type: "led", suggestedName: strings.messages.sensorNameLed + "1", port: 'D5', subType: "blue" },
+                { type: "servo", suggestedName: strings.messages.sensorNameServo + "1", port: "D16" },
+                { type: "range", suggestedName: strings.messages.sensorNameDistance + "1", port :"D18", subType: "ultrasonic"},
+                { type: "button", suggestedName: strings.messages.sensorNameButton + "1", port: "D22" },
+                { type: "humidity", suggestedName: strings.messages.sensorNameHumidity + "1", port: "D24"},
+                { type: "buzzer", suggestedName: strings.messages.sensorNameBuzzer + "1", port: "D26", subType: "active"},
+                { type: "temperature", suggestedName: strings.messages.sensorNameTemperature + "1", port: 'A0', subType: "groveanalog" },
+                { type: "potentiometer", suggestedName: strings.messages.sensorNamePotentiometer + "1", port :"A4"},
+                { type: "light", suggestedName: strings.messages.sensorNameLight + "1", port :"A6"},
+            ]
+        },
+        {
+            name: "quickpi",
+            friendlyName: strings.messages.quickpihat,
+            image: "quickpihat.png",
+            adc: "ads1015",
+            portTypes: {
+                "D": [5, 16, 24],
+                "A": [0],
+            },
+            builtinSensors: [
+                { type: "screen", subType: "oled128x32", port: "i2c",  suggestedName: strings.messages.sensorNameScreen + "1", },
+                { type: "led", subType: "red", port: "D4", suggestedName: strings.messages.sensorNameRedLed + "1", },
+                { type: "led", subType: "green", port: "D17", suggestedName: strings.messages.sensorNameGreenLed + "1", },
+                { type: "led", subType: "blue", port: "D27",  suggestedName: strings.messages.sensorNameBlueLed + "1", },
+                { type: "irtrans", port: "D22",  suggestedName: strings.messages.sensorNameIrTrans + "1", },
+                { type: "irrecv", port: "D23", suggestedName: strings.messages.sensorNameIrRecv + "1", },
+                { type: "sound", port: "A1", suggestedName: strings.messages.sensorNameMicrophone + "1", },
+                { type: "buzzer", subType: "passive", port: "D12", suggestedName: strings.messages.sensorNameBuzzer + "1", },
+                { type: "accelerometer", subType: "BMI160", port: "i2c", suggestedName: strings.messages.sensorNameAccelerometer + "1", },
+                { type: "gyroscope", subType: "BMI160", port: "i2c", suggestedName: strings.messages.sensorNameGyroscope  + "1", },
+                { type: "magnetometer", subType: "LSM303C", port: "i2c", suggestedName: strings.messages.sensorNameMagnetometer + "1", },
+                { type: "temperature", subType: "BMI160", port: "i2c", suggestedName: strings.messages.sensorNameTemperature + "1", },
+                { type: "range", subType: "vl53l0x", port: "i2c", suggestedName: strings.messages.sensorNameDistance + "1", },
+                { type: "button", port: "D26", suggestedName: strings.messages.sensorNameButton + "1", },
+                { type: "light", port: "A2", suggestedName: strings.messages.sensorNameLight + "1", },
+                { type: "stick", port: "D7", suggestedName: strings.messages.sensorNameStick + "1", }
+            ],
+        },
+        {
+            name: "pinohat",
+            image: "pinohat.png",
+            friendlyName: strings.messages.pinohat,
+            adc: ["ads1015", "none"],
+            portTypes: {
+                "D": [5, 16, 24],
+                "A": [0],
+                "i2c": ["i2c"],
+            },
+        }
+    ]
+
+
+    var sensorDefinitions = [
+        /******************************** */
+        /*             Actuators          */
+        /**********************************/
+        {
+            name: "led",
+            suggestedName: strings.messages.sensorNameLed,
+            description: strings.messages.led,
+            isAnalog: false,
+            isSensor: false,
+            portType: "D",
+            getInitialState: function (sensor) {
+                return false;
+            },
+            selectorImages: ["ledon-red.png"],
+            valueType: "boolean",
+            pluggable: true,
+            getPercentageFromState: function (state) {
+                if (state)
+                    return 1;
+                else
+                    return 0;
+            },
+            getStateFromPercentage: function (percentage) {
+                if (percentage)
+                    return 1;
+                else
+                    return 0;
+            },
+            setLiveState: function (sensor, state, callback) {
+                var ledstate = state ? 1 : 0;
+                var command = "setLedState(\"" + sensor.name + "\"," + ledstate + ")";
+
+                context.quickPiConnection.sendCommand(command, callback);
+            },
+            getStateString: function(state) {
+                return state ? strings.messages.on.toUpperCase() : strings.messages.off.toUpperCase();
+            },
+            subTypes: [{
+                subType: "blue",
+                description: strings.messages.blueled,
+                selectorImages: ["ledon-blue.png"],
+                suggestedName: strings.messages.sensorNameBlueLed,
+            },
+            {
+                subType: "green",
+                description: strings.messages.greenled,
+                selectorImages: ["ledon-green.png"],
+                suggestedName: strings.messages.sensorNameGreenLed,
+            },
+            {
+                subType: "orange",
+                description: strings.messages.orangeled,
+                selectorImages: ["ledon-orange.png"],
+                suggestedName: strings.messages.sensorNameOrangeLed,
+            },
+            {
+                subType: "red",
+                description: strings.messages.redled,
+                selectorImages: ["ledon-red.png"],
+                suggestedName: strings.messages.sensorNameRedLed,
+            }
+            ],
+        },
+        {
+            name: "buzzer",
+            suggestedName: strings.messages.sensorNameBuzzer,
+            description: strings.messages.buzzer,
+            isAnalog: false,
+            isSensor: false,
+            getInitialState: function(sensor) {
+                return false;
+            },
+            portType: "D",
+            selectorImages: ["buzzer-ringing.png"],
+            valueType: "boolean",
+            getPercentageFromState: function (state, sensor) {
+
+                if (sensor.showAsAnalog)
+                {
+                    return (state - sensor.minAnalog) / (sensor.maxAnalog - sensor.minAnalog);
+                } else {
+                    if (state)
+                        return 1;
+                    else
+                        return 0;
+                }
+            },
+            getStateFromPercentage: function (percentage) {
+                if (percentage)
+                    return 1;
+                else
+                    return 0;
+            },
+            setLiveState: function (sensor, state, callback) {
+                var ledstate = state ? 1 : 0;
+                var command = "setBuzzerState(\"" + sensor.name + "\"," + ledstate + ")";
+
+                context.quickPiConnection.sendCommand(command, callback);
+            },
+            getStateString: function(state) {
+
+                if(typeof state == 'number' && 
+                    state != 1 &&
+                    state != 0) {
+
+                        return state.toString() + "Hz";
+                }               
+                return state ? strings.messages.on.toUpperCase() : strings.messages.off.toUpperCase();
+            },
+            subTypes: [{
+                subType: "active",
+                description: strings.messages.grovebuzzer,
+                pluggable: true,
+            },
+            {
+                subType: "passive",
+                description: strings.messages.quickpibuzzer,
+            }],
+        },
+        {
+            name: "servo",
+            suggestedName: strings.messages.sensorNameServo,
+            description: strings.messages.servo,
+            isAnalog: true,
+            isSensor: false,
+            getInitialState: function(sensor) {
+                return 0;
+            },
+            portType: "D",
+            valueType: "number",
+            pluggable: true,
+            valueMin: 0,
+            valueMax: 180,
+            selectorImages: ["servo.png", "servo-pale.png", "servo-center.png"],
+            getPercentageFromState: function (state) {
+                return state / 180;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 180);
+            },
+            setLiveState: function (sensor, state, callback) {
+                var command = "setServoAngle(\"" + sensor.name + "\"," + state + ")";
+
+                context.quickPiConnection.sendCommand(command, callback);
+            },
+            getStateString: function(state) {
+                return "" + state + "°";
+            }
+        },
+        {
+            name: "screen",
+            suggestedName: strings.messages.sensorNameScreen,
+            description: strings.messages.screen,
+            isAnalog: false,
+            isSensor: false,
+            getInitialState: function(sensor) {
+                if (sensor.isDrawingScreen)
+                    return null;
+                else
+                    return {line1: "", line2: ""};
+            },
+            cellsAmount: function(paper) {
+                if(context.board == 'grovepi') {
+                    return 2;
+                }
+                if(paper.width < 250) {
+                    return 4;
+                } else if(paper.width < 350) {
+                    return 3;
+                }
+
+                if (context.compactLayout)
+                    return 3;
+                else
+                    return 2;
+            },
+            portType: "i2c",
+            valueType: "object",
+            selectorImages: ["screen.png"],
+            compareState: function (state1, state2) {
+                // Both are null are equal
+                if (state1 == null && state2 == null)
+                    return true;
+
+                // If only one is null they are different
+                if ((state1 == null && state2) ||
+                    (state1 && state2 == null))
+                    return false;
+
+                if (state1.isDrawingData != 
+                    state2.isDrawingData)
+                    return false;
+
+                if (state1 && state1.isDrawingData) {
+                    // They are ImageData objects
+                    // The image data is RGBA so there are 4 bits per pixel
+
+                    var data1 = state1.getData(1).data;
+                    var data2 = state2.getData(1).data;
+
+                    for (var i = 0; i < data1.length; i+=4) {
+                        if (data1[i]  != data2[i] ||
+                            data1[i + 1]  != data2[i + 1] ||
+                            data1[i + 2]  != data2[i + 2] ||
+                            data1[i + 3]  != data2[i + 3])
+                            return false;
+                    }
+
+                    return true;
+                } else {
+
+                    // Otherwise compare the strings
+                    return (state1.line1 == state2.line1) &&
+                                ((state1.line2 == state2.line2) ||
+                                (!state1.line2 && !state2.line2));
+                }
+            },
+            setLiveState: function (sensor, state, callback) {
+                var line2 = state.line2;
+                if (!line2)
+                    line2 = "";
+
+                var command = "displayText(\"" + sensor.name + "\"," + state.line1 + "\", \"" + line2 + "\")";
+
+                context.quickPiConnection.sendCommand(command, callback);
+            },
+            getStateString: function(state) {
+                if(!state) { return '""'; }
+                
+                if (state.isDrawingData)
+                    return strings.messages.drawing;
+                else
+                    return '"' + state.line1 + (state.line2 ? " / " + state.line2 : "") + '"';
+            },
+            getWrongStateString: function(failInfo) {
+                if(!failInfo.expected ||
+                   !failInfo.expected.isDrawingData ||
+                   !failInfo.actual ||
+                   !failInfo.actual.isDrawingData) {
+                    return null; // Use default message
+                }
+                var data1 = failInfo.expected.getData(1).data;
+                var data2 = failInfo.actual.getData(1).data;
+                var nbDiff = 0;
+                for (var i = 0; i < data1.length; i+=4) {
+                    if(data1[i] != data2[i]) {
+                        nbDiff += 1;
+                    }
+                }
+                return strings.messages.wrongStateDrawing.format(failInfo.name, nbDiff, failInfo.time);
+            },
+            subTypes: [{
+                subType: "16x2lcd",
+                description: strings.messages.grove16x2lcd,
+                pluggable: true,
+            },
+            {
+                subType: "oled128x32",
+                description: strings.messages.oled128x32,
+            }],
+
+        },
+        {
+            name: "irtrans",
+            suggestedName: strings.messages.sensorNameIrTrans,
+            description: strings.messages.irtrans,
+            isAnalog: false,
+            isSensor: true,
+            portType: "D",
+            valueType: "number",
+            valueMin: 0,
+            valueMax: 60,
+            selectorImages: ["irtranson.png"],
+            getPercentageFromState: function (state) {
+                return state / 60;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 60);
+            },
+            setLiveState: function (sensor, state, callback) {
+                var ledstate = state ? 1 : 0;
+                var command = "setInfraredState(\"" + sensor.name + "\"," + ledstate + ")";
+
+                context.quickPiConnection.sendCommand(command, callback);
+            },
+        },
+        /******************************** */
+        /*             sensors            */
+        /**********************************/
+        {
+            name: "button",
+            suggestedName: strings.messages.sensorNameButton,
+            description: strings.messages.button,
+            isAnalog: false,
+            isSensor: true,
+            portType: "D",
+            valueType: "boolean",
+            pluggable: true,
+            selectorImages: ["buttonoff.png"],
+            getPercentageFromState: function (state) {
+                if (state)
+                    return 1;
+                else
+                    return 0;
+            },
+            getStateFromPercentage: function (percentage) {
+                if (percentage)
+                    return 1;
+                else
+                    return 0;
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("isButtonPressed(\"" + sensor.name + "\")", function (retVal) {
+                    var intVal = parseInt(retVal, 10);
+                    callback(intVal != 0);
+                });
+            },
+        },
+        {
+            name: "stick",
+            suggestedName: strings.messages.sensorNameStick,
+            description: strings.messages.fivewaybutton,
+            isAnalog: false,
+            isSensor: true,
+            portType: "D",
+            valueType: "boolean",
+            selectorImages: ["stick.png"],
+            gpiosNames: ["up", "down", "left", "right", "center"],
+            gpios: [10, 9, 11, 8, 7],
+            getPercentageFromState: function (state) {
+                if (state)
+                    return 1;
+                else
+                    return 0;
+            },
+            getStateFromPercentage: function (percentage) {
+                if (percentage)
+                    return 1;
+                else
+                    return 0;
+            },
+            compareState: function (state1, state2) {
+                if (state1 == null && state2 == null)
+                    return true;
+
+                return state1[0] == state2[0] &&
+                        state1[1] == state2[1] &&
+                        state1[2] == state2[2] &&
+                        state1[3] == state2[3] &&
+                        state1[4] == state2[4];
+            },
+            getLiveState: function (sensor, callback) {
+                var cmd = "readStick(" + this.gpios.join() + ")";
+
+                context.quickPiConnection.sendCommand("readStick(" + this.gpios.join() + ")", function (retVal) {
+                    var array = JSON.parse(retVal);
+                    callback(array);
+                });
+            },
+            getButtonState: function(buttonname, state) {
+                if (state) {
+                    var buttonparts = buttonname.split(".");
+                    var actualbuttonmame = buttonname;
+                    if (buttonparts.length == 2) {
+                        actualbuttonmame = buttonparts[1];
+                    }
+
+                    var index = this.gpiosNames.indexOf(actualbuttonmame);
+
+                    if (index >= 0) {
+                        return state[index];
+                    }
+                }
+
+                return false;
+            },
+            cellsAmount: function(paper) {
+                return 2;
+            },
+        },
+        {
+            name: "temperature",
+            suggestedName: strings.messages.sensorNameTemperature,
+            description: strings.messages.tempsensor,
+            isAnalog: true,
+            isSensor: true,
+            portType: "A",
+            valueType: "number",
+            valueMin: 0,
+            valueMax: 60,
+            selectorImages: ["temperature-hot.png", "temperature-overlay.png"],
+            getPercentageFromState: function (state) {
+                return state / 60;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 60);
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("readTemperature(\"" + sensor.name + "\")", function(val) {
+                    val = Math.round(val);
+                    callback(val);
+                });
+            },
+            subTypes: [{
+                subType: "groveanalog",
+                description: strings.messages.groveanalogtempsensor,
+                portType: "A",
+                pluggable: true,
+            },
+            {
+                subType: "BMI160",
+                description: strings.messages.quickpigyrotempsensor,
+                portType: "i2c",
+            },
+            {
+                subType: "DHT11",
+                description: strings.messages.dht11tempsensor,
+                portType: "D",
+                pluggable: true,
+            }],
+        },
+        {
+            name: "potentiometer",
+            suggestedName: strings.messages.sensorNamePotentiometer,
+            description: strings.messages.potentiometer,
+            isAnalog: true,
+            isSensor: true,
+            portType: "A",
+            valueType: "number",
+            pluggable: true,
+            valueMin: 0,
+            valueMax: 100,
+            selectorImages: ["potentiometer.png", "potentiometer-pale.png"],
+            getPercentageFromState: function (state) {
+                return state / 100;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 100);
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("readRotaryAngle(\"" + sensor.name + "\")", function(val) {
+                    val = Math.round(val);
+                    callback(val);
+                });
+            },
+        },
+        {
+            name: "light",
+            suggestedName: strings.messages.sensorNameLight,
+            description: strings.messages.lightsensor,
+            isAnalog: true,
+            isSensor: true,
+            portType: "A",
+            valueType: "number",
+            pluggable: true,
+            valueMin: 0,
+            valueMax: 100,
+            selectorImages: ["light.png"],
+            getPercentageFromState: function (state) {
+                return state / 100;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 100);
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("readLightIntensity(\"" + sensor.name + "\")", function(val) {
+                    val = Math.round(val);
+                    callback(val);
+                });
+            },
+        },
+        {
+            name: "range",
+            suggestedName: strings.messages.sensorNameDistance,
+            description: strings.messages.distancesensor,
+            isAnalog: true,
+            isSensor: true,
+            portType: "D",
+            valueType: "number",
+            valueMin: 0,
+            valueMax: 5000,
+            selectorImages: ["range.png"],
+            getPercentageFromState: function (state) {
+                return state / 500;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 500);
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("readDistance(\"" + sensor.name + "\")", function(val) {
+                    val = Math.round(val);
+                    callback(val);
+                });
+            },
+            subTypes: [{
+                subType: "vl53l0x",
+                description: strings.messages.timeofflightranger,
+                portType: "i2c",
+            },
+            {
+                subType: "ultrasonic",
+                description: strings.messages.ultrasonicranger,
+                portType: "D",
+                pluggable: true,
+            }],
+
+        },
+        {
+            name: "humidity",
+            suggestedName: strings.messages.sensorNameHumidity,
+            description: strings.messages.humiditysensor,
+            isAnalog: true,
+            isSensor: true,
+            portType: "D",
+            valueType: "number",
+            pluggable: true,
+            valueMin: 0,
+            valueMax: 100,
+            selectorImages: ["humidity.png"],
+            getPercentageFromState: function (state) {
+                return state / 100;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 100);
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("readHumidity(\"" + sensor.name + "\")", function(val) {
+                    val = Math.round(val);
+                    callback(val);
+                });
+            },
+        },
+        {
+            name: "sound",
+            suggestedName: strings.messages.sensorNameMicrophone,
+            description: strings.messages.soundsensor,
+            isAnalog: true,
+            isSensor: true,
+            portType: "A",
+            valueType: "number",
+            pluggable: true,
+            valueMin: 0,
+            valueMax: 100,
+            selectorImages: ["sound.png"],
+            getPercentageFromState: function (state) {
+                return state / 100;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 100);
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("readSoundLevel(\"" + sensor.name + "\")", function(val) {
+                    val = Math.round(val);
+                    callback(val);
+                });
+            },
+        },
+        {
+            name: "accelerometer",
+            suggestedName: strings.messages.sensorNameAccelerometer,
+            description: strings.messages.accelerometerbmi160,
+            isAnalog: true,
+            isSensor: true,
+            portType: "i2c",
+            valueType: "object",
+            valueMin: 0,
+            valueMax: 100,
+            step: 0.1,
+            selectorImages: ["accel.png"],
+            getStateString: function (state) {
+                if (state == null)
+                    return "0m/s²";
+
+                if (Array.isArray(state))
+                {
+                    return "X: " + state[0] + "m/s² Y: " + state[1] + "m/s² Z: " + state[2] + "m/s²";
+                }
+                else {
+                    return state.toString() + "m/s²";
+                }
+            },
+            getPercentageFromState: function (state) {
+                return ((state + 78.48) / 156.96);
+            },
+            getStateFromPercentage: function (percentage) {
+                var value = ((percentage * 156.96) - 78.48);
+                return parseFloat(value.toFixed(1));
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("readAccelBMI160()", function(val) {
+                    var array = JSON.parse(val);
+                    callback(array);
+                });
+            },
+            cellsAmount: function(paper) {
+                return 2;
+            },
+        },
+        {
+            name: "gyroscope",
+            suggestedName: strings.messages.sensorNameGyroscope,
+            description: strings.messages.gyrobmi160,
+            isAnalog: true,
+            isSensor: true,
+            portType: "i2c",
+            valueType: "object",
+            valueMin: 0,
+            valueMax: 100,
+            selectorImages: ["gyro.png"],
+            getPercentageFromState: function (state) {
+                return (state + 125) / 250;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 250) - 125;
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("readGyroBMI160()", function(val) {
+
+                    var array = JSON.parse(val);
+                    array[0] = Math.round(array[0]);
+                    array[1] = Math.round(array[1]);
+                    array[2] = Math.round(array[2]);
+                    callback(array);
+                });
+            },
+            cellsAmount: function(paper) {
+                return 2;
+            },
+        },
+        {
+            name: "magnetometer",
+            suggestedName: strings.messages.sensorNameMagnetometer,
+            description: strings.messages.maglsm303c,
+            isAnalog: true,
+            isSensor: true,
+            portType: "i2c",
+            valueType: "object",
+            valueMin: 0,
+            valueMax: 100,
+            selectorImages: ["mag.png"],
+            getPercentageFromState: function (state) {
+                return (state + 1600) / 3200;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 3200) - 1600;
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("readMagnetometerLSM303C(False)", function(val) {
+
+                    var array = JSON.parse(val);
+
+                    array[0] = Math.round(array[0]);
+                    array[1] = Math.round(array[1]);
+                    array[2] = Math.round(array[2]);
+
+                    callback(array);
+                });
+            },
+            cellsAmount: function(paper) {
+                return 2;
+            },
+        },
+        {
+            name: "irrecv",
+            suggestedName: strings.messages.sensorNameIrRecv,
+            description: strings.messages.irreceiver,
+            isAnalog: false,
+            isSensor: true,
+            portType: "D",
+            valueType: "number",
+            valueMin: 0,
+            valueMax: 60,
+            selectorImages: ["irrecvon.png"],
+            getPercentageFromState: function (state) {
+                return state / 60;
+            },
+            getStateFromPercentage: function (percentage) {
+                return Math.round(percentage * 60);
+            },
+            getLiveState: function (sensor, callback) {
+                context.quickPiConnection.sendCommand("isButtonPressed(\"" + sensor.name + "\")", function (retVal) {
+                    var intVal = parseInt(retVal, 10);
+                    callback(intVal == 0);
+                });
+            },
+        },
+        /******************************** */
+        /*             dummy sensors      */
+        /**********************************/
+        {
+            name: "cloudstore",
+            suggestedName: strings.messages.sensorNameCloudStore,
+            description: strings.messages.cloudstore,
+            isAnalog: false,
+            isSensor: false,
+            portType: "none",
+            valueType: "object",
+            selectorImages: ["cloudstore.png"],
+            /*getInitialState: function(sensor) {
+                return {};
+            },*/
+
+            getWrongStateString: function(failInfo) {
+                /**
+                 * Call this function when more.length > less.length. It will find the key that is missing inside of the
+                 * less array
+                 * @param more The bigger array, containing one or more key more than less
+                 * @param less Less, the smaller array, he has a key or more missing
+                 */
+                function getMissingKey(more, less) {
+                    for (var i = 0; i < more.length; i++) {
+                        var found = false;
+                        for (var j = 0; j < less.length; j++) {
+                            if (more[i] === less[j]) {
+                                found = true;
+                                break;
+                            }
+                        }
+                        if (!found)
+                            return more[i];
+                    }
+                    // should never happen because length are different.
+                    return null;
+                }
+
+                // the type of a value in comparison.
+                var valueType = {
+                    // Primitive type are strings and integers
+                    PRIMITIVE: "primitive",
+                    ARRAY: "array",
+                    DICTIONARY: "dictionary",
+                    // if two values are of wrong type then this is returned
+                    WRONG_TYPE: "wrong_type"
+                };
+
+                /**
+                 * This method allow us to compare two keys of the cloud and their values
+                 * @param actual The actual key that we have
+                 * @param expected The expected key that we have
+                 * @return An object containing the type of the return and the key that differ
+                 */
+                function compareKeys(actual, expected) {
+                    function compareArrays(arr1, arr2) {
+                        if (arr1.length != arr2.length)
+                            return false;
+                        for (var i = 0; i < arr1.length; i++) {
+                            for (var j = 0; j < arr2.length; j++) {
+                                if (arr1[i] !== arr2[i])
+                                    return false;
+                            }
+                        }
+                        return true;
+                    }
+                    var actualKeys = Object.keys(actual);
+
+                    for (var i = 0; i < actualKeys.length; i++) {
+                        var actualVal = actual[actualKeys[i]];
+
+                        // they both have the same keys so we can do that.
+                        var expectedVal = expected[actualKeys[i]];
+
+                        if (isPrimitive(expectedVal)) {
+                            // if string with int for example
+                            if (typeof expectedVal !== typeof actualVal) {
+                                return {
+                                    type: valueType.WRONG_TYPE,
+                                    key: actualKeys[i]
+                                }
+                            }
+                            if (expectedVal !== actualVal) {
+                                return {
+                                    type: valueType.PRIMITIVE,
+                                    key: actualKeys[i]
+                                };
+                            }
+                        } else if (Array.isArray(expectedVal)) {
+                            if (!Array.isArray(actualVal)) {
+                                return {
+                                    type: valueType.WRONG_TYPE,
+                                    key: actualKeys[i]
+                                };
+                            }
+                            if (!compareArrays(expectedVal, actualVal)) {
+                                return {
+                                    type: valueType.ARRAY,
+                                    key: actualKeys[i]
+                                };
+                            }
+                            // if we are in a dictionary
+                            // method from: https://stackoverflow.com/questions/38304401/javascript-check-if-dictionary
+                        } else if (expectedVal.constructor == Object) {
+                            if (actualVal.constructor != Object) {
+                                return {
+                                    type: valueType.WRONG_TYPE,
+                                    key: actualKeys[i]
+                                };
+                            }
+                            if (!deepEqual(expectedVal, actualVal)) {
+                                return {
+                                    type: valueType.DICTIONARY,
+                                    key: actualKeys[i]
+                                };
+                            }
+                        }
+                    }
+                }
+
+                if(!failInfo.expected &&
+                    !failInfo.actual)
+                    return null;
+
+                var expected = failInfo.expected;
+                var actual = failInfo.actual;
+
+                var expectedKeys = Object.keys(expected);
+                var actualKeys = Object.keys(actual);
+
+                if (expectedKeys.length != actualKeys.length) {
+                    if (expectedKeys.length > actualKeys.length) {
+                        var missingKey = getMissingKey(expectedKeys, actualKeys);
+                        return strings.messages.cloudMissingKey.format(missingKey);
+                    } else {
+                        var additionalKey = getMissingKey(actualKeys, expectedKeys);
+                        return strings.messages.cloudMoreKey.format(additionalKey);
+                    }
+                }
+
+                // This will return a key that is missing inside of expectedKeys if there is one, otherwise it will return null.
+                var unexpectedKey = getMissingKey(actualKeys, expectedKeys);
+
+                if (unexpectedKey) {
+                    return strings.messages.cloudUnexpectedKeyCorrection.format(unexpectedKey);
+                }
+
+                var keyCompare = compareKeys(actual, expected);
+
+                switch (keyCompare.type) {
+                    case valueType.PRIMITIVE:
+                        return strings.messages.cloudPrimitiveWrongKey.format(keyCompare.key, expected[keyCompare.key], actual[keyCompare.key]);
+                    case valueType.WRONG_TYPE:
+                        var typeActual = typeof actual[keyCompare.key];
+                        var typeExpected = typeof expected[keyCompare.key];
+                        // we need to check if it is an array or a dictionary
+                        if (typeActual == "object") {
+                            if (Array.isArray(actual[keyCompare.key]))
+                                typeActual = "array";
+                        }
+                        if (typeExpected == "object") {
+                            if (Array.isArray(expected[keyCompare.key]))
+                                typeExpected = "array";
+                        }
+                        var typeActualTranslate = quickPiLocalLanguageStrings.fr.messages.cloudTypes[typeActual];
+                        var typeExpectedTranslate = quickPiLocalLanguageStrings.fr.messages.cloudTypes[typeExpected];
+                        return strings.messages.cloudWrongType.format(typeActualTranslate, keyCompare.key, typeExpectedTranslate);
+                    case valueType.ARRAY:
+                        return strings.messages.cloudArrayWrongKey.format(keyCompare.key);
+                    case valueType.DICTIONARY:
+                        return strings.messages.cloudDictionaryWrongKey.format(keyCompare.key);
+                }
+            },
+
+            compareState: function (state1, state2) {
+                return quickPiStore.compareState(state1, state2);
+            }
+        },
+        {
+            name: "clock",
+            description: strings.messages.cloudstore,
+            isAnalog: false,
+            isSensor: false,
+            portType: "none",
+            valueType: "object",
+            selectorImages: ["clock.png"],
+        },
+    ];
+
+
+    if(window.quickAlgoInterface) {
+        window.quickAlgoInterface.stepDelayMin = 1;
+    }
+
+
+    function findSensorDefinition(sensor) {
+        var sensorDef = null;
+        for (var iType = 0; iType < sensorDefinitions.length; iType++) {
+            var type = sensorDefinitions[iType];
+
+            if (sensor.type == type.name) {
+                if (sensor.subType && type.subTypes) {
+
+                    for (var iSubType = 0; iSubType < type.subTypes.length; iSubType++) {
+                        var subType = type.subTypes[iSubType];
+
+                        if (subType.subType == sensor.subType) {
+                            sensorDef = $.extend({}, type, subType);
+                        }
+                    }
+                } else {
+                    sensorDef = type;
+                }
+            }
+        }
+
+        if(sensorDef && !sensorDef.compareState) {
+            sensorDef.compareState = function(state1, state2) {
+                return state1 == state2;
+            };
+        }
+
+        return sensorDef;
+    }
+
+    var defaultQuickPiOptions = {
+        disableConnection: false,
+        increaseTimeAfterCalls: 5
+        };
+    function getQuickPiOption(name) {
+        if(name == 'disableConnection') {
+            // TODO :: Legacy, remove when all tasks will have been updated
+            return (context.infos
+                && (context.infos.quickPiDisableConnection
+                || (context.infos.quickPi && context.infos.quickPi.disableConnection)));
+        }
+        if(context.infos && context.infos.quickPi && typeof context.infos.quickPi[name] != 'undefined') {
+            return context.infos.quickPi[name];
+        } else {
+            return defaultQuickPiOptions[name];
+        }
+    }
+
+    function getWrongStateText(failInfo) {
+        var actualStateStr = "" + failInfo.actual;
+        var expectedStateStr = "" + failInfo.expected;
+        var sensorDef = findSensorDefinition(failInfo.sensor);
+        if(sensorDef) {
+            if(sensorDef.isSensor) {
+                return strings.messages.wrongStateSensor.format(failInfo.name, failInfo.time);
+            }
+            if(sensorDef.getWrongStateString) {
+                var sensorWrongStr = sensorDef.getWrongStateString(failInfo);
+                if(sensorWrongStr) {
+                    return sensorWrongStr;
+                }
+            }
+            if(sensorDef.getStateString) {
+                actualStateStr = sensorDef.getStateString(failInfo.actual);
+                expectedStateStr = sensorDef.getStateString(failInfo.expected);
+            }
+        }
+        return strings.messages.wrongState.format(failInfo.name, actualStateStr, expectedStateStr, failInfo.time);
+    }
+
+    function getCurrentBoard() {
+        var found = boardDefinitions.find(function (element) {
+            if (context.board == element.name)
+                return element;
+        });
+
+        return found;
+    }
+
+    function getSessionStorage(name) {
+        // Use a try in case it gets blocked
+        try {
+            return sessionStorage[name];
+        } catch(e) {
+            return null;
+        }
+    }
+
+    function setSessionStorage(name, value) {
+        // Use a try in case it gets blocked
+        try {
+            sessionStorage[name] = value;
+        } catch(e) {}
+    }
+
+    if(window.getQuickPiConnection) {
+        var lockstring = getSessionStorage('lockstring');
+        if(!lockstring) {
+            lockstring = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+            setSessionStorage('lockstring', lockstring);
+        }
+
+        context.quickPiConnection = getQuickPiConnection(lockstring, raspberryPiConnected, raspberryPiDisconnected, raspberryPiChangeBoard);
+
+        context.quickPiConnection.isAvailable("localhost", function(available) {
+            context.localhostAvailable = available;
+        });
+
+        context.quickPiConnection.isAvailable(window.location.hostname, function(available) {
+            context.windowLocationAvailable = available;
+        });
+
+    }
+
+    var paper;
+    context.offLineMode = true;
+
+    context.onExecutionEnd = function () {
+        if (context.autoGrading)
+        {
+            buzzerSound.stopAll();
+        }
+
+    };
+
+    infos.checkEndEveryTurn = true;
+    infos.checkEndCondition = function (context, lastTurn) {
+
+        if (!context.display && !context.autoGrading) {
+            context.success = true;
+            throw (strings.messages.manualTestSuccess);
+        }
+
+        if (context.failImmediately)
+        {
+            context.success = false;
+            throw (context.failImmediately);
+        }
+
+        var testEnded = lastTurn || context.currentTime > context.maxTime;
+
+        if (context.autoGrading) {
+            if (!testEnded) { return; }
+
+            if (lastTurn && context.display && !context.loopsForever) {
+                context.currentTime = Math.floor(context.maxTime * 1.05);
+                drawNewStateChanges();
+                drawCurrentTime();
+            }
+
+            var failInfo = null;
+
+            for(var sensorName in context.gradingStatesBySensor) {
+                // Cycle through each sensor from the grading states
+                var sensor = findSensorByName(sensorName);
+                var sensorDef = findSensorDefinition(sensor);
+
+                var expectedStates = context.gradingStatesBySensor[sensorName];
+                if(!expectedStates.length) { continue;}
+
+                var actualStates = context.actualStatesBySensor[sensorName];
+                var actualIdx = 0;
+
+                // Check that we went through all expected states
+                for (var i = 0; i < context.gradingStatesBySensor[sensorName].length; i++) {
+                    var expectedState = context.gradingStatesBySensor[sensorName][i];
+
+                    if(expectedState.hit || expectedState.input ) { continue; } // Was hit, valid
+                    var newFailInfo = null;
+                    if(actualStates) {
+                        // Scroll through actual states until we get the state at this time
+                        while(actualIdx + 1 < actualStates.length && actualStates[actualIdx+1].time <= expectedState.time) {
+                            actualIdx += 1;
+                        }
+                        if(!sensorDef.compareState(actualStates[actualIdx].state, expectedState.state)) {
+                            newFailInfo = {
+                                sensor: sensor,
+                                name: sensorName,
+                                time: expectedState.time,
+                                expected: expectedState.state,
+                                actual: actualStates[actualIdx].state
+                            };
+                        }
+                    } else {
+                        // No actual states to compare to
+                        newFailInfo = {
+                            sensor: sensor,
+                            name: sensorName,
+                            time: expectedState.time,
+                            expected: expectedState.state,
+                            actual: null
+                        };
+                    }
+
+                    if(newFailInfo) {
+                        // Only update failInfo if we found an error earlier
+                        failInfo = failInfo && failInfo.time < newFailInfo.time ? failInfo : newFailInfo;
+                    }
+                }
+
+                // Check that no actual state conflicts an expected state
+                if(!actualStates) { continue; }
+                var expectedIdx = 0;
+                for(var i = 0; i < actualStates.length ; i++) {
+                    var actualState = actualStates[i];
+                    while(expectedIdx + 1 < expectedStates.length && expectedStates[expectedIdx+1].time <= actualState.time) {
+                        expectedIdx += 1;
+                    }
+                    if(!sensorDef.compareState(actualState.state, expectedStates[expectedIdx].state)) {
+                        // Got an unexpected state change
+                        var newFailInfo = {
+                            sensor: sensor,
+                            name: sensorName,
+                            time: actualState.time,
+                            expected: expectedStates[expectedIdx].state,
+                            actual: actualState.state
+                        };
+                        failInfo = failInfo && failInfo.time < newFailInfo.time ? failInfo : newFailInfo;
+                    }
+                }
+            }
+
+            if(failInfo) {
+                // Missed expected state
+                context.success = false;
+                throw (getWrongStateText(failInfo));
+            } else {
+                // Success
+                context.success = true;
+                throw (strings.messages.programEnded);
+            }
+        } else {
+            if (!context.offLineMode) {
+                $('#piinstallcheck').hide();
+            }
+
+            if (lastTurn) {
+                context.success = true;
+                throw (strings.messages.programEnded);
+            }
+        }
+   };
+
+   context.generatePythonSensorTable = function()
+   {
+        var pythonSensorTable = "sensorTable = [";
+        var first = true;
+
+        for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+            var sensor = infos.quickPiSensors[iSensor];
+            if (first) {
+                first = false;
+            } else {
+                pythonSensorTable += ",";
+            }
+
+            if (sensor.type == "stick") {
+                var stickDefinition = findSensorDefinition(sensor);
+                var firststick = true;
+
+                for (var iStick = 0; iStick < stickDefinition.gpiosNames.length; iStick++) {
+                    var name = sensor.name + "." + stickDefinition.gpiosNames[iStick];
+                    var port = "D" + stickDefinition.gpios[iStick];
+
+                    if (firststick) {
+                        firststick = false;
+                    } else {
+                        pythonSensorTable += ",";
+                    }
+
+                    pythonSensorTable += "{\"type\":\"button\"";
+                    pythonSensorTable += ",\"name\":\"" + name + "\"";
+                    pythonSensorTable += ",\"port\":\"" + port + "\"}";
+                }
+            } else {
+                pythonSensorTable += "{\"type\":\"" + sensor.type + "\"";
+                pythonSensorTable += ",\"name\":\"" + sensor.name + "\"";
+                pythonSensorTable += ",\"port\":\"" + sensor.port + "\"";
+                if (sensor.subType)
+                    pythonSensorTable += ",\"subType\":\"" + sensor.subType + "\"";
+
+                pythonSensorTable += "}";
+            }
+        }
+
+        var board = getCurrentBoard();
+        pythonSensorTable += "]; currentADC = \"" + board.adc + "\"";
+
+        return pythonSensorTable;
+   }
+
+    context.resetSensorTable = function()
+    {
+        var pythonSensorTable = context.generatePythonSensorTable();
+
+        context.quickPiConnection.sendCommand(pythonSensorTable, function(x) {});
+    }
+
+
+    context.findSensor = function findSensor(type, port, error=true) {
+        for (var i = 0; i < infos.quickPiSensors.length; i++) {
+            var sensor = infos.quickPiSensors[i];
+
+            if (sensor.type == type && sensor.port == port)
+                return sensor;
+        }
+
+        if (error) {
+            context.success = false;
+            throw (strings.messages.sensorNotFound.format('type ' + type + ', port ' + port));
+        }
+
+        return null;
+    }
+
+
+    function sensorAssignPort(sensor)
+    {
+        var board = getCurrentBoard();
+        var sensorDefinition = findSensorDefinition(sensor);
+
+        sensor.port = null;
+
+        // first try with built ins
+        if (board.builtinSensors) {
+            for (var i = 0; i < board.builtinSensors.length; i++) {
+                var builtinsensor = board.builtinSensors[i];
+
+                // Search for the specified subtype 
+                if (builtinsensor.type == sensor.type && 
+                    builtinsensor.subType == sensor.subType &&
+                    !context.findSensor(builtinsensor.type, builtinsensor.port, false))
+                {
+                    sensor.port = builtinsensor.port;
+                    return;
+                }
+            }
+
+            // Search without subtype
+            for (var i = 0; i < board.builtinSensors.length; i++) {
+                var builtinsensor = board.builtinSensors[i];
+
+                // Search for the specified subtype 
+                if (builtinsensor.type == sensor.type && 
+                    !context.findSensor(builtinsensor.type, builtinsensor.port, false))
+                {
+                    sensor.port = builtinsensor.port;
+                    sensor.subType = builtinsensor.subType;
+                    return;
+                }
+            }
+
+
+            // If this is a button try to set it to a stick
+            if (!sensor.port && sensor.type == "button") {
+                for (var i = 0; i < board.builtinSensors.length; i++) {
+                    var builtinsensor = board.builtinSensors[i];
+                    if (builtinsensor.type == "stick")
+                    {
+                        sensor.port = builtinsensor.port;
+                        return;
+                    }
+                }
+            }
+        }
+
+
+        // Second try assign it a grove port
+        if (!sensor.port) {
+            var sensorDefinition = findSensorDefinition(sensor);
+            var pluggable = sensorDefinition.pluggable;
+
+            if (sensorDefinition.subTypes) {
+                for (var iSubTypes = 0; iSubTypes < sensorDefinition.subTypes.length; iSubTypes++) {
+                    var subTypeDefinition = sensorDefinition.subTypes[iSubTypes];
+                    if (pluggable || subTypeDefinition.pluggable) {
+                        var ports = board.portTypes[sensorDefinition.portType];
+                        for (var iPorts = 0; iPorts < ports.length; iPorts++) {
+                            var port = sensorDefinition.portType;
+                            if (sensorDefinition.portType != "i2c")
+                                port = sensorDefinition.portType + ports[iPorts];
+                            if (!findSensorByPort(port)) {
+                                sensor.port = port;
+
+                                if (!sensor.subType)
+                                    sensor.subType = subTypeDefinition.subType;
+                                return;
+                            }
+                        }
+                    }
+                }
+            } else {
+                if (pluggable) {
+                    var ports = board.portTypes[sensorDefinition.portType];
+                    for (var iPorts = 0; iPorts < ports.length; iPorts++) {
+                        var port = sensorDefinition.portType + ports[iPorts];
+                        if (!findSensorByPort(port)) {
+                            sensor.port = port;
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    context.resetSensors = function() {
+        for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+            var sensor = infos.quickPiSensors[iSensor];
+            if (context.sensorsSaved[sensor.name] && !context.autoGrading) {
+                var save = context.sensorsSaved[sensor.name];
+                sensor.state = save.state;
+                sensor.screenDrawing = save.screenDrawing;
+                sensor.lastDrawnTime = save.lastDrawnTime;
+                sensor.lastDrawnState = save.lastDrawnState;
+                sensor.callsInTimeSlot = save.callsInTimeSlot;
+                sensor.lastTimeIncrease = save.lastTimeIncrease;
+                sensor.removed = save.removed;
+                sensor.quickStore = save.quickStore;
+            } else {
+                sensor.state = null;
+                sensor.screenDrawing = null;
+                sensor.lastDrawnTime = 0;
+                sensor.lastDrawnState = null;
+                sensor.callsInTimeSlot = 0;
+                sensor.lastTimeIncrease = 0;
+                sensor.removed = false;
+                sensor.quickStore = null;
+            }
+            if (sensor.name == "gyroscope")
+                sensor.rotationAngles = undefined;
+        }
+    };
+    
+    context.reset = function (taskInfos) {
+        buzzerSound.stopAll();
+
+        context.alreadyHere = true;
+
+        context.failImmediately  = null;
+
+        if (!context.offLineMode) {
+            $('#piinstallcheck').hide();
+            context.quickPiConnection.startNewSession();
+            context.resetSensorTable();
+        }
+
+        context.currentTime = 0;
+        if (taskInfos != undefined) {
+            context.actualStatesBySensor = {};
+            context.tickIncrease = 100;
+            context.autoGrading = taskInfos.autoGrading;
+            context.loopsForever = taskInfos.loopsForever;
+            context.allowInfiniteLoop = !context.autoGrading;
+            if (context.autoGrading) {
+                context.maxTime = 0;
+
+                if (taskInfos.input)
+                {
+                    for (var i = 0; i < taskInfos.input.length; i++)
+                    {
+                        taskInfos.input[i].input = true;
+                    }
+                    context.gradingStatesByTime = taskInfos.input.concat(taskInfos.output);
+                }
+                else {
+                    context.gradingStatesByTime = taskInfos.output;
+                }
+
+                // Copy states to avoid modifying the taskInfos states
+                context.gradingStatesByTime = context.gradingStatesByTime.map(
+                    function(val) {
+                        return Object.assign({}, val);
+                    });
+
+                context.gradingStatesByTime.sort(function (a, b) { return a.time - b.time; });
+
+                context.gradingStatesBySensor = {};
+
+                for (var i = 0; i < context.gradingStatesByTime.length; i++) {
+                    var state = context.gradingStatesByTime[i];
+
+                    if (!context.gradingStatesBySensor.hasOwnProperty(state.name))
+                        context.gradingStatesBySensor[state.name] = [];
+
+                    context.gradingStatesBySensor[state.name].push(state);
+//                    state.hit = false;
+//                    state.badonce = false;
+
+                    if (state.time > context.maxTime)
+                        context.maxTime = state.time;
+                }
+
+
+                for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+                    var sensor = infos.quickPiSensors[iSensor];
+                    
+                    if (sensor.type == "buzzer") {
+                        var states = context.gradingStatesBySensor[sensor.name];
+
+                        if (states) {
+                            for (var iState = 0; iState < states.length; iState++) {
+                                var state = states[iState].state;
+                                
+                                if (typeof state == 'number' &&
+                                        state != 0 &&
+                                        state != 1) {
+                                    sensor.showAsAnalog = true;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+
+                    var isAnalog = findSensorDefinition(sensor).isAnalog || sensor.showAsAnalog;
+
+                    if (isAnalog) {
+                        sensor.maxAnalog = Number.MIN_VALUE;
+                        sensor.minAnalog = Number.MAX_VALUE;
+
+                        if (context.gradingStatesBySensor.hasOwnProperty(sensor.name)) {
+                            var states = context.gradingStatesBySensor[sensor.name];
+
+                            for (var iState = 0; iState < states.length; iState++) {
+                                var state = states[iState];
+
+                                if (state.state > sensor.maxAnalog)
+                                    sensor.maxAnalog = state.state;
+                                if (state.state < sensor.minAnalog)
+                                    sensor.minAnalog = state.state;
+                            }
+                        }
+                    }
+
+                    if (sensor.type == "screen") {
+                        var states = context.gradingStatesBySensor[sensor.name];
+
+                        if (states) {
+                            for (var iState = 0; iState < states.length; iState++) {
+                                var state = states[iState];
+                                if (state.state.isDrawingData)
+                                    sensor.isDrawingScreen = true;
+                            }
+                        }
+                    }
+                }
+            }
+
+
+            if (infos.quickPiSensors == "default")
+            {
+                infos.quickPiSensors = [];
+                addDefaultBoardSensors();
+            }
+        }
+
+        context.success = false;
+        if (context.autoGrading)
+            context.doNotStartGrade = false;
+        else
+            context.doNotStartGrade = true;
+
+        if (paper && context.autoGrading && context.display) {
+            if (context.sensorStates)
+                context.sensorStates.remove();
+            context.sensorStates = paper.set();
+        }
+    
+
+        context.resetSensors();
+
+        for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+            var sensor = infos.quickPiSensors[iSensor];
+
+            // If the sensor has no port assign one
+            if (!sensor.port) {
+                sensorAssignPort(sensor);
+            }
+        }
+
+        if (context.display) {
+            context.recreateDisplay = true;
+            context.displayAutoGrading = context.autoGrading;
+            context.timeLineStates = [];
+            context.resetDisplay();
+        } else {
+
+            context.success = false;
+        }
+
+        // Needs display to be reset before calling registerQuickPiEvent
+        for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+            var sensor = infos.quickPiSensors[iSensor];
+
+            // Set initial state
+            var sensorDef = findSensorDefinition(sensor);
+            if(sensorDef && !sensorDef.isSensor && sensorDef.getInitialState) {
+                var initialState = sensorDef.getInitialState(sensor);
+                if (initialState != null)
+                    context.registerQuickPiEvent(sensor.name, initialState, true, true);
+            }
+        }
+
+        startSensorPollInterval();
+    };
+
+    function clearSensorPollInterval() {
+        if(context.sensorPollInterval) {
+            clearInterval(context.sensorPollInterval);
+            context.sensorPollInterval = null;
+        }
+    };
+
+    function startSensorPollInterval() {
+        // Start polling the sensors on the raspberry if the raspberry is connected
+
+        clearSensorPollInterval();
+
+        context.liveUpdateCount = 0;
+
+        if(!context.quickPiConnection.isConnected()) { return; }
+
+        context.sensorPollInterval = setInterval(function () {
+            if((context.runner && context.runner.isRunning())
+                || context.offLineMode
+                || context.liveUpdateCount != 0
+                || context.stopLiveUpdate) { return; }
+
+            context.quickPiConnection.startTransaction();
+
+            for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+                var sensor = infos.quickPiSensors[iSensor];
+
+                updateLiveSensor(sensor);
+            }
+
+            context.quickPiConnection.endTransaction();
+        }, 200);
+    };
+
+    function updateLiveSensor(sensor) {
+        if (findSensorDefinition(sensor).isSensor && findSensorDefinition(sensor).getLiveState) {
+            context.liveUpdateCount++;
+
+            //console.log("updateLiveSensor " + sensor.name, context.liveUpdateCount);
+
+            findSensorDefinition(sensor).getLiveState(sensor, function (returnVal) {
+                context.liveUpdateCount--;
+
+                //console.log("updateLiveSensor callback" + sensor.name, context.liveUpdateCount);
+
+                if (!sensor.removed) {
+                    sensor.state = returnVal;
+                    drawSensor(sensor);
+                }
+            });
+        }
+    }
+
+    context.changeBoard = function(newboardname)
+    {
+        if (context.board == newboardname)
+            return;
+
+        var board = null;
+        for (var i = 0; i < boardDefinitions.length; i++) {
+            board = boardDefinitions[i];
+
+            if (board.name == newboardname)
+                break;
+        }
+
+        if (board == null)
+            return;
+
+        context.board = newboardname;
+        setSessionStorage('board', newboardname);
+
+        if (infos.customSensors) {
+            for (var i = 0; i < infos.quickPiSensors.length; i++) {
+                var sensor = infos.quickPiSensors[i];
+                sensor.removed = true;
+            }
+            infos.quickPiSensors = [];
+
+            if (board.builtinSensors) {
+                for (var i = 0; i < board.builtinSensors.length; i++) {
+                    var sensor = board.builtinSensors[i];
+
+                    var newSensor = {
+                        "type": sensor.type,
+                        "port": sensor.port,
+                        "builtin": true,
+                    };
+
+                    if (sensor.subType) {
+                        newSensor.subType = sensor.subType;
+                    }
+
+                    newSensor.name = getSensorSuggestedName(sensor.type, sensor.suggestedName);
+
+                    sensor.state = null;
+                    sensor.callsInTimeSlot = 0;
+                    sensor.lastTimeIncrease = 0;
+
+                    infos.quickPiSensors.push(newSensor);
+                }
+            }
+        } else {
+            for (var i = 0; i < infos.quickPiSensors.length; i++) {
+                var sensor = infos.quickPiSensors[i];
+                sensorAssignPort(sensor);
+            }
+        }
+
+        context.resetSensorTable();
+        context.reset();
+    };
+
+
+
+    context.board = "quickpi";
+
+    if (getSessionStorage('board'))
+        context.changeBoard(getSessionStorage('board'));
+
+    /**
+     * This method allow us to save the sensors inside of the variable additional.
+     * If other things must be saved from quickPi later, it can be saved inside of this variable.
+     * @param additional The additional object saved inside of the xml
+     */
+    context.saveAdditional = function(additional) {
+        // we don't need to save sensors if user can't modify them
+        if (!infos.customSensors)
+            return;
+
+        additional.quickpiSensors = [];
+        for (var i = 0; i < infos.quickPiSensors.length; i++) {
+            var currentSensor = infos.quickPiSensors[i];
+            var savedSensor = {
+                type: currentSensor.type,
+                port: currentSensor.port,
+                name: currentSensor.name
+            };
+            if (currentSensor.subType)
+                savedSensor.subType = currentSensor.subType;
+            additional.quickpiSensors.push(savedSensor);
+        }
+    };
+
+    /**
+     * This function loads all additional stuff from the object "additional" for quickpi.
+     * For now on it only loads the sensor
+     * @param additional The additional variable which contains the sensors
+     */
+    context.loadAdditional = function(additional) {
+        // we load sensors only if custom sensors is available
+        if (!infos.customSensors)
+            return;
+
+        var newSensors = additional.quickpiSensors;
+
+        // we don't verify if sensors are empty or not, because if they are it is maybe meant this
+        // way by the user
+        if (!newSensors)
+            return;
+
+        for (var i = 0; i < infos.quickPiSensors.length; i++) {
+            var sensor = infos.quickPiSensors[i];
+            sensor.removed = true;
+        }
+
+        infos.quickPiSensors = [];
+
+        for (var i = 0; i < newSensors.length; i++) {
+            var sensor = {
+                type: newSensors[i].type,
+                port: newSensors[i].port,
+                name: newSensors[i].name
+            };
+
+            if (newSensors[i].subType)
+                sensor.sybType = newSensors[i].subType;
+
+            sensor.state = null;
+            sensor.callsInTimeSlot = 0;
+            sensor.lastTimeIncrease = 0;
+
+            infos.quickPiSensors.push(sensor);
+        }
+
+        context.recreateDisplay = true;
+        this.resetDisplay();
+    };
+
+    context.resetDisplay = function() {
+        if (!context.display || !this.raphaelFactory)
+            return;
+
+
+        context.autoGrading = context.displayAutoGrading;
+
+        if (context.recreateDisplay || !paper)
+        {
+            context.createDisplay();
+            context.recreateDisplay = false;
+        }
+
+        paper.setSize(($('#virtualSensors').width() * context.quickPiZoom), $('#virtualSensors').height());
+
+        var area = paper.width * paper.height;
+        context.compactLayout = false;
+        if (area < 218700)
+        {
+            context.compactLayout = true;
+        }
+
+        if (context.sensorDivisions) {
+            context.sensorDivisions.remove();
+        }
+
+        context.sensorDivisions = paper.set();
+
+        // Fix this so we don't have to recreate this.
+        if (context.timeLineCurrent)
+        {
+            context.timeLineCurrent.remove();
+            context.timeLineCurrent = null;
+        }
+
+        if (context.timeLineCircle)
+        {
+            context.timeLineCircle.remove();
+            context.timeLineCircle = null;
+        }
+
+        if (context.timeLineTriangle) {
+            context.timeLineTriangle.remove();
+            context.timeLineTriangle = null;
+        }
+
+        if (context.autoGrading) {
+            if (context.sensorStates)
+                context.sensorStates.remove();
+            context.sensorStates = paper.set();
+            //paper.clear(); // Do this for now.
+
+            var numSensors = infos.quickPiSensors.length;
+            var sensorSize = Math.min(paper.height / numSensors * 0.80, $('#virtualSensors').width() / 10);
+
+            //var sensorSize = Math.min(paper.height / (numSensors + 1));
+
+
+            context.timeLineSlotHeight = Math.min(paper.height / (numSensors + 1));
+            context.sensorSize = sensorSize * .90;
+
+            context.timelineStartx = context.sensorSize * 3;
+
+            var maxTime = context.maxTime;
+            if (maxTime == 0)
+                maxTime = 1000;
+
+            if (!context.loopsForever)
+                maxTime = Math.floor(maxTime * 1.05);
+
+            context.pixelsPerTime = (paper.width - context.timelineStartx - 30) / maxTime;
+
+            context.timeLineY = 25 + (context.timeLineSlotHeight * (infos.quickPiSensors.length));
+            
+
+            var color = true;
+
+            for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+                var sensor = infos.quickPiSensors[iSensor];
+
+                sensor.drawInfo = {
+                    x: 0,
+                    y: 10 + (context.timeLineSlotHeight * iSensor),
+                    width: sensorSize * .90,
+                    height: sensorSize * .90
+                };
+
+                var rect = paper.rect(0, sensor.drawInfo.y, paper.width, context.timeLineSlotHeight);
+
+                rect.attr({
+                        "fill": color ? "#0000FF" : "#00FF00",
+                        "stroke": "none",
+                        "opacity": 0.03,
+                    });
+                context.sensorDivisions.push(rect);
+                color = !color;
+            }
+
+            drawTimeLine();
+
+            for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+                var sensor = infos.quickPiSensors[iSensor];
+
+                drawSensor(sensor);
+                sensor.timelinelastxlabel = 0;
+
+                if (context.gradingStatesBySensor.hasOwnProperty(sensor.name)) {
+                    var states = context.gradingStatesBySensor[sensor.name];
+                    var startTime = 0;
+                    var lastState = null;
+                    sensor.lastAnalogState = null;
+
+                    for (var iState = 0; iState < states.length; iState++) {
+                        var state = states[iState];
+
+                        drawSensorTimeLineState(sensor, lastState, startTime, state.time, "expected", true);
+
+                        startTime = state.time;
+                        lastState = state.state;
+                    }
+
+                    drawSensorTimeLineState(sensor, lastState, state.time, context.maxTime, "expected", true);
+                    
+                    if (!context.loopsForever)
+                        drawSensorTimeLineState(sensor, lastState, startTime, maxTime, "finnish", false);
+
+                    sensor.lastAnalogState = null;
+                }
+            }
+
+
+            for (var iState = 0; iState < context.timeLineStates.length; iState++) {
+                var timelinestate = context.timeLineStates[iState];
+
+                drawSensorTimeLineState(timelinestate.sensor,
+                    timelinestate.state,
+                    timelinestate.startTime,
+                    timelinestate.endTime,
+                    timelinestate.type,
+                    true);
+            }
+        } else {
+            var nSensors = infos.quickPiSensors.length;
+
+            infos.quickPiSensors.forEach(function (sensor) {
+                var cellsAmount = findSensorDefinition(sensor).cellsAmount;
+                if (cellsAmount) {
+                    nSensors += cellsAmount(paper) - 1;
+                }
+            });
+
+            if (infos.customSensors) {
+                nSensors++;
+            }
+
+            if (nSensors < 4)
+                nSensors = 4;
+
+            // TODO : be carefull, the geometry is reversed for cols and rows I think
+            var geometry = null;
+            if (context.compactLayout)
+                geometry = squareSize(paper.width, paper.height, nSensors, 2);
+            else
+                geometry = squareSize(paper.width, paper.height, nSensors, 1);
+
+            context.sensorSize = geometry.size * .10;
+
+            var iSensor = 0;
+
+            for (var col = 0; col < geometry.cols; col++) {
+                var y = geometry.size * col;
+
+                var line = paper.path(["M", 0,
+                    y,
+                    "L", paper.width,
+                    y]);
+                context.sensorDivisions.push(line);
+
+                line.attr({
+                    "stroke-width": 1,
+                    "stroke": "lightgrey",
+                    "stroke-linecapstring": "round"
+                });
+
+                for (var row = 0; row < geometry.rows; row++) {
+                    var x = paper.width / geometry.rows * row;
+                    var y1 = y + geometry.size / 4;
+                    var y2 = y + geometry.size * 3 / 4;
+                    var cells = 1;
+                    var sensor = infos.quickPiSensors[iSensor];
+                    var foundsize = 0;
+
+                    var cellsAmount = null;
+                    if (sensor)
+                         cellsAmount = findSensorDefinition(sensor).cellsAmount;
+
+                    if (cellsAmount)
+                        cells = cellsAmount(paper);
+
+                    // Particular case if we have a screen and only 2 columns, we can put the
+                    // cells of the screen at 2 because the display is still good with it.
+                    // I used rows, because I think that for geometry, rows and cols are reversed. You can try to change
+                    // it and see the result in animal connecte.
+                    if (sensor && sensor.type === "screen" && cells > geometry.rows && cells == 3 && geometry.rows == 2)
+                        cells = 2;
+
+                    line = paper.path(["M", x,
+                        y1,
+                        "L", x,
+                        y2]);
+                    context.sensorDivisions.push(line);
+
+                    line.attr({
+                        "stroke-width": 1,
+                        "stroke": "lightgrey",
+                        "stroke-linecapstring": "round"
+                    });
+
+                    var foundrows = false;
+                    var bump = false;
+
+                    while (!foundrows && !bump)
+                    {
+                        var rowsleft = geometry.rows - row;
+                        if (cells > rowsleft)
+                        {
+                            for (var iNewSensor = iSensor + 1; iNewSensor < infos.quickPiSensors.length; iNewSensor++)
+                            {
+                                var newSensor = infos.quickPiSensors[iNewSensor];
+
+                                cells = 1;
+                                cellsAmount = findSensorDefinition(newSensor).cellsAmount;
+                                
+                                if (cellsAmount)
+                                    cells = cellsAmount(paper);
+
+                                if (cells == 1)
+                                {
+                                    infos.quickPiSensors[iNewSensor] = sensor;
+                                    infos.quickPiSensors[iSensor] = newSensor;
+                                    sensor = newSensor;
+                                    foundrows = true;
+                                    break;
+                                }
+                            }
+                            bump = true;
+                        }
+                        else
+                        {
+                            foundrows = true;
+                        }
+                    }
+
+                    if (bump)
+                        continue;
+
+
+                    if (iSensor == infos.quickPiSensors.length && infos.customSensors) {
+                        drawCustomSensorAdder(x, y, geometry.size);
+                    } else if (infos.quickPiSensors[iSensor]) {                        
+                        row += cells - 1;
+
+                        sensor.drawInfo = {
+                                x: x,
+                                y: y,
+                                width: (paper.width / geometry.rows) * cells,
+                                height: geometry.size
+                        }
+
+                        drawSensor(sensor);
+                    }
+                    iSensor++;
+                }
+            }
+        }
+    }
+
+    // Reset the context's display
+    context.createDisplay = function () {
+        // Do something here
+        //$('#grid').html('Display for the library goes here.');
+
+        // Ask the parent to update sizes
+        //context.blocklyHelper.updateSize();
+        //context.updateScale();
+
+        if (!context.display || !this.raphaelFactory)
+            return;
+
+
+        var connectionHTML = "
" +
+            "   " +
+            "   " +
+            "       " +
+            "       " +
+            "   " +
+            "   " +
+            "       " +
+            "       " +
+            "   " +
+            "
";
+
+        var piUi = getQuickPiOption('disableConnection') ? '' : connectionHTML;
+
+        var hasIntroControls = $('#taskIntro').find('#introControls').length;
+        if (!hasIntroControls) {
+            $('#taskIntro').append("
");
+        }
+        if (introControls === null) {
+            introControls = piUi + $('#introControls').html();
+        }
+        $('#introControls').html(introControls);
+        $('#taskIntro').addClass('piui');
+
+        $('#grid').html("
"
+            + "
");
+
+
+        if (!context.quickPiZoom || !context.autoGrading)
+            context.quickPiZoom = 1;
+
+        this.raphaelFactory.destroyAll();
+        paper = this.raphaelFactory.create(
+                "paperMain",
+                "virtualSensors",
+                ($('#virtualSensors').width() * context.quickPiZoom),
+                $('#virtualSensors').height()
+        );
+
+            if (context.autoGrading) {
+                $('#virtualSensors').css("overflow-y", "hidden");
+                $('#virtualSensors').css("overflow-x", "auto");
+
+                // Allow horizontal zoom on grading
+                paper.canvas.onwheel = function(event) {
+                        var originalzoom = context.quickPiZoom;
+                        context.quickPiZoom += event.deltaY * -0.001;
+                    
+                        if (context.quickPiZoom < 1)
+                            context.quickPiZoom = 1;
+    
+                        if (originalzoom != context.quickPiZoom)
+                            context.resetDisplay();
+                };                
+
+                $('#virtualSensors').scroll(function(event) {
+                    for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+                        var sensor = infos.quickPiSensors[iSensor];
+
+                        drawSensor(sensor);
+                    }
+                });        
+            }
+            else
+            {
+                $('#virtualSensors').css("overflow-y", "hidden");
+                $('#virtualSensors').css("overflow", "hidden");
+            }
+        
+
+        if (infos.quickPiSensors == "default")
+        {
+            infos.quickPiSensors = [];
+            addDefaultBoardSensors();
+        }
+
+        context.blocklyHelper.updateSize();
+
+        context.inUSBConnection = false;
+        context.inBTConnection = false;
+        context.releasing = false;
+        context.offLineMode = true;
+
+        showasReleased();
+
+        if (context.quickPiConnection.isConnecting()) {
+            showasConnecting();
+        }
+
+        if (context.quickPiConnection.isConnected()) {
+            showasConnected();
+
+            context.offLineMode = false;
+        }
+
+        $('#piconnect').click(function () {
+            var connectionDialogHTML = "
" +
+                "   
" +
+                "       
" +
+                "           " +
+                            strings.messages.raspiConfig +
+                "       
" +
+                "       
" +
+                "   
" +
+                "   
" +
+                "       
" +
+                "           
" +
+                "               " +
+                "               " +
+                "               " +
+                "               " +
+                "           
" +
+                "           
" +
+                "               
" +
+                "                   " +
+                "                   
" +
+                "                       
Aa
" +
+                "                       " +
+                "                   
" +
+                "               
" +
+                "               
" +
+                "                   " +
+                "                   
" +
+                "                       " +
+                "                       " +
+                "                   
" +
+                "               
" +
+                "               
" +
+                "                   " +
+                "                   
" +
+                "                       
123
" +
+                "                       " +
+                "                   
" +
+                "               
" +
+                "               
" +
+                "                   " + strings.messages.connectTroughtTunnel +
+                "               
" +
+                "           
" +
+                "           
" +
+                "               " +
+                "           
" +
+                "           
" +
+                "               " +
+                "               
" +
+                "                   " +
+                                        strings.messages.connectToLocalhost +
+                "               
" +
+                "               
" +
+                "                   " +
+                                        strings.messages.connectToWindowLocation +
+                "               
" +
+                "           
" +
+                "       
" +
+                "       
" +
+                "           " +
+                "           " +
+                "       
" +
+                "   
" +
+                "
";
+
+            window.displayHelper.showPopupDialog(connectionDialogHTML);
+
+            if (context.offLineMode) {
+                $('#pirelease').attr('disabled', true);
+            }
+            else {
+                $('#pirelease').attr('disabled', false);
+            }
+
+            $('#piconnectok').attr('disabled', true);
+
+            $('#piconnectionlabel').hide();
+
+            if (context.quickPiConnection.isConnected()) {
+                if (getSessionStorage('connectionMethod') == "USB") {
+                    $('#piconwifi').removeClass('active');
+                    $('#piconusb').addClass('active');
+                    $('#pischoolcon').hide();
+                    $('#piaddress').val("192.168.233.1");
+
+                    $('#piconnectok').attr('disabled', true);
+                    $('#piconnectionlabel').show();
+                    $('#piconnectionlabel').text(strings.messages.canConnectoToUSB)
+
+                    context.inUSBConnection = true;
+                    context.inBTConnection = false;
+                } else if (getSessionStorage('connectionMethod') == "BT") {
+                    $('#piconwifi').removeClass('active');
+                    $('#piconbt').addClass('active');
+                    $('#pischoolcon').hide();
+
+                    $('#piaddress').val("192.168.233.2");
+
+                    $('#piconnectok').attr('disabled', true);
+                    $('#piconnectionlabel').show();
+                    $('#piconnectionlabel').text(strings.messages.canConnectoToBT)
+
+                    context.inUSBConnection = false;
+                    context.inBTConnection = true;
+                } else if (getSessionStorage('connectionMethod') == "LOCAL") {
+                    $('#piconlocal').trigger("click");
+                }
+            } else {
+                setSessionStorage('connectionMethod', "WIFI");
+            }
+
+            $('#piaddress').on('input', function (e) {
+
+                if (context.offLineMode)
+                {
+                    var content = $('#piaddress').val();
+
+                    if (content)
+                        $('#piconnectok').attr('disabled', false);
+                    else
+                        $('#piconnectok').attr('disabled', true);
+                }
+            });
+
+
+            if (getSessionStorage('pilist')) {
+                populatePiList(JSON.parse(getSessionStorage('pilist')));
+            }
+
+            if (getSessionStorage('raspberryPiIpAddress')) {
+                $('#piaddress').val(getSessionStorage('raspberryPiIpAddress'));
+                $('#piaddress').trigger("input");
+            }
+
+            if (getSessionStorage('schoolkey')) {
+                $('#schoolkey').val(getSessionStorage('schoolkey'));
+                $('#pigetlist').attr("disabled", false);
+            }
+
+            function setLocalIp()
+            {
+                var localvalue = $('input[name=pilocalconnectiontype]:checked').val()
+
+                if (localvalue == "localhost") {
+                    $('#piaddress').val(localhost);
+                    $('#piaddress').trigger("input");
+                } else {
+                    $('#piaddress').val(window.location.hostname);
+                    $('#piaddress').trigger("input");
+                }
+            }
+
+            $('input[type=radio][name=pilocalconnectiontype]').change(function() {
+                setLocalIp();
+            });
+           
+            function cleanUSBBTIP()
+            {
+                var ipaddress = $('#piaddress').val();
+
+                if (ipaddress == "192.168.233.1" ||
+                    ipaddress == "192.168.233.2" ||
+                    ipaddress == "localhost" ||
+                    ipaddress == window.location.hostname)
+                {
+                        $('#piaddress').val("");
+                        $('#piaddress').trigger("input");
+                        
+                        var schoolkey = $('#schoolkey').val();
+                        if (schoolkey.length > 1)
+                            $('#pigetlist').trigger("click");
+                }
+            }
+
+            cleanUSBBTIP();
+
+            $('#panel-body-local').hide();
+
+            if (context.localhostAvailable || context.windowLocationAvailable)
+            {
+                if (!context.quickPiConnection.isConnected() ||
+                    getSessionStorage('connectionMethod') == "LOCAL")
+                {
+                    $('#piconsel .btn').removeClass('active');
+                    $('#piconlocal').addClass('active');
+
+                    
+                    $('#pischoolcon').hide();
+                    $('#piconnectionlabel').hide();
+                    $('#panel-body-local').show();
+                    setSessionStorage('connectionMethod', "LOCAL");
+
+                    if (context.localhostAvailable &&
+                        context.windowLocationAvailable)
+                    {
+                        $("#piconnectolocalhostcheckbox").prop("checked", true);
+
+                        setLocalIp();
+                    } else if (context.localhostAvailable) {
+                        $('#piconnectolocalhost').hide();
+                        $('#piconnectocurrenturlcheckbox').hide();
+
+                        setLocalIp();
+                    } else if (context.windowLocationAvailable) {
+                        $('#piconnectocurrenturl').hide();
+                        $('#piconnectolocalhostcheckbox').hide();
+
+                        setLocalIp();
+                    }
+                }
+            }
+            else
+            {
+                $('#panel-body-local').hide();
+                $("#piconlocal").hide();
+            }
+
+
+            $('#piconnectok').click(function () {
+                context.inUSBConnection = false;
+                context.inBTConnection = false;
+
+                $('#popupMessage').hide();
+                window.displayHelper.popupMessageShown = false;
+
+                if ($('#piusetunnel').is(":checked")) {
+
+                    var piname = $("#pilist option:selected").text().split("-")[0].trim();
+
+                    var url = "ws://api.quick-pi.org/client/" +
+                        $('#schoolkey').val()  + "-" +
+                        piname +
+                        "/api/v1/commands";
+
+                    setSessionStorage('quickPiUrl', url);
+                    context.quickPiConnection.connect(url);
+
+                } else {
+                    var ipaddress = $('#piaddress').val();
+                    setSessionStorage('raspberryPiIpAddress', ipaddress);
+
+                    showasConnecting();
+                    var url = "ws://" + ipaddress + ":5000/api/v1/commands";
+                    setSessionStorage('quickPiUrl', url);
+
+                    context.quickPiConnection.connect(url);
+                }
+            });
+
+            $('#pirelease').click(function () {
+                context.inUSBConnection = false;
+                context.inBTConnection = false;
+
+                $('#popupMessage').hide();
+                window.displayHelper.popupMessageShown = false;
+
+                // IF connected release lock
+                context.releasing = true;
+                context.quickPiConnection.releaseLock();
+            });
+
+            $('#picancel').click(function () {
+                context.inUSBConnection = false;
+                context.inBTConnection = false;
+
+                $('#popupMessage').hide();
+                window.displayHelper.popupMessageShown = false;
+            });
+
+            $('#schoolkey').on('input', function (e) {
+                var schoolkey = $('#schoolkey').val();
+                setSessionStorage('schoolkey', schoolkey);
+
+                if (schoolkey)
+                    $('#pigetlist').attr("disabled", false);
+                else
+                    $('#pigetlist').attr("disabled", true);
+            });
+
+
+            $('#pigetlist').click(function () {
+                var schoolkey = $('#schoolkey').val();
+
+                fetch('http://www.france-ioi.org/QuickPi/list.php?school=' + schoolkey)
+                    .then(function (response) {
+                        return response.json();
+                    })
+                    .then(function (jsonlist) {
+                        populatePiList(jsonlist);
+                    });
+            });
+
+            // Select device connexion methods
+            $('#piconsel .btn').click(function () {
+                if (!context.quickPiConnection.isConnected()) {
+                    if (!$(this).hasClass('active')) {
+                        $('#piconsel .btn').removeClass('active');
+                        $(this).addClass('active');
+                    }
+                }
+            });
+
+            $('#piconlocal').click(function () {
+                context.inUSBConnection = false;
+                context.inBTConnection = false;
+
+                cleanUSBBTIP();
+
+                if (!context.quickPiConnection.isConnected()) {
+                    setLocalIp();
+                    setSessionStorage('connectionMethod', "LOCAL");
+                    $(this).addClass('active');
+                    $('#panel-body-local').show();
+                    $('#pischoolcon').hide();
+                    $('#piconnectionlabel').hide();
+
+                    $(this).addClass('active');
+                }
+
+            });
+
+            $('#piconwifi').click(function () {
+                context.inUSBConnection = false;
+                context.inBTConnection = false;
+
+                cleanUSBBTIP();
+
+                if (!context.quickPiConnection.isConnected()) {
+                    setSessionStorage('connectionMethod', "WIFI");
+                    $(this).addClass('active');
+                    $('#panel-body-local').hide();
+                    $('#pischoolcon').show();
+                    $('#piconnectionlabel').hide();
+                }
+
+            });
+
+            $('#piconusb').click(function () {
+                if (!context.quickPiConnection.isConnected()) {
+                    setSessionStorage('connectionMethod', "USB");
+                    $('#piconnectok').attr('disabled', true);
+                    $('#panel-body-local').hide();
+                    $('#piconnectionlabel').show();
+                    $('#piconnectionlabel').html(strings.messages.cantConnectoToUSB)
+
+                    $(this).addClass('active');
+                    $('#pischoolcon').hide();
+                    $('#piaddress').val("192.168.233.1");
+
+                    context.inUSBConnection = true;
+                    context.inBTConnection = false;
+
+                    function updateUSBAvailability(available) {
+
+                        if  (context.inUSBConnection && context.offLineMode) {
+                            if (available) {
+                                $('#piconnectok').attr('disabled', false);
+
+                                $('#piconnectionlabel').text(strings.messages.canConnectoToUSB)
+                            } else {
+                                $('#piconnectok').attr('disabled', true);
+
+                                $('#piconnectionlabel').html(strings.messages.cantConnectoToUSB)
+                            }
+
+                            setTimeout(function() { 
+                                context.quickPiConnection.isAvailable("192.168.233.1", updateUSBAvailability);
+                            }, 1000);
+                        }
+                    }
+
+                    updateUSBAvailability(false);
+
+
+                }
+            });
+
+            $('#piconbt').click(function () {
+                $('#piconnectionlabel').show();
+                if (!context.quickPiConnection.isConnected()) {
+                    setSessionStorage('connectionMethod', "BT");
+                    $('#piconnectok').attr('disabled', true);
+                    $('#panel-body-local').hide();
+                    $('#piconnectionlabel').show();
+                    $('#piconnectionlabel').html(strings.messages.cantConnectoToBT)
+
+                    $(this).addClass('active');
+                    $('#pischoolcon').hide();
+
+                    $('#piaddress').val("192.168.233.2");
+
+                    context.inUSBConnection = false;
+                    context.inBTConnection = true;
+
+                    function updateBTAvailability(available) {
+
+                        if  (context.inBTConnection && context.offLineMode) {
+                            if (available) {
+                                $('#piconnectok').attr('disabled', false);
+
+                                $('#piconnectionlabel').text(strings.messages.canConnectoToBT)
+                            } else {
+                                $('#piconnectok').attr('disabled', true);
+
+                                $('#piconnectionlabel').html(strings.messages.cantConnectoToBT)
+                            }
+
+                            setTimeout(function() { 
+                                context.quickPiConnection.isAvailable("192.168.233.2", updateBTAvailability);
+                            }, 1000);                            
+                        }
+                    }
+
+                    updateBTAvailability(false);
+                }
+            });
+
+            function populatePiList(jsonlist) {
+                setSessionStorage('pilist', JSON.stringify(jsonlist));
+
+                var select = document.getElementById("pilist");
+                var first = true;
+
+                $('#pilist').empty();
+                $('#piusetunnel').attr('disabled', true);
+
+                for (var i = 0; i < jsonlist.length; i++) {
+                    var pi = jsonlist[i];
+
+                    var el = document.createElement("option");
+
+                    var minutes = Math.round(jsonlist[i].seconds_since_ping / 60);
+                    var timeago = "";
+
+                    if (minutes < 60)
+                        timeago = strings.messages.minutesago.format(minutes);
+                    else
+                        timeago = strings.messages.hoursago;
+
+
+                    el.textContent = jsonlist[i].name + " - " + timeago;
+                    el.value = jsonlist[i].ip;
+
+                    select.appendChild(el);
+
+                    if (first) {
+                        $('#piaddress').val(jsonlist[i].ip);
+                        $('#piaddress').trigger("input");
+                        first = false;
+                        $('#pilist').prop('disabled', false);
+
+                        $('#piusetunnel').attr('disabled', false);
+                    }
+                }
+            }
+
+            $('#pilist').on('change', function () {
+                $("#piaddress").val(this.value);
+            });
+        });
+
+
+        $('#pichangehat').click(function () {
+            window.displayHelper.showPopupDialog("
" +
+                "   
" +
+                "       
" +
+                "           " +
+                            strings.messages.chooseBoard +
+                "       
" +
+                "       
" +
+                "   
" +
+                "   
" +
+                "       
" +
+                "       
" +
+                "       
" +
+                "           " +
+                "       
" +
+                "   
" +
+                "
");
+
+            $('#picancel').click(function () {
+                $('#popupMessage').hide();
+                window.displayHelper.popupMessageShown = false;
+            });
+
+
+            for (var i = 0; i < boardDefinitions.length; i++) {
+                let board = boardDefinitions[i];
+                var image = document.createElement('img');
+                image.src = getImg(board.image);
+
+                $('#boardlist').append(image).append("  ");
+
+                image.onclick = function () {
+                    $('#popupMessage').hide();
+                    window.displayHelper.popupMessageShown = false;
+
+                    context.changeBoard(board.name);
+                }
+            }
+        });
+
+
+        $('#pihatsetup').click(function () {
+
+                window.displayHelper.showPopupDialog("
" +
+                    "   
" +
+                    "       
" +
+                    "           " +
+                                strings.messages.nameandports +
+                    "       
" +
+                    "       
" +
+                    "   
" +
+                    "   
" +
+                    "       " +
+                    "           " +
+                    "               " +
+                    "               " +
+                    "               " +
+                    "           " +
+                    "       
" + strings.messages.name + "" + strings.messages.port + "" + strings.messages.state + "
" +
+                    "   " +
+                    "   
" +
+                    "
");
+
+                var table = document.getElementById("sensorTable");
+                for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+                    var sensor = infos.quickPiSensors[iSensor];
+
+                    function addNewRow()
+                    {
+                        var row = table.insertRow();
+                        var type = row.insertCell();
+                        var name = row.insertCell();
+                        var port = row.insertCell();
+
+                        return [type, name, port];
+                    }
+
+                    
+                    if (sensor.type == "stick")
+                    {
+                        var gpios = findSensorDefinition(sensor).gpios;
+                        var cols = addNewRow();
+
+                        cols[0].appendChild(document.createTextNode(sensor.type));
+                        cols[1].appendChild(document.createTextNode(sensor.name + ".up"));
+                        cols[2].appendChild(document.createTextNode("D" + gpios[0]));
+
+                        var cols = addNewRow();
+
+                        cols[0].appendChild(document.createTextNode(sensor.type));
+                        cols[1].appendChild(document.createTextNode(sensor.name + ".down"));
+                        cols[2].appendChild(document.createTextNode("D" + gpios[1]));
+                        var cols = addNewRow();
+
+                        cols[0].appendChild(document.createTextNode(sensor.type));
+                        cols[1].appendChild(document.createTextNode(sensor.name + ".left"));
+                        cols[2].appendChild(document.createTextNode("D" + gpios[2]));
+                        var cols = addNewRow();
+
+                        cols[0].appendChild(document.createTextNode(sensor.type));
+                        cols[1].appendChild(document.createTextNode(sensor.name + ".right"));
+                        cols[2].appendChild(document.createTextNode("D" + gpios[3]));
+                        var cols = addNewRow();
+
+                        cols[0].appendChild(document.createTextNode(sensor.type));
+                        cols[1].appendChild(document.createTextNode(sensor.name + ".center"));
+                        cols[2].appendChild(document.createTextNode("D" + gpios[4]));
+
+/*
+                        $('#stickupname').text(sensor.name + ".up");
+
+                        $('#stickdownname').text(sensor.name + ".down");
+                        $('#stickleftname').text(sensor.name + ".left");
+                        $('#stickrightname').text(sensor.name + ".right");
+                        $('#stickcentername').text(sensor.name + ".center");
+    
+                        $('#stickupport').text("D" + gpios[0]);
+                        $('#stickdownport').text("D" + gpios[1]);
+                        $('#stickleftport').text("D" + gpios[2]);
+                        $('#stickrightport').text("D" + gpios[3]);
+                        $('#stickcenterport').text("D" + gpios[4]);
+    
+                        $('#stickupstate').text(sensor.state[0] ? "ON" : "OFF");
+                        $('#stickdownstate').text(sensor.state[1] ? "ON" : "OFF");
+                        $('#stickleftstate').text(sensor.state[2] ? "ON" : "OFF");
+                        $('#stickrightstate').text(sensor.state[3] ? "ON" : "OFF");
+                        $('#stickcenterstate').text(sensor.state[4] ? "ON" : "OFF");
+    */
+                    }
+                    else
+                    {          
+                        var cols = addNewRow();
+    
+    
+                        cols[0].appendChild(document.createTextNode(sensor.type));
+                        cols[1].appendChild(document.createTextNode(sensor.name));
+                        cols[2].appendChild(document.createTextNode(sensor.port));
+                    }
+           
+                }
+
+                $('#picancel').click(function () {
+                    $('#popupMessage').hide();
+                    window.displayHelper.popupMessageShown = false;
+                });
+
+        });
+
+        $('#piinstall').click(function () {
+            context.blocklyHelper.reportValues = false;
+
+            var python_code = context.generatePythonSensorTable();
+            python_code += "\n\n";
+            python_code += window.task.displayedSubTask.blocklyHelper.getCode('python');
+
+            python_code = python_code.replace("from quickpi import *", "");
+
+            if (context.runner)
+                context.runner.stop();
+
+            context.installing = true;
+            $('#piinstallprogresss').show();
+            $('#piinstallcheck').hide();
+
+            context.quickPiConnection.installProgram(python_code, function () {
+                context.justinstalled = true;
+                $('#piinstallprogresss').hide();
+                $('#piinstallcheck').show();
+            });
+        });
+
+
+        if (parseInt(getSessionStorage('autoConnect'))) {
+            if (!context.quickPiConnection.isConnected() && !context.quickPiConnection.isConnecting()) {
+                $('#piconnect').attr("disabled", true);
+                context.quickPiConnection.connect(getSessionStorage('quickPiUrl'));
+            }
+        }
+    };
+
+    function addDefaultBoardSensors() {
+        var board = getCurrentBoard();
+        var boardDefaultSensors = board.default;
+
+        if (!boardDefaultSensors)
+            boardDefaultSensors = board.builtinSensors;
+
+        if (boardDefaultSensors)
+        {
+            for (var i = 0; i < boardDefaultSensors.length; i++) {
+                var sensor = boardDefaultSensors[i];
+
+                var newSensor = {
+                    "type": sensor.type,
+                    "port": sensor.port,
+                    "builtin": true,
+                };
+
+                if (sensor.subType) {
+                    newSensor.subType = sensor.subType;
+                }
+
+                newSensor.name = getSensorSuggestedName(sensor.type, sensor.suggestedName);
+
+                sensor.state = null;
+                sensor.callsInTimeSlot = 0;
+                sensor.lastTimeIncrease = 0;
+
+                infos.quickPiSensors.push(newSensor);
+            }
+
+            var newSensor = {
+                "type": "cloudstore",
+                "name": "cloud1",
+            };
+            infos.quickPiSensors.push(newSensor);
+        }
+
+    };
+
+    function getNewSensorSuggestedName(name) {
+        var maxvalue = 0;
+
+        for (var i = 0; i < infos.quickPiSensors.length; i++) {
+            var sensor = infos.quickPiSensors[i];
+
+            var firstdigit = sensor.name.search(/\d/);
+            if (firstdigit > 0) {
+                var namepart = sensor.name.substring(0, firstdigit);
+                var numberpart = parseInt(sensor.name.substring(firstdigit), 10);
+
+                if (name == namepart && numberpart > maxvalue) {
+                    maxvalue = numberpart;
+                }
+            }
+        }
+
+        return name + (maxvalue + 1);
+    }
+
+    function drawCustomSensorAdder(x, y, size) {
+        if (context.sensorAdder) {
+            context.sensorAdder.remove();
+        }
+
+        var centerx = x + size / 2;
+        var centery = y + size / 2;
+        var fontsize = size * .70;
+
+        context.sensorAdder = paper.text(centerx, centery, "+");
+
+        context.sensorAdder.attr({
+            "font-size": fontsize + "px",
+            fill: "lightgray"
+        });
+        context.sensorAdder.node.style = "-moz-user-select: none; -webkit-user-select: none;";
+
+        context.sensorAdder.click(function () {
+
+            window.displayHelper.showPopupDialog("
" +
+                "   
" +
+                "       
" +
+                "           " +
+                            strings.messages.addcomponent +
+                "       
" +
+                "       
" +
+                "   
" +
+                "   
" +
+                "       " +
+                "       
" +
+                "           
" +
+                "               " +
+                "           
" +
+                "           
" +
+                "               
" +
+                "                   
" +
+                "                       " +
+                "                   
" +
+                "              
" +
+                "              
" +
+                "                   
" +
+                "                       " +
+                "                   
" +
+                "                   " +
+                "               
" +
+                "           
" +
+                "       
" +
+                "   
" +
+                "   
" +
+                "       " +
+                "   
" +
+                "
");
+
+            var select = document.getElementById("selector-sensor-list");
+            for (var iSensorDef = 0; iSensorDef < sensorDefinitions.length; iSensorDef++) {
+                var sensorDefinition = sensorDefinitions[iSensorDef];
+
+                if (sensorDefinition.subTypes) {
+                    for (var iSubType = 0; iSubType < sensorDefinition.subTypes.length; iSubType++) {
+
+                        if (!sensorDefinition.pluggable && !sensorDefinition.subTypes[iSubType].pluggable)
+                            continue;
+
+
+                        var el = document.createElement("option");
+                        el.textContent = sensorDefinition.description;
+
+                        if (sensorDefinition.subTypes[iSubType].description)
+                            el.textContent = sensorDefinition.subTypes[iSubType].description;
+
+                        el.value = sensorDefinition.name;
+                        el.value += "-" + sensorDefinition.subTypes[iSubType].subType;
+                        select.appendChild(el);
+                    }
+                } else {
+                    if (!sensorDefinition.pluggable)
+                        continue;
+
+                    var el = document.createElement("option");
+                    el.textContent = sensorDefinition.description;
+                    el.value = sensorDefinition.name;
+
+                    select.appendChild(el);
+                }
+            }
+
+            var board = getCurrentBoard();
+            if (board.builtinSensors) {
+                for (var i = 0; i < board.builtinSensors.length; i++) {
+                    var sensor = board.builtinSensors[i];
+                    var sensorDefinition = findSensorDefinition(sensor);
+
+                    if (context.findSensor(sensor.type, sensor.port, false))
+                        continue;
+
+                    var el = document.createElement("option");
+
+                    el.textContent = sensorDefinition.description + strings.messages.builtin;
+                    el.value = sensorDefinition.name + "-";
+
+                    if (sensor.subType)
+                        el.value += sensor.subType;
+
+                    el.value += "-" + sensor.port;
+
+                    select.appendChild(el);
+                }
+            }
+
+            $('#selector-sensor-list').on('change', function () {
+                var values = this.value.split("-");
+                var builtinport = false;
+
+                var dummysensor = { type: values[0] };
+
+                if (values.length >= 2)
+                    if (values[1])
+                        dummysensor.subType = values[1];
+
+                if (values.length >= 3)
+                    builtinport = values[2];
+
+                var sensorDefinition = findSensorDefinition(dummysensor);
+
+                var imageContainer = document.getElementById("selector-image-container");
+                while (imageContainer.firstChild) {
+                    imageContainer.removeChild(imageContainer.firstChild);
+                }
+                for (var i = 0; i < sensorDefinition.selectorImages.length; i++) {
+                    var image = document.createElement('img');
+
+                    image.src = getImg(sensorDefinition.selectorImages[i]);
+
+                    imageContainer.appendChild(image);
+
+                    //$('#selector-sensor-image').attr("src", getImg(sensorDefinition.selectorImages[0]));
+                }
+
+
+                var portSelect = document.getElementById("selector-sensor-port");
+                $('#selector-sensor-port').empty();
+                var hasPorts = false;
+                if (builtinport) {
+                    var option = document.createElement('option');
+                    option.innerText = builtinport;
+                    option.value = builtinport;
+                    portSelect.appendChild(option);
+                    hasPorts = true;
+                } else {
+                    var ports = getCurrentBoard().portTypes[sensorDefinition.portType];
+                    if (sensorDefinition.portType == "i2c")
+                    {
+                        ports = ["i2c"];
+                    }
+
+                    for (var iPort = 0; iPort < ports.length; iPort++) {
+                        var port = sensorDefinition.portType + ports[iPort];
+                        if (sensorDefinition.portType == "i2c")
+                            port = "i2c";
+
+                        if (!isPortUsed(sensorDefinition.name, port)) {
+                            var option = document.createElement('option');
+                            option.innerText = port;
+                            option.value = port;
+                            portSelect.appendChild(option);
+                            hasPorts = true;
+                        }
+                    }
+                }
+
+
+
+                if (!hasPorts) {
+                    $('#selector-add-button').attr("disabled", true);
+
+                    var object_function = strings.messages.actuator;
+                    if (sensorDefinition.isSensor)
+                        object_function = strings.messages.sensor;
+
+                    $('#selector-label').text(strings.messages.noPortsAvailable.format(object_function, sensorDefinition.portType));
+                    $('#selector-label').show();
+                }
+                else {
+                    $('#selector-add-button').attr("disabled", false);
+                    $('#selector-label').hide();
+                }
+            });
+
+            $('#selector-add-button').click(function () {
+                var sensorType = $("#selector-sensor-list option:selected").val();
+                var values = sensorType.split("-");
+
+                var dummysensor = { type: values[0] };
+                if (values.length == 2)
+                    dummysensor.subType = values[1];
+
+                var sensorDefinition = findSensorDefinition(dummysensor);
+
+
+                var port = $("#selector-sensor-port option:selected").text();
+                var name = getNewSensorSuggestedName(sensorDefinition.suggestedName);
+
+                if(name == 'screen1') {
+                    // prepend screen because squareSize func can't handle cells wrap
+                    infos.quickPiSensors.unshift({
+                        type: sensorDefinition.name,
+                        subType: sensorDefinition.subType,
+                        port: port,
+                        name: name
+                    });                    
+
+                } else {
+                    infos.quickPiSensors.push({
+                        type: sensorDefinition.name,
+                        subType: sensorDefinition.subType,
+                        port: port,
+                        name: name
+                    });                    
+                }
+
+
+
+                $('#popupMessage').hide();
+                window.displayHelper.popupMessageShown = false;
+
+                context.resetSensorTable();
+                context.resetDisplay();
+            });
+
+
+            $("#selector-sensor-list").trigger("change");
+
+            $('#picancel').click(function () {
+                $('#popupMessage').hide();
+                window.displayHelper.popupMessageShown = false;
+            });
+        });
+    };
+
+    function isPortUsed(type, port) {
+        for (var i = 0; i < infos.quickPiSensors.length; i++) {
+            var sensor = infos.quickPiSensors[i];
+
+            if (port == "i2c")
+            {
+                if (sensor.type == type)
+                    return true;
+            } else {
+                if (sensor.port == port)
+                    return true;
+            }
+        }
+
+        return false;
+    };
+
+    // Straight from stack overflow :)
+    function squareSize(x, y, n, ratio) {
+        // Compute number of rows and columns, and cell size
+        var ratio = x / y * ratio;
+        var ncols_float = Math.sqrt(n * ratio);
+        var nrows_float = n / ncols_float;
+
+        // Find best option filling the whole height
+        var nrows1 = Math.ceil(nrows_float);
+        var ncols1 = Math.ceil(n / nrows1);
+        while (nrows1 * ratio < ncols1) {
+            nrows1++;
+            ncols1 = Math.ceil(n / nrows1);
+        }
+        var cell_size1 = y / nrows1;
+
+        // Find best option filling the whole width
+        var ncols2 = Math.ceil(ncols_float);
+        var nrows2 = Math.ceil(n / ncols2);
+        while (ncols2 < nrows2 * ratio) {
+            ncols2++;
+            nrows2 = Math.ceil(n / ncols2);
+        }
+        var cell_size2 = x / ncols2;
+
+        // Find the best values
+        var nrows, ncols, cell_size;
+        if (cell_size1 < cell_size2) {
+            nrows = nrows2;
+            ncols = ncols2;
+            cell_size = cell_size2;
+        } else {
+            nrows = nrows1;
+            ncols = ncols1;
+            cell_size = cell_size1;
+        }
+
+        return {
+            rows: ncols,
+            cols: nrows,
+            size: cell_size
+        };
+    }
+
+    function showasConnected() {
+        $('#piconnectprogress').hide();
+        $('#piinstallcheck').hide();
+        $('#piinstallprogresss').hide();
+        $('#piinstallui').show();
+
+        if (context.board == "quickpi")
+            $('#pihatsetup').show();
+        else
+            $('#pihatsetup').hide();
+
+        $('#piconnect').css('background-color', '#F9A423');
+
+        $('#piinstall').css('background-color', "#488FE1");
+
+        $('#piconnecttext').hide();
+    }
+
+    function showasConnecting() {
+        $('#piconnectprogress').show();
+        $('#piinstallcheck').hide();
+        $('#piinstallprogresss').hide();
+    }
+
+    function showasReleased() {
+        $('#piconnectprogress').hide();
+        $('#piinstallcheck').hide();
+        $('#piinstallprogresss').hide();
+        $('#piinstallui').hide();
+        $('#pihatsetup').hide();
+        $('#piconnect').css('background-color', '#F9A423');
+        $('#piconnecttext').show();
+    }
+
+
+    function showasDisconnected() {
+        $('#piconnectprogress').hide();
+        $('#piinstallcheck').hide();
+        $('#piinstallprogresss').hide();
+        $('#piinstall').css('background-color', 'gray');
+        $('#piconnect').css('background-color', 'gray');
+        $('#piconnecttext').hide();
+    }
+
+    function raspberryPiConnected() {
+        showasConnected();
+
+        context.resetSensorTable();
+
+        context.quickPiConnection.startNewSession();
+
+        context.liveUpdateCount = 0;
+        context.offLineMode = false;
+
+        setSessionStorage('autoConnect', "1");
+
+        context.recreateDisplay = true;
+        context.resetDisplay();
+
+        startSensorPollInterval();
+    }
+
+    function raspberryPiDisconnected(wasConnected, wrongversion) {
+
+        if (context.releasing || !wasConnected)
+            showasReleased();
+        else
+            showasDisconnected();
+
+        window.task.displayedSubTask.context.offLineMode = true;
+
+        if (context.quickPiConnection.wasLocked()) {
+            window.displayHelper.showPopupMessage(strings.messages.piPlocked, 'blanket');
+        } else if (wrongversion) {
+            window.displayHelper.showPopupMessage(strings.messages.wrongVersion, 'blanket');
+        } else if (!context.releasing && !wasConnected) {
+            window.displayHelper.showPopupMessage(strings.messages.cantConnect, 'blanket');
+        }
+
+        clearSensorPollInterval();
+
+        if (wasConnected && !context.releasing && !context.quickPiConnection.wasLocked() && !wrongversion) {
+            context.quickPiConnection.connect(getSessionStorage('quickPiUrl'));
+        } else {
+            // If I was never connected don't attempt to autoconnect again
+            setSessionStorage('autoConnect', "0");
+            window.task.displayedSubTask.context.resetDisplay();
+        }
+
+    }
+
+    function raspberryPiChangeBoard(board) {
+
+        if (board != "unknow")
+        {
+            window.task.displayedSubTask.context.changeBoard(board);
+            window.task.displayedSubTask.context.resetSensorTable();
+        }
+    }
+
+
+    // Update the context's display to the new scale (after a window resize for instance)
+    context.updateScale = function () {
+        if (!context.display) {
+            return;
+        }
+
+        var width = $('#virtualSensors').width();
+        var height =  $('#virtualSensors').height();
+
+        if (!context.oldwidth ||
+            !context.oldheight ||
+            context.oldwidth != width ||
+            context.oldheight != height) {
+
+            context.oldwidth = width;
+            context.oldheight =  height;
+
+            context.resetDisplay();
+        }
+    };
+
+    // When the context is unloaded, this function is called to clean up
+    // anything the context may have created
+    context.unload = function () {
+        // Do something here
+        clearSensorPollInterval();
+        if (context.display) {
+            // Do something here
+        }
+
+        for (var i = 0; i < infos.quickPiSensors.length; i++) {
+            var sensor = infos.quickPiSensors[i];
+
+            sensor.removed = true;
+        }
+
+    };
+
+    function drawTimeLine() {
+        if (paper == undefined || !context.display)
+            return;
+
+        if (context.timelineText)
+            for (var i = 0; i < context.timelineText.length; i++) {
+                context.timelineText[i].remove();
+            }
+
+        context.timelineText = [];
+
+        var timelinewidth = context.maxTime * context.pixelsPerTime;
+
+        var pixelsPerTick = 50;
+        var numberofTicks = timelinewidth / pixelsPerTick;
+        var step = context.maxTime / numberofTicks;
+
+        if (step > 1000)
+        {
+            step = Math.round(step / 1000) * 1000;
+        }
+        else if (step > 500)
+        {
+            step = Math.round(step / 500) * 500;
+        }
+        else if (step > 100)
+        {
+            step = Math.round(step / 100) * 100;
+        }
+        else if (step > 10)
+        {
+            step = Math.round(step / 10) * 10;
+        }
+
+        var i = 0;
+        var lastx = 0;
+        var color = false;
+
+        var textStart = 0;
+
+        var timelabel = paper.text(textStart, context.timeLineY, strings.messages.timeLabel);
+        timelabel.attr({ "font-size": "10px", 'text-anchor': 'start', 'font-weight': 'bold', fill: "gray" });
+        context.timelineText.push(timelabel);
+        timelabel.node.style.MozUserSelect = "none";
+        timelabel.node.style.WebkitUserSelect = "none";
+
+        var bbox = timelabel.getBBox();
+        textStart = bbox.x + bbox.width + 3;
+
+        var timelabel = paper.text(textStart, context.timeLineY, '\uf00e');      
+        timelabel.node.style.fontFamily = '"Font Awesome 5 Free"';
+        timelabel.node.style.fontWeight = "bold";
+        timelabel.node.style.MozUserSelect = "none";
+        timelabel.node.style.WebkitUserSelect = "none";
+
+        timelabel.attr({ "font-size": "20" + "px",
+        'text-anchor': 'start',
+         'font-weight': 'bold',
+         'fill': "#4A90E2",
+         });
+        context.timelineText.push(timelabel);
+
+        timelabel.click(function()
+        {
+            var originalzoom = context.quickPiZoom;
+            context.quickPiZoom += 0.3;
+        
+            if (context.quickPiZoom < 1)
+                context.quickPiZoom = 1;
+
+            if (originalzoom != context.quickPiZoom)
+                context.resetDisplay();
+        });
+
+
+        var bbox = timelabel.getBBox();
+        textStart = bbox.x + bbox.width + 3;
+
+        var timelabel = paper.text(textStart, context.timeLineY, '\uf010');      
+        timelabel.node.style.fontFamily = '"Font Awesome 5 Free"';
+        timelabel.node.style.fontWeight = "bold";
+        timelabel.node.style.MozUserSelect = "none";
+        timelabel.node.style.WebkitUserSelect = "none";
+
+        timelabel.attr({ "font-size": "20" + "px",
+         'text-anchor': 'start',
+          'font-weight': 'bold',
+           'fill': "#4A90E2",
+         });
+        context.timelineText.push(timelabel);
+
+        timelabel.click(function()
+        {
+            var originalzoom = context.quickPiZoom;
+            context.quickPiZoom -= 0.3;
+        
+            if (context.quickPiZoom < 1)
+                context.quickPiZoom = 1;
+
+            if (originalzoom != context.quickPiZoom)
+                context.resetDisplay();
+        });
+
+
+        
+        for (; i <= context.maxTime; i += step) {
+            var x = context.timelineStartx + (i * context.pixelsPerTime);
+
+            var labelText = (i / 1000).toFixed(2);
+            if (step >= 1000)
+                labelText = (i / 1000).toFixed(0);
+
+
+            var timelabel = paper.text(x, context.timeLineY, labelText);
+
+            timelabel.attr({ "font-size": "15px", 'text-anchor': 'center', 'font-weight': 'bold', fill: "gray" });
+            timelabel.node.style = "-moz-user-select: none; -webkit-user-select: none;";
+
+            context.timelineText.push(timelabel);
+
+
+            var timelinedivisor = paper.path(["M", x,
+                                        0,
+                                        "L", x,
+                                        context.timeLineY]);
+                timelinedivisor.attr({
+                                           "stroke-width": 1,
+                                            "stroke": "lightgray",
+                                             "opacity": 0.2,
+                                             'z-index': 100,
+ 
+                                            });
+
+            context.sensorStates.push(timelinedivisor);
+        }
+        if (!context.timeLineHoverLine || isElementRemoved(context.timeLineHoverLine)) {    
+            context.timeLineHoverLine = paper.rect(0, 0, 0, 0);
+        }
+
+        context.timeLineHoverLine.attr({
+                                            "stroke": "blue",
+                                             "opacity": 0.2,
+                                             "opacity": 0
+        });
+
+        
+        if (context.timeLineHoverPath) {
+            context.timeLineHoverPath.remove();
+        }
+
+        context.timeLineHoverPath = paper.rect(context.timelineStartx, 0, context.maxTime * context.pixelsPerTime, context.timeLineY);
+        
+        context.timeLineHoverPath.attr({
+            "fill": "lightgray",
+            "stroke": "none",
+            "opacity": 0.0,
+        });
+
+
+
+        context.timeLineHoverPath.mousemove(function(event){
+
+            if (context.runner && context.runner.isRunning())
+                return;
+
+            $('#screentooltip').remove();
+            var scrolloffset = $('#virtualSensors').scrollLeft();
+
+            var ms = (event.clientX + scrolloffset - context.timelineStartx) / context.pixelsPerTime;
+            ms = Math.round(ms);
+
+            if (ms < -4)
+                return;
+            if (ms < 0)
+                ms = 0;
+
+            $( "body" ).append('
');
+            $('#screentooltip').css("position", "absolute");
+            $('#screentooltip').css("border", "1px solid gray");
+            $('#screentooltip').css("background-color", "#efefef");
+            $('#screentooltip').css("padding", "3px");
+            $('#screentooltip').css("z-index", "1000");
+
+                        
+            $('#screentooltip').css("left", event.clientX + 2).css("top", event.clientY + 2);
+
+            $('#screentooltip').text(ms.toString() + "ms");
+
+            
+            for(var sensorName in context.gradingStatesBySensor) {
+                // Cycle through each sensor from the grading states
+                var sensor = findSensorByName(sensorName);
+                var sensorDef = findSensorDefinition(sensor);
+
+                var expectedStates = context.gradingStatesBySensor[sensorName];
+                if(!expectedStates.length) { continue;}
+
+                var actualStates = context.actualStatesBySensor[sensorName];
+                var actualIdx = 0;
+
+                var currentSensorState = null;
+
+                // Check that we went through all expected states
+                for (var i = 0; i < context.gradingStatesBySensor[sensorName].length; i++) {
+                    var expectedState = context.gradingStatesBySensor[sensorName][i];
+
+                    if (expectedState.time >= ms)
+                    {
+                        break;
+                    }
+
+                    currentSensorState = expectedState;
+                }
+
+                if (currentSensorState)
+                {
+                    sensor.state = currentSensorState.state;
+                    drawSensor(sensor);
+                }
+            }
+
+            context.timeLineHoverLine.attr({
+                        "x": event.clientX + scrolloffset,
+                        "y": 0,
+                        "width": 1,
+                        "height": context.timeLineY,
+
+                                           "stroke-width": 4,
+                                            "stroke": "blue",
+                                             "opacity": 0.2,
+                                             "stroke-linecap": "square",
+                                             "stroke-linejoin": "round",
+            });
+
+        });
+
+        context.timeLineHoverPath.mouseout(function() {
+            if (context.runner && context.runner.isRunning())
+                return;
+
+            context.timeLineHoverLine.attr({
+                "opacity": 0.0,
+            });
+
+            $('#screentooltip').remove();
+
+            context.resetSensors();
+            for (var iSensor = 0; iSensor < infos.quickPiSensors.length; iSensor++) {
+                var sensor = infos.quickPiSensors[iSensor];
+
+                drawSensor(sensor);
+            }
+            
+        });
+
+
+        if (!context.loopsForever) {
+            var endx = context.timelineStartx + (context.maxTime * context.pixelsPerTime);
+            var x = context.timelineStartx + (i * context.pixelsPerTime);
+            var timelabel = paper.text(x, context.timeLineY, '\uf11e');      
+            timelabel.node.style.fontFamily = '"Font Awesome 5 Free"';
+            timelabel.node.style.fontWeight = "bold";
+            timelabel.node.style.MozUserSelect = "none";
+            timelabel.node.style.WebkitUserSelect = "none";
+    
+
+            timelabel.attr({ "font-size": "20" + "px", 'text-anchor': 'middle', 'font-weight': 'bold', fill: "gray" });
+            context.timelineText.push(timelabel);
+
+			if (context.timeLineEndLine)
+				context.timeLineEndLine.remove();
+
+            context.timeLineEndLine = paper.path(["M", endx,
+                                                0,
+                                                "L", endx,
+                                                context.timeLineY]);
+
+
+            if (context.endFlagEnd)
+                context.endFlagEnd.remove();
+            context.endFlagEnd = paper.rect(endx, 0, x, context.timeLineY + 10);
+            context.endFlagEnd.attr({
+                "fill": "lightgray",
+                "stroke": "none",
+                "opacity": 0.2,
+            });
+        }
+
+
+        /*
+                paper.path(["M", context.timelineStartx,
+                    paper.height - context.sensorSize * 3 / 4,
+                    "L", paper.width,
+                    paper.height - context.sensorSize * 3 / 4]);
+        */
+    }
+
+    function drawCurrentTime() {
+        if (!paper || !context.display || isNaN(context.currentTime))
+            return;
+/*
+        if (context.currentTimeText)
+            context.currentTimeText.remove();
+
+        context.currentTimeText = paper.text(0, paper.height - 40, context.currentTime.toString() + "ms");
+        context.currentTimeText.attr({
+            "font-size": "10px",
+            'text-anchor': 'start'
+        });            */
+
+        if (!context.autoGrading)
+            return;
+
+        var animationSpeed = 200; // ms
+        var startx = context.timelineStartx + (context.currentTime * context.pixelsPerTime);
+
+        var targetpath = ["M", startx, 0, "L", startx, context.timeLineY];
+
+        if (context.timeLineCurrent)
+        {
+            context.timeLineCurrent.animate({path: targetpath}, animationSpeed);
+        }
+        else
+        {
+            context.timeLineCurrent = paper.path(targetpath);
+
+            context.timeLineCurrent.attr({
+                    "stroke-width": 5,
+                    "stroke": "#678AB4",
+                    "stroke-linecap": "round"
+            });
+        }
+
+
+        if (context.timeLineCircle)
+        {
+            context.timeLineCircle.animate({cx: startx}, animationSpeed);
+        }
+        else
+        {
+            var circleradius = 10;
+            context.timeLineCircle = paper.circle(startx, context.timeLineY, 10);
+
+            context.timeLineCircle.attr({
+                "fill": "white",
+                "stroke": "#678AB4"
+            });
+        }
+
+        var trianglew = 10;
+        var targetpath = ["M", startx, 0,
+                "L", startx + trianglew, 0,
+                "L", startx, trianglew,
+                "L", startx - trianglew, 0,
+                "L", startx, 0
+            ];
+
+        if (context.timeLineTriangle)
+        {
+            context.timeLineTriangle.animate({path: targetpath}, animationSpeed);
+        }
+        else
+        {
+            context.timeLineTriangle = paper.path(targetpath);
+
+            context.timeLineTriangle.attr({
+                "fill": "#678AB4",
+                "stroke": "#678AB4"
+            });
+        }
+
+    }
+
+    function storeTimeLineState(sensor, state, startTime, endTime, type) {
+        var found = false;
+        var timelinestate = {
+            sensor: sensor,
+            state: state,
+            startTime: startTime,
+            endTime: endTime,
+            type: type
+        };
+
+        for (var i = 0; i < context.timeLineStates.length; i++) {
+            var currenttlstate = context.timeLineStates[i];
+
+            if (currenttlstate.sensor == sensor &&
+                currenttlstate.startTime == startTime &&
+                currenttlstate.endTime == endTime &&
+                currenttlstate.type == type) {
+                context.timeLineStates[i] = timelinestate;
+                found = true;
+                break;
+            }
+        }
+
+        if (!found) {
+            context.timeLineStates.push(timelinestate);
+        }
+    }
+
+
+    function drawSensorTimeLineState(sensor, state, startTime, endTime, type, skipsave = false, expectedState = null) {
+        if (paper == undefined ||
+            !context.display ||
+            !context.autoGrading)
+            return;
+
+        if (!skipsave) {
+            storeTimeLineState(sensor, state, startTime, endTime, type);
+        }
+
+        var startx = context.timelineStartx + (startTime * context.pixelsPerTime);
+        var stateLenght = (endTime - startTime) * context.pixelsPerTime;
+
+        var ypositionmiddle = ((sensor.drawInfo.y + (context.timeLineSlotHeight * .5)));
+
+        var ypositiontop = sensor.drawInfo.y
+        var ypositionbottom = sensor.drawInfo.y + context.timeLineSlotHeight;
+
+        var color = "green";
+        var strokewidth = 4;
+        if (type == "expected" || type == "finnish") {
+            color = "lightgrey";
+            strokewidth = 8;
+        } else if (type == "wrong") {
+            color = "red";
+            strokewidth = 4;
+        }
+        else if (type == "actual") {
+            color = "yellow";
+            strokewidth = 4;
+        }
+
+        var isAnalog = findSensorDefinition(sensor).isAnalog;
+        var percentage = + state;
+
+        var drawnElements = [];
+        var deleteLastDrawnElements = true;
+
+        if (sensor.type == "accelerometer" ||
+            sensor.type == "gyroscope" ||
+            sensor.type == "magnetometer") {
+
+            if (state != null) {
+            for (var i = 0; i < 3; i++) {
+                var startx = context.timelineStartx + (startTime * context.pixelsPerTime);
+                var stateLenght = (endTime - startTime) * context.pixelsPerTime;
+        
+                var yspace = context.timeLineSlotHeight / 3;
+                var ypositiontop = sensor.drawInfo.y + (yspace * i)
+                var ypositionbottom = ypositiontop + yspace;
+        
+                var offset = (ypositionbottom - ypositiontop) * findSensorDefinition(sensor).getPercentageFromState(state[i], sensor);
+                
+                if (type == "expected" || type == "finnish") {
+                    color = "lightgrey";
+                    strokewidth = 4;
+                } else  if (type == "wrong") {
+                    color = "red";
+                    strokewidth = 2;
+                }
+                else if (type == "actual") {
+                    color = "yellow";
+                    strokewidth = 2;
+                }
+
+                if (sensor.lastAnalogState != null &&
+                    sensor.lastAnalogState[i] != state[i]) {
+
+                    var oldStatePercentage = findSensorDefinition(sensor).getPercentageFromState(sensor.lastAnalogState[i], sensor);
+
+                    var previousOffset = (ypositionbottom - ypositiontop) * oldStatePercentage;
+
+                    var joinline = paper.path(["M", startx,
+                        ypositiontop + offset,
+                        "L", startx,
+                        ypositiontop + previousOffset]);
+
+                    joinline.attr({
+                        "stroke-width": strokewidth,
+                        "stroke": color,
+                        "stroke-linejoin": "round",
+                        "stroke-linecap": "round"
+                    });
+                    context.sensorStates.push(joinline);
+
+                    if (sensor.timelinelastxlabel == null)
+                        sensor.timelinelastxlabel = [0, 0, 0];
+                
+                    if ((startx) - sensor.timelinelastxlabel[i] > 40)
+                    {
+                        var sensorDef = findSensorDefinition(sensor);
+                        var stateText = state.toString();
+                        if(sensorDef && sensorDef.getStateString) {
+                            stateText = sensorDef.getStateString(state[i]);
+                        }
+
+                        var paperText = paper.text(startx, ypositiontop + offset - 10, stateText);
+                        drawnElements.push(paperText);
+                        context.sensorStates.push(paperText);
+
+                        sensor.timelinelastxlabel[i] = startx;
+                    }
+                }
+
+                var stateline = paper.path(["M", startx,
+                    ypositiontop + offset,
+                    "L", startx + stateLenght,
+                    ypositiontop + offset]);
+
+                stateline.attr({
+                    "stroke-width": strokewidth,
+                    "stroke": color,
+                    "stroke-linejoin": "round",
+                    "stroke-linecap": "round"
+                });
+
+                drawnElements.push(stateline);
+                context.sensorStates.push(stateline);
+            }
+                sensor.lastAnalogState = state == null ? [0, 0, 0] : state;
+            }
+            
+
+        } else
+        if (isAnalog || sensor.showAsAnalog) {
+            var offset = (ypositionbottom - ypositiontop) * findSensorDefinition(sensor).getPercentageFromState(state, sensor);
+
+            if (type == "wrong") {
+                color = "red";
+                ypositionmiddle += 4;
+            }
+            else if (type == "actual") {
+                color = "yellow";
+                ypositionmiddle += 4;
+            }
+
+            if (sensor.lastAnalogState != null
+                && sensor.lastAnalogState != state) {
+                var oldStatePercentage = findSensorDefinition(sensor).getPercentageFromState(sensor.lastAnalogState, sensor);
+
+                var previousOffset = (ypositionbottom - ypositiontop) * oldStatePercentage;
+
+                var joinline = paper.path(["M", startx,
+                    ypositiontop + offset,
+                    "L", startx,
+                    ypositiontop + previousOffset]);
+
+                joinline.attr({
+                    "stroke-width": strokewidth,
+                    "stroke": color,
+                    "stroke-linejoin": "round",
+                    "stroke-linecap": "round"
+                });
+
+                context.sensorStates.push(joinline);
+
+                if (!sensor.timelinelastxlabel)
+                    sensor.timelinelastxlabel = 0;
+                
+                if (!sensor.timelinelastxlabel)
+                    sensor.timelinelastxlabel = 0;
+
+                if ((startx) - sensor.timelinelastxlabel > 5)
+                {
+                    var sensorDef = findSensorDefinition(sensor);
+                    var stateText = state.toString();
+                    if(sensorDef && sensorDef.getStateString) {
+                        stateText = sensorDef.getStateString(state);
+                    }
+
+                    var y = 0;
+
+                    if (sensor.timelinestateup) {
+                        y = ypositiontop + offset - 10;
+                        sensor.timelinestateup = false;
+                    }
+                    else {
+                        y = ypositiontop + offset + 10;
+                        
+                        sensor.timelinestateup = true;
+                    }
+
+                    var paperText = paper.text(startx, y, stateText);
+                    drawnElements.push(paperText);
+                    context.sensorStates.push(paperText);
+
+                    sensor.timelinelastxlabel = startx;
+                }
+            }
+
+            sensor.lastAnalogState = state == null ? 0 : state;
+
+            var stateline = paper.path(["M", startx,
+                ypositiontop + offset,
+                "L", startx + stateLenght,
+                ypositiontop + offset]);
+
+            stateline.attr({
+                "stroke-width": strokewidth,
+                "stroke": color,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round"
+            });
+
+            drawnElements.push(stateline);
+            context.sensorStates.push(stateline);
+        } else if (sensor.type == "stick") {
+            var stateToFA = [
+                "\uf062",
+                "\uf063",
+                "\uf060",
+                "\uf061",
+                "\uf111",
+            ]
+            
+
+            var spacing = context.timeLineSlotHeight / 5;
+            for (var i = 0; i < 5; i++)
+            {
+                if (state && state[i])
+                {
+                    var ypos = sensor.drawInfo.y + (i * spacing);
+                    var startingpath = ["M", startx,
+                            ypos,
+                            "L", startx,
+                            ypos];
+
+                    var targetpath = ["M", startx,
+                            ypos,
+                            "L", startx + stateLenght,
+                            ypos];
+
+                    if (type == "expected")
+                    {
+                        var stateline = paper.path(targetpath);
+                    }
+                    else
+                    {
+                        var stateline = paper.path(startingpath);
+                        stateline.animate({path: targetpath}, 200);
+                    }
+
+                    stateline.attr({
+                        "stroke-width": 2,
+                        "stroke": color,
+                        "stroke-linejoin": "round",
+                        "stroke-linecap": "round"
+                    });
+
+                    drawnElements.push(stateline);
+                    context.sensorStates.push(stateline);
+
+                    if (type == "expected") {
+                        sensor.stateArrow = paper.text(startx, ypos + 7, stateToFA[i]);
+                        context.sensorStates.push(sensor.stateArrow);
+
+                        sensor.stateArrow.attr({
+                            "text-anchor": "start",
+                            "font": "Font Awesome 5 Free",
+                            "stroke": color,
+                            "fill": color,
+                            "font-size": (strokewidth * 2) + "px"
+                        });
+        
+                        sensor.stateArrow.node.style.fontFamily = '"Font Awesome 5 Free"';
+                        sensor.stateArrow.node.style.fontWeight = "bold";
+                    }
+                }
+            }
+
+        } else if (sensor.type == "screen" && state) {
+            var sensorDef = findSensorDefinition(sensor);
+            if (type != "actual" || !sensor.lastScreenState || !sensorDef.compareState(sensor.lastScreenState, state)) 
+            {
+                sensor.lastScreenState = state;
+                if (state.isDrawingData) {
+                    var stateBubble = paper.text(startx, ypositiontop + 10, '\uf303');
+
+                    stateBubble.attr({
+                        "font": "Font Awesome 5 Free",
+                        "stroke": color,
+                        "fill": color,
+                        "font-size": (4 * 2) + "px"
+                    });
+
+                    stateBubble.node.style.fontFamily = '"Font Awesome 5 Free"';
+                    stateBubble.node.style.fontWeight = "bold";
+
+                    $(stateBubble.node).css("z-index", "1");
+
+                    function showPopup(event) {
+
+                        if (!sensor.showingTooltip)
+                        {
+                            $( "body" ).append('
');
+
+                            $('#screentooltip').css("position", "absolute");
+                            $('#screentooltip').css("border", "1px solid gray");
+                            $('#screentooltip').css("background-color", "#efefef");
+                            $('#screentooltip').css("padding", "3px");
+                            $('#screentooltip').css("z-index", "1000");
+                            $('#screentooltip').css("width", "262px");
+                            $('#screentooltip').css("height", "70px");
+
+                            $('#screentooltip').css("left", event.clientX+2).css("top", event.clientY+2);
+
+                            var canvas = document.createElement("canvas");
+                            canvas.id = "tooltipcanvas";
+                            canvas.width = 128 * 2;
+                            canvas.height = 32 * 2;
+                            $('#screentooltip').append(canvas);
+
+                            
+                            $(canvas).css("position", "absolute");
+                            $(canvas).css("z-index", "1500");
+                            $(canvas).css("left", 3).css("top", 3);
+
+
+                            var ctx = canvas.getContext('2d');
+
+                            if (expectedState && type == "wrong") {
+                                screenDrawing.renderDifferences(expectedState, state, canvas, 2);
+                            } else {
+                                screenDrawing.renderToCanvas(state, canvas, 2);
+                            }
+      
+                            sensor.showingTooltip = true;
+                        }
+                    };
+
+                    $(stateBubble.node).mouseenter(showPopup);
+                    $(stateBubble.node).click(showPopup);
+
+                    $(stateBubble.node).mouseleave(function(event) {
+                        sensor.showingTooltip = false;
+                        $('#screentooltip').remove();
+                    });
+
+                } else {
+                    var stateBubble = paper.text(startx, ypositionmiddle + 10, '\uf27a');
+
+                    stateBubble.attr({
+                        "font": "Font Awesome 5 Free",
+                        "stroke": color,
+                        "fill": color,
+                        "font-size": (strokewidth * 2) + "px"
+                    });
+
+                    stateBubble.node.style.fontFamily = '"Font Awesome 5 Free"';
+                    stateBubble.node.style.fontWeight = "bold";
+
+                    function showPopup() {
+                        if (!sensor.tooltip) {
+                            sensor.tooltipText = paper.text(startx, ypositionmiddle + 50, state.line1 + "\n" + (state.line2 ? state.line2 : ""));
+
+                            var textDimensions = sensor.tooltipText.getBBox();
+
+                            sensor.tooltip = paper.rect(textDimensions.x - 15, textDimensions.y - 15, textDimensions.width + 30, textDimensions.height + 30);
+                            sensor.tooltip.attr({
+                                "stroke": "black",
+                                "stroke-width": 2,
+                                "fill": "white",
+                            });
+
+                            sensor.tooltipText.toFront();
+                        }
+                    };
+
+                    stateBubble.click(showPopup);
+
+                    stateBubble.hover(showPopup, function () {
+                        if (sensor.tooltip) {
+                            sensor.tooltip.remove();
+                            sensor.tooltip = null;
+                        }
+                        if (sensor.tooltipText) {
+                            sensor.tooltipText.remove();
+                            sensor.tooltipText = null;
+                        }
+                    });
+                }
+                drawnElements.push(stateBubble);
+                context.sensorStates.push(stateBubble);
+            } else {
+                deleteLastDrawnElements = false;
+            }
+        } else if (sensor.type == "cloudstore") {
+            var sensorDef = findSensorDefinition(sensor);
+            if (type != "actual" || !sensor.lastScreenState || !sensorDef.compareState(sensor.lastScreenState, state)) 
+            {
+                sensor.lastScreenState = state;
+                    var stateBubble = paper.text(startx, ypositionmiddle + 10, '\uf044');
+
+                    stateBubble.attr({
+                        "font": "Font Awesome 5 Free",
+                        "stroke": color,
+                        "fill": color,
+                        "font-size": (4 * 2) + "px"
+                    });
+
+                    stateBubble.node.style.fontFamily = '"Font Awesome 5 Free"';
+                    stateBubble.node.style.fontWeight = "bold";
+
+                    function showPopup(event) {
+
+                        if (!sensor.showingTooltip)
+                        {
+                            $( "body" ).append('
');
+
+                            $('#screentooltip').css("position", "absolute");
+                            $('#screentooltip').css("border", "1px solid gray");
+                            $('#screentooltip').css("background-color", "#efefef");
+                            $('#screentooltip').css("padding", "3px");
+                            $('#screentooltip').css("z-index", "1000");
+                            /*
+                            $('#screentooltip').css("width", "262px");
+                            $('#screentooltip').css("height", "70px");*/
+
+                            $('#screentooltip').css("left", event.clientX+2).css("top", event.clientY+2);
+
+
+                            if (expectedState && type == "wrong") {
+                                var div = quickPiStore.renderDifferences(expectedState, state);
+                                $('#screentooltip').append(div);
+                            } else {
+                                for (var property in state) {
+                                    var div = document.createElement("div");
+                                    $(div).text(property + " = " + state[property]);
+                                    $('#screentooltip').append(div);
+                                }
+                            }
+
+                            sensor.showingTooltip = true;
+                        }
+                    };
+
+                    $(stateBubble.node).mouseenter(showPopup);
+                    $(stateBubble.node).click(showPopup);
+
+                    $(stateBubble.node).mouseleave(function(event) {
+                        sensor.showingTooltip = false;
+                        $('#screentooltip').remove();
+                    });
+
+                drawnElements.push(stateBubble);
+                context.sensorStates.push(stateBubble);
+                
+            } else {
+                deleteLastDrawnElements = false;
+            }
+        } else if (percentage != 0) {
+            if (type == "wrong" || type == "actual") {
+                ypositionmiddle += 2;
+            }
+
+            if (type == "expected") {
+                var c = paper.rect(startx, ypositionmiddle, stateLenght, strokewidth);
+                c.attr({
+                    "stroke": "none",
+                    "fill": color,
+                });
+
+            } else {
+                var c = paper.rect(startx, ypositionmiddle, 0, strokewidth);
+                c.attr({
+                    "stroke": "none",
+                    "fill": color,
+                });
+
+                c.animate({ width: stateLenght }, 200);
+            }
+            drawnElements.push(c);
+            context.sensorStates.push(c);
+        }
+
+        if (type == "wrong") {
+            /*
+            wrongindicator = paper.path(["M", startx,
+                             sensor.drawInfo.y,
+                        "L", startx + stateLenght,
+                                sensor.drawInfo.y + sensor.drawInfo.height,
+
+                        "M", startx,
+                                sensor.drawInfo.y + sensor.drawInfo.height,
+                        "L", startx + stateLenght,
+                                   sensor.drawInfo.y
+                            ]);
+
+            wrongindicator.attr({
+                "stroke-width": 5, "stroke" : "red", "stroke-linecap": "round" });*/
+        }
+
+        if(type == 'actual' || type == 'wrong') {
+            if(!sensor.drawnGradingElements) {
+                sensor.drawnGradingElements = [];
+            } else if(deleteLastDrawnElements) {
+                for(var i = 0; i < sensor.drawnGradingElements.length; i++) {
+                    var dge = sensor.drawnGradingElements[i];
+                    if(dge.time >= startTime) {
+                        for(var j = 0; j < dge.elements.length; j++) {
+                            dge.elements[j].remove();
+                        }
+                        sensor.drawnGradingElements.splice(i, 1);
+                        i -= 1;
+                    }
+                }
+            }
+            if(drawnElements.length) {
+                sensor.drawnGradingElements.push({time: startTime, elements: drawnElements});
+            }
+        }
+
+        // Make sure the current time bar is always on top of states
+        drawCurrentTime();
+    }
+
+    function getImg(filename) {
+        // Get the path to an image stored in bebras-modules
+        return (window.modulesPath ? window.modulesPath : '../../modules/') + 'img/quickpi/' + filename;
+    }
+
+    function createSlider(sensor, max, min, x, y, w, h, index)
+    {
+        var sliderobj = {};
+        sliderobj.sliderdata = {};
+
+        sliderobj.index = index;
+        sliderobj.min = min;
+        sliderobj.max = max;
+
+        var outsiderectx = x;
+        var outsiderecty = y;
+        var outsidewidth = w / 6;
+        var outsideheight = h;
+
+        var insidewidth = outsidewidth / 6;
+        sliderobj.sliderdata.insideheight = h * 0.60;
+
+        var insiderectx = outsiderectx + (outsidewidth / 2) - (insidewidth / 2);
+        sliderobj.sliderdata.insiderecty = outsiderecty + (outsideheight / 2) - (sliderobj.sliderdata.insideheight / 2);
+
+        var circleradius = (outsidewidth / 2) - 1;
+
+        var pluscirclex = outsiderectx + (outsidewidth / 2);
+        var pluscircley = outsiderecty + circleradius + 1;
+
+        var minuscirclex = pluscirclex;
+        var minuscircley = outsiderecty + outsideheight - circleradius - 1;
+
+        paper.setStart();
+
+        sliderobj.sliderrect = paper.rect(outsiderectx, outsiderecty, outsidewidth, outsideheight, outsidewidth / 2);
+        sliderobj.sliderrect.attr("fill", "#468DDF");
+        sliderobj.sliderrect.attr("stroke", "#468DDF");
+
+        sliderobj.sliderrect = paper.rect(insiderectx, sliderobj.sliderdata.insiderecty, insidewidth, sliderobj.sliderdata.insideheight, 2);
+        sliderobj.sliderrect.attr("fill", "#2E5D94");
+        sliderobj.sliderrect.attr("stroke", "#2E5D94");
+
+
+        sliderobj.plusset = paper.set();
+
+        sliderobj.pluscircle = paper.circle(pluscirclex, pluscircley, circleradius);
+        sliderobj.pluscircle.attr("fill", "#F5A621");
+        sliderobj.pluscircle.attr("stroke", "#F5A621");
+
+        sliderobj.plus = paper.text(pluscirclex, pluscircley, "+");
+        sliderobj.plus.attr({ fill: "white" });
+        sliderobj.plus.node.style = "-moz-user-select: none; -webkit-user-select: none;";
+
+        sliderobj.plusset.push(sliderobj.pluscircle, sliderobj.plus);
+
+        sliderobj.plusset.click(function () {
+            var step = 1;
+            var sensorDef = findSensorDefinition(sensor);
+            if (sensorDef.step)
+                step = sensorDef.step;
+
+            if (Array.isArray(sensor.state)) {
+                if (sensor.state[sliderobj.index] < sliderobj.max)
+                    sensor.state[sliderobj.index] += step;
+            }
+            else
+            {
+                if (sensor.state < sliderobj.max)
+                    sensor.state += step;
+            }
+
+            drawSensor(sensor, true);
+        });
+
+
+        sliderobj.minusset = paper.set();
+
+        sliderobj.minuscircle = paper.circle(minuscirclex, minuscircley, circleradius);
+        sliderobj.minuscircle.attr("fill", "#F5A621");
+        sliderobj.minuscircle.attr("stroke", "#F5A621");
+
+        sliderobj.minus = paper.text(minuscirclex, minuscircley, "-");
+        sliderobj.minus.attr({ fill: "white" });
+        sliderobj.minus.node.style = "-moz-user-select: none; -webkit-user-select: none;";
+
+        sliderobj.minusset.push(sliderobj.minuscircle, sliderobj.minus);
+
+        sliderobj.minusset.click(function () {
+
+            var step = 1;
+            var sensorDef = findSensorDefinition(sensor);
+            if (sensorDef.step)
+                step = sensorDef.step;
+
+            if (Array.isArray(sensor.state)) {
+                if (sensor.state[sliderobj.index] > sliderobj.min)
+                    sensor.state[sliderobj.index] -= step;
+            } else {
+                if (sensor.state > sliderobj.min)
+                    sensor.state -= step;
+            }
+
+            drawSensor(sensor, true);
+        });
+
+
+        var thumbwidth = outsidewidth * .80;
+        sliderobj.sliderdata.thumbheight = outsidewidth * 1.4;
+        sliderobj.sliderdata.scale = (sliderobj.sliderdata.insideheight - sliderobj.sliderdata.thumbheight);
+
+
+        if (Array.isArray(sensor.state)) {
+            var percentage = findSensorDefinition(sensor).getPercentageFromState(sensor.state[index], sensor);
+        } else {
+            var percentage = findSensorDefinition(sensor).getPercentageFromState(sensor.state, sensor);
+        }
+
+
+        var thumby = sliderobj.sliderdata.insiderecty + sliderobj.sliderdata.insideheight - sliderobj.sliderdata.thumbheight - (percentage * sliderobj.sliderdata.scale);
+
+        var thumbx = insiderectx + (insidewidth / 2) - (thumbwidth / 2);
+
+        sliderobj.thumb = paper.rect(thumbx, thumby, thumbwidth, sliderobj.sliderdata.thumbheight, outsidewidth / 2);
+        sliderobj.thumb.attr("fill", "#F5A621");
+        sliderobj.thumb.attr("stroke", "#F5A621");
+
+        sliderobj.slider = paper.setFinish();
+
+        sliderobj.thumb.drag(
+            function (dx, dy, x, y, event) {
+
+                var newy = sliderobj.sliderdata.zero + dy;
+
+                if (newy < sliderobj.sliderdata.insiderecty)
+                    newy = sliderobj.sliderdata.insiderecty;
+
+                if (newy > sliderobj.sliderdata.insiderecty + sliderobj.sliderdata.insideheight - sliderobj.sliderdata.thumbheight)
+                    newy = sliderobj.sliderdata.insiderecty + sliderobj.sliderdata.insideheight - sliderobj.sliderdata.thumbheight;
+
+                sliderobj.thumb.attr('y', newy);
+
+                var percentage = 1 - ((newy - sliderobj.sliderdata.insiderecty) / sliderobj.sliderdata.scale);
+
+                if (Array.isArray(sensor.state)) {
+                    sensor.state[sliderobj.index] = findSensorDefinition(sensor).getStateFromPercentage(percentage);
+                } else {
+                    sensor.state = findSensorDefinition(sensor).getStateFromPercentage(percentage);
+                }
+                drawSensor(sensor, true);
+            },
+            function (x, y, event) {
+                sliderobj.sliderdata.zero = sliderobj.thumb.attr('y');
+
+            },
+            function (event) {
+            }
+        );
+
+        return sliderobj;
+    }
+
+
+    function setSlider(sensor, juststate, imgx, imgy, imgw, imgh, min, max, triaxial) {
+        if (juststate) {
+
+            if (Array.isArray(sensor.state)) {
+                for (var i = 0; i < sensor.state.length; i++) {
+                    if (sensor.sliders[i] == undefined)
+                        continue;
+
+                    var percentage = findSensorDefinition(sensor).getPercentageFromState(sensor.state[i], sensor);
+
+                    thumby = sensor.sliders[i].sliderdata.insiderecty +
+                        sensor.sliders[i].sliderdata.insideheight -
+                        sensor.sliders[i].sliderdata.thumbheight -
+                        (percentage * sensor.sliders[i].sliderdata.scale);
+
+                    sensor.sliders[i].thumb.attr('y', thumby);
+                }
+            } else {
+                var percentage = findSensorDefinition(sensor).getPercentageFromState(sensor.state, sensor);
+
+                thumby = sensor.sliders[0].sliderdata.insiderecty +
+                    sensor.sliders[0].sliderdata.insideheight -
+                    sensor.sliders[0].sliderdata.thumbheight -
+                    (percentage * sensor.sliders[0].sliderdata.scale);
+
+                sensor.sliders[0].thumb.attr('y', thumby);
+            }
+
+            return;
+        }
+
+        removeSlider(sensor);
+
+
+        sensor.sliders = [];
+
+        var actuallydragged;
+
+        sensor.hasslider = true;
+        sensor.focusrect.drag(
+            function (dx, dy, x, y, event) {
+                if (sensor.sliders.length != 1)
+                    return;
+
+                var newy = sensor.sliders[0].sliderdata.zero + dy;
+
+                if (newy < sensor.sliders[0].sliderdata.insiderecty)
+                    newy = sensor.sliders[0].sliderdata.insiderecty;
+
+                if (newy > sensor.sliders[0].sliderdata.insiderecty + sensor.sliders[0].sliderdata.insideheight - sensor.sliders[0].sliderdata.thumbheight)
+                    newy = sensor.sliders[0].sliderdata.insiderecty + sensor.sliders[0].sliderdata.insideheight - sensor.sliders[0].sliderdata.thumbheight;
+
+                sensor.sliders[0].thumb.attr('y', newy);
+
+                var percentage = 1 - ((newy - sensor.sliders[0].sliderdata.insiderecty) / sensor.sliders[0].sliderdata.scale);
+
+                sensor.state = findSensorDefinition(sensor).getStateFromPercentage(percentage);
+                drawSensor(sensor, true);
+
+                actuallydragged++;
+            },
+            function (x, y, event) {
+                showSlider();
+                actuallydragged = 0;
+
+                if (sensor.sliders.length == 1)
+                    sensor.sliders[0].sliderdata.zero = sensor.sliders[0].thumb.attr('y');
+            },
+            function (event) {
+                if (actuallydragged > 4) {
+                    hideSlider(sensor);
+                }
+            }
+        );
+
+        function showSlider() {
+            hideSlider(sensorWithSlider);
+            sensorWithSlider = sensor;
+
+            if (Array.isArray(sensor.state)) {
+
+                var offset = 0;
+                var sign = -1;
+                if (sensor.drawInfo.x -
+                     ((sensor.state.length - 1) * sensor.drawInfo.width / 5) < 0)
+                {
+                    sign = 1;
+                    offset = sensor.drawInfo.width * .70;
+                }
+
+                // if offset is equal to 0, we need to reverse
+                if (offset == 0) {
+                    for (var i = 0; i < sensor.state.length; i++) {
+                        var sliderobj = createSlider(sensor,
+                            max,
+                            min,
+                            sensor.drawInfo.x + offset + (sign * Math.abs(i + 1 - sensor.state.length) * sensor.drawInfo.height / 5),
+                            sensor.drawInfo.y,
+                            sensor.drawInfo.height,
+                            sensor.drawInfo.height,
+                            i);
+
+                        sensor.sliders.push(sliderobj);
+                    }
+                }
+                else {
+                    for (var i = 0; i < sensor.state.length; i++) {
+                        var sliderobj = createSlider(sensor,
+                            max,
+                            min,
+                            sensor.drawInfo.x + offset + (sign * i * sensor.drawInfo.height / 5),
+                            sensor.drawInfo.y,
+                            sensor.drawInfo.height,
+                            sensor.drawInfo.height,
+                            i);
+
+                        sensor.sliders.push(sliderobj);
+                    }
+                }
+            } else {
+                var sliderobj = createSlider(sensor,
+                    max,
+                    min,
+                    sensor.drawInfo.x,
+                    sensor.drawInfo.y,
+                    sensor.drawInfo.height,
+                    sensor.drawInfo.height,
+                    0);
+                sensor.sliders.push(sliderobj);
+            }
+        }
+    }
+
+    function removeSlider(sensor) {
+        if (sensor.hasslider && sensor.focusrect) {
+            sensor.focusrect.undrag();
+            sensor.hasslider = false;
+        }
+
+        if (sensor.sliders) {
+
+            for (var i = 0; i < sensor.sliders.length; i++) {
+                sensor.sliders[i].slider.remove();
+            }
+
+            sensor.sliders = [];
+        }
+    }
+
+    function sensorInConnectedModeError() {
+        window.displayHelper.showPopupMessage(strings.messages.sensorInOnlineMode, 'blanket');
+    }
+
+    function actuatorsInRunningModeError() {
+        window.displayHelper.showPopupMessage(strings.messages.actuatorsWhenRunning, 'blanket');
+    }
+
+    function isElementRemoved(element) {
+        return !element.paper.canvas || !element.node.parentElement;
+    }
+
+    var irRemoteDialog = "
" +
+        "   
" +
+        "       
" +
+        "           " +
+                    strings.messages.irRemoteControl +
+        "       
" +
+        "       
" +
+        "   
" +
+        "   
" +
+        "       
" +
+        "       
" +
+        "       
" +
+        "       
" +
+        "   
" +
+        "   
" +
+        "       " +
+        "   
" +
+        "
";
+
+    function drawSensor(sensor, juststate = false, donotmovefocusrect = false) {
+        if (paper == undefined || !context.display || !sensor.drawInfo)
+            return;
+
+        var scrolloffset = 0;
+        var fadeopacity = 1;
+
+        var imgw = sensor.drawInfo.width / 1.8;
+        var imgh = sensor.drawInfo.height / 2;
+        imgw = imgh;
+
+        var imgx = sensor.drawInfo.x - (imgw / 2) + (sensor.drawInfo.width / 2); 
+        var imgy = sensor.drawInfo.y + (sensor.drawInfo.height / 2) - (imgh / 2);
+
+        var state1x =  (imgx + imgw) + 3;
+        var state1y = imgy + imgh / 3;
+
+        var state1x = sensor.drawInfo.x + (sensor.drawInfo.width / 2)
+        var state1y = imgy + imgh + 6;
+        var stateanchor = "middle";
+
+        if (sensor.type == "accelerometer" ||
+            sensor.type == "gyroscope" ||
+            sensor.type == "magnetometer" ||
+            sensor.type == "stick")
+        {
+            if (context.compactLayout)
+                imgx = sensor.drawInfo.x + 5;
+            else
+                imgx = sensor.drawInfo.x - (imgw / 4) + (sensor.drawInfo.width / 4); 
+
+            state1x =  (imgx + imgw) + 10;
+            state1y = imgy; 
+            stateanchor = 'start';
+        }
+
+
+        var portx = state1x;
+        var porty = imgy;
+
+        var namex = sensor.drawInfo.x + (sensor.drawInfo.width / 2);
+        var namey = sensor.drawInfo.y + (imgh * 0.20);
+        var nameanchor = "middle";
+
+        var portsize = sensor.drawInfo.height * 0.11;
+
+        if (context.compactLayout)
+            var statesize = sensor.drawInfo.height * 0.14;
+        else
+            var statesize = sensor.drawInfo.height * 0.10;
+
+        var namesize = sensor.drawInfo.height * 0.15;
+
+        
+
+        var drawPortText = true;
+        var drawName = true;
+
+        drawPortText = false;
+
+        if (!sensor.focusrect || isElementRemoved(sensor.focusrect))
+            sensor.focusrect = paper.rect(imgx, imgy, imgw, imgh);
+
+        sensor.focusrect.attr({
+                "fill": "468DDF",
+                "fill-opacity": 0,
+                "opacity": 0,
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+        });
+
+        if (context.autoGrading) {
+
+            scrolloffset = $('#virtualSensors').scrollLeft();
+
+            if (scrolloffset > 0)
+                fadeopacity = 0.3;
+
+            imgw = sensor.drawInfo.width * .80;
+            imgh = sensor.drawInfo.height * .80;
+
+            imgx = sensor.drawInfo.x + (imgw * 0.75) + scrolloffset;
+            imgy = sensor.drawInfo.y + (sensor.drawInfo.height / 2) - (imgh / 2);
+
+            state1x = imgx + imgw * 1.2;
+            state1y = imgy + (imgh / 2);
+
+            portx = sensor.drawInfo.x;
+            porty = imgy + (imgh / 2);
+
+            portsize = imgh / 3;
+            statesize = sensor.drawInfo.height * 0.2;
+
+            namex = portx;
+            namesize = portsize;
+            nameanchor = "start";
+        }
+
+
+        if (sensor.type == "led") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (sensor.state == null)
+                sensor.state = 0;
+
+            if (!sensor.ledoff || isElementRemoved(sensor.ledoff)) {
+                sensor.ledoff = paper.image(getImg('ledoff.png'), imgx, imgy, imgw, imgh);
+
+                    sensor.focusrect.click(function () {
+                        if (!context.autoGrading && (!context.runner || !context.runner.isRunning())) {
+                            sensor.state = !sensor.state;
+                            drawSensor(sensor);
+                        } else {
+                            actuatorsInRunningModeError();
+                        }
+                    });
+            }
+
+            if (!sensor.ledon || isElementRemoved(sensor.ledon)) {
+                var imagename = "ledon-";
+                if (sensor.subType)
+                    imagename += sensor.subType;
+                else
+                    imagename += "red";
+
+                imagename += ".png";
+
+                sensor.ledon = paper.image(getImg(imagename), imgx, imgy, imgw, imgh);
+            }
+
+
+            sensor.ledon.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+            sensor.ledoff.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+
+            if (sensor.showAsAnalog)
+            {
+                sensor.stateText = paper.text(state1x, state1y, sensor.state);
+            }
+            else
+            {
+                if (sensor.state) {
+                    sensor.stateText = paper.text(state1x, state1y, strings.messages.on.toUpperCase());
+                } else {
+                    sensor.stateText = paper.text(state1x, state1y, strings.messages.off.toUpperCase());
+                }
+            }
+
+            if (sensor.state) {
+                sensor.ledon.attr({ "opacity": fadeopacity });
+                sensor.ledoff.attr({ "opacity": 0 });
+            } else {
+                sensor.ledon.attr({ "opacity": 0 });
+                sensor.ledoff.attr({ "opacity": fadeopacity });
+            }
+
+            var x = typeof sensor.state;
+
+            if(typeof sensor.state == 'number' ) {
+                sensor.ledon.attr({ "opacity": sensor.state * fadeopacity });
+                sensor.ledoff.attr({ "opacity": fadeopacity });
+            }
+
+
+            if ((!context.runner || !context.runner.isRunning())
+                && !context.offLineMode) {
+
+                findSensorDefinition(sensor).setLiveState(sensor, sensor.state, function(x) {});
+            }
+
+        } else if (sensor.type == "buzzer") {           
+
+            if(typeof sensor.state == 'number' &&
+               sensor.state != 0 &&
+               sensor.state != 1) {
+                buzzerSound.start(sensor.name, sensor.state);
+            } else if (sensor.state) {
+                buzzerSound.start(sensor.name);
+            } else {
+                buzzerSound.stop(sensor.name);
+            }
+
+            if(!juststate) {
+                if(sensor.muteBtn) {
+                    sensor.muteBtn.remove();
+                }
+                
+
+                var muteBtnSize = sensor.drawInfo.width * 0.15;
+                sensor.muteBtn = paper.text(
+                    imgx + imgw, 
+                    imgy + (imgh / 2), 
+                    buzzerSound.isMuted(sensor.name) ? "\uf6a9" : "\uf028"
+                );
+                sensor.muteBtn.node.style.fontWeight = "bold";           
+                sensor.muteBtn.node.style.cursor = "default";           
+                sensor.muteBtn.node.style.MozUserSelect = "none";
+                sensor.muteBtn.node.style.WebkitUserSelect = "none";
+                sensor.muteBtn.attr({
+                    "font-size": muteBtnSize + "px",                
+                    fill: buzzerSound.isMuted(sensor.name) ? "lightgray" : "#468DDF",
+                    "font-family": '"Font Awesome 5 Free"',
+                    'text-anchor': 'start'
+                });            
+                sensor.muteBtn.click(function () {
+                    if(buzzerSound.isMuted(sensor.name)) {
+                        buzzerSound.unmute(sensor.name)
+                    } else {
+                        buzzerSound.mute(sensor.name)
+                    }
+                    drawSensor(sensor);
+                });
+            }            
+
+
+            if (!sensor.buzzeron || isElementRemoved(sensor.buzzeron))
+                sensor.buzzeron = paper.image(getImg('buzzer-ringing.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.buzzeroff || isElementRemoved(sensor.buzzeroff)) {
+                sensor.buzzeroff = paper.image(getImg('buzzer.png'), imgx, imgy, imgw, imgh);
+
+                    sensor.focusrect.click(function () {
+                        if (!context.autoGrading && (!context.runner || !context.runner.isRunning())) {
+                            sensor.state = !sensor.state;
+                            drawSensor(sensor);
+                        } else {
+                            actuatorsInRunningModeError();
+                        }
+                    });
+            }
+
+            if (sensor.state) {
+                if (!sensor.buzzerInterval) {
+                    sensor.buzzerInterval = setInterval(function () {
+
+                        if (!sensor.removed) {
+                            sensor.ringingState = !sensor.ringingState;
+                            drawSensor(sensor, true, true);
+                        } else {
+                            clearInterval(sensor.buzzerInterval);
+                        }
+
+                    }, 100);
+                }
+            } else {
+                if (sensor.buzzerInterval) {
+                    clearInterval(sensor.buzzerInterval);
+                    sensor.buzzerInterval = null;
+                    sensor.ringingState = null;
+                }
+            }
+            sensor.buzzeron.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+            sensor.buzzeroff.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+
+            var drawState = sensor.state;
+            if (sensor.ringingState != null)
+                drawState = sensor.ringingState;
+
+            if (drawState) {
+                sensor.buzzeron.attr({ "opacity": fadeopacity });
+                sensor.buzzeroff.attr({ "opacity": 0 });
+
+
+            } else {
+                sensor.buzzeron.attr({ "opacity": 0 });
+                sensor.buzzeroff.attr({ "opacity": fadeopacity });
+            }
+
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            var stateText = findSensorDefinition(sensor).getStateString(sensor.state);
+
+            sensor.stateText = paper.text(state1x, state1y, stateText);
+
+
+            if ((!context.runner || !context.runner.isRunning())
+                && !context.offLineMode) {
+
+                var setLiveState = findSensorDefinition(sensor).setLiveState;
+
+                if (setLiveState) {
+                    setLiveState(sensor, sensor.state, function(x) {});
+                }
+            }
+
+        } else if (sensor.type == "button") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.buttonon || isElementRemoved(sensor.buttonon))
+                sensor.buttonon = paper.image(getImg('buttonon.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.buttonoff || isElementRemoved(sensor.buttonoff))
+                sensor.buttonoff = paper.image(getImg('buttonoff.png'), imgx, imgy, imgw, imgh);
+
+            if (sensor.state == null)
+                sensor.state = false;
+
+            sensor.buttonon.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+            sensor.buttonoff.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+
+            if (sensor.state) {
+                sensor.buttonon.attr({ "opacity": fadeopacity });
+                sensor.buttonoff.attr({ "opacity": 0 });
+
+                sensor.stateText = paper.text(state1x, state1y, strings.messages.on.toUpperCase());
+            } else {
+                sensor.buttonon.attr({ "opacity": 0 });
+                sensor.buttonoff.attr({ "opacity": fadeopacity });
+
+                sensor.stateText = paper.text(state1x, state1y, strings.messages.off.toUpperCase());
+            }
+
+            if (!context.autoGrading && !sensor.buttonon.node.onmousedown) {
+                sensor.focusrect.node.onmousedown = function () {
+                    if (context.offLineMode) {
+                        sensor.state = true;
+                        drawSensor(sensor);
+                    } else
+                        sensorInConnectedModeError();
+                };
+
+
+                sensor.focusrect.node.onmouseup = function () {
+                    if (context.offLineMode) {
+                        sensor.state = false;
+                        sensor.wasPressed = true;
+                        drawSensor(sensor);
+
+                        if (sensor.onPressed)
+                            sensor.onPressed();
+                    } else
+                        sensorInConnectedModeError();
+                }
+
+                sensor.focusrect.node.ontouchstart = sensor.focusrect.node.onmousedown;
+                sensor.focusrect.node.ontouchend = sensor.focusrect.node.onmouseup;
+            }
+        } else if (sensor.type == "screen") {
+            if (sensor.stateText) {
+                sensor.stateText.remove();
+                sensor.stateText = null;
+            }
+
+            var borderSize = 5;
+
+            var screenScale = 2;
+            if(sensor.drawInfo.width < 300) {
+                screenScale = 1;
+            }
+            if(sensor.drawInfo.width < 150) {
+                screenScale = 0.5;
+            }             
+
+            var screenScalerSize = {
+                width: 128 * screenScale,
+                height: 32 * screenScale
+            }
+            borderSize = borderSize * screenScale;
+
+            imgw = screenScalerSize.width + borderSize * 2;
+            imgh = screenScalerSize.height + borderSize * 2;            
+            imgx = sensor.drawInfo.x - (imgw / 2) + (sensor.drawInfo.width / 2); 
+
+            imgy = sensor.drawInfo.y + Math.max(0, (sensor.drawInfo.height - imgh) * 0.5);            
+
+            portx = imgx + imgw + borderSize;
+            porty = imgy + imgh / 3;
+/*
+            if (context.autoGrading) {
+                state1x = imgx + imgw;
+                state1y = imgy + (imgh / 2);
+
+                portsize = imgh / 4;
+                statesize = imgh / 6;
+            }
+            */
+            statesize = imgh / 3.5;
+
+            if (!sensor.img || isElementRemoved(sensor.img)) {
+                sensor.img = paper.image(getImg('screen.png'), imgx, imgy, imgw, imgh);
+            }
+               
+
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+
+            if (sensor.state) {
+                if (sensor.state.isDrawingData) {
+                    if (!sensor.screenrect ||
+                        isElementRemoved(sensor.screenrect) ||
+                        !sensor.canvasNode) {
+                        sensor.screenrect = paper.rect(imgx, imgy, screenScalerSize.width, screenScalerSize.height);
+        
+                        sensor.canvasNode = document.createElementNS("http://www.w3.org/2000/svg", 'foreignObject');
+                        sensor.canvasNode.setAttribute("x",imgx + borderSize); //Set rect data
+                        sensor.canvasNode.setAttribute("y",imgy + borderSize); //Set rect data
+                        sensor.canvasNode.setAttribute("width", screenScalerSize.width); //Set rect data
+                        sensor.canvasNode.setAttribute("height", screenScalerSize.height); //Set rect data
+                        paper.canvas.appendChild(sensor.canvasNode);
+        
+                        sensor.canvas = document.createElement("canvas");
+                        sensor.canvas.id = "screencanvas";
+                        sensor.canvas.width = screenScalerSize.width;
+                        sensor.canvas.height = screenScalerSize.height;
+                        sensor.canvasNode.appendChild(sensor.canvas);
+                    }
+
+                    $(sensor.canvas).css({ opacity: fadeopacity });
+                    sensor.canvasNode.setAttribute("x", imgx + borderSize); //Set rect data
+                    sensor.canvasNode.setAttribute("y", imgy + borderSize); //Set rect data
+                    sensor.canvasNode.setAttribute("width", screenScalerSize.width); //Set rect data
+                    sensor.canvasNode.setAttribute("height", screenScalerSize.height); //Set rect data
+
+                    sensor.screenrect.attr({
+                        "x": imgx + borderSize,
+                        "y": imgy + borderSize,
+                        "width": 128,
+                        "height": 32,
+                    });
+        
+                    sensor.screenrect.attr({ "opacity": 0 });
+        
+                    context.initScreenDrawing(sensor);
+                    //sensor.screenDrawing.copyToCanvas(sensor.canvas, screenScale);
+                    screenDrawing.renderToCanvas(sensor.state, sensor.canvas, screenScale);
+                } else {
+                    var statex = imgx + (imgw * .05);
+
+                    var statey = imgy + (imgh * .2);
+
+                    if (sensor.state.line1.length > 16)
+                        sensor.state.line1 = sensor.state.line1.substring(0, 16);
+
+                    if (sensor.state.line2 && sensor.state.line2.length > 16)
+                        sensor.state.line2 = sensor.state.line2.substring(0, 16);
+
+                    if (sensor.canvasNode) {
+                        $(sensor.canvasNode).remove();
+                        sensor.canvasNode = null;
+                    }
+
+                    sensor.stateText = paper.text(statex, statey, sensor.state.line1 + "\n" + (sensor.state.line2 ? sensor.state.line2 : ""));
+                    stateanchor = "start";
+                    sensor.stateText.attr("")
+                }
+            }
+        } else if (sensor.type == "temperature") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (sensor.state == null)
+                sensor.state = 25; // FIXME
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('temperature-cold.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.img2 || isElementRemoved(sensor.img2))
+                sensor.img2 = paper.image(getImg('temperature-hot.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.img3 || isElementRemoved(sensor.img3))
+                sensor.img3 = paper.image(getImg('temperature-overlay.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+                
+            });
+            sensor.img2.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            sensor.img3.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            var scale = imgh / 60;
+
+            var cliph = scale * sensor.state;
+
+            sensor.img2.attr({
+                "clip-rect":
+                    imgx + "," +
+                    (imgy + imgh - cliph) + "," +
+                    (imgw) + "," +
+                    cliph
+            });
+
+            sensor.stateText = paper.text(state1x, state1y, sensor.state + " °C");
+
+            if (!context.autoGrading && context.offLineMode) {
+                setSlider(sensor, juststate, imgx, imgy, imgw, imgh, 0, 60);
+            }
+            else {
+                sensor.focusrect.click(function () {
+                    sensorInConnectedModeError();
+                });
+
+                removeSlider(sensor);
+            }
+
+        } else if (sensor.type == "servo") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('servo.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.pale || isElementRemoved(sensor.pale))
+                sensor.pale = paper.image(getImg('servo-pale.png'), imgx, imgy, imgw, imgh);
+
+
+            if (!sensor.center || isElementRemoved(sensor.center))
+                sensor.center = paper.image(getImg('servo-center.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+            sensor.pale.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "transform": "",
+                "opacity": fadeopacity,
+            });
+            sensor.center.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            sensor.pale.rotate(sensor.state);
+
+            if (sensor.state == null)
+                sensor.state = 0;
+
+            sensor.state = Math.round(sensor.state);
+
+            sensor.stateText = paper.text(state1x, state1y, sensor.state + "°");
+
+            if ((!context.runner || !context.runner.isRunning())
+                && !context.offLineMode) {
+                if (!sensor.updatetimeout) {
+                    sensor.updatetimeout = setTimeout(function () {
+
+                        findSensorDefinition(sensor).setLiveState(sensor, sensor.state, function(x) {});
+
+                        sensor.updatetimeout = null;
+                    }, 100);
+                }
+            }
+
+            if (!context.autoGrading &&
+                (!context.runner || !context.runner.isRunning())) {
+                setSlider(sensor, juststate, imgx, imgy, imgw, imgh, 0, 180);
+            } else {
+                sensor.focusrect.click(function () {
+                    sensorInConnectedModeError();
+                });
+
+                removeSlider(sensor);
+            }
+        } else if (sensor.type == "potentiometer") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('potentiometer.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.pale || isElementRemoved(sensor.pale))
+                sensor.pale = paper.image(getImg('potentiometer-pale.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            sensor.pale.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "transform": "",
+                "opacity": fadeopacity,
+            });
+
+            if (sensor.state == null)
+                sensor.state = 0;
+
+            sensor.pale.rotate(sensor.state * 3.6);
+
+            sensor.stateText = paper.text(state1x, state1y, sensor.state + "%");
+
+            if (!context.autoGrading && context.offLineMode) {
+                setSlider(sensor, juststate, imgx, imgy, imgw, imgh, 0, 100);
+            } else {
+                sensor.focusrect.click(function () {
+                    sensorInConnectedModeError();
+                });
+
+                removeSlider(sensor);
+            }
+
+        } else if (sensor.type == "range") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('range.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            if (sensor.state == null)
+                sensor.state = 500;
+
+            if (sensor.rangedistance)
+                sensor.rangedistance.remove();
+
+            if (sensor.rangedistancestart)
+                sensor.rangedistancestart.remove();
+
+            if (sensor.rangedistanceend)
+                sensor.rangedistanceend.remove();
+
+            var rangew;
+
+            if (sensor.state < 30) {
+                rangew = imgw * sensor.state / 100;
+            } else {
+                var firstpart = imgw * 30 / 100;
+                var remaining = imgw - firstpart;
+
+                rangew = firstpart + (remaining * (sensor.state) * 0.0015);
+            }
+
+            var centerx = imgx + (imgw / 2);
+
+            sensor.rangedistance = paper.path(["M", centerx - (rangew / 2),
+                imgy + imgw,
+                "L", centerx + (rangew / 2),
+                imgy + imgw]);
+
+            var markh = 16;
+
+            sensor.rangedistancestart = paper.path(["M", centerx - (rangew / 2),
+                imgy + imgw - (markh / 2),
+                "L", centerx - (rangew / 2),
+                imgy + imgw + (markh / 2)]);
+
+            sensor.rangedistanceend = paper.path(["M", centerx + (rangew / 2),
+                imgy + imgw - (markh / 2),
+                "L", centerx + (rangew / 2),
+                imgy + imgw + (markh / 2)]);
+
+            sensor.rangedistance.attr({
+                "stroke-width": 4,
+                "stroke": "#468DDF",
+                "stroke-linecapstring": "round"
+            });
+
+            sensor.rangedistancestart.attr({
+                "stroke-width": 4,
+                "stroke": "#468DDF",
+                "stroke-linecapstring": "round"
+            });
+
+
+            sensor.rangedistanceend.attr({
+                "stroke-width": 4,
+                "stroke": "#468DDF",
+                "stroke-linecapstring": "round"
+            });
+
+            if (sensor.state >= 10)
+                sensor.state = Math.round(sensor.state);
+
+            sensor.stateText = paper.text(state1x, state1y, sensor.state + " cm");
+            if (!context.autoGrading && context.offLineMode) {
+                setSlider(sensor, juststate, imgx, imgy, imgw, imgh, 0, 500);
+            } else {
+                sensor.focusrect.click(function () {
+                    sensorInConnectedModeError();
+                });
+
+                removeSlider(sensor);
+            }
+        } else if (sensor.type == "light") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('light.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.moon || isElementRemoved(sensor.moon))
+                sensor.moon = paper.image(getImg('light-moon.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.sun || isElementRemoved(sensor.sun))
+                sensor.sun = paper.image(getImg('light-sun.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            if (sensor.state == null)
+                sensor.state = 0;
+
+            if (sensor.state > 50) {
+                var opacity = (sensor.state - 50) * 0.02;
+                sensor.sun.attr({
+                    "x": imgx,
+                    "y": imgy,
+                    "width": imgw,
+                    "height": imgh,
+                    "opacity": opacity * .80 * fadeopacity
+                });
+                sensor.moon.attr({ "opacity": 0 });
+            }
+            else {
+                var opacity = (50 - sensor.state) * 0.02;
+                sensor.moon.attr({
+                    "x": imgx,
+                    "y": imgy,
+                    "width": imgw,
+                    "height": imgh,
+                    "opacity": opacity * .80 * fadeopacity
+                });
+                sensor.sun.attr({ "opacity": 0 });
+            }
+
+            sensor.stateText = paper.text(state1x, state1y, sensor.state + "%");
+            if (!context.autoGrading && context.offLineMode) {
+                setSlider(sensor, juststate, imgx, imgy, imgw, imgh, 0, 100);
+            } else {
+                sensor.focusrect.click(function () {
+                    sensorInConnectedModeError();
+                });
+
+                removeSlider(sensor);
+            }
+        } else if (sensor.type == "humidity") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('humidity.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            if (sensor.state == null)
+                sensor.state = 0;
+
+            sensor.stateText = paper.text(state1x, state1y, sensor.state + "%");
+            if (!context.autoGrading && context.offLineMode) {
+                setSlider(sensor, juststate, imgx, imgy, imgw, imgh, 0, 100);
+            } else {
+                sensor.focusrect.click(function () {
+                    sensorInConnectedModeError();
+                });
+
+                removeSlider(sensor);
+            }
+        } else if (sensor.type == "accelerometer") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('accel.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.state)
+            {
+                sensor.state = [0, 0, 1];
+            }
+
+            if (sensor.state) {
+                try {
+                sensor.stateText = paper.text(state1x, state1y, "X: " + sensor.state[0] + " m/s²\nY: " + sensor.state[1] + " m/s²\nZ: " + sensor.state[2] + " m/s²");
+                } catch (Err)
+                {
+                    var a = 1;
+                }
+            }
+
+            if (!context.autoGrading && context.offLineMode) {
+                setSlider(sensor, juststate, imgx, imgy, imgw, imgh, -8 * 9.81, 8 * 9.81);
+            } else {
+                sensor.focusrect.click(function () {
+                    sensorInConnectedModeError();
+                });
+
+                removeSlider(sensor);
+            }
+        } else if (sensor.type == "gyroscope") {
+            if (!sensor.state) {
+                sensor.state = [0, 0, 0];
+            }
+            if (sensor.stateText) {
+                sensor.stateText.remove();
+            }
+            sensor.stateText = paper.text(state1x, state1y, "X: " + sensor.state[0] + "°/s\nY: " + sensor.state[1] + "°/s\nZ: " + sensor.state[2] + "°/s");
+            if (!sensor.previousState)
+                sensor.previousState = [0, 0, 0];
+
+            if (sensor.rotationAngles != undefined) {
+
+                // update the rotation angle
+                for (var i = 0; i < 3; i++)
+                    sensor.rotationAngles[i] += sensor.previousState[i] * ((new Date() - sensor.lastSpeedChange) / 1000);
+
+                sensor.lastSpeedChange = new Date();
+            }
+
+
+            sensor.previousState = sensor.state;
+
+            if (!context.autoGrading && context.offLineMode) {
+                var img3d = gyroscope3D.getInstance(imgw, imgh);
+            }
+            if(img3d) {
+                if (!sensor.screenrect || isElementRemoved(sensor.screenrect)) {
+                    sensor.screenrect = paper.rect(imgx, imgy, imgw, imgh);
+                    sensor.screenrect.attr({ "opacity": 0 });
+    
+                    sensor.canvasNode = document.createElementNS("http://www.w3.org/2000/svg", 'foreignObject');
+                    sensor.canvasNode.setAttribute("x", imgx);
+                    sensor.canvasNode.setAttribute("y", imgy);
+                    sensor.canvasNode.setAttribute("width", imgw);
+                    sensor.canvasNode.setAttribute("height", imgh);
+                    paper.canvas.appendChild(sensor.canvasNode);
+    
+                    sensor.canvas = document.createElement("canvas");
+                    sensor.canvas.width = imgw;
+                    sensor.canvas.height = imgh;
+                    sensor.canvasNode.appendChild(sensor.canvas);
+                }
+
+                var sensorCtx = sensor.canvas.getContext('2d');
+                sensorCtx.clearRect(0, 0, imgw, imgh);
+                
+                sensorCtx.drawImage(img3d.render(                
+                    sensor.state[0], 
+                    sensor.state[2],
+                    sensor.state[1]
+                ), 0, 0);
+
+                if(!juststate) {
+                    sensor.focusrect.drag(
+                        function(dx, dy, x, y, event) {
+                            sensor.state[0] = Math.max(-125, Math.min(125, sensor.old_state[0] + dy));
+                            sensor.state[1] = Math.max(-125, Math.min(125, sensor.old_state[1] - dx));
+                            drawSensor(sensor, true)
+                        },
+                        function() {
+                            sensor.old_state = sensor.state.slice();
+                        }
+                    );
+                }
+
+            } else {
+                if (!sensor.img || isElementRemoved(sensor.img)) {
+                    sensor.img = paper.image(getImg('gyro.png'), imgx, imgy, imgw, imgh);
+                }
+                sensor.img.attr({
+                    "x": imgx,
+                    "y": imgy,
+                    "width": imgw,
+                    "height": imgh,
+                    "opacity": fadeopacity,
+                });
+                if (!context.autoGrading && context.offLineMode) {
+                    setSlider(sensor, juststate, imgx, imgy, imgw, imgh, -125, 125);
+                } else {
+                    sensor.focusrect.click(function () {
+                        sensorInConnectedModeError();
+                    });
+    
+                    removeSlider(sensor);
+                }                            
+            }            
+        } else if (sensor.type == "magnetometer") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('mag.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.needle || isElementRemoved(sensor.needle))
+                sensor.needle = paper.image(getImg('mag-needle.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            sensor.needle.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "transform": "",
+                "opacity": fadeopacity,
+            });
+
+            if (!sensor.state)
+            {
+                sensor.state = [0, 0, 0];
+            }
+
+            if (sensor.state) {
+                var heading = Math.atan2(sensor.state[0],sensor.state[1])*(180/Math.PI) + 180;
+
+                sensor.needle.rotate(heading);
+            }
+
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (sensor.state) {
+                sensor.stateText = paper.text(state1x, state1y, "X: " + sensor.state[0] + " μT\nY: " + sensor.state[1] + " μT\nZ: " + sensor.state[2] + " μT");
+            }
+
+            if (!context.autoGrading && context.offLineMode) {
+                setSlider(sensor, juststate, imgx, imgy, imgw, imgh, -1600, 1600);
+            } else {
+                sensor.focusrect.click(function () {
+                    sensorInConnectedModeError();
+                });
+
+                removeSlider(sensor);
+            }
+        } else if (sensor.type == "sound") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (sensor.state == null)
+                sensor.state = 25; // FIXME
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('sound.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            // if we just do sensor.state, if it is equal to 0 then the state is not displayed
+            if (sensor.state != null) {
+                sensor.stateText = paper.text(state1x, state1y, sensor.state + " dB");
+            }
+
+            if (!context.autoGrading && context.offLineMode) {
+                setSlider(sensor, juststate, imgx, imgy, imgw, imgh, 0, 60);
+            }
+            else {
+                sensor.focusrect.click(function () {
+                    sensorInConnectedModeError();
+                });
+
+                removeSlider(sensor);
+            }
+
+        } else if (sensor.type == "irtrans") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.ledon || isElementRemoved(sensor.ledon)) {
+                sensor.ledon = paper.image(getImg("irtranson.png"), imgx, imgy, imgw, imgh);
+            }
+
+            if (!sensor.ledoff || isElementRemoved(sensor.ledoff)) {
+                sensor.ledoff = paper.image(getImg('irtransoff.png'), imgx, imgy, imgw, imgh);
+
+                    sensor.focusrect.click(function () {
+                        if (!context.autoGrading && (!context.runner || !context.runner.isRunning())
+                            && !context.offLineMode) {
+                            //sensor.state = !sensor.state;
+                            //drawSensor(sensor);
+                            window.displayHelper.showPopupDialog(irRemoteDialog);
+
+                            $('#picancel').click(function () {
+                                $('#popupMessage').hide();
+                                window.displayHelper.popupMessageShown = false;
+                            });
+        
+                            $('#picancel2').click(function () {
+                                $('#popupMessage').hide();
+                                window.displayHelper.popupMessageShown = false;
+                            });
+        
+                            var addedSomeButtons = false;
+                            var remotecontent = document.getElementById('piremotecontent');
+                            var parentdiv = document.createElement("DIV");
+                            parentdiv.className  = "form-group";
+        
+                            remotecontent.appendChild(parentdiv);
+                            var count = 0;
+                            for (var code in context.remoteIRcodes)
+                            {
+                                addedSomeButtons = true;
+                                context.remoteIRcodes[code];
+        
+                                var btn = document.createElement("BUTTON");
+                                var t = document.createTextNode(code);
+        
+                                btn.className = "btn";
+                                btn.appendChild(t);
+                                parentdiv.appendChild(btn);
+        
+                                let capturedcode = code;
+                                let captureddata = context.remoteIRcodes[code];
+                                btn.onclick = function() {
+                                    $('#popupMessage').hide();
+                                    window.displayHelper.popupMessageShown = false;
+            
+                                    //if (sensor.waitingForIrMessage)
+                                        //sensor.waitingForIrMessage(capturedcode);
+
+                                    context.quickPiConnection.sendCommand("presetIRMessage(\"" + capturedcode + "\", '" + captureddata + "')", function(returnVal) {});
+                                    context.quickPiConnection.sendCommand("sendIRMessage(\"irtran1\", \"" + capturedcode + "\")", function(returnVal) {});
+                            
+                                };
+        
+                                count += 1;
+        
+                                if (count == 4)
+                                {
+                                    count = 0;
+                                    parentdiv = document.createElement("DIV");
+                                    parentdiv.className  = "form-group";
+                                    remotecontent.appendChild(parentdiv);
+                                }
+                            }
+                            if (!addedSomeButtons)
+                            {
+                                $('#piremotemessage').text(strings.messages.noIrPresets);
+                            }
+        
+                            var btn = document.createElement("BUTTON");
+        
+                            if (sensor.state)
+                                var t = document.createTextNode(strings.messages.irDisableContinous);
+                            else
+                                var t = document.createTextNode(strings.messages.irEnableContinous);
+        
+                            
+                            btn.className = "btn";
+                            btn.appendChild(t);
+                            parentdiv.appendChild(btn);
+                            btn.onclick = function() {
+                                $('#popupMessage').hide();
+                                window.displayHelper.popupMessageShown = false;
+        
+                                sensor.state = !sensor.state;
+                                drawSensor(sensor);
+                            };
+                        } else {
+                            actuatorsInRunningModeError();
+                        }
+                    });
+            }
+
+            sensor.ledon.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+            sensor.ledoff.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+
+            if (sensor.state) {
+                sensor.ledon.attr({ "opacity": fadeopacity });
+                sensor.ledoff.attr({ "opacity": 0 });
+
+                sensor.stateText = paper.text(state1x, state1y, strings.messages.on.toUpperCase());
+            } else {
+                sensor.ledon.attr({ "opacity": 0 });
+                sensor.ledoff.attr({ "opacity": fadeopacity });
+
+                sensor.stateText = paper.text(state1x, state1y, strings.messages.off.toUpperCase());
+            }
+
+
+            if ((!context.runner || !context.runner.isRunning())
+                && !context.offLineMode) {
+
+                findSensorDefinition(sensor).setLiveState(sensor, sensor.state, function(x) {});
+            }
+        } else if (sensor.type == "irrecv") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.buttonon || isElementRemoved(sensor.buttonon))
+                sensor.buttonon = paper.image(getImg('irrecvon.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.buttonoff || isElementRemoved(sensor.buttonoff))
+                sensor.buttonoff = paper.image(getImg('irrecvoff.png'), imgx, imgy, imgw, imgh);
+
+            sensor.buttonon.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+            sensor.buttonoff.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+
+            if (sensor.state) {
+                sensor.buttonon.attr({ "opacity": fadeopacity });
+                sensor.buttonoff.attr({ "opacity": 0 });
+
+                sensor.stateText = paper.text(state1x, state1y, strings.messages.on.toUpperCase());
+            } else {
+                sensor.buttonon.attr({ "opacity": 0 });
+                sensor.buttonoff.attr({ "opacity": fadeopacity });
+
+                sensor.stateText = paper.text(state1x, state1y, strings.messages.off.toUpperCase());
+            }
+
+            sensor.focusrect.click(function () {
+                if (context.offLineMode) {
+                    window.displayHelper.showPopupDialog(irRemoteDialog);
+
+                    $('#picancel').click(function () {
+                        $('#popupMessage').hide();
+                        window.displayHelper.popupMessageShown = false;
+                    });
+
+                    $('#picancel2').click(function () {
+                        $('#popupMessage').hide();
+                        window.displayHelper.popupMessageShown = false;
+                    });
+
+                    var addedSomeButtons = false;
+                    var remotecontent = document.getElementById('piremotecontent');
+                    var parentdiv = document.createElement("DIV");
+                    parentdiv.className  = "form-group";
+
+                    remotecontent.appendChild(parentdiv);
+                    var count = 0;
+                    for (var code in context.remoteIRcodes)
+                    {
+                        addedSomeButtons = true;
+                        context.remoteIRcodes[code];
+
+                        var btn = document.createElement("BUTTON");
+                        var t = document.createTextNode(code);
+
+                        btn.className = "btn";
+                        btn.appendChild(t);
+                        parentdiv.appendChild(btn);
+
+                        let capturedcode = code;
+                        btn.onclick = function() {
+                            $('#popupMessage').hide();
+                            window.displayHelper.popupMessageShown = false;
+    
+                            if (sensor.waitingForIrMessage)
+                                sensor.waitingForIrMessage(capturedcode);
+                        };
+
+                        count += 1;
+
+                        if (count == 4)
+                        {
+                            count = 0;
+                            parentdiv = document.createElement("DIV");
+                            parentdiv.className  = "form-group";
+                            remotecontent.appendChild(parentdiv);
+                        }
+                    }
+                    if (!addedSomeButtons)
+                    {
+                        $('#piremotemessage').text(strings.messages.noIrPresets);
+                    }
+
+                    var btn = document.createElement("BUTTON");
+
+                    if (sensor.state)
+                        var t = document.createTextNode(strings.messages.irDisableContinous);
+                    else
+                        var t = document.createTextNode(strings.messages.irEnableContinous);
+
+                    
+                    btn.className = "btn";
+                    btn.appendChild(t);
+                    parentdiv.appendChild(btn);
+                    btn.onclick = function() {
+                        $('#popupMessage').hide();
+                        window.displayHelper.popupMessageShown = false;
+
+                        sensor.state = !sensor.state;
+                        drawSensor(sensor);
+                    };
+
+                }
+                else{
+                    //sensorInConnectedModeError();
+
+                    context.stopLiveUpdate = true;
+
+                    var irLearnDialog = "
" +
+                        "   
" +
+                        "       
" +
+                        "           " +
+                                    strings.messages.irReceiverTitle +
+                        "       
" +
+                        "       
" +
+                        "   
" +
+                        "   
" +
+                        "       
" +
+                        "           
" + strings.messages.directIrControl + "
" +
+                        "       
" +
+                        "       
" +
+                        "           
" +
+                        "       
" +
+                        "   
" +
+                        "   
" +
+                        "       " +
+                        "       " +
+                        "   
" +
+                        "
";
+
+                    window.displayHelper.showPopupDialog(irLearnDialog);
+
+                    $('#picancel').click(function () {
+                        $('#popupMessage').hide();
+                        window.displayHelper.popupMessageShown = false;
+                        context.stopLiveUpdate = false;
+                    });
+
+                    $('#picancel2').click(function () {
+                        $('#popupMessage').hide();
+                        window.displayHelper.popupMessageShown = false;
+                        context.stopLiveUpdate = false;
+                    });
+
+                    $('#piirlearn').click(function () {
+
+                        $('#piirlearn').attr('disabled', true);
+
+                        $("#piircode").text("");
+                        context.quickPiConnection.sendCommand("readIRMessageCode(\"irrec1\", 10000)", function(retval)
+                        {
+                            $('#piirlearn').attr('disabled', false);
+                            $("#piircode").text(retval);
+                        });
+                    });
+
+                }
+            });
+/*
+            if (!context.autoGrading && !sensor.buttonon.node.onmousedown) {
+                sensor.focusrect.node.onmousedown = function () {
+                    if (context.offLineMode) {
+                        sensor.state = true;
+                        drawSensor(sensor);
+                    } else
+                        sensorInConnectedModeError();
+                };
+
+
+                sensor.focusrect.node.onmouseup = function () {
+                    if (context.offLineMode) {
+                        sensor.state = false;
+                        drawSensor(sensor);
+
+                        if (sensor.onPressed)
+                            sensor.onPressed();
+                    } else
+                        sensorInConnectedModeError();
+                }
+
+                sensor.focusrect.node.ontouchstart = sensor.focusrect.node.onmousedown;
+                sensor.focusrect.node.ontouchend = sensor.focusrect.node.onmouseup;
+            }*/
+        } else if (sensor.type == "stick") {
+            if (sensor.stateText)
+                sensor.stateText.remove();
+
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('stick.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.imgup || isElementRemoved(sensor.imgup))
+                sensor.imgup = paper.image(getImg('stickup.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.imgdown || isElementRemoved(sensor.imgdown))
+                sensor.imgdown = paper.image(getImg('stickdown.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.imgleft || isElementRemoved(sensor.imgleft))
+                sensor.imgleft = paper.image(getImg('stickleft.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.imgright || isElementRemoved(sensor.imgright))
+                sensor.imgright = paper.image(getImg('stickright.png'), imgx, imgy, imgw, imgh);
+
+            if (!sensor.imgcenter || isElementRemoved(sensor.imgcenter))
+                sensor.imgcenter = paper.image(getImg('stickcenter.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": fadeopacity,
+            });
+
+            sensor.imgup.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": 0,
+            });
+            sensor.imgdown.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": 0,
+            });
+            sensor.imgleft.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": 0,
+            });
+            sensor.imgright.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": 0,
+            });
+            sensor.imgcenter.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": 0,
+            });
+
+            if (sensor.stateText)
+               sensor.stateText.remove();
+
+            if (!sensor.state)
+                sensor.state = [false, false, false, false, false];
+
+            var stateString = "\n";
+            if (sensor.state[0]) {
+                stateString += strings.messages.up.toUpperCase() + "\n";
+                sensor.imgup.attr({ "opacity": 1 });
+            }
+            if (sensor.state[1]) {
+                stateString += strings.messages.down.toUpperCase() + "\n";
+                sensor.imgdown.attr({ "opacity": 1 });
+            }
+            if (sensor.state[2]) {
+                stateString += strings.messages.left.toUpperCase() + "\n";
+                sensor.imgleft.attr({ "opacity": 1 });
+            }
+            if (sensor.state[3]) {
+                stateString += strings.messages.right.toUpperCase() + "\n";
+                sensor.imgright.attr({ "opacity": 1 });
+            }
+            if (sensor.state[4]) {
+                stateString += strings.messages.center.toUpperCase() + "\n";
+                sensor.imgcenter.attr({ "opacity": 1 });
+            }
+
+            sensor.stateText = paper.text(state1x, state1y, stateString);
+
+            if (sensor.portText)
+                sensor.portText.remove();
+
+            drawPortText = false;
+
+            if (sensor.portText)
+                sensor.portText.remove();
+
+            if (!context.autoGrading) {
+                var gpios = findSensorDefinition(sensor).gpios;
+                var min = 255;
+                var max = 0;
+
+                for (var i = 0; i < gpios.length; i++) {
+                    if (gpios[i] > max)
+                        max = gpios[i];
+
+                    if (gpios[i] < min)
+                        min = gpios[i];
+                }
+
+
+                $('#stickupstate').text(sensor.state[0] ? strings.messages.on.toUpperCase() : strings.messages.off.toUpperCase());
+                $('#stickdownstate').text(sensor.state[1] ? strings.messages.on.toUpperCase() : strings.messages.off.toUpperCase());
+                $('#stickleftstate').text(sensor.state[2] ? strings.messages.on.toUpperCase() : strings.messages.off.toUpperCase());
+                $('#stickrightstate').text(sensor.state[3] ? strings.messages.on.toUpperCase() : strings.messages.off.toUpperCase());
+                $('#stickcenterstate').text(sensor.state[4] ? strings.messages.on.toUpperCase() : strings.messages.off.toUpperCase());
+
+/*
+                sensor.portText = paper.text(state1x, state1y, "D" + min.toString() + "-D" + max.toString() + "?");
+                sensor.portText.attr({ "font-size": portsize + "px", 'text-anchor': 'start', fill: "blue" });
+                sensor.portText.node.style = "-moz-user-select: none; -webkit-user-select: none;";
+                var b = sensor.portText._getBBox();
+                sensor.portText.translate(0, b.height / 2);
+
+                var stickPortsDialog = `
+                

+                

+                    

+                        
+                        Noms et ports de la manette
+                    

+                    

+                

+                

+                    
+                    

+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
NamePortStateDirection

+                    

+                

+                

+                    
+                

+            

+                `;
+
+                sensor.portText.click(function () {
+                    window.displayHelper.showPopupDialog(stickPortsDialog);
+
+                    $('#picancel').click(function () {
+                        $('#popupMessage').hide();
+                        window.displayHelper.popupMessageShown = false;
+                    });
+
+                    $('#picancel2').click(function () {
+                        $('#popupMessage').hide();
+                        window.displayHelper.popupMessageShown = false;
+                    });
+
+                    $('#stickupname').text(sensor.name + ".up");
+                    $('#stickdownname').text(sensor.name + ".down");
+                    $('#stickleftname').text(sensor.name + ".left");
+                    $('#stickrightname').text(sensor.name + ".right");
+                    $('#stickcentername').text(sensor.name + ".center");
+
+                    $('#stickupport').text("D" + gpios[0]);
+                    $('#stickdownport').text("D" + gpios[1]);
+                    $('#stickleftport').text("D" + gpios[2]);
+                    $('#stickrightport').text("D" + gpios[3]);
+                    $('#stickcenterport').text("D" + gpios[4]);
+
+                    $('#stickupstate').text(sensor.state[0] ? "ON" : "OFF");
+                    $('#stickdownstate').text(sensor.state[1] ? "ON" : "OFF");
+                    $('#stickleftstate').text(sensor.state[2] ? "ON" : "OFF");
+                    $('#stickrightstate').text(sensor.state[3] ? "ON" : "OFF");
+                    $('#stickcenterstate').text(sensor.state[4] ? "ON" : "OFF");
+
+                });
+                */
+            }
+
+
+            function poinInRect(rect, x, y) {
+
+                if (x > rect.left && x < rect.right && y > rect.top  && y < rect.bottom)
+                    return true;
+
+                return false;
+            }
+
+            function moveRect(rect, x, y) {
+                rect.left += x;
+                rect.right += x;
+
+                rect.top += y;
+                rect.bottom += y;
+            }
+
+            sensor.focusrect.node.onmousedown = function(evt) {
+                if (!context.offLineMode) {
+                    sensorInConnectedModeError();
+                    return;
+                }
+
+                var e = evt.target;
+                var dim = e.getBoundingClientRect();
+                var rectsize = dim.width * .30;
+
+
+                var rect = {
+                    left: dim.left,
+                    right: dim.left + rectsize,
+                    top: dim.top,
+                    bottom: dim.top + rectsize,
+                }
+
+                // Up left
+                if (poinInRect(rect, evt.clientX, evt.clientY)) {
+                    sensor.state[0] = true;
+                    sensor.state[2] = true;
+                }
+
+                // Up
+                 moveRect(rect, rectsize, 0);
+                 if (poinInRect(rect, evt.clientX, evt.clientY)) {
+                    sensor.state[0] = true;
+                 }
+
+                 // Up right
+                 moveRect(rect, rectsize, 0);
+                 if (poinInRect(rect, evt.clientX, evt.clientY)) {
+                    sensor.state[0] = true;
+                    sensor.state[3] = true;
+                 }
+
+                 // Right
+                 moveRect(rect, 0, rectsize);
+                 if (poinInRect(rect, evt.clientX, evt.clientY)) {
+                    sensor.state[3] = true;
+                 }
+
+                 // Center
+                 moveRect(rect, -rectsize, 0);
+                 if (poinInRect(rect, evt.clientX, evt.clientY)) {
+                    sensor.state[4] = true;
+                 }
+
+                 // Left
+                 moveRect(rect, -rectsize, 0);
+                 if (poinInRect(rect, evt.clientX, evt.clientY)) {
+                    sensor.state[2] = true;
+                 }
+
+                 // Down left
+                 moveRect(rect, 0, rectsize);
+                 if (poinInRect(rect, evt.clientX, evt.clientY)) {
+                    sensor.state[1] = true;
+                    sensor.state[2] = true;
+                 }
+
+                 // Down
+                 moveRect(rect, rectsize, 0);
+                 if (poinInRect(rect, evt.clientX, evt.clientY)) {
+                    sensor.state[1] = true;
+                 }
+
+                 // Down right
+                 moveRect(rect, rectsize, 0);
+                 if (poinInRect(rect, evt.clientX, evt.clientY)) {
+                    sensor.state[1] = true;
+                    sensor.state[3] = true;
+                 }
+
+                 drawSensor(sensor);
+            }
+
+            sensor.focusrect.node.onmouseup = function(evt) {
+                if (!context.offLineMode) {
+                    sensorInConnectedModeError();
+                    return;
+                }
+
+                sensor.state = [false, false, false, false, false];
+                drawSensor(sensor);
+            }
+
+            sensor.focusrect.node.ontouchstart = sensor.focusrect.node.onmousedown;
+            sensor.focusrect.node.ontouchend = sensor.focusrect.node.onmouseup;
+        } else if (sensor.type == "cloudstore") {
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('cloudstore.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+                "opacity": scrolloffset ? 0.3 : 1,
+            });
+            
+            drawPortText = false;
+            drawName = false;
+
+        } else if (sensor.type == "clock") {
+            if (!sensor.img || isElementRemoved(sensor.img))
+                sensor.img = paper.image(getImg('clock.png'), imgx, imgy, imgw, imgh);
+
+            sensor.img.attr({
+                "x": imgx,
+                "y": imgy,
+                "width": imgw,
+                "height": imgh,
+            });
+
+            sensor.stateText = paper.text(state1x, state1y, context.currentTime.toString() + "ms");
+
+            drawPortText = false;
+            drawName = false;
+        }
+
+
+        sensor.focusrect.mousedown(function () {
+            if (infos.customSensors && !context.autoGrading) {
+                if (context.removerect) {
+                    context.removerect.remove();
+                }
+
+                if (!context.runner || !context.runner.isRunning()) {
+                context.removerect = paper.text(portx, imgy, "\uf00d"); // fa-times char
+                removeRect = context.removerect;
+                sensorWithRemoveRect = sensor;
+
+                context.removerect.attr({
+                    "font-size": "30" + "px",
+                    fill: "lightgray",
+                    "font-family": "Font Awesome 5 Free",
+                    'text-anchor': 'start',
+                    "x": portx,
+                    "y": imgy,
+                });
+
+                context.removerect.node.style = "-moz-user-select: none; -webkit-user-select: none;";
+                context.removerect.node.style.fontFamily = '"Font Awesome 5 Free"';
+                context.removerect.node.style.fontWeight = "bold";
+
+
+                context.removerect.click(function (element) {
+
+                    window.displayHelper.showPopupMessage(strings.messages.removeConfirmation,
+                        'blanket',
+                        strings.messages.remove,
+                        function () {
+                            for (var i = 0; i < infos.quickPiSensors.length; i++) {
+                                if (infos.quickPiSensors[i] === sensor) {
+                                    sensor.removed = true;
+                                    infos.quickPiSensors.splice(i, 1);
+                                }
+                            }
+                            context.recreateDisplay = true;
+                            context.resetDisplay();
+                        },
+                        strings.messages.keep);
+                });
+            }
+            }
+        });
+
+
+        if (sensor.stateText) {
+            try {
+                var statecolor = "gray";
+                if (context.compactLayout)
+                    statecolor = "black";
+
+                sensor.stateText.attr({ "font-size": statesize + "px", 'text-anchor': stateanchor, 'font-weight': 'bold', fill: statecolor });
+                var b = sensor.stateText._getBBox();
+                sensor.stateText.translate(0, b.height/2);
+                sensor.stateText.node.style = "-moz-user-select: none; -webkit-user-select: none;";
+            } catch (err) {
+            }
+        }
+
+
+		if (drawPortText) {
+        	if (sensor.portText)
+            	sensor.portText.remove();
+
+        	sensor.portText = paper.text(portx, porty, sensor.port);
+        	sensor.portText.attr({ "font-size": portsize + "px", 'text-anchor': 'start', fill: "gray" });
+        	sensor.portText.node.style = "-moz-user-select: none; -webkit-user-select: none;";
+        	var b = sensor.portText._getBBox();
+        	sensor.portText.translate(0,b.height/2);
+		}
+
+        if (sensor.nameText) {
+            sensor.nameText.remove();
+        }
+
+
+        if (drawName) {
+            if (sensor.name) {
+                sensor.nameText = paper.text(namex, namey, sensor.name );
+                sensor.nameText.attr({ "font-size": namesize + "px", 'text-anchor': nameanchor, fill: "#7B7B7B" });
+                sensor.nameText.node.style = "-moz-user-select: none; -webkit-user-select: none;";
+            }
+        }
+
+
+        if (!donotmovefocusrect) {
+            // This needs to be in front of everything
+            sensor.focusrect.toFront();
+        }
+
+        // save the sensor if we are not running
+        if (!(context.runner && context.runner.isRunning())) {
+            if (_findFirst(sensorDefinitions, function(globalSensor) {
+                return globalSensor.name === sensor.type;
+            }).isSensor) {
+                context.sensorsSaved[sensor.name] = {
+                    state: Array.isArray(sensor.state) ? sensor.state.slice() : sensor.state,
+                    screenDrawing: sensor.screenDrawing,
+                    lastDrawnTime: sensor.lastDrawnTime,
+                    lastDrawnState: sensor.lastDrawnState,
+                    callsInTimeSlot: sensor.callsInTimeSlot,
+                    lastTimeIncrease: sensor.lastTimeIncrease,
+                    removed: sensor.removed,
+                    quickStore: sensor.quickStore
+                };
+            }
+        }
+    }
+
+    function _findFirst(array, func) {
+        for (var i = 0; i < array.length; i++) {
+            if (func(array[i]))
+                return array[i];
+        }
+        return undefined;
+    }
+
+    context.sensorsSaved = {};
+
+    context.registerQuickPiEvent = function (name, newState, setInSensor = true, allowFail = false) {
+        var sensor = findSensorByName(name);
+        if (!sensor) {
+            context.success = false;
+            throw (strings.messages.sensorNotFound.format(name));
+        }
+
+        if (setInSensor) {
+            sensor.state = newState;
+            drawSensor(sensor);
+        }
+
+        if (context.autoGrading && context.gradingStatesBySensor != undefined) {
+            var fail = false;
+            var type = "actual";
+
+            if(!context.actualStatesBySensor[name]) {
+                context.actualStatesBySensor[name] = [];
+            }
+            var actualStates = context.actualStatesBySensor[name];
+
+            var lastRealState = actualStates.length > 0 ? actualStates[actualStates.length-1] : null;
+            if(lastRealState) {
+                if(lastRealState.time == context.currentTime) {
+                    lastRealState.state = newState;
+                } else {
+                    actualStates.push({time: context.currentTime, state: newState});
+                }
+            } else {
+                actualStates.push({time: context.currentTime, state: newState});
+            }
+
+            drawNewStateChangesSensor(name, newState);
+
+            context.increaseTime(sensor);
+        }
+    }
+
+    function drawNewStateChangesSensor(name, newState=null) {
+        var sensor = findSensorByName(name);
+        if (!sensor) {
+            context.success = false;
+            throw (strings.messages.sensorNotFound.format(name));
+        }
+
+        var sensorDef = findSensorDefinition(sensor);
+        if(sensor.lastDrawnState !== null) {
+            // Get all states between the last drawn time and now
+            var expectedStates = context.getSensorExpectedState(name, sensor.lastDrawnTime, context.currentTime);
+            for(var i = 0; expectedStates && i < expectedStates.length; i++) {
+                // Draw the line up to the next expected state
+                var expectedState = expectedStates[i];
+                var nextTime = i+1 < expectedStates.length ? expectedStates[i+1].time : context.currentTime;
+                var type = "actual";
+                // Check the previous state
+                if(!sensorDef.compareState(sensor.lastDrawnState, expectedState.state)) {
+                    type = "wrong";
+                }
+                drawSensorTimeLineState(sensor, sensor.lastDrawnState, sensor.lastDrawnTime, nextTime, type, false, expectedState.state);
+                sensor.lastDrawnTime = nextTime;
+            }
+        }
+
+        sensor.lastDrawnTime = context.currentTime;
+
+        if(newState !== null && sensor.lastDrawnState != newState) {
+            // Draw the new state change
+            if(sensor.lastDrawnState === null) {
+                sensor.lastDrawnState = newState;
+            }
+
+            var type = "actual";
+            // Check the new state
+            var expectedState = context.getSensorExpectedState(name, context.currentTime);
+
+            if (expectedState !== null && !sensorDef.compareState(expectedState.state, newState))
+            {
+                type = "wrong";
+            }
+            drawSensorTimeLineState(sensor, newState, context.currentTime, context.currentTime, type, false, expectedState && expectedState.state);
+            sensor.lastDrawnState = newState;
+        }
+    }
+
+    function drawNewStateChanges() {
+        // Draw all sensors
+        if(!context.gradingStatesBySensor) { return; }
+        for(var sensorName in context.gradingStatesBySensor) {
+            drawNewStateChangesSensor(sensorName);
+        }
+    }
+
+    context.increaseTime = function (sensor) {
+        if (!sensor.lastTimeIncrease) {
+            sensor.lastTimeIncrease = 0;
+        }
+
+        if (sensor.callsInTimeSlot == undefined)
+            sensor.callsInTimeSlot = 0;
+
+        if (sensor.lastTimeIncrease == context.currentTime) {
+            sensor.callsInTimeSlot += 1;
+        }
+        else {
+            sensor.lastTimeIncrease = context.currentTime;
+            sensor.callsInTimeSlot = 1;
+        }
+
+        if (sensor.callsInTimeSlot > getQuickPiOption('increaseTimeAfterCalls')) {
+            context.currentTime += context.tickIncrease;
+
+            sensor.lastTimeIncrease = context.currentTime;
+            sensor.callsInTimeSlot = 0;
+        }
+
+        drawCurrentTime();
+        if(context.autoGrading)
+        {
+            drawNewStateChanges();
+        }
+
+        if(context.runner) {
+            // Tell the runner an "action" happened
+            context.runner.signalAction();
+        }
+    }
+
+    context.increaseTimeBy = function (time) {
+
+        var iStates = 0;
+
+        var newTime = context.currentTime + time;
+
+        if (context.gradingStatesByTime) {
+            // Advance until current time, ignore everything in the past.
+            while (iStates < context.gradingStatesByTime.length &&
+                context.gradingStatesByTime[iStates].time < context.currentTime)
+                iStates++;
+
+            for (; iStates < context.gradingStatesByTime.length; iStates++) {
+                var sensorState = context.gradingStatesByTime[iStates];
+
+                // Until the new time
+                if (sensorState.time >= newTime)
+                    break;
+
+                // Mark all inputs as hit
+                if (sensorState.input) {
+                    sensorState.hit = true;
+    //                context.currentTime = sensorState.time;
+                    context.getSensorState(sensorState.name);
+                }
+            }
+        }
+
+        if(context.runner) {
+            // Tell the runner an "action" happened
+            context.runner.signalAction();
+        }
+
+        context.currentTime = newTime;
+
+        drawCurrentTime();
+        if (context.autoGrading) {
+            drawNewStateChanges();
+        }
+    }
+
+    context.getSensorExpectedState = function (name, targetTime = null, upToTime = null) {
+        var state = null;
+        if(targetTime === null) {
+            targetTime = context.currentTime;
+        }
+
+        if (!context.gradingStatesBySensor)
+        {
+            return null;
+        }
+
+        var actualname = name;
+        var parts = name.split(".");
+        if (parts.length == 2) {
+            actualname = parts[0];
+        }
+
+        var sensorStates = context.gradingStatesBySensor[actualname];
+
+        if (!sensorStates)
+            return null; // Fail??
+
+        var lastState;
+        var startTime = -1;
+        for (var idx = 0; idx < sensorStates.length; idx++) {
+            if (startTime >= 0
+                && targetTime >= startTime
+                && targetTime < sensorStates[idx].time) {
+                    state = lastState;
+                    break;
+            }
+
+            startTime = sensorStates[idx].time;
+            lastState = sensorStates[idx];
+        }
+
+        // This is the end state
+        if(state === null && targetTime >= startTime) {
+            state = lastState;
+        }
+
+        if(state && upToTime !== null) {
+            // If upToTime is given, return an array of states instead
+            var states = [state];
+            for(var idx2 = idx+1; idx2 < sensorStates.length; idx2++) {
+                if(sensorStates[idx2].time < upToTime) {
+                    states.push(sensorStates[idx2]);
+                } else {
+                    break;
+                }
+            }
+            return states;
+        } else {
+            return state;
+        }
+    }
+
+
+    context.getSensorState = function (name) {
+        var state = null;
+
+        var sensor = findSensorByName(name);
+        if (!context.display || context.autoGrading) {
+            var stateTime = context.getSensorExpectedState(name);
+
+            if (stateTime != null) {
+                stateTime.hit = true;
+                state = stateTime.state;
+                if(sensor) {
+                    // Redraw from the beginning of this state
+                    sensor.lastDrawnTime = Math.min(sensor.lastDrawnTime, stateTime.time);
+                }
+            }
+            else {
+                state = 0;
+            }
+        }
+
+        if (!sensor) {
+            context.success = false;
+            throw (strings.messages.sensorNotFound.format(name));
+        }
+
+        if (state == null) {
+            state = sensor.state;
+        }
+        else {
+            sensor.state = state;
+            drawSensor(sensor);
+        }
+
+        drawNewStateChangesSensor(sensor.name, sensor.state);
+
+        context.increaseTime(sensor);
+
+        return state;
+    }
+
+    // This will advance grading time to the next button release for waitForButton
+    // will return false if the next event wasn't a button press
+    context.advanceToNextRelease = function (sensorType, port) {
+        var retval = false;
+        var iStates = 0;
+
+        // Advance until current time, ignore everything in the past.
+        while (context.gradingStatesByTime[iStates].time <= context.currentTime)
+            iStates++;
+
+        for (; iStates < context.gradingStatesByTime.length; iStates++) {
+            sensorState = context.gradingStatesByTime[iStates];
+
+            if (sensorState.type == sensorType &&
+                sensorState.port == port) {
+
+                sensorState.hit = true;
+                if (!sensorState.state) {
+                    context.currentTime = sensorState.time;
+                    retval = true;
+                    break;
+                }
+            }
+            else {
+                retval = false;
+                break;
+            }
+        }
+
+        return retval;
+    };
+
+
+    /***** Functions *****/
+    /* Here we define each function of the library.
+       Blocks will generally use context.group.blockName as their handler
+       function, hence we generally use this name for the functions. */
+    context.quickpi.turnLedOn = function (callback) {
+
+        var sensor = findSensorByType("led");
+
+        context.registerQuickPiEvent(sensor.name, true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        }
+        else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand("turnLedOn()", cb);
+        }
+    };
+
+    context.quickpi.turnLedOff = function (callback) {
+
+        var sensor = findSensorByType("led");
+
+        context.registerQuickPiEvent(sensor.name, false);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand("turnLedOff()", cb);
+        }
+    };
+
+    context.quickpi.turnBuzzerOn = function (callback) {
+
+        context.registerQuickPiEvent("buzzer1", true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        }
+        else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand("turnBuzzerOn()", cb);
+        }
+    };
+
+    context.quickpi.turnBuzzerOff = function (callback) {
+        context.registerQuickPiEvent("buzzer1", false);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand("turnBuzzerOff()", cb);
+        }
+    };
+
+    context.quickpi.waitForButton = function (name, callback) {
+        //        context.registerQuickPiEvent("button", "D22", "wait", false);
+        var sensor = findSensorByName(name, true);
+
+        if (!context.display || context.autoGrading) {
+
+            context.advanceToNextRelease("button", sensor.port);
+
+            context.waitDelay(callback);
+        } else if (context.offLineMode) {
+            if (sensor) {
+                var cb = context.runner.waitCallback(callback);
+                sensor.onPressed = function () {
+                    cb();
+                }
+            } else {
+                context.waitDelay(callback);
+            }
+        }
+        else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand("waitForButton(\"" + name + "\")", cb);
+        }
+    };
+
+
+    context.quickpi.isButtonPressed = function (arg1, arg2) {
+        if(typeof arg2 == "undefined") {
+            // no arguments
+            var callback = arg1;
+            var sensor = findSensorByType("button");
+            var name = sensor.name;
+        } else {
+            var callback = arg2;
+            var sensor = findSensorByName(arg1, true);
+            var name = arg1;
+        }
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+
+            if (sensor.type == "stick") {
+                var state = context.getSensorState(name);
+                var stickDefinition = findSensorDefinition(sensor);
+                var buttonstate = stickDefinition.getButtonState(name, sensor.state);
+
+
+                context.runner.noDelay(callback, buttonstate);
+            } else {
+                var state = context.getSensorState(name);
+
+                context.runner.noDelay(callback, state);
+            }
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            if (sensor.type == "stick") {
+                var stickDefinition = findSensorDefinition(sensor);
+
+                stickDefinition.getLiveState(sensor, function(returnVal) {
+                    sensor.state = returnVal;
+                    drawSensor(sensor);
+
+                    var buttonstate = stickDefinition.getButtonState(name, sensor.state);
+
+                    cb(buttonstate);
+                });
+
+            } else {
+                findSensorDefinition(sensor).getLiveState(sensor, function(returnVal) {
+                    sensor.state = returnVal != "0";
+                    drawSensor(sensor);
+                    cb(returnVal != "0");
+                });
+            }
+        }
+    };
+
+    context.quickpi.isButtonPressedWithName = context.quickpi.isButtonPressed;
+
+    context.quickpi.buttonWasPressed = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var state = context.getSensorState(name);
+
+            var wasPressed = !!sensor.wasPressed;
+            sensor.wasPressed = false;
+
+            context.runner.noDelay(callback, wasPressed);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+            context.quickPiConnection.sendCommand("buttonWasPressed(\"" + name + "\")", function (returnVal) {
+                cb(returnVal != "0");
+            });
+        }
+
+    };
+
+    context.quickpi.setLedState = function (name, state, callback) {
+        var sensor = findSensorByName(name, true);
+        var command = "setLedState(\"" + sensor.port + "\"," + (state ? "True" : "False") + ")";
+
+        context.registerQuickPiEvent(name, state ? true : false);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, cb);
+        }
+    };
+
+    context.quickpi.setBuzzerState = function (name, state, callback) {
+        var sensor = findSensorByName(name, true);
+
+        var command = "setBuzzerState(\"" + name + "\"," + (state ? "True" : "False") + ")";
+
+        context.registerQuickPiEvent(name, state ? true : false);
+
+        if(context.display) {
+            state ? buzzerSound.start(name) : buzzerSound.stop(name);
+        }
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, cb);
+        }
+    };
+
+    context.quickpi.isBuzzerOn = function (arg1, arg2) {
+        if(typeof arg2 == "undefined") {
+            // no arguments
+            var callback = arg1;
+            var sensor = findSensorByType("buzzer");
+        } else {
+            var callback = arg2;
+            var sensor = findSensorByName(arg1, true);
+        }
+
+        var command = "isBuzzerOn(\"" + sensor.name + "\")";
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var state = context.getSensorState("buzzer1");
+            context.waitDelay(callback, state);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, function(returnVal) {
+                returnVal = parseFloat(returnVal)
+                cb(returnVal);
+            });
+        }
+    };
+
+    context.quickpi.isBuzzerOnWithName = context.quickpi.isBuzzerOn;
+
+    context.quickpi.setBuzzerNote = function (name, frequency, callback) {
+        var sensor = findSensorByName(name, true);
+        var command = "setBuzzerNote(\"" + name + "\"," + frequency + ")";
+
+        context.registerQuickPiEvent(name, frequency);
+
+        if(context.display && context.offLineMode) {
+            buzzerSound.start(name, frequency);
+        }
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, function(returnVal) {
+                returnVal = parseFloat(returnVal)
+                cb(returnVal);
+
+            });
+        }
+    };
+
+    context.quickpi.getBuzzerNote = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        var command = "getBuzzerNote(\"" + name + "\")";
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback, sensor.state);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, function(returnVal) {
+                returnVal = parseFloat(returnVal)
+                cb(returnVal);
+
+            });
+        }
+    };
+
+
+    context.quickpi.setLedBrightness = function (name, level, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (typeof level == "object")
+        {
+            level = level.valueOf();
+        }
+
+        var command = "setLedBrightness(\"" + name + "\"," + level + ")";
+
+        context.registerQuickPiEvent(name, level);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, cb);
+        }
+    };
+
+
+    context.quickpi.getLedBrightness = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        var command = "getLedBrightness(\"" + name + "\")";
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback, sensor.state);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, function(returnVal) {
+                returnVal = parseFloat(returnVal)
+                cb(returnVal);
+
+            });
+        }
+    };
+
+    context.quickpi.isLedOn = function (arg1, arg2) {
+        if(typeof arg2 == "undefined") {
+            // no arguments
+            var callback = arg1;
+            var sensor = findSensorByType("led");
+        } else {
+            var callback = arg2;
+            var sensor = findSensorByName(arg1, true);
+        }
+
+        var command = "getLedState(\"" + sensor.name + "\")";
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback, sensor.state);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, function(returnVal) {
+                returnVal = parseFloat(returnVal)
+                cb(returnVal);
+
+            });
+        }
+    };
+
+    context.quickpi.isLedOnWithName = context.quickpi.isLedOn;
+
+
+    context.quickpi.toggleLedState = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        var command = "toggleLedState(\"" + name + "\")";
+        var state = sensor.state;
+
+        context.registerQuickPiEvent(name, !state);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, function(returnVal) { return returnVal != "0"; });
+        }
+    };
+
+    context.quickpi.displayText = function (line1, arg2, arg3) {
+        if(typeof arg3 == "undefined") {
+            // Only one argument
+            var line2 = null;
+            var callback = arg2;
+        } else {
+            var line2 = arg2;
+            var callback = arg3;
+        }
+
+        var sensor = findSensorByType("screen");
+
+        var command = "displayText(\"" + line1 + "\", \"\")";
+
+        context.registerQuickPiEvent(sensor.name,
+            {
+                line1: line1,
+                line2: line2
+            }
+        );
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, function (retval) {
+                cb();
+            });
+        }
+    };
+
+    context.quickpi.displayText2Lines = context.quickpi.displayText;
+
+    context.quickpi.readTemperature = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var state = context.getSensorState(name);
+
+            context.runner.waitDelay(callback, state);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            findSensorDefinition(sensor).getLiveState(sensor, function(returnVal) {
+                sensor.state = returnVal;
+                drawSensor(sensor);
+                cb(returnVal);
+            });
+        }
+    };
+
+    context.quickpi.sleep = function (time, callback) {
+        context.increaseTimeBy(time);
+        if (!context.display || context.autoGrading) {
+            context.runner.noDelay(callback);
+        }
+        else {
+            context.runner.waitDelay(callback, null, time);
+        }
+    };
+
+
+    context.quickpi.setServoAngle = function (name, angle, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (angle > 180)
+            angle = 180;
+        else if (angle < 0)
+            angle = 0;
+
+        context.registerQuickPiEvent(name, angle);
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var command = "setServoAngle(\"" + name + "\"," + angle + ")";
+            cb = context.runner.waitCallback(callback);
+            context.quickPiConnection.sendCommand(command, cb);
+        }
+    };
+
+    context.quickpi.getServoAngle = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        var command = "getServoAngle(\"" + name + "\")";
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback, sensor.state);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand(command, function(returnVal) {
+                returnVal = parseFloat(returnVal);
+                cb(returnVal);
+
+            });
+        }
+    };
+
+
+    context.quickpi.setContinousServoDirection = function (name, direction, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (direction > 0)
+            angle = 0;
+        else if (direction < 0)
+            angle = 180;
+        else
+            angle = 90;
+
+        context.registerQuickPiEvent(name, angle);
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var command = "setServoAngle(\"" + name + "\"," + angle + ")";
+            cb = context.runner.waitCallback(callback);
+            context.quickPiConnection.sendCommand(command, cb);
+        }
+    };
+
+    context.quickpi.readRotaryAngle = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+
+            var state = context.getSensorState(name);
+            context.waitDelay(callback, state);
+        } else {
+
+            var cb = context.runner.waitCallback(callback);
+
+            findSensorDefinition(sensor).getLiveState(sensor, function(returnVal) {
+                sensor.state = returnVal;
+                drawSensor(sensor);
+                cb(returnVal);
+            });
+        }
+    };
+
+
+    context.quickpi.readDistance = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+        if (!context.display || context.autoGrading || context.offLineMode) {
+
+            var state = context.getSensorState(name);
+            context.waitDelay(callback, state);
+        } else {
+
+            var cb = context.runner.waitCallback(callback);
+
+            findSensorDefinition(sensor).getLiveState(sensor, function(returnVal) {
+                sensor.state = returnVal;
+                drawSensor(sensor);
+                cb(returnVal);
+            });
+        }
+    };
+
+
+
+    context.quickpi.readLightIntensity = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+
+            var state = context.getSensorState(name);
+            context.waitDelay(callback, state);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            findSensorDefinition(sensor).getLiveState(sensor, function(returnVal) {
+                sensor.state = returnVal;
+
+                drawSensor(sensor);
+                cb(returnVal);
+            });
+        }
+    };
+
+    context.quickpi.readHumidity = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+
+            var state = context.getSensorState(name);
+            context.waitDelay(callback, state);
+        } else {
+
+            var cb = context.runner.waitCallback(callback);
+
+            findSensorDefinition(sensor).getLiveState(sensor, function(returnVal) {
+                sensor.state = returnVal;
+                drawSensor(sensor);
+                cb(returnVal);
+            });
+        }
+    };
+
+    context.quickpi.currentTime = function (callback) {
+        var millis = new Date().getTime();
+
+        if (context.autoGrading) {
+            millis = context.currentTime;
+        }
+
+        context.runner.waitDelay(callback, millis);
+    };
+
+
+    var getTemperatureFromCloudURl = "https://cloud.quick-pi.org/cache/weather.php";
+
+    var getTemperatureFromCloudSupportedTowns = [];
+
+    // setup the supported towns
+    $.get(getTemperatureFromCloudURl + "?q=" + "supportedtowns", function(towns) {
+        getTemperatureFromCloudSupportedTowns = JSON.parse(towns);
+    });
+
+    // We create a cache so there is less calls to the api and we get the results of the temperature faster
+    var getTemperatureFromCloudCache = {};
+
+    context.quickpi.getTemperatureFromCloud = function(location, callback) {
+        var url = getTemperatureFromCloudURl;
+
+        if (!arrayContains(getTemperatureFromCloudSupportedTowns, location))
+            throw strings.messages.getTemperatureFromCloudWrongValue.format(location);
+
+        var cache = getTemperatureFromCloudCache;
+        if (cache[location] != undefined && ((Date.now() - cache[location].lastUpdate) / 1000) / 60 < 10) {
+            context.waitDelay(callback, cache[location].temperature);
+            return;
+        }
+
+        var cb = context.runner.waitCallback(callback);
+        $.get(url + "?q=" + location, function(data) {
+            // If the server return invalid it mean that the town given is not supported
+            if (data === "invalid") {
+                // This only happen when the user give an invalid town to the server, which should never happen because
+                // the validity of the user input is checked above.
+                cb(0);
+            } else {
+                cache[location] = {
+                    lastUpdate: Date.now(),
+                    temperature: data
+                };
+                cb(data);
+            }
+        });
+    };
+
+    context.initScreenDrawing = function(sensor) {
+        if  (!sensor.screenDrawing)                
+            sensor.screenDrawing = new screenDrawing(sensor.canvas);
+    }    
+
+
+    context.quickpi.drawPoint = function(x, y, callback) {
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        sensor.screenDrawing.drawPoint(x, y);
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData());        
+
+        
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "drawPoint(" + x + "," + y + ")";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+    context.quickpi.isPointSet = function(x, y, callback) {
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        var value = sensor.screenDrawing.isPointSet(x, y);
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData());        
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback, value);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "isPointSet(" + x + "," + y + ")";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+    context.quickpi.drawLine = function(x0, y0, x1, y1, callback) {
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        sensor.screenDrawing.drawLine(x0, y0, x1, y1);
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData());        
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "drawLine(" + x0 + "," + y0 + "," + x1 + "," + y1 + ")";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+
+    context.quickpi.drawRectangle = function(x0, y0, width, height, callback) {
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        sensor.screenDrawing.drawRectangle(x0, y0, width, height);
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData());        
+
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "drawRectangle(" + x0 + "," + y0 + "," + width + "," + height + ")";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+    context.quickpi.drawCircle = function(x0, y0, diameter, callback) {
+
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        sensor.screenDrawing.drawCircle(x0, y0, diameter, diameter);
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData());        
+
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "drawCircle(" + x0 + "," + y0 + "," + diameter + ")";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+
+    context.quickpi.clearScreen = function(callback) {
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        sensor.screenDrawing.clearScreen();
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData());        
+
+        
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "clearScreen()";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+
+    context.quickpi.updateScreen = function(callback) {
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "updateScreen()";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+
+    context.quickpi.autoUpdate = function(autoupdate, callback) {
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "autoUpdate(\"" + (autoupdate ? "True" : "False") + "\")";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+    context.quickpi.fill = function(color, callback) {
+
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        sensor.screenDrawing.fill(color);
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData());        
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "fill(\"" + color + "\")";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+
+    context.quickpi.noFill = function(callback) {
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        sensor.screenDrawing.noFill();
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData());        
+
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "NoFill()";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+
+    context.quickpi.stroke = function(color, callback) {
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        sensor.screenDrawing.stroke(color);
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData()); 
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+            var command = "stroke(\"" + color + "\")";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+
+    context.quickpi.noStroke = function(callback) {
+        var sensor = findSensorByType("screen");
+
+        context.initScreenDrawing(sensor);
+        sensor.screenDrawing.noStroke();
+        context.registerQuickPiEvent(sensor.name, sensor.screenDrawing.getStateData());        
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "noStroke()";
+            context.quickPiConnection.sendCommand(command, function () {
+                cb();
+            });
+        }
+    };
+
+
+    context.quickpi.readAcceleration = function(axis, callback) {
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var sensor = findSensorByType("accelerometer");
+
+            var index = 0;
+            if (axis == "x")
+                index = 0;
+            else if (axis == "y")
+                index = 1;
+            else if (axis == "z")
+                index = 2;
+
+            var state = context.getSensorState(sensor.name);
+
+            if (Array.isArray(state))
+                context.waitDelay(callback, state[index]);
+            else
+                context.waitDelay(callback, 0);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            var command = "readAcceleration(\"" + axis + "\")";
+            context.quickPiConnection.sendCommand(command, function (returnVal) {
+                cb(returnVal);
+            });
+        }
+    };
+
+    context.quickpi.computeRotation = function(rotationType, callback) {
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var sensor = findSensorByType("accelerometer");
+
+            var zsign = 1;
+            var result = 0;
+
+            if (sensor.state[2] < 0)
+                zsign = -1;
+
+            if (rotationType == "pitch")
+            {
+                result = 180 * Math.atan2 (sensor.state[0], zsign * Math.sqrt(sensor.state[1]*sensor.state[1] + sensor.state[2]*sensor.state[2]))/Math.PI;
+            }
+            else if (rotationType == "roll")
+            {
+                result = 180 * Math.atan2 (sensor.state[1], zsign * Math.sqrt(sensor.state[0]*sensor.state[0] + sensor.state[2]*sensor.state[2]))/Math.PI;
+            }
+
+            result = Math.round(result);
+
+            context.waitDelay(callback, result);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+            var command = "computeRotation(\"" + rotationType + "\")";
+
+            context.quickPiConnection.sendCommand(command, function (returnVal) {
+                cb(returnVal);
+            });
+        }
+    };
+
+
+    context.quickpi.readSoundLevel = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var state = context.getSensorState(name);
+
+            context.runner.noDelay(callback, state);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            findSensorDefinition(sensor).getLiveState(sensor, function(returnVal) {
+                sensor.state = returnVal;
+                drawSensor(sensor);
+                cb(returnVal);
+            });
+        }
+    };
+
+    context.quickpi.readMagneticForce = function (axis, callback) {
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var sensor = findSensorByType("magnetometer");
+
+            var index = 0;
+            if (axis == "x")
+                index = 0;
+            else if (axis == "y")
+                index = 1;
+            else if (axis == "z")
+                index = 2;
+
+            context.waitDelay(callback, sensor.state[index]);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+            var sensor = context.findSensor("magnetometer", "i2c");
+
+            findSensorDefinition(sensor).getLiveState(axis, function(returnVal) {
+                sensor.state = returnVal;
+                drawSensor(sensor);
+
+                if (axis == "x")
+                    returnVal = returnVal[0];
+                else if (axis == "y")
+                    returnVal = returnVal[1];
+                else if (axis == "z")
+                    returnVal = returnVal[2];
+
+                cb(returnVal);
+            });
+        }
+    };
+
+    context.quickpi.computeCompassHeading = function (callback) {
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var sensor = findSensorByType("magnetometer");
+
+            var heading = Math.atan2(sensor.state[0],sensor.state[1])*(180/Math.PI) + 180;
+
+            heading = Math.round(heading);
+
+            context.runner.noDelay(callback, heading);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+            var sensor = context.findSensor("magnetometer", "i2c");
+
+            context.quickPiConnection.sendCommand("readMagnetometerLSM303C()", function(returnVal) {
+                sensor.state = returnVal;
+                drawSensor(sensor);
+
+                returnVal = Math.atan2(sensor.state[0],sensor.state[1])*(180/Math.PI) + 180;
+
+                returnVal = Math.floor(returnVal);
+
+                cb(returnVal);
+            }, true);
+        }
+    };
+
+    context.quickpi.readInfraredState = function (name, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var state = context.getSensorState(name);
+
+            context.runner.noDelay(callback, state ? true : false);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            findSensorDefinition(sensor).getLiveState(sensor, function(returnVal) {
+                sensor.state = returnVal;
+                drawSensor(sensor);
+                cb(returnVal);
+            });
+        }
+    };
+
+    context.quickpi.setInfraredState = function (name, state, callback) {
+        var sensor = findSensorByName(name, true);
+
+        context.registerQuickPiEvent(name, state ? true : false);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            findSensorDefinition(sensor).setLiveState(sensor, state, cb);
+        }
+    };
+
+
+    //// Gyroscope
+    context.quickpi.readAngularVelocity = function (axis, callback) {
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var sensor = findSensorByType("gyroscope");
+
+            var index = 0;
+            if (axis == "x")
+                index = 0;
+            else if (axis == "y")
+                index = 1;
+            else if (axis == "z")
+                index = 2;
+
+            context.waitDelay(callback, sensor.state[index]);
+         } else {
+            var cb = context.runner.waitCallback(callback);
+            var sensor = context.findSensor("gyroscope", "i2c");
+
+            findSensorDefinition(sensor).getLiveState(axis, function(returnVal) {
+                sensor.state = returnVal;
+                drawSensor(sensor);
+
+                if (axis == "x")
+                    returnVal = returnVal[0];
+                else if (axis == "y")
+                    returnVal = returnVal[1];
+                else if (axis == "z")
+                    returnVal = returnVal[2];
+
+                cb(returnVal);
+            });
+        }
+    };
+
+    context.quickpi.setGyroZeroAngle = function (callback) {
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var sensor = findSensorByType("gyroscope");
+
+            sensor.rotationAngles = [0, 0, 0];
+            sensor.lastSpeedChange = new Date();
+
+            context.runner.noDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand("setGyroZeroAngle()", function(returnVal) {
+                cb();
+            }, true);
+        }
+    };
+
+    context.quickpi.computeRotationGyro = function (axis, callback) {
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var sensor = findSensorByType("gyroscope");
+
+
+            var ret = 0;
+
+            if (sensor.rotationAngles != undefined) {
+                for (var i = 0; i < 3; i++)
+                    sensor.rotationAngles[i] += sensor.state[i] * ((new Date() - sensor.lastSpeedChange) / 1000);
+
+                sensor.lastSpeedChange = new Date();
+
+                if (axis == "x")
+                    ret = sensor.rotationAngles[0];
+                else if (axis == "y")
+                    ret = sensor.rotationAngles[1];
+                else if (axis == "z")
+                    ret = sensor.rotationAngles[2];
+            }
+
+            context.runner.noDelay(callback, ret);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+            var sensor = context.findSensor("gyroscope", "i2c");
+
+            context.quickPiConnection.sendCommand("computeRotationGyro()", function(returnVal) {
+                //sensor.state = returnVal;
+                //drawSensor(sensor);
+
+                var returnVal = JSON.parse(returnVal);
+
+                if (axis == "x")
+                    returnVal = returnVal[0];
+                else if (axis == "y")
+                    returnVal = returnVal[1];
+                else if (axis == "z")
+                    returnVal = returnVal[2];
+
+                cb(returnVal);
+            }, true);
+        }
+    };
+
+
+    context.quickpi.connectToCloudStore = function (prefix, password, callback) {
+        var sensor = findSensorByType("cloudstore");
+
+        if (!context.display || context.autoGrading) {
+            sensor.quickStore = new quickPiStore(true);
+        } else {
+            sensor.quickStore = QuickStore(prefix, password);
+        }
+
+        context.runner.noDelay(callback, 0);
+    };
+
+    context.quickpi.writeToCloudStore = function (identifier, key, value, callback) {
+        var sensor = findSensorByType("cloudstore");
+
+        if (!sensor.quickStore || !sensor.quickStore.connected)
+        {
+            context.success = false;
+            throw("Cloud store not connected");
+        }
+
+        if (!context.display || context.autoGrading) {
+            sensor.quickStore.write(identifier, key, value);
+
+            context.registerQuickPiEvent(sensor.name, sensor.quickStore.getStateData());
+
+            context.runner.noDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            sensor.quickStore.write(identifier, key, value, function(data) {
+                if (!data || !data.success)
+                {
+                    if (data && data.message)
+                        context.failImmediately = "cloudstore: " + data.message;
+                    else
+                        context.failImmediately = "Error trying to communicate with cloud store";
+    
+                }
+                cb();
+            });
+        }
+    };
+
+    context.quickpi.readFromCloudStore = function (identifier, key, callback) {
+        var sensor = findSensorByType("cloudstore");
+
+        if (!sensor.quickStore)
+        {
+            if (!context.display || context.autoGrading) {
+                sensor.quickStore = new quickPiStore();
+            } else {
+                sensor.quickStore = QuickStore();
+            }
+        }
+
+        if (!context.display || context.autoGrading) {
+            var state = context.getSensorState(sensor.name);
+            var value = "";
+
+            if (state.hasOwnProperty(key)) {
+                value = state[key];
+            }
+            else {
+                context.success = false;
+                throw("Key not found");    
+            }
+
+            sensor.quickStore.write(identifier, key, value);
+            context.registerQuickPiEvent(sensor.name, sensor.quickStore.getStateData());
+            
+            context.runner.noDelay(callback, value);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+            sensor.quickStore.read(identifier, key, function(data) {
+                var value = "";
+                if (data && data.success)
+                {
+                    try {
+                        value = JSON.parse(data.value);
+                    } catch(err)
+                    {
+                        value = data.value;
+                    }
+                }
+                else
+                {
+                    if (data && data.message)
+                        context.failImmediately = "cloudstore: " + data.message;
+                    else
+                        context.failImmediately = "Error trying to communicate with cloud store";
+                }
+
+                cb(value);
+            });
+        }
+    };
+
+
+
+    
+    context.quickpi.readIRMessage = function (name, timeout, callback) {
+        var sensor = findSensorByName(name, true);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            var state = context.getSensorState(name);
+
+            var cb = context.runner.waitCallback(callback);
+
+            sensor.waitingForIrMessage = function(command)
+            {
+                clearTimeout(sensor.waitingForIrMessageTimeout);
+                sensor.waitingForIrMessage = null;
+
+                cb(command);
+            }
+
+            sensor.waitingForIrMessageTimeout = setTimeout(function () {
+                if (sensor.waitingForIrMessage) {
+                    sensor.waitingForIrMessage = null;
+                    cb("none");
+                }
+            }, 
+            timeout);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand("readIRMessage(\"irrec1\", " + timeout + ")", function(returnVal) {
+
+                if (typeof returnVal === 'string')
+                    returnVal = returnVal.replace(/['"]+/g, '')
+
+                cb(returnVal);
+            }, true);
+        }
+    };
+
+    context.quickpi.sendIRMessage = function (name, preset, callback) {
+        var sensor = findSensorByName(name, true);
+
+        //context.registerQuickPiEvent(name, state ? true : false);
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand("sendIRMessage(\"irtran1\", \"" + preset + "\")", function(returnVal) {
+                cb();
+            }, true);
+        }
+    };
+
+    context.quickpi.presetIRMessage = function (preset, data, callback) {
+        //var sensor = findSensorByName(name, true);
+
+        //context.registerQuickPiEvent(name, state ? true : false);
+        if (!context.remoteIRcodes)
+
+            context.remoteIRcodes = {};
+
+        context.remoteIRcodes[preset] = data;
+
+        if (!context.display || context.autoGrading || context.offLineMode) {
+            context.waitDelay(callback);
+        } else {
+            var cb = context.runner.waitCallback(callback);
+
+            context.quickPiConnection.sendCommand("presetIRMessage(\"" + preset + "\", \"" + JSON.stringify(JSON.parse(data)) + "\")", function(returnVal) {
+                cb();
+            }, true);
+        }
+    };
+    /***** Blocks definitions *****/
+    /* Here we define all blocks/functions of the library.
+       Structure is as follows:
+       {
+          group: [{
+             name: "someName",
+             // category: "categoryName",
+             // yieldsValue: optional true: Makes a block with return value rather than simple command
+             // params: optional array of parameter types. The value 'null' denotes /any/ type. For specific types, see the Blockly documentation ([1,2])
+             // handler: optional handler function. Otherwise the function context.group.blockName will be used
+             // blocklyJson: optional Blockly JSON objects
+             // blocklyInit: optional function for Blockly.Blocks[name].init
+             //   if not defined, it will be defined to call 'this.jsonInit(blocklyJson);
+             // blocklyXml: optional Blockly xml string
+             // codeGenerators: optional object:
+             //   { Python: function that generates Python code
+             //     JavaScript: function that generates JS code
+             //   }
+          }]
+       }
+       [1] https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks
+       [2] https://developers.google.com/blockly/guides/create-custom-blocks/type-checks
+    */
+
+
+    function getSensorNames(sensorType)
+    {
+        return function () {
+            var ports = [];
+            for (var i = 0; i < infos.quickPiSensors.length; i++) {
+                var sensor = infos.quickPiSensors[i];
+
+                if (sensor.type == sensorType) {
+                    ports.push([sensor.name, sensor.name]);
+                }
+            }
+
+            if (sensorType == "button") {
+                for (var i = 0; i < infos.quickPiSensors.length; i++) {
+                    var sensor = infos.quickPiSensors[i];
+
+                    if (sensor.type == "stick") {
+                        var stickDefinition = findSensorDefinition(sensor);
+
+                        for (var iStick = 0; iStick < stickDefinition.gpiosNames.length; iStick++) {
+                            var name = sensor.name + "." + stickDefinition.gpiosNames[iStick];
+
+                            ports.push([name, name]);
+                        }
+                    }
+                }
+            }
+
+            if (ports.length == 0) {
+                ports.push(["none", "none"]);
+            }
+
+            return ports;
+        }
+    }
+
+
+    function findSensorByName(name, error=false) {
+
+        if (isNaN(name.substring(0, 1)) && !isNaN(name.substring(1))) {
+            for (var i = 0; i < infos.quickPiSensors.length; i++) {
+                var sensor = infos.quickPiSensors[i];
+
+                if (sensor.port.toUpperCase() == name.toUpperCase()) {
+                    return sensor;
+                }
+            }
+        } else {
+            var firstname = name.split(".")[0];
+
+
+            for (var i = 0; i < infos.quickPiSensors.length; i++) {
+                var sensor = infos.quickPiSensors[i];
+
+                if (sensor.name.toUpperCase() == firstname.toUpperCase()) {
+                    return sensor;
+                }
+            }
+        }
+
+        if (error) {
+            context.success = false;
+            throw (strings.messages.sensorNotFound.format(name));
+        }
+
+        return null;
+    }
+
+    function findSensorByType(type) {
+        var firstname = name.split(".")[0];
+
+
+        for (var i = 0; i < infos.quickPiSensors.length; i++) {
+            var sensor = infos.quickPiSensors[i];
+            if (sensor.type == type) {
+                return sensor;
+            }
+        }
+
+        return null;
+    }
+
+    function findSensorByPort(port) {
+        for (var i = 0; i < infos.quickPiSensors.length; i++) {
+            var sensor = infos.quickPiSensors[i];
+            if (sensor.port == port) {
+                return sensor;
+            }
+        }
+
+        return null;
+    }
+
+    function getSensorSuggestedName(type, suggested) {
+        if (suggested) {
+            if (!findSensorByName(suggested))
+                return suggested;
+        }
+
+        var i = 0;
+        var newName;
+
+        do {
+            i++;
+            newName = type + i.toString();
+        } while (findSensorByName(newName));
+
+        return newName;
+    }
+
+
+    context.customBlocks = {
+        // Define our blocks for our namespace "template"
+        quickpi: {
+            // Categories are reflected in the Blockly menu
+            sensors: [
+                { name: "currentTime", yieldsValue: true },
+
+                {
+                    name: "waitForButton", params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("button")
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "isButtonPressed", yieldsValue: true
+                },
+                {
+                    name: "isButtonPressedWithName", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("button")
+                            },
+                        ]
+                    }
+                },
+                {
+                    name: "buttonWasPressed", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("button")
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "readTemperature", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("temperature")
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "readRotaryAngle", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("potentiometer")
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "readDistance", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("range")
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "readLightIntensity", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("light")
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "readHumidity", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("humidity")
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "readAcceleration", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": [["x", "x"], ["y", "y"], ["z", "z"] ]
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "computeRotation", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": [["pitch", "pitch"], ["roll", "roll"]]
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "readSoundLevel", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("sound")
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "readMagneticForce", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": [["x", "x"], ["y", "y"], ["z", "z"] ]
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "computeCompassHeading", yieldsValue: true
+                },
+                {
+                    name: "readInfraredState", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("irrecv")
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "readIRMessage", yieldsValue: true, params: ["String", "Number"], blocklyJson: {
+                        "args0": [
+                            { "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("irrecv") },
+                            { "type": "input_value", "name": "PARAM_1"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "10000" +
+                        ""
+                },
+                {
+                    name: "readAngularVelocity", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": [["x", "x"], ["y", "y"], ["z", "z"] ]
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "setGyroZeroAngle"
+                },
+                {
+                    name: "computeRotationGyro", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": [["x", "x"], ["y", "y"], ["z", "z"] ]
+                            }
+                        ]
+                    }
+                },
+
+            ],
+            actuator: [
+                { name: "turnLedOn" },
+                { name: "turnLedOff" },
+                { name: "turnBuzzerOn" },
+                { name: "turnBuzzerOff" },
+                {
+                    name: "setLedState", params: ["String", "Number"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("led")
+                            },
+                            { "type": "field_dropdown", "name": "PARAM_1", "options": [[strings.messages.on.toUpperCase(), "1"], [strings.messages.off.toUpperCase(), "0"]] },
+                        ]
+                    }
+                },
+                {
+                    name: "setBuzzerState", params: ["String", "Number"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("buzzer")
+                            },
+                            { "type": "field_dropdown", "name": "PARAM_1", "options": [[strings.messages.on.toUpperCase(), "1"], [strings.messages.off.toUpperCase(), "0"]] },
+                        ]
+                    }
+                },
+                {
+                    name: "setBuzzerNote", params: ["String", "Number"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("buzzer")
+                            },
+                            { "type": "input_value", "name": "PARAM_1"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "200" +
+                        ""
+                },
+                {
+                    name: "getBuzzerNote", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("buzzer")
+                            },
+                        ]
+                    }
+                },
+                {
+                    name: "setLedBrightness", params: ["String", "Number"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("led")
+                            },
+                            { "type": "input_value", "name": "PARAM_1"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" +
+                        ""
+                },
+                {
+                    name: "getLedBrightness", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("led")
+                            },
+                        ]
+                    }
+                },
+                {
+                    name: "isLedOn", yieldsValue: true
+                },
+                {
+                    name: "isLedOnWithName", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("led")
+                            },
+                        ]
+                    }
+                },
+                {
+                    name: "isBuzzerOn", yieldsValue: true
+                },
+                {
+                    name: "isBuzzerOnWithName", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("buzzer")
+                            },
+                        ]
+                    }
+                },
+                {
+                    name: "toggleLedState", params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("led")
+                            },
+                        ]
+                    }
+                },
+                {
+                    name: "setServoAngle", params: ["String", "Number"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("servo")
+                            },
+                            { "type": "input_value", "name": "PARAM_1" },
+
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" +
+                        ""
+                },
+                {
+                    name: "getServoAngle", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("servo")
+                            },
+                        ]
+                    }
+                },
+                {
+                    name: "setContinousServoDirection", params: ["String", "Number"], blocklyJson: {
+                        "args0": [
+                            {
+                                "type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("servo")
+                            },
+                            { 
+                                "type": "field_dropdown", "name": "PARAM_1", "options": [["forward", "1"], ["backwards", "-1"], ["stop", "0"]] 
+                            },
+
+                        ]
+                    },
+                },
+                {
+                    name: "setInfraredState", params: ["String", "Number"], blocklyJson: {
+                        "args0": [
+                            {"type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("irtrans")},
+                            { "type": "field_dropdown", "name": "PARAM_1", "options": [[strings.messages.on.toUpperCase(), "1"], [strings.messages.off.toUpperCase(), "0"]] },
+                        ]
+                    }
+                },
+                {
+                    name: "sendIRMessage", params: ["String", "String"], blocklyJson: {
+                        "args0": [
+                            {"type": "field_dropdown", "name": "PARAM_0", "options": getSensorNames("irtrans")},
+                            { "type": "input_value", "name": "PARAM_1", "text": "" },
+                        ]
+                    },
+                    blocklyXml: "" +
+                        " " +
+                        ""
+                },
+                {
+                    name: "presetIRMessage", params: ["String", "String"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0", "text": "" },
+                            { "type": "input_value", "name": "PARAM_1", "text": "" },
+                        ]
+                    },
+                    blocklyXml: "" +
+                        " " +
+                        " " +
+                        ""
+                },
+                {
+                    name: "sleep", params: ["Number"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0", "value": 0 },
+                        ]
+                    }
+                    ,
+                    blocklyXml: "" +
+                        "1000" +
+                        ""
+                },
+            ],
+            display: [
+                {
+                    name: "displayText", params: ["String", "String"], variants: [[null], [null, null]], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0", "text": "" },
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" + strings.messages.hello + " " +
+                        ""
+
+                },
+                {
+                    name: "displayText2Lines", params: ["String", "String"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0", "text": "" },
+                            { "type": "input_value", "name": "PARAM_1", "text": "" },
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" + strings.messages.hello + " " +
+                        " " +
+                        ""
+
+                },
+                {
+                    name: "drawPoint", params: ["Number", "Number"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0"},
+                            { "type": "input_value", "name": "PARAM_1"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" +
+                        "" +
+                        ""
+                },
+                {
+                    name: "isPointSet", yieldsValue: true, params: ["Number", "Number"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0"},
+                            { "type": "input_value", "name": "PARAM_1"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" +
+                        "" +
+                        ""
+                },
+                {
+                    name: "drawLine", params: ["Number", "Number", "Number", "Number"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0"},
+                            { "type": "input_value", "name": "PARAM_1"},
+                            { "type": "input_value", "name": "PARAM_2"},
+                            { "type": "input_value", "name": "PARAM_3"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" +
+                        "" +
+                        "" +
+                        "" +
+                        ""
+                },
+                {
+                    name: "drawRectangle", params: ["Number", "Number", "Number", "Number"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0"},
+                            { "type": "input_value", "name": "PARAM_1"},
+                            { "type": "input_value", "name": "PARAM_2"},
+                            { "type": "input_value", "name": "PARAM_3"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" +
+                        "" +
+                        "" +
+                        "" +
+                        ""
+                },
+                {
+                    name: "drawCircle", params: ["Number", "Number", "Number"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0"},
+                            { "type": "input_value", "name": "PARAM_1"},
+                            { "type": "input_value", "name": "PARAM_2"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" +
+                        "" +
+                        "" +
+                        ""
+                },
+
+                {
+                    name: "clearScreen"
+                },
+                {
+                    name: "updateScreen"
+                },
+                {
+                    name: "autoUpdate", params: ["Boolean"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0"},
+                        ],
+                    },
+                    blocklyXml: "" +
+                    "" +
+                    ""
+
+                },
+                {
+                    name: "fill", params: ["Number"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" +
+                        ""
+                },
+                {
+                    name: "noFill"
+                },
+                {
+                    name: "stroke", params: ["Number"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        "" +
+                        ""
+                },
+                {
+                    name: "noStroke"
+                },
+            ],
+            internet: [
+                {
+                    name: "getTemperatureFromCloud", yieldsValue: true, params: ["String"], blocklyJson: {
+                        "args0": [
+                            { "type": "field_input", "name": "PARAM_0", text: "Paris"},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        " " +
+                        ""
+                },
+                {
+                    name: "connectToCloudStore", params: ["String", "String"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0", text: ""},
+                            { "type": "input_value", "name": "PARAM_1", text: ""},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        " " +
+                        " " +
+                        ""
+                },
+                {
+                    name: "writeToCloudStore", params: ["String", "String", "String"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0", text: ""},
+                            { "type": "input_value", "name": "PARAM_1", text: ""},
+                            { "type": "input_value", "name": "PARAM_2", text: ""},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        " " +
+                        " " +
+                        " " +
+                        ""
+                },
+                {
+                    name: "readFromCloudStore", yieldsValue: true, params: ["String", "String"], blocklyJson: {
+                        "args0": [
+                            { "type": "input_value", "name": "PARAM_0", text: ""},
+                            { "type": "input_value", "name": "PARAM_1", text: ""},
+                        ]
+                    },
+                    blocklyXml: "" +
+                        " " +
+                        " " +
+                        ""
+                },
+
+            ]
+        }
+        // We can add multiple namespaces by adding other keys to customBlocks.
+    };
+
+    // Color indexes of block categories (as a hue in the range 0–420)
+    context.provideBlocklyColours = function () {
+        return {
+            categories: {
+                actuator: 0,
+                sensors: 100,
+                internet: 200,
+                display: 300,
+            }
+        };
+    };
+
+    // Constants available in Python
+    context.customConstants = {
+        quickpi: [
+        ]
+    };
+
+    // Don't forget to return our newly created context!
+    return context;
+}
+
+// Register the library; change "template" by the name of your library in lowercase
+if (window.quickAlgoLibraries) {
+    quickAlgoLibraries.register('quickpi', getContext);
+} else {
+    if (!window.quickAlgoLibrariesList) { window.quickAlgoLibrariesList = []; }
+    window.quickAlgoLibrariesList.push(['quickpi', getContext]);
+}
+
+var sensorWithSlider = null;
+var removeRect = null;
+var sensorWithRemoveRect = null;
+
+window.addEventListener('click', function (e) {
+    var keep = false;
+    var keepremove = false;
+    e = e || window.event;
+    var target = e.target || e.srcElement;
+
+    if (sensorWithRemoveRect && sensorWithRemoveRect.focusrect && target == sensorWithRemoveRect.focusrect.node)
+        keepremove = true;
+
+    if (removeRect && !keepremove) {
+        removeRect.remove();
+        removeRect = null;
+    }
+
+    if (sensorWithSlider && sensorWithSlider.focusrect && target == sensorWithSlider.focusrect.node)
+        keep = true;
+
+    if (sensorWithSlider && sensorWithSlider.sliders) {
+        for (var i = 0; i < sensorWithSlider.sliders.length; i++) {
+            sensorWithSlider.sliders[i].slider.forEach(function (element) {
+                if (target == element.node ||
+                    target.parentNode == element.node) {
+                    keep = true;
+                    return false;
+                }
+            });
+        }
+    }
+
+    if (!keep) {
+        hideSlider(sensorWithSlider);
+    }
+
+}, false);//<-- we'll get to the false in a minute
+
+
+function hideSlider(sensor) {
+    if (!sensor)
+        return;
+
+    if (sensor.sliders) {
+        for (var i = 0; i < sensor.sliders.length; i++) {
+            sensor.sliders[i].slider.remove();
+        }
+        sensor.sliders = [];
+    }
+
+
+    if (sensor.focusrect && sensor.focusrect.paper && sensor.focusrect.paper.canvas)
+        sensor.focusrect.toFront();
+};
diff --git a/pemFioi/quickpi/blocklyQuickPi_screen.js b/pemFioi/quickpi/blocklyQuickPi_screen.js
new file mode 100644
index 000000000..6abb6a79e
--- /dev/null
+++ b/pemFioi/quickpi/blocklyQuickPi_screen.js
@@ -0,0 +1,323 @@
+if (!window.OffscreenCanvas) {
+    window.OffscreenCanvas = class OffscreenCanvas {
+      constructor(width, height) {
+        this.canvas = document.createElement("canvas");
+        this.canvas.width = width;
+        this.canvas.height = height;
+  
+        this.canvas.convertToBlob = () => {
+          return new Promise(resolve => {
+            this.canvas.toBlob(resolve);
+          });
+        };
+  
+        return this.canvas;
+      }
+    };
+  }
+
+class screenImageData {
+    constructor() {
+        this.isDrawingData = true;
+        this.imagedata = [];
+    }
+
+    addData(scale, data)
+    {
+        this.imagedata.push({
+            scale: scale,
+            data: data
+        });
+    }
+
+    getData(scale)
+    {
+        for (var i = 0; i < this.imagedata.length; i++)
+        {
+            if (this.imagedata[i].scale == scale)
+                return this.imagedata[i].data;
+        }
+
+        return null;
+    }
+
+
+}
+
+class screenDrawing {
+        constructor(onScreenCanvas) {
+            this.width = 128;
+            this.height = 32;
+
+            this.scales = [0.5, 1, 2];
+            this.canvas = [null, null, null];
+
+            this.resetCanvas();
+            
+            this.noFillStatus = false;
+            this.noStrokeStatus = false;
+        }
+
+        resetCanvas() {
+            for (var i = 0; i < this.scales.length; i++) {
+                var scale = this.scales[i];
+                this.canvas[i] = new OffscreenCanvas(this.width * scale, this.height * scale);
+
+                var ctx = this.canvas[i].getContext('2d');
+
+                ctx.imageSmoothingEnabled = false
+                
+                ctx.fillStyle = "white";
+                ctx.fillRect(0, 0, this.canvas[i].width, this.canvas[i].height);    
+
+                ctx.fillStyle = "black";
+                ctx.strokeStyle = "black";
+                ctx.lineWidth = scale;
+            }
+        }
+
+        getStateData() {
+            var imageData = new screenImageData();
+
+            for (var i = 0; i < this.scales.length; i++) {
+                var scale = this.scales[i];
+
+                var ctx = this.canvas[i].getContext('2d');
+                var imagedata = ctx.getImageData(0, 0, this.canvas[i].width, this.canvas[i].height);
+
+                imageData.addData(scale, imagedata);
+            }
+
+            return imageData;
+        }
+        
+        fill(color) {
+            this.noFillStatus = false;
+
+            for (var i = 0; i < this.scales.length; i++) {
+                var canvas = this.canvas[i];
+                var ctx = canvas.getContext('2d');
+
+                if (color)
+                    ctx.fillStyle = "black";
+                else
+                    ctx.fillStyle = "white";
+            }
+        }
+
+        noFill(color) {
+            this.noFillStatus = true;
+        }
+
+        stroke(color) {
+            this.noStrokeStatus = false;
+
+            for (var i = 0; i < this.scales.length; i++) {
+                var canvas = this.canvas[i];
+                var ctx = canvas.getContext('2d');
+
+                if (color)
+                    ctx.strokeStyle = "black";
+                else
+                    ctx.strokeStyle = "white";
+            }
+        }
+
+        noStroke(color) {
+            this.noStrokeStatus = true;
+        }
+
+
+        _drawPoint(canvas, scale, x, y) {
+            var ctx = canvas.getContext('2d');
+
+            ctx.fillRect(
+                scale * x, scale * y, scale * 1, scale * 1);
+        }
+
+        drawPoint(x, y) {
+            for (var i = 0; i < this.scales.length; i++) {
+                var scale = this.scales[i];
+                this._drawPoint(this.canvas[i], scale, x, y);
+            }
+        }
+
+        isPointSet(x, y) {
+            for (var i = 0; i < this.scales.length; i++) {
+                var scale = this.scales[i];
+
+                if (scale == 1) {
+
+                    var ctx = this.canvas[i].getContext('2d');
+                    var imagedata = ctx.getImageData(0, 0, this.canvas[i].width, this.canvas[i].height);
+
+                    var basepos = (x + (y * this.canvas[i].width)) * 4;
+
+                    var r = imagedata.data[basepos];
+                    var g = imagedata.data[basepos + 1];
+                    var b = imagedata.data[basepos + 2];
+                    var a = imagedata.data[basepos + 3];
+
+                    if (r != 255 && g != 255 && b != 255)
+                        return true;
+
+                    break;
+                }   
+            }
+
+            return false;
+        }
+        
+
+        _drawLine(canvas, scale, x0, y0, x1, y1) {
+            var ctx = canvas.getContext('2d');
+
+            ctx.beginPath();
+            ctx.moveTo(scale * x0, scale * y0);
+            ctx.lineTo(scale * x1, scale * y1);
+            ctx.closePath();
+            ctx.stroke();
+        }
+
+        drawLine(x0, y0, x1, y1) {
+            for (var i = 0; i < this.scales.length; i++) {
+                var scale = this.scales[i];
+                this._drawLine(this.canvas[i], scale, x0, y0, x1, y1);
+            }
+        }
+
+        _drawRectangle(canvas, scale, x0, y0, width, height) {
+            var ctx = canvas.getContext('2d');
+
+            if (!this.noFillStatus) {
+                ctx.fillRect(scale * x0, scale * y0, scale * width, scale * height);
+            }
+
+            if (!this.noStrokeStatus) {
+                ctx.strokeRect(scale * x0, scale * y0, scale * width, scale * height);
+            }
+
+        }
+
+        drawRectangle(x0, y0, width, height) {
+            for (var i = 0; i < this.scales.length; i++) {
+                var scale = this.scales[i];
+                this._drawRectangle(this.canvas[i], scale, x0, y0, width, height);
+            }
+
+        }
+
+        _drawCircle(canvas, scale, x0, y0, diameter) {
+            var ctx = canvas.getContext('2d');
+
+            ctx.beginPath();
+            ctx.arc(scale * x0, scale * y0, scale * diameter / 2, 0, Math.PI * 2);
+            ctx.closePath();
+
+            if (!this.noFillStatus) {
+                ctx.fill();
+            }
+
+            if (!this.noStrokeStatus) {
+                ctx.stroke();
+            }
+        }
+
+        drawCircle(x0, y0, diameter) {
+            for (var i = 0; i < this.scales.length; i++) {
+                var scale = this.scales[i];
+                this._drawCircle(this.canvas[i], scale, x0, y0, diameter);
+            }
+        }
+
+        _clearScreen(canvas, scale) {
+            var ctx = canvas.getContext('2d');
+            ctx.fillStyle = "white";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);    
+
+            ctx.fillStyle = "black";
+            ctx.strokeStyle = "black";
+        }
+
+        clearScreen() {
+            for (var i = 0; i < this.scales.length; i++) {
+                var scale = this.scales[i];
+                this._clearScreen(this.canvas[i], scale);
+            }
+
+        }
+
+        copyToCanvas(canvas, scale)
+        {
+            for (var i = 0; i < this.scales.length; i++) {
+                var currentScale = this.scales[i];
+
+                if (currentScale == scale) {
+                    var ctx = canvas.getContext('2d');
+                    ctx.drawImage(this.canvas[i],
+                                0,
+                                0,
+                                this.canvas[i].width,
+                                this.canvas[i].height,
+                                0,
+                                0,
+                                canvas.width,
+                                canvas.height);
+                    }
+                }
+        }
+
+        static renderToCanvas(state, canvas, scale) {
+            var ctx = canvas.getContext('2d');
+
+            ctx.putImageData(state.getData(scale), 0, 0);
+        }
+
+    static renderDifferences(dataExpected, dataWrong, canvas, scale) {
+        var ctx = canvas.getContext('2d');
+        var expectedData = dataExpected.getData(scale);
+        var actualData = dataWrong.getData(scale);
+
+        var newData = ctx.createImageData(canvas.width, canvas.height);
+
+        for (var i = 0; i < newData.data.length; i += 4) {
+            var actualSet = false;
+            var expectedSet = false;
+            if (expectedData.data[i + 0] != 255 &&
+                expectedData.data[i + 1] != 255 &&
+                expectedData.data[i + 2] != 255) {
+                expectedSet = true;
+            }
+
+            if (actualData.data[i + 0] != 255 &&
+                actualData.data[i + 1] != 255 &&
+                actualData.data[i + 2] != 255) {
+                actualSet = true;
+            }
+
+            if (expectedSet && actualSet) {
+                newData.data[i + 0] = 0;
+                newData.data[i + 1] = 0;
+                newData.data[i + 2] = 0;
+            }
+            else if (expectedSet) {
+                newData.data[i + 0] = 100;
+                newData.data[i + 1] = 100;
+                newData.data[i + 2] = 100;
+            }
+            else if (actualSet) {
+                newData.data[i + 0] = 255;
+                newData.data[i + 1] = 0;
+                newData.data[i + 2] = 0;
+            } else {
+                newData.data[i + 0] = 255;
+                newData.data[i + 1] = 255;
+                newData.data[i + 2] = 255;
+            }
+
+
+            newData.data[i + 3] = 255;
+        }
+        ctx.putImageData(newData, 0, 0);
+    }
+}
\ No newline at end of file
diff --git a/pemFioi/quickpi/blocklyQuickPi_store.js b/pemFioi/quickpi/blocklyQuickPi_store.js
new file mode 100644
index 000000000..b58523a16
--- /dev/null
+++ b/pemFioi/quickpi/blocklyQuickPi_store.js
@@ -0,0 +1,65 @@
+class quickPiStore {
+        constructor(connected) {
+            this.Store = {};
+            this.connected = true;
+            this.rwpassword = "dummy";
+        }
+
+        write(prefix, key, value)
+        {
+            this.Store[key] = value;
+        }
+    
+        read(prefix, key, value)
+        {
+            return this.Store[key];
+        }
+
+        getStateData() {
+            // round trip this trought json so we actually copy everything
+            // without keeping any references to objects
+            return JSON.parse(JSON.stringify(this.Store));
+        }
+
+        static renderDifferences(expectedState, state)
+        {
+            var strings = window.task.displayedSubTask.context.setLocalLanguageStrings(localLanguageStrings);
+            var mainDiv = document.createElement("div");
+
+            for (var p in expectedState)
+            {
+                if (expectedState.hasOwnProperty(p) && !state.hasOwnProperty(p)) {
+
+                    var div = document.createElement("div");
+                    $(div).text(strings.messages.cloudKeyNotExists.format(p));
+                    $(mainDiv).append(div);
+                }
+
+                if (expectedState[p] != state[p]) {
+                    var div = document.createElement("div");
+
+                    var wrongValue = "Clé {0} : la valeur {2} n'est pas celle attendue, {1}.";
+                    var message = strings.messages.cloudWrongValue.format(p, expectedState[p], state[p]);
+
+                    $(div).text(message);
+                    $(mainDiv).append(div);
+                }
+            }
+
+            for (var p in state)
+            {
+                if (state.hasOwnProperty(p) && !expectedState.hasOwnProperty(p)) {
+                    var div = document.createElement("div");
+                    $(div).text(strings.messages.cloudUnexpectedKey.format(p));
+                    $(mainDiv).append(div);
+                }
+            }
+
+            return mainDiv;
+        }
+
+        static compareState(state1, state2)
+        {
+            return deepEqual(state1, state2);
+        }
+}
\ No newline at end of file
diff --git a/pemFioi/quickpi/quickpi_board.js b/pemFioi/quickpi/quickpi_board.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/pemFioi/quiz/grader.js b/pemFioi/quiz/grader.js
new file mode 100644
index 000000000..3a7a637b1
--- /dev/null
+++ b/pemFioi/quiz/grader.js
@@ -0,0 +1,123 @@
+(function() {
+
+    function isArrayAnswerEmpty(answers) {
+        for(var i=0; i 0;
+                    if ("message" in fres && fres.message) {
+                        res.messages[i] = fres.message;
+                    }
+                    nb_valid += score;
+                    nb_mistakes += score > 0 ? 0 : 1;
+                } else {
+                    isValid = !!fres;
+                    nb_valid += isValid ? 1 : 0;
+                    nb_mistakes += isValid ? 0 : 1;
+                }
+                res.mistakes.push(isValid ? null : answer[i]);
+            } else if (Array.isArray(grader)) {
+                if(isArrayAnswerEmpty(answer[i])) { continue; }
+                var test = testMultiple(grader, answer[i]);
+                isValid = test === true;
+                res.mistakes.push(isValid ? [] : test);
+                nb_valid += isValid ? 1 : 0;
+                nb_mistakes += isValid ? 0 : 1;
+            } else if (typeof grader == 'object') {
+                if(Array.isArray(grader.value)) {
+                    if(isArrayAnswerEmpty(answer[i])) { continue; }
+                    if(grader.strict) {
+                        var test = testStrict(grader.value, answer[i]);
+                    } else {
+                        var test = testMultiple(grader.value, answer[i]);
+                    }
+                    isValid = test === true;
+                    var mistakes = isValid ? [] : test;
+                    res.mistakes.push(mistakes);
+                    if(grader.messages && mistakes.length) {
+                        res.messages[i] = [];
+                        for(var j=0; j\
+            %%LABEL%%\
+            %%CODE%%\
+        
';
+
+    var multiple_tpl =
+        '
\
+            %%LABEL%%\
+            \
+        
';
+
+    function redesign(question) {
+        var answers = question.find('answer');
+        answers.each(function(i) {
+            var answer = $(this);
+            if (question.attr("type") === "single") {
+                var html = single_tpl;
+                html = html
+                    .replace('%%LABEL%%', answer.html())
+                    .replace('%%CODE%%', Quiz.common.questionLabel(i));
+            }
+            else if (question.attr("type") === "multiple") {
+                var html = multiple_tpl;
+                html = html
+                    .replace('%%LABEL%%', answer.html());
+            }
+            answer.html(html)
+        });
+        answers.wrapAll('
');
+    }
+
+
+
+
+    // core
+
+    function singleChoice(parent, question_idx, params) {
+
+        var answers = parent.find('answer');
+        answers.each(function(i) {
+            $(this).attr('answer-index', i);
+        })
+        answers.click(function() {
+            parent.find('answer').removeClass('selected mistake');
+            $(this).addClass('selected');
+        });
+        var answers_order = Quiz.common.shuffleElements(answers, params.shuffle_answers);
+
+
+        redesign(parent);
+
+        return {
+            getAnswer: function() {
+                return parseInt(parent.find('answer.selected').attr('answer-index'), 10);
+            },
+
+            setAnswer: function(value) {
+                parent.find('answer').removeClass('selected');
+                if(!isNaN(value)) {
+                    parent.find('answer[answer-index=' + value + ']').addClass('selected');
+                }
+            },
+
+            isAnswered: function() {
+                return !isNaN(this.getAnswer());
+            },
+
+            showResult: function(mistakes, message) {
+                parent.find('answer').removeClass('correct mistake');
+                parent.find('answer.selected').addClass(mistakes === null ? 'correct' : 'mistake');
+                Quiz.common.toggleWrongAnswerMessage(parent, message);
+            },
+
+            reset: function() {
+                parent.find('answer').removeClass('selected correct mistake');
+            },
+
+            answers_order: answers_order
+        }
+    }
+
+    Quiz.questionTypes.register('single', singleChoice);
+
+
+
+    function multipleChoice(parent, question_idx, params) {
+
+        var answers = parent.find('answer');
+        answers.each(function(i) {
+            $(this).attr('answer-index', i);
+        })
+        answers.click(function() {
+            answers.removeClass('mistake');
+            $(this).toggleClass('selected');
+        });
+        var answers_order = Quiz.common.shuffleElements(answers, params.shuffle_answers);
+
+
+        redesign(parent);
+
+        return {
+            getAnswer: function() {
+                var res = [];
+                parent.find('answer.selected').each(function(i) {
+                    res.push(parseInt($(this).attr('answer-index'), 10));
+                });
+                return res;
+            },
+
+            setAnswer: function(values) {
+                parent.find('answer').each(function(i) {
+                    var el = $(this);
+                    var idx = parseInt(el.attr('answer-index'), 10);
+                    el.toggleClass('selected', values.indexOf(idx) !== -1);
+                });
+            },
+
+            isAnswered: function() {
+                return this.getAnswer().length > 0;
+            },
+
+            showResult: function(mistakes, message) {
+                parent.find('answer').removeClass('correct mistake');
+                if(Array.isArray(mistakes)) {
+                    parent.find('answer.selected').each(function() {
+                        var el = $(this)
+                        var idx = parseInt(el.attr('answer-index'), 10);
+                        el.addClass(mistakes.indexOf(idx) === -1 ? 'correct' : 'mistake')
+                    })
+                }
+                if(Array.isArray(message)) {
+                    answers.each(function(i) {
+                        Quiz.common.toggleWrongAnswerMessage($(this), message[i]);
+                    });
+                } else {
+                    Quiz.common.toggleWrongAnswerMessage(parent, message);
+                }
+            },
+
+            reset: function() {
+                parent.find('answer').removeClass('selected correct mistake');
+            },
+
+            answers_order: answers_order
+        }
+    }
+
+    Quiz.questionTypes.register('multiple', multipleChoice);
+})();
\ No newline at end of file
diff --git a/pemFioi/quiz/questions/fill_gaps.js b/pemFioi/quiz/questions/fill_gaps.js
new file mode 100644
index 000000000..d0661dc66
--- /dev/null
+++ b/pemFioi/quiz/questions/fill_gaps.js
@@ -0,0 +1,140 @@
+(function() {
+
+    function fillGaps(parent, question_idx) {
+
+        var uid = Math.random().toString(36).substr(2, 12);
+
+        // take words from answers
+        var words = [];
+        var answers = parent.find('answer');
+        answers.each(function() {
+            words.push($(this).html().trim());
+        });
+        answers.remove();
+
+
+
+        var toolbar = '
';
+        for(var i=0, word; word = words[i]; i++) {
+            toolbar += '' + word + '';
+        }
+        toolbar += '
';
+        toolbar = $(toolbar);
+        toolbar.insertAfter(parent.find('statement'));
+
+        // drag & drop
+        var words_elements = {};
+        var words_order = {};
+        toolbar.find('span').each(function(i) {
+            var el = $(this), text = el.text();
+            words_elements[text] = el;
+            words_order[text] = i;
+            el.draggable({
+                scope: uid,
+                revert: 'invalid',
+                revertDuration: 200,
+                zIndex: 100
+            });
+        });
+
+        toolbar.droppable({
+            scope: uid,
+            drop: function(event, ui) {
+                ui.draggable.detach().css({top: 0,left: 0}).appendTo(toolbar);
+            }
+        });
+
+        var text = parent.find('.fill-gaps-text');
+        text.find('.placeholder').each(function() {
+            var placeholder = $(this)
+            placeholder.html('');
+            placeholder.droppable({
+                scope: uid,
+                hoverClass: 'placeholder-hover',
+                drop: function(event, ui) {
+                    toolbar.append(placeholder.find('span').first());
+                    ui.draggable.detach().css({top: 0,left: 0}).appendTo(placeholder);
+                }
+            });
+        });
+
+
+        function resetWords() {
+            var placeholders = text.find('.placeholder');
+            placeholders.removeClass('correct mistake');
+
+            // move words back to tollbar
+            placeholders.each(function() {
+                var placeholder = $(this);
+                var span = placeholder.find('span').first();
+                toolbar.append(span);
+            });
+
+            // sort words
+            var words = toolbar.find('span');
+            words.detach();
+            words.sort(function(a, b) {
+                return words_order[a.innerHTML] > words_order[b.innerHTML];
+            });
+            toolbar.append(words);
+        }
+
+
+        return {
+            getAnswer: function() {
+                var res = [];
+                text.find('.placeholder').each(function() {
+                    var span = $(this).find('span').first();
+                    res.push(span.text())
+                });
+                return res;
+            },
+
+            setAnswer: function(value) {
+                resetWords();
+                var placeholders = text.find('.placeholder');
+                placeholders.each(function(i) {
+                    var placeholder = $(this);
+                    if(value[i]) {
+                        placeholder.append(words_elements[value[i]])
+                    }
+                });
+            },
+
+            isAnswered: function() {
+                return true;
+            },
+
+            showResult: function(mistakes, message) {
+                var placeholders = text.find('.placeholder');
+                placeholders.removeClass('correct mistake');
+                if(!Quiz.params.display_partial_feedback && !Quiz.params.display_detailed_feedback) return;
+                var mistakes_cnt = 0;
+                placeholders.each(function() {
+                    var placeholder = $(this);
+                    var span = placeholder.find('span').first();
+                    var text = span.length ? span.text() : null;
+                    var mistake = !text || mistakes.indexOf(text) !== -1;
+                    if(mistake) {
+                        mistakes_cnt++;
+                    }
+                    placeholder.addClass(mistake ? 'mistake' : 'correct');
+                });
+                Quiz.common.toggleWrongAnswerMessage(
+                    parent,
+                    mistakes_cnt ? lang.translate('wrong_fill_gaps_msg', mistakes_cnt) : false
+                );
+            },
+
+            reset: function() {
+                resetWords();
+            },
+
+            answers_order: [0]
+        }
+
+    }
+
+    Quiz.questionTypes.register('fill_gaps', fillGaps);
+
+})();
diff --git a/pemFioi/quiz/questions/input.js b/pemFioi/quiz/questions/input.js
new file mode 100644
index 000000000..91f70e207
--- /dev/null
+++ b/pemFioi/quiz/questions/input.js
@@ -0,0 +1,70 @@
+(function() {
+
+    function textInput(parent, question_idx, params) {
+        var answer = parent.find('answer');
+        var input = $('');
+
+        var format = answer.attr('format') || 'text';
+        var validator;
+        if(format == 'string') {
+            validator = '.+';
+        } else if(format == 'number') {
+            validator = '^-?[0-9]*\.?[0-9]*$';
+        } else if(format == 'regexp') {
+            validator = answer.attr('validator');
+            var code = 'validator = ' + validator;
+            try {
+                validator = eval(code);
+            } catch(e) {}
+        }
+        if(validator) {
+            var reg = new RegExp(validator);
+            if(typeof reg === 'object' && 'test' in reg) {
+                input.on('change blur', function() {
+                    answer.removeClass('mistake');
+                    var el = $(this);
+                    var valid = reg.test(el.val());
+                    input.toggleClass('error', !valid);
+                    Quiz.common.toggleWrongAnswerMessage(
+                        parent,
+                        valid ? false : lang.translate('error_' + format)
+                    );
+                });
+            }
+        }
+        input.attr('placeholder', lang.translate('placeholder_' + format));
+        answer.append(input);
+
+        answer.wrapAll('
');
+
+        return {
+            getAnswer: function() {
+                return input.val();
+            },
+
+            setAnswer: function(value) {
+                input.val(value)
+            },
+
+            isAnswered: function() {
+                return this.getAnswer() != '';
+            },
+
+            showResult: function(mistakes, message) {
+                answer.removeClass('correct mistake');
+                answer.addClass(mistakes === null ? 'correct' : 'mistake');
+                Quiz.common.toggleWrongAnswerMessage(parent, message);
+            },
+
+            reset: function() {
+                answer.removeClass('correct mistake');
+                input.val('');
+            },
+
+            answers_order: [0]
+        }
+    }
+
+    Quiz.questionTypes.register('input', textInput);
+
+})();
\ No newline at end of file
diff --git a/pemFioi/quiz/quiz.js b/pemFioi/quiz/quiz.js
new file mode 100644
index 000000000..ea5c9a0e8
--- /dev/null
+++ b/pemFioi/quiz/quiz.js
@@ -0,0 +1,277 @@
+Quiz = {
+    grader: {}
+}
+
+
+Quiz.common = {
+
+    error: function(msg) {
+        console.error('Quiz error: ' + msg);
+    },
+
+    shuffleArray: function(a) {
+        var j, x, i, r;
+        for(i = a.length - 1; i > 0; i--) {
+            r = 0.5 * (1 + Math.sin(i + Quiz.params.random));
+            j = Math.floor(r * (i + 1));
+            x = a[i];
+            a[i] = a[j];
+            a[j] = x;
+        }
+        return a;
+    },
+
+    shuffleElements: function(elements, shuffle) {
+        var order = [];
+        if(!elements.length) {
+            return order;
+        }
+        for(var i=0; i' +
+            '' + msg +
+            '
');
+        !msg && el.remove();
+    }
+
+}
+
+
+Quiz.versions = {
+
+    data: {},
+
+    init: function(params) {
+        var self = this;
+        $('question-group').each(function(i, question_set) {
+            question_set = $(question_set);
+            var questions = question_set.find('question');
+            self.data[i] = (i + params.random) % questions.length;
+            questions.each(function(j, question) {
+                if(j == self.data[i]) {
+                    $(question).insertAfter(question_set);
+                } else {
+                    $(question).remove();
+                }
+            });
+            question_set.remove();
+        });
+    },
+
+
+    get: function() {
+        return this.data;
+    }
+
+}
+
+
+
+Quiz.questionTypes = {
+
+    types: {},
+
+    register: function(type, func) {
+        this.types[type] = func;
+    },
+
+    create: function(type, parent, question_idx, params) {
+        if(this.types[type]) {
+            return this.types[type](parent, question_idx, params);
+        } else {
+            Quiz.common.error('Unsupported question type ' + type);
+        }
+    }
+}
+
+
+
+Quiz.UI = function(params) {
+
+    var questions_order = [];
+
+    // prepare params
+    var default_params = {
+        shuffle_questions: false,
+        shuffle_answers: false
+    }
+    var params = Object.assign(default_params, params);
+    Quiz.params = params;
+
+    if(!params.parent) {
+        Quiz.common.error('Parent element not specified');
+        return false;
+    }
+
+    // init versions
+    Quiz.versions.init(params);
+
+
+    // questions types
+    function initAnswers(parent) {
+        parent.find('answer').click(function() {
+            $(this).addClass('selected');
+        })
+    }
+
+
+    // init questions
+    var els = params.parent.find('question');
+    var questions = [];
+    els.each(function(i, el) {
+        el = $(el)
+        var type = el.attr('type') || 'single';
+        questions[i] = Quiz.questionTypes.create(type, el, i, params);
+    });
+    questions_order = Quiz.common.shuffleElements(els, params.shuffle_questions);
+
+
+
+
+
+
+
+
+    // replace refs in solution with real answer and qustion numbers/labels
+    function realQuestionNumber(question_idx) {
+        var idx = questions_order.indexOf(question_idx);
+        if(idx > -1) {
+            return idx + 1;
+        } else {
+            console.error("Could not find question index " + question_idx + ".");
+            return '';
+        }
+    }
+
+    function realAnswerNumber(question_idx, answer_idx) {
+        if(questions[question_idx] && questions[question_idx].answers_order) {
+            var idx = questions[question_idx].answers_order.indexOf(question_idx);
+            if(idx !== -1) {
+                return Quiz.common.questionLabel(idx);
+            }
+            console.error("Could not find answer index " + answer_idx + " in question " + question_idx + ".");
+        } else {
+            console.error("Could not find question index " + question_idx + ".");
+        }
+
+        return '';
+    }
+
+    $('#solution').find('ref').each(function() {
+        var el = $(this);
+        var nq = el.attr('question');
+        if(typeof nq === 'undefined') {
+            return;
+        }
+        nq = parseInt(nq, 10) - 1;
+        var na = el.attr('answer');
+        if(typeof na !== 'undefined') {
+            na = parseInt(na, 10) - 1;
+            var text = realAnswerNumber(nq, na);
+        } else {
+            var text = realQuestionNumber(nq);
+        }
+        el.text(text);
+    });
+
+
+
+    // sys
+    function useFullWidth() {
+        // From buttonsAndMessages
+        try {
+            $('#question-iframe', window.parent.document).css('width', '100%');
+        } catch(e) {
+        }
+        $('body').css('width', '100%');
+    }
+    FontsLoader.loadFonts(['fontawesome', 'titillium-web']);
+    useFullWidth();
+    params.parent.show();
+
+
+
+    // interface
+
+    return {
+        getAnswer: function() {
+            var res = [];
+            for(var i=0; i * {
+  padding: 0 60px;
+}
+/* Old alternating colors
+question:nth-child(odd) {
+  background: rgba(74,144,226,0.2);
+}
+*/
+
+question .error-message, .quiz-toolbar .error-message {
+  color: #ff001f;
+  background-color: #ffe5e8;
+  border-radius: 50px 0 0 50px;
+  padding: 7px 8px 7px 40px;
+  position: relative;
+  font-size: 14px;
+  margin: 10px 60px;
+}
+question .error-message .icon,
+.quiz-toolbar .error-message .icon {
+  color: #fff;
+  background-color: #ff001f;
+  padding: 5px 6px;
+  border-radius: 50%;
+  font-size: 12px;
+  position: absolute;
+  left: 8px;
+  top: calc(50% - 0.5em - 5px);
+}
+
+question::after {
+  content: '';
+  position: relative;
+  display: block;
+  width: 90vw;
+  height: 1px;
+  left: 5vw;
+  background-color: #4a90e2;
+  margin: 24px 0px;
+  clear: both;
+}
+
+statement {
+  color: #4a90e2;
+  font-size: 22px;
+  margin-bottom: 20px;
+  font-weight: bold;
+  display: block;
+}
+statement p {
+  margin: 0;
+  font-weight: normal;
+}
+statement p:first-child {
+  /* because we get 
 wraps here by taskeditor tinymce */
+  display: inline;
+}
+statement::before {
+  counter-increment: questions-counter;
+  content: counter(questions-counter);
+  color: #fff;
+  font-weight: normal;
+  font-size: 18px;
+  background-color: #4a90e2;
+  border-radius: 50%;
+  width: 30px;
+  line-height: 30px;
+  text-align: center;
+  display: inline-block;
+  margin-right: 15px;
+}
+
+
+/*
+*
+* QUESTION DEFAULT LAYOUT: TYPE SINGLE ANSWERS
+*
+*/
+
+answer {
+  display: block;
+  border-top: 1px solid;
+  border-color: #e1e1e1;
+  padding: 5px 0;
+}
+answer p {
+  margin: 0;
+}
+answer p:first-child {
+  /* because we get 
 wraps here by taskeditor tinymce */
+  display: inline;
+}
+/*question:nth-child(odd) answer {
+  border-color: #d2d2d2;
+}*/
+answer:first-child {
+  border-top: none;
+}
+answer .answer-block {
+  display: flex;
+  margin-left: -15px;
+  padding-left: 15px;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  transition: all linear 50ms;
+  justify-content: space-between;
+}
+answer.selected .answer-block {
+  color: #4a90e2;
+  border-color: #4a90e2;
+}
+answer .answer-label {
+  line-height: 1.5em;
+  transition: all linear 50ms;
+}
+answer.selected .answer-label {
+  font-weight: bold;
+}
+answer .answer-code {
+  border: 1px solid #4a90e2;
+  border-radius: 20px;
+  text-align: center;
+  position: relative;
+  color: #4a90e2;
+  font-weight: bold;
+  cursor: pointer;
+  flex: 0 1 120px;
+  align-self: center;
+  transition: all linear 50ms;
+}
+answer.selected .answer-code {
+  color: #fff;
+  background-color: #4a90e2;
+}
+answer .answer-code::before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  left: 15px;
+  top: 7px;
+  top: calc(50% - 0.5em);
+}
+answer.selected .answer-code::before {
+  content: "\f00c";
+}
+/*
+*
+* QUESTION HORIZONTAL LAYOUT: TYPE SINGLE ANSWERS
+*
+*/
+question.horizontal .answers {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 -20px;
+}
+question.horizontal answer {
+  border-top: none;
+  flex: 1 0 0;
+  padding: 0 20px;
+  border-left: 1px solid;
+}
+question.horizontal answer:first-child {
+  border-left: none;
+}
+question.horizontal answer .answer-block {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-left: 0;
+  padding-left: 0;
+}
+question.horizontal answer .answer-label,
+question.horizontal answer .answer-code {
+}
+question.horizontal answer .answer-label {
+  text-align: center;
+  padding: 1em 10px;
+}
+question.horizontal answer .answer-code {
+  flex: 0 0 0;
+  align-self: stretch;
+  margin: 0 -1px -1px;
+  padding: 2px 10px;
+}
+
+/*
+*
+* SWITCH CHECKBOX
+*
+*/
+.answer-switch {
+  display: inline-block;
+  background: rgba(0,0,0,0.05);
+  border-radius: 20px;
+  box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.05);
+  height: 26px;
+  width: 100px;
+  position: relative;
+  right: 0;
+  cursor: pointer;
+  align-self: center;
+  box-shadow: 0 1px 0 0 #727273 inset;
+  flex: 0 0 auto;
+}
+.answer-switch::before,
+.answer-switch::after {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  top: 7px;
+  top: calc(50% - 0.5em);
+  color: #9B9B9B;
+}
+.answer-switch::before {
+  content: "\f00d";
+  right: auto;
+  left: 20px;
+}
+.answer-switch::after {
+  content: "\f00c";
+  right: 20px;
+  left: auto;
+}
+.answer-switch .cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 26px;
+  width: 55px;
+  border-radius: 20px;
+  background-color: #9B9B9B;
+  transition: all 250ms;
+  z-index: 1;
+}
+answer.selected .answer-switch .cursor {
+  background-color: #4a90e2;
+  left: 45px;
+}
+.answer-switch .cursor::before {
+  content: "\f00d";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  top: 7px;
+  top: calc(50% - 0.5em);
+  left: 20px;
+  color: #fff;
+}
+answer.selected .answer-switch .cursor::before {
+  content: "\f00c";
+  right: auto;
+  left: 20px;
+}
+
+question.horizontal .answer-switch {
+  align-self: center;
+}
+
+/*
+*
+* QUESTION DEFAULT LAYOUT: TYPE INPUT ANSWERS
+*
+*/
+input[type=text] {
+  font-size: 12px;
+  background: #f8f8f8;
+  border: 1px solid #e1e1e1;
+  border-radius: 5px;
+  padding: 6px 12px;
+  width: 100%;
+  color: #555555;
+  font-size: 16px;
+}
+input[type=text]:focus {
+  box-shadow: 0 1px 3px #333 inset;
+}
+::placeholder,
+:placeholder-shown {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+
+/*
+*
+* SOLUTION DISPLAY
+*
+*/
+solution {
+  display: none;
+  border-top: 1px solid #e1e1e1;
+  margin-top: 30px;
+}
+#solution, .solution {
+  display: none;
+}
+.displaySolution solution, .displaySolution .solution, .displaySolution #solution {
+  display: block;
+}
+/*question:nth-child(odd) solution {
+  border-color: #d2d2d2;
+}*/
+.displayFeedback answer.correct:not(.selected) .answer-block {
+  border-color: transparent;
+}
+.displayFeedback answer.correct:not(.selected) .answer-code::before {
+  color: #4a90e2;
+}
+.displayFeedback answer.correct .answer-block {
+  font-weight: bold;
+}
+.displayFeedback answer.correct .answer-code::before {
+  content: "\f0a5";
+}
+.displayFeedback .horizontal answer.correct .answer-code::before {
+  content: "\f0a6";
+}
+.displayFeedback answer.mistake .answer-block {
+  color: #797979;
+  border-color: #ff001f;
+}
+.displayFeedback answer.mistake .answer-code {
+  background-color: #ff001f;
+  border-color: #ff001f;
+}
+.displayFeedback answer.mistake .answer-code::before {
+  content: "\f00d";
+}
+.displayFeedback answer.correct input[type=text] {
+  border-color: #4a90e2;
+  border-width: 2px;
+}
+.displayFeedback answer.mistake input[type=text] {
+  border-color: #ff001f;
+  border-width: 2px;
+}
+
+/*
+*
+* SCORE
+*
+*/
+#score {
+  border-top: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
+  margin-top: 2em;
+  font-size: 26px;
+  padding: 14px 0;
+  color: #4a90e2;
+  display: flex;
+}
+#score .scoreLabel {
+  flex-grow: 1;
+}
+#score .max-value {
+  color: #9b9b9b;
+}
+/*
+*
+* INTERFACE CONTROLS
+*
+*/
+
+#displayHelper_saved {
+  border-top: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
+  padding: 10px 0;
+  font-size: 1rem;
+}
+#displayHelper_validate,
+#displayHelper_cancel {
+  display: inline-block;
+  width: 50%;
+}
+#displayHelper_validate {
+  padding-right: 20px;
+}
+#displayHelper_cancel {
+  padding-left: 20px;
+}
+input[type=button],
+button,
+.btn {
+  border-radius: 50px;
+  color: #fff;
+  border: none;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  padding: 7px 20px;
+}
+#displayHelper_validate input[type=button],
+#displayHelper_cancel input[type=button] {
+  margin: 0;
+  width: 100%;
+}
+#displayHelper_validate input[type=button] {
+  background-color: #4a90e2;
+}
+#displayHelper_cancel input[type=button],
+#showSolutionButton .btn {
+  background-color: #9b9b9b;
+}
+.btn:hover {
+  color: #fff;
+}
+
+
+
+#popupMessage.floatingMessage {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: gray;
+  background: rgba(241, 242, 247, .9);
+}
+#popupMessage.floatingMessage .container {
+  min-height: 100px;
+  width: 94%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+  color:#787878;
+  background: #fff;
+  border: none;
+  border-radius: 5px;
+  top: 50%;
+  transform: translate(0,-50%);
+}
+#popupMessage.floatingMessage .container img {
+  display: none;
+}
+#popupMessage .message {
+  font-size: 1em;
+  margin: 60px;
+  border: 0;
+  font-weight: normal;
+  padding: 0;
+  max-width: none;
+}
+#popupMessage p {
+  margin: .5em 0 0;
+}
+#popupMessage p:first-child {
+  margin-top: 0;
+}
+#popupMessage .buttonsWrapper {
+  margin: 2em auto 0;
+  text-align: center;
+}
+#popupMessage button {
+  margin: 0 auto;
+  background-color: #4a90e2;
+}
+#popupMessage button.buttonYes::before {
+  content: "\f00c";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  margin-right: 10px;
+}
+
+
+.btn {
+  cursor: pointer;
+  background-color: #4a90e2;
+}
+
+
+.quiz-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+}
+
+.quiz-popup .opacity-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: #000;
+  opacity: 0.3;
+  z-index: 1;
+}
+
+.quiz-popup .inner {
+  position: relative;
+  z-index: 2;
+  top: 50%;
+  text-align: center;
+}
+
+.quiz-popup .content {
+  background: #fff;
+  border-radius: 10px;
+  padding: 40px;
+  display: inline-block;
+}
+
+.quiz-popup .content .btn {
+  margin: 0 10px;
+}
+
+
+.quiz-toolbar {
+  margin: 40px auto;
+  text-align: center;
+}
+
+.quiz-toolbar .btn {
+  margin: 0 10px;
+}
+
+
+.taskContent {
+  position: relative;
+}
+
+#task .freeze-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background:transparent;
+  z-index: 1;
+}
+
+
+.fill-gaps-toolbar .word {
+  display: inline-block;
+  border: 1px solid #4a90e2;
+  border-radius: 5px;
+  background-color: white;
+  text-align: center;
+  cursor: move;
+  padding: 4px 20px;
+  margin-right: 10px;
+  margin-bottom: 4px;
+}
+
+
+.fill-gaps-text {
+  font-size: 20px;
+}
+
+.fill-gaps-text .word {
+  border: 1px solid #4a90e2;
+  border-radius: 5px;
+  background-color: white;
+  text-align: center;
+  cursor: move;
+  padding: 4px 20px;
+}
+
+.fill-gaps-text .placeholder {
+  display: inline-block;
+  border-radius: 5px;
+  background: #AAA;
+  min-width: 60px;
+  padding: 5px 0px;
+  color : #4a90e2;
+  font-weight: bold;
+}
+
+.fill-gaps-text .placeholder-hover {
+  border: 1px solid #4a90e2;
+  background: #FFF;
+  padding: 4px 0px;
+}
+
+.fill-gaps-text .placeholder:empty:before {
+  content: "\00a0";
+}
+
+.fill-gaps-text .correct span {
+
+}
+
+.fill-gaps-text .mistake {
+  background-color: #ff001f;
+}
+
+.fill-gaps-text .mistake span {
+  color: #ff001f;
+  border-color: #ff001f;
+}
diff --git a/pemFioi/quiz/task.js b/pemFioi/quiz/task.js
new file mode 100644
index 000000000..62fe40e3b
--- /dev/null
+++ b/pemFioi/quiz/task.js
@@ -0,0 +1,446 @@
+(function() {
+
+    window.lang = {
+
+        default_language: 'en',
+        language: 'en',
+        language_set: false,
+
+        strings: {
+            en: {
+                'score': 'Score',
+                'grader_msg': 'Your score is ',
+                'wrong_answer_msg': 'You have at least one mistake.',
+                'wrong_answer_msg_partial_feedback': 'You have at least one mistake. Here is a hint:',
+                'wrong_answer_msg_not_answered': 'You didn\'t answer this question',
+                'wrong_fill_gaps_msg': 'You have %% incorrect answers for this question, highlighted in red.',
+                'validate': 'Submit',
+                'solution': 'Show answer',
+                'restart': 'Restart',
+                'restart_scratch': 'Restart from scratch',
+                'restart_current': 'Restart from current answer',
+                'return_to_top': 'Return to the list of questions',
+                'placeholder_text': 'Enter text',
+                'placeholder_number': 'Enter number',
+                'error_number': 'Must be a number',
+                'placeholder_string': 'Enter string',
+                'error_string': 'Must be a string',
+                'placeholder_regexp': 'Enter text',
+                'error_regexp': 'Invalid format',
+                'error_grading': 'There was an error while submitting this answer, please try again in a few minutes.'
+            },
+            fr: {
+                'score': 'Score',
+                'grader_msg': 'Votre score est ',
+                'wrong_answer_msg': 'Vous avez au moins une erreur.',
+                'wrong_answer_msg_partial_feedback': 'Vous avez au moins une erreur. Voici un indice :',
+                'wrong_answer_msg_not_answered': 'Vous n\'avez pas répondu à cette question',
+                'wrong_fill_gaps_msg': 'You have %% incorrect answers for this question, highlighted in red.',
+                'validate': 'Valider',
+                'solution': 'Voir la réponse',
+                'restart': 'Recommencer',
+                'restart_scratch': 'Recommencer au début',
+                'restart_current': 'Recommencer la question',
+                'return_to_top': 'Retour à la liste des questions',
+                'cancel' : 'Annuler',
+                'placeholder_text': 'Entrez du texte',
+                'placeholder_number': 'Entrez un nombre',
+                'error_number': 'Vous devez entrer un nombre.',
+                'placeholder_string': 'Entrez une chaîne de caractères',
+                'error_string': 'Vous devez entrer une chaïne de caractères',
+                'placeholder_regexp': 'Entrez du texte.',
+                'error_regexp': 'Format invalide',
+                'error_grading': 'Erreur lors de la soumission, veuillez réessayer dans quelques minutes.'
+            },
+        },
+
+        set: function(lng) {
+            if(!lng) {
+                lng = window.stringsLanguage;
+            }
+            this.language = lng;
+            this.language_set = true;
+        },
+
+        translate: function() {
+            if(!this.language_set) {
+                this.set();
+            }
+            var str = '', key = arguments[0];
+            if(this.strings[this.language] && this.strings[this.language][key]) {
+                str = this.strings[this.language][key];
+            } else {
+                str = this.strings[this.default_language][key] || key;
+            }
+            return str.replace('%%', arguments[1]);
+        }
+    }
+
+
+    var task_toolbar = {
+
+        buttons: {},
+        holder: false,
+        popup: false,
+
+        addButton: function(parent, name, callback) {
+            var btn = $('');
+            btn.on('click', callback);
+            parent.append(btn);
+            this.buttons[name] = btn;
+        },
+
+
+        restartTask: function(from_scratch) {
+            this.setValidated(false);
+            this.popup.hide();
+            this.unfreezeTask();
+            window.quiz_ui.toggleFeedback(false);
+            task.showViews({"task": true, "solution": false}, function(){});
+            if(from_scratch) {
+                window.quiz_ui.reset();
+            }
+        },
+
+        showPopup: function() {
+            if(!this.popup) {
+                this.popup = $(
+                    '
\
+                        
\
+                        
\
+                    
'
+                );
+                $(document.body).append(this.popup);
+                var el = this.popup.find('.content');
+                var self = this;
+                this.addButton(el, 'restart_scratch', function() {
+                    self.restartTask(true);
+                });
+                this.addButton(el, 'restart_current', function() {
+                    self.restartTask();
+                });
+                this.addButton(el, 'cancel', function() {
+                    self.popup.hide();
+                });
+            }
+            this.popup.show();
+        },
+
+
+        freezeTask: function() {
+            if(!this.freezer) {
+                this.freezer = $('
')
+                $('.taskContent').append(this.freezer);
+            }
+            this.freezer.show();
+        },
+
+
+        unfreezeTask: function() {
+            this.freezer && this.freezer.hide();
+        },
+
+
+        setValidated: function(validated) {
+            if(validated) {
+                this.buttons.validate.hide();
+                this.buttons.solution && this.buttons.solution.show();
+            } else {
+                this.buttons.validate.show();
+                this.buttons.solution && this.buttons.solution.hide();
+            }
+        },
+
+
+        displayError: function(error) {
+            if(!this.errorHolder) {
+                this.errorHolder = $('
');
+                this.holder.append('
');
+                this.holder.append(this.errorHolder);
+            }
+            this.errorHolder.html(' ' + error);
+            this.errorHolder.toggle(!!error);
+        },
+
+
+        init: function() {
+            if(this.holder) return;
+            $('#showSolutionButton').remove();
+            this.holder = $('
');
+            var self = this;
+            this.addButton(this.holder, 'validate', function() {
+                platform.validate('done');
+                self.freezeTask();
+                self.setValidated(true);
+            });
+            var hasSolution = false;
+            $('solution, .solution, #solution').each(function() {
+               if($(this).text().trim() != '') { hasSolution = true; }
+            });
+            if(hasSolution) {
+                this.addButton(this.holder, 'solution', function() {
+                    miniPlatformShowSolution();
+                });
+                this.buttons.solution.hide();
+            }
+            if(!quiz_settings.hide_restart) {
+                this.addButton(this.holder, 'restart', function() {
+                    self.showPopup();
+                });
+            }
+            if(quiz_settings.display_return_to_top) {
+                this.holder.append('

');
+                this.addButton(this.holder, 'return_to_top', function() {
+                    platform.validate('top');
+                });
+            }
+            this.holder.insertAfter($('.taskContent'));
+        }
+
+    }
+
+
+    var task_token = {
+
+        token: null,
+
+        init: function() {
+            var query = document.location.search.replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
+            this.token = query.sToken || '';
+        },
+
+        get: function() {
+            return this.token
+        },
+
+        update: function(token) {
+            this.token = token
+        },
+
+        getAnswerToken: function(answer) {
+            return null;
+        }
+    }
+
+
+
+    window.task = {}
+
+    task.getViews = function(success, error) {
+        var views = {
+            task: {}
+        };
+        success(views);
+    };
+
+    task.updateToken = function(token, success, error) {
+        task_token.update(token)
+        success();
+    };
+
+    task.getHeight = function(success, error) {
+        var d = document;
+        var h = Math.max(d.body.offsetHeight, d.documentElement.offsetHeight);
+        success(h);
+    };
+
+    task.getMetaData = function(success, error) {
+        if (typeof json !== 'undefined') {
+            success(json);
+        } else {
+            success({nbHints: 0});
+        }
+    };
+
+    task.reloadState = function(state, success, error) { success() }
+    task.getState = function(success, error) { success("{}")  }
+    task.reloadStateObject = function(obj) { }
+    task.getStateObject = function() { return {} }
+    task.getDefaultStateObject = function() { return {} }
+
+
+    $('.grader').hide();
+
+
+    // grade
+
+    function useGraderData(answer, versions, score_settings, callback) {
+        if(window.Quiz.grader.handler && window.Quiz.grader.data) {
+            var res = window.Quiz.grader.handler(window.Quiz.grader.data, answer, versions, score_settings);
+            return callback(res);
+        }
+        console.error('Local Quiz grader not found');
+        if(errorcb) { errorcb(); }
+    }
+
+
+    function useGraderUrl(url, task_token, answer, versions, score_settings, callback, errorcb) {
+        var data = {
+            action: 'grade',
+            task: task_token,
+            answer: answer,
+            versions: versions,
+            score_settings: score_settings
+        }
+        $.ajax({
+            type: 'POST',
+            url: url,
+            data: JSON.stringify(data),
+            crossDomain: true,
+            contentType: 'application/json'
+        }).done(function(res) {
+            if(res.success) {
+                return callback(res.data);
+            }
+            console.error('Grader response error: ', res);
+            if(errorcb) { errorcb(); }
+        }).fail(function(jqxhr, settings, exception ) {
+            console.error('Grader url not responding: ' + url);
+            if(errorcb) { errorcb(); }
+        });
+    }
+
+
+
+
+
+    task.load = function(views, success) {
+        task_token.init()
+
+        platform.getTaskParams(null, null, function(taskParams) {
+            var random = parseInt(taskParams.randomSeed, 10) || Math.floor(Math.random() * 100) //0
+            var q = Quiz.UI({
+                parent: $('#task'),
+                shuffle_questions: !!quiz_settings.shuffle_questions,
+                shuffle_answers: !!quiz_settings.shuffle_answers,
+                display_partial_feedback: !!quiz_settings.display_partial_feedback,
+                display_detailed_feedback: !!quiz_settings.display_detailed_feedback,
+                random: random
+            });
+            window.quiz_ui = q;
+
+            task.showViews = function(views, callback) {
+                q.toggleSolutions(!!views.solution);
+                callback()
+            }
+
+
+            task.getAnswer = function(callback) {
+                callback(JSON.stringify(q.getAnswer()));
+            };
+
+
+            task.reloadAnswer = function(answer, callback) {
+                try {
+                    answer = JSON.parse(answer);
+                    q.setAnswer(answer);
+                } catch(e) {
+
+                }
+                callback();
+            };
+
+
+
+            function displayScore(score, max_score) {
+                var msg = '' + lang.translate('score') + '' + ' ' + score + '/' + max_score + '';
+                if($('#score').length == 0) {
+                    var div = '
';
+                    $('.taskContent').first().append(div);
+                }
+                $('#score').html(msg);
+            }
+
+
+            function displayMessages(messages) {
+                if($('#grader-messages').length == 0) {
+                    var div = '
';
+                    $('.taskContent').first().append(div);
+                }
+                $('#grader-messages').html(messages.join('
'));
+            }
+
+
+            task.gradeAnswer = function(answer, answer_token, callback) {
+                answer = JSON.parse(answer);
+                function onGrade(result) {
+                    q.showResult(result);
+                    displayScore(result.score, taskParams.maxScore);
+                    displayMessages(result.messages);
+                    callback(result.score, lang.translate('grader_msg') + result.score, null);
+                }
+                function onError(result) {
+                    task_toolbar.displayError(lang.translate('error_grading'));
+                }
+                var scoreSettings = {
+                    maxScore: taskParams.maxScore,
+                    minScore: taskParams.minScore,
+                    noScore: taskParams.noScore
+                    };
+                var token = task_token.get()
+                if(token) {
+                    useGraderUrl(
+                        quiz_settings.graderUrl,
+                        token,
+                        answer,
+                        Quiz.versions.get(),
+                        scoreSettings,
+                        onGrade,
+                        onError
+                    );
+                } else {
+                    useGraderData(
+                        answer,
+                        Quiz.versions.get(),
+                        scoreSettings,
+                        onGrade,
+                        onError
+                    );
+                }
+            };
+
+
+            task.reloadAnswerObject = function(answerObj) {
+                return q.setAnswer(answerObj);
+            }
+
+
+            task.getAnswerObject = function() {
+                return q.getAnswer();
+            }
+
+            task.getDefaultAnswerObject = function() {
+                return [];
+            }
+
+            success();
+        });
+    };
+
+    var grader = {
+        gradeTask: task.gradeAnswer
+    };
+
+    $(function() {
+        if(!window.quiz_settings) { window.quiz_settings = {}; }
+        if(window.platform) {
+            platform.initWithTask(task);
+            task_toolbar.init();
+        }
+    })
+
+    window.taskGetResourcesPost = function(res, callback) {
+        // Add grader_data, if available, to the javascript
+        try {
+            $.get('grader_data.js').success(function(data) {
+                res.task.push({type: 'javascript', id: 'grader_data', content: data});
+                callback(res);
+            }).error(function() {
+                callback(res);
+            });
+        } catch(e) {
+            callback(res);
+        }
+    };
+
+})();
diff --git a/pemFioi/quiz2/grader.js b/pemFioi/quiz2/grader.js
new file mode 100644
index 000000000..ac4d2e548
--- /dev/null
+++ b/pemFioi/quiz2/grader.js
@@ -0,0 +1,209 @@
+(function() {
+
+
+    function scoreCalculator(score_settings, nb_total) {
+
+        var nb_valid = 0;
+        var nb_mistakes = 0;
+
+        return {
+
+            addAnswer: function(answer_score) {
+                if(typeof answer_score === 'boolean') {
+                    nb_valid += answer_score ? 1 : 0;
+                    nb_mistakes += answer_score ? 0 : 1;
+                } else {
+                    answer_score = parseFloat(answer_score) || 0;
+                    nb_valid += answer_score;
+                    nb_mistakes += answer_score > 0 ? 0 : 1;
+                }
+            },
+
+            getScore: function() {
+                if(score_settings) {
+                    var score = (nb_valid * score_settings.maxScore
+                               + nb_mistakes * score_settings.minScore
+                               + (nb_total - nb_valid - nb_mistakes) * score_settings.noScore) / nb_total;
+                } else {
+                    var score = nb_valid / nb_total;
+                }
+                score = Math.round(score);
+                return score;
+            }
+        }
+
+    }
+
+
+
+
+    function graderDataEnumerator(grader_data, versions) {
+
+        return {
+            each: function(callback) {
+                for (var i = 0; i < grader_data.length; i++) {
+                    var answer_grader_data = grader_data[i];
+                    if(versions && i in versions) {
+                        answer_grader_data = answer_grader_data[versions[i]];
+                    }
+                    callback(answer_grader_data, i);
+                }
+            }
+        }
+
+    }
+
+
+
+
+    function getAnswerGrader(grader) {
+
+
+        function gradeAnswerArray(given_answer, correct_answer, messages) {
+            var res = {
+                score: true,
+                feedback: {
+                    correct_answer: correct_answer,
+                    mistakes: [],
+                    messages: messages
+                }
+            }
+            for(var i=0; i\
+            %%LABEL%%\
+            %%CODE%%\
+        
';
+
+    var multiple_tpl =
+        '
\
+            %%LABEL%%\
+            \
+        
';
+
+    function redesign(question) {
+        var answers = question.find('answer');
+        answers.each(function(i) {
+            var answer = $(this);
+            if (question.attr("type") === "single") {
+                var html = single_tpl;
+                html = html
+                    .replace('%%LABEL%%', answer.html())
+                    .replace('%%CODE%%', Quiz.common.questionLabel(i));
+            }
+            else if (question.attr("type") === "multiple") {
+                var html = multiple_tpl;
+                html = html
+                    .replace('%%LABEL%%', answer.html());
+            }
+            answer.html(html)
+        });
+        answers.wrapAll('
');
+    }
+
+
+
+
+    // core
+
+    function singleChoice(parent, question_idx, params) {
+
+        var answers = parent.find('answer');
+        answers.each(function(i) {
+            $(this).attr('answer-index', i);
+        })
+        answers.click(function() {
+            parent.find('answer').removeClass('selected mistake');
+            $(this).addClass('selected');
+        });
+        var answers_order = Quiz.common.shuffleElements(answers, params.shuffle_answers);
+
+
+        redesign(parent);
+
+        return {
+            getAnswer: function() {
+                var el = parent.find('answer.selected');
+                if(el.length) {
+                    return [
+                        parseInt(el.attr('answer-index'), 10)
+                    ]
+                }
+                return [];
+            },
+
+            setAnswer: function(answer) {
+                parent.find('answer').removeClass('selected');
+                if(!isNaN(answer[0])) {
+                    parent.find('answer[answer-index=' + answer[0] + ']').addClass('selected');
+                }
+            },
+
+
+            checkAnswered: function(error_message) {
+                var answered = !isNaN(this.getAnswer()[0]);
+                if(!answered && Quiz.params.alert_if_no_answer) {
+                    Quiz.common.toggleAlertMessage(parent, error_message, 'error');
+                }
+                return answered;
+            },
+
+
+            displayFeedback: function(feedback) {
+                var correct = feedback.mistakes.length == 0;
+                if((Quiz.params.show_solutions == 'all') || (Quiz.params.show_solutions == 'correct_only' && correct)) {
+                    parent.find('solution').show();
+                }
+                parent.find('answer').removeClass('correct mistake');
+
+
+                if(Quiz.params.feedback_on_correct_choices != 'none') {
+                    answers.each(function(i) {
+                        var answer = $(this);
+                        var correct = feedback.correct_answer.indexOf(i) !== -1;
+
+                        var display_for_all = Quiz.params.feedback_on_correct_choices == 'all' && correct;
+                        var display_for_selected = answer.hasClass('selected') && correct;
+                        if(display_for_all || display_for_selected) {
+                            answer.addClass('correct');
+                            Quiz.common.toggleAlertMessage(
+                                answer,
+                                feedback.messages[i],
+                                'success'
+                            );
+                        }
+                    });
+                }
+
+                if(Quiz.params.feedback_on_wrong_choices != 'none') {
+                    var first_error = false;
+                    answers.each(function(i) {
+                        var answer = $(this);
+                        var mistake = feedback.correct_answer.indexOf(i) === -1;
+                        var selected = answer.hasClass('selected');
+                        var wrong = (!mistake) == (!selected);
+                        if(!wrong) {
+                            return;
+                        }
+
+                        if(Quiz.params.feedback_on_wrong_choices == 'all' ||
+                            (Quiz.params.feedback_on_wrong_choices == 'selected_only' && selected)) {
+                            answer.addClass('mistake');
+                            Quiz.common.toggleAlertMessage(
+                                answer,
+                                feedback.messages[i],
+                                'error'
+                            );
+                        } else if(Quiz.params.feedback_on_wrong_choices == 'first_under_question') {
+                            if(first_error !== false) {
+                                return;
+                            }
+                            answer.addClass('mistake');
+                            first_error = feedback.messages[i];
+                        } else if(Quiz.params.feedback_on_wrong_choices == 'first_under_choice') {
+                            if(first_error !== false) {
+                                return;
+                            }
+                            first_error = true;
+                            answer.addClass('mistake');
+                            Quiz.common.toggleAlertMessage(
+                                answer,
+                                feedback.messages[i],
+                                'error'
+                            );
+                        }
+                    });
+                    if(first_error !== false) {
+                        Quiz.common.toggleAlertMessage(
+                            parent,
+                            first_error,
+                            'error'
+                        );
+                    }
+                }
+
+
+            },
+
+            toggleSolution: function(flag) {
+                parent.find('solution').toggle(flag)
+            },
+
+            resetAnswer: function() {
+                parent.find('answer').removeClass('selected');
+            },
+
+            resetFeedback: function() {
+                parent.find('solution').hide();
+                parent.find('.alert-message').remove();
+                parent.find('answer').removeClass('correct mistake');
+            },
+
+            answers_order: answers_order
+        }
+    }
+
+    Quiz.questionTypes.register('single', singleChoice);
+
+
+
+    function multipleChoice(parent, question_idx, params) {
+
+        var answers = parent.find('answer');
+        answers.each(function(i) {
+            $(this).attr('answer-index', i);
+        })
+        answers.click(function() {
+            answers.removeClass('mistake');
+            $(this).toggleClass('selected');
+        });
+        var answers_order = Quiz.common.shuffleElements(answers, params.shuffle_answers);
+
+
+        redesign(parent);
+
+        return {
+            getAnswer: function() {
+                var res = [];
+                answers.each(function(i, el) {
+                    if($(el).hasClass('selected')) {
+                        res.push(i);
+                    }
+                })
+                return res;
+            },
+
+            setAnswer: function(values) {
+                parent.find('answer').each(function(i) {
+                    var el = $(this);
+                    var idx = parseInt(el.attr('answer-index'), 10);
+                    el.toggleClass('selected', values.indexOf(idx) !== -1);
+                });
+            },
+
+            checkAnswered: function(error_message) {
+                var answered = this.getAnswer().length > 0;
+                if(!answered && Quiz.params.alert_if_no_answer) {
+                    Quiz.common.toggleAlertMessage(parent, error_message, 'error');
+                }
+                return answered;
+            },
+
+            displayFeedback: function(feedback) {
+                var correct = feedback.mistakes.length == 0;
+                if((Quiz.params.show_solutions == 'all') || (Quiz.params.show_solutions == 'correct_only' && correct)) {
+                    parent.find('solution').show();
+                }
+
+                parent.find('answer').removeClass('correct mistake');
+
+                if(Quiz.params.feedback_on_correct_choices != 'none') {
+                    answers.each(function(i) {
+                        var answer = $(this);
+                        var correct = feedback.correct_answer.indexOf(i) !== -1;
+
+                        var display_for_all = Quiz.params.feedback_on_correct_choices == 'all' && correct;
+                        var display_for_selected = answer.hasClass('selected') && correct;
+                        if(display_for_all || display_for_selected) {
+                            answer.addClass('correct');
+                            Quiz.common.toggleAlertMessage(
+                                answer,
+                                feedback.messages[i],
+                                'success'
+                            );
+                        }
+                    });
+                }
+
+                if(Quiz.params.feedback_on_wrong_choices != 'none') {
+                    var first_error = false;
+                    answers.each(function(i) {
+                        var answer = $(this);
+                        var mistake = feedback.correct_answer.indexOf(i) === -1;
+                        var selected = answer.hasClass('selected');
+                        var wrong = (!mistake) == (!selected);
+                        if(!wrong) {
+                            return;
+                        }
+
+                        if(Quiz.params.feedback_on_wrong_choices == 'all' ||
+                            (Quiz.params.feedback_on_wrong_choices == 'selected_only' && selected)) {
+                            answer.addClass('mistake');
+                            Quiz.common.toggleAlertMessage(
+                                answer,
+                                feedback.messages[i],
+                                'error'
+                            );
+                        } else if(Quiz.params.feedback_on_wrong_choices == 'first_under_question') {
+                            if(first_error !== false) {
+                                return;
+                            }
+                            answer.addClass('mistake');
+                            first_error = feedback.messages[i];
+                        } else if(Quiz.params.feedback_on_wrong_choices == 'first_under_choice') {
+                            if(first_error !== false) {
+                                return;
+                            }
+                            first_error = true;
+                            answer.addClass('mistake');
+                            Quiz.common.toggleAlertMessage(
+                                answer,
+                                feedback.messages[i],
+                                'error'
+                            );
+                        }
+                    });
+                    if(first_error !== false) {
+                        Quiz.common.toggleAlertMessage(
+                            parent,
+                            first_error,
+                            'error'
+                        );
+                    }
+                }
+            },
+
+            resetAnswer: function() {
+                parent.find('answer').removeClass('selected');
+            },
+
+            resetFeedback: function() {
+                parent.find('solution').hide();
+                parent.find('.alert-message').remove();
+                parent.find('answer').removeClass('correct mistake');
+            },
+
+            answers_order: answers_order
+        }
+    }
+
+    Quiz.questionTypes.register('multiple', multipleChoice);
+})();
diff --git a/pemFioi/quiz2/questions/fill_gaps.js b/pemFioi/quiz2/questions/fill_gaps.js
new file mode 100644
index 000000000..fc3b9d496
--- /dev/null
+++ b/pemFioi/quiz2/questions/fill_gaps.js
@@ -0,0 +1,180 @@
+(function() {
+
+    function fillGaps(parent, question_idx) {
+
+        var uid = Math.random().toString(36).substr(2, 12);
+
+        // take words from answers
+        var words = [];
+        var answers = parent.find('answer');
+        answers.each(function() {
+            words.push($(this).html().trim());
+        });
+        answers.remove();
+
+
+
+        var toolbar = '
';
+        for(var i=0, word; word = words[i]; i++) {
+            toolbar += '' + word + '';
+        }
+        toolbar += '
';
+        toolbar = $(toolbar);
+        toolbar.insertAfter(parent.find('statement'));
+
+        // drag & drop
+        var words_order = {};
+        toolbar.find('span').each(function(i) {
+            var el = $(this), text = el.text();
+            words_order[text] = i;
+            el.draggable({
+                scope: uid,
+                revert: 'invalid',
+                revertDuration: 200,
+                zIndex: 100
+            });
+        });
+
+        toolbar.droppable({
+            scope: uid,
+            drop: function(event, ui) {
+                ui.draggable.detach().css({top: 0,left: 0}).appendTo(toolbar);
+            }
+        });
+
+        var text = parent.find('.fill-gaps-text');
+        text.find('.placeholder').each(function() {
+            var placeholder = $(this)
+            placeholder.html('');
+            placeholder.droppable({
+                scope: uid,
+                hoverClass: 'placeholder-hover',
+                drop: function(event, ui) {
+                    toolbar.append(placeholder.find('span').first());
+                    ui.draggable.detach().css({top: 0,left: 0}).appendTo(placeholder);
+                }
+            });
+        });
+
+
+        function resetWords() {
+            var placeholders = text.find('.placeholder');
+            placeholders.removeClass('correct mistake');
+
+            // move words back to tollbar
+            placeholders.each(function() {
+                var placeholder = $(this);
+                var span = placeholder.find('span').first();
+                toolbar.append(span);
+            });
+
+            // sort words
+            var words = toolbar.find('span');
+            words.detach();
+            words.sort(function(a, b) {
+                return words_order[a.innerHTML] > words_order[b.innerHTML];
+            });
+            toolbar.append(words);
+        }
+
+
+        function getWordFromToolbar(text) {
+            var res;
+            toolbar.find('span').each(function() {
+                var el = $(this);
+                if(el.text() === text) {
+                    res = el;
+                    return false;
+                }
+            })
+            return res;
+        }
+
+
+        return {
+            getAnswer: function() {
+                var res = [];
+                text.find('.placeholder').each(function() {
+                    var span = $(this).find('span').first();
+                    res.push(span.text())
+                });
+                return res;
+            },
+
+            setAnswer: function(answer) {
+                resetWords();
+                var placeholders = text.find('.placeholder');
+                placeholders.each(function(i) {
+                    var placeholder = $(this);
+                    if(answer[i]) {
+                        var el = getWordFromToolbar(answer[i]);
+                        if(el) {
+                            placeholder.append(el);
+                        }
+                    }
+                });
+            },
+
+            checkAnswered: function(error_message) {
+                var answered = false;
+                text.find('.placeholder').each(function() {
+                    var span = $(this).find('span').first();
+                    if(span.text() !== '') {
+                        answered = true;
+                    }
+                });
+                if(!answered && Quiz.params.alert_if_no_answer) {
+                    Quiz.common.toggleAlertMessage(parent, error_message, 'error');
+                }
+                return answered;
+            },
+
+
+            displayFeedback: function(feedback) {
+                var correct = feedback.mistakes.length == 0;
+                if((Quiz.params.show_solutions == 'all') || (Quiz.params.show_solutions == 'correct_only' && correct)) {
+                    parent.find('solution').show();
+                }
+
+                var placeholders = text.find('.placeholder');
+                placeholders.removeClass('correct mistake');
+
+                var first_mistake_marked = false;
+                placeholders.each(function(i) {
+                    var placeholder = $(this);
+                    var span = placeholder.find('span').first();
+                    var text = span.length ? span.text() : null;
+                    var mistake = text != '' && feedback.mistakes[i] === text;
+                    if(mistake) {
+                        if(Quiz.params.feedback_on_wrong_choices == 'first_under_question' || Quiz.params.feedback_on_wrong_choices == 'first_under_choice') {
+                            !first_mistake_marked && placeholder.addClass('mistake');
+                            first_mistake_marked = true;
+                        } else if(Quiz.params.feedback_on_wrong_choices != 'none') {
+                            placeholder.addClass('mistake');
+                        }
+                    } else {
+                        if(Quiz.params.feedback_on_correct_choices != 'none') {
+                            placeholder.addClass('correct');
+                        }
+                    }
+                });
+            },
+
+            resetAnswer: function() {
+                resetWords();
+            },
+
+            resetFeedback: function() {
+                text.find('.placeholder').removeClass('correct mistake');
+                parent.find('solution').hide();
+                parent.find('.alert-message').remove();
+            },
+
+            answers_order: [0]
+        }
+
+    }
+
+    Quiz.questionTypes.register('fill_gaps', fillGaps);
+
+})();
diff --git a/pemFioi/quiz2/questions/input.js b/pemFioi/quiz2/questions/input.js
new file mode 100644
index 000000000..a6359a342
--- /dev/null
+++ b/pemFioi/quiz2/questions/input.js
@@ -0,0 +1,101 @@
+(function() {
+
+    function textInput(parent, question_idx, params) {
+        var answer = parent.find('answer');
+        var input = $('');
+
+        var format = answer.attr('format') || 'text';
+        var validator;
+        if(format == 'string') {
+            validator = '.+';
+        } else if(format == 'number') {
+            validator = '^-?[0-9]*\.?[0-9]*$';
+        } else if(format == 'regexp') {
+            validator = answer.attr('validator');
+            var code = 'validator = ' + validator;
+            try {
+                validator = eval(code);
+            } catch(e) {}
+        }
+        if(validator) {
+            var reg = new RegExp(validator);
+            if(typeof reg === 'object' && 'test' in reg) {
+                input.on('change blur', function() {
+                    answer.removeClass('mistake');
+                    var el = $(this);
+                    var valid = reg.test(el.val());
+                    input.toggleClass('error', !valid);
+                    Quiz.common.toggleAlertMessage(
+                        parent,
+                        valid ? false : lang.translate('error_' + format),
+                        'error'
+                    );
+                });
+            }
+        }
+        input.attr('placeholder', lang.translate('placeholder_' + format));
+        answer.append(input);
+
+        answer.wrapAll('
');
+
+        return {
+            getAnswer: function() {
+                return [
+                    input.val()
+                ];
+            },
+
+            setAnswer: function(answer) {
+                input.val(answer[0])
+            },
+
+            checkAnswered: function(error_message) {
+                var answered = this.getAnswer()[0] != '';
+                if(!answered && Quiz.params.alert_if_no_answer) {
+                    Quiz.common.toggleAlertMessage(answer, error_message, 'error');
+                }
+                return answered;
+            },
+
+
+            displayFeedback: function(feedback) {
+                var correct = feedback.mistakes.length == 0;
+                if((Quiz.params.show_solutions == 'all') || (Quiz.params.show_solutions == 'correct_only' && correct)) {
+                    parent.find('solution').show();
+                }
+
+                answer.removeClass('correct mistake');
+
+                if(correct) {
+                    if(Quiz.params.feedback_on_correct_choices != 'none') {
+                        answer.addClass('correct');
+                    }
+                } else {
+                    if(Quiz.params.feedback_on_wrong_choices != 'none') {
+                        answer.addClass('mistake');
+                        Quiz.common.toggleAlertMessage(
+                            answer,
+                            feedback.messages[0],
+                            'error'
+                        );
+                    }
+                }
+            },
+
+            resetAnswer: function() {
+                input.val('');
+            },
+
+            resetFeedback: function() {
+                answer.removeClass('correct mistake');
+                parent.find('solution').hide();
+                parent.find('.alert-message').remove();
+            },
+
+            answers_order: [0]
+        }
+    }
+
+    Quiz.questionTypes.register('input', textInput);
+
+})();
\ No newline at end of file
diff --git a/pemFioi/quiz2/quiz.js b/pemFioi/quiz2/quiz.js
new file mode 100644
index 000000000..3a70ac01d
--- /dev/null
+++ b/pemFioi/quiz2/quiz.js
@@ -0,0 +1,266 @@
+Quiz = {
+    grader: {}
+}
+
+
+Quiz.common = {
+
+    error: function(msg) {
+        console.error('Quiz error: ' + msg);
+    },
+
+    shuffleArray: function(a) {
+        var j, x, i, r;
+        for(i = a.length - 1; i > 0; i--) {
+            r = 0.5 * (1 + Math.sin(i + Quiz.params.random));
+            j = Math.floor(r * (i + 1));
+            x = a[i];
+            a[i] = a[j];
+            a[j] = x;
+        }
+        return a;
+    },
+
+    shuffleElements: function(elements, shuffle) {
+        var order = [];
+        if(!elements.length) {
+            return order;
+        }
+        for(var i=0; i' +
+            '' + msg +
+            '
');
+        //!msg && el.remove();
+    }
+
+}
+
+
+Quiz.versions = {
+
+    data: {},
+
+    init: function(params) {
+        var self = this;
+        $('question-group').each(function(i, question_set) {
+            question_set = $(question_set);
+            var questions = question_set.find('question');
+            self.data[i] = (i + params.random) % questions.length;
+            questions.each(function(j, question) {
+                if(j == self.data[i]) {
+                    $(question).insertAfter(question_set);
+                } else {
+                    $(question).remove();
+                }
+            });
+            question_set.remove();
+        });
+    },
+
+
+    get: function() {
+        return this.data;
+    }
+
+}
+
+
+
+Quiz.questionTypes = {
+
+    types: {},
+
+    register: function(type, func) {
+        this.types[type] = func;
+    },
+
+    create: function(type, parent, question_idx, params) {
+        if(this.types[type]) {
+            return this.types[type](parent, question_idx, params);
+        } else {
+            Quiz.common.error('Unsupported question type ' + type);
+        }
+    }
+}
+
+
+
+Quiz.UI = function(params) {
+
+    var questions_order = [];
+
+    // prepare params
+    var default_params = {
+        shuffle_questions: false,
+        shuffle_answers: false,
+        feedback_score: "exact", // none | binary | exact
+        feedback_on_wrong_choices: "first_under_question", // none | first_under_question | first_under_choice | selected_only | all
+        feedback_on_correct_choices: "all", //  none | selected_only | all
+        show_solutions: "all", // none | correct_only | all
+        alert_if_no_answer: true // bool
+    }
+    var params = Object.assign(default_params, params);
+    Quiz.params = params;
+    //console.log('Quiz.params', Quiz.params)
+
+    if(!params.parent) {
+        Quiz.common.error('Parent element not specified');
+        return false;
+    }
+
+    // init versions
+    Quiz.versions.init(params);
+
+
+    // questions types
+    function initAnswers(parent) {
+        parent.find('answer').click(function() {
+            $(this).addClass('selected');
+        })
+    }
+
+
+    // init questions
+    var els = params.parent.find('question');
+    var questions = [];
+    els.each(function(i, el) {
+        el = $(el)
+        var type = el.attr('type') || 'single';
+        questions[i] = Quiz.questionTypes.create(type, el, i, params);
+    });
+    questions_order = Quiz.common.shuffleElements(els, params.shuffle_questions);
+
+
+
+
+
+
+
+
+    // replace refs in solution with real answer and qustion numbers/labels
+    function realQuestionNumber(question_idx) {
+        var idx = questions_order.indexOf(question_idx);
+        if(idx > -1) {
+            return idx + 1;
+        } else {
+            console.error("Could not find question index " + question_idx + ".");
+            return '';
+        }
+    }
+
+    function realAnswerNumber(question_idx, answer_idx) {
+        if(questions[question_idx] && questions[question_idx].answers_order) {
+            var idx = questions[question_idx].answers_order.indexOf(question_idx);
+            if(idx !== -1) {
+                return Quiz.common.questionLabel(idx);
+            }
+            console.error("Could not find answer index " + answer_idx + " in question " + question_idx + ".");
+        } else {
+            console.error("Could not find question index " + question_idx + ".");
+        }
+
+        return '';
+    }
+
+    $('#solution').find('ref').each(function() {
+        var el = $(this);
+        var nq = el.attr('question');
+        if(typeof nq === 'undefined') {
+            return;
+        }
+        nq = parseInt(nq, 10) - 1;
+        var na = el.attr('answer');
+        if(typeof na !== 'undefined') {
+            na = parseInt(na, 10) - 1;
+            var text = realAnswerNumber(nq, na);
+        } else {
+            var text = realQuestionNumber(nq);
+        }
+        el.text(text);
+    });
+
+
+
+    // sys
+    function useFullWidth() {
+        // From buttonsAndMessages
+        try {
+            $('#question-iframe', window.parent.document).css('width', '100%');
+        } catch(e) {
+        }
+        $('body').css('width', '100%');
+    }
+    FontsLoader.loadFonts(['fontawesome', 'titillium-web']);
+    useFullWidth();
+    params.parent.show();
+
+
+
+    // interface
+
+    return {
+        getAnswer: function() {
+            var res = [];
+            for(var i=0; i * {
+  padding: 0 60px;
+}
+/* Old alternating colors
+question:nth-child(odd) {
+  background: rgba(74,144,226,0.2);
+}
+*/
+
+question .error-message, .quiz-toolbar .error-message {
+  /*color: #ff001f;*/
+  background-color: #ffe5e8;
+  border-radius: 50px 0 0 50px;
+  padding: 7px 8px 7px 40px;
+  position: relative;
+  /*font-size: 14px;*/
+  margin: 10px 60px;
+}
+question .error-message .icon,
+.quiz-toolbar .error-message .icon {
+  color: #fff;
+  background-color: #ff001f;
+  padding: 5px 6px;
+  border-radius: 50%;
+  font-size: 12px;
+  position: absolute;
+  left: 8px;
+  top: calc(50% - 0.5em - 5px);
+}
+
+question .success-message, .quiz-toolbar .success-message {
+  /*color: #00991f;*/
+  background-color: #e5ffe8;
+  border-radius: 50px 0 0 50px;
+  padding: 7px 8px 7px 40px;
+  position: relative;
+  /*font-size: 14px;*/
+  margin: 10px 60px;
+}
+question .success-message .icon,
+.quiz-toolbar .success-message .icon {
+  color: #fff;
+  background-color: #00991f;
+  padding: 5px 6px;
+  border-radius: 50%;
+  font-size: 12px;
+  position: absolute;
+  left: 8px;
+  top: calc(50% - 0.5em - 5px);
+}
+
+answer .alert-message {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+question::after {
+  content: '';
+  position: relative;
+  display: block;
+  width: 90vw;
+  height: 1px;
+  left: 5vw;
+  background-color: #4a90e2;
+  margin: 24px 0px;
+  clear: both;
+}
+
+statement {
+  color: #4a90e2;
+  font-size: 22px;
+  margin-bottom: 20px;
+  font-weight: bold;
+  display: block;
+}
+statement p {
+  margin: 0;
+  font-weight: normal;
+}
+statement p:first-child {
+  /* because we get 
 wraps here by taskeditor tinymce */
+  display: inline;
+}
+statement::before {
+  counter-increment: questions-counter;
+  content: counter(questions-counter);
+  color: #fff;
+  font-weight: normal;
+  font-size: 18px;
+  background-color: #4a90e2;
+  border-radius: 50%;
+  width: 30px;
+  line-height: 30px;
+  text-align: center;
+  display: inline-block;
+  margin-right: 15px;
+}
+
+
+/*
+*
+* QUESTION DEFAULT LAYOUT: TYPE SINGLE ANSWERS
+*
+*/
+
+answer {
+  display: block;
+  border-top: 1px solid;
+  border-color: #e1e1e1;
+  padding: 5px 0;
+}
+answer p {
+  margin: 0;
+}
+answer p:first-child {
+  display: inline;
+}
+/*question:nth-child(odd) answer {
+  border-color: #d2d2d2;
+}*/
+answer:first-child {
+  border-top: none;
+}
+answer .answer-block {
+  display: flex;
+  margin-left: -15px;
+  padding-left: 15px;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  transition: all linear 50ms;
+  justify-content: space-between;
+}
+answer.selected .answer-block {
+  color: #4a90e2;
+  border-color: #4a90e2;
+}
+answer .answer-label {
+  line-height: 1.5em;
+  transition: all linear 50ms;
+}
+answer.selected .answer-label {
+  font-weight: bold;
+}
+answer .answer-code {
+  border: 1px solid #4a90e2;
+  border-radius: 20px;
+  text-align: center;
+  position: relative;
+  color: #4a90e2;
+  font-weight: bold;
+  cursor: pointer;
+  flex: 0 1 120px;
+  align-self: center;
+  transition: all linear 50ms;
+}
+answer.selected .answer-code {
+  color: #fff;
+  background-color: #4a90e2;
+}
+answer .answer-code::before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  left: 15px;
+  top: 7px;
+  top: calc(50% - 0.5em);
+}
+answer.selected .answer-code::before {
+  content: "\f00c";
+}
+/*
+*
+* QUESTION HORIZONTAL LAYOUT: TYPE SINGLE ANSWERS
+*
+*/
+question.horizontal .answers {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 -20px;
+}
+question.horizontal answer {
+  border-top: none;
+  flex: 1 0 0;
+  padding: 0 20px;
+  border-left: 1px solid;
+}
+question.horizontal answer:first-child {
+  border-left: none;
+}
+question.horizontal answer .answer-block {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-left: 0;
+  padding-left: 0;
+}
+question.horizontal answer .answer-label,
+question.horizontal answer .answer-code {
+}
+question.horizontal answer .answer-label {
+  text-align: center;
+  padding: 1em 10px;
+}
+question.horizontal answer .answer-code {
+  flex: 0 0 0;
+  align-self: stretch;
+  margin: 0 -1px -1px;
+  padding: 2px 10px;
+}
+
+/*
+*
+* SWITCH CHECKBOX
+*
+*/
+.answer-switch {
+  display: inline-block;
+  background: rgba(0,0,0,0.05);
+  border-radius: 20px;
+  box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.05);
+  height: 26px;
+  width: 100px;
+  position: relative;
+  right: 0;
+  cursor: pointer;
+  align-self: center;
+  box-shadow: 0 1px 0 0 #727273 inset;
+  flex: 0 0 auto;
+}
+.answer-switch::before,
+.answer-switch::after {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  top: 7px;
+  top: calc(50% - 0.5em);
+  color: #9B9B9B;
+}
+.answer-switch::before {
+  content: "\f00d";
+  right: auto;
+  left: 20px;
+}
+.answer-switch::after {
+  content: "\f00c";
+  right: 20px;
+  left: auto;
+}
+.answer-switch .cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 26px;
+  width: 55px;
+  border-radius: 20px;
+  background-color: #9B9B9B;
+  transition: all 250ms;
+  z-index: 1;
+}
+answer.selected .answer-switch .cursor {
+  background-color: #4a90e2;
+  left: 45px;
+}
+.answer-switch .cursor::before {
+  content: "\f00d";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  top: 7px;
+  top: calc(50% - 0.5em);
+  left: 20px;
+  color: #fff;
+}
+answer.selected .answer-switch .cursor::before {
+  content: "\f00c";
+  right: auto;
+  left: 20px;
+}
+
+question.horizontal .answer-switch {
+  align-self: center;
+}
+
+/*
+*
+* QUESTION DEFAULT LAYOUT: TYPE INPUT ANSWERS
+*
+*/
+input[type=text] {
+  font-size: 12px;
+  background: #f8f8f8;
+  border: 1px solid #e1e1e1;
+  border-radius: 5px;
+  padding: 6px 12px;
+  width: 100%;
+  color: #555555;
+  font-size: 16px;
+}
+input[type=text]:focus {
+  box-shadow: 0 1px 3px #333 inset;
+}
+::placeholder,
+:placeholder-shown {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+
+/*
+*
+* SOLUTION DISPLAY
+*
+*/
+solution {
+  display: none;
+  border-top: 1px solid #e1e1e1;
+  margin-top: 30px;
+}
+#solution, .solution {
+  display: none;
+}
+.displaySolution solution, .displaySolution .solution, .displaySolution #solution {
+  display: block;
+}
+/*question:nth-child(odd) solution {
+  border-color: #d2d2d2;
+}*/
+.displayFeedback answer.correct:not(.selected) .answer-block {
+  border-color: transparent;
+}
+.displayFeedback answer.correct:not(.selected) .answer-code::before {
+  color: #4a90e2;
+}
+.displayFeedback answer.correct .answer-block {
+  font-weight: bold;
+}
+.displayFeedback answer.correct .answer-code::before {
+  content: "\f0a5";
+}
+.displayFeedback .horizontal answer.correct .answer-code::before {
+  content: "\f0a6";
+}
+.displayFeedback answer.mistake .answer-block {
+  color: #797979;
+  border-color: #ff001f;
+}
+.displayFeedback answer.mistake .answer-code {
+  background-color: #ff001f;
+  border-color: #ff001f;
+}
+.displayFeedback answer.mistake .answer-code::before {
+  content: "\f00d";
+}
+.displayFeedback answer.mistake input[type=text] {
+  border-color: #ff001f;
+  border-width: 2px;
+}
+
+.displayFeedback answer.correct input[type=text] {
+  border-color: #00aa1f;
+  border-width: 2px;
+}
+.displayFeedback answer.correct .answer-block {
+  color: #797979;
+  border-color: #00aa1f;
+}
+.displayFeedback answer.correct .answer-code {
+  background-color: #00aa1f;
+  border-color: #00aa1f;
+}
+
+/*
+*
+* SCORE
+*
+*/
+#score {
+  border-top: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
+  margin-top: 2em;
+  font-size: 26px;
+  padding: 14px 0;
+  color: #4a90e2;
+  display: flex;
+}
+#score .scoreLabel {
+  flex-grow: 1;
+}
+#score .max-value {
+  color: #9b9b9b;
+}
+/*
+*
+* INTERFACE CONTROLS
+*
+*/
+
+#displayHelper_saved {
+  border-top: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
+  padding: 10px 0;
+  font-size: 1rem;
+}
+#displayHelper_validate,
+#displayHelper_cancel {
+  display: inline-block;
+  width: 50%;
+}
+#displayHelper_validate {
+  padding-right: 20px;
+}
+#displayHelper_cancel {
+  padding-left: 20px;
+}
+input[type=button],
+button,
+.btn {
+  border-radius: 50px;
+  color: #fff;
+  border: none;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  padding: 7px 20px;
+}
+#displayHelper_validate input[type=button],
+#displayHelper_cancel input[type=button] {
+  margin: 0;
+  width: 100%;
+}
+#displayHelper_validate input[type=button] {
+  background-color: #4a90e2;
+}
+#displayHelper_cancel input[type=button],
+#showSolutionButton .btn {
+  background-color: #9b9b9b;
+}
+.btn:hover {
+  color: #fff;
+}
+
+
+
+#popupMessage.floatingMessage {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: gray;
+  background: rgba(241, 242, 247, .9);
+}
+#popupMessage.floatingMessage .container {
+  min-height: 100px;
+  width: 94%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+  color:#787878;
+  background: #fff;
+  border: none;
+  border-radius: 5px;
+  top: 50%;
+  transform: translate(0,-50%);
+}
+#popupMessage.floatingMessage .container img {
+  display: none;
+}
+#popupMessage .message {
+  font-size: 1em;
+  margin: 60px;
+  border: 0;
+  font-weight: normal;
+  padding: 0;
+  max-width: none;
+}
+#popupMessage p {
+  margin: .5em 0 0;
+}
+#popupMessage p:first-child {
+  margin-top: 0;
+}
+#popupMessage .buttonsWrapper {
+  margin: 2em auto 0;
+  text-align: center;
+}
+#popupMessage button {
+  margin: 0 auto;
+  background-color: #4a90e2;
+}
+#popupMessage button.buttonYes::before {
+  content: "\f00c";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  margin-right: 10px;
+}
+
+
+.btn {
+  cursor: pointer;
+  background-color: #4a90e2;
+}
+
+
+.quiz-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+}
+
+.quiz-popup .opacity-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: #000;
+  opacity: 0.3;
+  z-index: 1;
+}
+
+.quiz-popup .inner {
+  position: relative;
+  z-index: 2;
+  top: 50%;
+  text-align: center;
+}
+
+.quiz-popup .content {
+  background: #fff;
+  border-radius: 10px;
+  padding: 40px;
+  display: inline-block;
+}
+
+.quiz-popup .content .btn {
+  margin: 0 10px;
+}
+
+
+.quiz-toolbar {
+  margin: 40px auto;
+  text-align: center;
+}
+
+.quiz-toolbar .btn {
+  margin: 0 10px;
+}
+
+
+.taskContent {
+  position: relative;
+}
+
+#task .freeze-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background:transparent;
+  z-index: 1;
+}
+
+
+.fill-gaps-toolbar .word {
+  display: inline-block;
+  border: 1px solid #4a90e2;
+  border-radius: 5px;
+  background-color: white;
+  text-align: center;
+  cursor: move;
+  padding: 4px 20px;
+  margin-right: 10px;
+  margin-bottom: 4px;
+}
+
+
+.fill-gaps-text {
+  font-size: 20px;
+}
+
+.fill-gaps-text .word {
+  border: 1px solid #4a90e2;
+  border-radius: 5px;
+  background-color: white;
+  text-align: center;
+  cursor: move;
+  padding: 4px 20px;
+}
+
+.fill-gaps-text .placeholder {
+  display: inline-block;
+  border-radius: 5px;
+  background: #AAA;
+  min-width: 60px;
+  padding: 5px 0px;
+  color : #4a90e2;
+  font-weight: bold;
+}
+
+.fill-gaps-text .placeholder-hover {
+  border: 1px solid #4a90e2;
+  background: #FFF;
+  padding: 4px 0px;
+}
+
+.fill-gaps-text .placeholder:empty:before {
+  content: "\00a0";
+}
+
+
+.fill-gaps-text .correct span {
+  color: #00aa1f;;
+  border-color: #00aa1f;;
+}
+
+.fill-gaps-text .mistake span {
+  color: #ff001f;
+  border-color: #ff001f;
+}
diff --git a/pemFioi/quiz2/readme.txt b/pemFioi/quiz2/readme.txt
new file mode 100644
index 000000000..4a01025d5
--- /dev/null
+++ b/pemFioi/quiz2/readme.txt
@@ -0,0 +1,31 @@
+Grader data format
+
+1. Function
+a) may return number or boolean
+function(answer) {
+    return .. // boolean value
+}
+b) may return object:
+function(answer) {
+    return {
+        score: .. // number or boolean ( true will add 1 to nb_valid  )
+        message: .. // string (optional)
+    }
+}
+
+
+2. Array
+must be array of correct answers
+
+
+3. Object
+{
+    strict: boolean,
+    value: .. // string or number value or array of values
+    messages: .. // array of messages
+}
+if strict option is true then value and answer arrays must contain same items in same order
+
+
+4. Scalar value
+value will be compared with answer
\ No newline at end of file
diff --git a/pemFioi/quiz2/task.js b/pemFioi/quiz2/task.js
new file mode 100644
index 000000000..204394299
--- /dev/null
+++ b/pemFioi/quiz2/task.js
@@ -0,0 +1,501 @@
+(function() {
+
+    window.lang = {
+
+        default_language: 'en',
+        language: 'en',
+        language_set: false,
+
+        strings: {
+            en: {
+                'score': 'Score',
+                'grader_msg': 'Your score is ',
+                'wrong_answer_msg': 'You have at least one mistake.',
+                'wrong_answer_msg_partial_feedback': 'You have at least one mistake. Here is a hint:',
+                'wrong_answer_msg_not_answered': 'You didn\'t answer this question',
+                'wrong_fill_gaps_msg': 'You have %% incorrect answers for this question, highlighted in red.',
+                'validate': 'Submit',
+                'solution': 'Show answer',
+                'restart': 'Restart',
+                'restart_scratch': 'Restart from scratch',
+                'restart_current': 'Restart from current answer',
+                'return_to_top': 'Return to the list of questions',
+                'placeholder_text': 'Enter text',
+                'placeholder_number': 'Enter number',
+                'error_number': 'Must be a number',
+                'placeholder_string': 'Enter string',
+                'error_string': 'Must be a string',
+                'placeholder_regexp': 'Enter text',
+                'error_regexp': 'Invalid format',
+                'error_grading': 'There was an error while submitting this answer, please try again in a few minutes.',
+                'feedback_score_binary_correct': 'Congratulations, everything is correct',
+                'feedback_score_binary_mistake': 'There is at least one mistake'
+            },
+            fr: {
+                'score': 'Score',
+                'grader_msg': 'Votre score est ',
+                'wrong_answer_msg': 'Vous avez au moins une erreur.',
+                'wrong_answer_msg_partial_feedback': 'Vous avez au moins une erreur. Voici un indice :',
+                'wrong_answer_msg_not_answered': 'Vous n\'avez pas répondu à cette question',
+                'wrong_fill_gaps_msg': 'You have %% incorrect answers for this question, highlighted in red.',
+                'validate': 'Valider',
+                'solution': 'Voir la réponse',
+                'restart': 'Recommencer',
+                'restart_scratch': 'Recommencer au début',
+                'restart_current': 'Modifier ma réponse',
+                'return_to_top': 'Retour à la liste des questions',
+                'cancel' : 'Annuler',
+                'placeholder_text': 'Entrez du texte',
+                'placeholder_number': 'Entrez un nombre',
+                'error_number': 'Vous devez entrer un nombre.',
+                'placeholder_string': 'Entrez une chaîne de caractères',
+                'error_string': 'Vous devez entrer une chaïne de caractères',
+                'placeholder_regexp': 'Entrez du texte.',
+                'error_regexp': 'Format invalide',
+                'error_grading': 'Erreur lors de la soumission, veuillez réessayer dans quelques minutes.',
+                'feedback_score_binary_correct': 'Congratulations, everything is correct',
+                'feedback_score_binary_mistake': 'There is at least one mistake'
+            },
+        },
+
+        set: function(lng) {
+            if(!lng) {
+                lng = window.stringsLanguage;
+            }
+            this.language = lng;
+            this.language_set = true;
+        },
+
+        translate: function() {
+            if(!this.language_set) {
+                this.set();
+            }
+            var str = '', key = arguments[0];
+            if(this.strings[this.language] && this.strings[this.language][key]) {
+                str = this.strings[this.language][key];
+            } else {
+                str = this.strings[this.default_language][key] || key;
+            }
+            return str.replace('%%', arguments[1]);
+        }
+    }
+
+
+    var task_toolbar = {
+
+        buttons: {},
+        holder: false,
+        popup: false,
+
+        addButton: function(parent, name, callback) {
+            var btn = $('');
+            btn.on('click', callback);
+            parent.append(btn);
+            this.buttons[name] = btn;
+        },
+
+
+        restartTask: function(from_scratch) {
+            this.setValidated(false);
+            this.popup.hide();
+            this.unfreezeTask();
+            window.quiz_ui.toggleFeedback(false);
+            task.showViews({"task": true, "solution": false}, function(){});
+            window.quiz_ui.reset(from_scratch);
+        },
+
+        showPopup: function() {
+            if(!this.popup) {
+                this.popup = $(
+                    '
\
+                        
\
+                        
\
+                    
'
+                );
+                $(document.body).append(this.popup);
+                var el = this.popup.find('.content');
+                var self = this;
+                this.addButton(el, 'restart_scratch', function() {
+                    self.restartTask(true);
+                });
+                this.addButton(el, 'restart_current', function() {
+                    self.restartTask();
+                });
+                this.addButton(el, 'cancel', function() {
+                    self.popup.hide();
+                });
+            }
+            this.popup.show();
+        },
+
+
+        freezeTask: function() {
+            if(!this.freezer) {
+                this.freezer = $('
')
+                $('.taskContent').append(this.freezer);
+            }
+            this.freezer.show();
+        },
+
+
+        unfreezeTask: function() {
+            this.freezer && this.freezer.hide();
+        },
+
+
+        setValidated: function(validated) {
+            if(validated) {
+                this.buttons.validate.hide();
+                this.buttons.solution && this.buttons.solution.show();
+            } else {
+                this.buttons.validate.show();
+                this.buttons.solution && this.buttons.solution.hide();
+            }
+        },
+
+
+        displayError: function(error) {
+            if(!this.errorHolder) {
+                this.errorHolder = $('
');
+                this.holder.append('
');
+                this.holder.append(this.errorHolder);
+            }
+            this.errorHolder.html(' ' + error);
+            this.errorHolder.toggle(!!error);
+        },
+
+
+        init: function() {
+            if(this.holder) return;
+            $('#showSolutionButton').remove();
+            this.holder = $('
');
+            var self = this;
+            this.addButton(this.holder, 'validate', function() {
+                platform.validate('done');
+                self.freezeTask();
+                self.setValidated(true);
+            });
+            var hasSolution = false;
+            $('solution, .solution, #solution').each(function() {
+               if($(this).text().trim() != '') { hasSolution = true; }
+            });
+            if(hasSolution) {
+                this.addButton(this.holder, 'solution', function() {
+                    miniPlatformShowSolution();
+                });
+                this.buttons.solution.hide();
+            }
+            if(!quiz_settings.hide_restart) {
+                this.addButton(this.holder, 'restart', function() {
+                    self.showPopup();
+                });
+            }
+            if(quiz_settings.display_return_to_top) {
+                this.holder.append('

');
+                this.addButton(this.holder, 'return_to_top', function() {
+                    platform.validate('top');
+                });
+            }
+            this.holder.insertAfter($('.taskContent'));
+        }
+
+    }
+
+
+    var task_token = {
+
+        token: null,
+
+        init: function() {
+            var query = document.location.search.replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
+            this.token = query.sToken || '';
+        },
+
+        get: function() {
+            return this.token
+        },
+
+        update: function(token) {
+            this.token = token
+        },
+
+        getAnswerToken: function(answer) {
+            return null;
+        }
+    }
+
+
+
+    window.task = {}
+
+    task.getViews = function(success, error) {
+        var views = {
+            task: {}
+        };
+        success(views);
+    };
+
+    task.updateToken = function(token, success, error) {
+        task_token.update(token)
+        success();
+    };
+
+    task.getHeight = function(success, error) {
+        var d = document;
+        var h = Math.max(d.body.offsetHeight, d.documentElement.offsetHeight);
+        success(h);
+    };
+
+    task.getMetaData = function(success, error) {
+        if (typeof json !== 'undefined') {
+            success(json);
+        } else {
+            success({nbHints: 0});
+        }
+    };
+
+    task.reloadState = function(state, success, error) { success() }
+    task.getState = function(success, error) { success("{}")  }
+    task.reloadStateObject = function(obj) { }
+    task.getStateObject = function() { return {} }
+    task.getDefaultStateObject = function() { return {} }
+
+
+    $('.grader').hide();
+
+
+    // grade
+
+    function useGraderData(answer, versions, score_settings, callback) {
+        if(window.Quiz.grader.handler && window.Quiz.grader.data) {
+            var res = window.Quiz.grader.handler(window.Quiz.grader.data, answer, versions, score_settings);
+            return callback(res);
+        }
+        console.error('Local Quiz grader not found');
+        if(errorcb) { errorcb(); }
+    }
+
+
+    function useGraderUrl(url, task_token, answer, versions, score_settings, callback, errorcb) {
+        var data = {
+            action: 'grade2', //
+            task: task_token,
+            answer: answer,
+            versions: versions,
+            score_settings: score_settings
+        }
+        $.ajax({
+            type: 'POST',
+            url: url,
+            data: JSON.stringify(data),
+            crossDomain: true,
+            contentType: 'application/json'
+        }).done(function(res) {
+            if(res.success) {
+                return callback(res.data);
+            }
+            console.error('Grader response error: ', res);
+            if(errorcb) { errorcb(); }
+        }).fail(function(jqxhr, settings, exception ) {
+            console.error('Grader url not responding: ' + url);
+            if(errorcb) { errorcb(); }
+        });
+    }
+
+
+
+
+
+    task.load = function(views, success) {
+        var lastViews = views;
+        task_token.init()
+
+        platform.getTaskParams(null, null, function(taskParams) {
+            var params = Object.assign(quiz_settings, {
+                random: parseInt(taskParams.randomSeed, 10) || Math.floor(Math.random() * 100), //0
+                parent: $('#task')
+            })
+            var q = Quiz.UI(params);
+            window.quiz_ui = q;
+
+            task.showViews = function(views, callback) {
+                lastViews = views;
+                q.toggleSolutions(!!views.solution);
+                callback();
+            }
+
+            task.getDefaultAnswerObject = function() {
+                return {
+                    data: [],
+                    versions: {}
+                }
+            }            
+
+            task.getAnswer = function(callback) {
+                var answer = this.getAnswerObject();
+                answer = JSON.stringify(answer);
+                //console.log('task.getAnswer', answer)
+                callback(answer);
+            };
+
+            task.getAnswerObject = function() {
+                var answerObj = {
+                    data: q.getAnswer(),
+                    versions: Quiz.versions.get()
+                }
+                //console.log('task.getAnswerObject', answerObj)
+                return answerObj;
+            };            
+
+
+            task.reloadAnswer = function(answer, callback) {
+                try {
+                    //console.log('task.reloadAnswer', answer)
+                    var answerObject = JSON.parse(answer);
+                    this.reloadAnswerObject(answerObject);
+                    if(lastViews.solution) {
+                        task.gradeAnswer(answer, null, function () {});
+                    }
+                } catch(e) {
+                    console.error('Quiz: answer parsing error.')
+                }
+                callback();
+            };
+
+
+            task.reloadAnswerObject = function(answerObj) {
+                var new_format = answerObj !== null && typeof answerObj === 'object' && 'data' in answerObj;
+                q.setAnswer(new_format ? answerObj.data : answerObj);
+            }
+
+
+
+            function displayScore(score, max_score) {
+                if(Quiz.params.feedback_score == 'binary') {
+                    var msg = '';
+                    if(score == max_score) {
+                        msg += lang.translate('feedback_score_binary_correct');
+                    } else {
+                        msg += lang.translate('feedback_score_binary_mistake');
+                    }
+                    msg += '';
+                } else if(Quiz.params.feedback_score == 'exact') {
+                    var msg =
+                        '' + lang.translate('score') + '' +
+                        '' + score + '' +
+                        '/' + max_score + '';
+                } else {
+                    return;
+                }
+                if($('#score').length == 0) {
+                    var div = '
';
+                    $('.taskContent').first().append(div);
+                }
+                $('#score').html(msg);
+            }
+
+
+            function displayMessages(messages) {
+                if($('#grader-messages').length == 0) {
+                    var div = '
';
+                    $('.taskContent').first().append(div);
+                }
+                $('#grader-messages').html(messages.join('
'));
+            }
+
+
+            task.gradeAnswer = function(answer, answer_token, callback) {
+                answer = JSON.parse(answer);
+                var new_format = answer !== null && typeof answer === 'object' && 'data' in answer;
+                function onGrade(result) {
+                    q.displayFeedback(result.feedback);
+                    displayScore(result.score, taskParams.maxScore);
+                    //displayMessages(result.messages);
+                    callback(result.score, lang.translate('grader_msg') + result.score, null);
+                }
+                function onError(result) {
+                    task_toolbar.displayError(lang.translate('error_grading'));
+                }
+                var scoreSettings = {
+                    maxScore: taskParams.maxScore,
+                    minScore: taskParams.minScore,
+                    noScore: taskParams.noScore
+                };
+                var token = task_token.get()
+                if(token) {
+                    useGraderUrl(
+                        quiz_settings.graderUrl,
+                        token,
+                        new_format ? answer.data : answer,
+                        new_format ? answer.versions : Quiz.versions.get(),
+                        scoreSettings,
+                        onGrade,
+                        onError
+                    );
+                } else {
+                    useGraderData(
+                        new_format ? answer.data : answer,
+                        new_format ? answer.versions : Quiz.versions.get(),
+                        scoreSettings,
+                        onGrade,
+                        onError
+                    );
+                }
+            };
+
+            success();
+        });
+    };
+
+    var grader = {
+        gradeTask: task.gradeAnswer
+    };
+
+    $(function() {
+        if(!window.quiz_settings) { window.quiz_settings = {}; }
+        if(window.platform) {
+            platform.initWithTask(task);
+            task_toolbar.init();
+        }
+    })
+
+    window.taskGetResourcesPost = function(res, callback) {
+        // Add grader_data, if available, to the javascript
+        try {
+            $.get('grader_data.js').success(function(data) {
+                res.task.push({type: 'javascript', id: 'grader_data', content: data});
+                callback(res);
+            }).error(function() {
+                callback(res);
+            });
+        } catch(e) {
+            callback(res);
+        }
+    };
+
+
+
+
+// dev code for quiz2 testing, remove it later
+/*
+    $(document).ready(function() {
+
+        var answer = '[[1],[1,2],["test"],["ipsum","amet"]]';
+        task.reloadAnswer(answer, function() {
+            task.gradeAnswer(answer, '', function(res) {
+                //alert(res)
+            })
+        })
+
+        var btn = $('')
+        btn.click(function() {
+            task.getAnswer(function(res) {
+                alert(res)
+            })
+        })
+        $(document.body).prepend(btn);
+    })
+*/
+
+
+})();
diff --git a/pemFioi/quiz2/todo.txt b/pemFioi/quiz2/todo.txt
new file mode 100644
index 000000000..861a66815
--- /dev/null
+++ b/pemFioi/quiz2/todo.txt
@@ -0,0 +1,21 @@
++ feedback_score: none / binary / exact
+    Indicates what we display about the score at the very bottom:
+    - none: we display a message "Your answers will be graded later".
+    - binary: if score is 100%, display "Congratulations, everything is correct", otherwise "There is at least one mistake"
+    - exact: we display the exact score
+* feedback_on_wrong_choices: none / first_under_question / first_under_choice / selected_only / all
+    Display in red the feedback sent for some choices by the server (if there is some), under these choices:
+    - first_under_question:  for multiple choice questions and fill in the gaps, the first incorrect answer. Display it not under the choice, but under the whole question
+    - first_under_choice:  same as above, but for multiple choice questions, it's displayed under the incorrect choice
+    - selected_only: for multiple choice questions : each incorrect choice that is selected by the user. For fill in the gaps: each incorrect answer.
+    - all: every incorrect choice
+* feedback_on_correct_choices: none / selected_only / all
+    Display in green, the feedback sent for some choices by the server, if there is some, under these choices:
+    - selected_only: for multiple choice questions: each correct choice that is selected by the user. For fill in the gaps: each correct filled gap.
+    - all: each correct choice or correct filled gap
++ show_solutions: none / correct_only / all
+    Display the solution under each question in these cases:
+    - correct_only: only if the answer was correct
+    - all: under all questions
++ alert_if_no_answer: false / true
+    Display an alert under every question for which the user didn't provide any answer
diff --git a/pemFioi/raphaelButton-1.0.js b/pemFioi/raphaelButton-1.0.js
index b717a0a7a..50aa3942c 100644
--- a/pemFioi/raphaelButton-1.0.js
+++ b/pemFioi/raphaelButton-1.0.js
@@ -49,6 +49,7 @@ function ElementModer(defaultMode) {
 // LATER: should be allowed to customize the font in the button.
 
 var _BUTTON_GUID = 0;
+var currentEnabledButton = null;
 
 function Button(paper, xPos, yPos, width, height, text, repeat, initialDelay, stepDelay, delayFactory) {
    var self = this;
@@ -96,9 +97,40 @@ function Button(paper, xPos, yPos, width, height, text, repeat, initialDelay, st
       this.mouseover = false;
       this.mousedown = false;
 
+      var touchstart = function() {
+         self.touchInProgress = true;
+         self.lastTouchTime = new Date().getTime();
+         handleMouseDown();
+      }
+
       var mousedown = function() {
+         if (self.touchInProgress) {
+            return;
+         }
+         if (self.lastTouchTime != null) {
+            var timeSinceTouch = new Date().getTime() - self.lastTouchTime;
+            if (timeSinceTouch < 2000) {
+               return;
+            }
+         }
+         handleMouseDown();
+      }
+      
+      var handleMouseDown = function() {
+         if (self.lastMousedownTime != null) {
+            var timeSinceDown = new Date().getTime() - self.lastMousedownTime;
+            if (timeSinceDown < 100) {
+               return;
+            }
+         }
+         self.lastMousedownTime = new Date().getTime();
+         if(self.mousedown){
+            return
+         }
          if(self.enabled) {
             self.mousedown = true;
+            self.mouseover = true;
+            currentEnabledButton = self.guid;
             self.moder.setMode("mousedown");
             if(repeat) {
                self._startRepeater();
@@ -115,11 +147,20 @@ function Button(paper, xPos, yPos, width, height, text, repeat, initialDelay, st
          }
       };
 
+      var touchend = function() {
+         self.touchInProgress = false;
+         self.lastTouchTime = new Date().getTime();
+         mouseup();
+      }
+
       var mouseup = function() {
+         if (self.guid !== currentEnabledButton) {
+            return;
+         }
+         self.touchInProgress = false;
          if(self.enabled) {
-
             // If we received a mousedown event previously, and now the mouse is up
-            // and the mouse is not over the button, then this was a drag attempt.
+            // and the mouse is not over the button, then this was a drag attempt.            
             if(self.mousedown && !self.mouseover) {
                if(self.dragAttemptHandler) {
                   self.dragAttemptHandler(self.dragAttemptData);
@@ -146,10 +187,16 @@ function Button(paper, xPos, yPos, width, height, text, repeat, initialDelay, st
       };
 
       this.elements.transLayer.click(click);
+      this.lastTouchTime = null;
+      this.touchInProgress = false;
+      this.lastMousedownTime = null;
+      this.elements.transLayer.touchstart(touchstart);
       this.elements.transLayer.mousedown(mousedown);
       this.elements.transLayer.mouseover(mouseover);
       this.elements.transLayer.mouseout(mouseout);
-      $(document).bind("mouseup.BUTTON_" + this.guid, mouseup);
+      this.elements.transLayer.mouseup(mouseup);
+      this.elements.transLayer.touchend(touchend);
+      $(document).bind("mouseup", mouseup);
       this.moder.setMode("enabled");
    };
 
@@ -229,10 +276,87 @@ function Button(paper, xPos, yPos, width, height, text, repeat, initialDelay, st
    };
 
    this.remove = function() {
-      $(document).unbind(".BUTTON_" + this.guid);
       this.disable();
       this.applyFunction("remove");
    };
 
+   this.toFront = function() {
+      this.elements.shadow.toFront();
+      this.elements.rect.toFront();
+      for(var iElement in this.elements) {
+         if(iElement != "shadow" && iElement != "rect"){
+            var element = this.elements[iElement];
+            element.toFront();
+         }
+      }
+      this.elements.transLayer.toFront();
+   };
+
    this.init();
 }
+
+function Keyboard(data) {
+   this.paper = data.paper;
+   this.keys = data.keys;
+   this.nRows = data.nRows;
+   this.nCol = data.nCol;
+   this.keyFiller = data.keyFiller;
+   this.xPos = data.xPos;
+   this.yPos = data.yPos;
+   this.keyWidth = data.keyWidth;
+   this.keyHeight = data.keyHeight;
+   this.marginX = data.marginX;
+   this.marginY = data.marginY;
+   this.shiftOddRows = data.shiftOddRows;
+   this.shiftEvenRows = data.shiftEvenRows;
+   this.repeat = data.repeat;
+   this.initialDelay = data.initialDelay;
+   this.stepDelay = data.stepDelay;
+   this.delayFactory = data.delayFactory;
+   this.attr = data.attr;
+   
+   this.keyboard = [];
+
+   for(var iRow = 0; iRow < this.nRows; iRow++){
+      // this.keyboard[iRow] = [];
+      for(var iCol = 0; iCol < this.nCol; iCol++){
+         var x = this.xPos + iCol * (this.keyWidth + this.marginX);
+         var y = this.yPos + iRow * (this.keyHeight + this.marginY);
+         if (this.shiftOddRows && (iRow % 2 == 1)) {
+            x += (this.keyWidth + this.marginX) / 2;
+         }
+         if (this.shiftEvenRows && (iRow % 2 == 0)) {
+            x += (this.keyWidth + this.marginX) / 2;
+         }
+         var keyIndex = iCol + iRow * this.nCol;
+         if (this.keys[keyIndex] != null) {
+            var specialKey = (this.keyFiller) ? this.keyFiller(keyIndex,x,y) : null;
+            if(!specialKey){ 
+               var text = this.keys[keyIndex];
+               this.keyboard[keyIndex] = new Button(this.paper,x,y,this.keyWidth,this.keyHeight,text,this.repeat, this.initialDelay, this.stepDelay, this.delayFactory);
+               if(this.attr){
+                  for(var iAttr = 0; iAttr < this.attr.length; iAttr++){
+                     var attr = this.attr[iAttr];
+                     var name = attr.name;
+                     var mode = attr.mode;
+                     this.keyboard[keyIndex].setAttr(name,mode,attr.attr);
+                  }
+               }
+            }else{
+               this.keyboard[keyIndex] = specialKey;
+            }
+         }
+      }
+   }
+   
+   this.remove = function() {
+      for(var iRow = 0; iRow < this.nRows; iRow++){
+         for(var iCol = 0; iCol < this.nCol; iCol++){
+            var keyIndex = iCol + iRow * this.nCol;
+            if (this.keys[keyIndex] != null) {
+               this.keyboard[keyIndex].remove();
+            }
+         }
+      }
+   }
+}
diff --git a/pemFioi/raphaelFactory-1.0.js b/pemFioi/raphaelFactory-1.0.js
index e49ca5209..fad7e3254 100644
--- a/pemFioi/raphaelFactory-1.0.js
+++ b/pemFioi/raphaelFactory-1.0.js
@@ -1,6 +1,15 @@
 function RaphaelFactory() {
    this.items = {};
+
+   // animations contains the actual animations, indexed with semi-random IDs
+   // animationNames contains the mapping between the "public" animation names
+   // and those IDs
+   // This is done so that we don't lose animation pointers if a name is
+   // reused, and can still destroy them through destroyAll
    this.animations = {};
+   this.animationNames = {};
+
+   this.debug = false;
    
    this.create = function(id, elementID, width, height) {
       if(this.items[id] !== null && this.items[id] !== undefined) {
@@ -18,19 +27,50 @@ function RaphaelFactory() {
    this.get = function(id) {
       return this.items[id];
    };
-   
+
+   this.getAnimation = function(name) {
+      if(this.animationNames[name]) {
+         return this.animations[this.animationNames[name]];
+      }
+   };
+
    this.animate = function(name, object, params, time) {
-      this.animations[name] = object;
+      if(this.debug && this.animationNames[name] && this.animations[this.animationNames[name]]) {
+         console.log("RaphaelFactory: animation " + name + " already exists");
+      }
+      var animName = '' + name + Math.random();
+      this.animations[animName] = object;
+      this.animationNames[name] = animName;
       var self = this;
       object.animate(params, time, function() {
-         delete self.animations[name];
+         delete self.animations[animName];
       });
    };
 
+   this.pauseAnimate = function(name) {
+      var anim = this.getAnimation(name);
+      if (anim) {
+         anim.pause();
+      }
+   };
+
+    this.resumeAnimate = function(name) {
+      var anim = this.getAnimation(name);
+      if (anim) {
+         anim.resume();
+      }
+   };
+   
    this.stopAnimate = function(name) {
-      if (this.animations[name]) {
-         this.animations[name].stop();
-         delete this.animations[name];
+      if(this.animationNames[name]) {
+         this.stopAnimateID(this.animationNames[name]);
+      }
+   };
+
+   this.stopAnimateID = function(animID) {
+      if (this.animations[animID]) {
+         this.animations[animID].stop();
+         delete this.animations[animID];
       }
    };
 
@@ -55,8 +95,8 @@ function RaphaelFactory() {
          this.stop(id);
       }
       for(var animID in this.animations) {
-         this.stopAnimate(animID);
+         this.stopAnimateID(animID);
       }
       this.items = {};
    };
-}
\ No newline at end of file
+}
diff --git a/pemFioi/responseCurve-1.1.js b/pemFioi/responseCurve-1.1.js
new file mode 100644
index 000000000..ed4497ab6
--- /dev/null
+++ b/pemFioi/responseCurve-1.1.js
@@ -0,0 +1,370 @@
+function ResponseCurve(settings) {
+   self = this;
+   var paper = settings.paper;
+   var paperID = settings.paperID;
+   var attr = settings.attr;
+   this.enabled = settings.enabled;
+   var x0 = settings.x0;
+   var y0 = settings.y0;
+   var w = settings.width;
+   var h = settings.height;
+   var updateCurveCallback;
+   var dragEndCallback;
+   var curve;
+   this.background;
+   var pointPos = [];
+   var points = [];
+   var draggedID;
+   var startPos;
+   var selectedPoints = [];
+   var pointSize = 10;
+   var dragOverlaySize = 30;
+   var nameIndex = 2;
+   var useBezier = settings.useBezier;
+
+   this.setUpdateCurveCallback = function(fct) {
+      updateCurveCallback = fct;
+   };
+   this.setDragEndCallback = function(fct) {
+      dragEndCallback = fct;
+   };
+   this.setPointPos = function(pos) {
+      for(var iPoint = 0; iPoint < points.length; iPoint++){
+         points[iPoint].obj.remove();
+      }
+      points = [];
+      pointPos = pos;
+      nameIndex = pos.length;
+      drawPoints();
+      updateCurve();
+      this.setEnabled(this.enabled);
+   };
+   this.setEnabled = function(enabled) {
+      if(enabled){
+         this.initHandlers();
+      }else{
+         this.removeHandlers();
+      }
+      this.enabled = enabled;
+   };
+
+   this.getCurve = function() {
+      return curve;
+   };
+
+   this.init = function() {
+      this.background = paper.rect(x0,y0,w,h).attr(attr.background);
+      addPoint(x0,y0 + h,"p_0");
+      addPoint(x0 + w,y0,"p_1");
+      drawPoints();
+      updateCurve("init");
+      this.setEnabled(this.enabled);
+      // this.initHandlers();
+   };
+
+   this.initHandlers = function() {
+      this.enableClickCurve();
+      this.enableDragPoints();
+      $(document).off("keydown");
+      $(document).keydown(function(ev){
+         if(ev.which == 46){
+            for(var iPoint = 0; iPoint < selectedPoints.length; iPoint++){
+               var name = selectedPoints[iPoint];
+               removePoint(name);
+            }
+            selectedPoints = [];
+            updateCurve("keydown");
+         }
+      });
+   };
+   this.removeHandlers = function() {
+      this.disableClickCurve();
+      this.disableDragPoints();
+   };
+
+   this.enableClickCurve = function() {
+      curve[1].unclick();
+      curve[1].click(clickCurve);
+      curve[1].attr("cursor","pointer");
+   };
+   this.disableClickCurve = function() {
+      curve[1].unclick();
+      curve[1].attr("cursor","auto");
+   };
+
+   this.enableDragPoints = function() {
+      for(var iPoint = 0; iPoint < points.length; iPoint++){
+         enableDragPoint(iPoint);
+      }
+   };
+
+   var enableDragPoint = function(id) {
+      var name = points[id].id;
+      points[id].obj[1].drag(onMove,onStart(name),onEnd);
+      points[id].obj[1].attr("cursor","grab");
+   };
+
+   this.disableDragPoints = function() {
+      for(var iPoint = 0; iPoint < points.length; iPoint++){
+         points[iPoint].obj[1].undrag();
+         points[iPoint].obj[1].attr("cursor","auto");
+      }
+   };
+
+    function clickCurve(ev) {
+      var xMouse = ev.pageX - $("#"+paperID).offset().left;
+      var yMouse = ev.pageY - $("#"+paperID).offset().top;
+      var pos = getClosestCurvePointPos(xMouse,yMouse);
+      insertPoint(pos.x,pos.y);
+      updateCurve("click curve");
+   };
+
+   function insertPoint(x,y) {
+      var index = null;
+      for(var iPoint = 0; iPoint < points.length - 1; iPoint++){
+         var pos = pointPos[iPoint];
+         var nextPos = pointPos[iPoint + 1];
+         if(pos.x < x && nextPos.x > x){
+            index = iPoint + 1;
+         }
+      }
+      if(index != null){
+         var newID = "p_"+nameIndex;
+         pointPos.splice(index,0,{x:x,y:y,id:newID});
+         nameIndex++;
+         var point = paper.rect(x - pointSize/2,y - pointSize/2,pointSize,pointSize).attr(attr.point);
+         // var dragOverlay = paper.rect(x - dragOverlaySize/2,y - dragOverlaySize/2,dragOverlaySize,dragOverlaySize).attr(attr.dragOverlay);
+         var dragOverlay = paper.circle(x,y,dragOverlaySize/2).attr(attr.dragOverlay);
+         points.splice(index,0,{ obj: paper.set(point,dragOverlay), id: newID });
+         enableDragPoint(index);
+      }
+   };
+
+   var removePoint = function(name) {
+      var id = getIndexFromName(name);
+      if(points[id]){
+         points[id].obj.remove();
+         points.splice(id,1);
+         pointPos.splice(id,1);
+      }
+   };
+
+   var getClosestCurvePointPos = function(x,y) {
+      var minD = Infinity;
+      var curvePos = null;
+      for(var length = 0; length < curve[0].getTotalLength(); length++){
+         var pos = curve[0].getPointAtLength(length);
+         var d = Beav.Geometry.distance(x,y,pos.x,pos.y);
+         if(d < minD){
+            minD = d;
+            curvePos = pos;
+         }
+      }
+      return curvePos;
+   };
+
+   this.getXFromY = function(y) {
+      var x = [];
+      var minY = Infinity;
+      var maxY = 0;
+      for(var length = 1; length < curve[0].getTotalLength(); length++){
+         var pos = curve[0].getPointAtLength(length);
+         var prevPos = curve[0].getPointAtLength(length - 1);
+         if(y >= Math.min(prevPos.y,pos.y) && y <= Math.max(prevPos.y,pos.y)){
+            x.push((prevPos.x + pos.x)/2);
+         }
+         minY = Math.min(minY,prevPos.y,pos.y);
+         maxY = Math.max(maxY,prevPos.y,pos.y);
+      }
+      if(y < minY){
+         x = [x0 + w];
+      }else if(y > maxY){
+         x = [x0];
+      }
+      return x
+   };
+
+   this.getCurveData = function(yVsX) {
+      var data = (yVsX) ? [] : {};
+      var minY = Infinity;
+      var maxY = 0;
+      for(var length = 0; length < curve[0].getTotalLength(); length++){
+         var pos = curve[0].getPointAtLength(length);
+         var y = Math.round(pos.y);
+         var x = Math.round(pos.x);
+         if(yVsX && data[x] == undefined){
+            data[x] = y;
+         }else{
+            if(!data[y]){
+               data[y] = [];
+            }
+            if(!data[y].includes(x)){
+               data[y].push({ x: x, alpha: pos.alpha });
+            }
+         }
+         minY = Math.min(minY,pos.y);
+         maxY = Math.max(maxY,pos.y);
+      }
+      return { data: data, minY: minY, maxY: maxY }
+   };
+
+   var getIndexFromName = function(name) {
+      for(var iPoint = 0; iPoint < pointPos.length; iPoint++){
+         if(name == pointPos[iPoint].id){
+            return iPoint
+         }
+      }
+      return null
+   };
+
+   var onStart = function(name) {
+      return function(x,y,ev) {
+         draggedID = name;
+         var index = getIndexFromName(name);
+         startPos = pointPos[index];
+         // console.log(name)
+      }
+   };
+   var onMove = function(dx,dy,x,y,ev) {
+      var id = getIndexFromName(draggedID);
+      var xMouse = x - $("#"+paperID).offset().left;
+      var yMouse = y - $("#"+paperID).offset().top;
+
+      var xMin = (id) ? pointPos[id - 1].x + dragOverlaySize/2 : x0;
+      var xMax = (id < points.length - 1) ? pointPos[id + 1].x - dragOverlaySize/2 : x0 + w;
+      var newX = Math.min(xMax,Math.max(xMin,xMouse));
+      var yMin = y0;
+      var yMax = y0 + h;
+      var newY = Math.min(yMax,Math.max(yMin,yMouse));
+      if(id == 0){
+         if(newX - x0 < (y0 + h) - newY){
+            newX = x0;
+         }else{
+            newY = y0 + h;
+         }
+      }else if(id == points.length - 1){
+         if(x0 + w - newX < newY - y0){
+            newX = x0 + w;
+         }else{
+            newY = y0;
+         }
+      }
+
+      pointPos[id] = {x:newX,y:newY,id:draggedID};
+      points[id].obj[0].attr({
+         x: newX - pointSize/2,
+         y: newY - pointSize/2
+      });
+      points[id].obj[1].attr({
+         // x: newX - dragOverlaySize/2,
+         // y: newY - dragOverlaySize/2
+         cx: newX,
+         cy: newY
+      });
+      updateCurve("move");
+   };
+   var onEnd = function() {
+      var id = getIndexFromName(draggedID);
+      var xi = startPos.x;
+      var yi = startPos.y;
+      var xf = pointPos[id].x;
+      var yf = pointPos[id].y;
+      var d = Beav.Geometry.distance(xi,yi,xf,yf);
+      if(d < 10){
+         selectPoint(draggedID);
+      }
+      if(dragEndCallback){
+         dragEndCallback();
+      }
+   };
+
+   var selectPoint = function(name) {
+      var id = getIndexFromName(name);
+      if(id == 0 || id == points.length - 1){
+         return
+      }
+      if(Beav.Array.has(selectedPoints,name)){
+         var index = Beav.Array.indexOf(selectedPoints,name);
+         selectedPoints.splice(index,1);
+         points[id].obj[0].attr(attr.point);
+      }else{
+         selectedPoints.push(name);
+         points[id].obj[0].attr(attr.selectedPoint);
+         points[id].obj[1].undblclick();
+         points[id].obj[1].dblclick(function() {
+            removePoint(name);
+            updateCurve("keydown");
+         });
+      }
+   };
+
+   var addPoint = function(x,y,id) {
+      pointPos.push({x:x,y:y,id:id});
+   };
+
+   var updateCurve = function(src) {
+      var path = "";
+      var nbPoints = pointPos.length;
+      for(var iPoint = 0; iPoint < nbPoints; iPoint++){
+         var pos = pointPos[iPoint];
+         var x1 = pos.x;
+         var y1 = pos.y;
+
+         if(iPoint < nbPoints - 1){ 
+            var nextPos = pointPos[iPoint + 1];
+            var x2 = nextPos.x;
+            var y2 = nextPos.y; 
+            var yMin = y0;
+            var yMax = y0 + h;
+            var xControl1 = (x1 + x2)/2;
+            var xControl2 = (x1 + x2)/2;
+            var yControl1 = Math.max(yMin,Math.min(yMax,y1 + x1 - xControl1));
+            var yControl2 = Math.max(yMin,Math.min(yMax,y2 + x2 - xControl2));
+            if(iPoint == 0){
+               path += "M"+x1+" "+y1;
+               xControl1 = x1;
+               yControl1 = y1;
+            } 
+            if(iPoint == nbPoints - 2){
+               xControl2 = x2;
+               yControl2 = y2;
+            }
+            if (useBezier) {
+               path += ",C"+xControl1+" "+yControl1+" "+xControl2+" "+yControl2+" "+x2+" "+y2;
+            } else {
+               path += ",L"+x2+" "+y2;
+            }
+         }
+      }
+      if(curve){
+         curve.attr("path",path);
+      }else{
+         var tempCurve = paper.path(path).attr(attr.curve);
+         var clickArea = paper.path(path).attr(attr.clickArea);
+         curve = paper.set(tempCurve,clickArea);
+      }
+      self.pointsToFront();
+
+      if(updateCurveCallback){
+         updateCurveCallback();
+      }
+   };
+
+   this.pointsToFront = function() {
+      for(var iPoint = 0; iPoint < points.length; iPoint++){
+         points[iPoint].obj.toFront();
+      }
+   };
+
+   var drawPoints = function() {
+      for(var iPoint = 0; iPoint < pointPos.length; iPoint++){
+         var pos = pointPos[iPoint];
+         var point = paper.rect(pos.x - pointSize/2,pos.y - pointSize/2,pointSize,pointSize).attr(attr.point);
+         // var dragOverlay = paper.rect(pos.x - dragOverlaySize/2,pos.y - dragOverlaySize/2,dragOverlaySize,dragOverlaySize).attr(attr.dragOverlay);
+         var dragOverlay = paper.circle(pos.x,pos.y,dragOverlaySize/2).attr(attr.dragOverlay);
+         points[iPoint] = { obj: paper.set(point,dragOverlay), id: pos.id };
+      }
+   };
+   
+   this.init();
+};
\ No newline at end of file
diff --git a/pemFioi/robot/images/arrows/bottomArrow.png b/pemFioi/robot/images/arrows/bottomArrow.png
new file mode 100644
index 000000000..8384445f2
Binary files /dev/null and b/pemFioi/robot/images/arrows/bottomArrow.png differ
diff --git a/pemFioi/robot/images/arrows/box.png b/pemFioi/robot/images/arrows/box.png
new file mode 100644
index 000000000..d27ac3ace
Binary files /dev/null and b/pemFioi/robot/images/arrows/box.png differ
diff --git a/pemFioi/robot/images/arrows/leftArrow.png b/pemFioi/robot/images/arrows/leftArrow.png
new file mode 100644
index 000000000..3deb8ce8d
Binary files /dev/null and b/pemFioi/robot/images/arrows/leftArrow.png differ
diff --git a/pemFioi/robot/images/arrows/red_robot.png b/pemFioi/robot/images/arrows/red_robot.png
new file mode 100644
index 000000000..fc8c785d2
Binary files /dev/null and b/pemFioi/robot/images/arrows/red_robot.png differ
diff --git a/pemFioi/robot/images/arrows/rightArrow.png b/pemFioi/robot/images/arrows/rightArrow.png
new file mode 100644
index 000000000..373ddba2a
Binary files /dev/null and b/pemFioi/robot/images/arrows/rightArrow.png differ
diff --git a/pemFioi/robot/images/arrows/topArrow.png b/pemFioi/robot/images/arrows/topArrow.png
new file mode 100644
index 000000000..fb6d36e58
Binary files /dev/null and b/pemFioi/robot/images/arrows/topArrow.png differ
diff --git a/pemFioi/robot/images/cards/dotted.png b/pemFioi/robot/images/cards/dotted.png
new file mode 100644
index 000000000..59ee76c31
Binary files /dev/null and b/pemFioi/robot/images/cards/dotted.png differ
diff --git a/pemFioi/robot/images/cards/quadrille.png b/pemFioi/robot/images/cards/quadrille.png
new file mode 100644
index 000000000..4f45d3c5f
Binary files /dev/null and b/pemFioi/robot/images/cards/quadrille.png differ
diff --git a/pemFioi/robot/images/cards/red_robot.png b/pemFioi/robot/images/cards/red_robot.png
new file mode 100644
index 000000000..fc8c785d2
Binary files /dev/null and b/pemFioi/robot/images/cards/red_robot.png differ
diff --git a/pemFioi/robot/images/cards/roundDotted.png b/pemFioi/robot/images/cards/roundDotted.png
new file mode 100644
index 000000000..bace4c389
Binary files /dev/null and b/pemFioi/robot/images/cards/roundDotted.png differ
diff --git a/pemFioi/robot/images/cards/roundQuadrille.png b/pemFioi/robot/images/cards/roundQuadrille.png
new file mode 100644
index 000000000..4e7f2c0c4
Binary files /dev/null and b/pemFioi/robot/images/cards/roundQuadrille.png differ
diff --git a/pemFioi/robot/images/cards/roundStriped.png b/pemFioi/robot/images/cards/roundStriped.png
new file mode 100644
index 000000000..ef2a2abd6
Binary files /dev/null and b/pemFioi/robot/images/cards/roundStriped.png differ
diff --git a/pemFioi/robot/images/cards/squareDotted.png b/pemFioi/robot/images/cards/squareDotted.png
new file mode 100644
index 000000000..8f0658470
Binary files /dev/null and b/pemFioi/robot/images/cards/squareDotted.png differ
diff --git a/pemFioi/robot/images/cards/squareQuadrille.png b/pemFioi/robot/images/cards/squareQuadrille.png
new file mode 100644
index 000000000..c7a7959fa
Binary files /dev/null and b/pemFioi/robot/images/cards/squareQuadrille.png differ
diff --git a/pemFioi/robot/images/cards/squareStriped.png b/pemFioi/robot/images/cards/squareStriped.png
new file mode 100644
index 000000000..d1b811b4f
Binary files /dev/null and b/pemFioi/robot/images/cards/squareStriped.png differ
diff --git a/pemFioi/robot/images/cards/striped.png b/pemFioi/robot/images/cards/striped.png
new file mode 100644
index 000000000..86d219a49
Binary files /dev/null and b/pemFioi/robot/images/cards/striped.png differ
diff --git a/pemFioi/robot/images/cards/triangleDotted.png b/pemFioi/robot/images/cards/triangleDotted.png
new file mode 100644
index 000000000..0d8cd2dfb
Binary files /dev/null and b/pemFioi/robot/images/cards/triangleDotted.png differ
diff --git a/pemFioi/robot/images/cards/triangleQuadrille.png b/pemFioi/robot/images/cards/triangleQuadrille.png
new file mode 100644
index 000000000..d255fd1a6
Binary files /dev/null and b/pemFioi/robot/images/cards/triangleQuadrille.png differ
diff --git a/pemFioi/robot/images/cards/triangleStriped.png b/pemFioi/robot/images/cards/triangleStriped.png
new file mode 100644
index 000000000..20c4c9bb7
Binary files /dev/null and b/pemFioi/robot/images/cards/triangleStriped.png differ
diff --git a/pemFioi/robot/images/chticode_abs/gem.png b/pemFioi/robot/images/chticode_abs/gem.png
new file mode 100644
index 000000000..d686c84a5
Binary files /dev/null and b/pemFioi/robot/images/chticode_abs/gem.png differ
diff --git a/pemFioi/robot/images/chticode_abs/obstacle.png b/pemFioi/robot/images/chticode_abs/obstacle.png
new file mode 100644
index 000000000..2decb2d46
Binary files /dev/null and b/pemFioi/robot/images/chticode_abs/obstacle.png differ
diff --git a/pemFioi/robot/images/chticode_abs/red_robot.png b/pemFioi/robot/images/chticode_abs/red_robot.png
new file mode 100644
index 000000000..fc8c785d2
Binary files /dev/null and b/pemFioi/robot/images/chticode_abs/red_robot.png differ
diff --git a/pemFioi/robot/images/chticode_rel/gem.png b/pemFioi/robot/images/chticode_rel/gem.png
new file mode 100644
index 000000000..d686c84a5
Binary files /dev/null and b/pemFioi/robot/images/chticode_rel/gem.png differ
diff --git a/pemFioi/robot/images/chticode_rel/green_robot.png b/pemFioi/robot/images/chticode_rel/green_robot.png
new file mode 100644
index 000000000..fc2d4ffd6
Binary files /dev/null and b/pemFioi/robot/images/chticode_rel/green_robot.png differ
diff --git a/pemFioi/robot/images/chticode_rel/obstacle.png b/pemFioi/robot/images/chticode_rel/obstacle.png
new file mode 100644
index 000000000..2decb2d46
Binary files /dev/null and b/pemFioi/robot/images/chticode_rel/obstacle.png differ
diff --git a/pemFioi/robot/images/cones/cone.png b/pemFioi/robot/images/cones/cone.png
new file mode 100644
index 000000000..6c26d3dee
Binary files /dev/null and b/pemFioi/robot/images/cones/cone.png differ
diff --git a/pemFioi/robot/images/cones/contour.png b/pemFioi/robot/images/cones/contour.png
new file mode 100644
index 000000000..bba9a74d7
Binary files /dev/null and b/pemFioi/robot/images/cones/contour.png differ
diff --git a/pemFioi/robot/images/cones/green_robot.png b/pemFioi/robot/images/cones/green_robot.png
new file mode 100644
index 000000000..ad200ff85
Binary files /dev/null and b/pemFioi/robot/images/cones/green_robot.png differ
diff --git a/pemFioi/robot/images/cones/marker.png b/pemFioi/robot/images/cones/marker.png
new file mode 100644
index 000000000..2d2d43a97
Binary files /dev/null and b/pemFioi/robot/images/cones/marker.png differ
diff --git a/pemFioi/robot/images/course/horizontal_closed_door.png b/pemFioi/robot/images/course/horizontal_closed_door.png
new file mode 100644
index 000000000..865a7ecf0
Binary files /dev/null and b/pemFioi/robot/images/course/horizontal_closed_door.png differ
diff --git a/pemFioi/robot/images/course/horizontal_open_door.png b/pemFioi/robot/images/course/horizontal_open_door.png
new file mode 100644
index 000000000..b24d961d8
Binary files /dev/null and b/pemFioi/robot/images/course/horizontal_open_door.png differ
diff --git a/pemFioi/robot/images/course/obstacle.png b/pemFioi/robot/images/course/obstacle.png
new file mode 100644
index 000000000..72dded8fb
Binary files /dev/null and b/pemFioi/robot/images/course/obstacle.png differ
diff --git a/pemFioi/robot/images/course/red_robot.png b/pemFioi/robot/images/course/red_robot.png
new file mode 100644
index 000000000..a45331413
Binary files /dev/null and b/pemFioi/robot/images/course/red_robot.png differ
diff --git a/pemFioi/robot/images/course/vertical_closed_door.png b/pemFioi/robot/images/course/vertical_closed_door.png
new file mode 100644
index 000000000..2e62a8d56
Binary files /dev/null and b/pemFioi/robot/images/course/vertical_closed_door.png differ
diff --git a/pemFioi/robot/images/course/vertical_open_door.png b/pemFioi/robot/images/course/vertical_open_door.png
new file mode 100644
index 000000000..6359a6918
Binary files /dev/null and b/pemFioi/robot/images/course/vertical_open_door.png differ
diff --git a/pemFioi/robot/images/dominoes/BB.png b/pemFioi/robot/images/dominoes/BB.png
new file mode 100644
index 000000000..1ac15ead4
Binary files /dev/null and b/pemFioi/robot/images/dominoes/BB.png differ
diff --git a/pemFioi/robot/images/dominoes/BG.png b/pemFioi/robot/images/dominoes/BG.png
new file mode 100644
index 000000000..012242b80
Binary files /dev/null and b/pemFioi/robot/images/dominoes/BG.png differ
diff --git a/pemFioi/robot/images/dominoes/BO.png b/pemFioi/robot/images/dominoes/BO.png
new file mode 100644
index 000000000..6949524e6
Binary files /dev/null and b/pemFioi/robot/images/dominoes/BO.png differ
diff --git a/pemFioi/robot/images/dominoes/GB.png b/pemFioi/robot/images/dominoes/GB.png
new file mode 100644
index 000000000..c6990bad9
Binary files /dev/null and b/pemFioi/robot/images/dominoes/GB.png differ
diff --git a/pemFioi/robot/images/dominoes/GG.png b/pemFioi/robot/images/dominoes/GG.png
new file mode 100644
index 000000000..3f7230f99
Binary files /dev/null and b/pemFioi/robot/images/dominoes/GG.png differ
diff --git a/pemFioi/robot/images/dominoes/GO.png b/pemFioi/robot/images/dominoes/GO.png
new file mode 100644
index 000000000..6c2345a51
Binary files /dev/null and b/pemFioi/robot/images/dominoes/GO.png differ
diff --git a/pemFioi/robot/images/dominoes/OB.png b/pemFioi/robot/images/dominoes/OB.png
new file mode 100644
index 000000000..4c3f8ce21
Binary files /dev/null and b/pemFioi/robot/images/dominoes/OB.png differ
diff --git a/pemFioi/robot/images/dominoes/OG.png b/pemFioi/robot/images/dominoes/OG.png
new file mode 100644
index 000000000..e796a3cc3
Binary files /dev/null and b/pemFioi/robot/images/dominoes/OG.png differ
diff --git a/pemFioi/robot/images/dominoes/OO.png b/pemFioi/robot/images/dominoes/OO.png
new file mode 100644
index 000000000..8639339f8
Binary files /dev/null and b/pemFioi/robot/images/dominoes/OO.png differ
diff --git a/pemFioi/robot/images/dominoes/contour.png b/pemFioi/robot/images/dominoes/contour.png
new file mode 100644
index 000000000..0592791de
Binary files /dev/null and b/pemFioi/robot/images/dominoes/contour.png differ
diff --git a/pemFioi/robot/images/dominoes/green_robot.png b/pemFioi/robot/images/dominoes/green_robot.png
new file mode 100644
index 000000000..c3d1c9b9c
Binary files /dev/null and b/pemFioi/robot/images/dominoes/green_robot.png differ
diff --git a/pemFioi/robot/images/dominoes/obstacle.png b/pemFioi/robot/images/dominoes/obstacle.png
new file mode 100644
index 000000000..72dded8fb
Binary files /dev/null and b/pemFioi/robot/images/dominoes/obstacle.png differ
diff --git a/pemFioi/robot/images/flowers/fixed_flower.png b/pemFioi/robot/images/flowers/fixed_flower.png
new file mode 100644
index 000000000..d1da8fba2
Binary files /dev/null and b/pemFioi/robot/images/flowers/fixed_flower.png differ
diff --git a/pemFioi/robot/images/flowers/flower.png b/pemFioi/robot/images/flowers/flower.png
new file mode 100644
index 000000000..d952d9d91
Binary files /dev/null and b/pemFioi/robot/images/flowers/flower.png differ
diff --git a/pemFioi/robot/images/flowers/green_robot.png b/pemFioi/robot/images/flowers/green_robot.png
new file mode 100644
index 000000000..c3d1c9b9c
Binary files /dev/null and b/pemFioi/robot/images/flowers/green_robot.png differ
diff --git a/pemFioi/robot/images/flowers/marker.png b/pemFioi/robot/images/flowers/marker.png
new file mode 100644
index 000000000..e53d5d5b1
Binary files /dev/null and b/pemFioi/robot/images/flowers/marker.png differ
diff --git a/pemFioi/robot/images/gears/dispersion.png b/pemFioi/robot/images/gears/dispersion.png
new file mode 100644
index 000000000..05f631c6b
Binary files /dev/null and b/pemFioi/robot/images/gears/dispersion.png differ
diff --git a/pemFioi/robot/images/gears/gears.png b/pemFioi/robot/images/gears/gears.png
new file mode 100644
index 000000000..37166bdee
Binary files /dev/null and b/pemFioi/robot/images/gears/gears.png differ
diff --git a/pemFioi/robot/images/gears/green_robot.png b/pemFioi/robot/images/gears/green_robot.png
new file mode 100644
index 000000000..c3d1c9b9c
Binary files /dev/null and b/pemFioi/robot/images/gears/green_robot.png differ
diff --git a/pemFioi/robot/images/gears/platform.png b/pemFioi/robot/images/gears/platform.png
new file mode 100644
index 000000000..075a99200
Binary files /dev/null and b/pemFioi/robot/images/gears/platform.png differ
diff --git a/pemFioi/robot/images/gears/projectile.png b/pemFioi/robot/images/gears/projectile.png
new file mode 100644
index 000000000..0ff4802cb
Binary files /dev/null and b/pemFioi/robot/images/gears/projectile.png differ
diff --git a/pemFioi/robot/images/gears/wheel.png b/pemFioi/robot/images/gears/wheel.png
new file mode 100644
index 000000000..b5b77c86d
Binary files /dev/null and b/pemFioi/robot/images/gears/wheel.png differ
diff --git a/pemFioi/robot/images/gems/gem.png b/pemFioi/robot/images/gems/gem.png
new file mode 100644
index 000000000..db3d206ed
Binary files /dev/null and b/pemFioi/robot/images/gems/gem.png differ
diff --git a/pemFioi/robot/images/gems/green_robot.png b/pemFioi/robot/images/gems/green_robot.png
new file mode 100644
index 000000000..5daf2dd53
Binary files /dev/null and b/pemFioi/robot/images/gems/green_robot.png differ
diff --git a/pemFioi/robot/images/gems/obstacle.png b/pemFioi/robot/images/gems/obstacle.png
new file mode 100644
index 000000000..86878bd39
Binary files /dev/null and b/pemFioi/robot/images/gems/obstacle.png differ
diff --git a/pemFioi/robot/images/help/green_robot.png b/pemFioi/robot/images/help/green_robot.png
new file mode 100644
index 000000000..ad200ff85
Binary files /dev/null and b/pemFioi/robot/images/help/green_robot.png differ
diff --git a/pemFioi/robot/images/help/object.png b/pemFioi/robot/images/help/object.png
new file mode 100644
index 000000000..2d8f8ed31
Binary files /dev/null and b/pemFioi/robot/images/help/object.png differ
diff --git a/pemFioi/robot/images/help/obstacle.png b/pemFioi/robot/images/help/obstacle.png
new file mode 100644
index 000000000..32c7e6bfe
Binary files /dev/null and b/pemFioi/robot/images/help/obstacle.png differ
diff --git a/pemFioi/robot/images/laser/green_robot.png b/pemFioi/robot/images/laser/green_robot.png
new file mode 100644
index 000000000..ad200ff85
Binary files /dev/null and b/pemFioi/robot/images/laser/green_robot.png differ
diff --git a/pemFioi/robot/images/laser/launcher.png b/pemFioi/robot/images/laser/launcher.png
new file mode 100644
index 000000000..93a632a89
Binary files /dev/null and b/pemFioi/robot/images/laser/launcher.png differ
diff --git a/pemFioi/robot/images/laser/mirrorH.png b/pemFioi/robot/images/laser/mirrorH.png
new file mode 100644
index 000000000..989c5f2b5
Binary files /dev/null and b/pemFioi/robot/images/laser/mirrorH.png differ
diff --git a/pemFioi/robot/images/laser/mirrorI.png b/pemFioi/robot/images/laser/mirrorI.png
new file mode 100644
index 000000000..8b9b5f02b
Binary files /dev/null and b/pemFioi/robot/images/laser/mirrorI.png differ
diff --git a/pemFioi/robot/images/laser/mirrorN.png b/pemFioi/robot/images/laser/mirrorN.png
new file mode 100644
index 000000000..ce0b4e90a
Binary files /dev/null and b/pemFioi/robot/images/laser/mirrorN.png differ
diff --git a/pemFioi/robot/images/laser/mirrorZ.png b/pemFioi/robot/images/laser/mirrorZ.png
new file mode 100644
index 000000000..deb2053c1
Binary files /dev/null and b/pemFioi/robot/images/laser/mirrorZ.png differ
diff --git a/pemFioi/robot/images/laser/obstacle.png b/pemFioi/robot/images/laser/obstacle.png
new file mode 100644
index 000000000..f5c9cebfc
Binary files /dev/null and b/pemFioi/robot/images/laser/obstacle.png differ
diff --git a/pemFioi/robot/images/laser/off_spot.png b/pemFioi/robot/images/laser/off_spot.png
new file mode 100644
index 000000000..443572548
Binary files /dev/null and b/pemFioi/robot/images/laser/off_spot.png differ
diff --git a/pemFioi/robot/images/marbles/hole.png b/pemFioi/robot/images/marbles/hole.png
new file mode 100644
index 000000000..9029c6dc0
Binary files /dev/null and b/pemFioi/robot/images/marbles/hole.png differ
diff --git a/pemFioi/robot/images/marbles/marble.png b/pemFioi/robot/images/marbles/marble.png
new file mode 100644
index 000000000..54b0519f9
Binary files /dev/null and b/pemFioi/robot/images/marbles/marble.png differ
diff --git a/pemFioi/robot/images/marbles/red_robot.png b/pemFioi/robot/images/marbles/red_robot.png
new file mode 100644
index 000000000..a45331413
Binary files /dev/null and b/pemFioi/robot/images/marbles/red_robot.png differ
diff --git a/pemFioi/robot/images/objects_in_space/asteroide.png b/pemFioi/robot/images/objects_in_space/asteroide.png
new file mode 100644
index 000000000..71d383a10
Binary files /dev/null and b/pemFioi/robot/images/objects_in_space/asteroide.png differ
diff --git a/pemFioi/robot/images/objects_in_space/green_robot.png b/pemFioi/robot/images/objects_in_space/green_robot.png
new file mode 100644
index 000000000..ad200ff85
Binary files /dev/null and b/pemFioi/robot/images/objects_in_space/green_robot.png differ
diff --git a/pemFioi/robot/images/objects_in_space/objet1.png b/pemFioi/robot/images/objects_in_space/objet1.png
new file mode 100644
index 000000000..a27b2d194
Binary files /dev/null and b/pemFioi/robot/images/objects_in_space/objet1.png differ
diff --git a/pemFioi/robot/images/objects_in_space/objet2.png b/pemFioi/robot/images/objects_in_space/objet2.png
new file mode 100644
index 000000000..4f6032942
Binary files /dev/null and b/pemFioi/robot/images/objects_in_space/objet2.png differ
diff --git a/pemFioi/robot/images/objects_in_space/stars.png b/pemFioi/robot/images/objects_in_space/stars.png
new file mode 100644
index 000000000..428aabf0d
Binary files /dev/null and b/pemFioi/robot/images/objects_in_space/stars.png differ
diff --git a/pemFioi/robot/images/paint/marker.png b/pemFioi/robot/images/paint/marker.png
new file mode 100644
index 000000000..5dc29b52b
Binary files /dev/null and b/pemFioi/robot/images/paint/marker.png differ
diff --git a/pemFioi/robot/images/paint/marker_white.png b/pemFioi/robot/images/paint/marker_white.png
new file mode 100644
index 000000000..14761fc64
Binary files /dev/null and b/pemFioi/robot/images/paint/marker_white.png differ
diff --git a/pemFioi/robot/images/paint/red_robot.png b/pemFioi/robot/images/paint/red_robot.png
new file mode 100644
index 000000000..fc8c785d2
Binary files /dev/null and b/pemFioi/robot/images/paint/red_robot.png differ
diff --git a/pemFioi/robot/images/pixelArt/cursor.png b/pemFioi/robot/images/pixelArt/cursor.png
new file mode 100644
index 000000000..fbca00e6e
Binary files /dev/null and b/pemFioi/robot/images/pixelArt/cursor.png differ
diff --git a/pemFioi/robot/images/rocket/asteroide.png b/pemFioi/robot/images/rocket/asteroide.png
new file mode 100644
index 000000000..71d383a10
Binary files /dev/null and b/pemFioi/robot/images/rocket/asteroide.png differ
diff --git a/pemFioi/robot/images/rocket/green_robot.png b/pemFioi/robot/images/rocket/green_robot.png
new file mode 100644
index 000000000..c3d1c9b9c
Binary files /dev/null and b/pemFioi/robot/images/rocket/green_robot.png differ
diff --git a/pemFioi/robot/images/rocket/objet1.png b/pemFioi/robot/images/rocket/objet1.png
new file mode 100644
index 000000000..a27b2d194
Binary files /dev/null and b/pemFioi/robot/images/rocket/objet1.png differ
diff --git a/pemFioi/robot/images/rocket/objet2.png b/pemFioi/robot/images/rocket/objet2.png
new file mode 100644
index 000000000..4f6032942
Binary files /dev/null and b/pemFioi/robot/images/rocket/objet2.png differ
diff --git a/pemFioi/robot/images/rocket/obstacle.png b/pemFioi/robot/images/rocket/obstacle.png
new file mode 100644
index 000000000..10e8cbd8f
Binary files /dev/null and b/pemFioi/robot/images/rocket/obstacle.png differ
diff --git a/pemFioi/robot/images/rocket/rocket.png b/pemFioi/robot/images/rocket/rocket.png
new file mode 100644
index 000000000..5a3b53376
Binary files /dev/null and b/pemFioi/robot/images/rocket/rocket.png differ
diff --git a/pemFioi/robot/images/rocket/stars.png b/pemFioi/robot/images/rocket/stars.png
new file mode 100644
index 000000000..428aabf0d
Binary files /dev/null and b/pemFioi/robot/images/rocket/stars.png differ
diff --git a/pemFioi/robot/images/sokoban/box.png b/pemFioi/robot/images/sokoban/box.png
new file mode 100644
index 000000000..c786331de
Binary files /dev/null and b/pemFioi/robot/images/sokoban/box.png differ
diff --git a/pemFioi/robot/images/sokoban/green_robot.png b/pemFioi/robot/images/sokoban/green_robot.png
new file mode 100644
index 000000000..c3d1c9b9c
Binary files /dev/null and b/pemFioi/robot/images/sokoban/green_robot.png differ
diff --git a/pemFioi/robot/images/sokoban/marker.png b/pemFioi/robot/images/sokoban/marker.png
new file mode 100644
index 000000000..41b36ceb3
Binary files /dev/null and b/pemFioi/robot/images/sokoban/marker.png differ
diff --git a/pemFioi/robot/images/sokoban/wall.png b/pemFioi/robot/images/sokoban/wall.png
new file mode 100644
index 000000000..acbd5e105
Binary files /dev/null and b/pemFioi/robot/images/sokoban/wall.png differ
diff --git a/pemFioi/robot/images/wiring/black_female.png b/pemFioi/robot/images/wiring/black_female.png
new file mode 100644
index 000000000..181637646
Binary files /dev/null and b/pemFioi/robot/images/wiring/black_female.png differ
diff --git a/pemFioi/robot/images/wiring/black_male.png b/pemFioi/robot/images/wiring/black_male.png
new file mode 100644
index 000000000..5dc29b52b
Binary files /dev/null and b/pemFioi/robot/images/wiring/black_male.png differ
diff --git a/pemFioi/robot/images/wiring/red_robot.png b/pemFioi/robot/images/wiring/red_robot.png
new file mode 100644
index 000000000..fc8c785d2
Binary files /dev/null and b/pemFioi/robot/images/wiring/red_robot.png differ
diff --git a/pemFioi/robot/images/wiring/white_female.png b/pemFioi/robot/images/wiring/white_female.png
new file mode 100644
index 000000000..f547a18ad
Binary files /dev/null and b/pemFioi/robot/images/wiring/white_female.png differ
diff --git a/pemFioi/robot/images/wiring/white_male.png b/pemFioi/robot/images/wiring/white_male.png
new file mode 100644
index 000000000..485de9dac
Binary files /dev/null and b/pemFioi/robot/images/wiring/white_male.png differ
diff --git a/pemFioi/robot/images/wiring/wire.png b/pemFioi/robot/images/wiring/wire.png
new file mode 100644
index 000000000..a39a8c71e
Binary files /dev/null and b/pemFioi/robot/images/wiring/wire.png differ
diff --git a/pemFioi/sentences_2.js b/pemFioi/sentences_2.js
new file mode 100644
index 000000000..2e701aa12
--- /dev/null
+++ b/pemFioi/sentences_2.js
@@ -0,0 +1,1331 @@
+if(typeof require != 'undefined') {
+    var {
+        conjugations,
+        pastParticiples,
+        speConjugations,
+        auxConjugations,
+        allerConj,
+        exceptions,
+        negationWords,
+        determinerTypes,
+        determiners,
+        pronounTypes,
+        subjPronounTypes,
+        pronouns,
+        nounTypes,
+        nouns,
+        adjectiveTypes,
+        adjectives,
+        auxiliaryVerbs,
+        verbTypes,
+        verbs,
+        adverbTypes,
+        adverbs,
+        elisionWithH,
+        elisionWithHVerb
+    } = require('./sentences_wordList.js');
+    var block = "";
+}
+
+function init() {
+   $("#form").html(createForm);
+   initHandlers();
+};
+
+function createForm() {
+   var html = "
Générer des phrases
";
+   html += selectStructures();
+   html += selectSentenceNumber();
+   html += "";
+   html += "
Voir les listes de mot
";
+   html += selectBlock();
+   html += "";
+   html += "
Générer un texte
";
+   html += selectTextLength();
+   html += "";
+   return html;
+};
+
+function selectStructures() {
+   var html = "";
+   html += "";
+   return html;
+};
+
+function selectBlock() {
+   var html = "";
+   html += "";
+   html += "";
+   html += "";
+   html += "";
+   html += "";
+   html += "";
+   html += "";
+   html += "";
+   html += "";
+   return html;
+};
+
+function selectSentenceNumber() {
+   var html = "";
+   html += "";
+   return html;
+};
+
+function selectTextLength() {
+   var html = "";
+   html += "";
+   // html += "";
+   // html += "";
+   return html;
+};
+
+function initHandlers() {
+   $(".verb").hide();
+   $(".adj").hide();
+   $("#blocks").change(function(){
+      if(structureTypes[$("#blocks").val()].startsWith("V")){
+         $(".verb").show();
+      }else{
+         $(".verb").hide();
+      }
+      if(structureTypes[$("#blocks").val()].startsWith("adj")){
+         $(".adj").show();
+      }else{
+         $(".adj").hide();
+      }
+   });
+   $("#createSentences").off("click");
+   $("#createSentences").click(function(){
+      var struct = $("#structures").val();
+      var n = $("#nSentences").val();
+      var rng = Math.random;
+      var text = generateSentence(rng,n,struct,true);
+      $("#text,#freq").empty();
+      $("#text").append(text);
+   });
+   $("#wordList").off("click");
+   $("#wordList").click(function(){
+      var block = $("#blocks").val();
+      var text = generateWordList(block);
+      $("#text,#freq").empty();
+      $("#text").append(text);
+   });
+   $("#createText").off("click");
+   $("#createText").click(function(){
+      var rng = Math.random;
+      var min = parseInt($("#minLength").val());
+      var max = min + 50;
+      if(min > max){
+         var newMin = max;
+         max = min;
+         min = newMin;
+         console.log("les valeurs min et max ont été inversées");
+      }
+      var text = generateText(rng,min,max,true);
+      getFrequencies(text);
+      $("#text").empty();
+      $("#text").append(text);
+   });
+};
+
+function getFrequencies(text) {
+   var letterFreq = {};
+   var digraphFreq = {};
+   var wordFreq = {};
+   text = cleanUpSpecialChars(text,true);
+   var words = text.split(" ");
+   var nWords = words.length;
+   text = cleanUpSpecialChars(text,false);
+   var nLetters = text.length;
+   for(var letterIndex in text){
+      if(letterFreq[text.charAt(letterIndex)]){
+         letterFreq[text.charAt(letterIndex)]++;
+      }else{
+         letterFreq[text.charAt(letterIndex)] = 1;
+      }
+      if(letterIndex < nLetters - 1){
+         var digraph = text.charAt(letterIndex) + text.charAt(parseInt(letterIndex) + 1);
+         if(digraphFreq[digraph]){
+            digraphFreq[digraph]++;
+         }else{
+            digraphFreq[digraph] = 1;
+         }
+      }
+   }
+   for(var word of words){
+      if(wordFreq[word]){
+         wordFreq[word]++;
+      }else{
+         wordFreq[word] = 1;
+      }
+   }
+   for(var letter in letterFreq){
+      letterFreq[letter] = Math.trunc((letterFreq[letter]*100/nLetters)*100)/100;
+   }
+   for(var digraph in digraphFreq){
+      digraphFreq[digraph] = Math.trunc((digraphFreq[digraph]*100/(nLetters - 1))*100)/100;
+   }
+   for(var word in wordFreq){
+      wordFreq[word] = Math.trunc((wordFreq[word]*100/nWords)*100)/100;
+   }
+   wordFreq = sort(wordFreq);
+   displayFreq(letterFreq,digraphFreq,wordFreq);
+};
+
+function sort(object) {
+   var sortable = [];
+   var newObject = {};
+   for (var key in object) {
+       sortable.push([key, object[key]]);
+   }
+   sortable.sort(function(a, b) {
+       return b[1] - a[1];
+   });
+   for(var item of sortable){
+      newObject[item[0]] = item[1];
+   }
+   return newObject;
+};
+
+function displayFreq(letterFreq,digraphFreq,wordFreq) {
+   var referenceLetters = {
+      "E": 17.35, "A": 8.2, "S": 7.93, "I": 7.53, "N": 7.17, "T": 6.99, "R": 6.65, "L": 5.92, "U": 5.73, "O": 5.53,
+      "D": 4.01, "C": 3.33, "M": 2.97, "P": 2.92, "V": 1.39, "G": 1.09, "F": 1.08, "Q": 1.04, "H": 0.93, "B": 0.92,
+      "X": 0.47, "J": 0.34, "Y": 0.31, "Z": 0.1, "K": 0.06, "W": 0.03
+   };
+   var referenceDigraphs = {
+      "ES": 3.05, "LE": 2.22, "DE": 2.17, "RE": 2.1, "EN": 2.08, "ON": 1.64, "NT": 1.62, "ER": 1.53, "TE": 1.52, "ET": 1.43,
+      "EL": 1.42, "AN": 1.37, "SE": 1.32, "LA": 1.29, "AI": 1.24, "NE": 1.14, "OU": 1.12, "QU": 1.11, "ME": 1.08, "IT": 1.06,
+      "IE": 1.05, "EM": 1.01, "ED": 1.01, "UR": 1.01, "IS": 0.99, "EC": 0.95, "UE": 0.92, "TI": 0.9, "RA": 0.86, "NS": 0.84,
+      "IN": 0.84, "TA": 0.82, "CE": 0.81, "AR": 0.8, "EE": 0.79, "EU": 0.78, "SA": 0.76, "CO": 0.74, "EP": 0.71, "ND": 0.7,
+      "IL": 0.7, "SS": 0.68, "ST": 0.66, "SI": 0.65, "TR": 0.64, "AL": 0.64, "UN": 0.63, "PA": 0.62, "AU": 0.61, "EA": 0.6,
+      "AT": 0.58, "MA": 0.58, "RI": 0.58, "SD": 0.57, "SO": 0.57, "US": 0.57, "UI": 0.56, "LL": 0.53, "NC": 0.53, "VE": 0.53, 
+      "LI": 0.52, "RO": 0.51, "IO": 0.51, "OR": 0.5, "PE": 0.48, "OI": 0.48, "PR": 0.47, "PO": 0.46, "IR": 0.46, "NA": 0.45, 
+      "UT": 0.44, "TD": 0.44, "CH": 0.44, "OM": 0.43, "SP": 0.43, "SL": 0.42, "DA": 0.42, "AS": 0.42, "MO": 0.41, "AC": 0.4,  
+      "DI": 0.4, "RS": 0.39, "DU": 0.39, "TL": 0.38, "TO": 0.38, "TS": 0.38, "RT": 0.37, "AM": 0.37, "AP": 0.37, "SC": 0.36, 
+      "LO": 0.36, "AV": 0.35, "SU": 0.35, "EV": 0.34, "NO": 0.33, "RL": 0.33, "NI": 0.32, "GE": 0.31, "RD": 0.31, "LU": 0.31,   
+      "NN": 0.3, "HE": 0.29, "PL": 0.28, "IQ": 0.28, "EF": 0.28, "MI": 0.27, "VA": 0.27, "TU": 0.27, "VI": 0.27, "CA": 0.27, 
+      "EQ": 0.26, "CI": 0.26, "TT": 0.26, "IC": 0.25, "UX": 0.25, "MM": 0.25, "OL": 0.24,"AG": 0.24, "VO": 0.24, "EI": 0.24, 
+      "MP": 0.23, "TP": 0.23, "SM": 0.23, "UL": 0.22, "HA": 0.22, "FI": 0.21, "FA": 0.21, "IM": 0.21, "EG": 0.21, "ID": 0.2, 
+      "DO": 0.2, "AD": 0.2, "GR": 0.19, "SQ": 0.19, "AB": 0.19, "BL": 0.18, "UV": 0.18, "IV": 0.18, "NG": 0.18, "TC": 0.17, 
+      "IA": 0.17, "OT": 0.17, "CL": 0.17, "RC": 0.17, "RM": 0.17, "OS": 0.17, "OP": 0.16, "CT": 0.16, "FO": 0.16, "UC": 0.16, 
+      "UP": 0.16, "RR": 0.16, "JE": 0.16, "HO": 0.16, "UD": 0.15, "CR": 0.15, "EB": 0.15, "EO": 0.15, "IF": 0.15, "FR": 0.14, 
+      "RU": 0.14, "UA": 0.14, "NP": 0.14, "IG": 0.14, "BA": 0.14, "BR": 0.14, "OC": 0.14, "CU": 0.14, "FE": 0.13, "UM": 0.13, 
+      "EX": 0.13, "BI": 0.13, "BE": 0.13, "GN": 0.13, "MB": 0.13, "AF": 0.12, "HI": 0.12, "EJ": 0.12, "NF": 0.12, "GI": 0.12, 
+      "PP": 0.12, "GA": 0.11, "FF": 0.11, "PU": 0.11, "BO": 0.11, "SF": 0.11, "SR": 0.11, "LS": 0.11, "TQ": 0.11, "OD": 0.1, 
+      "PH": 0.1, "TM": 0.1, "DR": 0.1, "NU": 0.1, "NV": 0.1, "RN": 0.1, "PI": 0.1, "OB": 0.09, "GU": 0.09, "NL": 0.09, 
+      "OG": 0.09, "JO": 0.09, "IP": 0.09, "TH": 0.08, "RP": 0.08, "SB": 0.08, "JA": 0.08, "NM": 0.08, "SN": 0.08, "YS": 0.08, 
+      "MU": 0.08, "UB": 0.08, "VR": 0.08, "SV": 0.08, "YA": 0.07, "XE": 0.07, "RG": 0.07, "EZ": 0.07, "CC": 0.07, "NQ": 0.07, 
+      "IB": 0.07, "SG": 0.07, "NR": 0.06, "AE": 0.06, "RV": 0.06, "LD": 0.06, "EH": 0.06, "SH": 0.06, "AY": 0.06, "PT": 0.06, 
+      "OY": 0.05, "XP": 0.05, "DS": 0.05, "RQ": 0.05, "TF": 0.05, "FL": 0.05, "YE": 0.05, "SJ": 0.05, "LH": 0.05, "JU": 0.05, 
+      "LT": 0.05, "FU": 0.05, "UF": 0.05, "AQ": 0.05, "IX": 0.05, "PS": 0.05, "TN": 0.05, "XI": 0.05, "GO": 0.05, "UG": 0.04, 
+      "TJ": 0.04, "TV": 0.04, "RB": 0.04, "UO": 0.04, "LQ": 0.04, "SY": 0.04, "AA": 0.04, "TB": 0.04, "HU": 0.04, "AJ": 0.04,
+      "BU": 0.04, "OF": 0.04, "XD": 0.04, "RF": 0.04, "LP": 0.04, "NB": 0.03, "UJ": 0.03, "GL": 0.03, "HY": 0.03, "UU": 0.03, 
+      "LN": 0.03, "XA": 0.03, "LY": 0.03, "NH": 0.03, "XT": 0.03, "XC": 0.03, "NJ": 0.03, "OV": 0.03, "II": 0.03, "LC": 0.03, 
+      "DD": 0.03, "LF": 0.03, "YC": 0.03, "LM": 0.02, "DM": 0.02, "BS": 0.02, "DH": 0.02, "LG": 0.02, "VU": 0.02, "CD": 0.02, 
+      "AH": 0.02, "YP": 0.02, "TY": 0.02, "TG": 0.02, "CS": 0.02, "OQ": 0.02, "XM": 0.02, "LR": 0.02, "ZE": 0.02, "CK": 0.02, 
+      "AO": 0.02, "UQ": 0.02, "CY": 0.02, "WA": 0.02, "KO": 0.02, "XQ": 0.02, "XL": 0.02, "DL": 0.02, "RJ": 0.02, "IJ": 0.02, 
+      "FS": 0.02, "XS": 0.02, "XV": 0.02, "HR": 0.01, "RY": 0.01, "GT": 0.01, "OE": 0.01, "BJ": 0.01, "GM": 0.01, "LV": 0.01, 
+      "HN": 0.01, "IU": 0.01, "EY": 0.01, "XU": 0.01, "NY": 0.01, "KE": 0.01, "AZ": 0.01, "MD": 0.01, "RH": 0.01, "YO": 0.01, 
+      "YR": 0.01, "ZL": 0.01, "ZO": 0.01, "MY": 0.01, "SW": 0.01, "YM": 0.01, "DP": 0.01, "LB": 0.01, "XO": 0.01, "GS": 0.01, 
+      "CQ": 0.01, "RK": 0.01, "OA": 0.01, "MS": 0.01, "OH": 0.01, "ZA": 0.01, "DC": 0.01, "KA": 0.01, "NZ": 0.01, "XF": 0.01, 
+      "DT": 0.01, "PD": 0.01, "YL": 0.01, "ZV": 0.01, "MN": 0.01, "UH": 0.01, "BT": 0.01, "DJ": 0.01, "XX": 0.01, "YD": 0.01, 
+      "EW": 0.01, "OO": 0.01, "XB": 0.01, "ML": 0.01, "GD": 0.01, "YT": 0.01, "EK": 0.01, "ZD": 0.01, "DY": 0.01, "XN": 0.01, 
+      "KI": 0.01, "YN": 0.01, "BB": 0.01, "ZM": 0.01, "CM": 0.01, "AX": 0.01, "CP": 0.01, "LJ": 0.01, "FD": 0.01, "WE": 0.01, 
+      "ZP": 0.01, "UY": 0.01, "YF": 0.01, "AK": 0.01, "HM": 0.01, "ZI": 0.01, "DN": 0.01, "MT": 0.01, "WI": 0.01, "XR": 0.01,
+      "SX": 0.01, "DQ": 0.01
+   };
+   var table = "";
+   table += "";
+   for(var letter in referenceLetters){
+      table += "";
+   }
+   table += "";
+   table += "";
+   for(var letter in referenceLetters){
+      table += "";
+   }
+   table += "";
+   table += "";
+   for(var letter in referenceLetters){
+      table += "";
+   }
+   table += "
" + letter + "
Français" + referenceLetters[letter] + "
Texte" + (letterFreq[letter] || 0) + "
";
+   table += "";
+   table += "";
+   for(var digraph in referenceDigraphs){
+      table += "";
+   }
+   table += "";
+   table += "";
+   for(var digraph in referenceDigraphs){
+      table += "";
+   }
+   table += "";
+   table += "";
+   for(var digraph in referenceDigraphs){
+      table += "";
+   }
+   table += "
" + digraph + "
Français" + referenceDigraphs[digraph] + "
Texte" + (digraphFreq[digraph] || 0) + "
";
+   table += "";
+   table += "";
+   for(var word in wordFreq){
+      table += "";
+   }
+   table += "";
+   table += "";
+   for(var word in wordFreq){
+      table += "";
+   }
+   table += "
" + word + "
Texte" + (wordFreq[word] || 0) + "
";
+
+
+   $("#freq").empty();
+   $("#freq").append(table);
+};
+
+function generateWordList(block) {
+   var text = "";
+   var blockLabel = structureTypes[block];
+   if(!blockLabel){
+      return "";
+   }else if(set.hasOwnProperty(blockLabel)){
+      for(var subset of set[blockLabel]){
+         var subsetIndex = structureTypes.indexOf(subset[0]);
+         text += generateWordList(subsetIndex);
+      }
+   }else if(blockLabel.startsWith("adj")){
+      var place = (blockLabel === "adjBefore") ? "before": "after";
+      for(var adj of adjectives[place]){
+         var gender = $("#gender").val();
+         var plural = $("#number").val();
+         text += makeAdjectiveAgree(adj,gender,plural);
+         text += "
";
+      }
+   }else if(blockLabel.startsWith("adv-")){
+      var batch = batches[blockLabel];
+      for(var adv of batch){
+         text += adv+"
";
+      }
+   }else{
+      var batch = batches[blockLabel];
+      var plural = (blockLabel.includes("-P")) ? 1 : 0;
+      var personIndex = $("#person").val();
+      var person = personIndex%3 + 1;
+      var pluralVerb = (personIndex <= 2) ? 0 : 1;
+      var tenseIndex = $("#tense").val();
+      var tense = tenses[tenseIndex];
+      if(blockLabel === "VT" || blockLabel === "VI"){
+         for(var word of batch){
+            text += conjugate(word,person,pluralVerb,"M",tense,false,Math.random);
+            text += "
";
+         }
+      }else{
+         for(var subset of batch){
+            for(var word of subset[0]){
+               text += (plural) ? pluralize(word[0],word[1]) : word[0];
+               text += "
";
+            }
+         }
+      }
+   }
+   return text;
+};
+
+function getWord(block,person,plural,gender,tense,rng,coBefore) {
+   if(set.hasOwnProperty(block)){
+      block = pickOne(set[block],rng,false,true);
+      return getWord(block,person,plural,gender,tense,rng,coBefore);
+   }
+   if(block.startsWith("double-")){
+      var word1 = getWord(block.substring(7),person,plural,gender,tense,rng,coBefore);
+      var word2 = getWord(block.substring(7),person,plural,gender,tense,rng,coBefore);
+      var word = word1[0] + " et " + word2[0];
+      person = 3;
+      plural = 1;
+      gender = (word1[3] === "F" && word2[3] === "F") ? "F" : "M";
+      return [word,person,plural,gender];
+   }
+   if(block.endsWith("-de")){
+      var word1 = getWord(block.replace(/-de$/,"-beforeDe"),person,plural,gender,tense,rng,coBefore);
+      var word2 = getWord("de+Noun",person,plural,gender,tense,rng,coBefore);
+      var countryM = false;
+      for(var country of nouns["country"].M){
+         if(country[0].toLowerCase() === word2[0].toLowerCase()){
+            countryM = true;
+         }
+      }
+      if(countryM){
+         var word = elide(word1[0] + " du " + word2[0]);
+      }else{
+         var word = elide(word1[0] + " de " + word2[0]);
+      }
+      return [word,word1[1],word1[2],word1[3]];
+   }
+   if(block.endsWith("-que")){
+      var mainSubject = getWord(block.replace(/-que$/,"-beforeQue"),person,plural,gender,tense,rng);
+      var structSubRel = pickOne(structuresQue,rng,false,true);
+      var subRel = "";
+      var personSubRel = 3;
+      var pluralSubRel = 0;
+      var genderSubRel = "M";
+      for(var subBlock of structSubRel){
+         var newWord = getWord(subBlock,personSubRel,pluralSubRel,genderSubRel,tense,rng,mainSubject);
+         subRel += newWord[0] + " ";
+         personSubRel = newWord[1];
+         pluralSubRel = newWord[2];
+         genderSubRel = newWord[3];
+      }
+      var word = elide(mainSubject[0] + " que " + subRel);
+      return [word,mainSubject[1],mainSubject[2],mainSubject[3]];  
+   }
+   var batch = batches[block];
+   switch(block){
+      case "N-M-S-noDet":
+      case "N-F-S-noDet":
+      case "N-M-S-noDetBeforeQue":
+      case "N-F-S-noDetBeforeQue":
+      case "CO-M-S-noDet":
+      case "CO-F-S-noDet":
+      case "CO-M-S-noDetBeforeQue":
+      case "CO-F-S-noDetBeforeQue":
+      case "N-M-P-noDet":
+      case "N-F-P-noDet":
+      case "N-M-P-noDetBeforeQue":
+      case "N-F-P-noDetBeforeQue":
+      case "CO-M-P-noDet":
+      case "CO-F-P-noDet":
+      case "CO-M-P-noDetBeforeQue":
+      case "CO-F-P-noDetBeforeQue":
+         person = 3;
+         plural = block.includes("-P-") ? 1 : 0;
+         gender = block.includes("-F-") ? "F" : "M";
+         var type = pickOne(batch,rng,false,true);
+         var word = pickOne(type,rng)[plural];
+         break;
+      case "de+Noun":
+         var type = pickOne(batch,rng,false,true);
+         var word = pickOne(type,rng)[0];
+         break;
+      case "N-M-S":
+      case "N-M-S-adj":
+      case "N-M-S-beforeDe":
+      case "N-M-S-adj-beforeDe":
+      case "N-F-S":
+      case "N-F-S-adj":
+      case "N-F-S-beforeDe":
+      case "N-F-S-adj-beforeDe":
+      case "CO-M-S":
+      case "CO-F-S":
+      case "CO-M-S-adj":
+      case "CO-F-S-adj":
+      case "CO-M-S-beforeDe":
+      case "CO-F-S-beforeDe":
+      case "CO-M-S-adj-beforeDe":
+      case "CO-F-S-adj-beforeDe":
+         person = 3;
+         plural = 0;
+         gender = block.includes("-M-") ? "M" : "F";
+         var type = pickOne(batch,rng,false,true);
+         var noun = pickOne(type,rng)[0];
+         if(isCountry(noun) || block.endsWith("-beforeDe")){    // if country or before "de"
+            var det = getDeterminer(gender,0,"definite_article",rng);
+         }else{
+            var det = getDeterminer(gender,0,"",rng);
+         }
+         if(block.endsWith("-adj") || block.includes("-adj-")){
+            var word = addAdjective(noun,det,gender,plural,rng);
+         }else{
+            var word = elide(det + " " + noun);
+         }
+         break;
+      case "N-M-P":
+      case "N-M-P-adj":
+      case "N-M-P-beforeDe":
+      case "N-M-P-adj-beforeDe":
+      case "N-F-P":
+      case "N-F-P-adj":
+      case "N-F-P-beforeDe":
+      case "N-F-P-adj-beforeDe":
+      case "CO-M-P":
+      case "CO-F-P":
+      case "CO-M-P-adj":
+      case "CO-F-P-adj":
+      case "CO-M-P-beforeDe":
+      case "CO-F-P-beforeDe":
+      case "CO-M-P-adj-beforeDe":
+      case "CO-F-P-adj-beforeDe":
+         person = 3;
+         plural = 1;
+         gender = block.includes("-M-") ? "M" : "F";
+         var type = pickOne(batch,rng,false,true);
+         var nounIndex = Math.trunc(rng() * type.length);
+         var noun = pluralize(type[nounIndex][0],type[nounIndex][1]);
+         if(block.endsWith("-beforeDe")){ 
+            var det = getDeterminer(gender,1,"definite_article",rng);
+         }else{
+            var det = getDeterminer(gender,1,"",rng);
+         }
+         if(block.endsWith("-adj") || block.includes("-adj-")){
+            var word = addAdjective(noun,det,gender,plural,rng);
+         }else{
+            var word = elide(det + " " + noun);
+         }
+         break;
+      case "1P-S":
+      case "2P-S":
+      case "1P-P":
+      case "2P-P":
+         person = block.charAt(0);
+         plural = block.endsWith("-S") ? 0 : 1;
+         var word = batch[0][0][0][plural];
+         break;
+      case "VI":
+      case "VT":
+      case "VI-neg":
+      case "VT-neg":
+      case "VI-negWithAdv":
+      case "VT-negWithAdv":
+         var verb = pickOne(batch,rng);
+         var negation = block.includes("-neg") ? 1 : 0;
+         var word = conjugate(verb,person,plural,gender,tense,negation,rng,coBefore);
+         break;
+      case "adv-aftVerb":
+      // case "adv-aftNegVerb":
+      case "adv-beforeAdj":
+      case "adv-locution":
+         var word = pickOne(batch,rng);
+         break;
+      case "VI-str":
+      case "VT-str":
+         var verbStructure = (tense === "passé_composé") ? pickOne(verbStructuresWithPC[block],rng,false,true) : pickOne(verbStructures[block],rng,false,true);
+         var verb = "";
+         for(var subBlock of verbStructure){
+            verb += getWord(subBlock,person,plural,gender,tense,rng,coBefore)[0]+" ";
+         }
+         var word = verb;
+   }
+   if(!word){
+      console.log(block);
+   }
+   return [word,person,plural,gender];
+}
+
+function generateText(rng,minLength,maxLength,withSpaces){
+   var text = "";
+   var curLength = 0;
+   while (curLength < minLength) {
+      var sentence = generateSentence(rng,1,"all",withSpaces,true);
+      curLength += sentence.length;
+      text += sentence;
+   }
+   if(text.length > maxLength){
+      text = text.substr(0,minLength + Math.trunc((maxLength - minLength)/2));
+   }
+   return text;
+};
+
+function generateSentence(rng,n,struc,withSpaces,textMode){
+   var curLength = 0;
+   var text = "";
+   for(var iSentence = 0; iSentence < n; iSentence++){
+      var sentence = "";
+      var structure = (struc === "all") ? pickOne(structures,rng,false,true) : structures[struc][0];
+      var person = 3;
+      var plural = 0;
+      var gender = "M";
+      var tense = pickOne(tenses,rng);
+      for(var block of structure){
+         var word = getWord(block,person,plural,gender,tense,rng);
+         person = word[1];
+         plural = word[2];
+         gender = word[3];
+         sentence += word[0]+" ";
+      }
+      sentence = elide(sentence);
+      sentence = cleanUpSpecialChars(sentence, withSpaces);
+      // if (sentence.length > (maxLength - curLength - 20)) {
+      //    continue;
+      // }
+      curLength += sentence.length;
+      if(!textMode){
+         text += "
"+sentence+"
";
+      }else{
+         text += sentence;
+         if(withSpaces){
+            text += " ";
+         }
+      }
+      
+   }
+   // var iLastSentence = Math.trunc(rng() * sentences.length);
+   // for (var iDelta = 0; iDelta < sentences.length; iDelta++) {
+   //    var iSentence = (iLastSentence + iDelta) % sentences.length;
+   //    var sentence = cleanUpSpecialChars(sentences[iSentence], withSpaces);
+   //    var newLength = curLength + sentence.length;
+   //    if ((newLength >= minLength) && (newLength <= maxLength)) {
+   //       text += sentence;
+   //       return text;
+   //    }
+   // }
+   // console.log("Error : unable to generate sentences of correct length");
+   return text;
+}
+
+function getDeterminer(gender,plural,type,rng) {
+   var determinerType = (type) ? type : pickOne(determinerTypes,rng,(determinerTypes.length - 1 + plural),true);
+   if(determinerType != "numeral_adjective"){
+      if(plural){
+         var determiner = determiners[determinerType][gender][0][1];
+      }else{
+         var determiner = determiners[determinerType][gender][0][0];
+      }
+   }else{
+      var determiner = pickOne(determiners[determinerType],rng)[0];
+   }
+   return determiner;
+};
+
+function getAdjective(place,gender,plural,rng) {
+   var adj = pickOne(adjectives[place],rng);
+   var adjText = makeAdjectiveAgree(adj,gender,plural);
+   return adjText;
+};
+
+function makeAdjectiveAgree(adj,gender,plural){
+   var adjText = adj[0];
+   if(gender === "F" && adj[1].length < 2){
+      adjText += adj[1];
+   }else if(gender === "F" && adj[1].length >= 2){
+      adjText = adj[1];
+   }
+   if(plural && plural !== "0"){
+      adjText = pluralize(adjText);
+   }
+   return adjText;
+}
+
+function addAdjective(noun,det,gender,plural,rng) {
+   var place = pickOne(adjectiveTypes,rng);
+   var adj = getAdjective(place,gender,plural,rng);
+   if(place && place === "before"){
+      if(det.toLowerCase() === "des"){
+         det = "de";
+      }
+      var text = elide(det + " " + adj + " " + noun);
+   }else{
+      var withAdv = Math.trunc(rng() * 20);
+      if(withAdv === 0){
+         var adv = pickOne(adverbs["beforeAdj"],rng);
+      }else{
+         var adv = "";
+      }
+      var text = elide(det + " " + noun + " " + adv + " " + adj);
+   }
+   return text;
+};
+
+function pluralize(str,plural) {
+   str = str.trim();
+   str = str.toLowerCase();
+   if(plural){
+      return plural;
+   }
+   if(str.includes(" ")){
+      var array = str.split(" ");
+      var newStr = "";
+      for(var st of array){
+         newStr += pluralize(st)+" ";
+      }
+      return newStr;
+   }
+   if(str.endsWith("s") || str.endsWith("x")){
+      return str;
+   }else if(str.endsWith("al") && str != "chacal" && str != "banal" && str != "narval"){
+      return str.replace(/al$/,"aux");
+   }else if(str.endsWith("au")){
+      return str.replace(/au$/,"aux");
+   }else{
+      return str+"s";
+   }
+};
+
+function conjugate(verb,person,plural,gender,tense,negation,rng,coBefore) {
+   var infinitive = verb[0].toLowerCase();
+   var group = verb[1];
+   var aux = verb[2];
+   if(tense === "infinitive"){
+      return infinitive;
+   }else if(tense === "passé_composé"){
+      var auxConj = auxConjugations[aux]["present"][person - 1 + plural * 3];
+      var ending = pastParticiples[group - 1];
+      if(aux && gender === "F" || (coBefore && !aux && coBefore[3] === "F")){
+         ending += "e";
+      }
+      if(aux && plural || (coBefore && !aux && coBefore[2])){
+         ending += "s";
+      }
+      if(group === 1){
+         var verbPP = infinitive.replace(/er$/,ending);
+      }else if(group === 2){
+         var verbPP = infinitive.replace(/ir$/,ending);
+      }
+      if(negation){
+         var negationWord = block.endsWith("-negWithAdv") ? "pas" : pickOne(negationWords,rng);
+         return elide("ne " + auxConj + " " + negationWord + " " + verbPP);
+      }else{
+         return auxConj + " " + verbPP;
+      }
+   // }else if(group === 0){ // auxiliaires
+   //    if(infinitive === "être"){
+   //       return auxConjugations[0][tense][person - 1 + plural * 3];
+   //    }else{
+   //       return auxConjugations[1][tense][person - 1 + plural * 3];
+   //    }
+   }else if(group === 1){
+      var ending = conjugations[group-1][tense][person - 1 + plural * 3];
+      if((infinitive.endsWith("ger") && tense === "present" && person === 1 && plural === 1) || 
+         (infinitive.endsWith("ger") && tense === "imparfait" && (plural === 0 || (plural === 1 && person === 3)))){   // exceptions orthographiques (sans tenir compte de l'accentuation)
+         ending = "e"+ending;
+         var verbConj = infinitive.replace(/er$/,ending);
+      }else if((infinitive.endsWith("oyer") || infinitive.endsWith("uyer")) && tense !== "imparfait"){
+         if(tense === "present" && plural && (person == 1 || person == 2)){
+            var verbConj = infinitive.replace(/er$/,ending);
+         }else{
+            var verbConj = infinitive.replace(/yer$/,"i"+ending); 
+         }
+      }else if(infinitive.endsWith("eler") && !exceptions[0].includes(infinitive) && tense !== "imparfait"){
+         if(tense === "present" && plural && (person == 1 || person == 2)){
+            var verbConj = infinitive.replace(/er$/,ending);
+         }else{
+            var verbConj = infinitive.replace(/er$/,"l"+ending);
+         }
+      }else if(infinitive.endsWith("eter") && !exceptions[0].includes(infinitive) && tense !== "imparfait"){
+         if(tense === "present" && plural && (person == 1 || person == 2)){
+            var verbConj = infinitive.replace(/er$/,ending);
+         }else{
+            var verbConj = infinitive.replace(/er$/,"t"+ending);
+         }
+      }else{
+         var verbConj = infinitive.replace(/er$/,ending);
+      }
+   }else if(group === 2){
+      var ending = conjugations[group-1][tense][person - 1 + plural * 3];
+      var verbConj = infinitive.replace(/r$/,ending);
+   }else if(group === 3){
+      if(infinitive === "aller"){
+         var verbConj = allerConj[tense][person - 1 + plural * 3];
+      }else if(infinitive === "pouvoir"){
+         var ending = speConjugations[2][tense][person - 1 + plural * 3];
+         var verbConj = infinitive.replace(/ouvoir$/,ending);
+      }else if(infinitive === "vouloir"){
+         var ending = speConjugations[1][tense][person - 1 + plural * 3];
+         var verbConj = infinitive.replace(/ouloir$/,ending);
+      }else if(infinitive === "devoir"){
+         var ending = speConjugations[3][tense][person - 1 + plural * 3];
+         var verbConj = infinitive.replace(/evoir$/,ending);
+      }else if(infinitive.endsWith("enir")){
+         var ending = speConjugations[0][tense][person - 1 + plural * 3];
+         var verbConj = infinitive.replace(/enir$/,ending);
+      }else if(infinitive.endsWith("ir") && !infinitive.endsWith("oir")&& !infinitive.endsWith("courir") ){
+         var ending = conjugations[0][tense][person - 1 + plural * 3];
+         var verbConj = infinitive.replace(/ir$/,ending);
+      }else{
+         var verbConj = infinitive;
+      }
+   }else{
+      var verbConj = infinitive;
+   }
+   if(negation){
+      var negationWord = block.endsWith("-negWithAdv") ? "pas" : pickOne(negationWords,rng);
+      return elide("ne " + verbConj + " " + negationWord);
+   }else{
+      return verbConj;
+   }
+};
+
+function elide(str) {
+   // str = cleanUpSpecialChars(str,true);
+   str = str.toLowerCase();
+   str = str.replace(/[èéêë]/g,"e");
+   str = str.replace(/[ôö]/g,"o");
+   str = " " + str; 
+   str = str.replace(/[ ](le|la)[ ]+([aeiouy][^a])/gi," l'$2");
+   str = str.replace(/[ ](ce)[ ]+([aeiouy][^a])/gi," cet $2");
+   str = str.replace(/[ ](de|du)[ ]+([aeiouy][^a])/gi," d'$2");
+   str = str.replace(/[ ](je)[ ]+([aeiouy][^a])/gi," j'$2");
+   str = str.replace(/[ ](ne)[ ]+([aeiouy][^a])/gi," n'$2");
+   str = str.replace(/[ ](que)[ ]+([aeiouy][^a])/gi," qu'$2");
+   str = str.replace(/[ ]à[ ]+le[ ]/gi," au ");
+   str = str.replace(/[ ]à[ ]+les[ ]/gi," aux ");
+   str = str.trim();
+   var words = str.split(" ");
+   str = "";
+   for(var wordIndex in words){ // élision pour les mots en H
+      // console.log(word);
+      var hElide = false;
+      if(wordIndex > 0 && (elisionWithH.includes(words[wordIndex]) || isHVerb(words[wordIndex]))){
+        words[wordIndex - 1] = elideH( " " + words[wordIndex - 1] + " " + words[wordIndex]);
+        words[wordIndex] = "";
+      }
+   }
+   for(var word of words){
+      str += word + " ";
+   }
+   return str;
+};
+
+function isHVerb(word) {
+   for(var radical of elisionWithHVerb) {
+      if(word.startsWith(radical)){
+         return true;
+      }
+   }
+   return false;
+};
+
+function elideH(str) {
+   str = str.replace(/[ ](je)[ ]+(h[aeiouy])/gi," j'$2");
+   str = str.replace(/[ ](ne)[ ]+(h[aeiouy])/gi," n'$2");
+   str = str.replace(/[ ](le|la)[ ]+(h[aeiouy])/gi," l'$2");
+   str = str.replace(/[ ](ce)[ ]+(h[aeiouy])/gi," cet $2");
+   str = str.replace(/[ ](de)[ ]+(h[aeiouy])/gi," d'$2");
+   str = str.replace(/[ ](que)[ ]+(h[aeiouy])/gi," qu'$2");
+   return str;
+};
+
+function cleanUpSpecialChars(str, withSpaces) {
+    str = str.replace(/[ÀÁÂÃÄÅ]/g,"A");
+    str = str.replace(/[àáâãäå]/g,"a");
+    str = str.replace(/[ÈÉÊË]/g,"E");
+    str = str.replace(/[èéêë]/g,"e");
+    str = str.replace(/[îï]/g,"i");
+    str = str.replace(/[ôö]/g,"o");
+    str = str.replace(/[ùüû]/g,"u");
+    str = str.replace(/[Ç]/g,"C");
+    str = str.replace(/[ç]/g,"c");
+    str = str.replace(/['-]/g," ");
+    str = str.replace(/ {2,}/gi," ");
+    str = str.replace(/[^a-zA-Z ]/gi,''); // final clean up
+    str = str.trim();
+    if (!withSpaces) {
+       str = str.replace(/[ ]/g,"");
+    }
+    return str.toUpperCase();
+};
+
+function pickOne(arr,rng,length,weighting) {
+   if(weighting){
+      var weightedArray = [];
+      for(var weightedElement of arr){
+         var element = weightedElement[0];
+         var weight = weightedElement[1];
+         for(var nTimes = 0; nTimes < weight; nTimes++){
+            weightedArray.push(element);
+         }
+      }
+      arr = weightedArray;
+   }
+   if(length){
+      var arrLength = length;
+   }else{
+      var arrLength = arr.length;
+   }
+   return arr[Math.trunc(rng() * arrLength)];
+};
+
+function isCountry(noun) {
+   for(var gender in nouns["country"]){
+      for(var country of nouns["country"][gender]){
+         if(country[0].toLowerCase() === noun.toLowerCase()){
+            return true;
+         }
+      }
+   }
+   return false;
+};
+
+const structureTypes = [
+   "N-M-S-noDet", // nom masculin singulier sans déterminant
+   "N-M-S",
+   "N-F-S-noDet", 
+   "N-F-S",
+   "N-M-P-noDet", 
+   "N-M-P",
+   "N-F-P-noDet", 
+   "N-F-P",
+   "1P-S",  // 1ère personne su singulier
+   "2P-S",
+   // "3P-S",  // 3ème personne du singulier, regroupe plusieurs types (cf. array set)
+   "1P-P",
+   "2P-P",
+   // "3P-P",  // 3ème personne du pluriel, regroupe plusieurs types (cf. array set)
+   "VI",    // verbe intransitif
+   "VT",
+   "CO-M-S-noDet",   // complément d'objet direct masculin singulier sans déterminant
+   "CO-M-S",
+   "CO-F-S-noDet",
+   "CO-F-S",
+   "CO-M-P-noDet",
+   "CO-M-P",
+   "CO-F-P-noDet",
+   "CO-F-P",
+   "adjBefore",
+   "adjAfter",
+   "adv-aftVerb",
+   // "adv-aftNegVerb",
+   "adv-beforeAdj",
+   "adv-locution",
+   "de+Noun" // nom après "de"
+];
+const structures = [ // [structure,weight]
+   [["3P-S","VI-str"],40],
+   [["3P-P","VI-str"],20],
+   [["3P-S","VT-str","CO"],80],
+   [["3P-P","VT-str","CO"],40],
+   [["1P-S","VI-str"],10],
+   [["2P-S","VI-str"],10],
+   [["1P-P","VI-str"],5],
+   [["2P-P","VI-str"],5],
+   [["1P-S","VT-str","CO"],20],
+   [["2P-S","VT-str","CO"],20],
+   [["1P-P","VT-str","CO"],10],
+   [["2P-P","VT-str","CO"],10],
+   [["adv-locution","3P-S","VI-str"],20],
+   [["adv-locution","3P-P","VI-str"],10],
+   [["adv-locution","3P-S","VT-str","CO"],40],
+   [["adv-locution","3P-P","VT-str","CO"],20],
+   [["adv-locution","1P-S","VI-str"],5],
+   [["adv-locution","2P-S","VI-str"],5],
+   [["adv-locution","1P-P","VI-str"],3],
+   [["adv-locution","2P-P","VI-str"],3],
+   [["adv-locution","1P-S","VT-str","CO"],10],
+   [["adv-locution","2P-S","VT-str","CO"],10],
+   [["adv-locution","1P-P","VT-str","CO"],5],
+   [["adv-locution","2P-P","VT-str","CO"],5],
+
+   /*** avec subordonnée relative en "que" ***/
+   [["3P-S-que","VI-str"],8],
+   [["3P-P-que","VI-str"],4],
+   [["3P-S-que","VT-str","CO"],16],
+   [["3P-P-que","VT-str","CO"],8],
+   [["adv-locution","3P-S-que","VI-str"],4],
+   [["adv-locution","3P-P-que","VI-str"],2],
+   [["adv-locution","3P-S-que","VT-str","CO"],16],
+   [["adv-locution","3P-P-que","VT-str","CO"],4],
+   [["3P-S","VT-str","CO-que"],16],
+   [["3P-P","VT-str","CO-que"],8],
+   [["1P-S","VT-str","CO-que"],4],
+   [["2P-S","VT-str","CO-que"],4],
+   [["1P-P","VT-str","CO-que"],2],
+   [["2P-P","VT-str","CO-que"],2],
+   [["adv-locution","3P-S","VT-str","CO-que"],8],
+   [["adv-locution","3P-P","VT-str","CO-que"],4],
+   [["adv-locution","1P-S","VT-str","CO-que"],2],
+   [["adv-locution","2P-S","VT-str","CO-que"],2],
+   [["adv-locution","1P-P","VT-str","CO-que"],1],
+   [["adv-locution","2P-P","VT-str","CO-que"],1],
+   [["3P-S-que","VT-str","CO-que"],16],
+   [["3P-P-que","VT-str","CO-que"],8],
+   [["adv-locution","3P-S-que","VT-str","CO-que"],8],
+   [["adv-locution","3P-P-que","VT-str","CO-que"],4]
+];
+const structuresQue = [ // structures de subordonnée relative suivant "que"
+   [["3P-S","VT-str"],80],
+   [["3P-P","VT-str"],40],
+   [["1P-S","VT-str"],20],
+   [["2P-S","VT-str"],20],
+   [["1P-P","VT-str"],10],
+   [["2P-P","VT-str"],10],
+];
+const verbStructures = {
+   "VI-str": [   // [structure,weight]
+      [["VI"],100],
+      [["VI","adv-aftVerb"],5],
+      [["VI-neg"],10],
+      // [["VI-negWithAdv","adv-aftNegVerb"],1]
+   ],
+   "VT-str": [   // [structure,weight]
+      [["VT"],100],
+      [["VT","adv-aftVerb"],5],
+      [["VT-neg"],10],
+      // [["VT-negWithAdv","adv-aftNegVerb"],1]
+   ]
+};
+const verbStructuresWithPC = {
+   "VI-str": [   // [structure,weight]
+      [["VI"],100],
+      [["VI-neg"],10]
+   ],
+   "VT-str": [   // [structure,weight]
+      [["VT"],100],
+      [["VT-neg"],10]
+   ]
+};
+const tenses = [
+   "present",
+   "imparfait",
+   "futur",
+   "passé_composé"
+];
+
+const nmsNoDet = [   // [subset,weight]
+   [nouns["name"].M,1],
+   [pronouns["demonstrative"].M,1],
+   [pronouns["indefinite"].M.filter(word => word[0] != ""),1],
+   [[["il"]],1],
+   [[["le mien"],["le tien"],["le sien"],["le vôtre"],["le nôtre"],["le leur"]],1]
+];
+const nmsNoDetBeforeQue = [   // [subset,weight]
+   [nouns["name"].M,2],
+   [pronouns["demonstrative_2"].M,2],
+   [[["le mien"],["le tien"],["le sien"],["le vôtre"],["le nôtre"],["le leur"],["Quelque chose"]],1]
+];
+const nfsNoDet = [   // [subset,weight]
+   [nouns["name"].F,1],
+   // [nouns["city"],1],
+   [pronouns["demonstrative"].F,1],
+   [pronouns["indefinite"].F.filter(word => word[0] != ""),1],
+   [[["elle"]],1],
+   [[["la mienne"],["la tienne"],["la sienne"],["la vôtre"],["la nôtre"],["la leur"]],1]
+];
+const nfsNoDetBeforeQue = [   // [subset,weight]
+   [nouns["name"].F,1],
+   // [nouns["city"],1],
+   [pronouns["demonstrative_2"].F,1],
+   [[["la mienne"],["la tienne"],["la sienne"],["la vôtre"],["la nôtre"],["la leur"]],1]
+];
+const nmpNoDet = [   // [subset,weight]
+   [pronouns["demonstrative"].M.filter(word => word[1] != ""),1],
+   [pronouns["indefinite"].M.filter(word => word[1] != ""),1],
+   [[["","ils"]],1],
+   [[["","les miens"],["","les tiens"],["","les siens"],["","les vôtres"],["","les nôtres"],["","les leurs"]],1]
+];
+const nmpNoDetBeforeQue = [   // [subset,weight]
+   [pronouns["demonstrative_2"].M.filter(word => word[1] != ""),1],
+   [pronouns["indefinite"].M.filter(word => word[1] != ""),1],
+   [[["","les miens"],["","les tiens"],["","les siens"],["","les vôtres"],["","les nôtres"],["","les leurs"]],1]
+];
+const nfpNoDet = [   // [subset,weight]
+   [pronouns["demonstrative"].F,1],
+   [pronouns["indefinite"].F.filter(word => word[1] != ""),1],
+   [[["","elles"]],1],
+   [[["","les miennes"],["","les tiennes"],["","les siennes"],["","les vôtres"],["","les nôtres"],["","les leurs"]],1]
+];
+const nfpNoDetBeforeQue = [   // [subset,weight]
+   [pronouns["demonstrative_2"].F,1],
+   [pronouns["indefinite"].F.filter(word => word[1] != ""),1],
+   [[["","les miennes"],["","les tiennes"],["","les siennes"],["","les vôtres"],["","les nôtres"],["","les leurs"]],1]
+];
+const nms = [  // [subset,weight]
+   [nouns["job"].M,1],
+   [nouns["animal"].M,1],
+   [nouns["plant"].M,1],
+   [nouns["country"].M,1]
+];
+const nfs = [  // [subset,weight]
+   [nouns["job"].F,1],
+   [nouns["animal"].F,1],
+   [nouns["plant"].F,1],
+   [nouns["country"].F,1]
+];
+const nmp = [  // [subset,weight]
+   [nouns["job"].M,1],
+   [nouns["animal"].M,1],
+   [nouns["plant"].M,1]
+];
+const nfp = [  // [subset,weight]
+   [nouns["job"].F,1],
+   [nouns["animal"].F,1],
+   [nouns["plant"].F,1]
+];
+const p1 = [[[["je","nous"]]]];
+const p2 = [[[["tu","vous"]]]];
+
+const comsNoDet = [  // [subset,weight]
+   [nouns["name"].M,1],
+   [pronouns["demonstrative"].M,1],
+   [pronouns["indefinite"].M.filter(word => (word[0].toLowerCase() != "on" && word[0].toLowerCase() != "quiconque" && word[0].toLowerCase() != "chacun" && word[0] != "")),1],
+   [[["le mien"],["le tien"],["le sien"],["le vôtre"],["le nôtre"],["le leur"]],1]
+];
+const comsNoDetBeforeQue = nmsNoDetBeforeQue;
+const cofsNoDet = [  // [subset,weight]
+   [nouns["name"].F,1],
+   [nouns["city"],1],
+   [pronouns["demonstrative"].F,1],
+   [[["la mienne"],["la tienne"],["la sienne"],["la vôtre"],["la nôtre"],["la leur"]],1]
+];
+const cofsNoDetBeforeQue = nfsNoDetBeforeQue;
+const compNoDet = [  // [subset,weight]
+   [pronouns["demonstrative"].M.filter(word => word[1] != ""),1],
+   [[["","les miens"],["","les tiens"],["","les siens"],["","les vôtres"],["","les nôtres"],["","les leurs"]],1]
+];
+const compNoDetBeforeQue = [   // [subset,weight]
+   [pronouns["demonstrative_2"].M.filter(word => word[1] != ""),1],
+   [[["","les miens"],["","les tiens"],["","les siens"],["","les vôtres"],["","les nôtres"],["","les leurs"]],1]
+];
+const cofpNoDet = [  // [subset,weight]
+   [pronouns["demonstrative"].F,1],
+   [[["","les miennes"],["","les tiennes"],["","les siennes"],["","les vôtres"],["","les nôtres"],["","les leurs"]],1]
+];
+const cofpNoDetBeforeQue = [   // [subset,weight]
+   [pronouns["demonstrative_2"].F,1],
+   [[["","les miennes"],["","les tiennes"],["","les siennes"],["","les vôtres"],["","les nôtres"],["","les leurs"]],1]
+];
+
+const nmsBeforeDe = [
+   [nouns["job"].M,1],
+   [nouns["animal"].M,1],
+   [nouns["plant"].M,1]
+];
+const nfsBeforeDe = [  // [subset,weight]
+   [nouns["job"].F,1],
+   [nouns["animal"].F,1],
+   [nouns["plant"].F,1]
+];
+
+const deNoun = [
+   [nouns["name"].M,1],
+   [nouns["name"].F,1],
+   [nouns["city"],1],
+   [nouns["country"].M,1],
+   [nouns["country"].F,1]
+];
+
+const batches = {
+   "N-M-S-noDet": nmsNoDet,
+   "N-F-S-noDet": nfsNoDet,
+   "N-M-S-noDetBeforeQue": nmsNoDetBeforeQue,
+   "N-F-S-noDetBeforeQue": nfsNoDetBeforeQue,
+   "N-M-P-noDet": nmpNoDet,
+   "N-F-P-noDet": nfpNoDet,
+   "N-M-P-noDetBeforeQue": nmpNoDetBeforeQue,
+   "N-F-P-noDetBeforeQue": nfpNoDetBeforeQue,
+   "N-M-S": nms,
+   "N-M-S-adj": nms,
+   "N-M-S-beforeDe": nmsBeforeDe, // N-M-S with definite article (before "de")
+   "N-M-S-adj-beforeDe": nmsBeforeDe,
+   "N-F-S": nfs,
+   "N-F-S-adj": nfs,
+   "N-F-S-beforeDe": nfsBeforeDe, // N-F-S with definite article (before "de")
+   "N-F-S-adj-beforeDe": nfsBeforeDe,
+   "N-M-P": nmp,
+   "N-M-P-adj": nmp,
+   "N-M-P-beforeDe": nmsBeforeDe, // N-M-P with definite article (before "de")
+   "N-M-P-adj-beforeDe": nmsBeforeDe,
+   "N-F-P": nfp,
+   "N-F-P-adj": nfp,
+   "N-F-P-beforeDe": nfsBeforeDe, // N-F-P with definite article (before "de")
+   "N-F-P-adj-beforeDe": nfsBeforeDe,
+   "1P-S": p1,
+   "2P-S": p2,
+   "1P-P": p1,
+   "2P-P": p2,
+   "VI": verbs["intransitive"],
+   "VT": verbs["transitive"],
+   "VI-neg": verbs["intransitive"],
+   "VT-negWithAdv": verbs["transitive"],
+   "VI-negWithAdv": verbs["intransitive"],
+   "VT-neg": verbs["transitive"],
+   "CO-M-S-noDet": comsNoDet,
+   "CO-F-S-noDet": cofsNoDet,
+   "CO-M-S-noDetBeforeQue": comsNoDetBeforeQue,
+   "CO-F-S-noDetBeforeQue": cofsNoDetBeforeQue,
+   "CO-M-S": nms,
+   "CO-F-S": nfs,
+   "CO-M-S-adj": nms,
+   "CO-F-S-adj": nfs,
+   "CO-M-S-beforeDe": nmsBeforeDe,
+   "CO-F-S-beforeDe": nfsBeforeDe,
+   "CO-M-S-adj-beforeDe": nmsBeforeDe,
+   "CO-F-S-adj-beforeDe": nfsBeforeDe,
+   "CO-M-P-noDet": compNoDet,
+   "CO-F-P-noDet": cofpNoDet,
+   "CO-M-P-noDetBeforeQue": compNoDetBeforeQue,
+   "CO-F-P-noDetBeforeQue": cofpNoDetBeforeQue,
+   "CO-M-P": nmp,
+   "CO-F-P": nfp,
+   "CO-M-P-adj": nmp,
+   "CO-F-P-adj": nfp,
+   "CO-M-P-beforeDe": nmsBeforeDe,
+   "CO-F-P-beforeDe": nfsBeforeDe,
+   "CO-M-P-adj-beforeDe": nmsBeforeDe,
+   "CO-F-P-adj-beforeDe": nfsBeforeDe,
+   "adv-aftVerb": adverbs["aftVerb"],
+   // "adv-aftNegVerb": adverbs["aftNegVerb"],
+   "adv-beforeAdj": adverbs["beforeAdj"],
+   "adv-locution": adverbs["locution"],
+   "de+Noun": deNoun   // préposition de + nom
+};
+
+const set = {
+   "3P-S": [
+      ["N-M-S-noDet",1],
+      ["N-M-S",1],
+      ["N-M-S-de",1],      // groupe (N-M-S + de + nom)
+      ["N-M-S-adj",1],
+      ["N-M-S-adj-de",1],
+      ["N-F-S-noDet",1],
+      ["N-F-S",1],
+      ["N-F-S-de",1],
+      ["N-F-S-adj",1],
+      ["N-F-S-adj-de",1] 
+   ],
+   "3P-S-beforeQue": [
+      ["N-M-S-noDetBeforeQue",1],
+      ["N-M-S",1],
+      ["N-M-S-de",1],      // groupe (N-M-S + de + nom)
+      ["N-M-S-adj",1],
+      ["N-M-S-adj-de",1],
+      ["N-F-S-noDetBeforeQue",1],
+      ["N-F-S",1],
+      ["N-F-S-de",1],
+      ["N-F-S-adj",1],
+      ["N-F-S-adj-de",1] 
+   ],
+   "3P-P": [
+      ["N-M-P-noDet",1],
+      ["N-M-P",1],
+      ["N-M-P-de",1],
+      ["N-M-P-adj",1],
+      ["N-M-P-adj-de",1],
+      ["N-F-P-noDet",1],
+      ["N-F-P",1],
+      ["N-F-P-de",1],
+      ["N-F-P-adj",1],
+      ["N-F-P-adj-de",1],
+      ["double-3P",2]   // sujet1 + "et" + sujet2 
+   ],
+   "3P-P-beforeQue": [
+      ["N-M-P-noDetBeforeQue",1],
+      ["N-M-P",1],
+      ["N-M-P-de",1],
+      ["N-M-P-adj",1],
+      ["N-M-P-adj-de",1],
+      ["N-F-P-noDetBeforeQue",1],
+      ["N-F-P",1],
+      ["N-F-P-de",1],
+      ["N-F-P-adj",1],
+      ["N-F-P-adj-de",1],
+      ["double-3P",2]   // sujet1 + "et" + sujet2 
+   ],
+   "3P": [  // pour les groupes de 2 sujets
+      ["CO-M-S-noDet",1],
+      ["N-M-S",1],
+      ["N-M-S-de",1], 
+      ["N-M-S-adj",1],
+      ["N-M-S-adj-de",1],
+      ["CO-F-S-noDet",1],
+      ["N-F-S",1],
+      ["N-F-S-de",1],
+      ["N-F-S-adj",1],
+      ["N-F-S-adj-de",1], 
+      ["CO-M-P-noDet",1],
+      ["N-M-P",1],
+      ["N-M-P-de",1],
+      ["N-M-P-adj",1],
+      ["N-M-P-adj-de",1],
+      ["CO-F-P-noDet",1],
+      ["N-F-P",1],
+      ["N-F-P-de",1] ,
+      ["N-F-P-adj",1],
+      ["N-F-P-adj-de",1]
+   ],  
+   "CO": [
+      ["CO-M-S-noDet",1],
+      ["CO-M-S",1],
+      ["CO-M-S-de",1],
+      ["CO-M-S-adj",1],
+      ["CO-M-S-adj-de",1],
+      ["CO-F-S-noDet",1],
+      ["CO-F-S",1],
+      ["CO-F-S-de",1],
+      ["CO-F-S-adj",1],
+      ["CO-F-S-adj-de",1],
+      ["CO-M-P-noDet",1],
+      ["CO-M-P",1],
+      ["CO-M-P-de",1],
+      ["CO-M-P-adj",1],
+      ["CO-M-P-adj-de",1],
+      ["CO-F-P-noDet",1],
+      ["CO-F-P",1],
+      ["CO-F-P-de",1],
+      ["CO-F-P-adj",1],
+      ["CO-F-P-adj-de",1]
+   ],
+   "CO-beforeQue": [
+      ["CO-M-S-noDetBeforeQue",1],
+      ["CO-M-S",1],
+      ["CO-M-S-de",1],
+      ["CO-M-S-adj",1],
+      ["CO-M-S-adj-de",1],
+      ["CO-F-S-noDetBeforeQue",1],
+      ["CO-F-S",1],
+      ["CO-F-S-de",1],
+      ["CO-F-S-adj",1],
+      ["CO-F-S-adj-de",1],
+      ["CO-M-P-noDetBeforeQue",1],
+      ["CO-M-P",1],
+      ["CO-M-P-de",1],
+      ["CO-M-P-adj",1],
+      ["CO-M-P-adj-de",1],
+      ["CO-F-P-noDetBeforeQue",1],
+      ["CO-F-P",1],
+      ["CO-F-P-de",1],
+      ["CO-F-P-adj",1],
+      ["CO-F-P-adj-de",1]
+   ]
+};
+
+if(typeof exports != 'undefined') {
+    exports.generate = generateText;
+    exports.generateSentence = generateSentence;
+}
diff --git a/pemFioi/sentences_wordList.js b/pemFioi/sentences_wordList.js
new file mode 100644
index 000000000..712fb64eb
--- /dev/null
+++ b/pemFioi/sentences_wordList.js
@@ -0,0 +1,4388 @@
+(function (exports) {
+
+exports.conjugations = [  // 1er et 2ème groupes
+   { 
+      "present": ["e","es","e","ons","ez","ent"],
+      "imparfait": ["ais","ais","ait","ions","iez","aient"],
+      "futur": ["erai","eras","era","erons","erez","eront"] 
+   },
+   { 
+      "present": ["s","s","t","ssons","ssez","ssent"],
+      "imparfait": ["ssais","ssais","ssait","ssions","ssiez","ssaient"],
+      "futur": ["rai","ras","ra","rons","rez","ront"]   
+   }
+];
+exports.pastParticiples = [  // 1er et 2ème groupes
+   "é","i"
+];
+exports.speConjugations = [  // 3ème groupe
+   { "present": ["iens","iens","ient","enons","enez","iennent"] },
+   { "present": ["eux","eux","eut","oulons","oulez","eulent"] },
+   { "present": ["eux","eux","eut","ouvons","ouvez","euvent"] },
+   { "present": ["ois","ois","oit","evons","evez","oivent"] }
+];
+exports.auxConjugations = [
+   { 
+      "present": ["ai","as","a","avons","avez","ont"],
+      "imparfait": ["avais","avais","avait","avions","aviez","avaient"],
+      "futur": ["aurai","auras","aura","aurons","aurez","auront"] 
+   },
+   { 
+      "present": ["suis","es","est","sommes","êtes","sont"],
+      "imparfait": ["étais","étais","était","étions","étiez","étaient"],
+      "futur": ["serai","seras","sera","serons","serez","seront"] 
+   }
+];
+exports.allerConj = {
+   "present": ["vais","vas","va","allons","allez","vont"]
+};
+exports.exceptions = [
+   [ "acheter", "geler", "haleter", "déceler", "modeler", "ciseler", "congeler", "marteler", "crocheter" ]
+];
+
+exports.negationWords = [
+   "pas",
+   "plus",
+   "jamais",
+   "même pas",
+   "même plus",
+   "nullement",
+   "pas assez",
+   "pas beaucoup",
+   "pas complètement",
+   "pas du tout",
+   "pas encore",
+   "pas sérieusement",
+   "pas suffisamment",
+   "pas tellement",
+   "pas tout à fait",
+   "pas vraiment",
+   "plus assez",
+   "plus beaucoup",
+   "plus du tout",
+   "plus suffisamment",
+   "plus tellement",
+   "plus vraiment"
+   ];
+
+exports.determinerTypes = [
+   ["definite_article",1],
+   ["indefinite_article",2],
+   ["demonstrative_adjective",1],
+   ["numeral_adjective",1]
+   ];
+exports.determiners = {
+   "definite_article": {
+      "M": [
+         [ "le", "les" ]
+      ],
+      "F": [
+         [ "la", "les" ]
+      ]
+   },
+   "indefinite_article": {
+      "M": [
+         [ "un", "des" ]
+      ],
+      "F": [
+         [ "une", "des" ]
+      ]
+   },
+   "demonstrative_adjective": {
+      "M": [
+         [ "ce", "ces" ]
+      ],
+      "F": [
+         [ "cette", "ces" ]
+      ]
+   },
+   "numeral_adjective": [
+      ["deux"], ["trois"], ["quatre"], ["cinq"], ["six"], ["sept"], ["huit"], ["neuf"], ["dix"], 
+      ["onze"], ["douze"], ["treize"], ["quatorze"], ["quinze"], ["seize"], ["dix-sept"], ["dix-huit"], ["dix-neuf"], ["vingt"]
+   ]
+};
+
+exports.pronounTypes = ["personal","personal_2","possessive","demonstrative","demonstrative_2","indefinite","relative","relative_2"];
+exports.subjPronounTypes = ["personal","demonstrative_2","indefinite"];
+exports.pronouns = {
+/*   "personal": [  // [name, gender, plural, person]
+      [ "Je", 2, 0, 1 ],
+      [ "Tu", 2, 0, 2 ],
+      [ "Il", 3, 0, 3 ],
+      [ "Il", 1, 0, 3 ],
+      [ "Elle", 0, 0, 3 ],
+      [ "Nous", 2, 1, 1 ],
+      [ "Vous", 2, 1, 2 ],
+      [ "Ils", 1, 1, 3 ],
+      [ "Elles", 0, 1, 3 ] ],*/
+   // "personal_2": [  // [name, gender, plural, person]
+   //    [ "Moi", 2, 0, 1 ],
+   //    [ "Toi", 2, 0, 2 ],
+   //    [ "Lui", 3, 0, 3 ],
+   //    [ "Elle", 0, 0, 3 ],
+   //    [ "Nous", 2, 1, 1 ],
+   //    [ "Vous", 2, 1, 2 ],
+   //    [ "eux", 1, 1, 3 ],
+   //    [ "Elles", 0, 1, 3 ] ],
+   "demonstrative": {
+      "M": [   // [singular, plural]
+         [ "celui-ci", "ceux-ci" ],
+         [ "celui-là", "ceux-là" ],
+         [ "ceci", "" ],
+         [ "cela", "" ] ,
+         [ "ça", "" ] 
+      ],
+      "F": [   // [singular, plural]
+         [ "celle-ci", "celles-ci" ],
+         [ "celle-là", "celles-là" ],
+      ]
+   },
+   "demonstrative_2": {
+      "M": [   // [singular, plural]
+         [ "celui", "ceux" ],
+         [ "ce", "" ] 
+      ],
+      "F": [   // [singular, plural]
+         [ "celle", "celles" ]
+      ]
+   },
+   "indefinite": {
+      "M": [
+         [ "Autrui", "" ],
+         [ "", "Certains" ],
+         [ "Chacun", "" ],
+         [ "On", "" ],
+         // [ "Personne", "" ],
+         [ "Quiconque", "" ],
+         [ "N'importe qui", "" ],
+         [ "Tout le monde", "" ],
+         [ "Quelque chose", "" ],
+         // [ "Rien", "" ],
+         [ "Tout", "" ] 
+      ],
+      "F": [
+         [ "", "Certaines" ],
+         [ "Chacune", "" ],
+      ]
+   }
+   // "relative": [ "Qui", "Que", "Quoi", "Dont", "Où" ],
+   // "relative_2": [ // [name, gender, plural]
+   //    ["lequel", 1, 0],
+   //    ["lesquels", 1, 1],
+   //    ["laquelle", 0, 0],
+   //    ["lesquelles", 0, 1] ]  
+};
+exports.nounTypes = ["name","job","animal","plant","country","city"];
+exports.nouns = {
+   "name": { 
+      "M": [
+         [ "Achille" ],
+         [ "Adam" ],
+         [ "Adrien" ],
+         [ "Alain" ],
+         [ "Alban" ],
+         [ "Albert" ],
+         [ "Alexandre" ],
+         [ "Alfred" ],
+         [ "Alphonse" ],
+         [ "Anatole" ],
+         [ "Anthony" ],
+         [ "Antoine" ],
+         [ "Archibald" ],
+         [ "Armand" ],
+         [ "Arthur" ],
+         [ "Augustin" ],
+         [ "Aurélien" ],
+         [ "Baptiste" ],
+         [ "Barnabé" ],
+         [ "Bastien" ],
+         [ "Benjamin" ],
+         [ "Benoît" ],
+         [ "Bernard" ],
+         [ "Bertrand" ],
+         [ "Bob" ],
+         [ "Bobby" ],
+         [ "Brice" ],
+         [ "Bruce" ],
+         [ "Bruno" ],
+         [ "Cédric" ],
+         [ "Christian" ],
+         [ "Christophe" ],
+         [ "Claude" ],
+         [ "Clément" ],
+         [ "Corentin" ],
+         [ "Cyprien" ],
+         [ "Cyril" ],
+         [ "Damien" ],
+         [ "Daniel" ],
+         [ "David" ],
+         [ "Denis" ],
+         [ "Dimitri" ],
+         [ "Edouard" ],
+         [ "Emmanuel" ],
+         [ "Eric" ],
+         [ "Ernest" ],
+         [ "Etienne" ],
+         [ "Fabien" ],
+         [ "Fabrice" ],
+         [ "Ferdinand" ],
+         [ "Florient" ],
+         [ "Francis" ],
+         [ "François" ],
+         [ "Gabriel" ],
+         [ "Gaétan" ],
+         [ "Gaspard" ],
+         [ "Geoffrey" ],
+         [ "Georges" ],
+         [ "Gérald" ],
+         [ "Gérard" ],
+         [ "Gilbert" ],
+         [ "Grégory" ],
+         [ "Guillaume" ],
+         [ "Guy" ],
+         [ "Harry" ],
+         [ "Henri" ],
+         [ "Hervé" ],
+         [ "Hugo" ],
+         [ "Hugues" ],
+         [ "Igor" ],
+         [ "Jacky" ],
+         [ "Jacques" ],
+         [ "Jean" ],
+         [ "Jérémy" ],
+         [ "Jérôme" ],
+         [ "Jonathan" ],
+         [ "Julien" ],
+         [ "Karim" ],
+         [ "Karl" ],
+         [ "Laurent" ],
+         [ "Léo" ],
+         [ "Léon" ],
+         [ "Léonard" ],
+         [ "Léopold" ],
+         [ "Loic" ],
+         [ "Louis" ],
+         [ "Lucas" ],
+         [ "Ludovic" ],
+         [ "Marc" ],
+         [ "Marco" ],
+         [ "Mathias" ],
+         [ "Mathieu" ],
+         [ "Maurice" ],
+         [ "Maxime" ],
+         [ "Maximilien" ],
+         [ "Mehdi" ],
+         [ "Michel" ],
+         [ "Mickaël" ],
+         [ "Mourad" ],
+         [ "Nathan" ],
+         [ "Nicolas" ],
+         [ "Noël" ],
+         [ "Olivier" ],
+         [ "Oscar" ],
+         [ "Pablo" ],
+         [ "Pascal" ],
+         [ "Patrice" ],
+         [ "Patrick" ],
+         [ "Paul" ],
+         [ "Philippe" ],
+         [ "Pierre" ],
+         [ "Quentin" ],
+         [ "Raphaël" ],
+         [ "Raymond" ],
+         [ "Rémi" ],
+         [ "Richard" ],
+         [ "Robert" ],
+         [ "Romain" ],
+         [ "Samuel" ],
+         [ "Sébastien" ],
+         [ "Serge" ],
+         [ "Simon" ],
+         [ "Stanislas" ],
+         [ "Stéphane" ],
+         [ "Sylvain" ],
+         [ "Sylvestre" ],
+         [ "Tanguy" ],
+         [ "Théo" ],
+         [ "Théodore" ],
+         [ "Thomas" ],
+         [ "Tom" ],
+         [ "Ulysse" ],
+         [ "Valentin" ],
+         [ "Victor" ],
+         [ "Walter" ],
+         [ "William" ],
+         [ "Xavier" ],
+         [ "Yann" ],
+         [ "Yohann" ],
+         [ "Youssef" ],
+         [ "Yvan" ],
+         [ "Yves" ],
+         [ "Yvon" ],
+         [ "Zinédine" ]
+      ], 
+      "F":  [
+         [ "Adèle" ],
+         [ "Adeline" ],
+         [ "Agathe" ],
+         [ "Agnès" ],
+         [ "Aïcha" ],
+         [ "Alexandra" ],
+         [ "Alice" ],
+         [ "Alison" ],
+         [ "Alisée" ],
+         [ "Amandine" ],
+         [ "Amélie" ],
+         [ "Anaïs" ],
+         [ "Anémone" ],
+         [ "Annabelle" ],
+         [ "Anne" ],
+         [ "Annie" ],
+         [ "Ariane" ],
+         [ "Augustine" ],
+         [ "Aurélia" ],
+         [ "Azalée" ],
+         [ "Babette" ],
+         [ "Barbara" ],
+         [ "Béatrice" ],
+         [ "Berthe" ],
+         [ "Brigitte" ],
+         [ "Camille" ],
+         [ "Carole" ],
+         [ "Caroline" ],
+         [ "Catherine" ],
+         [ "Cécile" ],
+         [ "Chantal" ],
+         [ "Charlotte" ],
+         [ "Christelle" ],
+         [ "Claire" ],
+         [ "Clarence" ],
+         [ "Clémence" ],
+         [ "Clémentine" ],
+         [ "Corine" ],
+         [ "Cynthia" ],
+         [ "Danielle" ],
+         [ "Delphine" ],
+         [ "Dorothée" ],
+         [ "Eglantine" ],
+         [ "Eléonore" ],
+         [ "Elisabeth" ],
+         [ "Eloïse" ],
+         [ "Emilie" ],
+         [ "Emmanuelle" ],
+         [ "Estelle" ],
+         [ "Eve" ],
+         [ "Eveline" ],
+         [ "Fabienne" ],
+         [ "Florence" ],
+         [ "Françoise" ],
+         [ "Gabrielle" ],
+         [ "Geneviève" ],
+         [ "Géraldine" ],
+         [ "Gisèle" ],
+         [ "Gladys" ],
+         [ "Hélène" ],
+         [ "Hortense" ],
+         [ "Inès" ],
+         [ "Isabelle" ],
+         [ "Jacqueline" ],
+         [ "Jeanne" ],
+         [ "Jessica" ],
+         [ "Jocelyne" ],
+         [ "Joëlle" ],
+         [ "Joséphine" ],
+         [ "Judith" ],
+         [ "Julie" ],
+         [ "Juliette" ],
+         [ "Justine" ],
+         [ "Karine" ],
+         [ "Laeticia" ],
+         [ "Laura" ],
+         [ "Laure" ],
+         [ "Laurence" ],
+         [ "Léa" ],
+         [ "Leïla" ],
+         [ "Lisa" ],
+         [ "Louise" ],
+         [ "Lucie" ],
+         [ "Madeleine" ],
+         [ "Magalie" ],
+         [ "Maïté" ],
+         [ "Marguerite" ],
+         [ "Marie" ],
+         [ "Marina" ],
+         [ "Marjorie" ],
+         [ "Marlène" ],
+         [ "Martine" ],
+         [ "Mathilde" ],
+         [ "Mélanie" ],
+         [ "Mélissa" ],
+         [ "Michelle" ],
+         [ "Monique" ],
+         [ "Muriel" ],
+         [ "Myriam" ],
+         [ "Nadine" ],
+         [ "Nicole" ],
+         [ "Noémie" ],
+         [ "Odile" ],
+         [ "Pascale" ],
+         [ "Pénélope" ],
+         [ "Rachel" ],
+         [ "Rosalie" ],
+         [ "Sabine" ],
+         [ "Sabrina" ],
+         [ "Samantha" ],
+         [ "Sandra" ],
+         [ "Sandrine" ],
+         [ "Sarah" ],
+         [ "Séverine" ],
+         [ "Simone" ],
+         [ "Sonia" ],
+         [ "Sophie" ],
+         [ "Stéphanie" ],
+         [ "Sylvie" ],
+         [ "Thérèse" ],
+         [ "Valérie" ],
+         [ "Vanessa" ],
+         [ "Véronique" ],
+         [ "Victoria" ],
+         [ "Yasmine" ],
+         [ "Yvette" ],
+         [ "Zoé" ] 
+      ]
+   },      
+   "job": {
+      "M": [   // [name,(plural)]
+         [ "acteur" ],
+         [ "agriculteur" ],
+         [ "aide-soignant", "aides-soignants" ],
+         [ "ambulancier" ],
+         [ "analyste" ],
+         [ "animateur" ],
+         [ "antiquaire" ],
+         [ "apiculteur" ],
+         [ "archéologue" ],
+         [ "architecte" ],
+         [ "archiviste" ],
+         [ "artiste" ],
+         [ "astronaute" ],
+         [ "astronome" ],
+         [ "astrologue" ],
+         [ "astrophysicien" ],
+         [ "attaché de presse", "attachés de presse" ],
+         [ "auteur" ],
+         [ "aviateur" ],
+         [ "avocat" ],
+         [ "banquier" ],
+         [ "bibliothécaire" ],
+         [ "bijoutier" ],
+         [ "biologiste" ],
+         [ "boucher" ],
+         [ "boulanger" ],
+         [ "bûcheron" ],
+         [ "caissier" ],
+         [ "capitaine" ],
+         [ "cardiologue" ],
+         [ "carrossier" ],
+         [ "cartographe" ],
+         [ "chanteur" ],
+         [ "charcutier" ],
+         [ "chargé de relations publiques", "chargés de relations publiques" ],
+         [ "charpentier" ],
+         [ "chaudronnier" ],
+         [ "chauffeur" ],
+         [ "chef d'orchestre", "chefs d'orchestre" ],
+         [ "chef de service", "chefs de service" ],
+         [ "chercheur" ],
+         [ "chirurgien" ],
+         [ "chorégraphe" ],
+         [ "coiffeur" ],
+         [ "comédien" ],
+         [ "commissaire" ],
+         [ "comptable" ],
+         [ "concierge" ],
+         [ "conducteur" ],
+         [ "conseiller d'orientation", "conseillers d'orientation" ],
+         [ "consultant" ],
+         [ "contrôleur" ],
+         [ "convoyeur de fonds", "convoyeurs de fonds" ],
+         [ "correcteur" ],
+         [ "costumier" ],
+         [ "coursier" ],
+         [ "couturier" ],
+         [ "cuisinier" ],
+         [ "danseur" ],
+         [ "décorateur" ],
+         [ "déménageur" ],
+         [ "démographe" ],
+         [ "dentiste" ],
+         [ "dépanneur" ],
+         [ "dessinateur" ],
+         [ "détective privé", "détectives privés" ],
+         [ "développeur" ],
+         [ "diététicien" ],
+         [ "directeur" ],
+         [ "docteur" ],
+         [ "documentaliste" ],
+         [ "dompteur" ],
+         [ "douanier" ],
+         [ "ébéniste" ],
+         [ "éboueur" ],
+         [ "écrivain" ],
+         [ "éducateur spécialisé", "éducateurs spécialisés" ],
+         [ "électricien" ],
+         [ "employé" ],
+         [ "enseignant" ],
+         [ "entraîneur" ],
+         [ "épicier" ],
+         [ "ergothérapeute" ],
+         [ "esthéticien" ],
+         [ "ethnologue" ],
+         [ "facteur" ],
+         [ "fermier" ],
+         [ "fleuriste" ],
+         [ "funambule" ],
+         [ "garagiste" ],
+         [ "garçon de café", "garçons de café" ],
+         [ "gendarme" ],
+         [ "géographe" ],
+         [ "géologue" ],
+         [ "graphiste" ],
+         [ "guide" ],
+         [ "harpiste" ],
+         [ "historien" ],
+         [ "horticulteur" ],
+         [ "horloger" ],
+         [ "huissier" ],
+         [ "imprimeur" ],
+         [ "infirmier" ],
+         [ "informaticien" ],
+         [ "ingénieur" ],
+         [ "inspecteur" ],
+         [ "instituteur" ],
+         [ "jardinier" ],
+         [ "jongleur" ],
+         [ "journaliste" ],
+         [ "juge" ],
+         [ "juriste" ],
+         [ "kinésithérapeute" ],
+         [ "libraire" ],
+         [ "lieutenant" ],
+         [ "luthier" ],
+         [ "maçon" ],
+         [ "magistrat" ],
+         [ "maître d'hôtel", "maîtres d'hôtel" ],
+         [ "manutentionnaire" ],
+         [ "marin" ],
+         [ "mathématicien" ],
+         [ "mécanicien" ],
+         [ "médecin" ],
+         [ "menuisier" ],
+         [ "météorologue" ],
+         [ "metteur en scène", "metteurs en scène" ],
+         [ "militaire" ],
+         [ "moniteur" ],
+         [ "musicien" ],
+         [ "nageur" ],
+         [ "neurologue" ],
+         [ "notaire" ],
+         [ "nutritionniste" ],
+         [ "océanographe" ],
+         [ "opérateur" ],
+         [ "opticien" ],
+         [ "orthophoniste" ],
+         [ "ouvrier" ],
+         [ "pâtissier" ],
+         [ "paysagiste" ],
+         [ "paysan" ],
+         [ "pédiatre" ],
+         [ "peintre" ],
+         [ "pharmacien" ],
+         [ "photographe" ],
+         [ "pilote" ],
+         [ "plombier" ],
+         [ "poissonnier" ],
+         [ "policier" ],
+         [ "pompier" ],
+         [ "procureur" ],
+         [ "professeur" ],
+         [ "projectionniste" ],
+         [ "psychanalyste" ],
+         [ "psychiatre" ],
+         [ "psychologue" ],
+         [ "réalisateur" ],
+         [ "réceptionniste" ],
+         [ "rédacteur en chef", "rédacteurs en chef" ],
+         [ "responsable" ],
+         [ "restaurateur" ],
+         [ "scénariste" ],
+         [ "secrétaire" ],
+         [ "serveur" ],
+         [ "sociologue" ],
+         [ "sorcier" ],
+         [ "standardiste" ],
+         [ "tatoueur" ],
+         [ "taxidermiste" ],
+         [ "technicien" ],
+         [ "traducteur" ],
+         [ "urbaniste" ],
+         [ "urgentiste" ],
+         [ "vendeur" ],
+         [ "vétérinaire" ],
+         [ "viticulteur" ],
+         [ "volcanologue" ],
+         [ "xylophoniste" ],
+         [ "zoologiste" ]
+      ],
+      "F": [ // [name,(plural)]
+         [ "actrice" ],
+         [ "aide-soignante", "aides-soignantes" ],
+         [ "ambulancière" ],
+         [ "analyste" ],
+         [ "animatrice" ],
+         [ "antiquaire" ],
+         [ "archéologue" ],
+         [ "architecte" ],
+         [ "archiviste" ],
+         [ "artiste" ],
+         [ "assistante maternelle", "assistantes maternelles" ],
+         [ "assistante sociale", "assistantes sociales" ],
+         [ "astronaute" ],
+         [ "astronome" ],
+         [ "astrologue" ],
+         [ "astrophysicienne" ],
+         [ "attachée de presse", "attachées de presse" ],
+         [ "avocate" ],
+         [ "banquière" ],
+         [ "bibliothécaire" ],
+         [ "bijoutière" ],
+         [ "biologiste" ],
+         [ "boulangère" ],
+         [ "caissière" ],
+         [ "capitaine" ],
+         [ "cardiologue" ],
+         [ "cartographe" ],
+         [ "chanteuse" ],
+         [ "charcutière" ],
+         [ "chargée de relations publiques", "chargées de relations publiques" ],
+         [ "chef de service", "chefs de service" ],
+         [ "chercheuse" ],
+         [ "chorégraphe" ],
+         [ "coiffeuse" ],
+         [ "comédienne" ],
+         [ "commissaire" ],
+         [ "comptable" ],
+         [ "concierge" ],
+         [ "conductrice" ],
+         [ "conseillère d'orientation", "conseillères d'orientation" ],
+         [ "consultante" ],
+         [ "contrôleuse" ],
+         [ "correctrice" ],
+         [ "costumière" ],
+         [ "couturière" ],
+         [ "cuisinière" ],
+         [ "danseuse" ],
+         [ "décoratrice" ],
+         [ "déménageuse" ],
+         [ "démographe" ],
+         [ "dentiste" ],
+         [ "dépanneuse" ],
+         [ "dessinatrice" ],
+         [ "détective privée", "détectives privées" ],
+         [ "développeuse" ],
+         [ "diététicienne" ],
+         [ "directrice" ],
+         [ "docteur" ],
+         [ "documentaliste" ],
+         [ "dompteuse" ],
+         [ "douanière" ],
+         [ "ébéniste" ],
+         [ "éducatrice spécialisée", "éducatrices spécialisées" ],
+         [ "électricienne" ],
+         [ "employée" ],
+         [ "enseignante" ],
+         [ "entraîneuse" ],
+         [ "épicière" ],
+         [ "ergothérapeute" ],
+         [ "esthéticienne" ],
+         [ "ethnologue" ],
+         [ "femme de chambre", "femmes de chambre" ],
+         [ "fermière" ],
+         [ "fleuriste" ],
+         [ "funambule" ],
+         [ "géographe" ],
+         [ "géologue" ],
+         [ "graphiste" ],
+         [ "guide" ],
+         [ "harpiste" ],
+         [ "historienne" ],
+         [ "horticultrice" ],
+         [ "hôtesse de l'air", "hôtesses de l'air" ],
+         [ "infirmière" ],
+         [ "informaticienne" ],
+         [ "ingénieure" ],
+         [ "inspectrice" ],
+         [ "institutrice" ],
+         [ "jongleuse" ],
+         [ "journaliste" ],
+         [ "juge" ],
+         [ "juriste" ],
+         [ "kinésithérapeute" ],
+         [ "libraire" ],
+         [ "magistrate" ],
+         [ "mathématicienne" ],
+         [ "mécanicienne" ],
+         [ "météorologue" ],
+         [ "metteuse en scène", "metteuses en scène" ],
+         [ "monitrice" ],
+         [ "musicienne" ],
+         [ "nageuse" ],
+         [ "neurologue" ],
+         [ "notaire" ],
+         [ "nutritionniste" ],
+         [ "océanographe" ],
+         [ "opératrice" ],
+         [ "opticienne" ],
+         [ "orthophoniste" ],
+         [ "pâtissière" ],
+         [ "paysagiste" ],
+         [ "paysanne" ],
+         [ "pédiatre" ],
+         [ "pharmacienne" ],
+         [ "photographe" ],
+         [ "poissonnière" ],
+         [ "policière" ],
+         [ "projectionniste" ],
+         [ "psychanalyste" ],
+         [ "psychiatre" ],
+         [ "psychologue" ],
+         [ "réalisatrice" ],
+         [ "réceptionniste" ],
+         [ "rédactrice en chef", "rédactrices en chef" ],
+         [ "responsable" ],
+         [ "restauratrice" ],
+         [ "sage-femme", "sages-femmes" ],
+         [ "scénariste" ],
+         [ "secrétaire" ],
+         [ "serveuse" ],
+         [ "sociologue" ],
+         [ "sorcière" ],
+         [ "standardiste" ],
+         [ "tatoueuse" ],
+         [ "taxidermiste" ],
+         [ "technicienne" ],
+         [ "traductrice" ],
+         [ "urbaniste" ],
+         [ "urgentiste" ],
+         [ "vendeuse" ],
+         [ "vétérinaire" ],
+         [ "viticultrice" ],
+         [ "volcanologue" ],
+         [ "xylophoniste" ],
+         [ "zoologiste" ]
+      ]
+   },
+   "animal": {
+      "M": [ // [name,(plural)]
+         [ "Agneau", "agneaux" ],
+         [ "Aigle" ],
+         [ "Albatros" ],
+         [ "Alligator" ],
+         [ "Anaconda" ],
+         [ "Ane" ],
+         [ "animal" ],
+         [ "Babouin" ],
+         [ "Bison" ],
+         [ "Blaireau" ],
+         [ "Boa" ],
+         [ "Bouquetin" ],
+         [ "Buffle" ],
+         [ "Cachalot" ],
+         [ "Campagnol" ],
+         [ "Canard" ],
+         [ "Caribou" ],
+         [ "Castor" ],
+         [ "Cerf" ],
+         [ "Chacal" ],
+         [ "Chameau" ],
+         [ "Chamois" ],
+         [ "Chat" ],
+         [ "Cheval", "chevaux" ],
+         [ "Chevreuil" ],
+         [ "Chien" ],
+         [ "Chimpanzé" ],
+         [ "Cochon" ],
+         [ "Coq" ],
+         [ "Coyote" ],
+         [ "Crabe" ],
+         [ "Crocodile" ],
+         [ "Cygne" ],
+         [ "Dauphin" ],
+         [ "Dromadaire" ],
+         [ "Ecureuil" ],
+         [ "Eléphant" ],
+         [ "Escargot" ],
+         [ "Faisan" ],
+         [ "Faucon" ],
+         [ "Flamant rose", "Flamants roses" ],
+         [ "Fourmilier" ],
+         [ "Furet" ],
+         [ "Gnou" ],
+         [ "Gorille" ],
+         [ "Grizzly" ],
+         [ "Guépard" ],
+         [ "Hamster" ],
+         [ "Hérisson" ],
+         [ "Héron" ],
+         [ "Hibou", "Hiboux" ],
+         [ "Hippocampe" ],
+         [ "Hippopotame" ],
+         [ "Iguane" ],
+         [ "Jaguar" ],
+         [ "Kangourou" ],
+         [ "Koala" ],
+         [ "Lapin" ],
+         [ "Lémurien" ],
+         [ "Léopard" ],
+         [ "Lézard" ],
+         [ "Lièvre" ],
+         [ "Lion" ],
+         [ "Loup" ],
+         [ "Lynx", "Lynx" ],
+         [ "Macaque" ],
+         [ "Mammouth" ],
+         [ "Manchot" ],
+         [ "Marsouin" ],
+         [ "Morse" ],
+         [ "Mouflon" ],
+         [ "Mouton" ],
+         [ "Mulet" ],
+         [ "Mulot" ],
+         [ "Narval" ],
+         [ "Ocelot" ],
+         [ "Oppossum" ],
+         [ "Orang-outan", "Orangs-outans" ],
+         [ "Ornithorynque" ],
+         [ "Ours", "Ours" ],
+         [ "Panda" ],
+         [ "Pangolin" ],
+         [ "Paon" ],
+         [ "Paresseux", "Paresseux" ],
+         [ "Pélican" ],
+         [ "Perroquet" ],
+         [ "Phacochère" ],
+         [ "Phoque" ],
+         [ "Pingouin" ],
+         [ "Poisson" ],
+         [ "Poney" ],
+         [ "Porc" ],
+         [ "Porc-épic", "Porcs-epics" ],
+         [ "Poulet" ],
+         [ "Poulpe" ],
+         [ "Poussin" ],
+         [ "Puma" ],
+         [ "Putois" ],
+         [ "Python" ],
+         [ "Ragondin" ],
+         [ "Rat" ],
+         [ "Raton laveur", "Ratons laveurs" ],
+         [ "Renard" ],
+         [ "Requin" ],
+         [ "Rhinocéros", "Rhinocéros" ],
+         [ "Sanglier" ],
+         [ "Serpent" ],
+         [ "Singe" ],
+         [ "Tamanoir" ],
+         [ "Toucan" ],
+         [ "Taureau" ],
+         [ "Tigre" ],
+         [ "Vautour" ],
+         [ "Veau" ],
+         [ "Yack" ],
+         [ "Zèbre" ]
+      ],
+      "F": [ // [name,(plural)]
+         [ "Antilope" ],
+         [ "Araignée" ],
+         [ "Autruche" ],
+         [ "Baleine" ],
+         [ "Belette" ],
+         [ "Biche" ],
+         [ "Brebis" ],
+         [ "Carpe" ],
+         [ "Chauve-souris", "chauves-souris" ],
+         [ "Chèvre" ],
+         [ "Chouette" ],
+         [ "Cigogne" ],
+         [ "Coccinelle" ],
+         [ "Dinde" ],
+         [ "Fouine" ],
+         [ "Gazelle" ],
+         [ "Girafe" ],
+         [ "Grenouille" ],
+         [ "Grue" ],
+         [ "Hirondelle" ],
+         [ "Hyène" ],
+         [ "Loutre" ],
+         [ "Marmotte" ],
+         [ "Mésange" ],
+         [ "Mouette" ],
+         [ "Musaraigne" ],
+         [ "Oie" ],
+         [ "Orque" ],
+         [ "Otarie" ],
+         [ "Panthère" ],
+         [ "Pie" ],
+         [ "Poule" ],
+         [ "Souris", "Souris" ],
+         [ "Taupe" ],
+         [ "Tortue" ],
+         [ "Vache" ],
+         [ "Vipère" ]
+      ]
+   },
+   "plant": {
+      "M": [  // [name,(plural)]
+         [ "abricotier" ],
+         [ "acacia" ],
+         [ "amandier" ],
+         [ "arbousier" ],
+         [ "arbre" ],
+         [ "aulne" ],
+         [ "Bambou" ],
+         [ "Bananier" ],
+         [ "Baobab" ],
+         [ "Bégonia" ],
+         [ "Bleuet" ],
+         [ "Bougainvillier" ],
+         [ "Bouleau", "Bouleaux" ],
+         [ "buisson" ],
+         [ "Cactus", "Cactus" ],
+         [ "Camélia" ],
+         [ "Cèdre" ],
+         [ "Cerisier" ],
+         [ "Chardon" ],
+         [ "Châtaignier" ],
+         [ "Chêne" ],
+         [ "Chèvrefeuille" ],
+         [ "Citronnier" ],
+         [ "Coquelicot" ],
+         [ "Cyprès", "Cyprès" ],
+         [ "Edelweiss", "Edelweiss" ],
+         [ "Erable" ],
+         [ "Eucalyptus", "Eucalyptus" ],
+         [ "Figuier" ],
+         [ "Framboisier" ],
+         [ "Géranium" ],
+         [ "Groseiller" ],
+         [ "Hêtre" ],
+         [ "Hibiscus", "Hibiscus" ],
+         [ "Hortensia" ],
+         [ "Houx", "Houx" ],
+         [ "If" ],
+         [ "Jasmin" ],
+         [ "Laurier" ],
+         [ "Lilas" ],
+         [ "Lotus" ],
+         [ "Lys" ],
+         [ "Magnolia" ],
+         [ "Mandarinier" ],
+         [ "Mimosa" ],
+         [ "Murier" ],
+         [ "Myosotis" ],
+         [ "Nénuphar" ],
+         [ "Noisetier" ],
+         [ "Noyer" ],
+         [ "Oranger" ],
+         [ "Orme" ],
+         [ "Palmier" ],
+         [ "Peuplier" ],
+         [ "Pin" ],
+         [ "Pin parasol", "Pins parasols" ],
+         [ "Pissenlit" ],
+         [ "Platane" ],
+         [ "Poirier" ],
+         [ "Pommier" ],
+         [ "Prunier" ],
+         [ "Rhododendron" ],
+         [ "Sapin" ],
+         [ "Saule" ],
+         [ "Saule pleureur", "Saules pleureurs" ],
+         [ "Séquoia" ],
+         [ "Tamaris" ],
+         [ "Tilleul" ],
+         [ "Tournesol" ],
+         [ "Trêfle" ]
+      ],
+      "F": [  // [name,(plural)]
+         [ "aubépine" ],
+         [ "fleur" ],
+         [ "glycine" ],
+         [ "herbe" ],
+         [ "Jonquille" ],
+         [ "Lavande" ],
+         [ "Liane" ],
+         [ "Marguerite" ],
+         [ "Orchidée" ],
+         [ "Ortie" ],
+         [ "Pâquerette" ],
+         [ "plante" ],
+         [ "Rose" ],
+         [ "Tulipe" ],
+         [ "Vigne" ],
+         [ "Violette" ]
+      ]
+   },   
+   "country": {
+      "M": [   
+         [ "Afghanistan" ],
+         [ "Brésil" ],
+         [ "Burkina Faso" ],
+         [ "Cambodge" ],
+         [ "Cameroun" ],
+         [ "Canada" ],
+         [ "Chili" ],
+         [ "Congo" ],
+         [ "Costa Rica" ],
+         [ "Danemark" ],
+         [ "Gabon" ],
+         [ "Guatemala" ],
+         [ "Honduras" ],
+         [ "Japon" ],
+         [ "Kazakhstan" ],
+         [ "Kenya" ],
+         [ "Koweït" ],
+         [ "Laos" ],
+         [ "Liban" ],
+         [ "Luxembourg" ],
+         [ "Mali" ],
+         [ "Maroc" ],
+         [ "Mexique" ],
+         [ "Népal" ],
+         [ "Nicaragua" ],
+         [ "Pakistan" ],
+         [ "Pérou" ],
+         [ "Portugal" ],
+         [ "Québec" ],
+         [ "Sénégal" ],
+         [ "Sri Lanka" ],
+         [ "Vietnam" ]
+      ],
+      "F": [  
+         [ "Afrique du sud" ], 
+         [ "Algérie" ],
+         [ "Allemagne" ],
+         [ "Andorre" ],
+         [ "Angleterre" ],
+         [ "Argentine" ],
+         [ "Arménie" ],
+         [ "Australie" ],
+         [ "Autriche" ],
+         [ "Belgique" ],
+         [ "Birmanie" ],
+         [ "Bolivie" ],
+         [ "Bulgarie" ],
+         [ "Chine" ],
+         [ "Colombie" ],
+         [ "Côte d'ivoire" ],
+         [ "Croatie" ],
+         [ "Tchéquie" ],
+         [ "Estonie" ],
+         [ "Finlande" ],
+         [ "France" ],
+         [ "Grèce" ],
+         [ "Hongrie" ],
+         [ "Inde" ],
+         [ "Indonésie" ],
+         [ "Irlande" ],
+         [ "Italie" ],
+         [ "Lettonie" ],
+         [ "Lituanie" ],
+         [ "Malaisie" ],
+         [ "Norvège" ],
+         [ "Pologne" ],
+         [ "Roumanie" ],
+         [ "Russie" ],
+         [ "Serbie" ],
+         [ "Slovaquie" ],
+         [ "Slovénie" ],
+         [ "Espagne" ],
+         [ "Suède" ],
+         [ "Suisse" ],
+         [ "Europe" ],
+         [ "Asie" ],
+         [ "Afrique" ],
+         [ "Amérique du nord" ],
+         [ "Amérique du sud" ],
+         [ "Amérique centrale" ],
+         [ "Océanie" ]
+      ]
+   },
+   "city": [
+      [ "Alger" ],
+      [ "Amsterdam" ], 
+      [ "Ankara" ],
+      [ "Athènes" ],
+      [ "Bagdad" ],
+      [ "Bamako" ],
+      [ "Barcelone" ],
+      [ "Belgrade" ],
+      [ "Berlin" ],
+      [ "Bogota" ],
+      [ "Bordeaux" ],
+      [ "Brest" ],
+      [ "Bruxelles" ],
+      [ "Bucarest" ],
+      [ "Budapest" ],
+      [ "Buenos Aires" ],
+      [ "Copenhague" ],
+      [ "Dakar" ],
+      [ "Dublin" ],
+      [ "Hanoï" ],
+      [ "Helsinki" ],
+      [ "Katmandou" ],
+      [ "Kiev" ],
+      [ "Lisbonne" ],
+      [ "Londres" ],
+      [ "Los Angeles" ],
+      [ "Lyon" ],
+      [ "Madrid" ],
+      [ "Marseille" ],
+      [ "Mexico" ],
+      [ "Mogadiscio" ],
+      [ "Monaco" ],
+      [ "Montréal" ],
+      [ "Moscou" ],
+      [ "Nairobi" ],
+      [ "New York" ],
+      [ "Oslo" ],
+      [ "Ottawa" ],
+      [ "Paris" ],
+      [ "Pékin" ],
+      [ "Prague" ],
+      [ "Reykjavik" ],
+      [ "Rome" ],
+      [ "Sarajevo" ],
+      [ "Singapour" ],
+      [ "Sofia" ],
+      [ "Stockholm" ],
+      [ "Tokyo" ],
+      [ "Toulouse" ],
+      [ "Varsovie" ],
+      [ "Vienne" ]       
+   ]
+};
+exports.adjectiveTypes = ["before","after"];   // placé avant ou après le nom
+exports.adjectives = { // [M-S,F-S]
+   "before": [
+      [ "abject", "e" ],
+      [ "abominable", "" ],
+      [ "abrupt", "e" ],
+      [ "absurde", "" ],
+      [ "accablant", "e" ],
+      [ "acceuillant", "e" ],
+      [ "actuel", "actuelle" ],
+      [ "addictif", "addictive" ],
+      [ "adipeux", "adipeuse" ],
+      [ "affligeant", "e" ],
+      [ "affolant", "e" ],
+      [ "affreux", "affreuse" ],
+      [ "agaçant", "e" ],
+      [ "agréable", "" ],
+      [ "ahurissant", "e" ],
+      [ "aigre", "" ],
+      [ "aimable", "" ],
+      [ "alarmant", "e" ],
+      [ "ambitieux", "ambitieuse" ],
+      [ "ambivalent", "e" ],
+      [ "amer", "e" ],
+      [ "amorphe", "" ],
+      [ "amusant", "e" ],
+      [ "ancien", "ancienne" ],
+      [ "anonyme", "" ],
+      [ "antique", "" ],
+      [ "anxieux", "anxieuse" ],
+      [ "appétissant", "e" ],
+      [ "appréciable", "" ],
+      [ "ardent", "e" ],
+      [ "aride", "" ],
+      [ "arrogant", "e" ],
+      [ "astucieux", "astucieuse" ],
+      [ "atroce", "" ],
+      [ "audacieux", "audacieuse" ],
+      [ "avide", "" ],
+      [ "banal", "e" ],
+      [ "beau", "belle" ],
+      [ "bête", "" ],
+      [ "bienfaisant", "e" ],
+      [ "bienveillant", "e" ],
+      [ "bizarre", "" ],
+      [ "brave", "" ],
+      [ "brillant", "e" ],
+      [ "brumeux", "brumeuse" ],
+      [ "brutal", "e" ],
+      [ "calme", "" ],
+      [ "candide", "" ],
+      [ "capricieux", "capricieuse" ],
+      [ "catastrophique", "" ],
+      [ "cauchemardesque", "" ],
+      [ "chaleureux", "chaleureuse" ],
+      [ "charmant", "e" ],
+      [ "cher", "e" ],
+      [ "colossal", "e" ],
+      [ "complexe", "" ],
+      [ "confortable", "" ],
+      [ "courageux", "courageuse" ],
+      [ "craintif", "craintive" ],
+      [ "cruel", "cruelle" ],
+      [ "curieux", "curieuse" ],
+      [ "dangereux", "dangereuse" ],
+      [ "décisif", "décisive" ],
+      [ "décourageant", "e" ],
+      [ "défunt", "e" ],
+      [ "délicat", "e" ],
+      [ "délicieux", "délicieuse" ],
+      [ "démoniaque", "" ],
+      [ "démoralisant", "e" ],
+      [ "dense", "" ],
+      [ "déplaisant", "e" ],
+      [ "dernier", "e" ],  
+      [ "désastreux", "désastreuse" ],
+      [ "détestable", "" ],
+      [ "diabolique", "" ],
+      [ "différent", "e" ],
+      [ "difficile", "" ],
+      [ "digne", "" ],
+      [ "discret", "e" ],
+      [ "disgracieux", "disgracieuse" ],
+      [ "distrayant", "e" ],
+      [ "divin", "e" ],
+      [ "doux", "douce" ],
+      [ "dur", "e" ],   
+      [ "éblouissant", "e" ],
+      [ "effrayant", "e" ],
+      [ "élégant", "e" ],
+      [ "embêtant", "e" ],
+      [ "émouvant", "e" ],
+      [ "énergique", "" ],
+      [ "énervant", "e" ],
+      [ "énigmatique", "" ],
+      [ "ennuyeux", "ennuyeuse" ],
+      [ "énorme", "" ],
+      [ "enthousiasmant", "e" ],
+      [ "épais", "épaisse" ],
+      [ "épineux", "épineuse" ],
+      [ "époustouflant", "e" ],
+      [ "épouvantable", "" ],
+      [ "étincelant", "e" ],
+      [ "étonnant", "e" ],
+      [ "évasif", "évasive" ],
+      [ "exaltant", "e" ],
+      [ "excellent", "e" ],
+      [ "exécrable", "" ],
+      [ "exquis", "e" ],
+      [ "extraordinaire", "" ],
+      [ "fabuleux", "fabuleuse" ],
+      [ "facheux", "facheuse" ],
+      [ "fantastique", "" ],
+      [ "farouche", "" ],
+      [ "fascinant", "e" ],
+      [ "faux", "fausse" ],  
+      [ "fier", "e" ],
+      [ "formidable", "" ],
+      [ "fourbe", "" ],
+      [ "fragile", "" ],
+      [ "frileux", "frileuse" ],
+      [ "froid", "e" ],
+      [ "fugace", "" ],
+      [ "fulgurant", "e" ],
+      [ "funèbre", "" ],
+      [ "funeste", "" ],
+      [ "furieux", "furieuse" ],
+      [ "gargantuesque", "" ],
+      [ "gélatineux", "gélatineuse" ],
+      [ "généreux", "généreuse" ],
+      [ "génial", "e" ],
+      [ "gentil", "gentille" ],
+      [ "glaçant", "e" ],
+      [ "gluant", "e" ],
+      [ "gracieux", "gracieuse" ],
+      [ "grand", "e" ], 
+      [ "grandiose", "" ],
+      [ "gros", "grosse" ],   
+      [ "habile", "" ],
+      [ "hallucinant", "e" ],
+      [ "harmonieux", "harmonieuse" ],
+      [ "heureux", "heureuse" ],
+      [ "hideux", "hideuse" ],
+      [ "honnête", "" ],
+      [ "horrible", "" ],
+      [ "humble", "" ],
+      [ "ignoble", "" ],
+      [ "immense", "" ],
+      [ "impitoyable", "" ],
+      [ "important", "e" ],
+      [ "imposant", "e" ],
+      [ "imprévisible", "" ],
+      [ "inaudible", "" ],
+      [ "incroyable", "" ],
+      [ "indescriptible", "" ],
+      [ "interminable", "" ],
+      [ "intrépide", "" ],
+      [ "inutile", "" ],
+      [ "invincible", "" ],
+      [ "invisible", "" ],
+      [ "irrécupérable", "" ],
+      [ "irremplaçable", "" ],
+      [ "irritant", "e" ],
+      [ "jeune", "" ],
+      [ "joli", "e" ],  
+      [ "joyeux", "joyeuse" ],
+      [ "judicieux", "judicieuse" ],
+      [ "juvénile", "" ],
+      [ "lâche", "" ],
+      [ "légendaire", "" ],
+      [ "lointain", "e" ],
+      [ "lourd", "e" ],
+      [ "loyal", "e" ],
+      [ "lugubre", "" ],
+      [ "lumineux", "lumineuse" ],
+      [ "macabre", "" ],
+      [ "maigre", "" ],
+      [ "majestueux", "majestueuse" ],
+      [ "malheureux", "malheureuse" ],
+      [ "malicieux", "malicieuse" ],
+      [ "maussade", "" ],
+      [ "méchant", "e" ],
+      [ "médiocre", "" ],
+      [ "mélodieux", "mélodieuse" ],
+      [ "menaçant", "e" ],
+      [ "méprisant", "e" ],
+      [ "méticuleux", "méticuleuse" ],
+      [ "modeste", "" ],
+      [ "monstrueux", "monstreuse" ],
+      [ "mystérieux", "mystérieuse" ],
+      [ "naïf", "naïve" ],
+      [ "nébuleux", "nébuleuse" ],
+      [ "nerveux", "nerveuse" ],
+      [ "noble", "" ],
+      [ "noir", "e" ],
+      [ "nouveau", "nouvelle" ],
+      [ "obscur", "e" ],
+      [ "odieux", "odieuse" ],   
+      [ "ombrageux", "ombrageuse" ],
+      [ "ondoyant", "e" ],
+      [ "opalescent", "e" ],
+      [ "opiniâtre", "" ],
+      [ "orageux", "orageuse" ],
+      [ "pâle", "" ],
+      [ "paresseux", "paresseuse" ],
+      [ "parfait", "e" ],
+      [ "pathétique", "" ],
+      [ "pauvre", "" ], 
+      [ "pénible", "" ],
+      [ "pernicieux", "pernicieuse" ],
+      [ "petit", "e" ], 
+      [ "pétulant", "e" ],
+      [ "phénoménal", "e" ],
+      [ "polyvalent", "e" ],
+      [ "pompeux", "pompeuse" ],
+      [ "potentiel", "potentielle" ],
+      [ "poudreux", "poudreuse" ],
+      [ "précautionneux", "précautionneuse" ],
+      [ "précieux", "précieuse" ],
+      [ "prestigieux", "prestigieuse" ],
+      [ "prétentieux", "prétentieuse" ],
+      [ "prévisible", "" ],
+      [ "prévoyant", "e" ],
+      [ "primitif", "primitive" ],
+      [ "problématique", "" ],
+      [ "prodigieux", "prodigieuse" ],
+      [ "providentiel", "providentielle" ],
+      [ "prudent", "e" ],
+      [ "puéril", "e" ],
+      [ "rapide", "" ],
+      [ "ravissant", "e" ],
+      [ "rayonnant", "e" ],
+      [ "redoutable", "" ],
+      [ "réel", "réelle" ],
+      [ "remarquable", "" ],
+      [ "répugnant", "e" ],
+      [ "resplendissant", "e" ],
+      [ "rigoureux", "rigoureuse" ],
+      [ "robuste", "" ],
+      [ "séduisant", "e" ],
+   ],
+   "after": [
+      [ "abject", "e" ],
+      [ "abominable", "" ],
+      [ "aborigène", "" ],
+      [ "abrasif", "abrasive" ],
+      [ "abrupt", "e" ],
+      [ "absent", "e" ],
+      [ "absorbant", "e" ],
+      [ "abstrait", "e" ],
+      [ "absurde", "" ],
+      [ "accablant", "e" ],
+      [ "accessoire", "" ],
+      [ "accomodant", "e" ],
+      [ "accompagné", "e" ],
+      [ "accoudé", "e" ],
+      [ "accroupi", "e" ],
+      [ "acceuillant", "e" ],
+      [ "accusateur", "accusatrice" ],
+      [ "accusé", "e" ],
+      [ "acéré", "e" ],
+      [ "acharné", "e" ],
+      [ "achevé", "e" ],
+      [ "acide", "" ],
+      [ "acidulé", "e" ],
+      [ "acoustique", "" ],
+      [ "acquis", "e" ],
+      [ "acquitté", "e" ],
+      [ "actif", "active" ],
+      [ "actionné", "e" ],
+      [ "activiste", "" ],
+      [ "actuel", "actuelle" ],
+      [ "adapté", "e" ],
+      [ "addictif", "addictive" ],
+      [ "adhésif", "adhésive" ],
+      [ "adipeux", "adipeuse" ],
+      [ "admis", "e" ],
+      [ "admissible", "" ],
+      [ "administratif", "administrative" ],
+      [ "adolescent", "e" ],
+      [ "adopté", "e" ],
+      [ "adoré", "e" ],
+      [ "adouci", "e" ],
+      [ "adoucissant", "e" ],
+      [ "adriatique", "" ],
+      [ "absorbant", "e" ],
+      [ "adulte", "" ],
+      [ "aéré", "e" ],
+      [ "aérodynamique", "" ],
+      [ "aéronautique", "" ],
+      [ "aérostatique", "" ],
+      [ "affaibli", "e" ],
+      [ "affaiblissant", "e" ],
+      [ "affairé", "e" ],
+      [ "affamé", "e" ],
+      [ "affirmé", "e" ],
+      [ "affligeant", "e" ],
+      [ "affligé", "e" ],
+      [ "affolant", "e" ],
+      [ "affolé", "e" ],
+      [ "affranchi", "e" ],
+      [ "affreux", "affreuse" ],
+      [ "affûté", "e" ],
+      [ "africain", "e" ],
+      [ "agaçant", "e" ],
+      [ "agacé", "e" ],
+      [ "agenouillé", "e" ],
+      [ "aggloméré", "e" ],
+      [ "agglutiné", "e" ],
+      [ "aggravant", "e" ],
+      [ "aggravé", "e" ],
+      [ "agité", "e" ],
+      [ "agnostique", "" ],
+      [ "agonisant", "e" ],
+      [ "agréable", "" ],
+      [ "agrégé", "e" ],
+      [ "agricole", "" ],
+      [ "aguerri", "e" ],
+      [ "ahuri", "e" ],
+      [ "ahurissant", "e" ],
+      [ "aigre", "" ],
+      [ "aigri", "e" ],
+      [ "aigu", "aigüe" ],
+      [ "aiguisé", "e" ],
+      [ "ailé", "e" ],
+      [ "aimable", "" ],
+      [ "aimanté", "e" ],
+      [ "ajusté", "e" ],
+      [ "alambiqué", "e" ],
+      [ "alarmant", "e" ],
+      [ "alarmé", "e" ],
+      [ "albanais", "e" ],
+      [ "albinos", "" ],
+      [ "alcoolique", "" ],
+      [ "alcoolisé", "e" ],
+      [ "alité", "e" ],
+      [ "allemand", "e" ],
+      [ "allongé", "e" ],
+      [ "alourdi", "e" ],
+      [ "alphabétique", "" ], 
+      [ "alsacien", "alsacienne" ],
+      [ "altermondialiste", "" ],
+      [ "alternatif", "alternative" ],
+      [ "altruiste", "" ],
+      [ "amaigrissant", "e" ],
+      [ "ambidextre", "" ],
+      [ "ambigu", "e" ],
+      [ "ambitieux", "ambitieuse" ],
+      [ "ambivalent", "e" ],
+      [ "ambulant", "e" ],
+      [ "amer", "e" ],
+      [ "américain", "e" ],
+      [ "amorphe", "" ],
+      [ "amusant", "e" ],
+      [ "analogique", "" ],
+      [ "ancestral", "e" ],
+      [ "ancien", "ancienne" ],
+      [ "angélique", "" ],
+      [ "anglais", "e" ],
+      [ "anisotrope", "" ],
+      [ "anonyme", "" ],
+      [ "antédiluvien", "antédiluvienne" ],
+      [ "antiaérien", "antiaérienne" ],
+      [ "anticlérical", "e" ],
+      [ "antillais", "e" ],
+      [ "antimilitariste", "" ],
+      [ "antique", "" ],
+      [ "anxieux", "anxieuse" ],
+      [ "apathique", "" ],
+      [ "appétissant", "e" ],
+      [ "appréciable", "" ],
+      [ "ardent", "e" ],
+      [ "aride", "" ],
+      [ "arménien", "arménienne" ],
+      [ "arrogant", "e" ],
+      [ "artificiel", "artificielle" ],
+      [ "asiatique", "" ],
+      [ "astral", "e" ],
+      [ "astucieux", "astucieuse" ],
+      [ "atroce", "" ],
+      [ "audacieux", "audacieuse" ],
+      [ "austral", "e" ],
+      [ "automnal", "e" ],
+      [ "autonome", "" ],
+      [ "avide", "" ],
+      [ "aztèque", "" ],
+      [ "bagarreur", "bagarreuse" ],
+      [ "banal", "e" ],
+      [ "barbare", "" ],
+      [ "belge", "" ],
+      [ "bête", "" ],
+      [ "bienfaisant", "e" ],
+      [ "bienveillant", "e" ],
+      [ "binaire", "" ],
+      [ "bipolaire", "" ],
+      [ "bizarre", "" ],
+      [ "bleu", "e" ],
+      [ "bleuâtre", "" ],
+      [ "boréal", "e" ],
+      [ "brave", "" ],
+      [ "breton", "bretonne" ],
+      [ "brillant", "e" ],
+      [ "brun", "e" ],
+      [ "brumeux", "brumeuse" ],
+      [ "brutal", "e" ],
+      [ "byzantin", "e" ],
+      [ "calme", "" ],
+      [ "candide", "" ],
+      [ "capital", "e" ],
+      [ "capricieux", "capricieuse" ],
+      [ "carnavalesque", "" ],
+      [ "carnivore", "" ],
+      [ "catalan", "e" ],
+      [ "catastrophique", "" ],
+      [ "cauchemardesque", "" ],
+      [ "celtique", "" ],
+      [ "central", "e" ],
+      [ "cérébral", "e" ],
+      [ "chaleureux", "chaleureuse" ],
+      [ "chaotique", "" ],
+      [ "charmant", "e" ],
+      [ "chauve", "" ],
+      [ "chimique", "" ],
+      [ "chronophage", "" ],
+      [ "chypriote", "" ],
+      [ "cinglé", "e" ],
+      [ "circonspect", "e" ],
+      [ "circulaire", "" ],
+      [ "citronné", "e" ],
+      [ "clair", "e" ],
+      [ "colérique", "" ],
+      [ "coloré", "e" ],
+      [ "colossal", "e" ],
+      [ "comestible", "" ],
+      [ "comique", "" ],
+      [ "commun", "e" ],
+      [ "complexe", "" ],
+      [ "compliqué", "e" ],
+      [ "compulsif", "compulsive" ],
+      [ "concave", "" ],
+      [ "conciliant", "e" ],
+      [ "condescendant", "e" ],
+      [ "confortable", "" ],
+      [ "confus", "e" ],
+      [ "conique", "" ],
+      [ "connu", "e" ],
+      [ "consciencieux", "consciencieuse" ],
+      [ "controversé", "e" ],
+      [ "convenu", "e" ],
+      [ "coriace", "" ],
+      [ "corrosif", "corrosive" ],
+      [ "cosmique", "" ],
+      [ "coupable", "" ],
+      [ "courageux", "courageuse" ],
+      [ "courtois", "e" ],
+      [ "craintif", "craintive" ],
+      [ "cristallin", "e" ],
+      [ "crocodilien", "crocodilienne" ],
+      [ "cru", "e" ],
+      [ "cruel", "cruelle" ],
+      [ "cuivré", "e" ],
+      [ "curieux", "curieuse" ],
+      [ "dangereux", "dangereuse" ],
+      [ "dansant", "e" ],
+      [ "débile", "" ],
+      [ "décadent", "e" ],
+      [ "décent", "e" ], 
+      [ "décisif", "décisive" ],
+      [ "décoratif", "décorative" ],
+      [ "décourageant", "e" ],
+      [ "déçu", "e" ],
+      [ "défectueux", "défectueuse" ],
+      [ "défunt", "e" ],
+      [ "délicat", "e" ],
+      [ "délicieux", "délicieuse" ],
+      [ "déloyal", "e" ],
+      [ "dément", "e" ],
+      [ "démoniaque", "" ],
+      [ "démoralisant", "e" ],
+      [ "dense", "" ],
+      [ "dépendant", "e" ],
+      [ "déplaisant", "e" ],
+      [ "dépressif", "dépressive" ],
+      [ "déprimé", "e" ],
+      [ "désastreux", "désastreuse" ],
+      [ "désertique", "" ],
+      [ "désuet", "e" ],
+      [ "détendu", "e" ],
+      [ "détestable", "" ],
+      [ "diabolique", "" ],
+      [ "diagonal", "e" ],
+      [ "diaphane", "" ],
+      [ "différent", "e" ],
+      [ "difficile", "" ],
+      [ "difforme", "" ],
+      [ "digital", "e" ],
+      [ "digne", "" ],
+      [ "dingue", "" ],
+      [ "diplomate", "" ],
+      [ "discontinu", "e" ],
+      [ "discret", "e" ],
+      [ "discutable", "" ],
+      [ "disgracieux", "disgracieuse" ],
+      [ "disponible", "" ],
+      [ "dissident", "e" ],
+      [ "distrayant", "e" ],
+      [ "divin", "e" ],
+      [ "docile", "" ],
+      [ "dodu", "e" ],
+      [ "doré", "e" ],
+      [ "doué", "e" ],
+      [ "doux", "douce" ],
+      [ "druidique", "" ],
+      [ "dubitatif", "dubitative" ],
+      [ "duveté", "e" ],
+      [ "dynamique", "" ],
+      [ "dyslexique", "" ],
+      [ "éblouissant", "e" ],
+      [ "écarlate", "" ],
+      [ "éclairé", "e" ],
+      [ "écumant", "e" ],
+      [ "effacé", "e" ],
+      [ "efficace", "" ],
+      [ "efflanqué", "e" ],
+      [ "effrayant", "e" ],
+      [ "électrique", "" ],
+      [ "élégant", "e" ],
+      [ "elfique", "" ],
+      [ "ellipsoïdal", "e" ],
+      [ "éloigné", "e" ],
+      [ "embarrassé", "e" ],
+      [ "embêtant", "e" ],
+      [ "émotif", "émotive" ],
+      [ "émouvant", "e" ],
+      [ "emplumé", "e" ],
+      [ "empoté", "e" ],
+      [ "enchanté", "e" ],
+      [ "énergique", "" ],
+      [ "énervant", "e" ],
+      [ "énervé", "e" ],
+      [ "énigmatique", "" ],
+      [ "ennuyeux", "ennuyeuse" ],
+      [ "énorme", "" ],
+      [ "ensorceleur", "ensorceleuse" ],
+      [ "enthousiasmant", "e" ],
+      [ "épais", "épaisse" ],
+      [ "épineux", "épineuse" ],
+      [ "épique", "" ],
+      [ "époustouflant", "e" ],
+      [ "équivoque", "" ],
+      [ "ésotérique", "" ],
+      [ "estonien", "estonienne" ],
+      [ "étincelant", "e" ],
+      [ "étonnant", "e" ],
+      [ "étranger", "e" ],
+      [ "euphorique", "" ],
+      [ "européen", "européenne" ],
+      [ "évanescent", "e" ],
+      [ "évasif", "évasive" ],
+      [ "exaltant", "e" ],
+      [ "excellent", "e" ],
+      [ "exécrable", "" ],
+      [ "exemplaire", "" ],
+      [ "exigeant", "e" ],
+      [ "exotique", "" ],
+      [ "expérimenté", "e" ],
+      [ "explosif", "explosive" ],
+      [ "exquis", "e" ],
+      [ "externe", "" ],
+      [ "extralucide", "" ],
+      [ "extraordinaire", "" ],
+      [ "extraterrestre", "" ],
+      [ "extravagant", "e" ],
+      [ "exubérant", "e" ],
+      [ "fabuleux", "fabuleuse" ],
+      [ "facétieux", "facétieuse" ],
+      [ "facheux", "facheuse" ],
+      [ "factice", "" ],
+      [ "fainéant", "e" ],
+      [ "fantasmagorique", "" ],
+      [ "fantastique", "" ],
+      [ "fantomatique", "" ],
+      [ "farfelu", "e" ],
+      [ "farouche", "" ],
+      [ "fascinant", "e" ],
+      [ "fébrile", "" ],
+      [ "féerique", "" ],
+      [ "fertile", "" ],
+      [ "festif", "festive" ],
+      [ "fétide", "" ],
+      [ "fictif", "fictive" ],
+      [ "fier", "e" ],
+      [ "finlandais", "e" ],
+      [ "flasque", "" ],  
+      [ "florentin", "e" ],
+      [ "flou", "e" ],
+      [ "fluide", "" ],
+      [ "fluoresent", "e" ],
+      [ "foncé", "e" ],
+      [ "forcené", "e" ],
+      [ "forestier", "e" ],
+      [ "formidable", "" ],
+      [ "fort", "e" ],
+      [ "fossile", "" ],
+      [ "fou", "folle" ],
+      [ "fourbe", "" ],
+      [ "fragile", "" ],
+      [ "francophone", "" ],
+      [ "frauduleux", "frauduleuse" ],
+      [ "friable", "" ],
+      [ "frénétique", "" ],
+      [ "frétillant", "e" ],
+      [ "frileux", "frileuse" ],
+      [ "froid", "e" ],
+      [ "fugace", "" ],
+      [ "fulgurant", "e" ],
+      [ "funèbre", "" ],
+      [ "funeste", "" ],
+      [ "furieux", "furieuse" ],
+      [ "futuriste", "" ],
+      [ "galactique", "" ],
+      [ "galiléen", "galiléenne" ],
+      [ "galopant", "e" ],
+      [ "gargantuesque", "" ],
+      [ "gaulois", "e" ],
+      [ "géant", "e" ],
+      [ "gélatineux", "gélatineuse" ],
+      [ "gênant", "e" ],
+      [ "généreux", "généreuse" ],
+      [ "génial", "e" ],
+      [ "gentil", "gentille" ],
+      [ "givré", "e" ],
+      [ "glaçant", "e" ],
+      [ "glacé", "e" ],
+      [ "gluant", "e" ],
+      [ "gothique", "" ],
+      [ "gracieux", "gracieuse" ],
+      [ "grandiose", "" ],
+      [ "gras", "grasse" ],
+      [ "grec", "grecque" ],
+      [ "gris", "e" ],
+      [ "grisâtre", "" ],
+      [ "guinéen", "guinéenne" ],
+      [ "habile", "" ],
+      [ "hagard", "e" ],
+      [ "haïssable", "" ],
+      [ "halucinant", "e" ],
+      [ "handicapé", "e" ],
+      [ "hargneux", "hargneuse" ],
+      [ "harmonieux", "harmonieuse" ],
+      [ "hâtif", "hâtive" ],
+      [ "hélicoïdal", "e" ],
+      [ "hémophile", "" ],
+      [ "herculéen", "herculéenne" ],
+      [ "heureux", "heureuse" ],
+      [ "hideux", "hideuse" ],
+      [ "hilarant", "e" ],
+      [ "hindouiste", "" ],
+      [ "hirsute", "" ],
+      [ "historique", "" ],
+      [ "hollandais", "e" ],
+      [ "honnête", "" ],
+      [ "honteux", "honteuse" ],
+      [ "horizontal", "e" ],
+      [ "horrible", "" ],
+      [ "hostile", "" ],
+      [ "huileux", "huileuse" ],
+      [ "humanoïde", "" ],
+      [ "humble", "" ],
+      [ "humide", "" ],
+      [ "hybride", "" ],
+      [ "hyperactif", "hyperactive" ],
+      [ "hypnotique", "" ],
+      [ "hystérique", "" ],
+      [ "ibérique", "" ],
+      [ "iconoclaste", "" ],
+      [ "idéal", "e" ],
+      [ "idiot", "e" ],
+      [ "ignare", "" ],
+      [ "ignoble", "e" ],
+      [ "illettré", "e" ],
+      [ "illuminé", "e" ],
+      [ "imaginaire", "" ],
+      [ "immaculé", "e" ],
+      [ "immense", "" ],
+      [ "immobile", "" ],
+      [ "immoral", "e" ],
+      [ "impalpable", "" ],
+      [ "impatient", "e" ],
+      [ "impitoyable", "" ],
+      [ "important", "e" ],
+      [ "imposant", "e" ],
+      [ "imprévisible", "" ],
+      [ "impulsif", "impulsive" ],
+      [ "inachevé", "e" ],
+      [ "inactif", "inactive" ],
+      [ "inamical", "e" ],
+      [ "inaudible", "" ],
+      [ "incapable", "" ],
+      [ "inclassable", "" ],
+      [ "incohérent", "e" ],
+      [ "incolore", "" ],
+      [ "incompétent", "e" ],
+      [ "incongru", "e" ],
+      [ "incroyable", "" ],
+      [ "indécis", "e" ],
+      [ "indélicat", "e" ],
+      [ "indemne", "" ],
+      [ "indescriptible", "" ],
+      [ "indestructible", "" ],
+      [ "indistinct", "e" ],
+      [ "indolent", "e" ],
+      [ "ineffable", "" ],
+      [ "inerte", "" ],
+      [ "inexistant", "e" ],
+      [ "inexpressif", "inexpressive" ],
+      [ "infaillible", "" ],
+      [ "infâme", "" ],
+      [ "infect", "e" ],
+      [ "infernal", "e" ],
+      [ "informe", "" ],
+      [ "ingénu", "e" ],
+      [ "ingrat", "e" ],
+      [ "inhumain", "e" ],
+      [ "injuste", "" ],
+      [ "innocent", "e" ],
+      [ "inoffensif", "inoffensive" ],
+      [ "inouï", "e" ],
+      [ "inquiet", "e" ],
+      [ "insolite", "" ],
+      [ "insouciant", "e" ],
+      [ "intelligent", "e" ],
+      [ "intéressant", "e" ],
+      [ "intergalactique", "" ],
+      [ "intermédiaire", "" ], 
+      [ "interminable", "" ],
+      [ "interrogateur", "interrogatrice" ],
+      [ "intolérant", "e" ],
+      [ "intransigeant", "e" ],
+      [ "intrépide", "" ],
+      [ "introverti", "e" ],
+      [ "inutile", "" ],
+      [ "invincible", "" ],
+      [ "invisible", "" ],
+      [ "ironique", "" ],
+      [ "irréaliste", "" ],
+      [ "irrécupérable", "" ],
+      [ "irréel", "irréelle" ],
+      [ "irrégulier", "e" ],
+      [ "irremplaçable", "" ],
+      [ "irritable", "" ],
+      [ "irritant", "e" ],
+      [ "islandais", "e" ],
+      [ "isolé", "e" ],
+      [ "italien", "italienne" ],
+      [ "ivre", "" ],
+      [ "jaloux", "jalouse" ],
+      [ "japonais", "e" ],
+      [ "jeune", "" ],
+      [ "jovial", "e" ],
+      [ "joyeux", "joyeuse" ],
+      [ "judicieux", "judicieuse" ],
+      [ "juvénile", "" ],
+      [ "kenyan", "e" ],
+      [ "kurde", "" ],
+      [ "labyrinthique", "" ],
+      [ "lâche", "" ],
+      [ "laconique", "" ],
+      [ "laid", "e" ],
+      [ "laineux", "laineuse" ],
+      [ "las", "lasse" ],
+      [ "latin", "e" ],
+      [ "légendaire", "" ],
+      [ "lent", "e" ],
+      [ "libre", "" ],
+      [ "liquide", "" ],
+      [ "lituanien", "lituanienne" ],
+      [ "livide", "" ],
+      [ "lointain", "e" ],
+      [ "lourd", "e" ],
+      [ "loyal", "e" ],
+      [ "lucide", "" ],
+      [ "lugubre", "" ],
+      [ "lumineux", "lumineuse" ],
+      [ "lunatique", "" ],
+      [ "lyrique", "" ],
+      [ "macabre", "" ],
+      [ "macédonien", "macédonienne" ],
+      [ "machiavélique", "" ],
+      [ "magique", "" ],
+      [ "maigre", "" ],
+      [ "majestueux", "majestueuse" ],
+      [ "maladroit", "e" ],
+      [ "maléfique", "" ],
+      [ "malheureux", "malheureuse" ],
+      [ "malicieux", "malicieuse" ],
+      [ "malsain", "e" ],
+      [ "malveillant", "e" ],
+      [ "marbré", "e" ],
+      [ "marécageux", "marécageuse" ],
+      [ "maritime", "" ],
+      [ "massif", "massive" ],
+      [ "matérialiste", "" ],
+      [ "matinal", "e" ],
+      [ "maussade", "" ],
+      [ "mauve", "" ],
+      [ "médiocre", "" ],
+      [ "mélancolique", "" ],
+      [ "mélodieux", "mélodieuse" ],
+      [ "menaçant", "e" ],
+      [ "méprisant", "e" ],
+      [ "méridional", "e" ],
+      [ "mesquin", "e" ],
+      [ "métallique", "" ],
+      [ "métaphysique", "" ],
+      [ "méticuleux", "méticuleuse" ],
+      [ "mexicain", "e" ],
+      [ "mièvre", "" ],
+      [ "mince", "" ],
+      [ "minéral", "e" ],
+      [ "miniature", "" ],
+      [ "minuscule", "" ],
+      [ "misanthrope", "" ],
+      [ "moche", "" ],
+      [ "moderne", "" ], 
+      [ "modeste", "" ],
+      [ "monégasque", "" ],
+      [ "monstrueux", "monstreuse" ],
+      [ "morbide", "" ],
+      [ "moribond", "e" ],
+      [ "mou", "molle" ],
+      [ "moyen", "moyenne" ],
+      [ "muet", "muette" ],
+      [ "multicolore", "" ],
+      [ "musclé", "e" ],
+      [ "mystérieux", "mystérieuse" ],
+      [ "mystique", "" ],
+      [ "mythomane", "" ],
+      [ "naïf", "naïve" ],
+      [ "nain", "naine" ],
+      [ "naufragé", "e" ],
+      [ "nébuleux", "nébuleuse" ],
+      [ "nécrophage", "" ],
+      [ "néerlandais", "e" ],
+      [ "négatif", "négative" ],
+      [ "nerveux", "nerveuse" ],
+      [ "neutre", "" ],
+      [ "niais", "e" ],
+      [ "noble", "" ],
+      [ "nocturne", "" ],
+      [ "noir", "e" ],
+      [ "noirâtre", "" ],
+      [ "nordique", "" ],
+      [ "normal", "e" ],
+      [ "nouveau", "nouvelle" ],
+      [ "novice", "" ],
+      [ "nuageux", "nuageuse" ],
+      [ "nucléaire", "" ],
+      [ "numérique", "" ],
+      [ "obèse", "" ],
+      [ "obscur", "e" ],
+      [ "obséquieux", "obséquieuse" ],
+      [ "obstiné", "e" ],
+      [ "occulte", "" ],
+      [ "occupé", "e" ],
+      [ "océanique", "" ],
+      [ "ocre", "" ],
+      [ "oisif", "oisive" ],
+      [ "ombrageux", "ombrageuse" ],
+      [ "omnivore", "" ],
+      [ "ondoyant", "e" ],
+      [ "onirique", "" ],
+      [ "opalescent", "e" ],
+      [ "opaque", "" ],
+      [ "opiniâtre", "" ],
+      [ "orageux", "orageuse" ],
+      [ "orange", "" ],
+      [ "oriental", "e" ],
+      [ "original", "e" ],
+      [ "orthogonal", "e" ],
+      [ "oscillatoire", "" ],
+      [ "outrecuidant", "e" ],
+      [ "ovale", "" ],
+      [ "pacifique", "" ],
+      [ "pâle", "" ],
+      [ "palmé", "e" ],
+      [ "panoramique", "" ],
+      [ "pantois", "e" ],
+      [ "parallèle", "" ],
+      [ "paranoïaque", "" ],
+      [ "paranormal", "e" ],
+      [ "paresseux", "paresseuse" ],
+      [ "parfait", "e" ],
+      [ "passionné", "e" ],
+      [ "pastoral", "e" ],
+      [ "pathétique", "" ],
+      [ "patibulaire", "" ],
+      [ "pédagogue", "" ],
+      [ "pénible", "" ],
+      [ "perçant", "e" ],
+      [ "perdu", "e" ],
+      [ "performant", "e" ],
+      [ "pernicieux", "pernicieuse" ],
+      [ "perplexe", "" ],
+      [ "persévérant", "e" ],
+      [ "perspicace", "" ],
+      [ "pertinent", "e" ],
+      [ "pessimiste", "" ],
+      [ "pestilentiel", "pestilentielle" ],
+      [ "pétulant", "e" ],
+      [ "peureux", "peureuse" ],
+      [ "phénoménal", "e" ],
+      [ "philosophe", "" ],
+      [ "phosphorescent", "e" ],
+      [ "photogénique", "" ],
+      [ "pictural", "e" ],
+      [ "piquant", "e" ],
+      [ "placide", "" ],
+      [ "plaintif", "plaintive" ],
+      [ "plat", "e" ],
+      [ "pleurnicheur", "pleurnicheuse" ],
+      [ "pneumatique", "" ],
+      [ "poilu", "e" ],
+      [ "polaire", "" ],
+      [ "polonais", "e" ],
+      [ "polycéphale", "" ],
+      [ "polyvalent", "e" ],
+      [ "pompeux", "pompeuse" ],
+      [ "populaire", "" ],
+      [ "portuaire", "" ],
+      [ "positif", "positive" ],
+      [ "possédé", "e" ],
+      [ "potentiel", "potentielle" ],
+      [ "poudreux", "poudreuse" ],
+      [ "pourpre", "" ],
+      [ "pourri", "e" ],
+      [ "précautionneux", "précautionneuse" ],
+      [ "précieux", "précieuse" ],
+      [ "précis", "e" ],
+      [ "précoce", "" ],
+      [ "préglaciaire", "" ],
+      [ "préhistorique", "" ],
+      [ "prémonitoire", "" ],
+      [ "prestigieux", "prestigieuse" ],
+      [ "prétentieux", "prétentieuse" ],
+      [ "prévisible", "" ],
+      [ "prévoyant", "e" ],
+      [ "primitif", "primitive" ],
+      [ "prismatique", "" ],
+      [ "problématique", "" ],
+      [ "prodigieux", "prodigieuse" ],
+      [ "progressiste", "" ],
+      [ "prolixe", "" ],
+      [ "prophétique", "" ],
+      [ "propre", "" ],
+      [ "prosaïque", "" ],
+      [ "provençal", "e" ],
+      [ "providentiel", "providentielle" ],
+      [ "prudent", "e" ],
+      [ "psychotique", "" ],
+      [ "puéril", "e" ],
+      [ "putride", "" ],
+      [ "pyramidal", "e" ],
+      [ "pyrénéen", "pyrénéenne" ],
+      [ "quadratique", "" ],
+      [ "quantique", "" ],
+      [ "québécois", "e" ],
+      [ "rabelaisien", "rabelaisienne" ],
+      [ "rabougri", "e" ],
+      [ "radioactif", "radioactive" ],
+      [ "raisonnable", "" ],
+      [ "rampant", "e" ],
+      [ "ravissant", "e" ],
+      [ "rayonnant", "e" ],
+      [ "rédhibitoire", "" ],
+      [ "redoutable", "" ],
+      [ "réel", "réelle" ],
+      [ "remarquable", "" ],
+      [ "renfrogné", "e" ],
+      [ "renversant", "e" ],
+      [ "reposant", "e" ],
+      [ "repoussant", "e" ],
+      [ "reptilien", "reptilienne" ],
+      [ "répugnant", "e" ],
+      [ "resplendissant", "e" ],
+      [ "retors", "e" ],
+      [ "réverbérant", "e" ],
+      [ "rêveur", "rêveuse" ],
+      [ "rigide", "" ],
+      [ "rigoureux", "rigoureuse" ],
+      [ "robuste", "" ],
+      [ "romanesque", "" ],
+      [ "rose", "" ],
+      [ "rouge", "" ],
+      [ "rougeâtre", "" ],
+      [ "royal", "e" ],
+      [ "rutilant", "e" ],
+      [ "saccadé", "e" ],
+      [ "sacré", "e" ],
+      [ "saisissant", "e" ],
+      [ "saisonnier", "e" ],
+      [ "salutaire", "" ],
+      [ "sanguinaire", "" ],
+      [ "sarcastique", "" ],
+      [ "satanique", "" ],
+      [ "saturnien", "saturnienne" ],
+      [ "saumâtre", "" ],
+      [ "sauvage", "" ],
+      [ "savoureux", "savoureuse" ],
+      [ "scandinave", "" ],
+      [ "sceptique", "" ],
+      [ "schizoïde", "" ],
+      [ "scientifique", "" ],
+      [ "sec", "sèche" ],
+      [ "sédentaire", "" ],
+      [ "séduisant", "e" ],
+      [ "sémillant", "e" ],
+      [ "sénile", "" ],
+      [ "sensationnel", "sensationnelle" ],  // *
+      [ "sensible", "" ],
+      [ "sentimental", "e" ],
+      [ "serein", "e" ],
+      [ "sérieux", "sérieuse" ],
+      [ "sévère", "" ],
+      [ "sibyllin", "e" ],
+      [ "sidéral", "e" ],
+      [ "sidérant", "e" ],
+      [ "silencieux", "silencieuse" ],
+      [ "sincère", "" ],
+      [ "singulier", "e" ],
+      [ "sinistre", "" ],
+      [ "sinueux", "sinueuse" ],
+      [ "sobre", "" ],
+      [ "sociable", "" ],
+      [ "solaire", "" ],
+      [ "solide", "" ],
+      [ "somnambule", "" ],
+      [ "sordide", "" ],
+      [ "soucieux", "soucieuse" ],
+      [ "soupçonneux", "soupçonneuse" ],
+      [ "souple", "" ],
+      [ "sourcilleux", "sourcilleuse" ],
+      [ "sourd", "e" ],
+      [ "spatial", "e" ],
+      [ "spectaculaire", "" ],
+      [ "spectral", "e" ],
+      [ "sphérique", "" ],
+      [ "spirituel", "spirituelle" ],
+      [ "splendide", "" ],
+      [ "squameux", "squameuse" ],
+      [ "squelettique", "" ],
+      [ "statique", "" ],
+      [ "stimulant", "e" ],
+      [ "stoïque", "" ],
+      [ "strident", "e" ],
+      [ "stupéfiant", "e" ],
+      [ "suave", "" ],
+      [ "sublime", "" ],
+      [ "submersible", "" ],
+      [ "subtil", "e" ],
+      [ "subversif", "subversive" ],
+      [ "sud-américain", "e" ],
+      [ "suicidaire", "" ],
+      [ "super", "" ],  //
+      [ "superbe", "" ],   //
+      [ "superflu", "e" ],
+      [ "surnaturel", "surnaturelle" ],
+      [ "surprenant", "e" ],
+      [ "susceptible", "" ],
+      [ "suspect", "e" ],
+      [ "suspicieux", "suspicieuse" ],
+      [ "svelte", "" ],
+      [ "sympathique", "" ],
+      [ "taciturne", "" ],
+      [ "talentueux", "talentueuse" ],
+      [ "taquin", "e" ],
+      [ "tectonique", "" ],
+      [ "teigneux", "teigneuse" ],
+      [ "tellurique", "" ],
+      [ "tempétueux", "tempétueuse" ],
+      [ "tenace", "" ],
+      [ "tendre", "" ], //
+      [ "ténébreux", "ténébreuse" ],
+      [ "tentaculaire", "" ],
+      [ "terne", "" ],
+      [ "terreux", "terreuse" ],
+      [ "terrible", "" ],
+      [ "terrifiant", "e" ],
+      [ "têtu", "e" ],
+      [ "thaïlandais", "e" ],
+      [ "timide", "" ],
+      [ "titanesque", "" ],
+      [ "tolérant", "e" ],
+      [ "tonitruant", "e" ],
+      [ "tordu", "e" ],
+      [ "tortueux", "tortueuse" ],
+      [ "toxique", "" ],
+      [ "tragique", "" ],
+      [ "tranchant", "e" ],
+      [ "tranquille", "" ],
+      [ "transparent", "e" ],
+      [ "trapu", "e" ],
+      [ "trépidant", "e" ],
+      [ "triangulaire", "" ],
+      [ "tridimensionnel", "tridimensionnelle" ],
+      [ "triste", "" ],
+      [ "truculent", "e" ],
+      [ "tzigane", "" ],
+      [ "tumultueux", "tumultueuse" ],
+      [ "turbulent", "e" ],
+      [ "typique", "" ],
+      [ "ubuesque", "" ],
+      [ "uniforme", "" ],
+      [ "unique", "" ],
+      [ "urbain", "e" ],
+      [ "vaillant", "e" ],
+      [ "valeureux", "valeureuse" ],
+      [ "vampirique", "" ],
+      [ "vaniteux", "vaniteuse" ],
+      [ "vaudou", "" ],
+      [ "végétal", "e" ],
+      [ "véloce", "" ],
+      [ "velu", "e" ],
+      [ "vénéneux", "vénéneuse" ],
+      [ "venimeux", "venimeuse" ],
+      [ "verdâtre", "" ],
+      [ "versatile", "" ],
+      [ "vert", "e" ],
+      [ "vertical", "e" ],
+      [ "vertigineux", "vertigineuse" ],
+      [ "veule", "" ],
+      [ "vicieux", "vicieuse" ],
+      [ "vif", "vive" ],
+      [ "vil", "e" ],
+      [ "violet", "violette" ],
+      [ "virtuel", "virtuelle" ],
+      [ "virtuose", "" ],
+      [ "vitreux", "vitreuse" ],
+      [ "vivant", "e" ],
+      [ "volant", "e" ],
+      [ "volcanique", "" ],
+      [ "volubile", "" ],
+      [ "vorace", "" ],
+      [ "vulgaire", "" ],
+      [ "xylophage", "" ],
+      [ "zébré", "e" ],
+      [ "zodiacal", "e" ]
+   ]
+}; 
+   
+exports.auxiliaryVerbs = ["avoir","être","both"];
+exports.verbTypes = ["intransitive","transitive","modal"];
+exports.verbs = {
+   "intransitive": [ // [verb, group, auxiliary]
+      [ "abandonner", 1, 0 ],
+      [ "abdiquer", 1, 0 ],
+      [ "aboyer", 1, 0 ],
+      [ "accélérer", 1, 0 ],
+      [ "acquiescer", 1, 0 ],
+      [ "affabuler", 1, 0 ],
+      [ "affluer", 1, 0 ],
+      [ "agoniser", 1, 0 ],
+      [ "angoisser", 1, 0 ],
+      [ "anticiper", 1, 0 ],
+      [ "appuyer", 1, 0 ],
+      [ "argumenter", 1, 0 ],
+      [ "arrêter", 1, 0 ],
+      [ "arriver", 1, 1 ],
+      [ "articuler", 1, 0 ],
+      [ "assumer", 1, 0 ],
+      [ "atterrir", 2, 0 ],
+      [ "avancer", 1, 0 ],
+      [ "bâiller", 1, 0 ],
+      [ "baragouiner", 1, 0 ],
+      [ "barouder", 1, 0 ],
+      [ "basculer", 1, 0 ],
+      [ "batailler", 1, 0 ],
+      [ "batifoler", 1, 0 ],
+      [ "baver", 1, 0 ],
+      [ "bavarder", 1, 0 ],
+      [ "bégayer", 1, 0 ],
+      [ "bêler", 1, 0 ],
+      [ "beugler", 1, 0 ],
+      [ "bifurquer", 1, 0 ],
+      [ "bivouaquer", 1, 0 ],
+      [ "boiter", 1, 0 ],
+      [ "boitiller", 1, 0 ],
+      [ "bondir", 2, 0, "" ],
+      [ "bouder", 1, 0 ],
+      [ "bouger", 1, 0 ],
+      [ "bouillonner", 1, 0 ],
+      [ "bouquiner", 1, 0 ],
+      [ "bourgeonner", 1, 0 ],
+      [ "boxer", 1, 0 ],
+      [ "braconner", 1, 0 ],
+      [ "brailler", 1, 0 ],
+      [ "bredouiller", 1, 0 ],
+      [ "bricoler", 1, 0 ],
+      [ "briller", 1, 0 ],
+      [ "broder", 1, 0 ],
+      [ "bronzer", 1, 0 ],
+      [ "broquanter", 1, 0 ],
+      [ "brosser", 1, 0 ],
+      [ "brûler", 1, 0 ],
+      [ "butiner", 1, 0 ],
+      [ "céder", 1, 0 ],
+      [ "cafouiller", 1, 0 ],
+      [ "calculer", 1, 0 ],
+      [ "camper", 1, 0 ],
+      [ "canarder", 1, 0 ],
+      [ "capitaliser", 1, 0 ],
+      [ "capituler", 1, 0 ],
+      [ "caraméliser", 1, 0 ],
+      [ "cartonner", 1, 0 ],
+      [ "cauchemarder", 1, 0 ],
+      [ "causer", 1, 0 ],
+      [ "cavaler", 1, 0 ],
+      [ "cesser", 1, 0 ],
+      [ "chahuter", 1, 0 ],
+      [ "changer", 1, 0 ],
+      [ "chanceler", 1, 0 ],
+      [ "chanter", 1, 0 ],
+      [ "chantonner", 1, 0 ],
+      [ "chaparder", 1, 0 ],
+      [ "chasser", 1, 0 ],
+      [ "chauffer", 1, 0 ],
+      [ "chavirer", 1, 0 ],
+      [ "cheminer", 1, 0 ],
+      [ "chercher", 1, 0 ],
+      [ "chevaucher", 1, 0 ],
+      [ "chiffrer", 1, 0 ],
+      [ "chipoter", 1, 0 ],
+      [ "chorégraphier", 1, 0 ],
+      [ "chroniquer", 1, 0 ],
+      [ "chuchoter", 1, 0 ],
+      [ "chuter", 1, 0 ],
+      [ "cicatriser", 1, 0 ],
+      [ "circuler", 1, 0 ],
+      [ "claironner", 1, 0 ],
+      [ "clignoter", 1, 0 ],
+      [ "clopiner", 1, 0 ],
+      [ "coder", 1, 0 ],
+      [ "cogiter", 1, 0 ],
+      [ "cohabiter", 1, 0 ],
+      [ "collaborer", 1, 0 ],
+      [ "commander", 1, 0 ],
+      [ "commencer", 1, 0 ],
+      [ "commercer", 1, 0 ],
+      [ "communiquer", 1, 0 ],
+      [ "composer", 1, 0 ],
+      [ "compter", 1, 0 ],
+      [ "consommer", 1, 0 ],
+      [ "conspirer", 1, 0 ],
+      [ "continuer", 1, 0 ],
+      [ "contre-attaquer", 1, 0 ],
+      [ "converger", 1, 0 ],
+      [ "converser", 1, 0 ],
+      [ "coopérer", 1, 0 ],
+      [ "cotiser", 1, 0 ],
+      [ "couler", 1, 0 ],
+      [ "crier", 1, 0 ],
+      [ "cracher", 1, 0 ],
+      [ "crapahuter", 1, 0 ],
+      [ "craquer", 1, 0 ],
+      [ "crépiter", 1, 0 ],
+      [ "creuser", 1, 0 ],
+      [ "cristalliser", 1, 0 ],
+      [ "croasser", 1, 0 ],
+      [ "cuisiner", 1, 0 ],
+      [ "culpabiliser", 1, 0 ],
+      [ "danser", 1, 0 ],
+      [ "déambuler", 1, 0 ],
+      [ "débarquer", 1, 0 ],
+      [ "débouler", 1, 0 ],
+      [ "débuter", 1, 0 ],
+      [ "décamper", 1, 0 ],
+      [ "déchanter", 1, 0 ],
+      [ "déchiffrer", 1, 0 ],
+      [ "décliner", 1, 0 ],
+      [ "décoller", 1, 0 ],
+      [ "décompresser", 1, 0 ],
+      [ "dédramatiser", 1, 0 ],
+      [ "déferler", 1, 0 ],
+      [ "défiler", 1, 0 ],
+      [ "dégénérer", 1, 0 ],
+      [ "dégouliner", 1, 0 ],
+      [ "dégringoler", 1, 0 ],
+      [ "déjeuner", 1, 0 ],
+      [ "délirer", 1, 0 ],
+      [ "démarrer", 1, 0 ],
+      [ "déménager", 1, 0 ],
+      [ "démissionner", 1, 0 ],
+      [ "déprimer", 1, 0 ],
+      [ "dérailler", 1, 0 ],
+      [ "déraisonner", 1, 0 ],
+      [ "déraper", 1, 0 ],
+      [ "dériver", 1, 0 ],
+      [ "désapprouver", 1, 0 ],
+      [ "déserter", 1, 0 ],
+      [ "détaler", 1, 0 ],
+      [ "dévier", 1, 0 ],
+      [ "dialoguer", 1, 0 ],
+      [ "digérer", 1, 0 ],
+      [ "dîner", 1, 0 ],
+      [ "discuter", 1, 0 ],
+      [ "disjoncter", 1, 0 ],
+      [ "divaguer", 1, 0 ],
+      [ "diverger", 1, 0 ],
+      [ "divorcer", 1, 0 ],
+      [ "dominer", 1, 0 ],
+      [ "douter", 1, 0 ],
+      [ "dramatiser", 1, 0 ],
+      [ "durer", 1, 0 ],
+      [ "échouer", 1, 0 ],
+      [ "éclairer", 1, 0 ],
+      [ "économiser", 1, 0 ],
+      [ "écouter", 1, 0 ],
+      [ "émerger", 1, 0 ],
+      [ "émigrer", 1, 0 ],
+      [ "emménager", 1, 0 ],
+      [ "empester", 1, 0 ],
+      [ "enfler", 1, 0 ],
+      [ "enquêter", 1, 0 ],
+      [ "enrager", 1, 0 ],
+      [ "entrer", 1, 1 ],
+      [ "errer", 1, 0 ],
+      [ "éructer", 1, 0 ],
+      [ "espérer", 1, 0 ],
+      [ "éternuer", 1, 0 ],
+      [ "étudier", 1, 0 ],
+      [ "évoluer", 1, 0 ],
+      [ "exagérer", 1, 0 ],
+      [ "exister", 1, 0 ],
+      [ "expérimenter", 1, 0 ],
+      [ "expirer", 1, 0 ],
+      [ "exploser", 1, 0 ],
+      [ "extrapoler", 1, 0 ],
+      [ "exulter", 1, 0 ],
+      [ "fanfaronner", 1, 0 ],
+      [ "fatiguer", 1, 0 ],
+      [ "feinter", 1, 0 ],
+      [ "fermenter", 1, 0 ],
+      [ "festoyer", 1, 0 ],
+      [ "filmer", 1, 0 ],
+      [ "flamber", 1, 0 ],
+      [ "flamboyer", 1, 0 ],
+      [ "flâner", 1, 0 ],
+      [ "flancher", 1, 0 ],
+      [ "flotter", 1, 0 ],
+      [ "fluctuer", 1, 0 ],
+      [ "foisonner", 1, 0 ],
+      [ "foncer", 1, 0 ],
+      [ "fonctionner", 1, 0 ],
+      [ "fraterniser", 1, 0 ],
+      [ "frauder", 1, 0 ],
+      [ "freiner", 1, 0 ],
+      [ "frimer", 1, 0 ],
+      [ "frissonner", 1, 0 ],
+      [ "fusionner", 1, 0 ],
+      [ "gagner", 1, 0 ],
+      [ "galérer", 1, 0 ],
+      [ "galoper", 1, 0 ],
+      [ "gambader", 1, 0 ],
+      [ "geler", 1, 0 ],
+      [ "gesticuler", 1, 0 ],
+      [ "gigoter", 1, 0 ],
+      [ "glisser", 1, 0 ],
+      [ "glousser", 1, 0 ],
+      [ "gouverner", 1, 0 ],
+      [ "grelotter", 1, 0 ],
+      [ "gribouiller", 1, 0 ],
+      [ "grimacer", 1, 0 ],
+      [ "grimper", 1, 0 ],
+      [ "grincer", 1, 0 ],
+      [ "grogner", 1, 0 ],
+      [ "gronder", 1, 0 ],
+      [ "guerroyer", 1, 0 ],
+      [ "guetter", 1, 0 ],
+      [ "hériter", 1, 0 ],
+      [ "hésiter", 1, 0 ],
+      [ "hiberner", 1, 0 ],
+      [ "hululer", 1, 0 ],
+      [ "hurler", 1, 0 ],
+      [ "immigrer", 1, 0 ],
+      [ "imploser", 1, 0 ],
+      [ "improviser", 1, 0 ],
+      [ "insister", 1, 0 ],
+      [ "interférer", 1, 0 ],
+      [ "ironiser", 1, 0 ],
+      [ "jacasser", 1, 0 ],
+      [ "jardiner", 1, 0 ],
+      [ "jongler", 1, 0 ],
+      [ "jouer", 1, 0 ],
+      [ "klaxonner", 1, 0 ],
+      [ "légiférer", 1, 0 ],
+      [ "léviter", 1, 0 ],
+      [ "loucher", 1, 0 ],
+      [ "louvoyer", 1, 0 ],
+      [ "lutter", 1, 0 ],
+      [ "manifester", 1, 0 ],
+      [ "marcher", 1, 0 ],
+      [ "marchander", 1, 0 ],
+      [ "mastiquer", 1, 0 ],
+      [ "maugréer", 1, 0 ],
+      [ "méditer", 1, 0 ],
+      [ "mémoriser", 1, 0 ],
+      [ "mendier", 1, 0 ],
+      [ "meugler", 1, 0 ],
+      [ "miauler", 1, 0 ],
+      [ "migrer", 1, 0 ],
+      [ "miroiter", 1, 0 ],
+      [ "monter", 1, 0 ],
+      [ "muer", 1, 0 ],
+      [ "murmurer", 1, 0 ],
+      [ "nier", 1, 0 ],
+      [ "nager", 1, 0 ],
+      [ "naviguer", 1, 0 ],
+      [ "négocier", 1, 0 ],
+      [ "obliquer", 1, 0 ],
+      [ "ondoyer", 1, 0 ],
+      [ "onduler", 1, 0 ],
+      [ "opiner", 1, 0 ],
+      [ "osciller", 1, 0 ],
+      [ "oublier", 1, 0 ],
+      [ "palpiter", 1, 0 ],
+      [ "paniquer", 1, 0 ],
+      [ "papoter", 1, 0 ],
+      [ "pardonner", 1, 0 ],
+      [ "parier", 1, 0 ],
+      [ "paresser", 1, 0 ],
+      [ "parler", 1, 0 ],
+      [ "patauger", 1, 0 ],
+      [ "patienter", 1, 0 ],
+      [ "patrouiller", 1, 0 ],
+      [ "payer", 1, 0 ],
+      [ "pêcher", 1, 0 ],
+      [ "pédaler", 1, 0 ],
+      [ "peiner", 1, 0 ],
+      [ "penser", 1, 0 ],
+      [ "perdurer", 1, 0 ],
+      [ "persévérer", 1, 0 ],
+      [ "persister", 1, 0 ],
+      [ "philosopher", 1, 0 ],
+      [ "piocher", 1, 0 ],
+      [ "pique-niquer", 1, 0 ],
+      [ "pivoter", 1, 0 ],
+      [ "plier", 1, 0 ],
+      [ "plaisanter", 1, 0 ],
+      [ "pleurer", 1, 0 ],
+      [ "pleurnicher", 1, 0 ],
+      [ "plonger", 1, 0 ],
+      [ "polémiquer", 1, 0 ],
+      [ "polluer", 1, 0 ],
+      [ "positiver", 1, 0 ],
+      [ "postuler", 1, 0 ],
+      [ "pouffer", 1, 0 ],
+      [ "prier", 1, 0 ],
+      [ "proliférer", 1, 0 ],
+      [ "prospérer", 1, 0 ],
+      [ "protester", 1, 0 ],
+      [ "pulluler", 1, 0 ],
+      [ "régner", 1, 0 ],
+      [ "raccrocher", 1, 0 ],
+      [ "radoter", 1, 0 ],
+      [ "raisonner", 1, 0 ],
+      [ "ramer", 1, 0 ],
+      [ "ramper", 1, 0 ],
+      [ "randonner", 1, 0 ],
+      [ "rapetisser", 1, 0 ],
+      [ "rayonner", 1, 0 ],
+      [ "rechuter", 1, 0 ],
+      [ "récidiver", 1, 0 ],
+      [ "recommencer", 1, 0 ],
+      [ "reculer", 1, 0 ],
+      [ "redémarrer", 1, 0 ],
+      [ "refuser", 1, 0 ],
+      [ "regarder", 1, 0 ],
+      [ "régresser", 1, 0 ],
+      [ "rejouer", 1, 0 ],
+      [ "remuer", 1, 0 ],
+      [ "rentrer", 1, 1 ],
+      [ "respirer", 1, 0 ],
+      [ "ressusciter", 1, 0 ],
+      [ "rester", 1, 1 ],
+      [ "rêver", 1, 0 ],
+      [ "rêvasser", 1, 0 ],
+      [ "réviser", 1, 0 ],
+      [ "ricaner", 1, 0 ],
+      [ "rigoler", 1, 0 ],
+      [ "riposter", 1, 0 ],
+      [ "rôder", 1, 0 ],
+      [ "ronronner", 1, 0 ],
+      [ "roucouler", 1, 0 ],
+      [ "rougeoyer", 1, 0 ],
+      [ "rouler", 1, 0 ],
+      [ "rouspéter", 1, 0 ],
+      [ "ruminer", 1, 0 ],
+      [ "ruser", 1, 0 ],
+      [ "saliver", 1, 0 ],
+      [ "sangloter", 1, 0 ],
+      [ "saturer", 1, 0 ],
+      [ "sauter", 1, 0 ],
+      [ "sautiller", 1, 0 ],
+      [ "scier", 1, 0 ],
+      [ "scintiller", 1, 0 ],
+      [ "sculpter", 1, 0 ],
+      [ "serpenter", 1, 0 ],
+      [ "sécher", 1, 0 ],
+      [ "siffler", 1, 0 ],
+      [ "siffloter", 1, 0 ],
+      [ "signer", 1, 0 ],
+      [ "simplifier", 1, 0 ],
+      [ "skier", 1, 0 ],
+      [ "slalomer", 1, 0 ],
+      [ "soigner", 1, 0 ],
+      [ "somnoler", 1, 0 ],
+      [ "songer", 1, 0 ],
+      [ "souffler", 1, 0 ],
+      [ "souper", 1, 0 ],
+      [ "soupirer", 1, 0 ],
+      [ "spéculer", 1, 0 ],
+      [ "sprinter", 1, 0 ],
+      [ "stagner", 1, 0 ],
+      [ "stresser", 1, 0 ],
+      [ "suer", 1, 0 ],
+      [ "subsister", 1, 0 ],
+      [ "succomber", 1, 0 ],
+      [ "suffoquer", 1, 0 ],
+      [ "surnager", 1, 0 ],
+      [ "sursauter", 1, 0 ],
+      [ "sympathiser", 1, 0 ],
+      [ "tambouriner", 1, 0 ],
+      [ "tarder", 1, 0 ],
+      [ "tâtonner", 1, 0 ],
+      [ "téléphoner", 1, 0 ],
+      [ "tergiverser", 1, 0 ],
+      [ "théoriser", 1, 0 ],
+      [ "tituber", 1, 0 ],
+      [ "tomber", 1, 1 ],
+      [ "tourbillonner", 1, 0 ],
+      [ "tourner", 1, 0 ],
+      [ "tournoyer", 1, 0 ],
+      [ "tousser", 1, 0 ],
+      [ "traficoter", 1, 0 ],
+      [ "traîner", 1, 0 ],
+      [ "traînasser", 1, 0 ],
+      [ "transpirer", 1, 0 ],
+      [ "travailler", 1, 0 ],
+      [ "trébucher", 1, 0 ],
+      [ "trembler", 1, 0 ],
+      [ "trépigner", 1, 0 ],
+      [ "tricher", 1, 0 ],
+      [ "tricoter", 1, 0 ],
+      [ "triompher", 1, 0 ],
+      [ "trôner", 1, 0 ],
+      [ "trotter", 1, 0 ],
+      [ "trottiner", 1, 0 ],
+      [ "vaciller", 1, 0 ],
+      [ "vagabonder", 1, 0 ],
+      [ "varier", 1, 0 ],
+      [ "végéter", 1, 0 ],
+      [ "veiller", 1, 0 ],
+      [ "verbaliser", 1, 0 ],
+      [ "verdoyer", 1, 0 ],
+      [ "vibrer", 1, 0 ],
+      [ "virevolter", 1, 0 ],
+      [ "vociférer", 1, 0 ],
+      [ "voguer", 1, 0 ],
+      [ "voler", 1, 0 ],
+      [ "voltiger", 1, 0 ],
+      [ "voter", 1, 0 ],
+      [ "voyager", 1, 0 ],
+      [ "zigzaguer", 1, 0 ]
+   ],
+   "transitive": [   // [verb, group, auxiliary, complement]
+      [ "abandonner", 1, 0 ],
+      [ "abîmer", 1, 0 ],
+      [ "aborder", 1, 0 ],
+      [ "abreuver", 1, 0 ],
+      [ "abriter", 1, 0 ],
+      [ "absorber", 1, 0 ],
+      [ "accabler", 1, 0 ],
+      [ "accentuer", 1, 0 ],
+      [ "accepter", 1, 0 ],
+      [ "acclamer", 1, 0 ],
+      [ "acclimater", 1, 0 ],
+      [ "accompagner", 1, 0 ],
+      [ "accrocher", 1, 0 ],
+      [ "accumuler", 1, 0 ],
+      [ "accuser", 1, 0 ],
+      [ "acheter", 1, 0 ],
+      [ "acidifier", 1, 0 ],
+      [ "aciduler", 1, 0 ],
+      [ "actionner", 1, 0 ],
+      [ "activer", 1, 0 ],
+      [ "actualiser", 1, 0 ],
+      [ "adapter", 1, 0 ],
+      [ "administrer", 1, 0 ],
+      [ "admirer", 1, 0 ],
+      [ "adorer", 1, 0 ],
+      [ "aduler", 1, 0 ],
+      [ "aérer", 1, 0 ],
+      [ "affamer", 1, 0 ],
+      [ "afficher", 1, 0 ],
+      [ "affoler", 1, 0 ],
+      [ "affronter", 1, 0 ],
+      [ "agacer", 1, 0 ],
+      [ "aglutiner", 1, 0 ],
+      [ "agripper", 1, 0 ],
+      [ "aider", 1, 0 ],
+      [ "aimer", 1, 0 ],
+      [ "aimanter", 1, 0 ],
+      [ "alerter", 1, 0 ],
+      [ "aligner", 1, 0 ],
+      [ "allonger", 1, 0 ],
+      [ "allumer", 1, 0 ],
+      [ "amener", 1, 0 ],
+      [ "amarrer", 1, 0 ],
+      [ "amasser", 1, 0 ],
+      [ "améliorer", 1, 0 ],
+      [ "aménager", 1, 0 ],
+      [ "amuser", 1, 0 ],
+      [ "analyser", 1, 0 ],
+      [ "anesthésier", 1, 0 ],
+      [ "animer", 1, 0 ],
+      [ "annihiler", 1, 0 ],
+      [ "annuler", 1, 0 ],
+      [ "anticiper", 1, 0 ],
+      [ "apaiser", 1, 0 ],
+      [ "apostropher", 1, 0 ],
+      [ "appeler", 1, 0 ],
+      [ "apporter", 1, 0 ],
+      [ "apprécier", 1, 0 ],
+      [ "apprivoiser", 1, 0 ],
+      [ "approuver", 1, 0 ],
+      [ "archiver", 1, 0 ],
+      [ "arnaquer", 1, 0 ],
+      [ "aromatiser", 1, 0 ],
+      [ "arranger", 1, 0 ],
+      [ "arrêter", 1, 0 ],
+      [ "arrimer", 1, 0 ],
+      [ "arroser", 1, 0 ],
+      [ "aseptiser", 1, 0 ],
+      [ "aspirer", 1, 0 ],
+      [ "assaisonner", 1, 0 ],
+      [ "assommer", 1, 0 ],
+      [ "asticoter", 1, 0 ],
+      [ "atomiser", 1, 0 ],
+      [ "attaquer", 1, 0 ],
+      [ "attraper", 1, 0 ],
+      [ "ausculter", 1, 0 ],
+      [ "automatiser", 1, 0 ],
+      [ "bafouer", 1, 0 ],
+      [ "balancer", 1, 0 ],
+      [ "baliser", 1, 0 ],
+      [ "balkaniser", 1, 0 ],
+      [ "balloter", 1, 0 ],
+      [ "banaliser", 1, 0 ],
+      [ "baptiser", 1, 0 ],
+      [ "baratiner", 1, 0 ],
+      [ "barricader", 1, 0 ],
+      [ "bazarder", 1, 0 ],
+      [ "bercer", 1, 0 ],
+      [ "berner", 1, 0 ],
+      [ "bétonner", 1, 0 ],
+      [ "blâmer", 1, 0 ],
+      [ "blesser", 1, 0 ],
+      [ "bloquer", 1, 0 ],
+      [ "bombarder", 1, 0 ],
+      [ "border", 1, 0 ],
+      [ "boucher", 1, 0 ],
+      [ "bouger", 1, 0 ],
+      [ "bouder", 1, 0 ],
+      [ "bouleverser", 1, 0 ],
+      [ "bousculer", 1, 0 ],
+      [ "boxer", 1, 0 ],
+      [ "boycotter", 1, 0 ],
+      [ "braver", 1, 0 ],
+      [ "bricoler", 1, 0 ],
+      [ "brimer", 1, 0 ],
+      [ "briser", 1, 0 ],
+      [ "broyer", 1, 0 ],
+      [ "brosser", 1, 0 ],
+      [ "brouter", 1, 0 ],
+      [ "brûler", 1, 0 ],
+      [ "brusquer", 1, 0 ],
+      [ "butiner", 1, 0 ],
+      [ "cacher", 1, 0 ],
+      [ "cadenasser", 1, 0 ],
+      [ "cajoler", 1, 0 ],
+      [ "caler", 1, 0 ],
+      [ "calciner", 1, 0 ],
+      [ "calfeutrer", 1, 0 ],
+      [ "calibrer", 1, 0 ],
+      [ "calmer", 1, 0 ],
+      [ "cambrioler", 1, 0 ],
+      [ "camoufler", 1, 0 ],
+      [ "canaliser", 1, 0 ],
+      [ "canarder", 1, 0 ],
+      [ "capter", 1, 0 ],
+      [ "captiver", 1, 0 ],
+      [ "capturer", 1, 0 ],
+      [ "carboniser", 1, 0 ],
+      [ "caresser", 1, 0 ],
+      [ "caricaturer", 1, 0 ],
+      [ "casser", 1, 0 ],
+      [ "cataloguer", 1, 0 ],
+      [ "catapulter", 1, 0 ],
+      [ "cautionner", 1, 0 ],
+      [ "célébrer", 1, 0 ],
+      [ "censurer", 1, 0 ],
+      [ "centraliser", 1, 0 ],
+      [ "centrer", 1, 0 ],
+      [ "centrifuger", 1, 0 ],
+      [ "chagriner", 1, 0 ],
+      [ "chahuter", 1, 0 ],
+      [ "chambouler", 1, 0 ],
+      [ "changer", 1, 0 ],
+      [ "chanter", 1, 0 ],
+      [ "chaparder", 1, 0 ],
+      [ "charger", 1, 0 ],
+      [ "charmer", 1, 0 ],
+      [ "chasser", 1, 0 ],
+      [ "châtier", 1, 0 ],
+      [ "chatouiller", 1, 0 ],
+      [ "chauffer", 1, 0 ],
+      [ "chercher", 1, 0 ],
+      [ "chevaucher", 1, 0 ],
+      [ "chiffonner", 1, 0 ],
+      [ "chiffrer", 1, 0 ],
+      [ "choquer", 1, 0 ],
+      [ "chorégraphier", 1, 0 ],
+      [ "chronométrer", 1, 0 ],
+      [ "cibler", 1, 0 ],
+      [ "cimenter", 1, 0 ],
+      [ "cirer", 1, 0 ],
+      [ "cisailler", 1, 0 ],
+      [ "civiliser", 1, 0 ],
+      [ "clarifier", 1, 0 ],
+      [ "classer", 1, 0 ],
+      [ "climatiser", 1, 0 ],
+      [ "cloisonner", 1, 0 ],
+      [ "clôturer", 1, 0 ],
+      [ "clouer", 1, 0 ],
+      [ "clouter", 1, 0 ],
+      [ "coder", 1, 0 ],
+      [ "coiffer", 1, 0 ],
+      [ "coincer", 1, 0 ],
+      [ "coller", 1, 0 ],
+      [ "collecter", 1, 0 ],
+      [ "collectionner", 1, 0 ],
+      [ "colmater", 1, 0 ],
+      [ "coloniser", 1, 0 ],
+      [ "colorer", 1, 0 ],
+      [ "colorier", 1, 0 ],
+      [ "combler", 1, 0 ],
+      [ "commander", 1, 0 ],
+      [ "commémorer", 1, 0 ],
+      [ "commercialiser", 1, 0 ],
+      [ "compacter", 1, 0 ],
+      [ "comparer", 1, 0 ],
+      [ "compartimenter", 1, 0 ],
+      [ "compléter", 1, 0 ],
+      [ "complexifier", 1, 0 ],
+      [ "complimenter", 1, 0 ],
+      [ "compliquer", 1, 0 ],
+      [ "compresser", 1, 0 ],
+      [ "comprimer", 1, 0 ],
+      [ "compter", 1, 0 ],
+      [ "concurrencer", 1, 0 ],
+      [ "condamner", 1, 0 ],
+      [ "condenser", 1, 0 ],
+      [ "configurer", 1, 0 ],
+      [ "confronter", 1, 0 ],
+      [ "congeler", 1, 0 ],
+      [ "congédier", 1, 0 ],
+      [ "congratuler", 1, 0 ],
+      [ "connecter", 1, 0 ],
+      [ "conserver", 1, 0 ],
+      [ "considérer", 1, 0 ],
+      [ "consoler", 1, 0 ],
+      [ "consolider", 1, 0 ],
+      [ "consommer", 1, 0 ],
+      [ "consterner", 1, 0 ],
+      [ "constituer", 1, 0 ],
+      [ "consulter", 1, 0 ],
+      [ "consumer", 1, 0 ],
+      [ "contacter", 1, 0 ],
+      [ "contaminer", 1, 0 ],
+      [ "contempler", 1, 0 ],
+      [ "contester", 1, 0 ],
+      [ "contourner", 1, 0 ],
+      [ "contrarier", 1, 0 ],
+      [ "contrebalancer", 1, 0 ],
+      [ "contrecarrer", 1, 0 ],
+      [ "contrôler", 1, 0 ],
+      [ "convoiter", 1, 0 ],
+      [ "convoquer", 1, 0 ],
+      [ "coordonner", 1, 0 ],
+      [ "copier", 1, 0 ],
+      [ "corriger", 1, 0 ],
+      [ "côtoyer", 1, 0 ],
+      [ "coucher", 1, 0 ],
+      [ "couler", 1, 0 ],
+      [ "couper", 1, 0 ],
+      [ "courber", 1, 0 ],
+      [ "courser", 1, 0 ],
+      [ "courtiser", 1, 0 ],
+      [ "couver", 1, 0 ],
+      [ "créer", 1, 0 ],
+      [ "critiquer", 1, 0 ],
+      [ "croiser", 1, 0 ],
+      [ "crypter", 1, 0 ],
+      [ "cuisiner", 1, 0 ],
+      [ "culpabiliser", 1, 0 ],
+      [ "cultiver", 1, 0 ],
+      [ "damner", 1, 0 ],
+      [ "débanaliser", 1, 0 ],
+      [ "débaptiser", 1, 0 ],
+      [ "débarbouiller", 1, 0 ],
+      [ "débloquer", 1, 0 ],
+      [ "déboiser", 1, 0 ],
+      [ "déboucher", 1, 0 ],
+      [ "déboussoler", 1, 0 ],
+      [ "débrancher", 1, 0 ],
+      [ "débroussailler", 1, 0 ],
+      [ "débusquer", 1, 0 ],
+      [ "décaler", 1, 0 ],
+      [ "décaper", 1, 0 ],
+      [ "décapiter", 1, 0 ],
+      [ "décapsuler", 1, 0 ],
+      [ "décentrer", 1, 0 ],
+      [ "décentraliser", 1, 0 ],
+      [ "déchaîner", 1, 0 ],
+      [ "décharger", 1, 0 ],
+      [ "déchausser", 1, 0 ],
+      [ "déchiffrer", 1, 0 ],
+      [ "déchiqueter", 1, 0 ],
+      [ "déchirer", 1, 0 ],
+      [ "décimer", 1, 0 ],
+      [ "décliner", 1, 0 ],
+      [ "décoder", 1, 0 ],
+      [ "décoiffer", 1, 0 ],
+      [ "décoincer", 1, 0 ],
+      [ "décoller", 1, 0 ],
+      [ "décoloniser", 1, 0 ],
+      [ "décolorer", 1, 0 ],
+      [ "décomposer", 1, 0 ],
+      [ "décompresser", 1, 0 ],
+      [ "décomprimer", 1, 0 ],
+      [ "déconditionner", 1, 0 ],
+      [ "décongeler", 1, 0 ],
+      [ "déconnecter", 1, 0 ],
+      [ "déconsidérer", 1, 0 ],
+      [ "décontaminer", 1, 0 ],
+      [ "décontenancer", 1, 0 ],
+      [ "décontracter", 1, 0 ],
+      [ "décorer", 1, 0 ],
+      [ "découper", 1, 0 ],
+      [ "décourager", 1, 0 ],
+      [ "décrier", 1, 0 ],
+      [ "décrasser", 1, 0 ],
+      [ "décriminaliser", 1, 0 ],
+      [ "décrisper", 1, 0 ],
+      [ "décrocher", 1, 0 ],
+      [ "décrypter", 1, 0 ],
+      [ "déculpabiliser", 1, 0 ],
+      [ "dédaigner", 1, 0 ],
+      [ "dédommager", 1, 0 ],
+      [ "défier", 1, 0 ],
+      [ "défavoriser", 1, 0 ],
+      [ "défenestrer", 1, 0 ],
+      [ "défiscaliser", 1, 0 ],
+      [ "défricher", 1, 0 ],
+      [ "dégeler", 1, 0 ],
+      [ "dégivrer", 1, 0 ],
+      [ "dégonfler", 1, 0 ],
+      [ "dégoûter", 1, 0 ],
+      [ "dégraisser", 1, 0 ],
+      [ "déguiser", 1, 0 ],
+      [ "déguster", 1, 0 ],
+      [ "délaisser", 1, 0 ],
+      [ "délimiter", 1, 0 ],
+      [ "délivrer", 1, 0 ],
+      [ "démagnétiser", 1, 0 ],
+      [ "démasquer", 1, 0 ],
+      [ "dématérialiser", 1, 0 ],
+      [ "démilitariser", 1, 0 ],
+      [ "déminer", 1, 0 ],
+      [ "démocratiser", 1, 0 ],
+      [ "démonter", 1, 0 ],
+      [ "démoraliser", 1, 0 ],
+      [ "démotiver", 1, 0 ],
+      [ "démystifier", 1, 0 ],
+      [ "dénaturer", 1, 0 ],
+      [ "déneiger", 1, 0 ],
+      [ "dénigrer", 1, 0 ],
+      [ "dénucléariser", 1, 0 ],
+      [ "dépanner", 1, 0 ],
+      [ "déparasiter", 1, 0 ],
+      [ "départager", 1, 0 ],
+      [ "dépayser", 1, 0 ],
+      [ "déplacer", 1, 0 ],
+      [ "déplorer", 1, 0 ],
+      [ "dépolariser", 1, 0 ],
+      [ "déposer", 1, 0 ],
+      [ "déprimer", 1, 0 ],
+      [ "déprogrammer", 1, 0 ],
+      [ "dérégler", 1, 0 ],
+      [ "déraciner", 1, 0 ],
+      [ "déranger", 1, 0 ],
+      [ "dératiser", 1, 0 ],
+      [ "déresponsabiliser", 1, 0 ],
+      [ "dérouter", 1, 0 ],
+      [ "désabonner", 1, 0 ],
+      [ "désaccorder", 1, 0 ],
+      [ "désagréger", 1, 0 ],
+      [ "désaligner", 1, 0 ],
+      [ "désamorcer", 1, 0 ],
+      [ "désapprouver", 1, 0 ],
+      [ "désarçonner", 1, 0 ],
+      [ "désarmer", 1, 0 ],
+      [ "désarticuler", 1, 0 ],
+      [ "désavantager", 1, 0 ],
+      [ "désemparer", 1, 0 ],
+      [ "désenchanter", 1, 0 ],
+      [ "désengorger", 1, 0 ],
+      [ "désennuyer", 1, 0 ],
+      [ "désensorceler", 1, 0 ],
+      [ "désenvoûter", 1, 0 ],
+      [ "déséquilibrer", 1, 0 ],
+      [ "déserter", 1, 0 ],
+      [ "déshonorer", 1, 0 ],
+      [ "déshydrater", 1, 0 ],
+      [ "désinfecter", 1, 0 ],
+      [ "désinformer", 1, 0 ],
+      [ "désintégrer", 1, 0 ],
+      [ "désodoriser", 1, 0 ],
+      [ "désordonner", 1, 0 ],
+      [ "désorienter", 1, 0 ],
+      [ "désorganiser", 1, 0 ],
+      [ "dessécher", 1, 0 ],
+      [ "dessiner", 1, 0 ],
+      [ "déstabiliser", 1, 0 ],
+      [ "déstructurer", 1, 0 ],
+      [ "détecter", 1, 0 ],
+      [ "détériorer", 1, 0 ],
+      [ "déterrer", 1, 0 ],
+      [ "détester", 1, 0 ],
+      [ "détourner", 1, 0 ],
+      [ "dévaliser", 1, 0 ],
+      [ "dévaloriser", 1, 0 ],
+      [ "devancer", 1, 0 ],
+      [ "dévaster", 1, 0 ],
+      [ "déverrouiller", 1, 0 ],
+      [ "dévisager", 1, 0 ],
+      [ "dévorer", 1, 0 ],
+      [ "diaboliser", 1, 0 ],
+      [ "digérer", 1, 0 ],
+      [ "dilater", 1, 0 ],
+      [ "diluer", 1, 0 ],
+      [ "diriger", 1, 0 ],
+      [ "discerner", 1, 0 ],
+      [ "disperser", 1, 0 ],
+      [ "disqualifier", 1, 0 ],
+      [ "dissimuler", 1, 0 ],
+      [ "distinguer", 1, 0 ],
+      [ "diviser", 1, 0 ],
+      [ "dominer", 1, 0 ],
+      [ "dorer", 1, 0 ],
+      [ "drainer", 1, 0 ],
+      [ "duper", 1, 0 ],
+      [ "dupliquer", 1, 0 ],
+      [ "dynamiser", 1, 0 ],
+      [ "dynamiter", 1, 0 ],
+      [ "ébouillanter", 1, 0 ],
+      [ "ébranler", 1, 0 ],
+      [ "écarter", 1, 0 ],
+      [ "échanger", 1, 0 ],
+      [ "échauffer", 1, 0 ],
+      [ "éclabousser", 1, 0 ],
+      [ "éclairer", 1, 0 ],
+      [ "éclater", 1, 0 ],
+      [ "éclipser", 1, 0 ],
+      [ "écouter", 1, 0 ],
+      [ "écraser", 1, 0 ],
+      [ "édifier", 1, 0 ],
+      [ "édulcorer", 1, 0 ],
+      [ "éduquer", 1, 0 ],
+      [ "effacer", 1, 0 ],
+      [ "effleurer", 1, 0 ],
+      [ "effrayer", 1, 0 ],
+      [ "égaler", 1, 0 ],
+      [ "égaliser", 1, 0 ],
+      [ "égarer", 1, 0 ],
+      [ "égratigner", 1, 0 ],
+      [ "éjecter", 1, 0 ],
+      [ "électrifier", 1, 0 ],
+      [ "électrocuter", 1, 0 ],
+      [ "éliminer", 1, 0 ],
+      [ "éloigner", 1, 0 ],
+      [ "emballer", 1, 0 ],
+      [ "embarquer", 1, 0 ],
+      [ "embarrasser", 1, 0 ],
+      [ "embêter", 1, 0 ],
+      [ "embobiner", 1, 0 ],
+      [ "embraser", 1, 0 ],
+      [ "embrasser", 1, 0 ],
+      [ "embrouiller", 1, 0 ],
+      [ "embrumer", 1, 0 ],
+      [ "embusquer", 1, 0 ],
+      [ "emmener", 1, 0 ],
+      [ "emmêler", 1, 0 ],
+      [ "empiler", 1, 0 ],
+      [ "employer", 1, 0 ],
+      [ "empoisonner", 1, 0 ],
+      [ "emprisonner", 1, 0 ],
+      [ "encadrer", 1, 0 ],
+      [ "encercler", 1, 0 ],
+      [ "enchaîner", 1, 0 ],
+      [ "enchanter", 1, 0 ],
+      [ "enchevêtrer", 1, 0 ],
+      [ "encoder", 1, 0 ],
+      [ "encombrer", 1, 0 ],
+      [ "encourager", 1, 0 ],
+      [ "endiguer", 1, 0 ],
+      [ "énerver", 1, 0 ],
+      [ "enfermer", 1, 0 ],
+      [ "enflammer", 1, 0 ],
+      [ "enfoncer", 1, 0 ],
+      [ "enfumer", 1, 0 ],
+      [ "engraisser", 1, 0 ],
+      [ "engueuler", 1, 0 ],
+      [ "enguirlander", 1, 0 ],
+      [ "enivrer", 1, 0 ],
+      [ "enjamber", 1, 0 ],
+      [ "enjoliver", 1, 0 ],
+      [ "enlever", 1, 0 ],
+      [ "ennuyer", 1, 0 ],
+      [ "enraciner", 1, 0 ],
+      [ "enrouler", 1, 0 ],
+      [ "ensabler", 1, 0 ],
+      [ "ensorceler", 1, 0 ],
+      [ "entailler", 1, 0 ],
+      [ "entamer", 1, 0 ],
+      [ "enterrer", 1, 0 ],
+      [ "enthousiasmer", 1, 0 ],
+      [ "entourer", 1, 0 ],
+      [ "entraver", 1, 0 ],
+      [ "entrechoquer", 1, 0 ],
+      [ "entreposer", 1, 0 ],
+      [ "envier", 1, 0 ],
+      [ "envelopper", 1, 0 ],
+      [ "envenimer", 1, 0 ],
+      [ "envoûter", 1, 0 ],
+      [ "épier", 1, 0 ],
+      [ "épargner", 1, 0 ],
+      [ "éparpiller", 1, 0 ],
+      [ "épauler", 1, 0 ],
+      [ "épingler", 1, 0 ],
+      [ "éponger", 1, 0 ],
+      [ "épouvanter", 1, 0 ],
+      [ "épuiser", 1, 0 ],
+      [ "équilibrer", 1, 0 ],
+      [ "érafler", 1, 0 ],
+      [ "éreinter", 1, 0 ],
+      [ "escalader", 1, 0 ],
+      [ "espacer", 1, 0 ],
+      [ "espionner", 1, 0 ],
+      [ "esquiver", 1, 0 ],
+      [ "essayer", 1, 0 ],
+      [ "essoufler", 1, 0 ],
+      [ "essuyer", 1, 0 ],
+      [ "étaler", 1, 0 ],
+      [ "étalonner", 1, 0 ],
+      [ "étiqueter", 1, 0 ],
+      [ "étirer", 1, 0 ],
+      [ "étonner", 1, 0 ],
+      [ "étouffer", 1, 0 ],
+      [ "étrangler", 1, 0 ],
+      [ "étudier", 1, 0 ],
+      [ "évacuer", 1, 0 ],
+      [ "évaluer", 1, 0 ],
+      [ "éveiller", 1, 0 ],
+      [ "éviter", 1, 0 ],
+      [ "exécrer", 1, 0 ],
+      [ "examiner", 1, 0 ],
+      [ "excuser", 1, 0 ],
+      [ "exécuter", 1, 0 ],
+      [ "exorciser", 1, 0 ],
+      [ "expérimenter", 1, 0 ],
+      [ "exposer", 1, 0 ],
+      [ "expulser", 1, 0 ],
+      [ "exterminer", 1, 0 ],
+      [ "extirper", 1, 0 ],
+      [ "fabriquer", 1, 0 ],
+      [ "faciliter", 1, 0 ],
+      [ "façonner", 1, 0 ],
+      [ "falsifier", 1, 0 ],
+      [ "fasciner", 1, 0 ],
+      [ "fatiguer", 1, 0 ],
+      [ "favoriser", 1, 0 ],
+      [ "féliciter", 1, 0 ],
+      [ "fermer", 1, 0 ],
+      [ "fêter", 1, 0 ],
+      [ "feuilleter", 1, 0 ],
+      [ "figer", 1, 0 ],
+      [ "ficeler", 1, 0 ],
+      [ "filmer", 1, 0 ],
+      [ "finaliser", 1, 0 ],
+      [ "financer", 1, 0 ],
+      [ "fissurer", 1, 0 ],
+      [ "fixer", 1, 0 ],
+      [ "flatter", 1, 0 ],
+      [ "flinguer", 1, 0 ],
+      [ "fluidifier", 1, 0 ],
+      [ "forcer", 1, 0 ],
+      [ "forger", 1, 0 ],
+      [ "former", 1, 0 ],
+      [ "formater", 1, 0 ],
+      [ "fortifier", 1, 0 ],
+      [ "foudroyer", 1, 0 ],
+      [ "fouiller", 1, 0 ],
+      [ "fracasser", 1, 0 ],
+      [ "fracturer", 1, 0 ],
+      [ "fragiliser", 1, 0 ],
+      [ "fragmenter", 1, 0 ],
+      [ "frapper", 1, 0 ],
+      [ "freiner", 1, 0 ],
+      [ "fréquenter", 1, 0 ],
+      [ "frictionner", 1, 0 ],
+      [ "frigorifier", 1, 0 ],
+      [ "froisser", 1, 0 ],
+      [ "frôler", 1, 0 ],
+      [ "frotter", 1, 0 ],
+      [ "frustrer", 1, 0 ],
+      [ "fumer", 1, 0 ],
+      [ "fusiller", 1, 0 ],
+      [ "fusionner", 1, 0 ],
+      [ "galvaniser", 1, 0 ],
+      [ "garder", 1, 0 ],
+      [ "gaspiller", 1, 0 ],
+      [ "geler", 1, 0 ],
+      [ "gêner", 1, 0 ],
+      [ "générer", 1, 0 ],
+      [ "gifler", 1, 0 ],
+      [ "givrer", 1, 0 ],
+      [ "glacer", 1, 0 ],
+      [ "glorifier", 1, 0 ],
+      [ "gommer", 1, 0 ],
+      [ "gonfler", 1, 0 ],
+      [ "goudronner", 1, 0 ],
+      [ "goûter", 1, 0 ],
+      [ "graduer", 1, 0 ],
+      [ "graisser", 1, 0 ],
+      [ "gratiner", 1, 0 ],
+      [ "gratter", 1, 0 ],
+      [ "griffer", 1, 0 ],
+      [ "grignoter", 1, 0 ],
+      [ "griller", 1, 0 ],
+      [ "grillager", 1, 0 ],
+      [ "grouper", 1, 0 ],
+      [ "guetter", 1, 0 ],
+      [ "guillotiner", 1, 0 ],
+      [ "hachurer", 1, 0 ],
+      [ "halluciner", 1, 0 ],
+      [ "handicaper", 1, 0 ],
+      [ "hanter", 1, 0 ],
+      [ "haranguer", 1, 0 ],
+      [ "harceler", 1, 0 ],
+      [ "harmoniser", 1, 0 ],
+      [ "harponner", 1, 0 ],
+      [ "héberger", 1, 0 ],
+      [ "heurter", 1, 0 ],
+      [ "hisser", 1, 0 ],
+      [ "homogénéiser", 1, 0 ],
+      [ "honorer", 1, 0 ],
+      [ "horrifier", 1, 0 ],
+      [ "horripiler", 1, 0 ],
+      [ "huer", 1, 0 ],
+      [ "huiler", 1, 0 ],
+      [ "humaniser", 1, 0 ],
+      [ "humidifier", 1, 0 ],
+      [ "humilier", 1, 0 ],
+      [ "hydrater", 1, 0 ],
+      [ "hypnotiser", 1, 0 ],
+      [ "idéaliser", 1, 0 ],
+      [ "identifier", 1, 0 ],
+      [ "ignifuger", 1, 0 ],
+      [ "ignorer", 1, 0 ],
+      [ "imaginer", 1, 0 ],
+      [ "imiter", 1, 0 ],
+      [ "immortaliser", 1, 0 ],
+      [ "implorer", 1, 0 ],
+      [ "importuner", 1, 0 ],
+      [ "impressionner", 1, 0 ],
+      [ "inactiver", 1, 0 ],
+      [ "incendier", 1, 0 ],
+      [ "incommoder", 1, 0 ],
+      [ "inculper", 1, 0 ],
+      [ "indemniser", 1, 0 ],
+      [ "indisposer", 1, 0 ],
+      [ "infecter", 1, 0 ],
+      [ "influencer", 1, 0 ],
+      [ "informer", 1, 0 ],
+      [ "ingérer", 1, 0 ],
+      [ "inhaler", 1, 0 ],
+      [ "injurier", 1, 0 ],
+      [ "innocenter", 1, 0 ],
+      [ "inquiéter", 1, 0 ],
+      [ "insonoriser", 1, 0 ],
+      [ "inspecter", 1, 0 ],
+      [ "installer", 1, 0 ],
+      [ "instrumentaliser", 1, 0 ],
+      [ "insulter", 1, 0 ],
+      [ "intercepter", 1, 0 ],
+      [ "intéresser", 1, 0 ],
+      [ "interner", 1, 0 ],
+      [ "interpeller", 1, 0 ],
+      [ "interroger", 1, 0 ],
+      [ "intimider", 1, 0 ],
+      [ "intoxiquer", 1, 0 ],
+      [ "intriguer", 1, 0 ],
+      [ "invectiver", 1, 0 ],
+      [ "inviter", 1, 0 ],
+      [ "invoquer", 1, 0 ],
+      [ "irradier", 1, 0 ],
+      [ "irriter", 1, 0 ],
+      [ "isoler", 1, 0 ],
+      [ "jeter", 1, 0 ],
+      [ "jalouser", 1, 0 ],
+      [ "jauger", 1, 0 ],
+      [ "juger", 1, 0 ],
+      [ "justifier", 1, 0 ],
+      [ "kidnapper", 1, 0 ],
+      [ "lever", 1, 0 ],
+      [ "lier", 1, 0 ],
+      [ "labourer", 1, 0 ],
+      [ "lacérer", 1, 0 ],
+      [ "lâcher", 1, 0 ],
+      [ "laisser", 1, 0 ],
+      [ "laminer", 1, 0 ],
+      [ "lancer", 1, 0 ],
+      [ "lapider", 1, 0 ],
+      [ "laver", 1, 0 ],
+      [ "légaliser", 1, 0 ],
+      [ "légitimer", 1, 0 ],
+      [ "leurrer", 1, 0 ],
+      [ "libérer", 1, 0 ],
+      [ "licencier", 1, 0 ],
+      [ "ligoter", 1, 0 ],
+      [ "liquéfier", 1, 0 ],
+      [ "liquider", 1, 0 ],
+      [ "lisser", 1, 0 ],
+      [ "livrer", 1, 0 ],
+      [ "loger", 1, 0 ],
+      [ "lobotomiser", 1, 0 ],
+      [ "longer", 1, 0 ],
+      [ "lorgner", 1, 0 ],
+      [ "louer", 1, 0 ],
+      [ "lyncher", 1, 0 ],
+      [ "mâcher", 1, 0 ],
+      [ "mâchouiller", 1, 0 ],
+      [ "magnétiser", 1, 0 ],
+      [ "magnifier", 1, 0 ],
+      [ "maîtriser", 1, 0 ],
+      [ "malmener", 1, 0 ],
+      [ "maltraiter", 1, 0 ],
+      [ "manger", 1, 0 ],
+      [ "manipuler", 1, 0 ],
+      [ "manquer", 1, 0 ],
+      [ "maquiller", 1, 0 ],
+      [ "marier", 1, 0 ],
+      [ "marginaliser", 1, 0 ],
+      [ "martyriser", 1, 0 ],
+      [ "masquer", 1, 0 ],
+      [ "massacrer", 1, 0 ],
+      [ "mastiquer", 1, 0 ],
+      [ "matérialiser", 1, 0 ],
+      [ "matraquer", 1, 0 ],
+      [ "maximiser", 1, 0 ],
+      [ "mécaniser", 1, 0 ],
+      [ "mécontenter", 1, 0 ],
+      [ "médiatiser", 1, 0 ],
+      [ "méduser", 1, 0 ],
+      [ "mélanger", 1, 0 ],
+      [ "menacer", 1, 0 ],
+      [ "menotter", 1, 0 ],
+      [ "mépriser", 1, 0 ],
+      [ "mésestimer", 1, 0 ],
+      [ "mesurer", 1, 0 ],
+      [ "métamorphoser", 1, 0 ],
+      [ "meubler", 1, 0 ],
+      [ "militariser", 1, 0 ],
+      [ "mimer", 1, 0 ],
+      [ "miniaturiser", 1, 0 ],
+      [ "minimiser", 1, 0 ],
+      [ "mitrailler", 1, 0 ],
+      [ "mixer", 1, 0 ],
+      [ "modeler", 1, 0 ],
+      [ "moderniser", 1, 0 ],
+      [ "modifier", 1, 0 ],
+      [ "momifier", 1, 0 ],
+      [ "monopoliser", 1, 0 ],
+      [ "montrer", 1, 0 ],
+      [ "moquer", 1, 0 ],
+      [ "moraliser", 1, 0 ],
+      [ "motiver", 1, 0 ],
+      [ "mouiller", 1, 0 ],
+      [ "murer", 1, 0 ],
+      [ "museler", 1, 0 ],
+      [ "mutiler", 1, 0 ],
+      [ "mystifier", 1, 0 ],
+      [ "narguer", 1, 0 ],
+      [ "naturaliser", 1, 0 ],
+      [ "négliger", 1, 0 ],
+      [ "nettoyer", 1, 0 ],
+      [ "neutraliser", 1, 0 ],
+      [ "niveler", 1, 0 ],
+      [ "noyer", 1, 0 ],
+      [ "nommer", 1, 0 ],
+      [ "normaliser", 1, 0 ],
+      [ "notifier", 1, 0 ],
+      [ "nuancer", 1, 0 ],
+      [ "nucléariser", 1, 0 ],
+      [ "numériser", 1, 0 ],
+      [ "numéroter", 1, 0 ],
+      [ "observer", 1, 0 ],
+      [ "occuper", 1, 0 ],
+      [ "offenser", 1, 0 ],
+      [ "offusquer", 1, 0 ],
+      [ "opérer", 1, 0 ],
+      [ "opprimer", 1, 0 ],
+      [ "optimiser", 1, 0 ],
+      [ "organiser", 1, 0 ],
+      [ "orienter", 1, 0 ],
+      [ "ornementer", 1, 0 ],
+      [ "ostraciser", 1, 0 ],
+      [ "oublier", 1, 0 ],
+      [ "outrager", 1, 0 ],
+      [ "ovationner", 1, 0 ],
+      [ "oxyder", 1, 0 ],
+      [ "payer", 1, 0 ],
+      [ "pacifier", 1, 0 ],
+      [ "palper", 1, 0 ],
+      [ "paniquer", 1, 0 ],
+      [ "parer", 1, 0 ],
+      [ "parachuter", 1, 0 ],
+      [ "paralléliser", 1, 0 ],
+      [ "paralyser", 1, 0 ],
+      [ "parasiter", 1, 0 ],
+      [ "parfumer", 1, 0 ],
+      [ "parodier", 1, 0 ],
+      [ "partager", 1, 0 ],
+      [ "passionner", 1, 0 ],
+      [ "pasteuriser", 1, 0 ],
+      [ "peigner", 1, 0 ],
+      [ "peiner", 1, 0 ],
+      [ "peinturlurer", 1, 0 ],
+      [ "pénaliser", 1, 0 ],
+      [ "percer", 1, 0 ],
+      [ "percuter", 1, 0 ],
+      [ "perfectionner", 1, 0 ],
+      [ "perforer", 1, 0 ],
+      [ "perfuser", 1, 0 ],
+      [ "permuter", 1, 0 ],
+      [ "persécuter", 1, 0 ],
+      [ "personnaliser", 1, 0 ],
+      [ "persuader", 1, 0 ],
+      [ "perturber", 1, 0 ],
+      [ "peser", 1, 0 ],
+      [ "pétrifier", 1, 0 ],
+      [ "phagocyter", 1, 0 ],
+      [ "photographier", 1, 0 ],
+      [ "piéger", 1, 0 ],
+      [ "piétiner", 1, 0 ],
+      [ "pigmenter", 1, 0 ],
+      [ "piller", 1, 0 ],
+      [ "pilonner", 1, 0 ],
+      [ "piloter", 1, 0 ],
+      [ "piquer", 1, 0 ],
+      [ "pirater", 1, 0 ],
+      [ "pister", 1, 0 ],
+      [ "plier", 1, 0 ],
+      [ "placer", 1, 0 ],
+      [ "plagier", 1, 0 ],
+      [ "planquer", 1, 0 ],
+      [ "plastifier", 1, 0 ],
+      [ "pleurer", 1, 0 ],
+      [ "plomber", 1, 0 ],
+      [ "plumer", 1, 0 ],
+      [ "poignarder", 1, 0 ],
+      [ "poivrer", 1, 0 ],
+      [ "polariser", 1, 0 ],
+      [ "polluer", 1, 0 ],
+      [ "polymériser", 1, 0 ],
+      [ "pondérer", 1, 0 ],
+      [ "populariser", 1, 0 ],
+      [ "porter", 1, 0 ],
+      [ "poser", 1, 0 ],
+      [ "posséder", 1, 0 ],
+      [ "pourchasser", 1, 0 ],
+      [ "pousser", 1, 0 ],
+      [ "précéder", 1, 0 ],
+      [ "prédestiner", 1, 0 ],
+      [ "prédeterminer", 1, 0 ],
+      [ "préférer", 1, 0 ],
+      [ "prélever", 1, 0 ],
+      [ "préoccuper", 1, 0 ],
+      [ "préparer", 1, 0 ],
+      [ "présélectionner", 1, 0 ],
+      [ "présenter", 1, 0 ],
+      [ "préserver", 1, 0 ],
+      [ "presser", 1, 0 ],
+      [ "pressuriser", 1, 0 ],
+      [ "priver", 1, 0 ],
+      [ "privilégier", 1, 0 ],
+      [ "professionnaliser", 1, 0 ],
+      [ "programmer", 1, 0 ],
+      [ "prolonger", 1, 0 ],
+      [ "promener", 1, 0 ],
+      [ "propager", 1, 0 ],
+      [ "propulser", 1, 0 ],
+      [ "prospecter", 1, 0 ],
+      [ "protéger", 1, 0 ],
+      [ "provoquer", 1, 0 ],
+      [ "psychanalyser", 1, 0 ],
+      [ "pulvériser", 1, 0 ],
+      [ "purifier", 1, 0 ],
+      [ "questionner", 1, 0 ],
+      [ "quitter", 1, 0 ],
+      [ "rayer", 1, 0 ],
+      [ "rabaisser", 1, 0 ],
+      [ "raboter", 1, 0 ],
+      [ "raccompagner", 1, 0 ],
+      [ "raccorder", 1, 0 ],
+      [ "racheter", 1, 0 ],
+      [ "racketter", 1, 0 ],
+      [ "radiographier", 1, 0 ],
+      [ "raffiner", 1, 0 ],
+      [ "rafistoler", 1, 0 ],
+      [ "raisonner", 1, 0 ],
+      [ "rajouter", 1, 0 ],
+      [ "rallier", 1, 0 ],
+      [ "ramener", 1, 0 ],
+      [ "ramasser", 1, 0 ],
+      [ "ranger", 1, 0 ],
+      [ "rançonner", 1, 0 ],
+      [ "ranimer", 1, 0 ],
+      [ "rappeler", 1, 0 ],
+      [ "rapporter", 1, 0 ],
+      [ "rapprocher", 1, 0 ],
+      [ "raser", 1, 0 ],
+      [ "rassembler", 1, 0 ],
+      [ "rassurer", 1, 0 ],
+      [ "ratisser", 1, 0 ],
+      [ "rattraper", 1, 0 ],
+      [ "ravager", 1, 0 ],
+      [ "ravitailler", 1, 0 ],
+      [ "réactiver", 1, 0 ],
+      [ "réactualiser", 1, 0 ],
+      [ "réadapter", 1, 0 ],
+      [ "réajuster", 1, 0 ],
+      [ "réanimer", 1, 0 ],
+      [ "réarranger", 1, 0 ],
+      [ "rebaptiser", 1, 0 ],
+      [ "rebuter", 1, 0 ],
+      [ "receler", 1, 0 ],
+      [ "recaler", 1, 0 ],
+      [ "réceptionner", 1, 0 ],
+      [ "recharger", 1, 0 ],
+      [ "rechercher", 1, 0 ],
+      [ "réclamer", 1, 0 ],
+      [ "recoller", 1, 0 ],
+      [ "recommander", 1, 0 ],
+      [ "réconcilier", 1, 0 ],
+      [ "réconforter", 1, 0 ],
+      [ "reconnecter", 1, 0 ],
+      [ "recourber", 1, 0 ],
+      [ "recréer", 1, 0 ],
+      [ "recruter", 1, 0 ],
+      [ "reculer", 1, 0 ],
+      [ "récupérer", 1, 0 ],
+      [ "recycler", 1, 0 ],
+      [ "rediffuser", 1, 0 ],
+      [ "redouter", 1, 0 ],
+      [ "redresser", 1, 0 ],
+      [ "rééduquer", 1, 0 ],
+      [ "rééquilibrer", 1, 0 ],
+      [ "réexaminer", 1, 0 ],
+      [ "refléter", 1, 0 ],
+      [ "refouler", 1, 0 ],
+      [ "réfrigérer", 1, 0 ],
+      [ "refouler", 1, 0 ],
+      [ "regarder", 1, 0 ],
+      [ "régénérer", 1, 0 ],
+      [ "regonfler", 1, 0 ],
+      [ "regretter", 1, 0 ],
+      [ "regrouper", 1, 0 ],
+      [ "réhydrater", 1, 0 ],
+      [ "réincarcérer", 1, 0 ],
+      [ "réincorporer", 1, 0 ],
+      [ "réinsérer", 1, 0 ],
+      [ "réinviter", 1, 0 ],
+      [ "rejeter", 1, 0 ],
+      [ "relever", 1, 0 ],
+      [ "relâcher", 1, 0 ],
+      [ "relaxer", 1, 0 ],
+      [ "remanier", 1, 0 ],
+      [ "remarquer", 1, 0 ],
+      [ "remballer", 1, 0 ],
+      [ "rembobiner", 1, 0 ],
+      [ "rembourser", 1, 0 ],
+      [ "remercier", 1, 0 ],
+      [ "remmener", 1, 0 ],
+      [ "remodeler", 1, 0 ],
+      [ "remorquer", 1, 0 ],
+      [ "remplacer", 1, 0 ],
+      [ "remporter", 1, 0 ],
+      [ "remuer", 1, 0 ],
+      [ "rencontrer", 1, 0 ],
+      [ "renfermer", 1, 0 ],
+      [ "renforcer", 1, 0 ],
+      [ "renifler", 1, 0 ],
+      [ "renouveler", 1, 0 ],
+      [ "renseigner", 1, 0 ],
+      [ "rentrer", 1, 0 ],
+      [ "renvoyer", 1, 0 ],
+      [ "renverser", 1, 0 ],
+      [ "réorienter", 1, 0 ],
+      [ "repérer", 1, 0 ],
+      [ "réparer", 1, 0 ],
+      [ "répertorier", 1, 0 ],
+      [ "replier", 1, 0 ],
+      [ "reposer", 1, 0 ],
+      [ "repositionner", 1, 0 ],
+      [ "repousser", 1, 0 ],
+      [ "réprimander", 1, 0 ],
+      [ "reprogrammer", 1, 0 ],
+      [ "répugner", 1, 0 ],
+      [ "réquisitionner", 1, 0 ],
+      [ "respecter", 1, 0 ],
+      [ "responsabiliser", 1, 0 ],
+      [ "ressusciter", 1, 0 ],
+      [ "restaurer", 1, 0 ],
+      [ "retarder", 1, 0 ],
+      [ "retirer", 1, 0 ],
+      [ "retourner", 1, 0 ],
+      [ "rétribuer", 1, 0 ],
+      [ "retrouver", 1, 0 ],
+      [ "révérer", 1, 0 ],
+      [ "revaloriser", 1, 0 ],
+      [ "réveiller", 1, 0 ],
+      [ "réverbérer", 1, 0 ],
+      [ "révolter", 1, 0 ],
+      [ "révulser", 1, 0 ],
+      [ "ridiculiser", 1, 0 ],
+      [ "rigidifier", 1, 0 ],
+      [ "rincer", 1, 0 ],
+      [ "robotiser", 1, 0 ],
+      [ "ronger", 1, 0 ],
+      [ "rudoyer", 1, 0 ],
+      [ "ruiner", 1, 0 ],
+      [ "rythmer", 1, 0 ],
+      [ "saboter", 1, 0 ],
+      [ "saccager", 1, 0 ],
+      [ "sacraliser", 1, 0 ],
+      [ "sacrifier", 1, 0 ],
+      [ "saluer", 1, 0 ],
+      [ "sanctifier", 1, 0 ],
+      [ "saouler", 1, 0 ],
+      [ "saturer", 1, 0 ],
+      [ "saucissonner", 1, 0 ],
+      [ "saupoudrer", 1, 0 ],
+      [ "sauvegarder", 1, 0 ],
+      [ "savonner", 1, 0 ],
+      [ "scandaliser", 1, 0 ],
+      [ "scénariser", 1, 0 ],
+      [ "scier", 1, 0 ],
+      [ "scinder", 1, 0 ],
+      [ "scolariser", 1, 0 ],
+      [ "scotcher", 1, 0 ],
+      [ "scruter", 1, 0 ],
+      [ "sculpter", 1, 0 ],
+      [ "secouer", 1, 0 ],
+      [ "sécuriser", 1, 0 ],
+      [ "sélectionner", 1, 0 ],
+      [ "sensibiliser", 1, 0 ],
+      [ "séparer", 1, 0 ],
+      [ "séquestrer", 1, 0 ],
+      [ "serrer", 1, 0 ],
+      [ "sidérer", 1, 0 ],
+      [ "signaler", 1, 0 ],
+      [ "sillonner", 1, 0 ],
+      [ "simplifier", 1, 0 ],
+      [ "singer", 1, 0 ],
+      [ "situer", 1, 0 ],
+      [ "snober", 1, 0 ],
+      [ "soigner", 1, 0 ],
+      [ "solidifier", 1, 0 ],
+      [ "solliciter", 1, 0 ],
+      [ "sonder", 1, 0 ],
+      [ "sonoriser", 1, 0 ],
+      [ "souffler", 1, 0 ],
+      [ "soulever", 1, 0 ],
+      [ "soulager", 1, 0 ],
+      [ "soupçonner", 1, 0 ],
+      [ "sous-alimenter", 1, 0 ],
+      [ "sous-estimer", 1, 0 ],
+      [ "spatialiser", 1, 0 ],
+      [ "spiritualiser", 1, 0 ],
+      [ "spolier", 1, 0 ],
+      [ "sponsoriser", 1, 0 ],
+      [ "stabiliser", 1, 0 ],
+      [ "stéréotyper", 1, 0 ],
+      [ "stigmatiser", 1, 0 ],
+      [ "stimuler", 1, 0 ],
+      [ "stocker", 1, 0 ],
+      [ "stopper", 1, 0 ],
+      [ "stresser", 1, 0 ],
+      [ "stupéfier", 1, 0 ],
+      [ "subdiviser", 1, 0 ],
+      [ "subjuguer", 1, 0 ],
+      [ "submerger", 1, 0 ],
+      [ "subtiliser", 1, 0 ],
+      [ "superposer", 1, 0 ],
+      [ "supporter", 1, 0 ],
+      [ "supprimer", 1, 0 ],
+      [ "suralimenter", 1, 0 ],
+      [ "surcharger", 1, 0 ],
+      [ "surclasser", 1, 0 ],
+      [ "surélever", 1, 0 ],
+      [ "surestimer", 1, 0 ],
+      [ "surexploiter", 1, 0 ],
+      [ "surligner", 1, 0 ],
+      [ "surmonter", 1, 0 ],
+      [ "surpasser", 1, 0 ],
+      [ "surplomber", 1, 0 ],
+      [ "surprotéger", 1, 0 ],
+      [ "surveiller", 1, 0 ],
+      [ "survoler", 1, 0 ],
+      [ "suspecter", 1, 0 ],
+      [ "symétriser", 1, 0 ],
+      [ "synthétiser", 1, 0 ],
+      [ "tabasser", 1, 0 ],
+      [ "tailler", 1, 0 ],
+      [ "taillader", 1, 0 ],
+      [ "talonner", 1, 0 ],
+      [ "tancer", 1, 0 ],
+      [ "taper", 1, 0 ],
+      [ "taquiner", 1, 0 ],
+      [ "tarauder", 1, 0 ],
+      [ "tatouer", 1, 0 ],
+      [ "taxer", 1, 0 ],
+      [ "teinter", 1, 0 ],
+      [ "télédiffuser", 1, 0 ],
+      [ "téléguider", 1, 0 ],
+      [ "tempérer", 1, 0 ],
+      [ "tenter", 1, 0 ],
+      [ "terminer", 1, 0 ],
+      [ "terrasser", 1, 0 ],
+      [ "terrifier", 1, 0 ],
+      [ "terroriser", 1, 0 ],
+      [ "tester", 1, 0 ],
+      [ "tétaniser", 1, 0 ],
+      [ "théoriser", 1, 0 ],
+      [ "tirer", 1, 0 ],
+      [ "titulariser", 1, 0 ],
+      [ "toiletter", 1, 0 ],
+      [ "toiser", 1, 0 ],
+      [ "tolérer", 1, 0 ],
+      [ "torpiller", 1, 0 ],
+      [ "toucher", 1, 0 ],
+      [ "tourmenter", 1, 0 ],
+      [ "torpiller", 1, 0 ],
+      [ "tracasser", 1, 0 ],
+      [ "tracter", 1, 0 ],
+      [ "trancher", 1, 0 ],
+      [ "tranquiliser", 1, 0 ],
+      [ "transfigurer", 1, 0 ],
+      [ "transformer", 1, 0 ],
+      [ "transpercer", 1, 0 ],
+      [ "transporter", 1, 0 ],
+      [ "traquer", 1, 0 ],
+      [ "traumatiser", 1, 0 ],
+      [ "traverser", 1, 0 ],
+      [ "tremper", 1, 0 ],
+      [ "trimbaler", 1, 0 ],
+      [ "tromper", 1, 0 ],
+      [ "trouer", 1, 0 ],
+      [ "troubler", 1, 0 ],
+      [ "trouver", 1, 0 ],
+      [ "trucider", 1, 0 ],
+      [ "tuer", 1, 0 ],
+      [ "tuméfier", 1, 0 ],
+      [ "tutoyer", 1, 0 ],
+      [ "tuyauter", 1, 0 ],
+      [ "tyranniser", 1, 0 ],
+      [ "ulcérer", 1, 0 ],
+      [ "usurper", 1, 0 ],
+      [ "utiliser", 1, 0 ],
+      [ "vacciner", 1, 0 ],
+      [ "valoriser", 1, 0 ],
+      [ "vampiriser", 1, 0 ],
+      [ "vandaliser", 1, 0 ],
+      [ "vanter", 1, 0 ],
+      [ "vénérer", 1, 0 ],
+      [ "venger", 1, 0 ],
+      [ "vérifier", 1, 0 ],
+      [ "verrouiller", 1, 0 ],
+      [ "vexer", 1, 0 ],
+      [ "vilipender", 1, 0 ],
+      [ "virer", 1, 0 ],
+      [ "viser", 1, 0 ],
+      [ "visiter", 1, 0 ],
+      [ "visionner", 1, 0 ],
+      [ "visualiser", 1, 0 ],
+      [ "vitrifier", 1, 0 ],
+      [ "voiler", 1, 0 ],
+      [ "voler", 1, 0 ],
+      [ "vouvoyer", 1, 0 ],
+      [ "zébrer", 1, 0 ]
+   ],
+   "modal": [  // [verb,group,aux,complement,(radical)]
+      [ "être", 0, 0, "sur le point de" ],
+      [ "être", 0, 0, "en train de" ],
+      [ "commencer", 1, 0, "à" ],
+      // [ "se mettre", 3, 1, "à" ],
+      [ "cesser", 1, 0, "de" ],
+      [ "finir", 2, 0, "de" ],
+      [ "aller", 3, 1, "" ],
+      [ "venir", 3, 1, "de" ],
+      [ "devoir", 3, 0, "" ],
+      // [ "savoir", 3, 0, "" ],
+      [ "pouvoir", 3, 0, "" ],
+      [ "vouloir", 3, 0, "" ],
+      // [ "faire", 3, 0, "" ],
+      // [ "se faire", 3, 1, "" ]
+   ]
+ };
+
+exports.adverbTypes = ["aftVerb","aftNegVerb","beforeAdj"];
+exports.adverbs =  {
+   "aftVerb": [
+      "abominablement",
+      "abruptement",
+      "abusivement",
+      "accidentellement",
+      "activement",
+      "actuellement",
+      "admirablement",
+      "adroitement",
+      "affreusement",
+      "agréablement",
+      "ainsi",
+      "aléatoirement",
+      "allègrement",
+      "anormalement",
+      "approximativement",
+      "ardemment",
+      "assez",
+      "aussi",
+      "aussitôt",
+      "automatiquement",
+      "autrement",
+      "beaucoup",
+      "bêtement",
+      "bien",
+      "bravement",
+      "brutalement",
+      "bruyamment",
+      "calmement",
+      "certainement",
+      "complètement",
+      "consciemment",
+      "considérablement",
+      "constamment",
+      "continuellement",
+      "courageusement",
+      "curieusement",
+      "d'abord",
+      "dangereusement",
+      "davantage",
+      "délibérément",
+      "désagréablement",
+      "désespérément",
+      "diaboliquement",
+      "différemment",
+      "difficilement",
+      "discrètement",
+      "divinement",
+      "donc",
+      "doucement",
+      "drôlement",
+      "effroyablement",
+      "également",
+      "encore",
+      "enfin",
+      "énormément",
+      "entièrement",
+      "épouvantablement",
+      "équitablement",
+      "étonnament",
+      "étrangement",
+      "évidemment",
+      "exagérément",
+      "exceptionnellement",
+      "exprès",
+      "facilement",
+      "férocement",
+      "finalement",
+      "follement",
+      "fortement",
+      "franchement",
+      "frénétiquement",
+      "furieusement",
+      "gaiement",
+      "généralement",
+      "gentiment",
+      "grandement",
+      "gratuitement",
+      "grossièrement",
+      "habilement",
+      "hardiment",
+      "hargneusement",
+      "hâtivement",
+      "humblement",
+      "illégalement",
+      "immanquablement",
+      "immédiatement",
+      "impatiemment",
+      "impertubablement",
+      "impitoyablement",
+      "incognito",
+      "inconsciemment",
+      "incontestablement",
+      "incroyablement",
+      "indéniablement",
+      "indirectement",
+      "inéluctablement",
+      "inévitablement",
+      "ingénieusement",
+      "injustement",
+      "innocemment",
+      "inopinément",
+      "insidieusement",
+      "instantanément",
+      "instinctivement",
+      "insuffisamment",
+      "intensément",
+      "inutilement",
+      "involontairement",
+      "joliment",
+      "judicieusement",
+      "justement",
+      "laborieusement",
+      "lamentablement",
+      "largement",
+      "lentement",
+      "librement",
+      "littéralement",
+      "longuement",
+      "lourdement",
+      "magnifiquement",
+      "mal",
+      "maladroitement",
+      "malencontreusement",
+      "malheureusement",
+      "malicieusement",
+      "méchamment",
+      "merveilleusement",
+      "méthodiquement",
+      "méticuleusement",
+      "mieux",
+      "minutieusement",
+      "moins",
+      "moyennement",
+      "naïvement",
+      "naturellement",
+      "néanmoins",
+      "nécessairement",
+      "négligemment",
+      "normalement",
+      "notamment",
+      "notoirement",
+      "nuitamment",
+      "obligatoirement",
+      "obstinément",
+      "occasionnellement",
+      "opportunément",
+      "ostensiblement",
+      "outrageusement",
+      "ouvertement",
+      "par ailleurs",
+      "paradoxalement",
+      "parfaitement",
+      "parfois",
+      "particulièrement",
+      "passablement",
+      "passionnément",
+      "patiemment",
+      "péniblement",
+      "peu",
+      "peu à peu",
+      "peut-être",
+      "pleinement",
+      "poliment",
+      "pompeusement",
+      "posément",
+      "pourtant",
+      "précautionneusement",
+      "précipitamment",
+      "presque",
+      "probablement",
+      "promptement",
+      "proprement",
+      "quelquefois",
+      "rarement",
+      "régulièrement",
+      "remarquablement",
+      "rudement",
+      "sacrément",
+      "sagement",
+      "sciemment",
+      "secrètement",
+      "sérieusement",
+      "silencieusement",
+      "singulièrement",
+      "soigneusement",
+      "soudainement",
+      "souvent",
+      "soigneusement",
+      "spontanément",
+      "stupidement",
+      "subrepticement",
+      "suffisamment",
+      "sûrement",
+      "systématiquement",
+      "tardivement",
+      "tellement",
+      "théatralement",
+      "timidement",
+      "totalement",
+      "toujours",
+      "tout à fait",
+      "tragiquement",
+      "trop",
+      "un peu",
+      "vainement",
+      "vigoureusement",
+      "visiblement",
+      "vite",
+      "volontairement",
+      "vraiment",
+      "vraisemblablement"
+   ],
+   // "aftNegVerb": [   // après (ne + verbe + pas)
+   //    "assez",
+   //    "beaucoup",
+   //    "complètement",
+   //    "du tout",
+   //    "encore",
+   //    "sérieusement",
+   //    "suffisamment",
+   //    "tellement",
+   //    "tout à fait",
+   //    "vraiment"
+   // ],
+   "beforeAdj": [
+      "abominablement",
+      "abusivement",
+      "activement",
+      "actuellement",
+      "admirablement",
+      "affreusement",
+      "agréablement",
+      "anormalement",
+      "assez",
+      "bêtement",
+      "bien",
+      "complètement",
+      "considérablement",
+      "courageusement",
+      "curieusement",
+      "dangereusement",
+      "désagréablement",
+      "désespérément",
+      "diaboliquement",
+      "divinement",
+      "drôlement",
+      "effroyablement",
+      "également",
+      "encore",
+      "entièrement",
+      "épouvantablement",
+      "étonnament",
+      "étrangement",
+      "évidemment",
+      "exagérément",
+      "exceptionnellement",
+      "férocement",
+      "follement",
+      "fortement",
+      "franchement",
+      "généralement",
+      "immanquablement",
+      "impertubablement",
+      "impitoyablement",
+      "incontestablement",
+      "incroyablement",
+      "indéniablement",
+      "inéluctablement",
+      "inévitablement",
+      "injustement",
+      "insuffisamment",
+      "intensément",
+      "inutilement",
+      "judicieusement",
+      "lamentablement",
+      "littéralement",
+      "magnifiquement",
+      "malencontreusement",
+      "malheureusement",
+      "merveilleusement",
+      "moins",
+      "moyennement",
+      "naturellement",
+      "nécessairement",
+      "notoirement",
+      "obligatoirement",
+      "obstinément",
+      "opportunément",
+      "ostensiblement",
+      "outrageusement",
+      "ouvertement",
+      "paradoxalement",
+      "parfaitement",
+      "particulièrement",
+      "passablement",
+      "pourtant",
+      "presque",
+      "probablement",
+      "rarement",
+      "remarquablement",
+      "rudement",
+      "sacrément",
+      "secrètement",
+      "singulièrement",
+      "suffisamment",
+      "tellement",
+      "totalement",
+      "toujours",
+      "tout à fait",
+      "tragiquement",
+      "trop",
+      "visiblement",
+      "vraiment",
+      "vraisemblablement"
+   ],
+   "locution": [  // en début de phrase
+      "à part ça",
+      "à première vue",
+      "à présent",
+      "à priori",
+      "à titre exceptionnel",
+      "à tort ou à raison",
+      "à tous les coups",
+      "à tous moments",
+      "à tout hasard",
+      "à vrai dire",
+      "au contraire",
+      "au demeurant",
+      "au final",
+      "au fur et à mesure",
+      "au même instant",
+      "au préalable",
+      "autant que je sache",
+      "autrement dit",
+      "avant toutes choses",
+      "bien entendu",
+      "bien sûr",
+      "bref",
+      "ce faisant",
+      "ce qui fait que",
+      "ceci dit",
+      "cela dit",
+      "cela dit entre nous",
+      "chemin faisant",
+      "comme d'habitude",
+      "comme il se doit",
+      "comme par enchantement",
+      "contre toute attente",
+      "contre vents et marées",
+      "croyez-le ou non mais",
+      "d'ailleurs",
+      "dans l'absolu",
+      "dans le fond",
+      "dans l'ensemble",
+      "dans les faits",
+      "dans les grandes lignes",
+      "dans un deuxième temps",
+      "dans un sens",
+      "d'autant plus que",
+      "d'autre part",
+      "de ce fait",
+      "de fil en aiguille",
+      "de toute évidence",
+      "de toute manière",
+      "de toutes façons",
+      "du reste",
+      "en attendant",
+      "en clair",
+      "en d'autres termes",
+      "en définitive",
+      "en désespoir de cause",
+      "en effet",
+      "en fin de compte",
+      "en général",
+      "en l'occurence",
+      "en même temps",
+      "en moyenne",
+      "en outre",
+      "en parallèle",
+      "en particulier",
+      "en plus",
+      "en premier lieu",
+      "en principe",
+      "en réalité",
+      "en résumé",
+      "en somme",
+      "en tout cas",
+      "est-ce que",
+      "et",
+      "généralement",
+      "grosso modo",
+      "jour après jour",
+      "jusqu'alors",
+      "la mort dans l'âme",
+      "la plupart du temps",
+      "l'un dans l'autre",
+      "mais",
+      "malgré tout",
+      "mine de rien",
+      "moyennant quoi",
+      "n'empêche que",
+      "ni vu ni connu",
+      "par ailleurs",
+      "par chance",
+      "par contre",
+      "par exemple",
+      "par la force des choses",
+      "par malheur",
+      "peu à peu",
+      "pour commencer",
+      "pour l'heure",
+      "pour mémoire",
+      "qui plus est",
+      "sans ambages",
+      "sans compter que",
+      "si ça se trouve",
+      "soudain",
+      "tant bien que mal",
+      "toujours est-il que",
+      "une chance que"
+   ]
+};
+
+exports.elisionWithH = [
+   "habile",
+   "halucinant",
+   "halucinante",
+   "harmonieux", 
+   "harmonieuse",
+   "herbe",
+   "heureux", "heureuse",
+   "historien",
+   "honnete",
+   "horticulteur",
+   "horloger",
+   "horrible",
+   "huissier",
+   "historienne",
+   "horticultrice",
+   "hotesse",
+   "hippocampe",
+   "hippopotame",
+   "hirondelle",
+   "hibiscus",
+   "hortensia",
+   "humble"
+];
+
+exports.elisionWithHVerb = [
+   "hachur",
+   "hallucin",
+   "harmonis",
+   "heberg",
+   "herit",
+   "hesit",
+   "hibern",
+   "homogeneis",
+   "honor",
+   "horrifi",
+   "horripil",
+   "huil",
+   "humanis",
+   "humidifi",
+   "humili",
+   "hydrat",
+   "hypnotis"
+];
+
+// Make it loadable both in node.js and in a browser
+})(typeof exports == 'undefined' ? window : exports);
diff --git a/pemFioi/shape-paths.js b/pemFioi/shape-paths.js
new file mode 100644
index 000000000..1fc94bc28
--- /dev/null
+++ b/pemFioi/shape-paths.js
@@ -0,0 +1,75 @@
+function getShapePath(shape, x, y, radius, roundedRectangleRadius) {
+    if(!radius) radius = 15;
+    if(!roundedRectangleRadius) roundedRectangleRadius = 6;
+   
+    var shapePaths = {
+        diamond: ["M", x, y-radius,
+            "L", x + radius, y,
+            "L", x, y + radius,
+            "L", x-radius, y,
+            "Z"],
+        hexagon: ["M", x, y-radius,
+            "L", x-radius, y-radius / 2,
+            "L", x-radius, y+radius / 2,
+            "L", x, y+radius,
+            "L", x+radius, y+radius / 2,
+            "L", x+radius, y-radius / 2,
+            "Z"],
+        star: ["M", x, y - radius,
+            "L", x + 0.27 * radius, y -0.3 * radius,
+            "L", x + radius, y -0.3 * radius,
+            "L", x + 0.4 * radius, y + 0.2 * radius,
+            "L", x + 0.6 * radius, y +0.8 * radius,
+            "L", x + 0, y +0.4 * radius,
+            "L", x - 0.6 * radius, y + 0.8 * radius,
+            "L", x - 0.4 * radius, y + 0.2 * radius,
+            "L", x - radius, y -0.3 * radius,
+            "L", x - 0.27 * radius, y -0.3 * radius,
+            "Z"],
+        triangle: ["M", x-radius, y + radius,
+            "L", x + radius, y + radius,
+            "L", x, y - radius,
+            "Z"],
+        rectangle: ["M", x-radius, y-radius,
+            "L", x+radius, y-radius,
+            "L", x+radius, y+radius,
+            "L", x-radius, y+radius,
+            "Z"],
+        reverseTriangle: ["M", x-radius, y-radius,
+            "L", x+radius, y-radius,
+            "L", x, y+radius,
+            "Z"],
+        pentagon: ["M", x, y-0.9*radius,
+            "L", x+radius, y-0.2 * radius,
+            "L", x+0.6 * radius, y+0.9*radius,
+            "L", x-0.6 * radius, y+0.9*radius,
+            "L", x-radius, y-0.2 * radius,
+            "Z"],
+        squareStar: ["M", x, y-radius,
+            "L", x+0.25 * radius, y-0.25 * radius,
+            "L", x+radius, y,
+            "L", x+0.25 * radius, y+0.25 * radius,
+            "L", x+0, y+radius,
+            "L", x-0.25 * radius, y+0.25 * radius,
+            "L", x-radius, y,
+            "L", x-0.25 * radius, y-0.25 * radius,
+            "Z"],
+        roundedRectangle: ["M", x-radius, y-radius + roundedRectangleRadius,
+            "Q", x-radius, y-radius, x-radius + roundedRectangleRadius, y-radius,
+            "L", x+radius -roundedRectangleRadius, y-radius,
+            "Q", x+radius, y-radius, x+radius, y-radius + roundedRectangleRadius,
+            "L", x+radius, y+radius - roundedRectangleRadius,
+            "Q", x+radius, y+radius, x+radius - roundedRectangleRadius, y+radius,
+            "L", x-radius + roundedRectangleRadius, y+radius,
+            "Q", x-radius, y+radius, x-radius, y+radius - roundedRectangleRadius,
+            "Z"]
+    };
+    return shapePaths[shape];
+
+    
+}
+
+function getShape(paper,shape,x,y,radius) {
+    var path = getShapePath(shape,x,y,radius);
+    return paper.path(path);
+};
\ No newline at end of file
diff --git a/pemFioi/shared/blocks_helper.js b/pemFioi/shared/blocks_helper.js
new file mode 100644
index 000000000..d230c4f09
--- /dev/null
+++ b/pemFioi/shared/blocks_helper.js
@@ -0,0 +1,60 @@
+BlocksHelper = {
+
+    convertBlocks: function(context, name, types) {
+        for (var category in context.customBlocks[name]) {
+            for (var iBlock = 0; iBlock < context.customBlocks[name][category].length; iBlock++) {
+                (function() {
+                    var block = context.customBlocks[name][category][iBlock];
+                    if (block.params) {
+                        block.blocklyJson = { inputsInline: true, args0: {} }
+                        var blockArgs = block.blocklyJson.args0;
+                        block.blocklyXml = '';
+                        for (var iParam = 0; iParam < block.params.length; iParam++) {
+                            var paramData = types[block.params[iParam]] || { bType: 'input_value' };
+
+                            blockArgs[iParam] = { type: paramData.bType, name: "PARAM_" + iParam }
+                            if(paramData.bType == 'field_dropdown') {
+                                blockArgs[iParam].options = paramData.options;
+                            }
+
+                            block.blocklyXml +=
+                                '' +
+                                (paramData.vType ? '' : '') +
+                                '' + paramData.defVal + '' +
+                                (paramData.vType ? '' : '') +
+                                '';
+                        }
+                        block.blocklyXml += '';
+                    }
+               })();
+            }
+        }
+    },
+
+
+
+
+    mutateBlockStrings: function(strings, blocksLanguage) {
+        var src = window.stringsLanguage;
+        if(typeof blocksLanguage == 'string') {
+            src = blocksLanguage;
+        } else if(typeof blocksLanguage == 'object' && window.modulesLanguage in blocksLanguage) {
+            src = blocksLanguage[window.modulesLanguage];
+        }
+        var dst = window.stringsLanguage;
+
+        for(var k in strings[dst].description) {
+            strings[dst].description[k] = strings[dst].description[k].replace(
+                new RegExp('%' + k, 'g'),
+                strings[src].code[k]
+            );
+        }
+        if(src == dst) return strings;
+
+        strings[dst].label = strings[src].label;
+        strings[dst].code = strings[src].code;
+        return strings;
+    }
+
+
+}
\ No newline at end of file
diff --git a/pemFioi/shared/files_repository.js b/pemFioi/shared/files_repository.js
new file mode 100644
index 000000000..4f2f8f1e6
--- /dev/null
+++ b/pemFioi/shared/files_repository.js
@@ -0,0 +1,174 @@
+/*
+    options: {
+        strings: {..}, //
+        extensions: '' // string
+    }
+*/
+
+function FilesRepository(options) {
+
+    var defaults = {
+        extensions: '',
+        strings: {
+            caption: 'Audio files list',
+            hint: 'Use file number as param for playRecord function',
+            add: 'Add',
+            incompatible_browser: 'Incompatible browser',
+            confirm_overwrite: 'Overwrite files?',
+            file_not_found: 'File not found: '
+        }
+    }
+    this.options = Object.assign(defaults, options);
+    this.browser_compatible = window.File && window.FileReader && window.FileList && window.Blob;
+    this.files = {}
+    this.popup = null;
+    this.level = null;
+
+
+    this.initLevel = function(params) {
+        this.level = params.level;
+        this.options.strings = Object.assign(defaults.strings, params.strings);
+    }
+
+
+    this.open = function() {
+        if(!this.files[this.level]) {
+            this.files[this.level] = {};
+        }
+        this.renderPopup();
+        this.renderFiles();
+    }
+
+
+    this.close = function() {
+        this.popup.remove();
+        this.popup = null;
+    }
+
+
+    this.onFileInputChange = function(e) {
+        if(!e.target.files.length) {
+            return;
+        }
+
+        var existing_files = [];
+        for(var i=0; i 0 && !confirm(this.options.strings.confirm_overwrite + '\n' + existing_files.join('\n'))) {
+            e.target.value = '';
+            return;
+        }
+        for(var i=0; i' + n + ') ' +
+                '' + filename + '' +
+                ''
+            n++;
+        }
+        var el = $('#files_repository_list').empty().append(html);
+        el.find('button.close').click(this.onRemoveFileClick.bind(this));
+    }
+
+
+    this.onRemoveFileClick = function(e) {
+        var filename = $(e.target).data('filename');
+        delete this.files[this.level][filename];
+        this.renderFiles();
+    }
+
+
+    this.onCopyFileNameClick = function(e) {
+        var text = $(e.target).data('filename');
+        if(navigator.clipboard) {
+            navigator.clipboard.writeText(text)
+            return;
+        }
+        var el = document.createElement('textarea');
+        el.value = text;
+        document.body.appendChild(el);
+        el.focus();
+        el.select();
+        try {
+            document.execCommand('copy');
+        } catch (e) {
+            console.error('document.execCommand(\'copy\') error', e);
+        }
+        document.body.removeChild(el);
+    }
+
+
+    this.renderPopup = function() {
+        var inner_html;
+        if(this.browser_compatible) {
+            inner_html =
+                '
' + this.options.strings.hint + '
' +
+                '
' +
+                '
' +
+                    '' +
+                '
'
+        } else {
+            inner_html =
+                '
' + this.options.strings.incompatible_browser + '
';
+        }
+        this.popup = $(
+            '
' +
+                '
' +
+                    '' +
+                    '
' + this.options.strings.caption + '
' +
+                    inner_html +
+                '
' +
+            '
'
+        );
+        this.popup.find('button.close').click(this.close.bind(this));
+        this.popup.find('input[type=file]').change(this.onFileInputChange.bind(this));
+        $(document.body).append(this.popup);
+        this.popup.show();
+    }
+
+
+    this.getFile = function(filename) {
+        if(this.files[this.level]) {
+            if(parseInt(filename, 10) == filename) {
+                // filename is file number
+                var n = 1;
+                for(var k in this.files[this.level]) {
+                    if(!this.files[this.level].hasOwnProperty(k)) {
+                        continue;
+                    }
+                    if(n == filename) {
+                        return this.files[this.level][k];
+                    }
+                    n++;
+                }
+            } else if(filename in this.files[this.level]) {
+                // filename is string
+                return this.files[this.level][filename];
+            }
+        }
+        throw new Error(this.options.strings.file_not_found + filename);
+    }
+
+
+    this.getFileNames = function() {
+        return Object.keys(this.files[this.level]);
+    }
+
+
+}
\ No newline at end of file
diff --git a/pemFioi/shared/logger.js b/pemFioi/shared/logger.js
new file mode 100644
index 000000000..c1f249ed5
--- /dev/null
+++ b/pemFioi/shared/logger.js
@@ -0,0 +1,67 @@
+function Logger(options) {
+
+    var defaults = {
+        size: 10,
+        collapsed: true,
+        display: false,
+        styles: {
+            container: 'position: relative; font-size: 75%;',
+            expander: 'position: absolute; right: 0; bottom: 0; padding: 2px; font-weight: bold; border: 1px solid #000; border-radius: 3px; cursor: pointer; display: none;'
+        }
+    }
+    options = Object.assign(defaults, options);
+
+    var container = $('
');
+    if(options.display) {
+        $(options.parent).append(container);
+    }
+    var expander = $('
^
');
+    container.append(expander);
+
+
+    var collapsed = options.collapsed;
+
+    function refreshVisibility() {
+        var els = container.find('pre');
+        els.each(function(i, pre) {
+            $(pre).toggle(collapsed ? i == els.length - 1 : true);
+        })
+    }
+
+    function truncate() {
+        var els = container.find('pre');
+        while(els.length > options.size) {
+            var pre = els[0];
+            pre.remove();
+            els = els.splice(els.length - 1, 1);
+        }
+    }
+
+    expander.on('click', function() {
+        collapsed = !collapsed;
+        refreshVisibility();
+    });
+
+
+    this.clear = function() {
+        container.find('pre').remove();
+        expander.hide();
+    }
+
+    this.put = function(message) {
+        if(typeof message == 'number' || typeof message == 'string') {
+            var html = message;
+        } else {
+            var html = JSON.stringify(message);
+        }
+        container.append('
' + html + '
');
+        expander.toggle(container.find('pre').length > 1);
+        truncate();
+        refreshVisibility();
+    }
+
+    this.destroy = function() {
+        container.remove();
+        delete container;
+    }
+}
\ No newline at end of file
diff --git a/pemFioi/showdownConvert.js b/pemFioi/showdownConvert.js
index 32b4dd9a3..c642b92c4 100644
--- a/pemFioi/showdownConvert.js
+++ b/pemFioi/showdownConvert.js
@@ -10,14 +10,15 @@ Utilisation :
 */
 
 var showdownConvert = function (showdown) {
-    var showdownConverter = new showdown.Converter({headerLevelStart: 3});
+    var showdownConverter = new showdown.Converter({headerLevelStart: 3, backslashEscapesHTMLTags: true});
     $( function () {
         $(".markdown").each(function(idx, elem) {
             var newDiv = $('
');
             newDiv.html(showdownConverter.makeHtml($(this).html()) + '
');
             newDiv.addClass("markdown-translated");
             newDiv.insertAfter($(this));
-            $(this).hide();
+            // remove to reduce mathjax work
+            $(this).remove();
         })
     });
 }
diff --git a/pemFioi/simulation-2.0.js b/pemFioi/simulation-2.0.js
index 6984593be..9c45a45e8 100644
--- a/pemFioi/simulation-2.0.js
+++ b/pemFioi/simulation-2.0.js
@@ -1,4 +1,5 @@
 function Simulation(id, delayFactory) {
+   this.id = id;
    this.stepIndex = 0;
    this.steps = [];
    this.autoPlaying = false;
diff --git a/pemFioi/skill.css b/pemFioi/skill.css
new file mode 100644
index 000000000..c789a5b75
--- /dev/null
+++ b/pemFioi/skill.css
@@ -0,0 +1,6 @@
+body {
+  margin-top:20px;
+  width: 764px;
+  margin-right: auto;
+  margin-left: auto;
+}
diff --git a/pemFioi/skillConfig-1.0.js b/pemFioi/skillConfig-1.0.js
new file mode 100644
index 000000000..4e6f7f79e
--- /dev/null
+++ b/pemFioi/skillConfig-1.0.js
@@ -0,0 +1,28 @@
+// Configure default language
+if(!window.stringsLanguage) {
+    window.stringsLanguage = 'fr';
+}
+
+requirejs.config({
+  "paths": {
+    "jquery": modulesPath+"/ext/jquery/2.1/jquery.min",
+    "platform-pr": modulesPath+"/integrationAPI.01/official/platform-pr",
+    "installation": modulesPath+"/integrationAPI.01/installationAPI.01/pemFioi/installation",
+    "miniPlatform": modulesPath+"/integrationAPI.01/official/miniPlatform",
+    "jschannel": modulesPath+"/ext/jschannel/jschannel",
+    "pem-api": taskPlatformPath+"/pem-api",
+    "fioi-skill-tools": modulesPath+"/pemFioi/fioi-skill-tools"
+  },
+  "shim": {
+    "jquery": {"exports": "$"},
+    "platform-pr": {"deps": ["jquery", "jschannel"]},
+    "miniPlatform": {"deps": ["platform-pr"]},
+    "installation": {"deps": ["platform-pr"]},
+    "fioi-skill-tools": {"deps": ["jquery"]}
+  }
+});
+require([
+  'jquery',
+  'jschannel', 'platform-pr', 'miniPlatform',
+  "fioi-skill-tools"
+]);
diff --git a/pemFioi/static-presentation.01.css b/pemFioi/static-presentation.01.css
new file mode 100644
index 000000000..7d65384ab
--- /dev/null
+++ b/pemFioi/static-presentation.01.css
@@ -0,0 +1,223 @@
+body.static-task {
+   width: 90%;
+   max-width: 1200px;
+   font-size: 16px;
+   margin-left: auto;
+   margin-right: auto;
+}
+body.static-task h2 {
+   color: #af2765;
+   padding-bottom: 30px;
+   font-weight: bold;
+}
+body.static-task h3 {
+   font-weight: bold;
+   font-style: italic;
+   margin-left: 10px;
+}
+body.static-task h4 {
+   color: #af2765;
+   font-weight: bold;
+}
+body.static-task p {
+   font-size: 16px;
+}
+body.static-task ol {
+   list-style: none;
+}
+body.static-task li {
+   font-size: 16px;
+   margin: 10px;
+}
+div.return-button {
+   text-align: center;
+}
+.bouton, div.return-button button {
+   background-color: #af2765;
+   height: 50px;
+   padding-left: 5px;
+   border: 3px solid #af2765;
+   border-radius: 10px;
+   box-shadow: 0px 5px 5px black;
+   text-align: center;
+   color: white;
+   display: inline-block;
+
+}
+.bouton:hover, div.return-button button:hover {
+   background-color: #aeaeae;
+   border: 3px solid #aeaeae;
+}
+.bouton p {
+   line-height: 45px;
+   vertical-align: middle;
+}
+.b_type1 {
+   width: 300px;
+   margin: 20px;
+   margin-bottom: 30px;
+}
+.b_type2 {
+   width: 150px;
+   margin: 10px;
+}
+.b_type2 p {
+   font-size: 1.5em;
+   text-align: center;
+}
+.paragraphe {
+   box-shadow: 0px 20px 15px #aeaeae;
+   max-width: 1200px;
+   margin-right: auto;
+   margin-left: auto;
+   margin-top: 20px;
+   margin-bottom: 40px;
+   padding: 20px;
+}
+.visuel  {
+   border: 1px solid #af2765;
+   margin: 20px auto;
+}
+.capture {
+   border: 1px solid #af2765;
+   max-width: 100%;
+   display: inline-block;
+   margin: 0 1%;
+}
+.instructions {
+   display: inline-block;
+   width: 30%;
+   min-width: 300px;
+   margin-top: 10px;
+}
+body.static-task table {
+   margin-top: 10px;
+   margin-bottom: 10px;
+}
+td.component-img {
+   text-align: center;
+   font-size: 16px;
+   padding: 10px;
+}
+.component td {
+   font-size: 16px;
+   padding: 10px;
+}
+.controls td {
+   padding: 5px;
+   text-align: left;
+}
+td.control-img {
+   text-align: center;
+}
+.objectif {
+   background-color: #eeefd1;
+   font-size: 18px;
+   font-weight: bold;
+   margin-top: 20px;
+   margin-bottom: 10px;
+   margin-left: 20px;
+}
+.pedagogie {
+   background-color: #f6cbde;
+   padding: 10px;
+   margin-top: 10px;
+   margin-bottom: 10px;
+}
+.programme_SNT {
+   background-color: #dbe9f9;
+}
+.programme_SNT img {
+   width: 30px;
+   float: left;
+   margin-right: 5px;
+}
+#notions th {
+   white-space: nowrap;
+   text-align: center;
+   width: 4%;
+   min-width: 40px;
+}
+#notions th span {
+   writing-mode: vertical-rl;
+   display: inline-block;
+}
+.debat_objectif {
+   margin-bottom: 30px;
+}
+.ressources li {
+   margin-bottom: 15px;   
+}
+.enonce {
+   color: #4a90e2;
+   padding-left: 10px;
+   font-size: 22px;
+}
+.puce_question {
+   background-color: #000000; 
+   border-radius: 50%; 
+   color: #ffffff; 
+   font-size: 20px; 
+   font-weight: bold; 
+   padding: 1px 6px;
+}
+.stars img {
+   width: 15px;
+}
+.check {
+   text-align: center;
+}
+.table_component {
+   width: 100%;
+   margin-bottom : 30px;
+}
+.table_component td, .table_component th {
+   border: 1px solid #aeaeae;
+   padding: 4px;
+}
+.table_component th {
+   text-align: center;
+}
+.table_component thead {
+   color: #af2765;
+}
+.ressource {
+   margin: 30px;
+}
+.titre_ressource {
+   font-size : 25px;
+   font-weight: bold;
+   vertical-align: top;
+}
+.cartouche {
+   width: 30%;
+   padding-right: 10px;
+   padding-bottom: 10px;
+}
+.groupe_blocs {
+   background-color: #eaeaea;
+   padding: 10px;
+   margin-top: 10px;
+   margin-bottom: 20px;
+}
+.contenant_bloc {
+   position: relative;
+   display: inline-block;
+}
+.description {
+   display: none;
+   background-color: #ffffff;
+   border: 1px solid #af2765;
+   padding: 4px;
+   width: 200px;
+}
+.img_bloc img {
+   max-width: 200px;
+}
+.img_bloc:hover+.description {
+   display: block;
+   position: absolute;
+   z-index: 1;
+   top: 50px;
+   left: 10px;
+}
diff --git a/pemFioi/static-task.js b/pemFioi/static-task.js
index b5d79bacf..3a3271950 100644
--- a/pemFioi/static-task.js
+++ b/pemFioi/static-task.js
@@ -4,12 +4,18 @@
  *
  * Task can overwrite these definitions.
  *
+ * Behavior can be configured through window.staticTaskOptions, an object which
+ * can contain :
+ * - autoValidate: validate after X ms, default is 5000 ms if autoValidate is
+ * true but not a number
+ * - addReturnButton: add a return button at the bottom of the page, set to a
+ * string to customize the button text
  */
 
+
 var task = {};
 
 task.showViews = function(views, success, error) {
-   console.error('showViews');
    success();
 };
 
@@ -31,7 +37,13 @@ task.updateToken = function(token, success, error) {
 };
 
 task.getHeight = function(success, error) {
-   success(parseInt($("body").outerHeight(true)));
+    // Note : if the html/body is taking all available height, making an
+    // infinite loop with the platform of height increase, try changing your
+    // doctype to 
+    var d = document;
+    var h = Math.max(d.body.offsetHeight, d.documentElement.offsetHeight);
+    success(h);
+    //success(parseInt($("body").outerHeight(true)));
 };
 
 task.unload = function(success, error) {
@@ -43,7 +55,6 @@ task.getState = function(success, error) {
 };
 
 task.getMetaData = function(success, error) {
-   console.error('getMetadata');
    if (typeof json !== 'undefined') {
       success(json);
    } else {
@@ -59,8 +70,10 @@ task.reloadState = function(state, success, error) {
    success();
 };
 
+window.staticTaskAnswer = '';
+
 task.getAnswer = function(success, error) {
-   success('');
+   success(window.staticTaskAnswer);
 };
 
 task.reloadAnswerObject = function(answerObj) {}
@@ -69,16 +82,98 @@ task.getDefaultAnswerObject = function() {}
 
 
 task.load = function(views, success, error) {
-  console.error('load');
    success();
 };
 
-task.gradeAnswer = function(answer, answerToken, success, error) {success(0, '');}
+task.gradeAnswer = function(answer, answerToken, success, error) {
+   if(!window.staticTaskOptions || !window.staticTaskOptions.autoValidate) {
+      success(0, '');
+      return;
+   }
+
+   // Auto-validate
+   try {
+      platform.getTaskParams(null, null, function(taskParams) {
+         try {
+            success(taskParams.maxScore ? taskParams.maxScore : 40, "");
+         } catch(e) {
+            success(40, "");
+         }
+      }, function(){});
+   } catch(e) {
+       success(40, "");
+   }
+}
 
 var grader = {
    gradeTask: task.gradeAnswer
 };
 
-if (platform) {
-  platform.initWithTask(task);
+function staticTaskPreprocess() {
+   $('body').addClass('static-task');
+   if($('#task').length == 0) {
+      $('body').attr('id', 'task');
+   }
+};
+
+if(!window.preprocessingFunctions) {
+   window.preprocessingFunctions = [];
+}
+window.preprocessingFunctions.push(staticTaskPreprocess);
+
+window.taskGetResourcesPost = function(res, callback) {
+    res.task[0].content = $('body').html();
+    callback(res);
+}
+
+window.platformScrollTo = function(target) {
+    var offset = 0;
+    if(typeof target == 'number') {
+        offset = target;
+    } else {
+        if(!target.offset) {
+            target = $(target);
+        }
+        var offset = target.offset().top;
+    }
+    platform.updateDisplay({scrollTop: offset});
+}
+
+if(window.$) {
+   $(function() {
+      if(window.platform) {
+         platform.initWithTask(task);
+      }
+
+      staticTaskPreprocess();
+
+      // Copy of displayHelper.useFullWidth
+      try {
+         $('#question-iframe', window.parent.document).css('width', '100%');
+      } catch(e) {
+      }
+      $('body').css('width', '');
+
+      var sto = window.staticTaskOptions || {};
+      if(sto.autoValidate) {
+         setTimeout(function() {
+            window.staticTaskAnswer = "page_read";
+            try {
+                platform.validate("done");
+            } catch(e) {}
+         }, typeof sto.autoValidate == 'number' ? sto.autoValidate : 5000);
+      }
+      if(sto.addReturnButton && !$('div.return-button').length) {
+         var btnHtml = '
';
+         $(btnHtml).appendTo('body');
+      }
+   });
+} else if(window.platform) {
+   platform.initWithTask(task);
+} else {
+   setTimeout(function() {
+      window.platform.initWithTask(task);
+   }, 100);
 }
diff --git a/pemFioi/taskStyles-0.1.css b/pemFioi/taskStyles-0.1.css
index 0e06ca2c1..393d5bd6e 100644
--- a/pemFioi/taskStyles-0.1.css
+++ b/pemFioi/taskStyles-0.1.css
@@ -31,7 +31,97 @@ input[type="button"] {
    line-height: 1.2;
    font-size: 16px;
 }
+.btn,
+input[type=button] {
+   display: inline-block;
+   padding: 6px 12px;
+   margin-bottom: 0;
+   font-size: 14px;
+   font-weight: 400;
+   line-height: 1.42857143;
+   text-align: center;
+   white-space: nowrap;
+   vertical-align: middle;
+   -ms-touch-action: manipulation;
+   touch-action: manipulation;
+   cursor: pointer;
+   -webkit-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+   background-image: none;
+   border: 1px solid transparent;
+   border-radius: 4px;
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-group {
+   position: relative;
+   display: inline-block;
+   vertical-align: middle;
+}
+.btn-group-vertical>.btn,
+.btn-group>.btn {
+   position: relative;
+   float: left;
+}
+.btn-group .btn+.btn,
+.btn-group .btn+.btn-group,
+.btn-group .btn-group+.btn,
+.btn-group .btn-group+.btn-group {
+   margin-left: -1px;
+}
+.btn-group>.btn:first-child {
+   margin-left: 0;
+}
+.btn-group>.btn:first-child:not(:last-child) {
+   border-top-right-radius: 0;
+   border-bottom-right-radius: 0;
+}
+.btn-group>.btn:last-child:not(:first-child) {
+   border-top-left-radius: 0;
+   border-bottom-left-radius: 0;
+}
+.btn-group>.btn:not(:first-child):not(:last-child) {
+   border-radius: 0;
+}
+.btn-group>.btn.active,
+.btn-group>.btn:active,
+.btn-group>.btn:focus,
+.btn-group>.btn:hover {
+   z-index: 2;
+}
+.btn.btn-xs {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+}
 
+.btn-primary {
+   color: #fff;
+   background-color: #337ab7;
+   border-color: #2e6da4;
+}
+.btn-primary:hover {
+   color: #fff;
+   background-color: #286090;
+   border-color: #204d74;
+}
+.btn-default {
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-default:hover {
+   color: #333;
+   background-color: #e6e6e6;
+   border-color: #adadad;
+}
+.btn-icon {
+   font-family: 'Courier New', Inconsolata, 'Roboto Mono', 'PT Mono', 'Ubuntu', monospace;
+}
 .selectable,
 input,
 textarea {
@@ -50,14 +140,27 @@ textarea {
    text-align: center;
 }
 
-.warningHeader { 
-   margin: 10px 0px 10px 0px; 
-   padding: 10px 10px 10px 10px; 
-   background: #FFEEEE; 
+.warningHeader {
+   margin: 10px 0px 10px 0px;
+   padding: 10px 10px 10px 10px;
+   background: #FFEEEE;
    /*font-weight: bold;*/
-   border: 2px solid black; 
+   border: 2px solid black;
    border-radius: 6px;
  }
+
+#miniPlatformHeader {
+   width:100%;
+   border-bottom:1px solid #B47238;
+   overflow:hidden;
+}
+#miniPlatformHeader > table {
+   width:770px;
+   margin: auto;
+}
+#miniPlatformHeader .platform {
+    font-size: 32px;
+}
 #task h1,
 .question h1,
 #solution {
@@ -74,6 +177,9 @@ textarea {
 #taskContent {
    text-align: justify;
 }
+.pythonIntro code {
+   cursor: pointer;
+}
 
 #success,
 #error {
@@ -120,7 +226,7 @@ textarea {
    display: block;
    padding: 8px;
    color: #000;
-   text-decoration: none; 
+   text-decoration: none;
    font-size: 1.1em;
 }
 #tabsMenu .li.lockedLevel a {
@@ -189,6 +295,7 @@ h1 .stars {
 #popupMessage img.beaver {
    position: absolute;
    width: 90px;
+   left: 0px;
 }
 #popupMessage img.messageArrow {
    position: absolute;
@@ -204,6 +311,14 @@ h1 .stars {
    border-radius: 8px;
    text-align: justify;
 }
+#popupMessage.noAvatar img.beaver, #popupMessage.noAvatar img.messageArrow {
+   display: none;
+}
+
+#popupMessage.noAvatar .message {
+   margin-left: 0px;
+   max-width: 615px;
+}
 #popupMessage p {
    margin: .5em 0 0;
 }
@@ -234,14 +349,17 @@ h1 .stars {
 #displayHelper_cancel {
    display: inline-block;
 }
-#displayHelper_validate > [value="Valider"],
-#displayHelper_cancel > [value="Recommencer"] {
-   margin: 0 10px;
+#displayHelper_validate > input,
+#displayHelper_cancel > input {
+   margin: 0 20px;
    width: 9em;
 }
 #displayHelper_saved {
    margin: .6em;
 }
+#displayHelper_graderMessage {
+   margin: 16px 0px;
+}
 #choose-view {
    margin-bottom: 1em;
    text-align: center;
diff --git a/pemFioi/taskStyles-0.1_M.css b/pemFioi/taskStyles-0.1_M.css
new file mode 100644
index 000000000..b4a3a06ac
--- /dev/null
+++ b/pemFioi/taskStyles-0.1_M.css
@@ -0,0 +1,458 @@
+* {
+   -moz-user-select: -moz-none;
+   -webkit-user-select: none;
+   -o-user-select: none;
+   user-select: none;
+   -khtml-user-select: none;
+}
+
+.touch {
+   -ms-touch-action: none;
+}
+
+body {
+   font-family: Arial, sans-serif;
+   font-size: 16px;
+   margin: 0 auto;
+}
+body > * {
+   margin: 0 auto;
+}
+
+a {
+   color: #4D87CE;
+   font-weight: bold;
+   text-decoration: none;
+}
+
+button,
+input[type="button"] {
+   line-height: 1.2;
+   font-size: 16px;
+}
+.btn,
+input[type=button] {
+   display: inline-block;
+   padding: 6px 12px;
+   margin-bottom: 0;
+   font-size: 14px;
+   font-weight: 400;
+   line-height: 1.42857143;
+   text-align: center;
+   white-space: nowrap;
+   vertical-align: middle;
+   -ms-touch-action: manipulation;
+   touch-action: manipulation;
+   cursor: pointer;
+   -webkit-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+   background-image: none;
+   border: 1px solid transparent;
+   border-radius: 4px;
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-group {
+   position: relative;
+   display: inline-block;
+   vertical-align: middle;
+}
+.btn-group-vertical>.btn,
+.btn-group>.btn {
+   position: relative;
+   float: left;
+}
+.btn-group .btn+.btn,
+.btn-group .btn+.btn-group,
+.btn-group .btn-group+.btn,
+.btn-group .btn-group+.btn-group {
+   margin-left: -1px;
+}
+.btn-group>.btn:first-child {
+   margin-left: 0;
+}
+.btn-group>.btn:first-child:not(:last-child) {
+   border-top-right-radius: 0;
+   border-bottom-right-radius: 0;
+}
+.btn-group>.btn:last-child:not(:first-child) {
+   border-top-left-radius: 0;
+   border-bottom-left-radius: 0;
+}
+.btn-group>.btn:not(:first-child):not(:last-child) {
+   border-radius: 0;
+}
+.btn-group>.btn.active,
+.btn-group>.btn:active,
+.btn-group>.btn:focus,
+.btn-group>.btn:hover {
+   z-index: 2;
+}
+.btn.btn-xs {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+}
+
+.btn-primary {
+   color: #fff;
+   background-color: #337ab7;
+   border-color: #2e6da4;
+}
+.btn-primary:hover {
+   color: #fff;
+   background-color: #286090;
+   border-color: #204d74;
+}
+.btn-default {
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-default:hover {
+   color: #333;
+   background-color: #e6e6e6;
+   border-color: #adadad;
+}
+.btn-icon {
+   font-family: 'Courier New', Inconsolata, 'Roboto Mono', 'PT Mono', 'Ubuntu', monospace;
+}
+.selectable,
+input,
+textarea {
+   -moz-user-select: text;
+   -webkit-user-select: auto !important;
+   -o-user-select: text;
+   -khtml-user-select: text;
+   user-select: text;
+}
+
+.borders, .borders td {
+	border: 1px solid black;
+}
+
+.contentCentered {
+   text-align: center;
+}
+
+.warningHeader { 
+   margin: 10px 0px 10px 0px; 
+   padding: 10px 10px 10px 10px; 
+   background: #FFEEEE; 
+   /*font-weight: bold;*/
+   border: 2px solid black; 
+   border-radius: 6px;
+ }
+#task h1,
+.question h1,
+#solution {
+   display: none;
+   margin-bottom: 0.4em;
+   margin-top: 0.4em;
+}
+#taskIntro {
+   border: 1px solid #8d9daa;
+   margin: 10px 0;
+   padding: 0 10px;
+   font-weight: bold;
+}
+#taskContent {
+   text-align: justify;
+}
+.pythonIntro code {
+   cursor: pointer;
+}
+
+#success,
+#error {
+   font-weight: bold;
+}
+#success {
+   color: blue;
+}
+#error {
+   color: red;
+}
+
+#tabsContainer {
+   position: relative;
+   border-bottom: 2px solid #8d9daa;
+}
+#tabsMenu {
+   text-align: center;
+}
+#tabsMenu .li {
+   display: inline-block;
+   width: 165px;
+   margin: 0 20px;
+   background: #88BB88;
+   border: 2px solid #8d9daa;
+   border-bottom: 0;
+   border-radius: 6px 6px 0 0;
+   text-align: center;
+}
+#tabsMenu .li.lockedLevel {
+   background: #404040;
+}
+#tabsMenu .li.current {
+   margin-bottom: -2px;
+   padding-bottom: 2px;
+   background: white;
+}
+#tabsMenu .li.current.lockedLevel {
+   padding-bottom: 1px;
+   border-bottom: 1px solid #c0c0c0;
+   background: #606060;
+}
+#tabsMenu .li a {
+   display: block;
+   padding: 8px;
+   color: #000;
+   text-decoration: none; 
+   font-size: 1.1em;
+}
+#tabsMenu .li.lockedLevel a {
+   color: #ddd;
+}
+#tabsMenu .li a:focus {
+   outline: none;
+}
+#tabsMenu .li:not(.current) a:active {
+   background: #c4d3de;
+}
+#tabsMenu .li.lockedLevel a:active {
+   background: #6c7787;
+}
+
+h1 span {
+   display: inline-block;
+   width: .8em;
+   height: .8em;
+}
+h1 .stars {
+   vertical-align: baseline;
+}
+.stars {
+   vertical-align: middle;
+}
+
+#tabsContainer {
+   position: relative;
+}
+.bestScore {
+   position: absolute;
+   right: 0;
+   top: .3em;
+   font-size: 1.2em;
+}
+#bestScore {
+   font-weight: bold;
+}
+
+#popupMessage {
+   display: none;
+}
+#popupMessage .container {
+   position: relative;
+   margin: .5em 0;
+   padding: 8px;
+}
+#popupMessage.floatingMessage {
+   position: absolute;
+   z-index: 100;
+   top: 0;
+   left: 0;
+   height: 100%;
+   width: 100%;
+   background-color: gray;
+   background: rgba(0, 0, 0, .6);
+}
+#popupMessage.floatingMessage .container {
+   min-height: 100px;
+   max-width: 600px;
+   margin: 360px auto;
+   border: 2px solid black;
+   background: white;
+}
+#popupMessage img.beaver {
+   position: absolute;
+   width: 90px;
+   left: 0px;
+}
+#popupMessage img.messageArrow {
+   position: absolute;
+   z-index: 1;
+   left: 100px;
+   top: 16px;
+}
+#popupMessage .message {
+   margin-left: 115px;
+   padding: 8px;
+   max-width: 500px;
+   border: 2px solid black;
+   border-radius: 8px;
+   text-align: justify;
+}
+#popupMessage.noAvatar img.beaver, #popupMessage.noAvatar img.messageArrow {
+   display: none;
+}
+#popupMessage.noAvatar .message {
+   margin-left: 0px;
+   border: none;
+}
+#popupMessage p {
+   margin: .5em 0 0;
+}
+#popupMessage p:first-child {
+   margin-top: 0;
+}
+#popupMessage input {
+   margin-top: 1em;
+   margin-left: 200px;
+}
+#popupMessage button {
+   margin-top: 1em;
+   margin-left: 200px;
+   padding: 5px 18px 5px 18px;
+   margin-bottom: 0.5em;
+}
+
+.easy,
+.medium,
+.hard {
+   display: none;
+}
+
+#displayHelperAnswering {
+   margin-top: 15px;
+}
+#displayHelper_validate,
+#displayHelper_cancel {
+   display: inline-block;
+}
+#displayHelper_validate > input,
+#displayHelper_cancel > input {
+   margin: 0 20px;
+   width: 9em;
+}
+#displayHelper_saved {
+   margin: .6em;
+}
+#displayHelper_graderMessage {
+   margin: 16px 0px;
+}
+#choose-view {
+   margin-bottom: 1em;
+   text-align: center;
+}
+#choose-view .choose-view-button {
+   margin: 0 10px;
+}
+
+
+#task {
+	width: 770px;
+	margin: 0 auto;
+}
+#task.largeScreen {
+	width: 1200px;
+}
+#taskContent:after {
+    content: " ";
+    display: table;
+    clear: both;
+}
+#zone_1, #zone_2,
+.zone_1, .zone_2 {
+	margin: 0 auto;
+}
+#zone_2,
+.zone_2 {
+	width: 770px;
+}
+.largeScreen #zone_1,
+.largeScreen #zone_2
+{
+	vertical-align: top;
+	box-sizing: content-box;
+	float: left;
+}
+.largeScreen #zone_1 {
+	width: 430px;
+}
+.consigne {
+	padding: 10px;
+}
+.
+#displayHelperAnswering {
+	padding: 10px;
+}
+
+.exemple
+{
+	margin: auto;
+	margin-top: 10px;
+	text-align: center;
+	border: 1px solid black;
+	border-radius: 1px;
+	width: 290px;
+}
+
+.grille, .boutons_sujet
+{
+	display: inline-block;
+	vertical-align: middle;
+	margin: auto;
+}
+
+.boutons_sujet
+{
+	margin-top: 20px; 
+}
+
+
+.objectif
+{
+	display: inline-block;
+	vertical-align: top;
+	margin: auto;
+	margin-top: 20px;
+}
+
+
+.container_inverse
+{
+	display: inline-block;
+	width: 100%;
+}
+
+/* css présent à l'origine dans tous les sujets et déplacé ci-dessous */
+
+#anim_container
+{
+	text-align: center;
+}
+
+#anim_container table {
+	margin: auto;
+}
+
+#anim {
+	display: inline-block;
+	margin-top: 20px;
+}
+
+#feedback {
+	height: 1em;
+	margin-top: 0.5em;
+	margin-bottom: 0.1em;
+	text-align: center;
+	font-weight: bold;
+	color: red; 
+}
+
+#showSolutionButton {margin-top: 24px;}
diff --git a/pemFioi/taskStyles-0.2_M.css b/pemFioi/taskStyles-0.2_M.css
new file mode 100644
index 000000000..758682376
--- /dev/null
+++ b/pemFioi/taskStyles-0.2_M.css
@@ -0,0 +1,472 @@
+* {
+   -moz-user-select: -moz-none;
+   -webkit-user-select: none;
+   -o-user-select: none;
+   user-select: none;
+   -khtml-user-select: none;
+}
+
+.touch {
+   -ms-touch-action: none;
+}
+
+body {
+   font-family: Arial, sans-serif;
+   font-size: 16px;
+   margin: 0 auto;
+}
+body > * {
+   margin: 0 auto;
+}
+
+a {
+   color: #4D87CE;
+   font-weight: bold;
+   text-decoration: none;
+}
+
+button,
+input[type="button"] {
+   line-height: 1.2;
+   font-size: 16px;
+}
+.btn,
+input[type=button] {
+   display: inline-block;
+   padding: 6px 12px;
+   margin-bottom: 0;
+   font-size: 14px;
+   font-weight: 400;
+   line-height: 1.42857143;
+   text-align: center;
+   white-space: nowrap;
+   vertical-align: middle;
+   -ms-touch-action: manipulation;
+   touch-action: manipulation;
+   cursor: pointer;
+   -webkit-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+   background-image: none;
+   border: 1px solid transparent;
+   border-radius: 4px;
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-group {
+   position: relative;
+   display: inline-block;
+   vertical-align: middle;
+}
+.btn-group-vertical>.btn,
+.btn-group>.btn {
+   position: relative;
+   float: left;
+}
+.btn-group .btn+.btn,
+.btn-group .btn+.btn-group,
+.btn-group .btn-group+.btn,
+.btn-group .btn-group+.btn-group {
+   margin-left: -1px;
+}
+.btn-group>.btn:first-child {
+   margin-left: 0;
+}
+.btn-group>.btn:first-child:not(:last-child) {
+   border-top-right-radius: 0;
+   border-bottom-right-radius: 0;
+}
+.btn-group>.btn:last-child:not(:first-child) {
+   border-top-left-radius: 0;
+   border-bottom-left-radius: 0;
+}
+.btn-group>.btn:not(:first-child):not(:last-child) {
+   border-radius: 0;
+}
+.btn-group>.btn.active,
+.btn-group>.btn:active,
+.btn-group>.btn:focus,
+.btn-group>.btn:hover {
+   z-index: 2;
+}
+.btn.btn-xs {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+}
+
+.btn-primary {
+   color: #fff;
+   background-color: #337ab7;
+   border-color: #2e6da4;
+}
+.btn-primary:hover {
+   color: #fff;
+   background-color: #286090;
+   border-color: #204d74;
+}
+.btn-default {
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-default:hover {
+   color: #333;
+   background-color: #e6e6e6;
+   border-color: #adadad;
+}
+.btn-icon {
+   font-family: 'Courier New', Inconsolata, 'Roboto Mono', 'PT Mono', 'Ubuntu', monospace;
+}
+.selectable,
+input,
+textarea {
+   -moz-user-select: text;
+   -webkit-user-select: auto !important;
+   -o-user-select: text;
+   -khtml-user-select: text;
+   user-select: text;
+}
+
+.borders, .borders td {
+	border: 1px solid black;
+}
+
+.contentCentered {
+   text-align: center;
+}
+
+.warningHeader { 
+   margin: 10px 0px 10px 0px; 
+   padding: 10px 10px 10px 10px; 
+   background: #FFEEEE; 
+   /*font-weight: bold;*/
+   border: 2px solid black; 
+   border-radius: 6px;
+ }
+#task h1,
+.question h1,
+#solution {
+   display: none;
+   margin-bottom: 0.4em;
+   margin-top: 0.4em;
+}
+#taskIntro {
+   border: 1px solid #8d9daa;
+   margin: 10px 0;
+   padding: 0 10px;
+   font-weight: bold;
+}
+#taskContent {
+   text-align: justify;
+}
+.pythonIntro code {
+   cursor: pointer;
+}
+
+#success,
+#error {
+   font-weight: bold;
+}
+#success {
+   color: blue;
+}
+#error {
+   color: red;
+   clear: both;
+}
+
+#tabsContainer {
+   position: relative;
+   border-bottom: 2px solid #8d9daa;
+}
+#tabsMenu {
+   text-align: center;
+}
+#tabsMenu .li {
+   display: inline-block;
+   width: 165px;
+   margin: 0 20px;
+   background: #88BB88;
+   border: 2px solid #8d9daa;
+   border-bottom: 0;
+   border-radius: 6px 6px 0 0;
+   text-align: center;
+}
+#tabsMenu .li.lockedLevel {
+   background: #404040;
+}
+#tabsMenu .li.current {
+   margin-bottom: -2px;
+   padding-bottom: 2px;
+   background: white;
+}
+#tabsMenu .li.current.lockedLevel {
+   padding-bottom: 1px;
+   border-bottom: 1px solid #c0c0c0;
+   background: #606060;
+}
+#tabsMenu .li a {
+   display: block;
+   padding: 8px;
+   color: #000;
+   text-decoration: none; 
+   font-size: 1.1em;
+}
+#tabsMenu .li.lockedLevel a {
+   color: #ddd;
+}
+#tabsMenu .li a:focus {
+   outline: none;
+}
+#tabsMenu .li:not(.current) a:active {
+   background: #c4d3de;
+}
+#tabsMenu .li.lockedLevel a:active {
+   background: #6c7787;
+}
+
+h1 span {
+   display: inline-block;
+   width: .8em;
+   height: .8em;
+}
+h1 .stars {
+   vertical-align: baseline;
+}
+.stars {
+   vertical-align: middle;
+}
+
+#tabsContainer {
+   position: relative;
+}
+.bestScore {
+   position: absolute;
+   right: 0;
+   top: .3em;
+   font-size: 1.2em;
+}
+#bestScore {
+   font-weight: bold;
+}
+
+#popupMessage {
+   display: none;
+}
+#popupMessage .container {
+   position: relative;
+   margin: .5em 0;
+   padding: 8px;
+}
+#popupMessage.floatingMessage {
+   position: absolute;
+   z-index: 100;
+   top: 0;
+   left: 0;
+   height: 100%;
+   width: 100%;
+   background-color: gray;
+   background: rgba(0, 0, 0, .6);
+}
+#popupMessage.floatingMessage .container {
+   min-height: 100px;
+   max-width: 600px;
+   margin: 360px auto;
+   border: 2px solid black;
+   background: white;
+}
+#popupMessage img.beaver {
+   position: absolute;
+   width: 90px;
+   left: 0px;
+}
+#popupMessage img.messageArrow {
+   position: absolute;
+   z-index: 1;
+   left: 100px;
+   top: 16px;
+}
+#popupMessage .message {
+   margin-left: 115px;
+   padding: 8px;
+   max-width: 500px;
+   border: 2px solid black;
+   border-radius: 8px;
+   text-align: justify;
+}
+#popupMessage.noAvatar img.beaver, #popupMessage.noAvatar img.messageArrow {
+   display: none;
+}
+#popupMessage.noAvatar .message {
+   margin-left: 0px;
+   border: none;
+}
+#popupMessage p {
+   margin: .5em 0 0;
+}
+#popupMessage p:first-child {
+   margin-top: 0;
+}
+#popupMessage input {
+   margin-top: 1em;
+   margin-left: 200px;
+}
+#popupMessage button {
+   margin-top: 1em;
+   margin-left: 200px;
+   padding: 5px 18px 5px 18px;
+   margin-bottom: 0.5em;
+}
+
+.easy,
+.medium,
+.hard {
+   display: none;
+}
+
+#displayHelperAnswering {
+   margin-top: 15px;
+}
+#displayHelper_validate,
+#displayHelper_cancel {
+   display: inline-block;
+}
+#displayHelper_validate > input,
+#displayHelper_cancel > input {
+   margin: 0 20px;
+   width: 9em;
+}
+#displayHelper_saved {
+   margin: .6em;
+}
+#displayHelper_graderMessage {
+   margin: 16px 0px;
+}
+#choose-view {
+   margin-bottom: 1em;
+   text-align: center;
+}
+#choose-view .choose-view-button {
+   margin: 0 10px;
+}
+
+/** TASK **/
+
+#task {
+	min-width: 770px;
+   width: 100%;
+	margin: 0 auto;
+}
+#task.largeScreen {
+	/*width: 1200px;*/
+}
+#taskContent:after {
+    content: " ";
+    display: table;
+    clear: both;
+}
+
+#zone_1, #zone_2,
+.zone_1, .zone_2 {
+	margin: 0 auto;
+}
+#zone_1,
+.zone_1 {
+	width: 770px;
+}
+#zone_2,
+.zone_2 {
+   /*min-width: 770px;*/
+}
+.largeScreen #zone_1,
+.largeScreen #zone_2
+{
+	vertical-align: top;
+	box-sizing: content-box;
+	float: left;
+}
+.largeScreen #zone_1 {
+	/*width: 430px;*/
+   width: 36%;
+   /*min-width: 430px;*/
+}
+.largeScreen #zone_2 {
+   /*min-width: 770px;*/
+   /*width: ;*/
+}
+.consigne {
+	padding: 10px;
+}
+.
+#displayHelperAnswering {
+	padding: 10px;
+}
+
+.exemple
+{
+	margin: auto;
+	margin-top: 10px;
+	text-align: center;
+	border: 1px solid black;
+	border-radius: 1px;
+	width: 290px;
+}
+
+.grille, .boutons_sujet
+{
+	display: inline-block;
+	vertical-align: middle;
+	margin: auto;
+}
+
+.boutons_sujet
+{
+	margin-top: 20px; 
+}
+
+
+.objectif
+{
+	display: inline-block;
+	vertical-align: top;
+	margin: auto;
+	margin-top: 20px;
+}
+
+
+.container_inverse
+{
+	display: inline-block;
+	width: 100%;
+}
+
+/* css présent à l'origine dans tous les sujets et déplacé ci-dessous */
+
+#anim_container
+{
+	text-align: center;
+}
+
+#anim_container table {
+	margin: auto;
+}
+
+#anim {
+	display: inline-block;
+	margin-top: 20px;
+}
+
+#feedback {
+	height: 1em;
+	margin-top: 0.5em;
+	margin-bottom: 0.1em;
+	text-align: center;
+	font-weight: bold;
+	color: red; 
+}
+
+#showSolutionButton {margin-top: 24px;}
diff --git a/pemFioi/taskStyles-0.3.css b/pemFioi/taskStyles-0.3.css
new file mode 100644
index 000000000..8f0ec5642
--- /dev/null
+++ b/pemFioi/taskStyles-0.3.css
@@ -0,0 +1,532 @@
+* {
+   -moz-user-select: -moz-none;
+   -webkit-user-select: none;
+   -o-user-select: none;
+   user-select: none;
+   -khtml-user-select: none;
+}
+
+.touch {
+   -ms-touch-action: none;
+}
+
+body {
+   font-family: Arial, sans-serif;
+   font-size: 16px;
+   margin: 0 auto;
+}
+body > * {
+   margin: 0 auto;
+}
+
+a {
+   color: #4D87CE;
+   font-weight: bold;
+   text-decoration: none;
+}
+
+button,
+input[type="button"] {
+   line-height: 1.2;
+   font-size: 16px;
+}
+.btn,
+input[type=button] {
+   display: inline-block;
+   padding: 6px 12px;
+   margin-bottom: 0;
+   font-size: 14px;
+   font-weight: 400;
+   line-height: 1.42857143;
+   text-align: center;
+   white-space: nowrap;
+   vertical-align: middle;
+   -ms-touch-action: manipulation;
+   touch-action: manipulation;
+   cursor: pointer;
+   -webkit-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+   background-image: none;
+   border: 1px solid transparent;
+   border-radius: 4px;
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-group {
+   position: relative;
+   display: inline-block;
+   vertical-align: middle;
+}
+.btn-group-vertical>.btn,
+.btn-group>.btn {
+   position: relative;
+   float: left;
+}
+.btn-group .btn+.btn,
+.btn-group .btn+.btn-group,
+.btn-group .btn-group+.btn,
+.btn-group .btn-group+.btn-group {
+   margin-left: -1px;
+}
+.btn-group>.btn:first-child {
+   margin-left: 0;
+}
+.btn-group>.btn:first-child:not(:last-child) {
+   border-top-right-radius: 0;
+   border-bottom-right-radius: 0;
+}
+.btn-group>.btn:last-child:not(:first-child) {
+   border-top-left-radius: 0;
+   border-bottom-left-radius: 0;
+}
+.btn-group>.btn:not(:first-child):not(:last-child) {
+   border-radius: 0;
+}
+.btn-group>.btn.active,
+.btn-group>.btn:active,
+.btn-group>.btn:focus,
+.btn-group>.btn:hover {
+   z-index: 2;
+}
+.btn.btn-xs {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+}
+
+.btn-primary {
+   color: #fff;
+   background-color: #337ab7;
+   border-color: #2e6da4;
+}
+.btn-primary:hover {
+   color: #fff;
+   background-color: #286090;
+   border-color: #204d74;
+}
+.btn-default {
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-default:hover {
+   color: #333;
+   background-color: #e6e6e6;
+   border-color: #adadad;
+}
+.btn-icon {
+   font-family: 'Courier New', Inconsolata, 'Roboto Mono', 'PT Mono', 'Ubuntu', monospace;
+}
+.selectable,
+input,
+textarea {
+   -moz-user-select: text;
+   -webkit-user-select: auto !important;
+   -o-user-select: text;
+   -khtml-user-select: text;
+   user-select: text;
+}
+
+.borders, .borders td {
+	border: 1px solid black;
+}
+
+.contentCentered {
+   text-align: center;
+}
+
+.warningHeader { 
+   margin: 10px 0px 10px 0px; 
+   padding: 10px 10px 10px 10px; 
+   background: #FFEEEE; 
+   /*font-weight: bold;*/
+   border: 2px solid black; 
+   border-radius: 6px;
+ }
+#task h1,
+.question h1,
+#solution {
+   display: none;
+   margin-bottom: 0.4em;
+   margin-top: 0.4em;
+}
+#taskIntro {
+   border: 1px solid #8d9daa;
+   margin: 10px 0;
+   padding: 0 10px;
+   font-weight: bold;
+}
+#taskContent {
+   text-align: justify;
+}
+.pythonIntro code {
+   cursor: pointer;
+}
+
+/**************************************************************/
+/* CONSIGNE */
+
+.consigne {
+   padding: 10px;
+}
+[alkindi] .consigne {
+   background: white;
+   font-size: 14px;
+   color: #30242B;
+   padding: 0;
+   margin: 20px;
+}
+[alkindi] .consigne h3 {
+   display: block;
+   background: white;
+   font-size: 14px;
+   /*color: white;*/
+   color: #88BB88;
+   /*border-radius: 5px 5px 0 0;*/
+   border-bottom: 1px solid #88BB88;
+   text-align: center;
+   margin: 0;
+   padding: 13px;
+}
+[alkindi] .consigne h3 i {
+   /*display: block;*/
+   /*float: left;*/
+   /*width: 20px;*/
+   margin-right: 20px;
+}
+[alkindi] .consigne #text {
+   padding: 20px;
+   padding-bottom: 10px;
+   padding-top: 0px;
+}
+
+/**************************************************************/
+
+#success,
+#error {
+   font-weight: bold;
+}
+#success {
+   color: blue;
+}
+#error {
+   color: red;
+   clear: both;
+   min-height: 1em;
+   margin-top: 10px;
+   text-align: center;
+}
+
+#tabsContainer {
+   position: relative;
+   border-bottom: 2px solid #8d9daa;
+}
+#tabsMenu {
+   text-align: center;
+}
+#tabsMenu .li {
+   display: inline-block;
+   width: 165px;
+   margin: 0 20px;
+   background: #88BB88;
+   border: 2px solid #8d9daa;
+   border-bottom: 0;
+   border-radius: 6px 6px 0 0;
+   text-align: center;
+}
+#tabsMenu .li.lockedLevel {
+   background: #404040;
+}
+#tabsMenu .li.current {
+   margin-bottom: -2px;
+   padding-bottom: 2px;
+   background: white;
+}
+#tabsMenu .li.current.lockedLevel {
+   padding-bottom: 1px;
+   border-bottom: 1px solid #c0c0c0;
+   background: #606060;
+}
+#tabsMenu .li a {
+   display: block;
+   padding: 8px;
+   color: #000;
+   text-decoration: none; 
+   font-size: 1.1em;
+}
+#tabsMenu .li.lockedLevel a {
+   color: #ddd;
+}
+#tabsMenu .li a:focus {
+   outline: none;
+}
+#tabsMenu .li:not(.current) a:active {
+   background: #c4d3de;
+}
+#tabsMenu .li.lockedLevel a:active {
+   background: #6c7787;
+}
+
+h1 span {
+   display: inline-block;
+   width: .8em;
+   height: .8em;
+}
+h1 .stars {
+   vertical-align: baseline;
+}
+.stars {
+   vertical-align: middle;
+}
+
+#tabsContainer {
+   position: relative;
+}
+.bestScore {
+   position: absolute;
+   right: 0;
+   top: .3em;
+   font-size: 1.2em;
+}
+#bestScore {
+   font-weight: bold;
+}
+
+#popupMessage {
+   display: none;
+}
+#popupMessage .container {
+   position: relative;
+   margin: .5em 0;
+   padding: 8px;
+}
+#popupMessage.floatingMessage {
+   position: absolute;
+   z-index: 100;
+   top: 0;
+   left: 0;
+   height: 100%;
+   width: 100%;
+   background-color: gray;
+   background: rgba(0, 0, 0, .6);
+}
+#popupMessage.floatingMessage .container {
+   min-height: 100px;
+   max-width: 600px;
+   margin: 360px auto;
+   border: 2px solid black;
+   background: white;
+}
+#popupMessage img.beaver {
+   position: absolute;
+   width: 90px;
+   left: 0px;
+}
+#popupMessage img.messageArrow {
+   position: absolute;
+   z-index: 1;
+   left: 100px;
+   top: 16px;
+}
+#popupMessage .message {
+   margin-left: 115px;
+   padding: 8px;
+   max-width: 500px;
+   border: 2px solid black;
+   border-radius: 8px;
+   text-align: justify;
+}
+#popupMessage.noAvatar img.beaver, #popupMessage.noAvatar img.messageArrow {
+   display: none;
+}
+#popupMessage.noAvatar .message {
+   margin-left: 0px;
+   border: none;
+}
+#popupMessage p {
+   margin: .5em 0 0;
+}
+#popupMessage p:first-child {
+   margin-top: 0;
+}
+#popupMessage input {
+   margin-top: 1em;
+   margin-left: 200px;
+}
+#popupMessage button {
+   margin-top: 1em;
+   margin-left: 200px;
+   padding: 5px 18px 5px 18px;
+   margin-bottom: 0.5em;
+}
+
+.easy,
+.medium,
+.hard {
+   display: none;
+}
+
+#displayHelperAnswering {
+   margin-top: 15px;
+}
+#displayHelper_validate,
+#displayHelper_cancel {
+   display: inline-block;
+}
+#displayHelper_validate > input,
+#displayHelper_cancel > input {
+   margin: 0 20px;
+   width: 9em;
+}
+#displayHelper_saved {
+   margin: .6em;
+}
+#displayHelper_graderMessage {
+   margin: 16px 0px;
+   color: red;
+   font-weight: bold;
+}
+
+[alkindi] #displayHelper_validate > input, #displayHelper_cancel > input {
+   border: none;
+   background-color: #88BB88;
+   color: white;
+   font-weight: bold;
+   font-size: 12px;
+   padding: 8px;
+   min-width: 180px;
+   margin: 0px 8px;
+}
+[alkindi] #displayHelper_cancel > input {
+   background-color: #30242B;
+}
+
+#choose-view {
+   margin-bottom: 1em;
+   text-align: center;
+}
+#choose-view .choose-view-button {
+   margin: 0 10px;
+}
+
+/** TASK **/
+
+#task {
+	min-width: 770px;
+   width: 100%;
+	margin: 0 auto;
+}
+#task.largeScreen {
+	/*width: 1200px;*/
+}
+#taskContent:after {
+    content: " ";
+    display: table;
+    clear: both;
+}
+
+#zone_1, #zone_2,
+.zone_1, .zone_2 {
+	margin: 0 auto;
+}
+#zone_1,
+.zone_1 {
+	width: 770px;
+}
+#zone_2,
+.zone_2 {
+   width: 770px;
+   padding-top: 1em;
+}
+.largeScreen #zone_1,
+.largeScreen #zone_2
+{
+	vertical-align: top;
+	box-sizing: content-box;
+	float: left;
+}
+.largeScreen #zone_1 {
+	/*width: 430px;*/
+   width: 36%;
+   /*min-width: 430px;*/
+}
+.largeScreen #zone_2 {
+   /*min-width: 770px;*/
+   /*width: ;*/
+}
+.consigne {
+	padding: 10px;
+}
+.
+#displayHelperAnswering {
+	padding: 10px;
+}
+
+.exemple
+{
+	margin: auto;
+	margin-top: 10px;
+	text-align: center;
+	border: 1px solid black;
+	border-radius: 1px;
+	width: 290px;
+}
+
+.grille, .boutons_sujet
+{
+	display: inline-block;
+	vertical-align: middle;
+	margin: auto;
+}
+
+.boutons_sujet
+{
+	margin-top: 20px; 
+}
+
+
+.objectif
+{
+	display: inline-block;
+	vertical-align: top;
+	margin: auto;
+	margin-top: 20px;
+}
+
+
+.container_inverse
+{
+	display: inline-block;
+	width: 100%;
+}
+
+/* css présent à l'origine dans tous les sujets et déplacé ci-dessous */
+
+#anim_container
+{
+	text-align: center;
+}
+
+#anim_container table {
+	margin: auto;
+}
+
+#anim {
+	display: inline-block;
+	margin-top: 20px;
+}
+
+#feedback {
+	height: 1em;
+	margin-top: 0.5em;
+	margin-bottom: 0.1em;
+	text-align: center;
+	font-weight: bold;
+	color: red; 
+}
+
+#showSolutionButton {margin-top: 24px;}
diff --git a/pemFioi/taskStyles-0.3_M.css b/pemFioi/taskStyles-0.3_M.css
new file mode 100644
index 000000000..fd00e1a84
--- /dev/null
+++ b/pemFioi/taskStyles-0.3_M.css
@@ -0,0 +1,1151 @@
+* {
+   -moz-user-select: -moz-none;
+   -webkit-user-select: none;
+   -o-user-select: none;
+   user-select: none;
+   -khtml-user-select: none;
+}
+
+.touch {
+   -ms-touch-action: none;
+}
+
+body {
+   font-family: Arial, sans-serif;
+   font-size: 16px;
+   margin: 0 auto;
+   position: relative;
+}
+body > * {
+   margin: 0 auto;
+}
+body * {
+   box-sizing: border-box;
+}
+
+a {
+   color: #4D87CE;
+   text-decoration: none;
+}
+
+button,
+input[type="button"] {
+   line-height: 1.2;
+   font-size: 16px;
+}
+.btn,
+input[type=button] {
+   display: inline-block;
+   padding: 6px 12px;
+   margin-bottom: 0;
+   font-size: 14px;
+   font-weight: 400;
+   line-height: 1.42857143;
+   text-align: center;
+   white-space: nowrap;
+   vertical-align: middle;
+   -ms-touch-action: manipulation;
+   touch-action: manipulation;
+   cursor: pointer;
+   -webkit-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+   background-image: none;
+   border: 1px solid transparent;
+   border-radius: 4px;
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-group {
+   position: relative;
+   display: inline-block;
+   vertical-align: middle;
+}
+.btn-group-vertical>.btn,
+.btn-group>.btn {
+   position: relative;
+   float: left;
+}
+.btn-group .btn+.btn,
+.btn-group .btn+.btn-group,
+.btn-group .btn-group+.btn,
+.btn-group .btn-group+.btn-group {
+   margin-left: -1px;
+}
+.btn-group>.btn:first-child {
+   margin-left: 0;
+}
+.btn-group>.btn:first-child:not(:last-child) {
+   border-top-right-radius: 0;
+   border-bottom-right-radius: 0;
+}
+.btn-group>.btn:last-child:not(:first-child) {
+   border-top-left-radius: 0;
+   border-bottom-left-radius: 0;
+}
+.btn-group>.btn:not(:first-child):not(:last-child) {
+   border-radius: 0;
+}
+.btn-group>.btn.active,
+.btn-group>.btn:active,
+.btn-group>.btn:focus,
+.btn-group>.btn:hover {
+   z-index: 2;
+}
+.btn.btn-xs {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+}
+
+.btn-primary {
+   color: #fff;
+   background-color: #337ab7;
+   border-color: #2e6da4;
+}
+.btn-primary:hover {
+   color: #fff;
+   background-color: #286090;
+   border-color: #204d74;
+}
+.btn-default {
+   color: #333;
+   background-color: #fff;
+   border-color: #ccc;
+}
+.btn-default:hover {
+   color: #333;
+   background-color: #e6e6e6;
+   border-color: #adadad;
+}
+.btn-icon {
+   font-family: 'Courier New', Inconsolata, 'Roboto Mono', 'PT Mono', 'Ubuntu', monospace;
+}
+.selectable,
+input,
+textarea {
+   -moz-user-select: text;
+   -webkit-user-select: auto !important;
+   -o-user-select: text;
+   -khtml-user-select: text;
+   user-select: text;
+}
+
+.borders, .borders td {
+	border: 1px solid black;
+}
+
+.contentCentered {
+   text-align: center;
+}
+
+.warningHeader { 
+   margin: 10px 0px 10px 0px; 
+   padding: 10px 10px 10px 10px; 
+   background: #FFEEEE; 
+   /*font-weight: bold;*/
+   border: 2px solid black; 
+   border-radius: 6px;
+ }
+#task h1,
+.question h1 {
+   margin-bottom: 10px;
+   margin-top: 10px;
+}
+#solution {
+   display: none;
+   margin-bottom: 50px;
+   margin-top: 0;
+}
+#taskIntro {
+   border: 1px solid #8d9daa;
+   margin: 10px 0;
+   padding: 0 10px;
+   font-weight: bold;
+}
+#taskContent {
+   text-align: justify;
+}
+.pythonIntro code {
+   cursor: pointer;
+}
+
+/*#success,
+#error {
+   font-weight: bold;
+   text-align: center;
+}
+#success {
+   color: blue;
+}*/
+
+/**************************************************************/
+/* TABS */
+
+#tabsContainer {
+   position: relative;
+   /*border-bottom: 2px solid #8d9daa;*/
+   border-bottom: 2px solid white;
+   min-width: 300px;
+}
+#tabsMenu {
+   /*text-align: center;*/
+}
+#tabsMenu .li {
+   display: inline-block;
+   position: relative;
+   width: 180px;
+   margin: 0;
+   background: #eeeeee;
+   border-radius: 6px 6px 0 0;
+   text-align: center;
+}
+#tabsMenu .li.first {
+   border-radius: 0 6px 0 0;
+}
+#tabsMenu .li.lockedLevel {
+   background: #404040;
+}
+#tabsMenu .li.current {
+   background: white;
+}
+#tabsMenu .li::after {
+   content: '|';
+   color: #a5a5a5;
+   position: absolute;
+   top: 8px;
+   right: -1px;
+}
+#tabsMenu .li.current::after, 
+#tabsMenu .li.prev::after {
+   content: '';
+}
+#tabsMenu .li.current.lockedLevel {
+   padding-bottom: 1px;
+   border-bottom: 1px solid #c0c0c0;
+   background: #606060;
+}
+#tabsMenu .li a {
+   display: block;
+   padding: 8px;
+   text-decoration: none; 
+   font-size: 14px;
+}
+#tabsMenu .li:not(.current) a {
+   color: #a5a5a5;
+}
+#tabsMenu .li .levelLabel {
+   margin-right: 1em;
+}
+[alkindi] #tabsMenu .li.current .levelLabel {
+   color: #88bb88;
+}
+#tabsMenu .li.lockedLevel a {
+   color: #ddd;
+}
+#tabsMenu .li a:focus {
+   outline: none;
+}
+#tabsMenu .li:not(.current) a:active {
+   background: #c4d3de;
+}
+#tabsMenu .li.lockedLevel a:active {
+   background: #6c7787;
+}
+[id^=stars_resp_alt_], #tabsMenuAlt {
+   display: none;
+}
+h1 span {
+   display: inline-block;
+   width: .8em;
+   height: .8em;
+}
+h1 .stars {
+   vertical-align: baseline;
+}
+.stars {
+   vertical-align: middle;
+}
+
+/**************************************************************/
+/* CONSIGNE */
+
+.consigne {
+   padding: 10px;
+}
+[alkindi] .consigne {
+   background: white;
+   font-size: 14px;
+   color: #30242B;
+   padding: 0;
+   margin: 20px;
+}
+[alkindi] .consigne h3 {
+   display: block;
+   background: white;
+   font-size: 14px;
+   /*color: white;*/
+   color: #88BB88;
+   /*border-radius: 5px 5px 0 0;*/
+   border-bottom: 1px solid #88BB88;
+   text-align: center;
+   margin: 0;
+   padding: 13px;
+}
+[alkindi] .consigne h3 i {
+   /*display: block;*/
+   /*float: left;*/
+   /*width: 20px;*/
+   margin-right: 20px;
+}
+[alkindi] .consigne #text {
+   padding: 20px;
+   padding-bottom: 10px;
+   padding-top: 0px;
+}
+
+/**************************************************************/
+
+.bestScore {
+   position: absolute;
+   right: 0;
+   top: .3em;
+   font-size: 1.2em;
+}
+#bestScore {
+   font-weight: bold;
+}
+
+#popupMessage {
+   display: none;
+}
+#popupMessage .container {
+   position: relative;
+   margin: .5em 0;
+   padding: 8px;
+}
+#popupMessage.floatingMessage {
+   position: absolute;
+   z-index: 100;
+   top: 0;
+   left: 0;
+   height: 100%;
+   width: 100%;
+   background-color: gray;
+   background: rgba(0, 0, 0, .6);
+}
+#popupMessage.floatingMessage .container {
+   min-height: 100px;
+   max-width: 600px;
+   /*margin: 360px auto;*/
+   margin: 50vh auto;
+   border: 2px solid black;
+   background: white;
+   transform: translateY(-50%);
+}
+#popupMessage img.beaver {
+   position: absolute;
+   width: 90px;
+   left: 0px;
+}
+#popupMessage img.messageArrow {
+   position: absolute;
+   z-index: 1;
+   left: 100px;
+   top: 16px;
+}
+#popupMessage .message {
+   margin-left: 115px;
+   padding: 8px;
+   max-width: 500px;
+   border: 2px solid black;
+   border-radius: 8px;
+   text-align: justify;
+}
+#popupMessage.noAvatar img.beaver, #popupMessage.noAvatar img.messageArrow {
+   display: none;
+}
+#popupMessage.noAvatar .message {
+   margin-left: 0px;
+   border: none;
+}
+#popupMessage p {
+   margin: .5em 0 0;
+}
+#popupMessage p:first-child {
+   margin-top: 0;
+}
+#popupMessage input {
+   margin-top: 1em;
+   margin-left: 200px;
+}
+#popupMessage button {
+   margin-top: 1em;
+   margin-left: 200px;
+   padding: 5px 18px 5px 18px;
+   margin-bottom: 0.5em;
+}
+
+.easy,
+.medium,
+.hard {
+   display: none;
+}
+
+/**************************************************************/
+/* ZONE_3 */
+
+#zone_3 {
+   width: 100%;
+   position: fixed;
+   height: 50px;
+   bottom: 0;
+   background: #eeeeee;
+}
+#displayHelperAnswering {
+   display: inline;
+   position: absolute;
+   right: 0;
+   background: #eeeeee;
+   border-radius: 10px 0 0 0;
+   height: 100%;
+}
+#displayHelper_validate,
+#displayHelper_cancel {
+   display: inline-block;
+   margin-top: 10px;
+}
+#displayHelper_validate > div,
+#displayHelper_cancel > div {
+   border: none;
+   border-radius: 50px;
+   color: white;
+   font-weight: bold;
+   padding: 6px 12px;
+   font-size: 14px;
+   cursor: pointer;
+}
+#displayHelper_validate > div i,
+#displayHelper_cancel > div i {
+   margin-right: 10px;
+}
+#displayHelper_validate > div {
+   background: #9acc68;
+   margin-right: 10px;
+}
+#displayHelper_cancel > div {
+   background: #f5a623;
+   margin: 0 10px;
+}
+
+[alkindi] #displayHelper_validate,
+[alkindi] #displayHelper_cancel {
+   display: inline-block;
+   margin-top: 12px;
+}
+[alkindi] #displayHelper_validate > div,
+[alkindi] #displayHelper_cancel > div {
+   border-radius: 5px;
+   width: 150px;
+   font-size: 12px;
+   text-align: center;
+}
+[alkindi] #displayHelper_validate > div i,
+[alkindi] #displayHelper_cancel > div i {
+   display: none;
+   font-size: 14px;
+}
+[alkindi] #displayHelper_validate > div {
+   background: #88bb88;
+   margin-right: 10px;
+}
+[alkindi] #displayHelper_cancel > div {
+   background: #30242b;
+   margin: 0 10px;
+}
+
+#displayHelper_saved {
+   margin: .6em;
+}
+#displayHelper_graderMessage, #displayHelper_saved {
+   /*margin: 16px 0px;*/
+   display: none;
+}
+
+[id^=resp_switch] {
+   display: none;
+}
+
+/**************************************************************/
+/* ERROR */
+#error {
+   display: inline-block;
+   background: red;
+   color: white;
+   border-radius: 5px;
+   position: fixed;
+   bottom: 0;
+   left: 0;
+   padding: 10px 30px 10px 20px;
+   max-width: 100%;
+}
+#error i:first-of-type {
+   margin-right: 10px;
+}
+#error i:last-of-type {
+   font-size: 12px;
+   position: absolute;
+   top: 5px;
+   right: 7px;
+   cursor: pointer;
+}
+
+/**************************************************************/
+#choose-view {
+   margin-bottom: 1em;
+   text-align: center;
+   display: none; /* useless div ? */
+}
+#choose-view .choose-view-button {
+   margin: 0 10px;
+}
+
+#task {
+	margin: 0 auto;
+}
+#task.largeScreen {
+	width: 1200px;
+}
+#taskContent:after {
+    content: " ";
+    display: table;
+    clear: both;
+}
+#zone_0 {
+   width: 100%;
+   background: #eeeeee;
+}
+#zone_12 {
+   position: relative;
+   float: left;
+   width: 100%;
+}
+#zone_1, #zone_2,
+.zone_1, .zone_2 {
+	margin: 0 auto;
+}
+#zone_2 {
+   position: relative;
+}
+.largeScreen #zone_1,
+.largeScreen #zone_2
+{
+	vertical-align: top;
+	box-sizing: content-box;
+	float: left;
+}
+.largeScreen #zone_1 {
+	width: 430px;
+}
+[class^=layout_] [id^=zone]  {
+   float: left;
+   /*border: 2px dashed #a7e2a7;*/
+}
+#main_header {
+   position: fixed;
+   top: 0;
+   background: white;
+   z-index: 10;
+}
+#zone_012 {
+   /*overflow: auto;*/
+   width: 100%;
+}
+#task [id^=scroll_arr_] {
+   display: none;
+   background: #4a90e2;
+   width: 30px;
+   height: 30px;
+   font-size: 18px;
+   color: white;
+   position: fixed;
+   text-align: center;
+   border-radius: 15px;
+   cursor: pointer;
+}
+#task[alkindi] [id^=scroll_arr_] {
+   background: #88bb88;
+}
+#task [id^=scroll_arr_] i {
+   margin-top: 50%;
+   transform: translateY(-50%);
+}
+#task #scroll_arr_up,
+#task #scroll_arr_down {
+   right: 30px;
+}
+#task #scroll_arr_up {
+   top: 103px;
+}
+#task #scroll_arr_down {
+   bottom: 60px;
+}
+#task #scroll_arr_left,
+#task #scroll_arr_right {
+   bottom: 60px;
+}
+#task #scroll_arr_left {
+   left: 10px;
+}
+#task #scroll_arr_right {
+   right: 30px;
+}
+
+/**************************************************************/
+/* LAYOUT 1 (large screen) */
+#main_header[class^=layout_] {
+   height: 71px;
+}
+#main_header[class^=layout_] table {
+   width: 100% !important;
+   margin: 0 !important;
+   min-width: 300px;
+}
+#main_header.layout_1 td,
+#main_header.layout_2 td,
+#main_header.layout_3 td,
+#main_header.layout_4 td {
+   text-align: center;
+}
+.layout_1 h1,
+.layout_2 h1,
+.layout_3 h1,
+.layout_4 h1 {
+   padding-left: 1em;
+}
+.layout_1 #tabsContainer #tabsMenu .resp_tabs, 
+.layout_2 #tabsContainer #tabsMenu .resp_tabs,
+.layout_1 #tabsContainer #tabsMenu .resp_version_arr, 
+.layout_2 #tabsContainer #tabsMenu .resp_version_arr {
+   display: none;
+}
+.layout_1 #zone_0,
+.layout_2 #zone_0 {
+   /*height: 110px;*/
+}
+#task.layout_1,
+#task.layout_2,
+#task.layout_3,
+#task.layout_4 {
+   width: 100%;
+}
+[class^=layout_] #taskCont {
+   margin: auto;
+} 
+#zone_12 {
+   border: none;
+   margin-bottom: 50px;
+}
+.layout_1 #zone_1 {
+   width: 30%;
+}
+.layout_1 #zone_2 {
+   width: 70%;
+   height: 100%;
+   position: absolute;
+   right: 0;
+}
+.layout_1 #zone_3.noSolution.vertical_scroll,
+.layout_2 #zone_3.noSolution.vertical_scroll {
+   background: none;
+}
+.layout_1 #zone_3 #showSolution,
+.layout_2 #zone_3 #showSolution,
+.layout_1 #zone_3 #showExercice,
+.layout_2 #zone_3 #showExercice  {
+   position: absolute;
+   width: 150px;
+   height: 45px;
+   text-align: center;
+   font-weight: bold;
+   font-size: 14px;
+   color: #787878;
+   padding: 15px;
+   border-radius: 0 0 10px 10px;
+   cursor: pointer;
+}
+.layout_1 #zone_3 .selected,
+.layout_2 #zone_3 .selected {
+   background: white;
+}
+[alkindi].layout_1 #zone_3 .selected,
+[alkindi].layout_2 #zone_3 .selected {
+   color: #88bb88 !important;
+}
+.layout_1 #zone_3 #showSolution,
+.layout_2 #zone_3 #showSolution {
+   left: 150px;
+}
+.layout_1 #zone_3 #showExercice,
+.layout_2 #zone_3 #showExercice {
+   left: 0;
+}
+.layout_1 #zone_3 [id^=show] i,
+.layout_2 #zone_3 [id^=show] i {
+   margin-right: 10px;
+}
+
+.layout_1 .consigne #example,
+.layout_2 .consigne #example,
+.layout_3 .consigne #example {
+   /*border: 2px dashed #a7e2a7;*/
+   padding: 10px;
+}
+
+/**************************************************************/
+/* LAYOUT 2 (>= 800px) */
+.layout_2 #zone_1, 
+.layout_2 #zone_2,
+.layout_2 #zone_3 {
+   width: 100%;
+}
+.layout_2 .consigne #text {
+   float: left;
+   width: 70%;
+}
+.layout_2 .consigne #example {
+   float: right;
+   width: 30%;
+}
+
+/**************************************************************/
+/* LAYOUT 3 */
+.layout_3 #zone_1, 
+.layout_3 #zone_2,
+.layout_3 #zone_3 {
+   width: 100%;
+}
+#main_header.layout_3 span,
+#main_header.layout_4 span {
+   display: none;
+}
+.layout_3 h1,
+.layout_4 h1 {
+   font-size: 25px;
+}
+.layout_3 #tabsContainer #tabsMenu .resp_tabs {
+   font-size: 14px;
+   padding: 8px;
+   color: #4a90e2;
+}
+.layout_3 #tabsContainer #tabsMenu .resp_tabs i {
+   color: black;
+}
+.layout_3 #tabsContainer #tabsMenu a:not(.resp_version_arr),
+.layout_4 #tabsContainer #tabsMenu a {
+   display: none;
+}
+.layout_3 #tabsContainer #tabsMenu a.resp_version_arr {
+   width: 2em;
+   padding: 0;
+   opacity: 0.5;
+}
+.layout_3 #tabsContainer #tabsMenu a.resp_right_arr {
+   float: right;
+}
+.layout_3 #tabsContainer #tabsMenu a.resp_left_arr {
+   float: left;
+}
+.layout_3 .li > a.resp_version_arr {
+   display: none !important;
+}
+.layout_3 #tabsMenu {
+   width: 90%;
+   margin: 0 5%;
+}
+.layout_3 #tabsMenu .li:not(.current),
+.layout_4 #tabsMenu .li:not(.current)  {
+   display: none;
+}
+.layout_3 #tabsMenu .li.current {
+   width: 100%;
+   border-radius: 6px 6px 0 0;
+}
+.layout_3 #error,
+.layout_4 #error {
+   top: 50%;
+   left: 50%;
+   bottom: auto;
+   transform: translate(-50%,-50%);
+}
+.layout_3 #zone_3 {
+   background: #eeeeee;
+   min-width: 366px;
+}
+.layout_3 #zone_3 > div,
+.layout_4 #zone_3 > div {
+   display: block;
+}
+.layout_3 #zone_3 #showExercice,
+.layout_4 #zone_3 #showExercice {
+   display: none;
+}
+.layout_3 [id^=resp_sw],
+.layout_3 #showSolution {
+   background: #eeeeee;
+   color: #4a90e2;
+   height: 50px;
+   width: 50px;
+   cursor: pointer;
+   float: left;
+}
+[alkindi].layout_3 [id^=resp_sw],
+[alkindi].layout_3 #showSolution,
+[alkindi].layout_4 [id^=resp_sw],
+[alkindi].layout_4 #showSolution {
+   color: #6d6d6d;
+}
+.layout_3 div.selected {
+   background: #4a90e2;
+   color: white;
+}
+[alkindi].layout_3 div.selected,
+[alkindi].layout_4 div.selected {
+   background: white;
+   color: #88bb88;
+}
+.layout_3 #showSolution {
+   float: right;
+}
+.layout_3 #zone_3 #showSolution.selected,
+.layout_4 #zone_3 #showSolution.selected {
+   background: #4a90e2;
+   color: white;
+}
+[alkindi].layout_3 #zone_3 #showSolution.selected,
+[alkindi].layout_4 #zone_3 #showSolution.selected {
+   background: white;
+   color: #88bb88;
+}
+.layout_3 [id^=resp_sw] i,
+.layout_3 #showSolution i,
+.layout_4 [id^=resp_sw] i,
+.layout_4 #showSolution i {
+   margin-top: 50%;
+   margin-left: 50%;
+   transform: translate(-50%,-50%);
+}
+.layout_3 [id^=resp_sw] span,
+.layout_3 #showSolution span,
+.layout_4 [id^=resp_sw] span,
+.layout_4 #showSolution span {
+   display: none;
+}
+.layout_3 .hideButtons [id^=resp_sw],
+.layout_3 .hideButtons #showSolution {
+   width: auto;
+   font-size: 14px;
+   padding: 15px;
+   font-weight: bold;
+}
+.layout_3 .hideButtons [id^=resp_sw] i,
+.layout_3 .hideButtons #showSolution i {
+   margin: 0 10px 0 0;
+   transform: none;
+}
+.layout_3 .hideButtons [id^=resp_sw] span,
+.layout_3 .hideButtons #showSolution span {
+   display: inline;
+   position: relative;
+}
+.layout_3 .hideButtons #resp_switch_2 {
+   border-right: 1px solid #d5d5d5;
+}
+.layout_3 #displayHelperAnswering {
+   position: static;
+   float: left;
+}
+[alkindi].layout_3 #displayHelperAnswering,
+[alkindi].layout_4 #displayHelperAnswering {
+   background: white;
+   border-radius: 0;
+}
+[alkindi].layout_3 .hideButtons #displayHelperAnswering,
+[alkindi].layout_4 .hideButtons #displayHelperAnswering {
+   display: none;
+}
+
+.layout_3 #displayHelper_cancel > div {
+   padding: 6px 8px;
+}
+.layout_3 #displayHelper_cancel > div span {
+   display: none
+}
+.layout_3 #displayHelper_cancel > div i {
+   margin-right: 0;
+}
+.layout_3 #displayHelper_validate > div span {
+   font-size: 12px;
+}
+.layout_3 #displayHelper_validate > div i {
+   margin-right: 5px;
+}
+[alkindi].layout_3 #displayHelper_validate > div {
+   width: 100px;
+}
+[alkindi].layout_3 #displayHelper_cancel > div,
+[alkindi].layout_4 #displayHelper_cancel > div,
+[alkindi].layout_4 #displayHelper_validate > div {
+   width: auto;
+   border-radius: 50px;
+}
+[alkindi].layout_3 #displayHelper_cancel > div {
+   padding: 6px 8px;
+}
+[alkindi].layout_3 #displayHelper_cancel > div span {
+   display: none
+}
+[alkindi].layout_3 #displayHelper_cancel > div i,
+/*[alkindi].layout_3 #displayHelper_validate > div i,*/
+[alkindi].layout_4 #displayHelper_cancel > div i,
+[alkindi].layout_4 #displayHelper_validate > div i {
+   display: inline;
+}
+[alkindi].layout_3 #displayHelper_cancel > div i {
+   margin-right: 0;
+}
+[alkindi].layout_3 #displayHelper_validate > div span {
+   font-size: 12px;
+}
+[alkindi].layout_3 #displayHelper_validate > div i {
+   margin-right: 5px;
+}
+
+/**************************************************************/
+/* LAYOUT 4 */
+
+#task.layout_4 #scroll_arr_up,
+#task.layout_4 #scroll_arr_down,
+#task.layout_4 #scroll_arr_right {
+   right: 60px;
+}
+#task.layout_4 #scroll_arr_down,
+#task.layout_4 #scroll_arr_left,
+#task.layout_4 #scroll_arr_right {
+   bottom: 10px;
+}
+
+.layout_4 #zone_12 {
+   margin-right: 50px;
+   margin-bottom: 0;
+}
+
+.layout_4 #zone_3 {
+   width: 50px;
+   height: 100%;
+   position: fixed;
+   right: 0;
+   bottom: 0;
+   background: #eeeeee;
+}
+.layout_4 #tabsContainer {
+   display: none;
+}
+.layout_4 .levelVersionCont {
+   display: block;
+   margin-top: 50%;
+   transform: translateY(-50%);
+}
+.layout_4 [id^=stars_resp_] {
+   display: none;
+}
+.layout_4 [id^=stars_resp_alt_] {
+   display: block;
+}
+.layout_4 #tabsMenu .li {
+   width: 50px;
+   height: 50px;
+   position: fixed;
+   right: 0;
+   bottom: 240px;
+   background: #eeeeee;
+   z-index: 10;
+   cursor: pointer;
+}
+.layout_4 #tabsMenu .li .levelLabel {
+   display: none;
+} 
+.layout_4 #tabsMenuAlt {
+   background: #eeeeee;
+   position: fixed;
+   right: 0;
+   bottom: 240px;
+   z-index: 20;
+   border-left: 2px solid #a5a5a5;
+}
+.layout_4 #tabsMenuAlt > * {
+   display: inline-block;
+   vertical-align: middle;
+}
+.layout_4 #tabsMenuAlt > span {
+   margin: 0 10px;
+   color: #4a90e2;
+}
+[alkindi].layout_4 #tabsMenuAlt > span {
+   color: #88bb88;
+}
+.layout_4 #tabsMenuAlt > .stars {
+   width: 50px;
+   height: 50px;
+   border-left: 2px solid #a5a5a5;
+   cursor: pointer;
+}
+.layout_4 #tabsMenuAlt > span + .stars {
+   border: none;
+}
+.layout_4 #tabsMenuAlt > .stars > * {
+   margin: 50% 50%;
+   transform: translate(-50%,-50%);
+}
+.layout_4 [id^=resp_sw],
+.layout_4 #showSolution {
+   position: fixed;
+   /*background: white;*/
+   background: #eeeeee;
+   /*color: #4a90e2;*/
+   height: 50px;
+   width: 50px;
+   cursor: pointer;
+   /*font-size: 16px;*/
+}
+.layout_4 div.selected {
+   background: #4a4a4a;
+   color: white;
+}
+.layout_4 #resp_switch_1 {
+   right: 0;
+   bottom: 190px;
+   border-top: 1px solid #d5d5d5;
+}
+
+.layout_4 #resp_switch_2 {
+   right: 0;
+   bottom: 140px;
+}
+.layout_4 .hideButtons #resp_switch_2 {
+   border-bottom: 1px solid #d5d5d5;
+}
+.layout_4 .hideButtons #resp_switch_1 {
+   border-top: none;
+}
+.layout_4 #showSolution {
+   bottom: 0;
+   right: 0;
+}
+.layout_4 #displayHelperAnswering {
+   position: fixed;
+   right: 0;
+   bottom: 50px;
+   background: white;
+   border-radius: 0;
+   width: 50px;
+   height: 90px;
+}
+.layout_4 #displayHelper_cancel,
+.layout_4 #displayHelper_validate {
+   display: inline-block;
+   margin-left: 10px;
+}
+.layout_4 #displayHelper_validate {
+   margin-bottom: 10px;
+}
+.layout_4 #displayHelper_cancel div,
+.layout_4 #displayHelper_validate div {
+   margin: 0;
+   padding: 6px 8px;
+}
+.layout_4 #displayHelper_cancel span,
+.layout_4 #displayHelper_validate span {
+   display: none;
+}
+.layout_4 #displayHelper_cancel i,
+.layout_4 #displayHelper_validate i {
+   margin: 0;
+}
+
+/**************************************************************/
+
+#displayHelperAnswering {
+	/*padding: 10px;*/
+}
+
+.exemple
+{
+	margin: auto;
+	margin-top: 10px;
+	text-align: center;
+	border: 1px solid black;
+	border-radius: 1px;
+	width: 290px;
+}
+
+.grille, .boutons_sujet
+{
+	display: inline-block;
+	vertical-align: middle;
+	margin: auto;
+}
+
+.boutons_sujet
+{
+	margin-top: 20px; 
+}
+
+
+.objectif
+{
+	display: inline-block;
+	vertical-align: top;
+	margin: auto;
+	margin-top: 20px;
+}
+
+
+.container_inverse
+{
+	display: inline-block;
+	width: 100%;
+}
+
+/* css présent à l'origine dans tous les sujets et déplacé ci-dessous */
+
+#anim_container
+{
+	text-align: center;
+}
+
+#anim_container table {
+	margin: auto;
+}
+
+#anim {
+	display: inline-block;
+	margin-top: 20px;
+}
+
+#feedback {
+	height: 1em;
+	margin-top: 0.5em;
+	margin-bottom: 0.1em;
+	text-align: center;
+	font-weight: bold;
+	color: red; 
+}
+
+#showSolutionButton {
+   display: none;
+   margin-top: 24px;
+}
diff --git a/pemFioi/taskStyles-mobileFirst.css b/pemFioi/taskStyles-mobileFirst.css
new file mode 100644
index 000000000..3a7d32ef0
--- /dev/null
+++ b/pemFioi/taskStyles-mobileFirst.css
@@ -0,0 +1,456 @@
+html {
+  font-size: 10px;
+}
+body {
+  padding: 0;
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  background-color: #f1f2f7;
+}
+* {
+  box-sizing: border-box;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+#miniPlatformHeader {
+  background-color: transparent !important;
+  flex: 0 0 40px;
+}
+#choose-view {
+  margin-top: 0 !important;
+}
+.btn-centered {
+  margin: 10px auto 0;
+  display: block;
+}
+.flex-container {
+  display: flex;
+}
+.flex-container .flex-col.half {
+  flex: 1 0 0;
+}
+/*****************
+  LEVEL SELECTOR
+*****************/
+#tabsContainer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+#tabsMenu {
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+#tabsMenu a, .tabs-area a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  color: #4a90e2;
+  text-decoration: none;
+}
+#tabsMenu .stars {
+  margin-left: 5px;
+}
+#tabsMenu .li, .tabs-area a {
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: 12px;
+}
+#tabsMenu .li:not(.current) a, .tabs-area .li:not(.current) a {
+  color: #9b9b9b;
+}
+
+@media /* Portrait mobiles */
+  screen and (max-width: 480.99999999999px),
+  screen and (max-width: 600.99999999999px) and (orientation: portrait) {
+
+  #tabsMenu {
+    background-color: #fff;
+    border-radius: 5px 5px 0 0;
+    margin: 0 10px;
+    padding: 4px 0;
+    position: relative;
+  }
+  #tabsMenu::before,
+  #tabsMenu::after {
+    content: " ";
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: transparent;
+  }
+  #tabsMenu::before {
+    border-radius: 50% 0;
+    box-shadow: 10px 0px 0 #fff;
+    bottom: 0;
+    left: -20px;
+  }
+  #tabsMenu::after {
+    border-radius: 0 50%;
+    box-shadow: -10px 0px 0 #fff;
+    bottom: 0;
+    right: -20px;
+  }
+  #tabsMenu .li {
+    display: none;
+  }
+  #tabsMenu .li.current {
+    flex: 1 0 0;
+    display: block;
+  }
+  #tabsMenu .li.prev,
+  #tabsMenu .li.next {
+    flex: 0 1 3em;
+    display: block;
+    text-align: center;
+    cursor: pointer;
+  }
+  #tabsMenu .li.prev a::before,
+  #tabsMenu .li.next a::before {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    font-size: 22px;
+    line-height: 32px;
+  }
+  #tabsMenu .li.prev a::before {
+    content: "\f104";
+  }
+  #tabsMenu .li.next a::before {
+    content: "\f105";
+  }
+  #tabsMenu .li.prev a span,
+  #tabsMenu .li.next a span {
+    display: none;
+  }
+}
+@media /* all but portrait mobiles */
+    screen and (min-width: 481px) and (orientation: landscape),
+    screen and (min-width: 601px) and (orientation: portrait) {
+  #tabsMenu a, .tabs-area a {
+    padding: 10px 0;
+  }
+  #tabsMenu .li, .tabs-area .li {
+    padding: 0 20px;
+  }
+  #tabsMenu .li:not(.current):not(.prev):not(:last-child),
+  .tabs-area .li:not(.current):not(.prev):not(:last-child) {
+    border-right-width: 2px;
+    border-right-style: solid;
+    -webkit-border-image:
+      -webkit-linear-gradient(rgba(0,0,0,0.01),rgba(0,0,0,0.1), rgba(0,0,0,0.01)) 1 100%;
+    -moz-border-image:
+      -moz-linear-gradient(rgba(0,0,0,0.01),rgba(0,0,0,0.1), rgba(0,0,0,0.01)) 1 100%;
+    -o-border-image:
+      -o-linear-gradient(rgba(0,0,0,0.01),rgba(0,0,0,0.1), rgba(0,0,0,0.01)) 1 100%;
+    border-image:
+      linear-gradient(to bottom, rgba(0,0,0,0.01),rgba(0,0,0,0.1), rgba(0,0,0,0.01)) 1 100%;
+  }
+  #tabsMenu .li.current, .tabs-area .li.current {
+    background-color: #fff;
+    border-radius: 5px 5px 0 0;
+    position: relative;
+  }
+  #tabsMenu .li.current::before,
+  #tabsMenu .li.current::after,
+  .tabs-area .li.current::before,
+  .tabs-area .li.current::after {
+    content: " ";
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: transparent;
+  }
+  #tabsMenu .li.current::before,
+  .tabs-area .li.current::before {
+    border-radius: 50% 0;
+    box-shadow: 10px 0px 0 #fff;
+    bottom: 0;
+    left: -20px;
+  }
+  #tabsMenu .li.current::after,
+  .tabs-area .li.current::after {
+    border-radius: 0 50%;
+    box-shadow: -10px 0px 0 #fff;
+    bottom: 0;
+    right: -20px;
+  }
+}
+@media /* Tablets and desktop */
+  screen and (min-width: 768px) and (max-width: 1024.9999999999px) and (orientation: portrait),
+  screen and (min-width: 855px) and (orientation: landscape),
+  screen and (min-width: 1025px) {
+  #tabsMenu .li, .tabs-area .li {
+    padding: 0 40px;
+  }
+}
+@media /* Tablets landscape and desktop */
+  screen and (min-width: 855px) and (orientation: landscape) {
+  #tabsMenu {
+    margin-top: 7px;
+  }
+}
+#popupMessage {
+   display: none;
+}
+#popupMessage .container {
+   position: relative;
+   margin: .5em 0;
+   padding: 8px;
+}
+#popupMessage:not(.floatingMessage) {
+   background: white;
+   text-align: center;
+}
+#popupMessage.floatingMessage {
+   position: absolute;
+   z-index: 100;
+   top: 0;
+   left: 0;
+   height: 100%;
+   width: 100%;
+   background-color: gray;
+   background: rgba(241, 242, 247, .9);
+}
+#popupMessage.floatingMessage .container {
+   min-height: 100px;
+   width: 94%;
+   max-width: 680px;
+   margin-left: auto;
+   margin-right: auto;
+   border-radius: 5px;
+   background: #fff;
+   color:#787878;
+   padding: 20px;
+   top: 50%;
+   transform: translate(0,-50%);
+}
+#popupMessage .container img.messageArrow {
+   display: none;
+}
+#popupMessage.floatingMessage .container img.beaver {
+   display: none;
+}
+#popupMessage .message {
+   font-size: 18px;
+}
+#popupMessage p {
+   margin: .5em 0 0;
+}
+#popupMessage p:first-child {
+   margin-top: 0;
+}
+#popupMessage input {
+   margin-top: 1em;
+   margin-left: 200px;
+}
+#popupMessage .buttonsWrapper {
+   margin: 2em auto 0;
+   text-align: center;
+}
+#popupMessage button {
+   padding: 7px 20px;
+   background-color: #4a90e2;
+   color: #fff;
+   border-radius: 100px;
+   border: none;
+   box-shadow: none;
+   font-weight: bold;
+   text-transform: uppercase;
+   font-size: 14px;
+   cursor: pointer;
+}
+#popupMessage button.buttonYes::before {
+  content: "\f00c";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  margin-right: 10px;
+}
+
+/* QuickPi connexion popup */
+
+#popupMessage .qpi .panel-heading {
+  margin: -20px -20px 0;
+  padding: 20px
+}
+#popupMessage .qpi .sectionTitle {
+  color: inherit;
+}
+#popupMessage .qpi .sectionTitle .iconTag {
+  margin-left: -20px; /* panel-heading padding */
+  margin-right: 14px;
+  padding-left: 24px;
+  padding-right: 12px;
+  background-color: #4a90e2;
+  border-left: 2px solid rgba(0,0,0,0.8);
+  border-radius: 0 50px 50px 0;
+}
+#popupMessage .qpi .sectionTitle .iconTag .icon {
+  width: auto;
+  background-color: transparent;
+  margin-right: 0;
+  line-height: 31px;
+  font-size: 12px;
+}
+#popupMessage .qpi .panel-body {
+  margin-left: 44px; /* Align left to .sectionTitle text left */
+  font-size: 12px;
+}
+#popupMessage .qpi .panel-body label {
+  display: block;
+  margin-top: 2em;
+}
+#popupMessage .qpi .form-group {
+  position: relative;
+}
+#popupMessage .qpi .form-control,
+#popupMessage .qpi select {
+  background-color: transparent;
+  border: none;
+  font-size: 16px;
+  height: 36px;
+  line-height: 1.6;
+  color: #555555;
+  border-radius: 5px; 
+}
+#popupMessage .qpi .form-control {
+  flex-grow: 1;
+  margin: 0;
+  padding: 6px 12px;
+}
+#popupMessage .qpi input {
+  margin-left: 0;
+}
+#popupMessage .qpi select {
+  padding: 6px 12px;
+}
+#popupMessage .qpi .input-group {
+  position: relative;
+  width: 100%;
+  margin: 10px 0 0;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  background-color: #f8f8f8;
+  border-radius: 5px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+#popupMessage .qpi .input-group .input-group-prepend {
+  border-radius: 5px 0 0 5px;
+  line-height: 2.4rem;
+  padding: 6px 12px;
+  border: none;
+  color: #c5c4c4;
+  padding: 6px 9px;
+  font-weight: bold;
+}
+#popupMessage .qpi .input-group button.input-group-prepend {
+  color: #fff;
+}
+#popupMessage .qpi .input-group .custom-select {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  margin-bottom: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+#popupMessage .qpi .btn {
+  margin: 10px auto 0;
+  border-radius: 50px;
+  padding: 6px 50px;
+  text-transform: uppercase;
+  font-weight: bold;
+  line-height: 1.5;
+  border: none;
+  font-size: 1.2rem;
+  position: relative;
+}
+#popupMessage .qpi .btn .icon {
+  position: absolute;
+  left: 16px;
+  top: 7px;
+  top: calc(50% - 0.5em);
+}
+#popupMessage .qpi .btn-group.switchRadio {
+  display: flex;
+  background-color: #e5e5e5;
+  border-radius: 50px;
+  margin: 2em 0;
+  box-shadow: 1px 1px 0 0 #ccc inset;
+}
+#popupMessage .qpi .btn-group.switchRadio .btn {
+  flex: 1 1 auto;
+  margin: 0;
+  border-left: 1px solid #d3d3d3;
+  transition: all ease 250ms;
+}
+#popupMessage .qpi .btn-group.switchRadio .btn:not(.active) {
+  background-color: transparent;
+  border-radius: 0;
+  color: #bbbbbb;
+}
+#popupMessage .qpi .btn-group.switchRadio .btn:first-child,
+#popupMessage .qpi .btn-group.switchRadio .btn.active + .btn {
+  border-left: 0;
+}
+#popupMessage .qpi .btn-group.switchRadio .btn .icon {
+  position: static;
+  padding-right: 10px;
+}
+#popupMessage .qpi #sensorPicker .flex-container {
+  align-items: center;
+  margin: 2em 0 4em;
+}
+#popupMessage .qpi #selector-image-container {
+  text-align: center;
+  position: relative;
+  height: 70px;
+}
+#popupMessage .qpi #selector-image-container img {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0);
+}
+#popupMessage .qpi #sensorPicker #selector-label {
+  position: absolute;
+  top: 15px;
+  left: 3px;
+  font-style: italic;
+}
+.qpi .inlineButtons {
+  text-align: center;
+  margin: 2em 0;
+  display: flex;
+}
+.qpi .inlineButtons button {
+  flex: 1 0 0;
+}
+.qpi .singleButton {
+  margin: 2em 0;
+  text-align: center;
+}
+#popupMessage .qpi .inlineButtons button + button {
+  margin-left: 10px;
+}
+
+/* Python */
+.pythonIntroSimple code, .pythonIntroFull code {
+  cursor: pointer;
+  color: #4D87CE;
+}
+.pythonIntroSimple code.pflForbidden,
+.pythonIntroFull code.pflForbidden {
+  cursor: not-allowed;
+}
diff --git a/pemFioi/taskVideo/player.css b/pemFioi/taskVideo/player.css
new file mode 100644
index 000000000..21554e7a2
--- /dev/null
+++ b/pemFioi/taskVideo/player.css
@@ -0,0 +1,118 @@
+.task-video .introduction {
+    margin: 20px 0;
+}
+
+.task-video .task-video-content {
+    overflow: hidden;
+    position: relative;
+    zoom: 1;
+    background: transparent;
+    transition: box-shadow 0.2s ease-in-out, background 0.2s ease-in-out;
+}
+
+.task-video .sections {
+    overflow-y: scroll;
+}
+
+.task-video .sections .section {
+    margin-bottom: 5px;
+}
+
+.task-video .section .title {
+    cursor: pointer;
+    font-weight: bold;
+    padding: 5px;
+}
+
+.task-video .section .title .duration {
+    float: right;
+}
+
+.task-video .section .title:hover,
+.task-video .sections .active .title {
+    background: #DEF;
+}
+
+.task-video .section .description {
+    padding: 5px;
+    color: #999;
+}
+
+.task-video .section .description.hasImage {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.task-video .section .description.hasImage div.image {
+    width: 200px;
+    height: 100%;
+    margin: 0px 8px;
+    white-space: nowrap;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.task-video .section .description.hasImage div.image img {
+    width: 200px;
+}
+
+.task-video .time-link {
+    color: #36F;
+    cursor: pointer;
+}
+
+.task-video .time-link:hover {
+    text-decoration: underline;
+}
+
+.task-video .sections .viewed .title:after {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 12px;
+    border: solid #060;
+    border-width: 0 3px 3px 0;
+    transform: rotate(45deg);
+    margin-left: 10px;
+}
+
+.task-video .conclusion {
+    margin: 20px 0;
+}
+
+
+.task-video-narrow-mode .fixed-content .player,
+.task-video-wide-mode .fixed-content {
+    background: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.66);
+    -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.66);
+    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.66);
+}
+
+
+.task-video-wide-mode .player {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+}
+
+.task-video-wide-mode .sections {
+    position: absolute;
+    height: 100%;
+    right: 0;
+    top: 0;
+}
+
+.task-video-narrow-mode .player {
+    width: 100%;
+}
+
+.task-video-narrow-mode .sections {
+    width: 100%;
+}
diff --git a/pemFioi/taskVideo/player.js b/pemFioi/taskVideo/player.js
new file mode 100644
index 000000000..e4e1ab278
--- /dev/null
+++ b/pemFioi/taskVideo/player.js
@@ -0,0 +1,590 @@
+(function($) {
+
+    var player;
+    var ready = false;
+    var state_cache;
+
+
+
+    // time formatter and parser
+    var time_string = {
+
+        parse: function(value) {
+            if(typeof value === 'string') {
+                var mult = 1,
+                    parts = value.split(':'),
+                    res = 0;
+                while(parts.length) {
+                    res += mult * parseFloat(parts.pop());
+                    mult *= 60;
+                }
+                return res;
+            }
+            return value || 0;
+        },
+
+        format: function(value) {
+            var v = parseInt(value, 10),
+                h = Math.floor(v / 3600);
+                m = Math.floor((v - (h * 3600)) / 60),
+                s = v - (h * 3600) - (m * 60);
+
+            function zero(v) {
+                return v < 10 ? '0' + v : v;
+            }
+            return (h > 0 ? h + ':' : '') + zero(m) + ':' + zero(s);
+        }
+    }
+
+
+    // load youtube IFrame Player API
+    var apiLoader = {
+        callbacks: [],
+        loaded: false,
+        loading: false,
+
+        fetch: function() {
+            window.onYouTubePlayerAPIReady = function() {
+                delete window.onYouTubePlayerAPIReady;
+                apiLoader.loaded = true;
+                var cb;
+                while(cb = apiLoader.callbacks.pop()) {
+                    cb();
+                }
+            }
+            var script = document.createElement("script");
+            script.src = "https://www.youtube.com/player_api";
+            script.onerror = function() {
+                console.error('Error loading IFrame Player API');
+            }
+            document.body.appendChild(script);
+        },
+
+
+        load: function(callback) {
+            if(this.loaded) {
+                return callback();
+            }
+            this.callbacks.push(callback);
+            if(!this.loading) {
+                this.loading = true;
+                this.fetch();
+            }
+        }
+    }
+
+
+
+    // sections nav
+    var sections = {
+
+        data: [],
+        active: null,
+        visible: true,
+        show_viewed: true,
+        callback: null,
+
+        generateSections: function(amount, start, end) {
+            if(!start) start = 0;
+            if(!end) end = player.getDuration();
+            var duration = (end - start) / amount;
+            var res = [];
+            for(var i=0; i' + ('number' in section ? section.number + '. ' : '') + section.title +
+                    '
' + time_string.format(section.start) + '
' +
+                '
'
+            );
+            el.click(makeClickCallback(idx));
+            parent.append(el);
+        },
+
+        renderDescription: function(parent, idx, section) {
+            if(!section.image && !section.description) {
+                return;
+            }
+            var description = section.description.replace(/\{[^\}]+\}/g, function(m) {
+                m = m.substr(1, m.length - 2).split('|');
+                if(m.length > 1) {
+                    var time = time_string.parse(m[1]);
+                    var title = m[0];
+                } else {
+                    var time = time_string.parse(m[0]);
+                    var title = time_string.format(time);
+                }
+
+                return '' + title + '';
+            });
+            if(section.image) { 
+                // section.image is either an URL to an image, or a #id
+                // identifier for an image tag to fetch the URL from
+                var html = '
';
+                var imgSrc = section.image;
+                if(imgSrc[0] == '#') {
+                    imgSrc = $('img' + imgSrc).attr('src');
+                }
+                html += '
';
+                html += '
' + description + '
';
+                html += '
';
+            } else {
+                var html = '
';
+                html += description;
+                html += '
';
+            }
+            var el = $(html);
+
+            function makeClickCallback(link) {
+                var time = parseFloat($(link).data('time'));
+                return function() {
+                    player.seekTo(time);
+                    player.playVideo();
+                }
+            }
+            el.find('span.time-link').each(function() {
+                $(this).click(makeClickCallback(this));
+            });
+            parent.append(el);
+        },
+
+
+        render: function(parent, onClick) {
+            if(!this.visible) return;
+
+            for(var i=0,section; section = this.data[i]; i++) {
+                section.element = $('
');
+                this.renderTitle(section.element, i, section, onClick);
+                this.renderDescription(section.element, i, section);
+                parent.append(section.element);
+            }
+        },
+
+
+        refresh: function() {
+            if(!this.visible) return;
+            for(var i=0,section; section = this.data[i]; i++) {
+                section.element.toggleClass('active', i === this.active);
+                section.element.toggleClass('viewed', this.show_viewed && section.viewed);
+            }
+        },
+
+
+        track: function(time) {
+            for(var i=0,section; section=this.data[i]; i++) {
+                if(time >= section.start && time < section.end) {
+                    this.setActive(i);
+                    var cnt = 0;
+                    var refresh = false;
+                    var scoreUpdate = false;
+                    for(var j=0,part; part=this.data[i].parts[j]; j++) {
+                        if(!part.viewed && time >= part.start && time < part.end) {
+                            part.viewed = true;
+                            refresh = true;
+                        }
+                        if(part.viewed) cnt++;
+                    }
+                    if(cnt && cnt > Math.floor(section.parts.length * 0.5)) {
+                        var wasViewed = section.viewed;
+                        section.viewed = true;
+                        refresh = refresh || !wasViewed;
+                        scoreUpdate = !wasViewed
+                    }
+                    if(refresh) {
+                        this.refresh();
+                    }
+                    if(scoreUpdate && this.callback) {
+                        this.callback();
+                    }
+                    return;
+                }
+            }
+        },
+
+
+        setActive: function(idx) {
+            if(this.active === idx) return;
+            this.active = idx;
+            this.refresh();
+        },
+
+
+        getViewed: function() {
+            var res = [];
+            for(var i=0,section; section=this.data[i]; i++) {
+                res.push({viewed: !!section.viewed, parts: section.parts});
+            }
+            return res;
+        },
+
+
+        setViewed: function(viewed) {
+            for(var i=0,section; section=this.data[i]; i++) {
+                var v = viewed[i];
+                if(!v) { continue; }
+                section.viewed = v.viewed;
+                if(section.parts && v.parts) {
+                    for(var j=0, part; part=section.parts[j]; j++) {
+                        if(!v.parts[j]) { continue; }
+                        part.viewed = !!v.parts[j].viewed;
+                    }
+                }
+            }
+            this.refresh();
+        },
+
+
+        destroy: function() {
+            $.each(this.data, function(i, section) {
+                section.element.remove();
+            })
+        }
+
+    }
+
+
+
+    // tpl
+    var template = {
+
+        elements: {},
+
+        init: function(parent, config) {
+            this.render(parent);
+            var refreshLayout = this.getRefreshLayoutFunc(config);
+            $(window).scroll(refreshLayout);
+            $(window).resize(refreshLayout);
+            refreshLayout();
+        },
+
+
+        render: function(parent) {
+            this.elements.root = $(
+                '
\
+                    
\
+                        
\
+                        
\
+                    
\
+                
'
+            );
+            var self = this;
+            this.elements.root.find('[data-key]').each(function() {
+                self.elements[$(this).data('key')] = $(this);
+            });
+            parent.html('').append(this.elements.root);
+        },
+
+
+        getRefreshLayoutFunc: function(config) {
+            var elements = this.elements,
+                win = $(window),
+                doc = $(window.document),
+                is_wide_mode_old = null;
+
+            return function() {
+                var is_fixed_content = win.scrollTop() > elements.root.position().top;
+                var is_wide_mode = win.width() >= config.layout.wide_mode_min_width;
+
+                elements.root.toggleClass('task-video-wide-mode', is_wide_mode);
+                elements.root.toggleClass('task-video-narrow-mode', !is_wide_mode);
+
+                var scroll = Math.max(0, win.scrollTop() - elements.root.position().top);
+
+                if(is_wide_mode_old !== is_wide_mode) {
+                    is_wide_mode_old = is_wide_mode;
+                    elements.root.height('');
+                    elements.content.width('');
+                    elements.content.height('');
+                    elements.player.height('');
+                    elements.player.width('');
+                    elements.sections.height('');
+                    elements.sections.width('');
+                    elements.sections.css('margin-top', '');
+                }
+
+                if(is_wide_mode) {
+                    var video_width = config.layout.wide_mode_video_width * elements.root.width();
+                    elements.player.width(video_width);
+                    elements.sections.width(elements.root.width() - video_width);
+                    elements.content.width(elements.root.width());
+
+                    var max_height = video_width / config.layout.video_aspect_ratio;
+                    var height = Math.floor(Math.max(0.5 * max_height, max_height - scroll));
+                    elements.root.height(height);
+                    elements.content.height(height);
+                } else {
+                    var max_height = elements.root.width() / config.layout.video_aspect_ratio;
+                    elements.sections.height(max_height);
+                    var player_height = Math.max(0.5 * max_height, max_height - scroll);
+                    elements.player.height(player_height);
+                    elements.sections.css('margin-top', is_fixed_content ? max_height : '');
+                }
+
+                elements.content.toggleClass('fixed-content', is_fixed_content);
+            }
+        },
+
+
+        get: function(name) {
+            return this.elements[name];
+        },
+
+
+
+
+        destroy: function() {
+            $(window).unbind('scroll');
+            $(window).unbind('resize');
+            this.elements.root && this.elements.root.remove();
+            this.elements = {};
+        }
+    }
+
+
+
+    // player watcher
+    var watchDog = {
+
+        interval: null,
+
+        watch: function() {
+            if(this.interval !== null) return;
+            this.interval = setInterval(function() {
+                sections.track(player.getCurrentTime());
+            }, 100);
+        },
+
+
+        stop: function() {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+
+
+
+    // player init
+
+    function createPlayer(parent, config, events) {
+        ready = false;
+        var defaults = {}
+        if(window.stringsLanguage) {
+            defaults.hl = window.stringsLanguage;
+        }
+        var youtube = Object.assign(defaults, config.youtube);
+
+
+        return new YT.Player(parent, {
+            videoId: config.video_id,
+            height: '100%',
+            width: '100%',
+            enablejsapi: 1,
+            origin: null, // ??
+            host: 'https://www.youtube.com',
+            playerVars: youtube,
+            events: {
+                'onReady': function(e) {
+                    sections.init(config, template.get('sections'));
+                    ready = true;
+                    if(state_cache) {
+                        stateHandler(state_cache);
+                        delete(state_cache);
+                    }
+                },
+                'onStateChange': function(e) {
+                    if(e.data === YT.PlayerState.PLAYING) {
+                        watchDog.watch();
+                    } else {
+                        watchDog.stop();
+                    }
+                    if(e.data === YT.PlayerState.ENDED && events.onPlaybackEnd) {
+                        events.onPlaybackEnd();
+                    }
+                },
+                'onError': function(e) {
+                    console.log('onError', e.data)
+                }
+            }
+        });
+    }
+
+
+    function makeConfig(params, callback) {
+        var defaults = {
+            layout: {
+                video_aspect_ratio: 16/9,
+                wide_mode_min_width: 1024,
+                wide_mode_video_width: 0.6,
+                enumerate_sections: true
+            },
+            callback: callback
+        }
+        return Object.assign(defaults, params);
+    }
+
+
+    function stateHandler(state) {
+
+        if(!ready) {
+            //console.error('Player not ready');
+            return null;
+        }
+
+        if(state) {
+            if('sections' in state) {
+                sections.setViewed(state.sections);
+            }
+            if('timestamp' in state) {
+                player.seekTo(state.timestamp);
+                //player.playVideo();
+            }
+        } else {
+            var sectionsData = sections.getViewed();
+            var nbViewed = 0;
+            for(var i=0, section; section=sectionsData[i]; i++) {
+                if(section.viewed) { nbViewed += 1; }
+            }
+            return {
+                timestamp: player.getCurrentTime(),
+                playing: player.getPlayerState() === YT.PlayerState.PLAYING,
+                viewed: nbViewed,
+                total: sectionsData.length,
+                sections: sectionsData
+            }
+        }
+    }
+
+    // jQuery plugin interface
+
+    $.fn.taskVideo = function(params, callback, events) {
+        var that = this;
+        var config = makeConfig(params, callback);
+        if(!events) { events = {}; }
+        if(callback) { events.onPlaybackEnd = callback; }
+        apiLoader.load(function() {
+            template.init(that, config);
+            player = createPlayer(template.get('player').find('div')[0], config, events);
+        });
+        return this;
+    }
+
+
+    $.fn.taskVideo.ready = function() {
+        return ready;
+    }
+
+
+    $.fn.taskVideo.state = function(state) {
+        if(ready) {
+            return stateHandler(state);
+        } else if(state !== undefined) {
+            state_cache = state;
+        } else {
+            return state_cache;
+        }
+    }
+
+
+    $.fn.taskVideo.destroy = function() {
+        delete(state_cache);
+        watchDog.stop();
+        player && player.destroy();
+        player = null;
+        template.destroy();
+    }
+
+})(jQuery);
diff --git a/pemFioi/taskVideo/taskVideo.js b/pemFioi/taskVideo/taskVideo.js
new file mode 100644
index 000000000..0e824ef5b
--- /dev/null
+++ b/pemFioi/taskVideo/taskVideo.js
@@ -0,0 +1,116 @@
+// taskVideo : task with a YouTube video
+
+var task = {};
+
+task.showViews = function(views, success, error) {
+    success();
+};
+
+task.getViews = function(success, error) {
+    var views = {
+        task: {}
+    };
+    success(views);
+};
+
+task.updateToken = function(token, success, error) {
+    success();
+};
+
+task.heights = [];
+
+task.getHeight = function(success, error) {
+    // Note : if the html/body is taking all available height, making an
+    // infinite loop with the platform of height increase, try changing your
+    // doctype to 
+    var d = document;
+    var h = Math.max(d.body.offsetHeight, d.documentElement.offsetHeight);
+    success(h);
+    //success(parseInt($("body").outerHeight(true)));
+};
+
+task.getMetaData = function(success, error) {
+    if (typeof json !== 'undefined') {
+        success(json);
+    } else {
+        success({nbHints: 0});
+    }
+};
+
+task.reloadAnswerObject = function(answerObj) {
+    $('#taskContent').taskVideo.state(answerObj);
+}
+task.getAnswerObject = function() {
+    return $('#taskContent').taskVideo.state();
+}
+task.getDefaultAnswerObject = function() {
+    return {
+        viewed: 0,
+        total: 0, // not 0
+        sections: {},
+        timestamp: 0,
+        playing: false
+    };
+}
+
+task.reloadAnswer = function(strAnswer, success, error) {
+    try {
+        if(strAnswer) {
+            task.reloadAnswerObject(JSON.parse(strAnswer));
+        }
+        success();
+    } catch(e) { error(e); }
+};
+
+task.getAnswer = function(success, error) {
+    success(JSON.stringify(task.getAnswerObject()));
+};
+
+
+task.reloadState = function(state, success, error) { task.reloadAnswer(state, success, error); }
+task.getState = function(success, error) { task.getAnswer(success, error); }
+task.reloadStateObject = function(obj) { task.reloadAnswerObject(obj); }
+task.getStateObject = function() { return task.getAnswerObject(); }
+task.getDefaultStateObject = function() { return task.getDefaultAnswerObject(); }
+
+task.load = function(views, success, error) {
+    $('#taskContent').taskVideo(
+        window.videoData,
+        function() { platform.validate('done'); }
+        );
+    success();
+};
+
+task.unload = function(success, error) {
+    $('#taskContent').taskVideo.destroy();
+    success();
+};
+
+
+task.gradeAnswer = function(answer, answerToken, success, error) {
+    try {
+        var answerObj = JSON.parse(answer);
+    } catch(e) { error(e); }
+    if(answerObj.viewed) {
+        success(Math.floor(100 * answerObj.viewed / answerObj.total), answerObj.viewed + '/' + answerObj.total + ' sections viewed.');
+    } else {
+        success(0, 'No section has been viewed.');
+    }
+}
+
+var grader = {
+    gradeTask: task.gradeAnswer
+};
+
+$(function() {
+    if(window.platform) {
+        platform.initWithTask(task);
+    }
+
+    // Copy of displayHelper.useFullWidth
+    try {
+        $('#question-iframe', window.parent.document).css('width', '100%');
+    } catch(e) {
+    }
+    $('body').css('width', '');
+});
diff --git a/pemFioi/taskVideo/test.html b/pemFioi/taskVideo/test.html
new file mode 100644
index 000000000..3faaa8782
--- /dev/null
+++ b/pemFioi/taskVideo/test.html
@@ -0,0 +1,68 @@
+
+
+
+    
+    
+    Youtube API test
+    
+    
+    
+    
+    
+
+
+    

+    


+    

+        
+        
+    

+    

+    
+
+
+
\ No newline at end of file
diff --git a/pemFioi/visual-graph-1.0.js b/pemFioi/visual-graph-1.0.js
index 791d7eeb3..6a385bc03 100755
--- a/pemFioi/visual-graph-1.0.js
+++ b/pemFioi/visual-graph-1.0.js
@@ -1,512 +1,521 @@
-function VisualGraph(id, paper, graph, graphDrawer, autoDraw, vertexVisualInfo, edgeVisualInfo) {
-   this.id = id;
-   this.paper = paper;
-   this.graph = graph;
-   this.graphDrawer = graphDrawer;
-   this.hasDrawing = false;
-
-   if(vertexVisualInfo) {
-      this.vertexVisualInfo = vertexVisualInfo;
-   }
-   else {
-      this.vertexVisualInfo = {};
-   }
-   if(edgeVisualInfo) {
-      this.edgeVisualInfo = edgeVisualInfo;
-   }
-   else {
-      this.edgeVisualInfo = {};
-   }
-   this.edgeRaphaels = {};
-   this.vertexRaphaels = {};
-   var self = this;
-
-   this.listener = {
-      addVertex: function(id, info) {
-         self._drawVertex(id, info);
-         return true;
-      },
-      addEdge: function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
-         self._drawEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo);
-         return true;
-      },
-      removeVertex: function(id, info) {
-         self._eraseVertex(id, info);
-         delete self.vertexVisualInfo[id];
-         return true;
-      },
-      removeEdge: function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
-         self._eraseEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo);
-         delete self.edgeVisualInfo[id];
-         return true;
-      }
-   };
-   this.priority = 1000;
-
-   this._attachRaphaelID = function(elements, id) {
-      for(var iElement in elements) {
-         elements[iElement].data("id", id);
-      }
-   };
-
-   this._initDrawer = function() {
-      if(!this.hasDrawing && this.graphDrawer.init) {
-         this.graphDrawer.init(this.paper, this.graph, this);
-      }
-      this.hasDrawing = true;
-   };
-
-   this.setAutoDraw = function(autoDraw) {
-      if(autoDraw == this.autoDraw) {
-         return;
-      }
-      this.autoDraw = autoDraw;
-      if(autoDraw) {
-         this.graph.addPostListener(this.id, this.listener, this.priority);
-      }
-      else {
-         this.graph.removePostListener(this.id);
-      }
-   };
-
-   this.redraw = function() {
-      this._removeGraphics();
-      var vertices = this.graph.getAllVertices();
-      for(var iVertex in vertices) {
-         this._drawVertex(vertices[iVertex], this.graph.getVertexInfo(vertices[iVertex]));
-      }
-      var edges = this.graph.getAllEdges();
-      for(var iEdge in edges) {
-         var edgeVertices = this.graph.getEdgeVertices(edges[iEdge]);
-         var vertex1 = edgeVertices[0];
-         var vertex2 = edgeVertices[1];
-         var vertex1Info = this.graph.getVertexInfo(vertex1);
-         var vertex2Info = this.graph.getVertexInfo(vertex2);
-         var edgeInfo = this.graph.getEdgeInfo(edges[iEdge]);
-         this._drawEdge(edges[iEdge], vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo);
-      }
-      if(this.graphDrawer.drawingComplete) {
-         this.graphDrawer.drawingComplete();
-      }
-   };
-
-   this._removeGraphics = function() {
-      if(!this.hasDrawing) {
-         return;
-      }
-      for(var edgeID in this.edgeRaphaels) {
-         this._eraseEdge(edgeID);
-      }
-      for(var vertexID in this.vertexRaphaels) {
-         this._eraseVertex(vertexID);
-      }
-      if(this.graphDrawer.deinit) {
-         this.graphDrawer.deinit();
-      }
-      this.hasDrawing = false;
-   };
-
-   this._drawVertex = function(id, info) {
-      self._initDrawer();
-      if(!self.vertexVisualInfo[id]) {
-         self.vertexVisualInfo[id] = {};
-      }
-      if(self.graphDrawer.drawVertex) {
-         self.vertexRaphaels[id] = self.graphDrawer.drawVertex(id, info, self.vertexVisualInfo[id]);
-         self._attachRaphaelID(self.vertexRaphaels[id], id);
-      }
-      else {
-         self.vertexRaphaels[id] = [];
-      }
-   };
-
-   this._drawEdge = function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
-      self._initDrawer();
-      if(!self.edgeVisualInfo[id]) {
-         self.edgeVisualInfo[id] = {};
-      }
-      if(self.graphDrawer.drawEdge) {
-         self.edgeRaphaels[id] = self.graphDrawer.drawEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, self.vertexVisualInfo[vertex1], self.vertexVisualInfo[vertex2], edgeInfo, self.edgeVisualInfo[id]);
-         self._attachRaphaelID(self.edgeRaphaels[id], id);
-      }
-      else {
-         self.edgeRaphaels[id] = [];
-      }
-   };
-
-   this._eraseVertex = function(id, info) {
-      if(this.graphDrawer.eraseVertex) {
-         this.graphDrawer.eraseVertex(id, info, self.vertexVisualInfo[id]);
-      }
-      for(var iElement in this.vertexRaphaels[id]) {
-         var element = this.vertexRaphaels[id][iElement];
-         if(element && element.remove) {
-            element.remove();
-         }
-      }
-      delete self.vertexRaphaels[id];
-   };
-
-   this._eraseEdge = function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
-      if(this.graphDrawer.eraseEdge) {
-         this.graphDrawer.eraseEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, self.vertexVisualInfo[vertex1], self.vertexVisualInfo[vertex2], edgeInfo, self.edgeVisualInfo[id]);
-      }
-      for(var iElement in this.edgeRaphaels[id]) {
-         var element = this.edgeRaphaels[id][iElement];
-         if(element && element.remove) {
-            element.remove();
-         }
-      }
-      delete self.edgeRaphaels[id];
-   };
-
-   this.remove = function() {
-      this._removeGraphics();
-      this.setAutoDraw(false);
-   };
-
-   this.pushVertexRaphael = function(id, element) {
-      if(!this.vertexRaphaels[id]) {
-         return;
-      }
-      this.vertexRaphaels[id].push(element);
-      element.data("id", id);
-   };
-
-   this.popVertexRaphael = function(id) {
-      if(!this.vertexRaphaels[id] || !this.vertexRaphaels[id].length) {
-         return;
-      }
-      return this.vertexRaphaels[id].pop();
-   };
-
-   this.pushEdgeRaphael = function(id, element) {
-      if(!this.edgeRaphaels[id]) {
-         return;
-      }
-      this.edgeRaphaels[id].push(element);
-      element.data("id", id);
-   };
-
-   this.popEdgeRaphael = function(id) {
-      if(!this.edgeRaphaels[id] || !this.edgeRaphaels[id].length) {
-         return;
-      }
-      return this.edgeRaphaels[id].pop();
-   };
-
-   this.setVertexVisualInfo = function(id, info) {
-      this.vertexVisualInfo[id] = info;
-   };
-
-   this.getVertexVisualInfo = function(id) {
-      return this.vertexVisualInfo[id];
-   };
-
-   this.setEdgeVisualInfo = function(id, info) {
-      this.edgeVisualInfo[id] = info;
-   };
-
-   this.getEdgeVisualInfo = function(id) {
-      return this.edgeVisualInfo[id];
-   };
-
-   this.getRaphaelsFromID = function(id) {
-      if(this.vertexRaphaels[id]) {
-         return this.vertexRaphaels[id];
-      }
-      if(this.edgeRaphaels[id]) {
-         return this.edgeRaphaels[id];
-      }
-      return [];
-   };
-
-   this.elementToFront = function(id) {
-      var raphaels = this.getRaphaelsFromID(id);
-      for(var iElement in raphaels) {
-         raphaels[iElement].toFront();
-      }
-   };
-
-   this.setPaper = function(paper) {
-      this.paper = paper;
-   };
-
-   this.setDrawer = function(graphDrawer) {
-      this.graphDrawer = graphDrawer;
-   };
-
-   this.getGraph = function() {
-      return this.graph;
-   };
-
-   this.toJSON = function() {
-      return JSON.stringify({
-         vertexVisualInfo: this.vertexVisualInfo,
-         edgeVisualInfo: this.edgeVisualInfo,
-         minGraph: this.graph.toMinimized()
-      });
-   };
-
-   this.setAutoDraw(autoDraw);
-   if(autoDraw) {
-      this.redraw();
-   }
-}
-
-VisualGraph.fromJSON = function(visualGraphStr, id, paper, graph, graphDrawer, autoDraw) {
-   var visualInfo = JSON.parse(visualGraphStr);
-   if(!graph) {
-      graph = Graph.fromMinimized(visualInfo.minGraph);
-   }
-   return new VisualGraph(id, paper, graph, graphDrawer, autoDraw, visualInfo.vertexVisualInfo, visualInfo.edgeVisualInfo);
-};
-
-function SimpleGraphDrawer(circleAttr, lineAttr, vertexDrawer, autoMove, vertexMover, thickMode, innerLineAttr) {
-   this.circleAttr = circleAttr;
-   this.lineAttr = lineAttr;
-   this.init = function(paper, graph, visualGraph) {
-      this.paper = paper;
-      this.graph = graph;
-      this.visualGraph = visualGraph;
-      this.customElements = {};
-      this.originalPositions = {};
-   };
-   this.drawVertex = function(id, info, visualInfo) {
-      var pos = this._getVertexPosition(visualInfo);
-      this.originalPositions[id] = pos;
-
-      var result = [this.paper.circle(pos.x, pos.y).attr(this.circleAttr)];
-      if(vertexDrawer) {
-         var raphaels = vertexDrawer(id, info, pos.x, pos.y);
-         this._addCustomElements(id, raphaels);
-         result = result.concat(raphaels);
-      }
-      return result;
-   };
-   this.drawEdge = function(id, vertex1, vertex2, vertex1Info, vertex2Info, vertex1VisualInfo, vertex2VisualInfo, edgeInfo, edgeVisualInfo) {
-      if(thickMode) {
-         var path = this._getThickEdgePath(vertex1, vertex2);
-         return [this.paper.path(path).attr(this.lineAttr).toBack(), this.paper.path(path).attr(innerLineAttr)];
-      }
-      else {
-         return [this.paper.path(this._getEdgePath(vertex1, vertex2)).attr(this.lineAttr).toBack()];
-      }
-   };
-   this._getVertexPosition = function(visualInfo) {
-      if(visualInfo.x === undefined || visualInfo.x === null) {
-         visualInfo.x = 0;
-         visualInfo.y = 0;
-      }
-      return {
-         x: visualInfo.x,
-         y: visualInfo.y
-      };
-   };
-   this.getVertexPosition = function(id) {
-      return this._getVertexPosition(this.visualGraph.getVertexVisualInfo(id));
-   };
-   this._addCustomElements = function(id, raphaels) {
-      // Save original attributes. This allows us to move the object later by transformation.
-      this.customElements[id] = [];
-      for(var iElement in raphaels) {
-         var raphael = raphaels[iElement];
-         this.customElements[id].push({
-            raphael: raphael,
-            originalAttrs: $.extend(true, {}, raphael.attrs)
-         });
-      }
-   };
-   this.moveVertex = function(id, x, y) {
-      var info = this.visualGraph.getVertexVisualInfo(id);
-      info.x = x;
-      info.y = y;
-      var raphaels = this.visualGraph.getRaphaelsFromID(id);
-      raphaels[0].attr({
-         cx: x,
-         cy: y
-      });
-
-      // Move the custom Raphael objects.
-      if(vertexMover) {
-         vertexMover(id, raphaels, x, y);
-      }
-      if(autoMove) {
-         this._moveCustomElements(id, x, y);
-      }
-
-      var childrenIDs = this.graph.getChildren(id);
-      for(var iChild in childrenIDs) {
-         this.refreshEdgePosition(id, childrenIDs[iChild]);
-      }
-      if(this.graph.directed) {
-         var parentIDs = this.graph.getParents(id);
-         for(var iParent in parentIDs) {
-            this.refreshEdgePosition(parentIDs[iParent], id);
-         }
-      }
-   };
-   this._moveCustomElements = function(id, x, y) {
-      var elements = this.customElements[id];
-      var transformation = ["T", x - this.originalPositions[id].x, y - this.originalPositions[id].y];
-      for(var iElement in elements) {
-         var element = elements[iElement];
-         // Paths get transformed using Raphael.transformPath,
-         // for compatibility. Other objects get transformed normally.
-         if(element.raphael.type === "path") {
-            element.raphael.attr({path: Raphael.transformPath(element.originalAttrs.path, transformation)});
-         }
-         else {
-            element.raphael.transform(transformation);
-         }
-      }
-   };
-   this.refreshEdgePosition = function(vertex1, vertex2) {
-      var edges = this.graph.getEdgesFrom(vertex1, vertex2);
-      var info1 = this.visualGraph.getVertexVisualInfo(vertex1);
-      var info2 = this.visualGraph.getVertexVisualInfo(vertex2);
-      var newPath;
-      if(thickMode) {
-         newPath = this._getThickEdgePath(vertex1, vertex2);
-      }
-      else {
-         newPath = this._getEdgePath(vertex1, vertex2);
-      }
-      for(var iEdge in edges) {
-         var edgeID = edges[iEdge];
-         var raphaels = this.visualGraph.getRaphaelsFromID(edgeID);
-         raphaels[0].attr("path", newPath);
-         if(thickMode) {
-            raphaels[1].attr("path", newPath);
-         }
-      }
-   };
-   this._getEdgePath = function(vertex1, vertex2) {
-      var info1 = this.visualGraph.getVertexVisualInfo(vertex1);
-      var info2 = this.visualGraph.getVertexVisualInfo(vertex2);
-      var x1 = info1.x, y1 = info1.y, x2 = info2.x, y2 = info2.y;
-      var r = this.circleAttr.r;
-      /*
-       * We want to draw an edge from the center of one circle toward the center
-       * of another, but only up to its surface. Otherwise the arrow would be
-       * inside the target circle.
-       * The line between centers goes from x1,y1 to x2,y2, and we want to
-       * chop length r from it. We call the denote by w,h the displacement
-       * from x2,y2.
-       */
-
-      // Same X coordinate.
-      if(x1 == x2) {
-         if(y1 < y2) {
-            return ["M", x1, y1, "L", x2, y2 - r];
-         }
-         else {
-            return ["M", x1, y1, "L", x2, y2 + r];
-         }
-      }
-      // Swap for convenience. x1,y1 is always to the left.
-      var swap = false;
-      if(x1 > x2) {
-         swap = true;
-         var temp = x1;
-         x1 = x2;
-         x2 = temp;
-         temp = y1;
-         y1 = y2;
-         y2 = temp;
-      }
-      // We have h^2 + w^2 = r^2 and (y2-y1)/(x2-x1) = h/w.
-      var slope = 1.0 * (y2 - y1) / (x2 - x1);
-      var w = (r / Math.sqrt((1 + slope * slope)));
-      var h = (slope * w);
-      if(!swap) {
-         return ["M", x1, y1, "L", x2 - w, y2 - h];
-      }
-      else {
-         return ["M", x2, y2, "L", x1 + w, y1 + h];
-      }
-   };
-   this._getThickEdgePath = function(vertex1, vertex2) {
-      var info1 = this.visualGraph.getVertexVisualInfo(vertex1);
-      var info2 = this.visualGraph.getVertexVisualInfo(vertex2);
-      var x1 = info1.x, y1 = info1.y, x2 = info2.x, y2 = info2.y;
-      return ["M", x1, y1, "L", x2, y2];
-   };
-   this.setCircleAttr = function(circleAttr) {
-      this.circleAttr = circleAttr;
-   };
-   this.setLineAttr = function(lineAttr) {
-      this.lineAttr = lineAttr;
-   };
-   this.reapplyAttr = function() {
-      var vertices = this.graph.getAllVertices();
-      for(var iVertex in vertices) {
-         this.visualGraph.getRaphaelsFromID(vertices[iVertex])[0].attr(this.circleAttr);
-      }
-      var edges = this.graph.getAllEdges();
-      for(var iEdge in edges) {
-         var raphaels = this.visualGraph.getRaphaelsFromID(edges[iEdge]);
-         raphaels[0].attr(this.lineAttr);
-         if(thickMode) {
-            raphaels[1].attr(innerLineAttr);
-         }
-      }
-   };
-   this.getDistanceFromVertex = function(id, xPos, yPos) {
-      var vertexPos = this.getVertexPosition(id);
-      var xDistance = xPos - vertexPos.x;
-      var yDistance = yPos - vertexPos.y;
-      var distanceFromCenter = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
-      if(distanceFromCenter <= this.circleAttr.r) {
-         return 0;
-      }
-      return distanceFromCenter - this.circleAttr.r;
-   };
-   this.getDistanceFromEdge = function(id, xPos, yPos) {
-      var edgePath = this.visualGraph.getRaphaelsFromID(id)[0].attrs.path;
-      var x1, y1, x2, y2;
-      // In modern browsers the path is an array and we can get the endpoints
-      // directly. In old browsers it may be a comma separated string.
-      if($.isArray(edgePath)) {
-         if($.isArray(edgePath[0])) {
-            // Path a 2D array: [["M", x1, y1], ["L", x2, y2]]
-            x1 = parseInt(edgePath[0][1]);
-            y1 = parseInt(edgePath[0][2]);
-            x2 = parseInt(edgePath[1][1]);
-            y2 = parseInt(edgePath[1][2]);
-         }
-         else {
-            // Path is an array: ["M", x1, y1, "L", x2, y2]
-            x1 = parseInt(edgePath[1]);
-            y1 = parseInt(edgePath[2]);
-            x2 = parseInt(edgePath[4]);
-            y2 = parseInt(edgePath[5]);
-         }
-      }
-      else {
-         // Path is a string: "M,x1,y1,L,x2,y2"
-         var parts = edgePath.split(",");
-         x1 = parseInt(parts[1]);
-         y1 = parseInt(parts[2]);
-         x2 = parseInt(parts[4]);
-         y2 = parseInt(parts[5]);
-      }
-      return Math.sqrt(distanceToSegmentSquared(xPos, yPos, x1, y1, x2, y2));
-   };
-   
-   function distanceSquared(x1, y1, x2, y2) {
-      return (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
-   }
-   
-   function distanceToSegmentSquared(xPos, yPos, x1, y1, x2, y2) {
-      // Use algorithm for distance between point and segment.
-      // See: https://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment/1501725#1501725
-      var lengthSquared = distanceSquared(x1, y1, x2, y2);
-      if(lengthSquared === 0) {
-         return distanceSquared(xPos, yPos, x1, y1);
-      }
-      var t = ((xPos - x1) * (x2 - x1) + (yPos - y1) * (y2 - y1)) / lengthSquared;
-      t = Math.max(0, Math.min(1, t));
-      return distanceSquared(xPos, yPos, x1 + t * (x2 - x1), y1 + t * (y2 - y1));
-   }
-}
+function VisualGraph(id, paper, graph, graphDrawer, autoDraw, vertexVisualInfo, edgeVisualInfo) {
+   this.id = id;
+   this.paper = paper;
+   this.graph = graph;
+   this.graphDrawer = graphDrawer;
+   this.hasDrawing = false;
+
+   if(vertexVisualInfo) {
+      this.vertexVisualInfo = vertexVisualInfo;
+   }
+   else {
+      this.vertexVisualInfo = {};
+   }
+   if(edgeVisualInfo) {
+      this.edgeVisualInfo = edgeVisualInfo;
+   }
+   else {
+      this.edgeVisualInfo = {};
+   }
+   this.edgeRaphaels = {};
+   this.vertexRaphaels = {};
+   var self = this;
+
+   this.listener = {
+      addVertex: function(id, info) {
+         self._drawVertex(id, info);
+         return true;
+      },
+      addEdge: function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
+         self._drawEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo);
+         return true;
+      },
+      removeVertex: function(id, info) {
+         self._eraseVertex(id, info);
+         delete self.vertexVisualInfo[id];
+         return true;
+      },
+      removeEdge: function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
+         self._eraseEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo);
+         delete self.edgeVisualInfo[id];
+         return true;
+      }
+   };
+   this.priority = 1000;
+
+   this._attachRaphaelID = function(elements, id) {
+      for(var iElement in elements) {
+         elements[iElement].data("id", id);
+      }
+   };
+
+   this._initDrawer = function() {
+      if(!this.hasDrawing && this.graphDrawer.init) {
+         this.graphDrawer.init(this.paper, this.graph, this);
+      }
+      this.hasDrawing = true;
+   };
+
+   this.setAutoDraw = function(autoDraw) {
+      if(autoDraw == this.autoDraw) {
+         return;
+      }
+      this.autoDraw = autoDraw;
+      if(autoDraw) {
+         this.graph.addPostListener(this.id, this.listener, this.priority);
+      }
+      else {
+         this.graph.removePostListener(this.id);
+      }
+   };
+
+   this.redraw = function() {
+      this._removeGraphics();
+      var vertices = this.graph.getAllVertices();
+      for(var iVertex in vertices) {
+         this._drawVertex(vertices[iVertex], this.graph.getVertexInfo(vertices[iVertex]));
+      }
+      var edges = this.graph.getAllEdges();
+      for(var iEdge in edges) {
+         var edgeVertices = this.graph.getEdgeVertices(edges[iEdge]);
+         var vertex1 = edgeVertices[0];
+         var vertex2 = edgeVertices[1];
+         var vertex1Info = this.graph.getVertexInfo(vertex1);
+         var vertex2Info = this.graph.getVertexInfo(vertex2);
+         var edgeInfo = this.graph.getEdgeInfo(edges[iEdge]);
+         this._drawEdge(edges[iEdge], vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo);
+      }
+      if(this.graphDrawer.drawingComplete) {
+         this.graphDrawer.drawingComplete();
+      }
+   };
+
+   this._removeGraphics = function() {
+      if(!this.hasDrawing) {
+         return;
+      }
+      for(var edgeID in this.edgeRaphaels) {
+         this._eraseEdge(edgeID);
+      }
+      for(var vertexID in this.vertexRaphaels) {
+         this._eraseVertex(vertexID);
+      }
+      if(this.graphDrawer.deinit) {
+         this.graphDrawer.deinit();
+      }
+      this.hasDrawing = false;
+   };
+
+   this._drawVertex = function(id, info) {
+      self._initDrawer();
+      if(!self.vertexVisualInfo[id]) {
+         self.vertexVisualInfo[id] = {};
+      }
+      if(self.graphDrawer.drawVertex) {
+         self.vertexRaphaels[id] = self.graphDrawer.drawVertex(id, info, self.vertexVisualInfo[id]);
+         self._attachRaphaelID(self.vertexRaphaels[id], id);
+      }
+      else {
+         self.vertexRaphaels[id] = [];
+      }
+   };
+
+   this._drawEdge = function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
+      self._initDrawer();
+      if(!self.edgeVisualInfo[id]) {
+         self.edgeVisualInfo[id] = {};
+      }
+      if(self.graphDrawer.drawEdge) {
+         self.edgeRaphaels[id] = self.graphDrawer.drawEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, self.vertexVisualInfo[vertex1], self.vertexVisualInfo[vertex2], edgeInfo, self.edgeVisualInfo[id]);
+         self._attachRaphaelID(self.edgeRaphaels[id], id);
+      }
+      else {
+         self.edgeRaphaels[id] = [];
+      }
+   };
+
+   this._eraseVertex = function(id, info) {
+      if(this.graphDrawer.eraseVertex) {
+         this.graphDrawer.eraseVertex(id, info, self.vertexVisualInfo[id]);
+      }
+      for(var iElement in this.vertexRaphaels[id]) {
+         var element = this.vertexRaphaels[id][iElement];
+         if(element && element.remove) {
+            element.remove();
+         }
+      }
+      delete self.vertexRaphaels[id];
+   };
+
+   this._eraseEdge = function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
+      if(this.graphDrawer.eraseEdge) {
+         this.graphDrawer.eraseEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, self.vertexVisualInfo[vertex1], self.vertexVisualInfo[vertex2], edgeInfo, self.edgeVisualInfo[id]);
+      }
+      for(var iElement in this.edgeRaphaels[id]) {
+         var element = this.edgeRaphaels[id][iElement];
+         if(element && element.remove) {
+            element.remove();
+         }
+      }
+      delete self.edgeRaphaels[id];
+   };
+
+   this.remove = function() {
+      this._removeGraphics();
+      this.setAutoDraw(false);
+   };
+
+   this.pushVertexRaphael = function(id, element) {
+      if(!this.vertexRaphaels[id]) {
+         return;
+      }
+      this.vertexRaphaels[id].push(element);
+      element.data("id", id);
+   };
+
+   this.popVertexRaphael = function(id) {
+      if(!this.vertexRaphaels[id] || !this.vertexRaphaels[id].length) {
+         return;
+      }
+      return this.vertexRaphaels[id].pop();
+   };
+
+   this.pushEdgeRaphael = function(id, element) {
+      if(!this.edgeRaphaels[id]) {
+         return;
+      }
+      this.edgeRaphaels[id].push(element);
+      element.data("id", id);
+   };
+
+   this.popEdgeRaphael = function(id) {
+      if(!this.edgeRaphaels[id] || !this.edgeRaphaels[id].length) {
+         return;
+      }
+      return this.edgeRaphaels[id].pop();
+   };
+
+   this.setVertexVisualInfo = function(id, info) {
+      this.vertexVisualInfo[id] = info;
+   };
+
+   this.getVertexVisualInfo = function(id) {
+      return this.vertexVisualInfo[id];
+   };
+
+   this.setEdgeVisualInfo = function(id, info) {
+      this.edgeVisualInfo[id] = info;
+   };
+
+   this.getEdgeVisualInfo = function(id) {
+      return this.edgeVisualInfo[id];
+   };
+
+   this.getRaphaelsFromID = function(id) {
+      if(this.vertexRaphaels[id]) {
+         return this.vertexRaphaels[id];
+      }
+      if(this.edgeRaphaels[id]) {
+         return this.edgeRaphaels[id];
+      }
+      return [];
+   };
+
+   this.elementToFront = function(id) {
+      var raphaels = this.getRaphaelsFromID(id);
+      for(var iElement in raphaels) {
+         raphaels[iElement].toFront();
+      }
+   };
+
+   this.setPaper = function(paper) {
+      this.paper = paper;
+   };
+   this.getPaper = function() {
+      return this.paper;
+   };
+
+   this.setDrawer = function(graphDrawer) {
+      this.graphDrawer = graphDrawer;
+   };
+
+   this.getGraph = function() {
+      return this.graph;
+   };
+
+   this.toJSON = function() {
+      return JSON.stringify({
+         vertexVisualInfo: this.vertexVisualInfo,
+         edgeVisualInfo: this.edgeVisualInfo,
+         minGraph: this.graph.toMinimized()
+      });
+   };
+
+   this.setAutoDraw(autoDraw);
+   if(autoDraw) {
+      this.redraw();
+   }
+}
+
+VisualGraph.fromJSON = function(visualGraphStr, id, paper, graph, graphDrawer, autoDraw) {
+   var visualInfo = JSON.parse(visualGraphStr);
+   if(!graph) {
+      graph = Graph.fromMinimized(visualInfo.minGraph);
+   }
+   return new VisualGraph(id, paper, graph, graphDrawer, autoDraw, visualInfo.vertexVisualInfo, visualInfo.edgeVisualInfo);
+};
+
+function SimpleGraphDrawer(circleAttr, lineAttr, vertexDrawer, autoMove, vertexMover, thickMode, innerLineAttr) {
+   this.circleAttr = circleAttr;
+   this.lineAttr = lineAttr;
+   this.init = function(paper, graph, visualGraph) {
+      this.paper = paper;
+      this.graph = graph;
+      this.visualGraph = visualGraph;
+      this.customElements = {};
+      this.originalPositions = {};
+   };
+   this.drawVertex = function(id, info, visualInfo) {
+      var pos = this._getVertexPosition(visualInfo);
+      this.originalPositions[id] = pos;
+
+      var result = [this.paper.circle(pos.x, pos.y).attr(this.circleAttr)];
+      if(vertexDrawer) {
+         var raphaels = vertexDrawer(id, info, pos.x, pos.y);
+         this._addCustomElements(id, raphaels);
+         result = result.concat(raphaels);
+      }
+      return result;
+   };
+   this.setDrawVertex = function(fct) {
+      this.drawVertex = fct;
+   };
+   this.drawEdge = function(id, vertex1, vertex2, vertex1Info, vertex2Info, vertex1VisualInfo, vertex2VisualInfo, edgeInfo, edgeVisualInfo) {
+      if(thickMode) {
+         var path = this._getThickEdgePath(vertex1, vertex2);
+         return [this.paper.path(path).attr(this.lineAttr).toBack(), this.paper.path(path).attr(innerLineAttr)];
+      }
+      else {
+         return [this.paper.path(this._getEdgePath(vertex1, vertex2)).attr(this.lineAttr).toBack()];
+      }
+   };
+   this.setDrawEdge = function(fct) {
+      this.drawEdge = fct;
+   };
+   this._getVertexPosition = function(visualInfo) {
+      if(visualInfo.x === undefined || visualInfo.x === null) {
+         visualInfo.x = 0;
+         visualInfo.y = 0;
+      }
+      return {
+         x: visualInfo.x,
+         y: visualInfo.y
+      };
+   };
+   this.getVertexPosition = function(id) {
+      return this._getVertexPosition(this.visualGraph.getVertexVisualInfo(id));
+   };
+   this._addCustomElements = function(id, raphaels) {
+      // Save original attributes. This allows us to move the object later by transformation.
+      this.customElements[id] = [];
+      for(var iElement in raphaels) {
+         var raphael = raphaels[iElement];
+         this.customElements[id].push({
+            raphael: raphael,
+            originalAttrs: $.extend(true, {}, raphael.attrs)
+         });
+      }
+   };
+   this.moveVertex = function(id, x, y) {
+      var info = this.visualGraph.getVertexVisualInfo(id);
+      info.x = x;
+      info.y = y;
+      var raphaels = this.visualGraph.getRaphaelsFromID(id);
+      raphaels[0].attr({
+         cx: x,
+         cy: y
+      });
+
+      // Move the custom Raphael objects.
+      if(vertexMover) {
+         vertexMover(id, raphaels, x, y);
+      }
+      if(autoMove) {
+         this._moveCustomElements(id, x, y);
+      }
+
+      var childrenIDs = this.graph.getChildren(id);
+      for(var iChild in childrenIDs) {
+         this.refreshEdgePosition(id, childrenIDs[iChild]);
+      }
+      if(this.graph.directed) {
+         var parentIDs = this.graph.getParents(id);
+         for(var iParent in parentIDs) {
+            this.refreshEdgePosition(parentIDs[iParent], id);
+         }
+      }
+   };
+   this._moveCustomElements = function(id, x, y) {
+      var elements = this.customElements[id];
+      var transformation = ["T", x - this.originalPositions[id].x, y - this.originalPositions[id].y];
+      for(var iElement in elements) {
+         var element = elements[iElement];
+         // Paths get transformed using Raphael.transformPath,
+         // for compatibility. Other objects get transformed normally.
+         if(element.raphael.type === "path") {
+            element.raphael.attr({path: Raphael.transformPath(element.originalAttrs.path, transformation)});
+         }
+         else {
+            element.raphael.transform(transformation);
+         }
+      }
+   };
+   this.refreshEdgePosition = function(vertex1, vertex2) {
+      var edges = this.graph.getEdgesFrom(vertex1, vertex2);
+      var info1 = this.visualGraph.getVertexVisualInfo(vertex1);
+      var info2 = this.visualGraph.getVertexVisualInfo(vertex2);
+      var newPath;
+      if(thickMode) {
+         newPath = this._getThickEdgePath(vertex1, vertex2);
+      }
+      else {
+         newPath = this._getEdgePath(vertex1, vertex2);
+      }
+      for(var iEdge in edges) {
+         var edgeID = edges[iEdge];
+         var raphaels = this.visualGraph.getRaphaelsFromID(edgeID);
+         raphaels[0].attr("path", newPath);
+         if(thickMode) {
+            raphaels[1].attr("path", newPath);
+         }
+      }
+   };
+   this._getEdgePath = function(vertex1, vertex2) {
+      var info1 = this.visualGraph.getVertexVisualInfo(vertex1);
+      var info2 = this.visualGraph.getVertexVisualInfo(vertex2);
+      var x1 = info1.x, y1 = info1.y, x2 = info2.x, y2 = info2.y;
+      var r = this.circleAttr.r;
+      /*
+       * We want to draw an edge from the center of one circle toward the center
+       * of another, but only up to its surface. Otherwise the arrow would be
+       * inside the target circle.
+       * The line between centers goes from x1,y1 to x2,y2, and we want to
+       * chop length r from it. We call the denote by w,h the displacement
+       * from x2,y2.
+       */
+
+      // Same X coordinate.
+      if(x1 == x2) {
+         if(y1 < y2) {
+            return ["M", x1, y1, "L", x2, y2 - r];
+         }
+         else {
+            return ["M", x1, y1, "L", x2, y2 + r];
+         }
+      }
+      // Swap for convenience. x1,y1 is always to the left.
+      var swap = false;
+      if(x1 > x2) {
+         swap = true;
+         var temp = x1;
+         x1 = x2;
+         x2 = temp;
+         temp = y1;
+         y1 = y2;
+         y2 = temp;
+      }
+      // We have h^2 + w^2 = r^2 and (y2-y1)/(x2-x1) = h/w.
+      var slope = 1.0 * (y2 - y1) / (x2 - x1);
+      var w = (r / Math.sqrt((1 + slope * slope)));
+      var h = (slope * w);
+      if(!swap) {
+         return ["M", x1, y1, "L", x2 - w, y2 - h];
+      }
+      else {
+         return ["M", x2, y2, "L", x1 + w, y1 + h];
+      }
+   };
+   this._getThickEdgePath = function(vertex1, vertex2) {
+      var info1 = this.visualGraph.getVertexVisualInfo(vertex1);
+      var info2 = this.visualGraph.getVertexVisualInfo(vertex2);
+      var x1 = info1.x, y1 = info1.y, x2 = info2.x, y2 = info2.y;
+      return ["M", x1, y1, "L", x2, y2];
+   };
+   this.setCircleAttr = function(circleAttr) {
+      this.circleAttr = circleAttr;
+   };
+   this.setLineAttr = function(lineAttr) {
+      this.lineAttr = lineAttr;
+   };
+   this.reapplyAttr = function() {
+      var vertices = this.graph.getAllVertices();
+      for(var iVertex in vertices) {
+         this.visualGraph.getRaphaelsFromID(vertices[iVertex])[0].attr(this.circleAttr);
+      }
+      var edges = this.graph.getAllEdges();
+      for(var iEdge in edges) {
+         var raphaels = this.visualGraph.getRaphaelsFromID(edges[iEdge]);
+         raphaels[0].attr(this.lineAttr);
+         if(thickMode) {
+            raphaels[1].attr(innerLineAttr);
+         }
+      }
+   };
+   this.getDistanceFromVertex = function(id, xPos, yPos) {
+      var vertexPos = this.getVertexPosition(id);
+      var xDistance = xPos - vertexPos.x;
+      var yDistance = yPos - vertexPos.y;
+      var distanceFromCenter = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
+      if(distanceFromCenter <= this.circleAttr.r) {
+         return 0;
+      }
+      return distanceFromCenter - this.circleAttr.r;
+   };
+   this.getDistanceFromEdge = function(id, xPos, yPos) {
+      var edgePath = this.visualGraph.getRaphaelsFromID(id)[0].attrs.path;
+      var x1, y1, x2, y2;
+      // In modern browsers the path is an array and we can get the endpoints
+      // directly. In old browsers it may be a comma separated string.
+      if($.isArray(edgePath)) {
+         if($.isArray(edgePath[0])) {
+            // Path a 2D array: [["M", x1, y1], ["L", x2, y2]]
+            x1 = parseInt(edgePath[0][1]);
+            y1 = parseInt(edgePath[0][2]);
+            x2 = parseInt(edgePath[1][1]);
+            y2 = parseInt(edgePath[1][2]);
+         }
+         else {
+            // Path is an array: ["M", x1, y1, "L", x2, y2]
+            x1 = parseInt(edgePath[1]);
+            y1 = parseInt(edgePath[2]);
+            x2 = parseInt(edgePath[4]);
+            y2 = parseInt(edgePath[5]);
+         }
+      }
+      else {
+         // Path is a string: "M,x1,y1,L,x2,y2"
+         var parts = edgePath.split(",");
+         x1 = parseInt(parts[1]);
+         y1 = parseInt(parts[2]);
+         x2 = parseInt(parts[4]);
+         y2 = parseInt(parts[5]);
+      }
+      return Math.sqrt(distanceToSegmentSquared(xPos, yPos, x1, y1, x2, y2));
+   };
+
+   function distanceSquared(x1, y1, x2, y2) {
+      return (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
+   }
+
+   function distanceToSegmentSquared(xPos, yPos, x1, y1, x2, y2) {
+      // Use algorithm for distance between point and segment.
+      // See: https://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment/1501725#1501725
+      var lengthSquared = distanceSquared(x1, y1, x2, y2);
+      if(lengthSquared === 0) {
+         return distanceSquared(xPos, yPos, x1, y1);
+      }
+      var t = ((xPos - x1) * (x2 - x1) + (yPos - y1) * (y2 - y1)) / lengthSquared;
+      t = Math.max(0, Math.min(1, t));
+      return distanceSquared(xPos, yPos, x1 + t * (x2 - x1), y1 + t * (y2 - y1));
+   }
+}
diff --git a/pemFioi/visual-graph-1.1.js b/pemFioi/visual-graph-1.1.js
new file mode 100644
index 000000000..8912f1bfc
--- /dev/null
+++ b/pemFioi/visual-graph-1.1.js
@@ -0,0 +1,1225 @@
+function VisualGraph(id, paper, graph, graphDrawer, autoDraw, vertexVisualInfo, edgeVisualInfo) {
+   this.id = id;
+   this.paper = paper;
+   this.graph = graph;
+   this.graphDrawer = graphDrawer;
+   this.hasDrawing = false;
+
+   if(vertexVisualInfo) {
+      this.vertexVisualInfo = vertexVisualInfo;
+   }
+   else {
+      this.vertexVisualInfo = {};
+   }
+   if(edgeVisualInfo) {
+      this.edgeVisualInfo = edgeVisualInfo;
+   }
+   else {
+      this.edgeVisualInfo = {};
+   }
+   this.edgeRaphaels = {};
+   this.vertexRaphaels = {};
+   var self = this;
+
+   this.listener = {
+      addVertex: function(id, info) {
+         self._drawVertex(id, info);
+         return true;
+      },
+      addEdge: function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
+         self._drawEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo);
+         return true;
+      },
+      removeVertex: function(id, info) {
+         self._eraseVertex(id, info);
+         delete self.vertexVisualInfo[id];
+         return true;
+      },
+      removeEdge: function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
+         self._eraseEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo);
+         delete self.edgeVisualInfo[id];
+         return true;
+      }
+   };
+   this.priority = 1000;
+
+   this._attachRaphaelID = function(elements, id) {
+      for(var iElement in elements) {
+         elements[iElement].data("id", id);
+      }
+   };
+
+   this._initDrawer = function() {
+      if(!this.hasDrawing && this.graphDrawer.init) {
+         this.graphDrawer.init(this.paper, this.graph, this);
+      }
+      this.hasDrawing = true;
+   };
+
+   this.setAutoDraw = function(autoDraw) {
+      if(autoDraw == this.autoDraw) {
+         return;
+      }
+      this.autoDraw = autoDraw;
+      if(autoDraw) {
+         this.graph.addPostListener(this.id, this.listener, this.priority);
+      }
+      else {
+         this.graph.removePostListener(this.id);
+      }
+   };
+
+   this.redraw = function() {
+      this._removeGraphics();
+      var vertices = this.graph.getAllVertices();
+      for(var iVertex in vertices) {
+         this._drawVertex(vertices[iVertex], this.graph.getVertexInfo(vertices[iVertex]));
+      }
+      var edges = this.graph.getAllEdges();
+      for(var iEdge in edges) {
+         var edgeVertices = this.graph.getEdgeVertices(edges[iEdge]);
+         var vertex1 = edgeVertices[0];
+         var vertex2 = edgeVertices[1];
+         var vertex1Info = this.graph.getVertexInfo(vertex1);
+         var vertex2Info = this.graph.getVertexInfo(vertex2);
+         var edgeInfo = this.graph.getEdgeInfo(edges[iEdge]);
+         this._drawEdge(edges[iEdge], vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo);
+      }
+      if(this.graphDrawer.drawingComplete) {
+         this.graphDrawer.drawingComplete();
+      }
+   };
+
+   this._removeGraphics = function() {
+      if(!this.hasDrawing) {
+         return;
+      }
+      for(var edgeID in this.edgeRaphaels) {
+         this._eraseEdge(edgeID);
+      }
+      for(var vertexID in this.vertexRaphaels) {
+         this._eraseVertex(vertexID);
+      }
+      if(this.graphDrawer.deinit) {
+         this.graphDrawer.deinit();
+      }
+      this.hasDrawing = false;
+   };
+
+   this._drawVertex = function(id, info) {
+      self._initDrawer();
+      if(!self.vertexVisualInfo[id]) {
+         self.vertexVisualInfo[id] = {};
+      }
+      if(self.graphDrawer.drawVertex) {
+         self.vertexRaphaels[id] = self.graphDrawer.drawVertex(id, info, self.vertexVisualInfo[id]);
+         self._attachRaphaelID(self.vertexRaphaels[id], id);
+      }
+      else {
+         self.vertexRaphaels[id] = [];
+      }
+   };
+
+   this._drawEdge = function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
+      self._initDrawer();
+      if(!self.edgeVisualInfo[id]) {
+         self.edgeVisualInfo[id] = {};
+      }
+      if(self.graphDrawer.drawEdge) {
+         self.edgeRaphaels[id] = self.graphDrawer.drawEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, self.vertexVisualInfo[vertex1], self.vertexVisualInfo[vertex2], edgeInfo, self.edgeVisualInfo[id]);
+         self._attachRaphaelID(self.edgeRaphaels[id], id);
+      }
+      else {
+         self.edgeRaphaels[id] = [];
+      }
+   };
+
+   this._eraseVertex = function(id, info) {
+      if(this.graphDrawer.eraseVertex) {
+         this.graphDrawer.eraseVertex(id, info, self.vertexVisualInfo[id]);
+      }
+      for(var iElement in this.vertexRaphaels[id]) {
+         var element = this.vertexRaphaels[id][iElement];
+         if(element && element.remove) {
+            element.remove();
+         }
+      }
+      delete self.vertexRaphaels[id];
+   };
+
+   this._eraseEdge = function(id, vertex1, vertex2, vertex1Info, vertex2Info, edgeInfo) {
+      if(this.graphDrawer.eraseEdge) {
+         this.graphDrawer.eraseEdge(id, vertex1, vertex2, vertex1Info, vertex2Info, self.vertexVisualInfo[vertex1], self.vertexVisualInfo[vertex2], edgeInfo, self.edgeVisualInfo[id]);
+      }
+      for(var iElement in this.edgeRaphaels[id]) {
+         var element = this.edgeRaphaels[id][iElement];
+         if(element && element.remove) {
+            element.remove();
+         }
+      }
+      delete self.edgeRaphaels[id];
+   };
+
+   this.remove = function() {
+      this._removeGraphics();
+      this.setAutoDraw(false);
+   };
+
+   this.pushVertexRaphael = function(id, element) {
+      if(!this.vertexRaphaels[id]) {
+         return;
+      }
+      this.vertexRaphaels[id].push(element);
+      element.data("id", id);
+   };
+
+   this.popVertexRaphael = function(id) {
+      if(!this.vertexRaphaels[id] || !this.vertexRaphaels[id].length) {
+         return;
+      }
+      return this.vertexRaphaels[id].pop();
+   };
+
+   this.pushEdgeRaphael = function(id, element) {
+      if(!this.edgeRaphaels[id]) {
+         return;
+      }
+      this.edgeRaphaels[id].push(element);
+      element.data("id", id);
+   };
+
+   this.popEdgeRaphael = function(id) {
+      if(!this.edgeRaphaels[id] || !this.edgeRaphaels[id].length) {
+         return;
+      }
+      return this.edgeRaphaels[id].pop();
+   };
+
+   this.setVertexVisualInfo = function(id, info) {
+      this.vertexVisualInfo[id] = info;
+   };
+
+   this.getVertexVisualInfo = function(id) {
+      return this.vertexVisualInfo[id];
+   };
+
+   this.setEdgeVisualInfo = function(id, info) {
+      this.edgeVisualInfo[id] = info;
+   };
+
+   this.getEdgeVisualInfo = function(id) {
+      return this.edgeVisualInfo[id];
+   };
+
+   this.getRaphaelsFromID = function(id) {
+      if(this.vertexRaphaels[id]) {
+         return this.vertexRaphaels[id];
+      }
+      if(this.edgeRaphaels[id]) {
+         return this.edgeRaphaels[id];
+      }
+      return [];
+   };
+
+   this.elementToFront = function(id) {
+      var raphaels = this.getRaphaelsFromID(id);
+      for(var iElement in raphaels) {
+         raphaels[iElement].toFront();
+      }
+   };
+
+   this.setPaper = function(paper) {
+      this.paper = paper;
+   };
+   this.getPaper = function() {
+      return this.paper;
+   };
+
+   this.setDrawer = function(graphDrawer) {
+      this.graphDrawer = graphDrawer;
+   };
+
+   this.getGraph = function() {
+      return this.graph;
+   };
+
+   this.toJSON = function() {
+      return JSON.stringify({
+         vertexVisualInfo: this.vertexVisualInfo,
+         edgeVisualInfo: this.edgeVisualInfo,
+         minGraph: this.graph.toMinimized()
+      });
+   };
+
+   this.setAutoDraw(autoDraw);
+   if(autoDraw) {
+      this.redraw();
+   }
+}
+
+VisualGraph.fromJSON = function(visualGraphStr, id, paper, graph, graphDrawer, autoDraw) {
+   var visualInfo = JSON.parse(visualGraphStr);
+   if(!graph) {
+      graph = Graph.fromMinimized(visualInfo.minGraph);
+   }
+   return new VisualGraph(id, paper, graph, graphDrawer, autoDraw, visualInfo.vertexVisualInfo, visualInfo.edgeVisualInfo);
+};
+
+function SimpleGraphDrawer(circleAttr, lineAttr, vertexDrawer, autoMove, vertexMover, thickMode, innerLineAttr) {
+   this.circleAttr = circleAttr;
+   this.rectAttr = circleAttr;
+   this.boxLineAttr = circleAttr;
+   this.minBoxW = 2*circleAttr.r + 50;
+   this.lineAttr = lineAttr;
+   this.edgeLabelAttr;
+   this.vertexLabelAttr = {
+      "font-size": 15,
+      "font-family": "sans-serif"
+   };
+   this.vertexContentAttr = {
+      "font-size": 15,
+      "font-family": "sans-serif"
+   };
+   this.edgeLabelAttr = {
+      "font-size": 15,
+      "font-family": "sans-serif"
+   };
+   this.edgeClickAreaAttr = {
+      "stroke-width": 20,
+      "stroke": "red",
+      "opacity": 0
+   };
+   this.init = function(paper, graph, visualGraph) {
+      this.paper = paper;
+      this.graph = graph;
+      this.visualGraph = visualGraph;
+      this.customElements = {};
+      this.originalPositions = {};
+   };
+   this.setDrawVertex = function(fct) {
+      this.drawVertex = fct;
+   };
+   this.setDrawEdge = function(fct) {
+      this.drawEdge = fct;
+   };
+   this.setEdgeLabelAttr = function(attr) {
+      this.edgeLabelAttr = attr;
+   };
+   this.setCircleAttr = function(circleAttr) {
+      this.circleAttr = circleAttr;
+   };
+   this.setRectAttr = function(rectAttr) {
+      this.rectAttr = rectAttr;
+   };
+   this.setBoxLineAttr = function(boxLineAttr) {
+      this.boxLineAttr = boxLineAttr;
+   };
+   this.setMinBoxW = function(w) {
+      this.minBoxW = w;
+   };
+   this.setLineAttr = function(lineAttr) {
+      this.lineAttr = lineAttr;
+   };
+   this.setVertexLabelAttr = function(attr) {
+      this.vertexLabelAttr = attr;
+   };
+   this.setVertexContentAttr = function(attr) {
+      this.vertexContentAttr = attr;
+   };
+   this.setEdgeClickAreaAttr = function(attr) {
+      this.edgeClickAreaAttr = attr;
+   };
+   this.drawVertex = function(id, info, visualInfo) {
+      var pos = this._getVertexPosition(visualInfo);
+      this.originalPositions[id] = pos;
+      var label = (info.label) ? info.label : "";
+
+      if(!visualInfo.tableMode){
+         var node = this.paper.circle(pos.x, pos.y).attr(this.circleAttr);
+         var labelRaph = this.paper.text(pos.x,pos.y,label).attr(this.vertexLabelAttr);
+         if(info.terminal && !info.initial){
+            var terminalCircle = this.paper.circle(pos.x, pos.y).attr("r",this.circleAttr.r + 5);
+            var result = [node,labelRaph,terminalCircle];
+            this._addCustomElements(id, [labelRaph,terminalCircle]);
+         }else if(info.initial && !info.terminal){
+            var initialArrow = this.paper.path("M" + (pos.x - 3*this.circleAttr.r) + "," + pos.y + "H" + (pos.x - this.circleAttr.r)).attr(this.lineAttr);
+            initialArrow.attr("stroke-width",this.lineAttr["stroke-width"]+1);
+            var result = [node,labelRaph,initialArrow];
+            this._addCustomElements(id, [labelRaph,initialArrow]);
+         }else if(info.initial && info.terminal){
+            var terminalCircle = this.paper.circle(pos.x, pos.y).attr("r",this.circleAttr.r + 5);
+            var initialArrow = this.paper.path("M" + (pos.x - 3*this.circleAttr.r) + "," + pos.y + "H" + (pos.x - this.circleAttr.r)).attr(this.lineAttr);
+            initialArrow.attr("stroke-width",this.lineAttr["stroke-width"]+1);
+            var result = [node,labelRaph,initialArrow,terminalCircle];
+            this._addCustomElements(id, [labelRaph,initialArrow,terminalCircle]);
+         }else{
+            var result = [node,labelRaph];
+            this._addCustomElements(id, [labelRaph]);
+         }
+      }else{
+         /* table mode */
+         var content = (info.content) ? info.content : "";
+         var boxSize = this.getBoxSize(content,visualInfo.wCorr);
+         var w = boxSize.w;
+         var h = boxSize.h;
+         var x = pos.x - w/2;
+         var y = pos.y - h/2;
+         var labelHeight = 2*this.vertexLabelAttr["font-size"];
+         var node = this.paper.rect(x,y,w,h).attr(this.rectAttr);
+         var labelRaph = this.paper.text(pos.x, y + labelHeight/2, label).attr(this.vertexLabelAttr);
+         var line = this.paper.path("M"+x+","+(y + labelHeight)+"H"+(x + w)).attr(this.boxLineAttr);
+         var textAlign = this.vertexContentAttr["text-anchor"] || "middle";
+         switch(textAlign){
+            case "middle":
+               var contentX = pos.x;
+               break;
+            case "start":
+               var contentX = pos.x - boxSize.w/2 + 10;
+               break;
+            case "end":
+               var contentX = pos.x + boxSize.w/2 - 10;
+               break;
+         }
+         var content = this.paper.text(contentX, y + labelHeight + (h - labelHeight)/2,content).attr(this.vertexContentAttr);
+         if(info.initial && !info.terminal){
+            var initialArrow = this.paper.path("M" + (x - 2*this.circleAttr.r) + "," + pos.y + "H" + x).attr(this.lineAttr);
+            initialArrow.attr("stroke-width",this.lineAttr["stroke-width"]+1);
+            var result = [node,labelRaph,line,content,initialArrow];
+         }else if(!info.initial && info.terminal){
+            var terminalFrame = this.paper.rect(x - 5, y - 5, w + 10, h + 10, this.circleAttr.r + 5);
+            var result = [node,labelRaph,line,content,terminalFrame];
+         }else if(info.initial && info.terminal){
+            var terminalFrame = this.paper.rect(x - 5, y - 5, w + 10, h + 10, this.circleAttr.r + 5);
+            var initialArrow = this.paper.path("M" + (x - 2*this.circleAttr.r) + "," + pos.y + "H" + x).attr(this.lineAttr);
+            initialArrow.attr("stroke-width",this.lineAttr["stroke-width"]+1);
+            var result = [node,labelRaph,line,content,initialArrow,terminalFrame];
+         }else{
+            var result = [node,labelRaph,line,content];
+         }
+         this._addCustomElements(id, result);
+      }
+      if(vertexDrawer) {
+         var raphaels = vertexDrawer(id, info, pos.x, pos.y);
+         this._addCustomElements(id, raphaels);
+         result = result.concat(raphaels);
+      }
+      return result;
+   };
+   this.getBoxSize = function(content,wCorrection) {
+      var wCorr = wCorrection || 0;
+      var margin = 10;
+      var labelHeight = 2*this.vertexLabelAttr["font-size"];
+      // var textSize = this.getTextSize(content);
+      var tempText = this.paper.text(0,0,content).attr(this.vertexContentAttr);
+      var textBBox = tempText.getBBox();
+      tempText.remove();
+      var minW = this.minBoxW;
+      var minH = labelHeight + (2*this.vertexLabelAttr["font-size"]);
+      // var w = Math.max(0.7*textSize.nbCol * this.vertexContentAttr["font-size"], minW);
+      var w = Math.max(textBBox.width + 2*margin,minW);
+      // var h = Math.max(labelHeight + (1 + textSize.nbLines) * this.vertexContentAttr["font-size"] + 2*margin, minH);
+      var h = Math.max(textBBox.height + labelHeight + 2*margin, minH);
+      return { w: w + wCorr, h: h };
+   };
+
+   this.updateVertex = function(id) {
+      var info = this.graph.getVertexInfo(id);
+      var visualInfo = this.visualGraph.getVertexVisualInfo(id);
+      this.visualGraph._eraseVertex(id);
+      this.drawVertex(id,info,visualInfo);
+   };
+   
+   this.drawEdge = function(id, vertex1, vertex2) {
+      if(thickMode) {
+         var path = this._getThickEdgePath(vertex1, vertex2);
+         return [this.paper.path(path).attr(this.lineAttr).toBack(), this.paper.path(path).attr(innerLineAttr)];
+      }
+      else {
+         var clickArea = this.paper.path(this._getEdgePath(id)).attr(this.edgeClickAreaAttr).toBack();
+         var path = this.paper.path(this._getEdgePath(id)).attr(this.lineAttr).toBack();
+         var info = this.graph.getEdgeInfo(id);
+         var labelText = info.label || "";
+         var labelPos = this.getLabelPos(id, vertex1, vertex2);
+         var label = this.paper.text(labelPos.x,labelPos.y,labelText).attr(this.edgeLabelAttr);
+         return [path,label,clickArea];  
+      }
+   };
+   
+   this._getVertexPosition = function(visualInfo) {
+      if(typeof visualInfo == "undefined"){  // IE8
+         return { x: 0, y: 0}
+      }
+      if(visualInfo.x === undefined || visualInfo.x === null) {
+         visualInfo.x = 0;
+         visualInfo.y = 0;
+      }
+      return {
+         x: visualInfo.x,
+         y: visualInfo.y
+      };
+   };
+   this.getVertexPosition = function(id) {
+      return this._getVertexPosition(this.visualGraph.getVertexVisualInfo(id));
+   };
+   this._addCustomElements = function(id, raphaels) {
+      // Save original attributes. This allows us to move the object later by transformation.
+      this.customElements[id] = [];
+      for(var iElement in raphaels) {
+         var raphael = raphaels[iElement];
+         this.customElements[id].push({
+            raphael: raphael,
+            originalAttrs: $.extend(true, {}, raphael.attrs)
+         });
+      }
+   };
+   this.moveVertex = function(id, x, y) {
+      var info = this.visualGraph.getVertexVisualInfo(id);
+      info.x = x;
+      info.y = y;
+      var raphaels = this.visualGraph.getRaphaelsFromID(id);
+      raphaels[0].attr({
+         cx: x,
+         cy: y
+      });
+      // Move the custom Raphael objects.
+      if(vertexMover) {
+         vertexMover(id, raphaels, x, y);
+      }
+      if(autoMove) {
+         this._moveCustomElements(id, x, y);
+      }
+
+      var childrenIDs = this.graph.getChildren(id);
+      for(var iChild in childrenIDs) {
+         this.refreshEdgePosition(id, childrenIDs[iChild]);
+      }
+      if(this.graph.directed) {
+         var parentIDs = this.graph.getParents(id);
+         for(var iParent in parentIDs) {
+            this.refreshEdgePosition(parentIDs[iParent], id);
+         }
+      }
+   };
+   this._moveCustomElements = function(id, x, y) {
+      var elements = this.customElements[id];
+      var transformation = ["T", x - this.originalPositions[id].x, y - this.originalPositions[id].y];
+      for(var iElement in elements) {
+         var element = elements[iElement];
+         // Paths get transformed using Raphael.transformPath,
+         // for compatibility. Other objects get transformed normally.
+         if(element.raphael.type === "path") {
+            element.raphael.attr({path: Raphael.transformPath(element.originalAttrs.path, transformation)});
+         }
+         else {
+            element.raphael.transform(transformation);
+         }
+      }
+   };
+   this.refreshEdgePosition = function(vertex1, vertex2) {
+      var edges = this.graph.getEdgesFrom(vertex1, vertex2);
+
+      var info1 = this.visualGraph.getVertexVisualInfo(vertex1);
+      var info2 = this.visualGraph.getVertexVisualInfo(vertex2);
+      var newPath;
+
+      for(var iEdge in edges) {
+         var edgeID = edges[iEdge];
+         var raphaels = this.visualGraph.getRaphaelsFromID(edgeID);
+         if(thickMode) {
+            newPath = this._getThickEdgePath(vertex1, vertex2);
+         }
+         else {
+            newPath = this._getEdgePath(edgeID);
+         }
+         raphaels[0].attr("path", newPath);  // edge
+         raphaels[2].attr("path", newPath);  // click area
+         var info = this.graph.getEdgeInfo(edgeID);
+         var labelText = info.label || "";
+         var labelPos = this.getLabelPos(edgeID, vertex1, vertex2);
+         raphaels[1].attr({x:labelPos.x,y:labelPos.y,text:labelText});
+         if(thickMode) {
+            raphaels[1].attr("path", newPath);
+         }
+      }
+   };
+   this._getEdgePath = function(edgeID) {
+      var edgeVisualInfo = this.visualGraph.getEdgeVisualInfo(edgeID);
+      var vertices = this.graph.getEdgeVertices(edgeID);
+      var vertex1 = vertices[0];
+      var vertex2 = vertices[1];
+      if(edgeVisualInfo["radius-ratio"] || vertex1 === vertex2){
+         return  this._getCurvedEdgePath(vertex1,vertex2,edgeID);
+      }
+      var vInfo1 = this.visualGraph.getVertexVisualInfo(vertex1);
+      var vInfo2 = this.visualGraph.getVertexVisualInfo(vertex2);
+      var x1 = vInfo1.x, y1 = vInfo1.y, x2 = vInfo2.x, y2 = vInfo2.y;
+      var r = this.circleAttr.r;
+
+      if(!vInfo2.tableMode){
+         /*
+          * We want to draw an edge from the center of one circle toward the center
+          * of another, but only up to its surface. Otherwise the arrow would be
+          * inside the target circle.
+          * The line between centers goes from x1,y1 to x2,y2, and we want to
+          * chop length r from it. We call the denote by w,h the displacement
+          * from x2,y2.
+          */
+
+         // Same X coordinate.
+         if(x1 == x2) {
+            if(y1 < y2) {
+               return ["M", x1, y1, "L", x2, y2 - r];
+            }
+            else {
+               return ["M", x1, y1, "L", x2, y2 + r];
+            }
+         }
+         // Swap for convenience. x1,y1 is always to the left.
+         var swap = false;
+         if(x1 > x2) {
+            swap = true;
+            var temp = x1;
+            x1 = x2;
+            x2 = temp;
+            temp = y1;
+            y1 = y2;
+            y2 = temp;
+         }
+         // We have h^2 + w^2 = r^2 and (y2-y1)/(x2-x1) = h/w.
+         var slope = 1.0 * (y2 - y1) / (x2 - x1);
+         var w = (r / Math.sqrt((1 + slope * slope)));
+         var h = (slope * w);
+         if(!swap) {
+            return ["M", x1, y1, "L", x2 - w, y2 - h];
+         }
+         else {
+            return ["M", x2, y2, "L", x1 + w, y1 + h];
+         }
+      }else{
+         var info = this.graph.getVertexInfo(vertex2);
+         var content = (info.content) ? info.content : "";
+         var boxSize = this.getBoxSize(content,vInfo2.wCorr);
+         var alpha = this.getAngleBetween(x1,y1,x2,y2);
+         var pos2 = this.getSurfacePointFromAngle(x2,y2,boxSize.w,boxSize.h,alpha);
+
+         return ["M", x1, y1, "L", pos2.x, pos2.y];
+      }
+   };
+   this._getThickEdgePath = function(vertex1, vertex2) {
+      var info1 = this.visualGraph.getVertexVisualInfo(vertex1);
+      var info2 = this.visualGraph.getVertexVisualInfo(vertex2);
+      var x1 = info1.x, y1 = info1.y, x2 = info2.x, y2 = info2.y;
+      return ["M", x1, y1, "L", x2, y2];
+   };
+   
+   this._getCurvedEdgePath = function(vertex1,vertex2,edgeID) {
+      var vInfo1 = this.visualGraph.getVertexVisualInfo(vertex1);
+      var vInfo2 = this.visualGraph.getVertexVisualInfo(vertex2);
+      var edgeVisualInfo = this.visualGraph.getEdgeVisualInfo(edgeID);
+      var x1 = vInfo1.x, y1 = vInfo1.y, x2 = vInfo2.x, y2 = vInfo2.y;
+      var r = this.circleAttr.r;
+      var D = Math.sqrt(Math.pow((x2-x1),2) + Math.pow((y2-y1),2));  // distance between vertex1 and vertex2
+      var R = D*edgeVisualInfo["radius-ratio"];   // arc radius, between D/2 and +inf (almost straight line at D*50). 
+      var s = edgeVisualInfo.sweep || 0;  // sweep flag
+      var l = edgeVisualInfo["large-arc"] || 0;  // large arc flag  
+
+      /* Calculation of the coordinates of the target point at the surface of the target vertex */
+      var angle = (l) ? (Math.asin(D/(2*R)) + Math.PI) : Math.asin(D/(2*R));
+      if(!vInfo2.tableMode){
+         if(y1 !== y2 && x1 !== x2){
+            var A = (x2 - x1)/(y1 - y2);
+            var B = (x1*x1 + y1*y1 + r*r - x2*x2 - y2*y2 - Math.pow((r*Math.sin(angle)),2) - Math.pow((D - r*Math.cos(angle)),2))/(2*(y1 - y2));
+            var a = 1 + A*A;
+            var b = 2*(A*B - A*y2 - x2);
+            var c = x2*x2 + y2*y2 + B*B - 2*y2*B - r*r;
+            var delta = b*b - 4*a*c;
+            if(y1 > y2){
+               var x3 = (s) ? (-b - Math.sqrt(delta))/(2*a) : (-b + Math.sqrt(delta))/(2*a);
+            }else{
+               var x3 = (s) ? (-b + Math.sqrt(delta))/(2*a) : (-b - Math.sqrt(delta))/(2*a);
+            }
+            
+            var y3 = A*x3 + B;
+         }else if(vertex1 === vertex2){
+            angle = edgeVisualInfo.angle || 0;
+            R = (edgeVisualInfo["radius-ratio"]) ? edgeVisualInfo["radius-ratio"]*r : 1.5*r;
+            x1 = x2 + r*Math.sin(Math.PI*angle/180);
+            y1 = y2 + r*Math.cos(Math.PI*angle/180);
+            var x3 = x2 - r*Math.sin(Math.PI*angle/180);
+            var y3 = y2 - r*Math.cos(Math.PI*angle/180);
+            l = 1;
+            edgeVisualInfo.angle = angle;
+            edgeVisualInfo["radius-ratio"] = R/r;
+         }else if(y1 === y2){
+            var x3 = (x1*x1 + r*r - x2*x2 - Math.pow((r*Math.sin(angle)),2) - Math.pow((D - r*Math.cos(angle)),2))/(2*(x1-x2));
+            var a = 1;
+            var b = -2*y2;
+            var c = Math.pow((x3 - x2),2) + y2*y2 - r*r;
+            var delta = b*b - 4*a*c;
+            if(x1 < x2){
+               var y3 = (s) ? (-b - Math.sqrt(delta))/(2*a) : (-b + Math.sqrt(delta))/(2*a);
+            }else{
+               var y3 = (s) ? (-b + Math.sqrt(delta))/(2*a) : (-b - Math.sqrt(delta))/(2*a)
+            }
+
+         }else if(x1 === x2){
+            var y3 = (y1*y1 + r*r - y2*y2 - Math.pow((r*Math.sin(angle)),2) - Math.pow((D - r*Math.cos(angle)),2))/(2*(y1-y2));
+            var a = 1;
+            var b = -2*x2;
+            var c = Math.pow((y3 - y2),2) + x2*x2 - r*r;
+            var delta = b*b - 4*a*c;
+            if(y1 > y2){
+               var x3 = (s) ? (-b - Math.sqrt(delta))/(2*a) : (-b + Math.sqrt(delta))/(2*a);
+            }else{
+               var x3 = (s) ? (-b + Math.sqrt(delta))/(2*a) : (-b - Math.sqrt(delta))/(2*a);
+            }
+         }
+         return [ "M", x1, y1, "A", R, R, 0, l, s, x3, y3 ]; 
+      }else{
+         /* table mode */
+         var info = this.graph.getVertexInfo(vertex2);
+         var content = (info.content) ? info.content : "";
+         var boxSize = this.getBoxSize(content,vInfo2.wCorr);
+         if(vertex1 === vertex2){   
+            /* loop */
+            angleCenter = edgeVisualInfo.angle || 0; // angle between center of vertex and projection of center of loop on the surface (in deg with trigonometric orientation)
+            var angleCorr = (angleCenter*Math.PI/180)%(2*Math.PI); // to match angle orientation of other functions
+            angleCorr = this.bindAngle(angleCorr);
+            R = (edgeVisualInfo["radius-ratio"]) ? edgeVisualInfo["radius-ratio"]*r : 1.5*r;
+            var beta = Math.atan(boxSize.h/boxSize.w);   // angle between center of vertex and corner of box
+            /* loop center stays at R/2 from box surface */
+            if(angleCorr <= beta && angleCorr > -beta){
+               /* right side */
+               var alpha1 = Math.PI - Math.atan(R*Math.sqrt(3)/(boxSize.w) + Math.tan(angleCorr)); // angle between center of vertex and arrow point
+               var alpha2 = Math.PI - Math.atan(-R*Math.sqrt(3)/(boxSize.w) + Math.tan(angleCorr)); // angle between center of vertex and arrow start
+            }else if(angleCorr <= Math.PI + beta && angleCorr > Math.PI - beta){
+               /* left side */
+               var alpha1 = -Math.atan(R*Math.sqrt(3)/(boxSize.w) + Math.tan(angleCorr)); 
+               var alpha2 = -Math.atan(-R*Math.sqrt(3)/(boxSize.w) + Math.tan(angleCorr));
+            }else if(angleCorr > beta && angleCorr <= Math.PI - beta){
+               /* top */
+               var alpha1 = Math.PI/2 + Math.atan(-R*Math.sqrt(3)/(boxSize.h) + 1/Math.tan(angleCorr));
+               var alpha2 = Math.PI/2 + Math.atan(R*Math.sqrt(3)/(boxSize.h) + 1/Math.tan(angleCorr));
+            }else if(angleCorr > Math.PI + beta || angleCorr <= - beta){
+               /* bottom */
+               var alpha1 = 3*Math.PI/2 + Math.atan(-R*Math.sqrt(3)/(boxSize.h) + 1/Math.tan(angleCorr));
+               var alpha2 = 3*Math.PI/2 + Math.atan(R*Math.sqrt(3)/(boxSize.h) + 1/Math.tan(angleCorr));
+            }
+            var pos1 = this.getSurfacePointFromAngle(x1,y1,boxSize.w,boxSize.h,alpha1);
+            var pos2 = this.getSurfacePointFromAngle(x1,y1,boxSize.w,boxSize.h,alpha2);
+
+            l = 1;
+            edgeVisualInfo.angle = angleCenter;
+            edgeVisualInfo["radius-ratio"] = R/r;
+            return [ "M", pos2.x, pos2.y, "A", R, R, 0, l, s, pos1.x, pos1.y ]; 
+         }
+         var alpha = this.getAngleBetween(x1,y1,x2,y2);
+         
+         if(vInfo1.tableMode){
+            if(s){
+               var alpha1 = (l) ? -alpha - angle : angle - alpha;
+            }else{
+               var alpha1 = (l) ? angle - alpha : -alpha - angle;
+            }
+            var info1 = this.graph.getVertexInfo(vertex1);
+            var content1 = (info1.content) ? info1.content : "";
+            var boxSize1 = this.getBoxSize(content1,vInfo1.wCorr);
+            var delta = Math.PI - alpha1;
+            var pos1 = this.getSurfacePointFromAngle(x1,y1,boxSize1.w,boxSize1.h,delta);
+         }else{
+            var pos1 = { x: x1, y: y1 };
+         }
+         if(s){
+            alpha = (l) ? alpha - angle : alpha + angle;
+         }else{
+            alpha = (l) ? alpha + angle : alpha - angle;
+         }
+
+         var pos2 = this.getSurfacePointFromAngle(x2,y2,boxSize.w,boxSize.h,alpha);
+
+         var D2 = Math.sqrt(Math.pow((pos2.x-pos1.x),2) + Math.pow((pos2.y-pos1.y),2));
+         var R2 = D2*edgeVisualInfo["radius-ratio"];  
+         return [ "M", pos1.x, pos1.y, "A", R2, R2, 0, l, s, pos2.x, pos2.y ]; 
+      }
+   };
+
+   this.getAngleBetween = function(x1,y1,x2,y2) {
+      /* return angle between 2 points (between -PI/2 and PI/2) */
+      if(x2 != x1){
+         var alpha = Math.atan((y2 - y1)/(x2 - x1));
+      }else{
+         var alpha = (y2 > y1) ? Math.PI/2 : -Math.PI/2;
+      }
+      if(x1 > x2){
+         alpha += Math.PI;
+      }
+      return alpha;
+   };
+
+   this.getSurfacePointFromAngle = function(x,y,w,h,angle) {
+      /* return the coordinates of the point at the surface of a box at a given angle 
+      *  x,y : coordinates of the box center
+      *  w,h: width and height of the box
+      *  angle: angle from the center (in rad)  
+      */
+      var x2,y2;
+      var beta = Math.atan(h/w);
+
+      angle = this.bindAngle(angle); 
+
+      if(angle <= beta && angle >= -beta){
+         // console.log("1");
+         x2 = x - w/2;
+         y2 = y - (w/2)*Math.tan(angle);
+      }else if(angle > beta && angle < Math.PI - beta){
+         // console.log("2");
+         x2 = x - (h/2)*Math.tan(Math.PI/2 - angle);
+         y2 = y - h/2;
+      }else if(angle <= (Math.PI + beta) && angle >= (Math.PI - beta)){
+         // console.log("3");
+         x2 = x + w/2;
+         y2 = y + (w/2)*Math.tan(angle);
+      }else if(angle > (Math.PI + beta) || angle < -beta){
+         // console.log("4");
+         x2 = x + (h/2)*Math.tan(Math.PI/2 - angle);
+         y2 = y + h/2;
+      }
+      return { x: x2, y: y2 };
+   };
+
+   
+   this.reapplyAttr = function() {
+      var vertices = this.graph.getAllVertices();
+      for(var iVertex in vertices) {
+         this.visualGraph.getRaphaelsFromID(vertices[iVertex])[0].attr(this.circleAttr);
+      }
+      var edges = this.graph.getAllEdges();
+      for(var iEdge in edges) {
+         var raphaels = this.visualGraph.getRaphaelsFromID(edges[iEdge]);
+         raphaels[0].attr(this.lineAttr);
+         if(thickMode) {
+            raphaels[1].attr(innerLineAttr);
+         }
+      }
+   };
+   this.getDistanceFromVertex = function(id, xPos, yPos) {
+      var vertexPos = this.getVertexPosition(id);
+      var tableMode = this.visualGraph.getVertexVisualInfo(id).tableMode;
+      // var xDistance = xPos - vertexPos.x;
+      // var yDistance = yPos - vertexPos.y;
+      // var distanceFromCenter = distanceSquared(vertexPos.x,vertexPos.y,xPos,yPos);
+      var distanceFromCenter = Beav.Geometry.distance(vertexPos.x,vertexPos.y,xPos,yPos);
+      if(!tableMode){
+         if(distanceFromCenter <= this.circleAttr.r) {
+            return 0;
+         }
+         return distanceFromCenter - this.circleAttr.r;
+      }else{
+         /* table mode */
+         var angleWithCenter = this.getAngleBetween(vertexPos.x,vertexPos.y,xPos,yPos);
+         var info = this.graph.getVertexInfo(id);
+         var vInfo = this.visualGraph.getVertexVisualInfo(id);
+         var content = (info.content) ? info.content : "";
+         var boxSize = this.getBoxSize(content,vInfo.wCorr);
+         var surfacePoint = this.getSurfacePointFromAngle(vertexPos.x,vertexPos.y,boxSize.w,boxSize.h,angleWithCenter);
+         var surfaceFromCenter = Beav.Geometry.distance(vertexPos.x,vertexPos.y,surfacePoint.x,surfacePoint.y);
+         if(distanceFromCenter <= surfaceFromCenter) {
+            return 0;
+         }
+         return distanceFromCenter - surfaceFromCenter;
+      }
+   };
+   this.getDistanceFromEdge = function(id, xPos, yPos) {
+      var vInfo = this.visualGraph.getEdgeVisualInfo(id);
+      if(vInfo["radius-ratio"]){    // if curved edge
+         var edgeRaph = this.visualGraph.getRaphaelsFromID(id)[0];
+         var d = Infinity;
+         for(var length = 1; length < edgeRaph.getTotalLength(); length += 2){
+            var currPos = edgeRaph.getPointAtLength(length);
+            var currDist = Beav.Geometry.distance(currPos.x,currPos.y,xPos,yPos);
+            if(currDist < d){
+               d = currDist;
+            }
+         }
+         return d;
+         // var vertices = this.graph.getEdgeVertices(id);
+         // var vertex1Pos = this.visualGraph.getVertexVisualInfo(vertices[0]);
+         // var vertex2Pos = this.visualGraph.getVertexVisualInfo(vertices[1]);
+         // var x1 = vertex1Pos.x;
+         // var y1 = vertex1Pos.y;
+         // var x2 = vertex2Pos.x;
+         // var y2 = vertex2Pos.y;
+         // if(!vertex2Pos.tableMode){
+         //    if(vertices[0] === vertices[1]){    // if loop
+         //       var R = vInfo["radius-ratio"]*this.circleAttr.r;
+         //       var angle = vInfo["angle"] || 0;
+         //       var xc = x1 + R*Math.cos(angle*Math.PI/180);
+         //       var yc = y1 - R*Math.sin(angle*Math.PI/180);
+         //    }else{
+         //       var D = Math.sqrt(Math.pow((x2-x1),2) + Math.pow((y2-y1),2));
+         //       var R = vInfo["radius-ratio"]*D;
+         //       var s = vInfo.sweep || 0;
+         //       var l = vInfo["large-arc"] || 0;
+         //       var cPos = this.getCenterPosition(R,s,l,vertex1Pos,vertex2Pos);
+         //       var xc = cPos.x;
+         //       var yc = cPos.y;
+         //    }
+         //    // var distFromCenter = Math.sqrt(Math.pow((xPos - xc),2) + Math.pow((yPos - yc),2));
+         //    // return Math.abs(distFromCenter - R); 
+         // }else{
+         //    /* table mode */
+         //    var info = this.graph.getVertexInfo(vertices[0]);
+         //    var content = (info.content) ? info.content : "";
+         //    var boxSize = this.getBoxSize(content,vertex1Pos.wCorr);
+         //    if(vertices[0] === vertices[1]){    
+         //       /* loop */
+         //       angleCenter = vInfo.angle || 0; // angle between center of vertex and projection of center of loop on the surface (in deg with trigonometric orientation)
+         //       var angleCorr = (angleCenter*Math.PI/180)%(2*Math.PI);
+         //       angleCorr = this.bindAngle(angleCorr);
+         //       R = (vInfo["radius-ratio"]) ? vInfo["radius-ratio"]*this.circleAttr.r : 1.5*this.circleAttr.r;
+         //       var beta = Math.atan(boxSize.h/boxSize.w);   // angle between center of vertex and corner of box
+         //       var surfPos = this.getSurfacePointFromAngle(x1,y1,boxSize.w,boxSize.h,Math.PI - angleCorr);
+         //       /* loop center stays at R/2 from box surface */
+         //       if(angleCorr <= beta && angleCorr > -beta){
+         //          /* right side */
+         //          var xc = surfPos.x + R/2;
+         //          var yc = surfPos.y;
+         //       }else if(angleCorr <= Math.PI + beta && angleCorr > Math.PI - beta){
+         //          /* left side */
+         //          var xc = surfPos.x - R/2;
+         //          var yc = surfPos.y;
+         //       }else if(angleCorr > beta && angleCorr <= Math.PI - beta){
+         //          /* top */
+         //          var xc = surfPos.x;
+         //          var yc = surfPos.y - R/2;
+         //       }else if(angleCorr > Math.PI + beta || angleCorr <= - beta){
+         //          /* bottom */
+         //          var xc = surfPos.x;
+         //          var yc = surfPos.y + R/2;
+         //       }
+         //    }else{
+         //       var param = this.getEdgeParam(id);
+
+         //       var cPos = this.getCenterPosition(param.R,param.s,param.l,param.pos1,param.pos2);
+         //       var xc = cPos.x;
+         //       var yc = cPos.y;
+         //       var R = param.R;
+         //    }
+         // }
+         // var distFromCenter = Math.sqrt(distanceSquared(xc,yc,xPos,yPos));
+         // return Math.abs(distFromCenter - R); 
+      }else{
+         var edgePath = this.visualGraph.getRaphaelsFromID(id)[0].attrs.path;
+         var x1, y1, x2, y2;
+         // In modern browsers the path is an array and we can get the endpoints
+         // directly. In old browsers it may be a comma separated string.
+         if($.isArray(edgePath)) {
+            if($.isArray(edgePath[0])) {
+               // Path a 2D array: [["M", x1, y1], ["L", x2, y2]]
+               x1 = parseInt(edgePath[0][1]);
+               y1 = parseInt(edgePath[0][2]);
+               x2 = parseInt(edgePath[1][1]);
+               y2 = parseInt(edgePath[1][2]);
+            }
+            else {
+               // Path is an array: ["M", x1, y1, "L", x2, y2]
+               x1 = parseInt(edgePath[1]);
+               y1 = parseInt(edgePath[2]);
+               x2 = parseInt(edgePath[4]);
+               y2 = parseInt(edgePath[5]);
+            }
+         }
+         else {
+            // Path is a string: "M,x1,y1,L,x2,y2"
+            var parts = edgePath.split(",");
+            x1 = parseInt(parts[1]);
+            y1 = parseInt(parts[2]);
+            x2 = parseInt(parts[4]);
+            y2 = parseInt(parts[5]);
+         }
+         return Math.sqrt(distanceToSegmentSquared(xPos, yPos, x1, y1, x2, y2));
+      }
+   };
+
+   this.getEdgeParam = function(id) {
+      /* return the parameters of an edge in table mode */
+      var vInfo = this.visualGraph.getEdgeVisualInfo(id);
+      var vertices = this.graph.getEdgeVertices(id);
+      var vertex1Pos = this.visualGraph.getVertexVisualInfo(vertices[0]);
+      var vertex2Pos = this.visualGraph.getVertexVisualInfo(vertices[1]);
+      var x1 = vertex1Pos.x;
+      var y1 = vertex1Pos.y;
+      var x2 = vertex2Pos.x;
+      var y2 = vertex2Pos.y;
+      var info = this.graph.getVertexInfo(vertices[0]);
+      var content = (info.content) ? info.content : "";
+      var boxSize = this.getBoxSize(content,vertex1Pos.wCorr);
+      var r = this.circleAttr.r;
+      var D = Math.sqrt(Math.pow((x2-x1),2) + Math.pow((y2-y1),2));  // distance between vertex1 and vertex2
+      var R = D*vInfo["radius-ratio"];   // arc radius, between D/2 and +inf (almost straight line at D*50). 
+      var s = vInfo.sweep || 0;  // sweep flag
+      var l = vInfo["large-arc"] || 0;  // large arc flag  
+
+      /* Calculation of the coordinates of the target point at the surface of the target vertex */
+      var angle = (l) ? (Math.asin(D/(2*R)) + Math.PI) : Math.asin(D/(2*R));
+      var alpha = this.getAngleBetween(x1,y1,x2,y2);
+      
+      if(vertex1Pos.tableMode){
+         if(s){
+            var alpha1 = (l) ? -alpha - angle : angle - alpha;
+         }else{
+            var alpha1 = (l) ? angle - alpha : -alpha - angle;
+         }
+         var info1 = this.graph.getVertexInfo(vertices[0]);
+         var content1 = (info1.content) ? info1.content : "";
+         var boxSize1 = this.getBoxSize(content1,vertex1Pos.wCorr);
+         var delta = Math.PI - alpha1;
+         var pos1 = this.getSurfacePointFromAngle(x1,y1,boxSize1.w,boxSize1.h,delta);
+      }else{
+         var pos1 = { x: x1, y: y1 };
+      }
+      if(s){
+         alpha = (l) ? alpha - angle : alpha + angle;
+      }else{
+         alpha = (l) ? alpha + angle : alpha - angle;
+      }
+
+      var pos2 = this.getSurfacePointFromAngle(x2,y2,boxSize.w,boxSize.h,alpha);
+
+      var D2 = Math.sqrt(Math.pow((pos2.x-pos1.x),2) + Math.pow((pos2.y-pos1.y),2));
+      var R = D2*vInfo["radius-ratio"]; 
+      return {R: R, s:s, l:l, D: D2, pos1: pos1, pos2: pos2};
+   }
+
+   this.getLabelPos = function(edgeID,vertex1,vertex2) {
+
+      var edgeVertices = this.graph.getEdgeVertices(edgeID);
+      vertex1 = edgeVertices[0];
+      vertex2 = edgeVertices[1];
+
+      var info = this.graph.getEdgeInfo(edgeID);
+      var vInfo = this.visualGraph.getEdgeVisualInfo(edgeID);
+      var vertex1Pos = this.visualGraph.getVertexVisualInfo(vertex1);
+      var vertex2Pos = this.visualGraph.getVertexVisualInfo(vertex2);
+      var x1 = vertex1Pos.x;
+      var y1 = vertex1Pos.y;
+      var x2 = vertex2Pos.x;
+      var y2 = vertex2Pos.y;
+
+      var label = info.label || "";
+      var labelW = label.length * this.edgeLabelAttr["font-size"] || this.edgeLabelAttr["font-size"];
+      var labelH = this.edgeLabelAttr["font-size"];
+      var margin = 10;
+      if(label.length < 2){
+         labelW += margin;
+      }
+      var angle = this.getAngleBetween(x1,y1,x2,y2);
+      if(vInfo["radius-ratio"] || vertex1 ===  vertex2){ // if curved edge
+         if(vertex1 === vertex2){   // if loop
+            var R = this.circleAttr.r*vInfo["radius-ratio"];
+            if(vertex1Pos.tableMode){  // if table mode
+               angle = vInfo.angle*Math.PI/180 || 0;
+               angle = this.bindAngle(angle);
+               var info = this.graph.getVertexInfo(vertex1);
+               var content = (info.content) ? info.content : "";
+               var boxSize = this.getBoxSize(content,vertex1Pos.wCorr);
+
+               var beta = Math.atan(boxSize.h/boxSize.w);   // angle between center of vertex and corner of box
+               var surfPos = this.getSurfacePointFromAngle(vertex1Pos.x,vertex1Pos.y,boxSize.w,boxSize.h,Math.PI - angle);
+               if(angle <= beta && angle > -beta){
+                  /* right side */
+                  var xm = surfPos.x + R*3/2;
+                  var ym = surfPos.y;
+               }else if(angle <= Math.PI + beta && angle > Math.PI - beta){
+                  /* left side */
+                  // console.log('left');
+                  var xm = surfPos.x - R*3/2;
+                  var ym = surfPos.y;
+               }else if(angle > beta && angle <= Math.PI - beta){
+                  /* top */
+                  var xm = surfPos.x;
+                  var ym = surfPos.y - R*3/2;
+               }else if(angle > Math.PI + beta || angle <= - beta){
+                  /* bottom */
+                  // console.log('bottom');
+                  var xm = surfPos.x;
+                  var ym = surfPos.y + R*3/2;
+               }
+               var x = xm - (labelW/2)*Math.sin(angle - Math.PI/2);
+               var y = ym + (labelH*1.5)*Math.cos(angle + Math.PI/2);
+            }else{
+               angle = vInfo.angle*Math.PI/180 || 0;
+               var xm = x1 + 2*R*Math.cos(angle);
+               var ym = y1 - 2*R*Math.sin(angle);
+               var x = xm - (labelW/2)*Math.sin(angle - Math.PI/2);
+               var y = ym + (labelH/2)*Math.cos(angle + Math.PI/2);
+            }
+         }else{
+            var s = vInfo["sweep"] || 0;
+            var l = vInfo["large-arc"] || 0;
+            var D = Math.sqrt(Math.pow((x2-x1),2) + Math.pow((y2-y1),2));
+            var R = D*vInfo["radius-ratio"];
+            if(vertex2Pos.tableMode){
+               var info = this.graph.getVertexInfo(vertex2);
+               var content = (info.content) ? info.content : "";
+               var boxSize = this.getBoxSize(content,vertex2Pos.wCorr);
+               
+               var alpha = (l) ? (Math.asin(D/(2*R)) + Math.PI) : Math.asin(D/(2*R));  
+               var angle2 = angle;
+               
+               if(vertex1Pos.tableMode){
+                  if(s){
+                     var alpha1 = (l) ? -angle2 - alpha : alpha - angle2;
+                  }else{
+                     var alpha1 = (l) ? alpha - angle2 : -angle2 - alpha;
+                  }
+                  var info1 = this.graph.getVertexInfo(vertex1);
+                  var content1 = (info1.content) ? info1.content : "";
+                  var boxSize1 = this.getBoxSize(content1,vertex1Pos.wCorr);
+                  var delta = Math.PI - alpha1;
+                  var pos1 = this.getSurfacePointFromAngle(x1,y1,boxSize1.w,boxSize1.h,delta);
+               }else{
+                  var pos1 = { x: x1, y: y1 };
+               }
+               if(s){
+                  angle2 = (l) ? angle2 - alpha : angle2 + alpha;
+               }else{
+                  angle2 = (l) ? angle2 + alpha : angle2 - alpha;
+               }
+
+               var pos2 = this.getSurfacePointFromAngle(x2,y2,boxSize.w,boxSize.h,angle2);
+
+               var D2 = Math.sqrt(Math.pow((pos2.x-pos1.x),2) + Math.pow((pos2.y-pos1.y),2));
+               var R = D2*vInfo["radius-ratio"];
+               var cPos = this.getCenterPosition(R,s,l,pos1,pos2);
+            }else{
+               var cPos = this.getCenterPosition(R,s,l,vertex1Pos,vertex2Pos);
+            }
+            if(vInfo["radius-ratio"] == 0.5){
+               R += 10;
+            }
+            var xm = (s) ? cPos.x + R*Math.sin(angle) : cPos.x - R*Math.sin(angle);
+            var ym = (s) ? cPos.y - R*Math.cos(angle) : cPos.y + R*Math.cos(angle);
+            
+            var x = (s) ? xm + (labelW/2)*Math.sin(angle) : xm - (labelW/2)*Math.sin(angle);
+            var y = (s) ? ym - (labelH/2 + margin)*Math.cos(angle) : ym + (labelH/2 + margin)*Math.cos(angle);
+         }
+      }else{
+         var xm = (x2 + x1)/2;
+         var ym = (y2 + y1)/2;
+         var x = xm + (labelW/2)*Math.sin(angle);
+         var y = ym - (labelH/2 + margin)*Math.cos(angle);
+      }
+      return {x:x,y:y};
+   };
+
+   this.isOnEdgeLabel = function(edgeID,x,y) {
+      var edgeInfo = this.graph.getEdgeInfo(edgeID);
+      if(!edgeInfo.label || edgeInfo.label.length === 0){
+         return false;
+      }
+      var labelPos = this.getLabelPos(edgeID);
+      var fontSize = this.edgeLabelAttr["font-size"] || 15;  
+      var labelH = fontSize;
+      var labelW = edgeInfo.label.length * fontSize || fontSize;
+      if(x < (labelPos.x + labelW/2) && x > (labelPos.x - labelW/2) && y < (labelPos.y + labelH/2) && y > (labelPos.y - labelH/2)){
+         return true;
+      }
+      return false;    
+   };
+
+   this.getCenterPosition = function(R,s,l,vInfo1,vInfo2) {
+      var x1 = vInfo1.x, y1 = vInfo1.y;
+      var x2 = vInfo2.x, y2 = vInfo2.y;
+      
+      // if(y1 !== y2){
+      if(y1 > (y2 + 1) || y1 < (y2 - 1)){ // to prevent divergence when y1 is very close to y2
+         // parameters of the bisection
+         var A = (x1 - x2)/(y2 - y1);
+         var B = (x2*x2 + y2*y2 - x1*x1 - y1*y1)/(2*(y2 - y1));
+
+         var a = 1 + A*A;
+         var b = 2*(A*B - A*y2 - x2);
+         var c = x2*x2 + y2*y2 + B*B - 2*y2*B - R*R;
+         var delta = b*b - 4*a*c;
+         if(delta <= 0)
+            delta = 0;
+         if(y1 > y2){
+            if(s){
+               var xc = (l) ? (-b - Math.sqrt(delta))/(2*a) : (-b + Math.sqrt(delta))/(2*a);
+            }else{
+               var xc = (l) ? (-b + Math.sqrt(delta))/(2*a) : (-b - Math.sqrt(delta))/(2*a);
+            }
+         }else{
+            if(s){
+               var xc = (l) ? (-b + Math.sqrt(delta))/(2*a) : (-b - Math.sqrt(delta))/(2*a);
+            }else{
+               var xc = (l) ? (-b - Math.sqrt(delta))/(2*a) : (-b + Math.sqrt(delta))/(2*a);
+            }
+         }
+         var yc = A*xc + B;
+      }else{
+         var xc = (x1 + x2)/2;
+
+         var a = 1;
+         var b = -2*y1;
+         var c = y1*y1 + xc*xc + x1*x1 - 2*xc*x1 - R*R;
+         var delta = b*b - 4*a*c;
+
+         if(x1 < x2){
+            if(s){
+               var yc = (l) ? (-b - Math.sqrt(delta))/(2*a) : (-b + Math.sqrt(delta))/(2*a);
+            }else{
+               var yc = (l) ? (-b + Math.sqrt(delta))/(2*a) : (-b - Math.sqrt(delta))/(2*a);
+            }
+         }else{
+            if(s){
+               var yc = (l) ? (-b + Math.sqrt(delta))/(2*a) : (-b - Math.sqrt(delta))/(2*a);
+            }else{
+               var yc = (l) ? (-b - Math.sqrt(delta))/(2*a) : (-b + Math.sqrt(delta))/(2*a);
+            }
+         }
+      }
+      return {x:xc,y:yc};
+   };
+
+   function distanceSquared(x1, y1, x2, y2) {
+      return (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
+   }
+
+   function distanceToSegmentSquared(xPos, yPos, x1, y1, x2, y2) {
+      // Use algorithm for distance between point and segment.
+      // See: https://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment/1501725#1501725
+      var lengthSquared = distanceSquared(x1, y1, x2, y2);
+      if(lengthSquared === 0) {
+         return distanceSquared(xPos, yPos, x1, y1);
+      }
+      var t = ((xPos - x1) * (x2 - x1) + (yPos - y1) * (y2 - y1)) / lengthSquared;
+      t = Math.max(0, Math.min(1, t));
+      return distanceSquared(xPos, yPos, x1 + t * (x2 - x1), y1 + t * (y2 - y1));
+   }
+
+   this.getTextSize = function(text) {
+      var array = (text) ? text.split("\n") : [];
+      var nbLines = array.length;
+      var nbCol = 0;
+      for(var iLine = 0; iLine < nbLines; iLine++){
+         var line = array[iLine];
+         if(line.length > nbCol){
+            nbCol = line.length;
+         }
+      }
+      return { nbLines: nbLines, nbCol: nbCol };
+   };
+
+   this.bindAngle = function(angle) {
+      /* return angle between -PI/2 and 3PI/2 */
+      angle = angle%(2*Math.PI);
+      if(angle > 3*Math.PI/2){
+         angle -= 2*Math.PI;
+      }else if(angle < -Math.PI/2){
+         angle += 2*Math.PI;
+      }
+      return angle;
+   };
+}