├── .DS_Store
├── addons
    ├── .DS_Store
    ├── p5.dom.js
    ├── p5.sound.js
    └── p5.svg.js
├── empty-example
    ├── .DS_Store
    ├── index.html
    └── sketch.js
├── p5.js
└── p5.min.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runemadsen/p5-svg-test/5d7935461d1dfc3439ca3298b71c3132a40bc542/.DS_Store


--------------------------------------------------------------------------------
/addons/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runemadsen/p5-svg-test/5d7935461d1dfc3439ca3298b71c3132a40bc542/addons/.DS_Store


--------------------------------------------------------------------------------
/addons/p5.dom.js:
--------------------------------------------------------------------------------
  1 | /*! p5.dom.js v0.1.0 August 6, 2014 */
  2 | /**
  3 |  * <p>The web is much more than just canvas and p5.dom makes it easy to interact 
  4 |  * with other HTML5 objects, including text, hyperlink, image, input, video, 
  5 |  * audio, and webcam.</p>
  6 |  * <p>There are a set of creation methods, and some other stuff... @TODO.</p>
  7 |  *
  8 |  * <p>Methods and properties shown in black are part of the p5.js core, items in
  9 |  * blue are part of the p5.dom library. See the
 10 |  * <a href="http://p5js.org/libraries/#using-a-library">using a library</a>
 11 |  * section for information on how to include this library. p5.dom comes with
 12 |  * <a href="http://p5js.org/download">p5 complete</a> or you can download the single file
 13 |  * <a href="https://raw.githubusercontent.com/lmccart/p5.js/master/lib/addons/p5.dom.js">
 14 |  * here</a>.</p>
 15 |  * 
 16 |  *
 17 |  * @module p5.dom
 18 |  * @submodule p5.dom
 19 |  * @for p5.dom
 20 |  * @main
 21 |  */
 22 | 
 23 | var p5DOM = (function(){
 24 | 
 25 | // =============================================================================
 26 | //                         p5 additions
 27 | // =============================================================================
 28 | 
 29 |   /**
 30 |    * Searches the page for an element with given ID and returns it as
 31 |    * a p5.Element. The DOM node itself can be accessed with .elt.
 32 |    * Returns null if none found.
 33 |    * 
 34 |    * @method getElement
 35 |    * @param  {String} id id of element to search for
 36 |    * @return {Object/p5.Element|Null} p5.Element containing node found
 37 |    */
 38 |   p5.prototype.getElement = function (e) {
 39 |     var res = document.getElementById(e);
 40 |     if (res) {
 41 |       return new p5.Element(res);
 42 |     } else {
 43 |       return null;
 44 |     }
 45 |   };
 46 | 
 47 |   /**
 48 |    * Searches the page for elements with given class and returns an
 49 |    * array of p5.Elements. The DOM nodes themselves can be accessed
 50 |    * with .elt. Returns an empty array if none found.
 51 |    * 
 52 |    * @method getElements
 53 |    * @param  {String} class class name of elements to search for
 54 |    * @return {Array} array of p5.Element wrapped nodes found
 55 |    */
 56 |   p5.prototype.getElements = function (e) {
 57 |     var arr = [];
 58 |     var res = document.getElementsByClassName(e);
 59 |     if (res) {
 60 |       for (var j = 0; j < res.length; j++) {
 61 |         var obj = new p5.Element(res[j]);
 62 |         arr.push(obj);
 63 |       }
 64 |     }
 65 |     return arr;
 66 |   };
 67 | 
 68 |   /**
 69 |    * Removes all elements created by p5, except any canvas / graphics
 70 |    * elements created by createCanvas or createGraphics.
 71 |    * Event handlers are removed, and element is removed from the DOM.
 72 |    *
 73 |    * @method removeElements
 74 |    */
 75 |   p5.prototype.removeElements = function (e) {
 76 |     for (var i=0; i<this._elements.length; i++) {
 77 |       if (!(this._elements[i].elt instanceof HTMLCanvasElement)) {
 78 |         this._elements[i].remove();
 79 |       }
 80 |     }
 81 |   };
 82 | 
 83 |   /**
 84 |    * Helpers for create methods.
 85 |    */  
 86 |   function addElement(elt, pInst, media) {
 87 |     var node = pInst._userNode ? pInst._userNode : document.body;
 88 |     node.appendChild(elt);
 89 |     var c = media ? new p5.MediaElement(elt) : new p5.Element(elt);
 90 |     pInst._elements.push(c);
 91 |     return c;
 92 |   }
 93 | 
 94 |   /**
 95 |    * Creates a &lt;div&gt;&lt;/div&gt; element in the DOM with given inner HTML.
 96 |    * Appends to the container node if one is specified, otherwise 
 97 |    * appends to body.
 98 |    * 
 99 |    * @method createDiv
100 |    * @param  {String} html inner HTML for element created
101 |    * @return {Object/p5.Element} pointer to p5.Element holding created
102 |    *                           node
103 |    */
104 | 
105 |   /**
106 |    * Creates a &lt;p&gt;&lt;/p&gt; element in the DOM with given inner HTML. Used
107 |    * for paragraph length text.
108 |    * Appends to the container node if one is specified, otherwise 
109 |    * appends to body.
110 |    * 
111 |    * @method createP
112 |    * @param  {String} html inner HTML for element created
113 |    * @return {Object/p5.Element} pointer to p5.Element holding created
114 |    *                           node
115 |    */
116 | 
117 |   /**
118 |    * Creates a &lt;span&gt;&lt;/span&gt; element in the DOM with given inner HTML.
119 |    * Appends to the container node if one is specified, otherwise 
120 |    * appends to body.
121 |    * 
122 |    * @method createSpan
123 |    * @param  {String} html inner HTML for element created
124 |    * @return {Object/p5.Element} pointer to p5.Element holding created
125 |    *                           node
126 |    */
127 |   var tags = ['div', 'p', 'span'];
128 |   tags.forEach(function(tag) {
129 |     var method = 'create' + tag.charAt(0).toUpperCase() + tag.slice(1);
130 |     p5.prototype[method] = function(html) {
131 |       var elt = document.createElement(tag);
132 |       elt.innerHTML = html;
133 |       return addElement(elt, this);
134 |     }
135 |   });
136 | 
137 |   /**
138 |    * Creates an &lt;img /&gt; element in the DOM with given src and
139 |    * alternate text. 
140 |    * Appends to the container node if one is specified, otherwise 
141 |    * appends to body.
142 |    * 
143 |    * @method createImg
144 |    * @param  {String} src src path or url for image
145 |    * @param  {String} alt alternate text to be used if image does not
146 |    *                  load
147 |    * @return {Object/p5.Element} pointer to p5.Element holding created
148 |    *                           node
149 |    */
150 |   p5.prototype.createImg = function(src, alt) {
151 |     var elt = document.createElement('img');
152 |     elt.src = src;
153 |     if (typeof alt !== 'undefined') {
154 |       elt.alt = alt;
155 |     }
156 |     return addElement(elt, this);
157 |   };
158 | 
159 | 
160 |   /**
161 |    * Creates an &lt;a&gt;&lt;/a&gt; element in the DOM for including a hyperlink.
162 |    * Appends to the container node if one is specified, otherwise 
163 |    * appends to body.
164 |    * 
165 |    * @method createA
166 |    * @param  {String} href       url of page to link to
167 |    * @param  {String} html       inner html of link element to display
168 |    * @param  {String} [target]   target where new link should open,
169 |    *                             could be _blank, _self, _parent, _top.
170 |    * @return {Object/p5.Element} pointer to p5.Element holding created
171 |    *                           node
172 |    */
173 |   p5.prototype.createA = function(href, html, target) {
174 |     var elt = document.createElement('a');
175 |     elt.href = href;
176 |     elt.innerHTML = html;
177 |     if (target) elt.target = target;
178 |     return addElement(elt, this);
179 |   };
180 | 
181 |   /** INPUT **/
182 | 
183 | 
184 |   /**
185 |    * Creates a slider &lt;input&gt;&lt;/input&gt; element in the DOM.
186 |    * Use .size() to set the display length of the slider.
187 |    * Appends to the container node if one is specified, otherwise 
188 |    * appends to body.
189 |    * 
190 |    * @method createSlider
191 |    * @param  {Number} min minimum value of the slider
192 |    * @param  {Number} max maximum value of the slider
193 |    * @param  {Number} [value] default value of the slider
194 |    * @return {Object/p5.Element} pointer to p5.Element holding created
195 |    *                           node
196 |    */
197 |   p5.prototype.createSlider = function(min, max, value) {
198 |     var elt = document.createElement('input');
199 |     elt.type = 'range';
200 |     elt.min = min;
201 |     elt.max = max;
202 |     if (value) elt.value = value;
203 |     return addElement(elt, this);
204 |   };
205 | 
206 |   /**
207 |    * Creates a &lt;button&gt;&lt;/button&gt; element in the DOM.
208 |    * Use .size() to set the display size of the button.
209 |    * Use .mousePressed() to specify behavior on press.
210 |    * Appends to the container node if one is specified, otherwise 
211 |    * appends to body.
212 |    * 
213 |    * @method createButton
214 |    * @param  {String} label label displayed on the button
215 |    * @param  {String} [value] value of the button
216 |    * @return {Object/p5.Element} pointer to p5.Element holding created
217 |    *                           node
218 |    */
219 |   p5.prototype.createButton = function(label, value) {
220 |     var elt = document.createElement('button');
221 |     elt.innerHTML = label;
222 |     elt.value = value;
223 |     if (value) elt.value = value;
224 |     return addElement(elt, this);
225 |   };
226 | 
227 |   /**
228 |    * Creates an &lt;input&gt;&lt;/input&gt; element in the DOM for text input.
229 |    * Use .size() to set the display length of the box.
230 |    * Appends to the container node if one is specified, otherwise 
231 |    * appends to body.
232 |    * 
233 |    * @method createInput
234 |    * @param  {Number} [value] default value of the input box
235 |    * @return {Object/p5.Element} pointer to p5.Element holding created
236 |    *                           node
237 |    */
238 |   p5.prototype.createInput = function(value) {
239 |     var elt = document.createElement('input');
240 |     elt.type = 'text';
241 |     if (value) elt.value = value;
242 |     return addElement(elt, this);
243 |   };
244 | 
245 |   /** VIDEO STUFF **/
246 | 
247 |   function createMedia(pInst, type, src, callback) {
248 |     var elt = document.createElement(type);
249 |     if (typeof src === 'string') {
250 |       src = [src];
251 |     }
252 |     for (var i=0; i<src.length; i++) {
253 |       var source = document.createElement('source');
254 |       source.src = src[i];
255 |       elt.appendChild(source);
256 |     }
257 |     if (typeof callback !== 'undefined') {
258 |       elt.addEventListener('canplaythrough', function() {
259 |         callback();
260 |       });
261 |     }
262 | 
263 |     var c = addElement(elt, pInst, true);
264 |     c.loadedmetadata = false;
265 |     // set width and height onload metadata
266 |     elt.addEventListener('loadedmetadata', function() {
267 |       c.width = elt.videoWidth;
268 |       c.height = elt.videoHeight;
269 |       c.loadedmetadata = true;
270 |     });
271 |     
272 |     return c;  
273 |   }
274 |   /**
275 |    * Creates an HTML5 &lt;video&gt; element in the DOM for simple playback
276 |    * of audio/video. Shown by default, can be hidden with .hide()
277 |    * and drawn into canvas using video(). Appends to the container
278 |    * node if one is specified, otherwise appends to body.
279 |    * 
280 |    * @method createVideo
281 |    * @param  {String|Array} src  path to a video file, or array of paths for
282 |    *                             supporting different browsers
283 |    * @param  {Object} [callback] callback function to be called upon 
284 |    *                             'canplaythrough' event fire, that is, when the
285 |    *                             browser can play the media, and estimates that 
286 |    *                             enough data has been loaded to play the media 
287 |    *                             up to its end without having to stop for 
288 |    *                             further buffering of content
289 |    * @return {Object/p5.Element} pointer to video p5.Element
290 |    */
291 |   p5.prototype.createVideo = function(src, callback) {
292 |     return createMedia(this, 'video', src, callback);
293 |   };
294 | 
295 |   /** AUDIO STUFF **/
296 | 
297 |   /**
298 |    * Creates a hidden HTML5 &lt;audio&gt; element in the DOM for simple audio 
299 |    * playback. Appends to the container node if one is specified, 
300 |    * otherwise appends to body.
301 |    * 
302 |    * @method createAudio
303 |    * @param  {String|Array} src  path to an audio file, or array of paths for
304 |    *                             supporting different browsers
305 |    * @param  {Object} [callback] callback function to be called upon 
306 |    *                             'canplaythrough' event fire, that is, when the
307 |    *                             browser can play the media, and estimates that 
308 |    *                             enough data has been loaded to play the media 
309 |    *                             up to its end without having to stop for 
310 |    *                             further buffering of content
311 |    * @return {Object/p5.Element} pointer to audio p5.Element
312 |    */
313 |   p5.prototype.createAudio = function(src, callback) {
314 |     return createMedia(this, 'audio', src, callback);
315 |   };
316 | 
317 | 
318 |   /** CAMERA STUFF **/
319 |   
320 |   p5.prototype.VIDEO = 'video';
321 |   p5.prototype.AUDIO = 'audio';
322 | 
323 |   navigator.getUserMedia  = navigator.getUserMedia ||
324 |                             navigator.webkitGetUserMedia ||
325 |                             navigator.mozGetUserMedia ||
326 |                             navigator.msGetUserMedia;
327 | 
328 |   /**
329 |    * Creates a new &lt;video&gt; element that contains the audio/video feed
330 |    * from a webcam. This can be drawn onto the canvas using video().
331 |    *
332 |    * @method createCapture
333 |    * @param  {String/Constant}   type type of capture, either VIDEO or 
334 |    *                             AUDIO if none specified, default both
335 |    * @return {Object/p5.Element} capture video p5.Element
336 |    */
337 |   p5.prototype.createCapture = function(type) {
338 |     var useVideo, useAudio;
339 |     if (!type) {
340 |       useVideo = true;
341 |       useAudio = true;
342 |     } else if (type === p5.prototype.VIDEO) {
343 |       useVideo = true;
344 |     } else if (type === p5.prototype.AUDIO) {
345 |       useAudio = true;
346 |     }
347 | 
348 |     if (navigator.getUserMedia) {
349 |       var elt = document.createElement('video');
350 |       navigator.getUserMedia({video: useVideo, audio: useAudio}, function(stream) {
351 |         elt.src = window.URL.createObjectURL(stream);
352 |         elt.play();
353 |       }, function(e) { console.log(e); });
354 |     } else {
355 |       throw 'getUserMedia not supported in this browser';
356 |     }
357 |     return addElement(elt, this);
358 |   };
359 | 
360 |   /**
361 |    * Creates element with given tag in the DOM with given content.
362 |    * Appends to the container node if one is specified, otherwise 
363 |    * appends to body.
364 |    * 
365 |    * @method createElement
366 |    * @param  {String} tag tag for the new element
367 |    * @param  {String} [content] html content to be inserted into the element 
368 |    * @return {Object/p5.Element} pointer to p5.Element holding created
369 |    *                           node
370 |    */
371 |   p5.prototype.createElement = function(tag, content) {
372 |     var elt = document.createElement(tag);
373 |     if (typeof content !== 'undefined') {
374 |       elt.innerHTML = content;
375 |     }
376 |     return addElement(elt, this);
377 |   };
378 | 
379 | 
380 | // =============================================================================
381 | //                         p5.Element additions
382 | // =============================================================================
383 |   /**
384 |    *
385 |    * Adds specified class to the element.
386 |    *
387 |    * @for p5.Element
388 |    * @method addClass
389 |    * @param  {String} class name of class to add
390 |    */
391 |   p5.Element.prototype.addClass = function(c) {
392 |     if (this.elt.className) {
393 |       // PEND don't add class more than once
394 |       //var regex = new RegExp('[^a-zA-Z\d:]?'+c+'[^a-zA-Z\d:]?');
395 |       //if (this.elt.className.search(/[^a-zA-Z\d:]?hi[^a-zA-Z\d:]?/) === -1) {
396 |       this.elt.className = this.elt.className+' '+c;
397 |       //}
398 |     } else {
399 |       this.elt.className = c;
400 |     }
401 |   }
402 | 
403 |   /**
404 |    *
405 |    * Removes specified class from the element.
406 |    *
407 |    * @method removeClass
408 |    * @param  {String} class name of class to remove
409 |    */
410 |   p5.Element.prototype.removeClass = function(c) {
411 |     var regex = new RegExp('(?:^|\\s)'+c+'(?!\\S)');
412 |     this.elt.className = this.elt.className.replace(regex, '');
413 |     this.elt.className = this.elt.className.replace(/^\s+|\s+$/g, ""); //prettify (optional)
414 |   }
415 | 
416 |   /**
417 |    *
418 |    * Attaches the element to the parent specified. A way of setting
419 |    * the container for the element. Accepts either a string ID or
420 |    * DOM node.
421 |    *
422 |    * @method child
423 |    * @param  {String|Object} child the ID or node to add to the current element
424 |    */ 
425 |   p5.Element.prototype.child = function(c) {
426 |     if (typeof c === 'string') {
427 |       c = document.getElementById(c);
428 |     }
429 |     this.elt.appendChild(c);
430 |   };
431 | 
432 | 
433 |   /**
434 |    *
435 |    * Sets the inner HTML of the element. Replaces any existing html.
436 |    *
437 |    * @for p5.Element
438 |    * @method html
439 |    * @param  {String} html the HTML to be placed inside the element
440 |    */
441 |   p5.Element.prototype.html = function(html) {
442 |     this.elt.innerHTML = html;
443 |   };
444 | 
445 |   /**
446 |    *
447 |    * Sets the position of the element relative to (0, 0) of the
448 |    * window. Essentially, sets position:absolute and left and top
449 |    * properties of style.
450 |    *
451 |    * @method position
452 |    * @param  {Number} x x-position relative to upper left of window
453 |    * @param  {Number} y y-position relative to upper left of window
454 |    */
455 |   p5.Element.prototype.position = function(x, y) {
456 |     this.elt.style.position = 'absolute';
457 |     this.elt.style.left = x+'px';
458 |     this.elt.style.top = y+'px';
459 |   };
460 | 
461 |   /**
462 |    *
463 |    * Sets the given style (css) property of the element with the given value.
464 |    * If no value is specified, returns the value of the given property, 
465 |    * or undefined if the property is not.
466 |    *
467 |    * @method style
468 |    * @param  {String} property property to be set
469 |    * @param  {String} value    value to assign to property
470 |    * @return {String} value of property, if no value is specified
471 |    */
472 |   p5.Element.prototype.style = function(prop, val) {
473 |     if (typeof val === 'undefined') {
474 |       return this.elt.style[prop];
475 |     } else {
476 |       this.elt.style[prop] = val;
477 |     }
478 |   };
479 | 
480 | 
481 |   /**
482 |    *
483 |    * Adds a new attribute or changes the value of an existing attribute 
484 |    * on the specified element. If no value is specified, returns the
485 |    * value of the given attribute, or null if attribute is not set.
486 |    *
487 |    * @method attribute
488 |    * @param  {String} attr  attribute to set
489 |    * @param  {String} [value] value to assign to attribute
490 |    * @return {String} value of attribute, if no value is specified
491 |    */
492 |   p5.Element.prototype.attribute = function(attr, value) {
493 |     if (typeof value === 'undefined') {
494 |       return this.elt.getAttribute(attr);
495 |     } else {
496 |       this.elt.setAttribute(attr, value);
497 |     }
498 |   };
499 | 
500 | 
501 |   /**
502 |    * Either returns the value of the element if no arguments
503 |    * given, or sets the value of the element.
504 |    * 
505 |    * @method value
506 |    * @param  {String|Number} [value]
507 |    * @return {String|Number}
508 |    */
509 |   p5.Element.prototype.value = function() {
510 |     if (arguments.length > 0) {
511 |       this.elt.value = arguments[0];
512 |     } else {
513 |       if (this.elt.type === 'range') {
514 |         return parseFloat(this.elt.value);
515 |       }
516 |       else return this.elt.value;
517 |     }
518 |   };
519 | 
520 |   /**
521 |    * 
522 |    * Shows the current element. Essentially, setting display:block for the style.
523 |    * 
524 |    * @method show
525 |    */
526 |   p5.Element.prototype.show = function() {
527 |     this.elt.style.display = 'block';
528 |   };
529 | 
530 |   /**
531 |    * Hides the current element. Essentially, setting display:none for the style.
532 |    * 
533 |    * @method hide
534 |    */
535 |   p5.Element.prototype.hide = function() {
536 |     this.elt.style.display = 'none';
537 |   };
538 | 
539 |   /**
540 |    * 
541 |    * Sets the width and height of the element. AUTO can be used to
542 |    * only adjust one dimension.
543 |    * 
544 |    * @method size
545 |    * @param  {Number} w width of the element
546 |    * @param  {Number} h height of the element
547 |    */
548 |   p5.Element.prototype.size = function(w, h) {
549 |     var aW = w;
550 |     var aH = h;
551 |     var AUTO = p5.prototype.AUTO;
552 | 
553 |     if (aW !== AUTO || aH !== AUTO) {
554 |       if (aW === AUTO) {
555 |         aW = h * this.elt.width / this.elt.height;
556 |       } else if (aH === AUTO) {
557 |         aH = w * this.elt.height / this.elt.width;
558 |       }
559 |       // set diff for cnv vs normal div
560 |       if (this.elt instanceof HTMLCanvasElement) {
561 |         this.elt.setAttribute('width', aW * this._pInst._pixelDensity);
562 |         this.elt.setAttribute('height', aH * this._pInst._pixelDensity);
563 |         this.elt.setAttribute('style', 'width:' + aW + 'px !important; height:' + aH + 'px !important;');
564 |       } else {
565 |         this.elt.style.width = aW+'px';
566 |         this.elt.style.height = aH+'px';
567 |       }
568 |       this.width = this.elt.offsetWidth;
569 |       this.height = this.elt.offsetHeight;
570 |       if (this._pInst) { // main canvas associated with p5 instance
571 |         if (this._pInst._curElement.elt === this.elt) {
572 |           this._pInst._setProperty('width', this.elt.offsetWidth);
573 |           this._pInst._setProperty('height', this.elt.offsetHeight);
574 |         }
575 |       }
576 |     }
577 |   };
578 | 
579 |   /**
580 |    * Removes the element and deregisters all listeners.
581 |    * 
582 |    * @method remove
583 |    */
584 |   p5.Element.prototype.remove = function() {
585 |     // deregister events
586 |     for (var ev in this._events) {
587 |       this.elt.removeEventListener(ev, this._events[ev]);
588 |     }
589 |     if (this.elt.parentNode) {
590 |       this.elt.parentNode.removeChild(this.elt);
591 |     }
592 |     delete(this);
593 |   };
594 | 
595 | 
596 | 
597 | // =============================================================================
598 | //                         p5.MediaElement additions
599 | // =============================================================================
600 | 
601 | 
602 |   /**
603 |    * Extends p5.Element to handle audio and video. In addition to the methods
604 |    * of p5.Element, it also contains methods for controlling media. It is not
605 |    * called directly, but p5.MediaElements are created by calling createVideo,
606 |    * createAudio, and createCapture.
607 |    *
608 |    * @class p5.MediaElement
609 |    * @constructor
610 |    * @param {String} elt DOM node that is wrapped
611 |    * @param {Object} [pInst] pointer to p5 instance
612 |    */
613 |   p5.MediaElement = function(elt, pInst) {
614 |     p5.Element.call(this, elt, pInst);
615 |   };
616 |   p5.MediaElement.prototype = Object.create(p5.Element.prototype);
617 | 
618 | 
619 | 
620 | 
621 |   /**
622 |    * Play an HTML5 media element.
623 |    * 
624 |    * @method play
625 |    */
626 |   p5.MediaElement.prototype.play = function() {
627 |     if (this.elt.currentTime === this.elt.duration) {
628 |       this.elt.currentTime = 0;
629 |     }
630 |     this.elt.play();
631 |   };  
632 | 
633 |   /**
634 |    * Stops an HTML5 media element (sets current time to zero).
635 |    * 
636 |    * @method stop
637 |    */
638 |   p5.MediaElement.prototype.stop = function() {
639 |     this.elt.pause();
640 |     this.elt.currentTime = 0;
641 |   };  
642 | 
643 |   /**
644 |    * Pauses an HTML5 media element.
645 |    * 
646 |    * @method pause
647 |    */
648 |   p5.MediaElement.prototype.pause = function() {
649 |     this.elt.pause();
650 |   };  
651 | 
652 |   /**
653 |    * Set 'loop' to true for an HTML5 media element, and starts playing.
654 |    * 
655 |    * @method loop
656 |    */
657 |   p5.MediaElement.prototype.loop = function() {
658 |     this.elt.setAttribute('loop', true);
659 |     this.play();
660 |   };
661 |   /**
662 |    * Set 'loop' to false for an HTML5 media element. Element will stop
663 |    * when it reaches the end.
664 |    * 
665 |    * @method noLoop
666 |    */
667 |   p5.MediaElement.prototype.noLoop = function() {
668 |     this.elt.setAttribute('loop', false);
669 |   };
670 | 
671 | 
672 |   /**
673 |    * Set HTML5 media element to autoplay or not.
674 |    * 
675 |    * @method autoplay
676 |    * @param {Boolean} autoplay whether the element should autoplay
677 |    */
678 |   p5.MediaElement.prototype.autoplay = function(val) {
679 |     this.elt.setAttribute('autoplay', val);
680 |   };
681 | 
682 |   /**
683 |    * Sets volume for this HTML5 media element. If no argument is given,
684 |    * returns the current volume;
685 |    * 
686 |    * @param {Number} [val] volume between 0.0 and 1.0
687 |    * @return {Number} current volume
688 |    * @method volume
689 |    */
690 |   p5.MediaElement.prototype.volume = function(val) {
691 |     if (typeof val === 'undefined') {
692 |       return this.elt.volume;
693 |     } else {
694 |       this.elt.volume = val;
695 |     }
696 |   };
697 | 
698 |   /**
699 |    * If no arguments are given, returns the current time of the elmeent.
700 |    * If an argument is given the current time of the element is set to it.
701 |    * 
702 |    * @method time
703 |    * @param {Number} [time] time to jump to (in seconds)
704 |    * @return {Number} current time (in seconds)
705 |    */
706 |   p5.MediaElement.prototype.time = function(val) {
707 |     if (typeof val === 'undefined') {
708 |       return this.elt.currentTime;
709 |     } else {
710 |       this.elt.currentTime = val;
711 |     }
712 |   };
713 | 
714 |   /**
715 |    * Returns the duration of the HTML5 media element.
716 |    * 
717 |    * @method duration
718 |    * @return {Number} duration
719 |    */
720 |   p5.MediaElement.prototype.duration = function() {
721 |     return this.elt.duration;
722 |   };
723 |   p5.MediaElement.prototype.stop = function() {
724 |     this.elt.pause();
725 |     this.elt.currentTime = 0;
726 |   };
727 |   p5.MediaElement.prototype.pixels = [];
728 |   p5.MediaElement.prototype.loadPixels = function() {
729 |     if (this.loadedmetadata) { // wait for metadata for w/h
730 |       if (!this.canvas) {
731 |         this.canvas = document.createElement('canvas');
732 |         this.canvas.width = this.width;
733 |         this.canvas.height = this.height;
734 |         this.canvas.getContext('2d').drawImage(this.elt, 0, 0);
735 |         p5.prototype.loadPixels.call(this);
736 |       } else {
737 |         this.canvas.getContext('2d').drawImage(this.elt, 0, 0);
738 |         p5.prototype.loadPixels.call(this);
739 |       }
740 |     }
741 |   }
742 |   p5.MediaElement.prototype.updatePixels =  function(x, y, w, h){
743 |     if (this.loadedmetadata) { // wait for metadata
744 |       p5.prototype.updatePixels.call(this, x, y, w, h);
745 |     }
746 |   }
747 |   p5.MediaElement.prototype.get = function(x, y, w, h){
748 |     if (this.loadedmetadata) { // wait for metadata
749 |       return p5.prototype.get.call(this, x, y, w, h);
750 |     } else return [0, 0, 0, 255];
751 |   };
752 |   p5.MediaElement.prototype.set = function(x, y, imgOrCol){
753 |     if (this.loadedmetadata) { // wait for metadata
754 |       p5.prototype.set.call(this, x, y, imgOrCol);
755 |     }
756 |   };
757 | 
758 | })();
759 | 


--------------------------------------------------------------------------------
/addons/p5.svg.js:
--------------------------------------------------------------------------------
  1 | /*!!
  2 |  *  Canvas 2 Svg v1.0.4
  3 |  *  A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
  4 |  *
  5 |  *  Licensed under the MIT license:
  6 |  *  http://www.opensource.org/licenses/mit-license.php
  7 |  *
  8 |  *  Author:
  9 |  *  Kerry Liu
 10 |  *
 11 |  *  Copyright (c) 2014 Gliffy Inc.
 12 |  */
 13 | 
 14 | ;(function() {
 15 |     "use strict";
 16 | 
 17 |     var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities;
 18 | 
 19 |     //helper function to format a string
 20 |     function format(str, args) {
 21 |         var keys = Object.keys(args), i;
 22 |         for (i=0; i<keys.length; i++) {
 23 |             str = str.replace(new RegExp("\\{" + keys[i] + "\\}", "gi"), args[keys[i]]);
 24 |         }
 25 |         return str;
 26 |     }
 27 | 
 28 |     //helper function that generates a random string
 29 |     function randomString(holder) {
 30 |         var chars, randomstring, i;
 31 |         if (!holder) {
 32 |             throw new Error("cannot create a random attribute name for an undefined object");
 33 |         }
 34 |         chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
 35 |         randomstring = "";
 36 |         do {
 37 |             randomstring = "";
 38 |             for (i = 0; i < 12; i++) {
 39 |                 randomstring += chars[Math.floor(Math.random() * chars.length)];
 40 |             }
 41 |         } while (holder[randomstring]);
 42 |         return randomstring;
 43 |     }
 44 | 
 45 |     //helper function to map named to numbered entities
 46 |     function createNamedToNumberedLookup(items, radix) {
 47 |         var i, entity, lookup = {}, base10, base16;
 48 |         items = items.split(',');
 49 |         radix = radix || 10;
 50 |         // Map from named to numbered entities.
 51 |         for (i = 0; i < items.length; i += 2) {
 52 |             entity = '&' + items[i + 1] + ';';
 53 |             base10 = parseInt(items[i], radix);
 54 |             lookup[entity] = '&#'+base10+';';
 55 |         }
 56 |         //FF and IE need to create a regex from hex values ie &nbsp; == \xa0
 57 |         lookup["\\xa0"] = '&#160;';
 58 |         return lookup;
 59 |     }
 60 | 
 61 |     // Unpack entities lookup where the numbers are in radix 32 to reduce the size
 62 |     // entity mapping courtesy of tinymce
 63 |     namedEntities = createNamedToNumberedLookup(
 64 |         '50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' +
 65 |             '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' +
 66 |             '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' +
 67 |             '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' +
 68 |             '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' +
 69 |             '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' +
 70 |             '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' +
 71 |             '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' +
 72 |             '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' +
 73 |             '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' +
 74 |             'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' +
 75 |             'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' +
 76 |             't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' +
 77 |             'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' +
 78 |             'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' +
 79 |             '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' +
 80 |             '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' +
 81 |             '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' +
 82 |             '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' +
 83 |             '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' +
 84 |             'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' +
 85 |             'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' +
 86 |             'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' +
 87 |             '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' +
 88 |             '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32);
 89 | 
 90 | 
 91 |     //Some basic mappings for attributes and default values.
 92 |     STYLES = {
 93 |         "strokeStyle":{
 94 |             svgAttr : "stroke", //corresponding svg attribute
 95 |             canvas : "#000000", //canvas default
 96 |             svg : "none",       //svg default
 97 |             apply : "stroke"    //apply on stroke() or fill()
 98 |         },
 99 |         "fillStyle":{
100 |             svgAttr : "fill",
101 |             canvas : "#000000",
102 |             svg : null, //svg default is black, but we need to special case this to handle canvas stroke without fill
103 |             apply : "fill"
104 |         },
105 |         "lineCap":{
106 |             svgAttr : "stroke-linecap",
107 |             canvas : "butt",
108 |             svg : "butt",
109 |             apply : "stroke"
110 |         },
111 |         "lineJoin":{
112 |             svgAttr : "stroke-linejoin",
113 |             canvas : "miter",
114 |             svg : "miter",
115 |             apply : "stroke"
116 |         },
117 |         "miterLimit":{
118 |             svgAttr : "stroke-miterlimit",
119 |             canvas : 10,
120 |             svg : 4,
121 |             apply : "stroke"
122 |         },
123 |         "lineWidth":{
124 |             svgAttr : "stroke-width",
125 |             canvas : 1,
126 |             svg : 1,
127 |             apply : "stroke"
128 |         },
129 |         "globalAlpha": {
130 |             svgAttr : "opacity",
131 |             canvas : 1,
132 |             svg : 1,
133 |             apply : "fill stroke"
134 |         },
135 |         "font":{
136 |             //font converts to multiple svg attributes, there is custom logic for this
137 |             canvas : "10px sans-serif"
138 |         },
139 |         "shadowColor":{
140 |             canvas : "#000000"
141 |         },
142 |         "shadowOffsetX":{
143 |             canvas : 0
144 |         },
145 |         "shadowOffsetY":{
146 |             canvas : 0
147 |         },
148 |         "shadowBlur":{
149 |             canvas : 0
150 |         },
151 |         "textAlign":{
152 |             canvas : "start"
153 |         },
154 |         "textBaseline":{
155 |             canvas : "alphabetic"
156 |         }
157 |     };
158 | 
159 |     /**
160 |      *
161 |      * @param gradientNode - reference to the gradient
162 |      * @constructor
163 |      */
164 |     CanvasGradient = function(gradientNode) {
165 |         this.__root = gradientNode;
166 |     };
167 | 
168 |     /**
169 |      * Adds a color stop to the gradient root
170 |      */
171 |     CanvasGradient.prototype.addColorStop = function(offset, color) {
172 |         var stop = document.createElementNS("http://www.w3.org/2000/svg", "stop"), regex, matches;
173 |         stop.setAttribute("offset", offset);
174 |         if(color.indexOf("rgba") !== -1) {
175 |             //separate alpha value, since webkit can't handle it
176 |             regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
177 |             matches = regex.exec(color);
178 |             stop.setAttribute("stop-color", format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
179 |             stop.setAttribute("stop-opacity", matches[4]);
180 |         } else {
181 |             stop.setAttribute("stop-color", color);
182 |         }
183 |         this.__root.appendChild(stop);
184 |     };
185 | 
186 |     CanvasPattern = function(pattern, ctx) {
187 |         this.__root = pattern;
188 |         this.__ctx = ctx;
189 |     };
190 | 
191 |     /**
192 |      * The mock canvas context
193 |      * @param o - options include:
194 |      * width - width of your canvas (defaults to 500)
195 |      * height - height of your canvas (defaults to 500)
196 |      * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
197 |      */
198 |     ctx = function(o) {
199 | 
200 |         var defaultOptions = { width:500, height:500, enableMirroring : false }, options;
201 | 
202 |         //keep support for this way of calling C2S: new C2S(width,height)
203 |         if(arguments.length > 1) {
204 |             options = defaultOptions;
205 |             options.width = arguments[0];
206 |             options.height = arguments[1];
207 |         } else if( !o ) {
208 |             options = defaultOptions;
209 |         } else {
210 |             options = o;
211 |         }
212 | 
213 |         if(!(this instanceof ctx)) {
214 |             //did someone call this without new?
215 |             return new ctx(options);
216 |         }
217 | 
218 |         //setup options
219 |         this.width = options.width || defaultOptions.width;
220 |         this.height = options.height || defaultOptions.height;
221 |         this.enableMirroring = options.enableMirroring !== undefined ? options.enableMirroring : defaultOptions.enableMirroring;
222 | 
223 |         this.canvas = this;   ///point back to this instance!
224 |         this.__canvas = document.createElement("canvas");
225 |         this.__ctx = this.__canvas.getContext("2d");
226 | 
227 |         this.__setDefaultStyles();
228 |         this.__stack = [this.__getStyleState()];
229 |         this.__groupStack = [];
230 | 
231 |         //the root svg element
232 |         this.__root = document.createElementNS("http://www.w3.org/2000/svg", "svg");
233 |         this.__root.setAttribute("version", 1.1);
234 |         this.__root.setAttribute("xmlns", "http://www.w3.org/2000/svg");
235 |         this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
236 |         this.__root.setAttribute("width", this.width);
237 |         this.__root.setAttribute("height", this.height);
238 | 
239 |         //make sure we don't generate the same ids in defs
240 |         this.__ids = {};
241 | 
242 |         //defs tag
243 |         this.__defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
244 |         this.__root.appendChild(this.__defs);
245 | 
246 |         //also add a group child. the svg element can't use the transform attribute
247 |         this.__currentElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
248 |         this.__root.appendChild(this.__currentElement);
249 | 
250 |     };
251 | 
252 |     /**
253 |      * Creates the specified svg element
254 |      * @private
255 |      */
256 |     ctx.prototype.__createElement = function(elementName, properties, resetFill) {
257 |         var element = document.createElementNS("http://www.w3.org/2000/svg", elementName),
258 |             keys = Object.keys(properties), i, key;
259 |         if(resetFill) {
260 |             //if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black.
261 |             element.setAttribute("fill", "none");
262 |             element.setAttribute("stroke", "none");
263 |         }
264 |         for(i=0; i<keys.length; i++) {
265 |             key = keys[i];
266 |             element.setAttribute(key, properties[key]);
267 |         }
268 |         return element;
269 |     };
270 | 
271 |     /**
272 |      * Applies default canvas styles to the context
273 |      * @private
274 |      */
275 |     ctx.prototype.__setDefaultStyles = function() {
276 |         //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
277 |         var keys = Object.keys(STYLES), i, key;
278 |         for(i=0; i<keys.length; i++) {
279 |             key = keys[i];
280 |             this[key] = STYLES[key].canvas;
281 |         }
282 |     };
283 | 
284 |     /**
285 |      * Applies styles on restore
286 |      * @param styleState
287 |      * @private
288 |      */
289 |     ctx.prototype.__applyStyleState = function(styleState) {
290 |         var keys = Object.keys(styleState), i, key;
291 |         for(i=0; i<keys.length; i++) {
292 |             key = keys[i];
293 |             this[key] = styleState[key];
294 |         }
295 |     };
296 | 
297 |     /**
298 |      * Gets the current style state
299 |      * @return {Object}
300 |      * @private
301 |      */
302 |     ctx.prototype.__getStyleState = function() {
303 |         var i, styleState = {}, keys = Object.keys(STYLES), key;
304 |         for(i=0; i<keys.length; i++) {
305 |             key = keys[i];
306 |             styleState[key] = this[key];
307 |         }
308 |         return styleState;
309 |     };
310 | 
311 |     /**
312 |      * Apples the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke"
313 |      * @param type
314 |      * @private
315 |      */
316 |     ctx.prototype.__applyStyleToCurrentElement = function(type) {
317 |         var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
318 |         for(i=0; i<keys.length; i++) {
319 |             style = STYLES[keys[i]];
320 |             value = this[keys[i]];
321 |             if(style.apply) {
322 |                 //is this a gradient or pattern?
323 |                 if(style.apply.indexOf("fill")!==-1 && value instanceof CanvasPattern) {
324 |                     //pattern
325 |                     if(value.__ctx) {
326 |                         //copy over defs
327 |                         while(value.__ctx.__defs.childNodes.length) {
328 |                             id = value.__ctx.__defs.childNodes[0].getAttribute("id");
329 |                             this.__ids[id] = id;
330 |                             this.__defs.appendChild(value.__ctx.__defs.childNodes[0]);
331 |                         }
332 |                     }
333 |                     this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")}));
334 |                 }
335 |                 else if(style.apply.indexOf("fill")!==-1 && value instanceof CanvasGradient) {
336 |                     //gradient
337 |                     this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")}));
338 |                 } else if(style.apply.indexOf(type)!==-1 && style.svg !== value) {
339 |                     if((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
340 |                         //separate alpha value, since illustrator can't handle it
341 |                         regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
342 |                         matches = regex.exec(value);
343 |                         this.__currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
344 |                         this.__currentElement.setAttribute(style.svgAttr+"-opacity", matches[4]);
345 |                     } else {
346 |                         //otherwise only update attribute if right type, and not svg default
347 |                         this.__currentElement.setAttribute(style.svgAttr, value);
348 |                     }
349 |                 }
350 |             }
351 |         }
352 | 
353 |     };
354 | 
355 |     /**
356 |      * Will return the closest group or svg node. May return the current element.
357 |      * @private
358 |      */
359 |     ctx.prototype.__closestGroupOrSvg = function(node) {
360 |         node = node || this.__currentElement;
361 |         if(node.nodeName === "g" || node.nodeName === "svg") {
362 |             return node;
363 |         } else {
364 |             return this.__closestGroupOrSvg(node.parentNode);
365 |         }
366 |     };
367 | 
368 |     /**
369 |      * Returns the serialized value of the svg so far
370 |      * @param fixNamedEntities - Standalone SVG doesn't support named entities, which document.createTextNode encodes.
371 |      *                           If true, we attempt to find all named entities and encode it as a numeric entity.
372 |      * @return serialized svg
373 |      */
374 |     ctx.prototype.getSerializedSvg = function(fixNamedEntities) {
375 |         var serialized = new XMLSerializer().serializeToString(this.__root),
376 |             keys, i, key, value, regexp, xmlns;
377 | 
378 |         //IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly
379 |         xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi;
380 |         if(xmlns.test(serialized)) {
381 |             serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink');
382 |         }
383 | 
384 |         if(fixNamedEntities) {
385 |             keys = Object.keys(namedEntities);
386 |             //loop over each named entity and replace with the proper equivalent.
387 |             for(i=0; i<keys.length; i++) {
388 |                 key = keys[i];
389 |                 value = namedEntities[key];
390 |                 regexp = new RegExp(key, "gi");
391 |                 if(regexp.test(serialized)) {
392 |                     serialized = serialized.replace(regexp, value);
393 |                 }
394 |             }
395 |         }
396 | 
397 |         return serialized;
398 |     };
399 | 
400 | 
401 |     /**
402 |      * Returns the root svg
403 |      * @return
404 |      */
405 |     ctx.prototype.getSvg = function() {
406 |         return this.__root;
407 |     };
408 |     /**
409 |      * Will generate a group tag.
410 |      */
411 |     ctx.prototype.save = function() {
412 |         var group = document.createElementNS("http://www.w3.org/2000/svg", "g"), parent = this.__closestGroupOrSvg();
413 |         this.__groupStack.push(parent);
414 |         parent.appendChild(group);
415 |         this.__currentElement = group;
416 |         this.__stack.push(this.__getStyleState());
417 |     };
418 |     /**
419 |      * Sets current element to parent, or just root if already root
420 |      */
421 |     ctx.prototype.restore = function(){
422 |         this.__currentElement = this.__groupStack.pop();
423 |         var state = this.__stack.pop();
424 |         this.__applyStyleState(state);
425 | 
426 |     };
427 | 
428 |     /**
429 |      * Helper method to add transform
430 |      * @private
431 |      */
432 |     ctx.prototype.__addTransform = function(t) {
433 |         var transform = this.__currentElement.getAttribute("transform");
434 |         if(transform) {
435 |             transform += " ";
436 |         } else {
437 |             transform = "";
438 |         }
439 |         transform += t;
440 |         this.__currentElement.setAttribute("transform", transform);
441 |     };
442 | 
443 |     /**
444 |      *  scales the current element
445 |      */
446 |     ctx.prototype.scale = function(x, y) {
447 |         if(y === undefined) {
448 |             y = x;
449 |         }
450 |         this.__addTransform(format("scale({x},{y})", {x:x, y:y}));
451 |     };
452 | 
453 |     /**
454 |      * rotates the current element
455 |      */
456 |     ctx.prototype.rotate = function(angle){
457 |         var degrees = (angle * 180 / Math.PI);
458 |         this.__addTransform(format("rotate({angle},{cx},{cy})", {angle:degrees, cx:0, cy:0}));
459 |     };
460 | 
461 |     /**
462 |      * translates the current element
463 |      */
464 |     ctx.prototype.translate = function(x, y){
465 |         this.__addTransform(format("translate({x},{y})", {x:x,y:y}));
466 |     };
467 | 
468 |     /**
469 |      * applies a transform to the current element
470 |      */
471 |     ctx.prototype.transform = function(a, b, c, d, e, f){
472 |         this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a:a, b:b, c:c, d:d, e:e, f:f}));
473 |     };
474 | 
475 |     /**
476 |      * Create a new Path Element
477 |      */
478 |     ctx.prototype.beginPath = function(){
479 |         var path, parent;
480 |         path = this.__createElement("path", {}, true);
481 |         parent = this.__closestGroupOrSvg();
482 |         parent.appendChild(path);
483 |         this.__currentElement = path;
484 |     };
485 | 
486 |     /**
487 |      * Helper function to add path command
488 |      * @private
489 |      */
490 |     ctx.prototype.__addPathCommand = function(command){
491 |         if(this.__currentElement.nodeName === "path") {
492 |             var d = this.__currentElement.getAttribute("d");
493 |             if(d) {
494 |                 d += " ";
495 |             } else {
496 |                 d = "";
497 |             }
498 |             d += command;
499 |             this.__currentElement.setAttribute("d", d);
500 |         } else {
501 |             throw new Error("Attempted to add path command to node " + this.__currentElement.nodeName);
502 |         }
503 |     };
504 | 
505 |     /**
506 |      * Adds the move command to the current path element,
507 |      * if the currentPathElement is not empty create a new path element
508 |      */
509 |     ctx.prototype.moveTo = function(x,y){
510 |         this.__addPathCommand(format("M {x} {y}", {x:x, y:y}));
511 |     };
512 | 
513 |     /**
514 |      * Closes the current path
515 |      */
516 |     ctx.prototype.closePath = function(){
517 |         this.__addPathCommand("Z");
518 |     };
519 | 
520 |     /**
521 |      * Adds a line to command
522 |      */
523 |     ctx.prototype.lineTo = function(x, y){
524 |         this.__addPathCommand(format("L {x} {y}", {x:x, y:y}));
525 |     };
526 | 
527 |     /**
528 |      * Add a bezier command
529 |      */
530 |     ctx.prototype.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
531 |         this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
532 |             {cp1x:cp1x, cp1y:cp1y, cp2x:cp2x, cp2y:cp2y, x:x, y:y}));
533 |     };
534 | 
535 |     /**
536 |      * Adds a quadratic curve to command
537 |      */
538 |     ctx.prototype.quadraticCurveTo = function(cpx, cpy, x, y){
539 |         this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {cpx:cpx, cpy:cpy, x:x, y:y}));
540 |     };
541 | 
542 |     /**
543 |      * Sets the stroke property on the current element
544 |      */
545 |     ctx.prototype.stroke = function(){
546 |         this.__applyStyleToCurrentElement("stroke");
547 |     };
548 | 
549 |     /**
550 |      * Sets fill properties on the current element
551 |      */
552 |     ctx.prototype.fill = function(){
553 |         this.__applyStyleToCurrentElement("fill");
554 |     };
555 | 
556 |     /**
557 |      *  Adds a rectangle to the path.
558 |      */
559 |     ctx.prototype.rect = function(x, y, width, height){
560 |         if(this.__currentElement.nodeName !== "path") {
561 |             this.beginPath();
562 |         }
563 |         this.moveTo(x, y);
564 |         this.lineTo(x+width, y);
565 |         this.lineTo(x+width, y+height);
566 |         this.lineTo(x, y+height);
567 |         this.lineTo(x, y);
568 |         this.closePath();
569 |     };
570 | 
571 | 
572 |     /**
573 |      * adds a rectangle element
574 |      */
575 |     ctx.prototype.fillRect = function(x, y, width, height){
576 |         var rect, parent;
577 |         rect = this.__createElement("rect", {
578 |             x : x,
579 |             y : y,
580 |             width : width,
581 |             height : height
582 |         }, true);
583 |         parent = this.__closestGroupOrSvg();
584 |         parent.appendChild(rect);
585 |         this.__currentElement = rect;
586 |         this.__applyStyleToCurrentElement("fill");
587 |     };
588 | 
589 |     /**
590 |      * Draws a rectangle with no fill
591 |      * @param x
592 |      * @param y
593 |      * @param width
594 |      * @param height
595 |      */
596 |     ctx.prototype.strokeRect = function(x, y, width, height){
597 |         var rect, parent;
598 |         rect = this.__createElement("rect", {
599 |             x : x,
600 |             y : y,
601 |             width : width,
602 |             height : height
603 |         }, true);
604 |         parent = this.__closestGroupOrSvg();
605 |         parent.appendChild(rect);
606 |         this.__currentElement = rect;
607 |         this.__applyStyleToCurrentElement("stroke");
608 |     };
609 | 
610 | 
611 |     /**
612 |      * "Clears" a canvas by just drawing a white rectangle in the current group.
613 |      */
614 |     ctx.prototype.clearRect = function(x, y, width, height) {
615 |         var rect, parent = this.__closestGroupOrSvg();
616 |         rect = this.__createElement("rect", {
617 |             x : x,
618 |             y : y,
619 |             width : width,
620 |             height : height,
621 |             fill : "#FFFFFF"
622 |         }, true);
623 |         parent.appendChild(rect);
624 |     };
625 | 
626 |     /**
627 |      * Adds a linear gradient to a defs tag.
628 |      * Returns a canvas gradient object that has a reference to it's parent def
629 |      */
630 |     ctx.prototype.createLinearGradient = function(x1, y1, x2, y2){
631 |         var grad = this.__createElement("linearGradient", {
632 |             id : randomString(this.__ids),
633 |             x1 : x1+"px",
634 |             x2 : x2+"px",
635 |             y1 : y1+"px",
636 |             y2 : y2+"px",
637 |             "gradientUnits" : "userSpaceOnUse"
638 |         }, false);
639 |         this.__defs.appendChild(grad);
640 |         return new CanvasGradient(grad);
641 |     };
642 | 
643 |     /**
644 |      * Adds a radial gradient to a defs tag.
645 |      * Returns a canvas gradient object that has a reference to it's parent def
646 |      */
647 |     ctx.prototype.createRadialGradient = function(x0, y0, r0, x1, y1, r1){
648 |         var grad = this.__createElement("radialGradient", {
649 |             id : randomString(this.__ids),
650 |             cx : x1+"px",
651 |             cy : y1+"px",
652 |             r  : r1+"px",
653 |             fx : x0+"px",
654 |             fy : y0+"px",
655 |             "gradientUnits" : "userSpaceOnUse"
656 |         }, false);
657 |         this.__defs.appendChild(grad);
658 |         return new CanvasGradient(grad);
659 | 
660 |     };
661 | 
662 |     /**
663 |      * Parses the font string and returns svg mapping
664 |      * @private
665 |      */
666 |     ctx.prototype.__parseFont = function() {
667 |         var font = this.font, parts, token, index = 0, data = {
668 |             style : "normal",
669 |             size : "10px",
670 |             family : "sans-serif",
671 |             weight: "normal",
672 |             decoration : "none", //underline | none
673 |             href : null
674 |         };
675 | 
676 |         //canvas doesn't support underline natively, but we can pass this attribute
677 |         if(this.__fontUnderline === "underline") {
678 |             data.decoration = "underline";
679 |         }
680 | 
681 |         //canvas also doesn't support linking, but we can pass this as well
682 |         if(this.__fontHref) {
683 |             data.href = this.__fontHref;
684 |         }
685 | 
686 |         parts = font.split(" ");
687 |         token = parts[index];
688 | 
689 |         //text decoration
690 |         while(/italic|bold|normal/.test(token)) {
691 |             if(token === "bold") {
692 |                 data.weight = token; //[normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit]
693 |             } else {
694 |                 data.style = token; //[normal / italic /oblique /inherit]
695 |             }
696 |             //advance to next token
697 |             index++;
698 |             token = parts[index];
699 |         }
700 | 
701 |         //next token should be font size
702 |         if(/em|px|pt|%/.test(token)) {
703 |             data.size = token;
704 |             index++;
705 |         }
706 | 
707 |         //font family?
708 |         parts.splice(0, index);
709 |         data.family = parts.join(" ");
710 | 
711 |         return data;
712 |     };
713 | 
714 |     /**
715 |      * Helper to link text fragments
716 |      * @param font
717 |      * @param element
718 |      * @return {*}
719 |      * @private
720 |      */
721 |     ctx.prototype.__wrapTextLink = function(font, element) {
722 |         if(font.href) {
723 |             var a = document.createElementNS("http://www.w3.org/2000/svg", "a");
724 |             a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
725 |             a.appendChild(element);
726 |             return a;
727 |         }
728 |         return element;
729 |     };
730 | 
731 |     /**
732 |      * Fills or strokes text
733 |      * @param text
734 |      * @param x
735 |      * @param y
736 |      * @param action - stroke or fill
737 |      * @private
738 |      */
739 |     ctx.prototype.__applyText = function(text, x, y, action) {
740 |         var font = this.__parseFont(),
741 |             parent = this.__closestGroupOrSvg(),
742 |             textElement = this.__createElement("text", {
743 |                 "font-family" : font.family,
744 |                 "font-size" : font.size,
745 |                 "font-style" : font.style,
746 |                 "font-weight" : font.weight,
747 |                 "text-decoration" : font.decoration,
748 |                 "x" : x,
749 |                 "y" : y
750 |             }, true);
751 | 
752 |         textElement.appendChild(document.createTextNode(text));
753 |         this.__currentElement = textElement;
754 |         this.__applyStyleToCurrentElement(action);
755 |         parent.appendChild(this.__wrapTextLink(font,textElement));
756 |     };
757 | 
758 |     /**
759 |      * Creates a text element
760 |      * @param text
761 |      * @param x
762 |      * @param y
763 |      */
764 |     ctx.prototype.fillText = function(text, x, y){
765 |         this.__applyText(text, x, y, "fill");
766 |     };
767 | 
768 |     /**
769 |      * Strokes text
770 |      * @param text
771 |      * @param x
772 |      * @param y
773 |      */
774 |     ctx.prototype.strokeText = function(text, x, y){
775 |         this.__applyText(text, x, y, "stroke");
776 |     };
777 | 
778 |     /**
779 |      * No need to implement this for svg.
780 |      * @param text
781 |      * @return {TextMetrics}
782 |      */
783 |     ctx.prototype.measureText = function(text){
784 |         return this.__ctx.measureText(text);
785 |     };
786 | 
787 |     /**
788 |      *  Arc command!
789 |      */
790 |     ctx.prototype.arc = function(x, y, radius, startAngle, endAngle, counterClockwise) {
791 |         startAngle = startAngle % (2*Math.PI);
792 |         endAngle = endAngle % (2*Math.PI);
793 |         if(startAngle === endAngle) {
794 |             //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
795 |             endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
796 |         }
797 |         var endX = x+radius*Math.cos(endAngle),
798 |             endY = y+radius*Math.sin(endAngle),
799 |             startX = x+radius*Math.cos(startAngle),
800 |             startY = y+radius*Math.sin(startAngle),
801 |             sweepFlag = counterClockwise ? 0 : 1,
802 |             largeArcFlag = 0,
803 |             diff = endAngle - startAngle;
804 | 
805 |         // https://github.com/gliffy/canvas2svg/issues/4
806 |         if(diff < 0) {
807 |             diff += 2*Math.PI;
808 |         }
809 | 
810 |         if(counterClockwise) {
811 |             largeArcFlag = diff > Math.PI ? 0 : 1;
812 |         } else {
813 |             largeArcFlag = diff > Math.PI ? 1 : 0;
814 |         }
815 | 
816 |         this.moveTo(startX, startY);
817 |         this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
818 |             {rx:radius, ry:radius, xAxisRotation:0, largeArcFlag:largeArcFlag, sweepFlag:sweepFlag, endX:endX, endY:endY}));
819 | 
820 |     };
821 | 
822 |     /**
823 |      * Generates a ClipPath from the clip command.
824 |      */
825 |     ctx.prototype.clip = function(){
826 |         var group = this.__closestGroupOrSvg(),
827 |             clipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"),
828 |             id =  randomString(this.__ids),
829 |             newGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
830 | 
831 |         group.removeChild(this.__currentElement);
832 |         clipPath.setAttribute("id", id);
833 |         clipPath.appendChild(this.__currentElement);
834 | 
835 |         this.__defs.appendChild(clipPath);
836 | 
837 |         //set the clip path to this group
838 |         group.setAttribute("clip-path", format("url(#{id})", {id:id}));
839 | 
840 |         //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
841 |         // to this path
842 |         group.appendChild(newGroup);
843 | 
844 |         this.__currentElement = newGroup;
845 | 
846 |     };
847 | 
848 |     /**
849 |      * Draws a canvas, image or mock context to this canvas.
850 |      * Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
851 |      * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
852 |      */
853 |     ctx.prototype.drawImage = function(){
854 |         //convert arguments to a real array
855 |         var args = Array.prototype.slice.call(arguments),
856 |             image=args[0],
857 |             dx, dy, dw, dh, sx=0, sy=0, sw, sh, parent, svg, defs, group,
858 |             currentElement, svgImage, canvas, context, id;
859 | 
860 |         if(args.length === 3) {
861 |             dx = args[1];
862 |             dy = args[2];
863 |             sw = image.width;
864 |             sh = image.height;
865 |             dw = sw;
866 |             dh = sh;
867 |         } else if(args.length === 5) {
868 |             dx = args[1];
869 |             dy = args[2];
870 |             dw = args[3];
871 |             dh = args[4];
872 |             sw = image.width;
873 |             sh = image.height;
874 |         } else if(args.length === 9) {
875 |             sx = args[1];
876 |             sy = args[2];
877 |             sw = args[3];
878 |             sh = args[4];
879 |             dx = args[5];
880 |             dy = args[6];
881 |             dw = args[7];
882 |             dh = args[8];
883 |         } else {
884 |             throw new Error("Inavlid number of arguments passed to drawImage: " + arguments.length);
885 |         }
886 | 
887 |         parent = this.__closestGroupOrSvg();
888 |         currentElement = this.__currentElement;
889 | 
890 |         if(image instanceof ctx) {
891 |             //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
892 |             //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
893 |             svg = image.getSvg();
894 |             defs = svg.childNodes[0];
895 |             while(defs.childNodes.length) {
896 |                 id = defs.childNodes[0].getAttribute("id");
897 |                 this.__ids[id] = id;
898 |                 this.__defs.appendChild(defs.childNodes[0]);
899 |             }
900 |             group = svg.childNodes[1];
901 |             parent.appendChild(group);
902 |             this.__currentElement = group;
903 |             this.translate(dx, dy);
904 |             this.__currentElement = currentElement;
905 |         } else if(image.nodeName === "CANVAS" || image.nodeName === "IMG") {
906 |             //canvas or image
907 |             svgImage = document.createElementNS("http://www.w3.org/2000/svg", "image");
908 |             svgImage.setAttribute("width", dw);
909 |             svgImage.setAttribute("height", dh);
910 |             svgImage.setAttribute("preserveAspectRatio", "none");
911 | 
912 |             if(sx || sy || sw !== image.width || sh !== image.height) {
913 |                 //crop the image using a temporary canvas
914 |                 canvas = document.createElement("canvas");
915 |                 canvas.width = dw;
916 |                 canvas.height = dh;
917 |                 context = canvas.getContext("2d");
918 |                 context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
919 |                 image = canvas;
920 |             }
921 | 
922 |             svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
923 |                 image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
924 |             parent.appendChild(svgImage);
925 |             this.__currentElement = svgImage;
926 |             this.translate(dx, dy);
927 |             this.__currentElement = currentElement;
928 |         }
929 |     };
930 | 
931 |     /**
932 |      * Generates a pattern tag
933 |      */
934 |     ctx.prototype.createPattern = function(image, repetition){
935 |         var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
936 |             img;
937 |         pattern.setAttribute("id", id);
938 |         pattern.setAttribute("width", image.width);
939 |         pattern.setAttribute("height", image.height);
940 |         if(image.nodeName === "CANVAS" || image.nodeName === "IMG") {
941 |             img = document.createElementNS("http://www.w3.org/2000/svg", "image");
942 |             img.setAttribute("width", image.width);
943 |             img.setAttribute("height", image.height);
944 |             img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
945 |                 image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
946 |             pattern.appendChild(img);
947 |             this.__defs.appendChild(pattern);
948 |         } else if(image instanceof ctx) {
949 |             pattern.appendChild(image.__root.childNodes[1]);
950 |             this.__defs.appendChild(pattern);
951 |         }
952 |         return new CanvasPattern(pattern, this);
953 |     };
954 | 
955 |     /**
956 |      * Not yet implemented
957 |      */
958 |     ctx.prototype.drawFocusRing = function(){};
959 |     ctx.prototype.createImageData = function(){};
960 |     ctx.prototype.getImageData = function(){};
961 |     ctx.prototype.putImageData = function(){};
962 |     ctx.prototype.globalCompositeOperation = function(){};
963 |     ctx.prototype.arcTo = function(){};
964 |     ctx.prototype.setTransform = function(){};
965 | 
966 |     //add options for alternative namespace
967 |     window.C2S = ctx;
968 | 
969 | }());
970 | 
971 | var p5SVG = (function(){
972 | 
973 |   p5.prototype.beginRecord = function () {
974 |     this.orgDrawingContext = this.drawingContext;
975 |     this.drawingContext = new C2S(this.drawingContext.canvas.clientWidth, this.drawingContext.canvas.clientHeight);
976 |   };
977 | 
978 |   p5.prototype.endRecord = function () {
979 |     document.body.innerHTML += '<div class="svgExport"><h2>Exported SVG</h2>' + this.drawingContext.getSerializedSvg(true) + '</div>';
980 |     this.drawingContext = this.orgDrawingContext;
981 |   };
982 | 
983 | })();


--------------------------------------------------------------------------------
/empty-example/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runemadsen/p5-svg-test/5d7935461d1dfc3439ca3298b71c3132a40bc542/empty-example/.DS_Store


--------------------------------------------------------------------------------
/empty-example/index.html:
--------------------------------------------------------------------------------
1 | <head>
2 |   <script language="javascript" src="../p5.js"></script>
3 | 	<script language="javascript" src="../addons/p5.svg.js"></script>
4 |   <script language="javascript" src="sketch.js"></script>
5 |   <style> body {padding: 0;} </style> <!-- this line removes any default padding -->
6 | </head>
7 | 
8 | <body>
9 | </body>


--------------------------------------------------------------------------------
/empty-example/sketch.js:
--------------------------------------------------------------------------------
 1 | var exportSVG = false;
 2 | 
 3 | function setup() {
 4 |   createCanvas(500, 500);
 5 | }
 6 | 
 7 | function draw() {
 8 | 
 9 |   if(exportSVG) beginRecord();
10 |   
11 |   background(100);
12 |   fill(255, 0, 0);
13 |   ellipse(100, 100, 50, 50);
14 |   fill(0, 255, 0);
15 |   rect(200, 200, 200, 200);
16 |   
17 |   if(exportSVG)
18 |   {
19 |     exportSVG = false;
20 |     endRecord();
21 |   }
22 | }
23 | 
24 | function keyPressed()
25 | {
26 |   if(key == "S")
27 |   {
28 |     exportSVG = true;
29 |   }
30 | }


--------------------------------------------------------------------------------
/p5.min.js:
--------------------------------------------------------------------------------
1 | /*! p5.min.js v0.3.2 August 08, 2014 */
2 | 
3 | var shim=function(){window.requestDraw=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}()}({}),constants=function(){var t=Math.PI;return{ARROW:"default",CROSS:"crosshair",HAND:"pointer",MOVE:"move",TEXT:"text",WAIT:"wait",HALF_PI:t/2,PI:t,QUARTER_PI:t/4,TAU:2*t,TWO_PI:2*t,DEGREES:"degrees",RADIANS:"radians",CORNER:"corner",CORNERS:"corners",RADIUS:"radius",RIGHT:"right",LEFT:"left",CENTER:"center",POINTS:"points",LINES:"lines",TRIANGLES:"triangles",TRIANGLE_FAN:"triangles_fan",TRIANGLE_STRIP:"triangles_strip",QUADS:"quads",QUAD_STRIP:"quad_strip",CLOSE:"close",OPEN:"open",CHORD:"chord",PIE:"pie",PROJECT:"square",SQUARE:"butt",ROUND:"round",BEVEL:"bevel",MITER:"miter",RGB:"rgb",HSB:"hsb",AUTO:"auto",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,BLEND:"normal",ADDITIVE:"lighter",DARKEST:"darken",LIGHTEST:"lighten",DIFFERENCE:"difference",EXCLUSION:"exclusion",MULTIPLY:"multiply",SCREEN:"screen",REPLACE:"source-over",OVERLAY:"overlay",HARD_LIGHT:"hard-light",SOFT_LIGHT:"soft-light",DODGE:"color-dodge",BURN:"color-burn",NORMAL:"normal",ITALIC:"italic",BOLD:"bold",LINEAR:"linear",QUADRATIC:"quadratic",BEZIER:"bezier",CURVE:"curve"}}({}),core=function(t,e,r){"use strict";var r=r,o=function(t,e){this._setupDone=!1,this._pixelDensity=window.devicePixelRatio||1,this._startTime=(new Date).getTime(),this._userNode=e,this._curElement=null,this._elements=[],this._preloadCount=0,this._updateInterval=0,this._isGlobal=!1,this._loop=!0,this.styles=[],this._defaultCanvasSize={width:100,height:100},this._events={mousemove:null,mousedown:null,mouseup:null,click:null,mousewheel:null,mouseover:null,mouseout:null,keydown:null,keyup:null,keypress:null,touchstart:null,touchmove:null,touchend:null},this._start=function(){this._userNode&&"string"==typeof this._userNode&&(this._userNode=document.getElementById(this._userNode)),this.createCanvas(this._defaultCanvasSize.width,this._defaultCanvasSize.height,!0);var t=this.preload||window.preload,e=this._isGlobal?window:this;t?(this._preloadFuncs.forEach(function(t){e[t]=function(r){return e._preload(t,r)}}),t(),0===this._preloadCount&&(this._setup(),this._runFrames(),this._draw())):(this._setup(),this._runFrames(),this._draw())}.bind(this),this._preload=function(t,e){var r=this._isGlobal?window:this;return r._setProperty("_preloadCount",r._preloadCount+1),o.prototype[t].call(r,e,function(){r._setProperty("_preloadCount",r._preloadCount-1),0===r._preloadCount&&(r._setup(),r._runFrames(),r._draw())})}.bind(this),this._setup=function(){var t=this._isGlobal?window:this;"function"==typeof t.preload&&this._preloadFuncs.forEach(function(e){t[e]=o.prototype[e]}),"function"==typeof t.setup&&t.setup();for(var e=new RegExp(/(^|\s)p5_hidden(?!\S)/g),r=document.getElementsByClassName("p5_hidden"),n=0;n<r.length;n++){var i=r[n];i.style.visibility="",i.className=i.className.replace(e,"")}this._setupDone=!0}.bind(this),this._draw=function(){var t=this.setup||window.setup,e=(new Date).getTime();this._frameRate=1e3/(e-this._lastFrameTime),this._lastFrameTime=e;var r=this.draw||window.draw;this._loop&&(this._drawInterval&&clearInterval(this._drawInterval),this._drawInterval=setTimeout(function(){window.requestDraw(this._draw.bind(this))}.bind(this),1e3/this._targetFrameRate)),"function"==typeof r&&(this.push(),"undefined"==typeof t&&this.scale(this._pixelDensity,this._pixelDensity),r(),this.pop())}.bind(this),this._runFrames=function(){this._updateInterval&&clearInterval(this._updateInterval),this._updateInterval=setInterval(function(){this._setProperty("frameCount",this.frameCount+1)}.bind(this),1e3/this._targetFrameRate)}.bind(this),this._setProperty=function(t,e){this[t]=e,this._isGlobal&&(window[t]=e)}.bind(this),this.remove=function(){if(this._curElement){this._loop=!1,this._drawInterval&&clearTimeout(this._drawInterval),this._updateInterval&&clearTimeout(this._updateInterval);for(var t in this._events)window.removeEventListener(t,this._events[t]);for(var e=0;e<this._elements.length;e++){var r=this._elements[e];r.elt.parentNode&&r.elt.parentNode.removeChild(r.elt);for(var n in r._events)r.elt.removeEventListener(n,r._events[n])}var i=this;if(this._removeFuncs.forEach(function(t){i[t]()}),this._isGlobal){for(var s in o.prototype)delete window[s];for(var a in this)this.hasOwnProperty(a)&&delete window[a]}}};for(var n in r)o.prototype[n]=r[n];if(t)t(this);else{this._isGlobal=!0;for(var i in o.prototype)if("function"==typeof o.prototype[i]){var s=i.substring(2);this._events.hasOwnProperty(s)||(window[i]=o.prototype[i].bind(this))}else window[i]=o.prototype[i];for(var a in this)this.hasOwnProperty(a)&&(window[a]=this[a])}for(var u in this._events){var h=this["on"+u];if(h){var p=h.bind(this);window.addEventListener(u,p),this._events[u]=p}}var l=this;window.addEventListener("focus",function(){l._setProperty("focused",!0)}),window.addEventListener("blur",function(){l._setProperty("focused",!1)}),"complete"===document.readyState?this._start():window.addEventListener("load",this._start.bind(this),!1)};return o.prototype._preloadFuncs=["loadJSON","loadImage","loadStrings","loadXML","loadShape","loadTable"],o.prototype._removeFuncs=[],o.prototype._registerPreloadFunc=function(t){o.prototype._preloadFuncs.push(t)}.bind(this),o.prototype._registerRemoveFunc=function(t){o.prototype._removeFuncs.push(t)}.bind(this),o}({},shim,constants),p5Color=function(t,e,r){var o=e,r=r;return o.Color=function(t,e){if(e instanceof Array)this.rgba=e;else{var n=o.Color.getNormalizedColor.apply(t,e);t._colorMode===r.HSB?(this.hsba=n,this.rgba=o.Color.getRGB(this.hsba)):this.rgba=n}this.colorString=o.Color.getColorString(this.rgba)},o.Color.getNormalizedColor=function(){var t=this._colorMode===r.RGB,e=t?this._maxRGB:this._maxHSB;if(arguments[0]instanceof Array)return o.Color.getNormalizedColor.apply(this,arguments[0]);var n,i,s,a;return arguments.length>=3?(n=arguments[0],i=arguments[1],s=arguments[2],a="number"==typeof arguments[3]?arguments[3]:e[3]):(t?n=i=s=arguments[0]:(n=s=arguments[0],i=0),a="number"==typeof arguments[1]?arguments[1]:e[3]),n*=255/e[0],i*=255/e[1],s*=255/e[2],a*=255/e[3],[n,i,s,a]},o.Color.getRGB=function(t){var e=t[0],r=t[1],o=t[2];e/=255,r/=255,o/=255;var n=[];if(0===r)n=[Math.round(255*o),Math.round(255*o),Math.round(255*o),t[3]];else{var i=6*e;6===i&&(i=0);var s,a,u,h=Math.floor(i),p=o*(1-r),l=o*(1-r*(i-h)),c=o*(1-r*(1-(i-h)));0===h?(s=o,a=c,u=p):1===h?(s=l,a=o,u=p):2===h?(s=p,a=o,u=c):3===h?(s=p,a=l,u=o):4===h?(s=c,a=p,u=o):(s=o,a=p,u=l),n=[Math.round(255*s),Math.round(255*a),Math.round(255*u),t[3]]}return n},o.Color.getHSB=function(t){var e,r,o=t[0]/255,n=t[1]/255,i=t[2]/255,s=Math.min(o,n,i),a=Math.max(o,n,i),u=a-s,h=a;if(0===u)e=0,r=0;else{r=u/a;var p=((a-o)/6+u/2)/u,l=((a-n)/6+u/2)/u,c=((a-i)/6+u/2)/u;o===a?e=c-l:n===a?e=1/3+p-c:i===a&&(e=2/3+l-p),0>e&&(e+=1),e>1&&(e-=1)}return[Math.round(255*e),Math.round(255*r),Math.round(255*h),t[3]]},o.Color.getColorString=function(t){for(var e=0;3>e;e++)t[e]=Math.floor(t[e]);var r="undefined"!=typeof t[3]?t[3]/255:1;return"rgba("+t[0]+","+t[1]+","+t[2]+","+r+")"},o.Color.getColor=function(){if(arguments[0]instanceof o.Color)return arguments[0].colorString;if(arguments[0]instanceof Array)return o.Color.getColorString(arguments[0]);var t=o.Color.getNormalizedColor.apply(this,arguments);return this._colorMode===r.HSB&&(t=o.Color.getRGB(t)),o.Color.getColorString(t)},o.Color}({},core,constants),p5Element=function(t,e){function r(t,e,r){var o=r,n=function(t){e(t,o)};r.elt.addEventListener(t,n,!1),r._events[t]=n}var o=e;return o.Element=function(t,e){this.elt=t,this._pInst=e,this._events={},this.width=this.elt.offsetWidth,this.height=this.elt.offsetHeight},o.Element.prototype.parent=function(t){"string"==typeof t&&(t=document.getElementById(t)),t.appendChild(this.elt)},o.Element.prototype.id=function(t){this.elt.id=t},o.Element.prototype.class=function(t){this.elt.className+=" "+t},o.Element.prototype.mousePressed=function(t){r("mousedown",t,this)},o.Element.prototype.mouseReleased=function(t){r("mouseup",t,this)},o.Element.prototype.mouseClicked=function(t){r("click",t,this)},o.Element.prototype.mouseMoved=function(t){r("mousemove",t,this)},o.Element.prototype.mouseOver=function(t){r("mouseover",t,this)},o.Element.prototype.mouseOut=function(t){r("mouseout",t,this)},o.Element.prototype._setProperty=function(t,e){this[t]=e},o.Element}({},core),p5Graphics=function(t,e,r){var o=e,r=r;return o.Graphics=function(t,e){o.Element.call(this,t,e),this.canvas=t,this.drawingContext=this.canvas.getContext("2d"),this._pInst?(this._pInst._setProperty("_curElement",this),this._pInst._setProperty("canvas",this.canvas),this._pInst._setProperty("drawingContext",this.drawingContext),this._pInst._setProperty("width",this.width),this._pInst._setProperty("height",this.height)):this.canvas.style.display="none",this.drawingContext.fillStyle="#FFFFFF",this.drawingContext.strokeStyle="#000000",this.drawingContext.lineCap=r.ROUND},o.Graphics.prototype=Object.create(o.Element.prototype),o.Graphics}({},core,constants),filters=function(){"use strict";function t(t){var e=3.5*t|0;if(e=1>e?1:248>e?e:248,o!==e){o=e,n=1+o<<1,i=new Int32Array(n),s=new Array(n);for(var r=0;n>r;r++)s[r]=new Int32Array(256);for(var a,u,h,p,l=1,c=e-1;e>l;l++){i[e+l]=i[c]=u=c*c,h=s[e+l],p=s[c--];for(var d=0;256>d;d++)h[d]=p[d]=u*d}a=i[e]=e*e,h=s[e];for(var f=0;256>f;f++)h[f]=a*f}}function e(e,a){for(var u=r._toPixels(e),h=e.width,p=e.height,l=h*p,c=new Int32Array(l),d=0;l>d;d++)c[d]=r._getARGB(u,d);var f,g,y,m,w,v,_,x,b,C=new Int32Array(l),R=new Int32Array(l),E=new Int32Array(l),S=0;t(a);var T,M,I,A;for(M=0;p>M;M++){for(T=0;h>T;T++){if(m=y=g=f=0,w=T-o,0>w)b=-w,w=0;else{if(w>=h)break;b=0}for(I=b;n>I&&!(w>=h);I++){var P=c[w+S];A=s[I],g+=A[(16711680&P)>>16],y+=A[(65280&P)>>8],m+=A[255&P],f+=i[I],w++}v=S+T,C[v]=g/f,R[v]=y/f,E[v]=m/f}S+=h}for(S=0,_=-o,x=_*h,M=0;p>M;M++){for(T=0;h>T;T++){if(m=y=g=f=0,0>_)b=v=-_,w=T;else{if(_>=p)break;b=0,v=_,w=T+x}for(I=b;n>I&&!(v>=p);I++)A=s[I],g+=A[C[w]],y+=A[R[w]],m+=A[E[w]],f+=i[I],v++,w+=h;c[T+S]=4278190080|g/f<<16|y/f<<8|m/f}S+=h,x+=h,_++}r._setPixels(u,c)}var r={};r._toPixels=function(t){return t instanceof ImageData?t.data:t.getContext("2d").getImageData(0,0,t.width,t.height).data},r._getARGB=function(t,e){var r=4*e;return t[r+3]<<24&4278190080|t[r]<<16&16711680|t[r+1]<<8&65280|255&t[r+2]},r._setPixels=function(t,e){for(var r=0,o=0,n=t.length;n>o;o++)r=4*o,t[r+0]=(16711680&e[o])>>>16,t[r+1]=(65280&e[o])>>>8,t[r+2]=255&e[o],t[r+3]=(4278190080&e[o])>>>24},r._toImageData=function(t){return t instanceof ImageData?t:t.getContext("2d").getImageData(0,0,t.width,t.height)},r._createImageData=function(t,e){return r._tmpCanvas=document.createElement("canvas"),r._tmpCtx=r._tmpCanvas.getContext("2d"),this._tmpCtx.createImageData(t,e)},r.apply=function(t,e,r){var o=t.getContext("2d"),n=o.getImageData(0,0,t.width,t.height),i=e(n,r);i instanceof ImageData?o.putImageData(i,0,0,0,0,t.width,t.height):o.putImageData(n,0,0,0,0,t.width,t.height)},r.threshold=function(t,e){var o=r._toPixels(t);void 0===e&&(e=.5);for(var n=Math.floor(255*e),i=0;i<o.length;i+=4){var s,a=o[i],u=o[i+1],h=o[i+2],p=.2126*a+.7152*u+.0722*h;s=p>=n?255:0,o[i]=o[i+1]=o[i+2]=s}},r.gray=function(t){for(var e=r._toPixels(t),o=0;o<e.length;o+=4){var n=e[o],i=e[o+1],s=e[o+2],a=.2126*n+.7152*i+.0722*s;e[o]=e[o+1]=e[o+2]=a}},r.opaque=function(t){for(var e=r._toPixels(t),o=0;o<e.length;o+=4)e[o+3]=255;return e},r.invert=function(t){for(var e=r._toPixels(t),o=0;o<e.length;o+=4)e[o]=255-e[o],e[o+1]=255-e[o+1],e[o+2]=255-e[o+2]},r.posterize=function(t,e){var o=r._toPixels(t);if(2>e||e>255)throw new Error("Level must be greater than 2 and less than 255 for posterize");for(var n=e-1,i=0;i<o.length;i+=4){var s=o[i],a=o[i+1],u=o[i+2];o[i]=255*(s*e>>8)/n,o[i+1]=255*(a*e>>8)/n,o[i+2]=255*(u*e>>8)/n}},r.dilate=function(t){for(var e,o,n,i,s,a,u,h,p,l,c,d,f,g,y,m,w,v=r._toPixels(t),_=0,x=v.length?v.length/4:0,b=new Int32Array(x);x>_;)for(e=_,o=_+t.width;o>_;)n=i=r._getARGB(v,_),u=_-1,a=_+1,h=_-t.width,p=_+t.width,e>u&&(u=_),a>=o&&(a=_),0>h&&(h=0),p>=x&&(p=_),d=r._getARGB(v,h),c=r._getARGB(v,u),f=r._getARGB(v,p),l=r._getARGB(v,a),s=77*(n>>16&255)+151*(n>>8&255)+28*(255&n),y=77*(c>>16&255)+151*(c>>8&255)+28*(255&c),g=77*(l>>16&255)+151*(l>>8&255)+28*(255&l),m=77*(d>>16&255)+151*(d>>8&255)+28*(255&d),w=77*(f>>16&255)+151*(f>>8&255)+28*(255&f),y>s&&(i=c,s=y),g>s&&(i=l,s=g),m>s&&(i=d,s=m),w>s&&(i=f,s=w),b[_++]=i;r._setPixels(v,b)},r.erode=function(t){for(var e,o,n,i,s,a,u,h,p,l,c,d,f,g,y,m,w,v=r._toPixels(t),_=0,x=v.length?v.length/4:0,b=new Int32Array(x);x>_;)for(e=_,o=_+t.width;o>_;)n=i=r._getARGB(v,_),u=_-1,a=_+1,h=_-t.width,p=_+t.width,e>u&&(u=_),a>=o&&(a=_),0>h&&(h=0),p>=x&&(p=_),d=r._getARGB(v,h),c=r._getARGB(v,u),f=r._getARGB(v,p),l=r._getARGB(v,a),s=77*(n>>16&255)+151*(n>>8&255)+28*(255&n),y=77*(c>>16&255)+151*(c>>8&255)+28*(255&c),g=77*(l>>16&255)+151*(l>>8&255)+28*(255&l),m=77*(d>>16&255)+151*(d>>8&255)+28*(255&d),w=77*(f>>16&255)+151*(f>>8&255)+28*(255&f),s>y&&(i=c,s=y),s>g&&(i=l,s=g),s>m&&(i=d,s=m),s>w&&(i=f,s=w),b[_++]=i;r._setPixels(v,b)};var o,n,i,s;return r.blur=function(t,r){e(t,r)},r}({}),p5Image=function(t,e,r){"use strict";var o=e,n=r;return o.Image=function(t,e){this.width=t,this.height=e,this.canvas=document.createElement("canvas"),this.canvas.width=this.width,this.canvas.height=this.height,this.drawingContext=this.canvas.getContext("2d"),this.pixels=[]},o.Image.prototype._setProperty=function(t,e){this[t]=e},o.Image.prototype.loadPixels=function(){o.prototype.loadPixels.call(this)},o.Image.prototype.updatePixels=function(t,e,r,n){o.prototype.updatePixels.call(this,t,e,r,n)},o.Image.prototype.get=function(t,e,r,n){return o.prototype.get.call(this,t,e,r,n)},o.Image.prototype.set=function(t,e,r){o.prototype.set.call(this,t,e,r)},o.Image.prototype.resize=function(t,e){var r=document.createElement("canvas");r.width=t,r.height=e,r.getContext("2d").drawImage(this.canvas,0,0,this.canvas.width,this.canvas.height,0,0,r.width,r.width),this.canvas.width=this.width=t,this.canvas.height=this.height=e,this.drawingContext.drawImage(r,0,0,t,e,0,0,t,e),this.pixels.length>0&&this.loadPixels()},o.Image.prototype.copy=function(){o.prototype.copy.apply(this,arguments)},o.Image.prototype.mask=function(t){void 0===t&&(t=this);var e=this.drawingContext.globalCompositeOperation,r=[t,0,0,t.width,t.height,0,0,this.width,this.height];this.drawingContext.globalCompositeOperation="destination-out",this.copy.apply(this,r),this.drawingContext.globalCompositeOperation=e},o.Image.prototype.filter=function(t,e){n.apply(this.canvas,n[t.toLowerCase()],e)},o.Image.prototype.blend=function(){o.prototype.blend.apply(this,arguments)},o.Image.prototype.save=function(t){var e;switch(t.toLowerCase()){case"png":e="image/png";break;case"jpeg":e="image/jpeg";break;case"jpg":e="image/jpeg";break;default:e="image/png"}if(void 0!==e){var r="image/octet-stream",o=this.canvas.toDataURL(e);o=o.replace(e,r),window.location.href=o}},o.Image}({},core,filters),polargeometry=function(){return{degreesToRadians:function(t){return 2*Math.PI*t/360},radiansToDegrees:function(t){return 360*t/(2*Math.PI)}}}({}),p5Vector=function(t,e,r,o){"use strict";var n=e,i=r,o=o;return n.Vector=function(){var t,e,r;arguments[0]instanceof n?(this.p5=arguments[0],t=arguments[1][0]||0,e=arguments[1][1]||0,r=arguments[1][2]||0):(t=arguments[0]||0,e=arguments[1]||0,r=arguments[2]||0),this.x=t,this.y=e,this.z=r},n.Vector.prototype.set=function(t,e,r){return t instanceof n.Vector?(this.x=t.x||0,this.y=t.y||0,this.z=t.z||0,this):t instanceof Array?(this.x=t[0]||0,this.y=t[1]||0,this.z=t[2]||0,this):(this.x=t||0,this.y=e||0,this.z=r||0,this)},n.Vector.prototype.get=function(){return this.p5?new n.Vector(this.p5,[this.x,this.y,this.z]):new n.Vector(this.x,this.y,this.z)},n.Vector.prototype.add=function(t,e,r){return t instanceof n.Vector?(this.x+=t.x||0,this.y+=t.y||0,this.z+=t.z||0,this):t instanceof Array?(this.x+=t[0]||0,this.y+=t[1]||0,this.z+=t[2]||0,this):(this.x+=t||0,this.y+=e||0,this.z+=r||0,this)},n.Vector.prototype.sub=function(t,e,r){return t instanceof n.Vector?(this.x-=t.x||0,this.y-=t.y||0,this.z-=t.z||0,this):t instanceof Array?(this.x-=t[0]||0,this.y-=t[1]||0,this.z-=t[2]||0,this):(this.x-=t||0,this.y-=e||0,this.z-=r||0,this)},n.Vector.prototype.mult=function(t){return this.x*=t||0,this.y*=t||0,this.z*=t||0,this},n.Vector.prototype.div=function(t){return this.x/=t,this.y/=t,this.z/=t,this},n.Vector.prototype.mag=function(){return Math.sqrt(this.magSq())},n.Vector.prototype.magSq=function(){var t=this.x,e=this.y,r=this.z;return t*t+e*e+r*r},n.Vector.prototype.dot=function(t,e,r){return t instanceof n.Vector?this.dot(t.x,t.y,t.z):this.x*(t||0)+this.y*(e||0)+this.z*(r||0)},n.Vector.prototype.cross=function(t){var e=this.y*t.z-this.z*t.y,r=this.z*t.x-this.x*t.z,o=this.x*t.y-this.y*t.x;return this.p5?new n.Vector(this.p5,[e,r,o]):new n.Vector(e,r,o)},n.Vector.prototype.dist=function(t){var e=t.get().sub(this);return e.mag()},n.Vector.prototype.normalize=function(){return this.div(this.mag())},n.Vector.prototype.limit=function(t){var e=this.magSq();return e>t*t&&(this.div(Math.sqrt(e)),this.mult(t)),this},n.Vector.prototype.setMag=function(t){return this.normalize().mult(t)},n.Vector.prototype.heading=function(){var t=Math.atan2(this.y,this.x);return this.p5?this.p5._angleMode===o.RADIANS?t:i.radiansToDegrees(t):t},n.Vector.prototype.rotate=function(t){this.p5&&this.p5._angleMode===o.DEGREES&&(t=i.degreesToRadians(t));var e=this.heading()+t,r=this.mag();return this.x=Math.cos(e)*r,this.y=Math.sin(e)*r,this},n.Vector.prototype.lerp=function(t,e,r,o){return t instanceof n.Vector?this.lerp(t.x,t.y,t.z,e):(this.x+=(t-this.x)*o||0,this.y+=(e-this.y)*o||0,this.z+=(r-this.z)*o||0,this)},n.Vector.prototype.array=function(){return[this.x||0,this.y||0,this.z||0]},n.Vector.fromAngle=function(t){return this.p5&&this.p5._angleMode===o.DEGREES&&(t=i.degreesToRadians(t)),this.p5?new n.Vector(this.p5,[Math.cos(t),Math.sin(t),0]):new n.Vector(Math.cos(t),Math.sin(t),0)},n.Vector.random2D=function(){var t;return t=this.p5?this.p5.random(this.p5._angleMode===o.DEGREES?360:o.TWO_PI):Math.random()*Math.PI*2,this.fromAngle(t)},n.Vector.random3D=function(){var t,e;this.p5?(t=this.p5.random(0,o.TWO_PI),e=this.p5.random(-1,1)):(t=Math.random()*Math.PI*2,e=2*Math.random()-1);var r=Math.sqrt(1-e*e)*Math.cos(t),i=Math.sqrt(1-e*e)*Math.sin(t);return this.p5?new n.Vector(this.p5,[r,i,e]):new n.Vector(r,i,e)},n.Vector.add=function(t,e){return t.get().add(e)},n.Vector.sub=function(t,e){return t.get().sub(e)},n.Vector.mult=function(t,e){return t.get().mult(e)},n.Vector.div=function(t,e){return t.get().div(e)},n.Vector.dot=function(t,e){return t.dot(e)},n.Vector.cross=function(t,e){return t.cross(e)},n.Vector.dist=function(t,e){return t.dist(e)},n.Vector.lerp=function(t,e,r){return t.get().lerp(e,r)},n.Vector.angleBetween=function(t,e){var r=Math.acos(t.dot(e)/(t.mag()*e.mag()));return this.p5&&this.p5._angleMode===o.DEGREES&&(r=i.radiansToDegrees(r)),r},n.Vector}({},core,polargeometry,constants),p5TableRow=function(t,e){"use strict";var r=e;return r.TableRow=function(t,e){var r=[],o={};t&&(e=e||",",r=t.split(e));for(var n=0;n<r.length;n++){var i=n,s=r[n];o[i]=s}this.arr=r,this.obj=o,this.table=null},r.TableRow.prototype.set=function(t,e){if("string"==typeof t){var r=this.table.columns.indexOf(t);if(!(r>=0))throw'This table has no column named "'+t+'"';this.obj[t]=e,this.arr[r]=e}else{if(!(t<this.table.columns.length))throw"Column #"+t+" is out of the range of this table";this.arr[t]=e;var o=this.table.columns[t];this.obj[o]=e}},r.TableRow.prototype.setNum=function(t,e){var r=parseFloat(e,10);this.set(t,r)},r.TableRow.prototype.setString=function(t,e){var r=e.toString();this.set(t,r)},r.TableRow.prototype.get=function(t){return"string"==typeof t?this.obj[t]:this.arr[t]},r.TableRow.prototype.getNum=function(t){var e;if(e="string"==typeof t?parseFloat(this.obj[t],10):parseFloat(this.arr[t],10),"NaN"===e.toString())throw"Error: "+this.obj[t]+" is NaN (Not a Number)";return e},r.TableRow.prototype.getString=function(t){return"string"==typeof t?this.obj[t].toString():this.arr[t].toString()},r.TableRow}({},core),p5Table=function(t,e){"use strict";var r=e;return r.Table=function(){this.columns=[],this.rows=[]},r.Table.prototype.addRow=function(t){var e=t||new r.TableRow;if("undefined"==typeof e.arr||"undefined"==typeof e.obj)throw"invalid TableRow: "+e;return e.table=this,this.rows.push(e),e},r.Table.prototype.removeRow=function(t){this.rows[t].table=null;var e=this.rows.splice(t+1,this.rows.length);this.rows.pop(),this.rows=this.rows.concat(e)},r.Table.prototype.getRow=function(t){return this.rows[t]},r.Table.prototype.getRows=function(){return this.rows},r.Table.prototype.findRow=function(t,e){if("string"==typeof e){for(var r=0;r<this.rows.length;r++)if(this.rows[r].obj[e]===t)return this.rows[r]}else for(var o=0;o<this.rows.length;o++)if(this.rows[o].arr[e]===t)return this.rows[o];return null},r.Table.prototype.findRows=function(t,e){var r=[];if("string"==typeof e)for(var o=0;o<this.rows.length;o++)this.rows[o].obj[e]===t&&r.push(this.rows[o]);else for(var n=0;n<this.rows.length;n++)this.rows[n].arr[e]===t&&r.push(this.rows[n]);return r},r.Table.prototype.matchRow=function(t,e){if("number"==typeof e){for(var r=0;r<this.rows.length;r++)if(this.rows[r].arr[e].match(t))return this.rows[r]}else for(var o=0;o<this.rows.length;o++)if(this.rows[o].obj[e].match(t))return this.rows[o];return null},r.Table.prototype.matchRows=function(t,e){var r=[];if("number"==typeof e)for(var o=0;o<this.rows.length;o++)this.rows[o].arr[e].match(t)&&r.push(this.rows[o]);else for(var n=0;n<this.rows.length;n++)this.rows[n].obj[e].match(t)&&r.push(this.rows[n]);return r},r.Table.prototype.getColumn=function(t){var e=[];if("string"==typeof t)for(var r=0;r<this.rows.length;r++)e.push(this.rows[r].obj[t]);else for(var o=0;o<this.rows.length;o++)e.push(this.rows[o].arr[t]);return e},r.Table.prototype.clearRows=function(){delete this.rows,this.rows=[]},r.Table.prototype.addColumn=function(t){var e=t||null;this.columns.push(e)},r.Table.prototype.getColumnCount=function(){return this.columns.length},r.Table.prototype.getRowCount=function(){return this.rows.length},r.Table.prototype.removeTokens=function(t,e){for(var r=function(t){return t.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&")},o=[],n=0;n<t.length;n++)o.push(r(t.charAt(n)));var i=new RegExp(o.join("|"),"g");if("undefined"==typeof e)for(var s=0;s<this.columns.length;s++)for(var a=0;a<this.rows.length;a++){var u=this.rows[a].arr[s];u=u.replace(i,""),this.rows[a].arr[s]=u,this.rows[a].obj[this.columns[s]]=u}else if("string"==typeof e)for(var h=0;h<this.rows.length;h++){var p=this.rows[h].obj[e];p=p.replace(i,""),this.rows[h].obj[e]=p;var l=this.columns.indexOf(e);this.rows[h].arr[l]=p}else for(var c=0;c<this.rows.length;c++){var d=this.rows[c].arr[e];d=d.replace(i,""),this.rows[c].arr[e]=d,this.rows[c].obj[this.columns[e]]=d}},r.Table.prototype.trim=function(t){var e=new RegExp(" ","g");if("undefined"==typeof t)for(var r=0;r<this.columns.length;r++)for(var o=0;o<this.rows.length;o++){var n=this.rows[o].arr[r];n=n.replace(e,""),this.rows[o].arr[r]=n,this.rows[o].obj[this.columns[r]]=n}else if("string"==typeof t)for(var i=0;i<this.rows.length;i++){var s=this.rows[i].obj[t];s=s.replace(e,""),this.rows[i].obj[t]=s;var a=this.columns.indexOf(t);this.rows[i].arr[a]=s}else for(var u=0;u<this.rows.length;u++){var h=this.rows[u].arr[t];h=h.replace(e,""),this.rows[u].arr[t]=h,this.rows[u].obj[this.columns[t]]=h}},r.Table.prototype.removeColumn=function(t){var e,r;"string"==typeof t?(e=t,r=this.columns.indexOf(t),console.log("string")):(r=t,e=this.columns[t]);var o=this.columns.splice(r+1,this.columns.length);this.columns.pop(),this.columns=this.columns.concat(o);for(var n=0;n<this.rows.length;n++){var i=this.rows[n].arr,s=i.splice(r+1,i.length);i.pop(),this.rows[n].arr=i.concat(s),delete this.rows[n].obj[e]}},r.Table}({},core),colorcreating_reading=function(t,e){"use strict";var r=e;return r.prototype.alpha=function(t){if(t instanceof r.Color)return t.rgba[3];if(t instanceof Array)return t[3];throw new Error("Needs p5.Color or pixel array as argument.")},r.prototype.blue=function(t){if(t instanceof Array)return t[2];if(t instanceof r.Color)return t.rgba[2];throw new Error("Needs p5.Color or pixel array as argument.")},r.prototype.brightness=function(t){if(!t instanceof r.Color)throw new Error("Needs p5.Color as argument.");return t.hsba||(t.hsba=r.Color.getRGB(t.rgba),t.hsba=t.hsba.concat(t.rgba[3])),t.hsba[2]},r.prototype.color=function(){return arguments[0]instanceof Array?new r.Color(this,arguments[0],!0):new r.Color(this,arguments)},r.prototype.green=function(t){if(t instanceof Array)return t[1];if(t instanceof r.Color)return t.rgba[1];throw new Error("Needs p5.Color or pixel array as argument.")},r.prototype.hue=function(t){if(!t instanceof r.Color)throw new Error("Needs p5.Color as argument.");return t.hsba||(t.hsba=r.Color.getRGB(t.rgba)),t.hsba[0]},r.prototype.lerpColor=function(t,e,o){if(t instanceof Array){for(var n=[],i=0;i<t.length;i++)n.push(r.prototype.lerp(t[i],e[i],o));return n}if(t instanceof r.Color){for(var s=[],a=0;4>a;a++)s.push(r.prototype.lerp(t.rgba[a],e.rgba[a],o));return new r.Color(this,s)}return r.prototype.lerp(t,e,o)},r.prototype.red=function(t){if(t instanceof Array)return t[0];if(t instanceof r.Color)return t.rgba[0];throw new Error("Needs p5.Color or pixel array as argument.")},r.prototype.saturation=function(t){if(!t instanceof r.Color)throw new Error("Needs p5.Color as argument.");return t.hsba||(t.hsba=r.Color.getRGB(t.rgba),t.hsba=t.hsba.concat(t.rgba[3])),t.hsba[1]},r}({},core,p5Color),colorsetting=function(t,e,r){"use strict";var o=e,r=r;return o.prototype._doStroke=!0,o.prototype._doFill=!0,o.prototype._colorMode=r.RGB,o.prototype._maxRGB=[255,255,255,255],o.prototype._maxHSB=[255,255,255,255],o.prototype.background=function(){if(arguments[0]instanceof o.Image)this.image(arguments[0],0,0,this.width,this.height);else{var t=this.drawingContext.fillStyle,e=this.drawingContext;e.fillStyle=o.Color.getColor.apply(this,arguments),e.fillRect(0,0,this.width,this.height),e.fillStyle=t}},o.prototype.clear=function(){this.drawingContext.clearRect(0,0,this.width,this.height)},o.prototype.colorMode=function(){if(arguments[0]===r.RGB||arguments[0]===r.HSB){this._colorMode=arguments[0];var t=this._colorMode===r.RGB,e=t?this._maxRGB:this._maxHSB;2===arguments.length?(e[0]=arguments[1],e[1]=arguments[1],e[2]=arguments[1]):arguments.length>2&&(e[0]=arguments[1],e[1]=arguments[2],e[2]=arguments[3]),5===arguments.length&&(e[3]=arguments[4])}},o.prototype.fill=function(){this._setProperty("_doFill",!0);var t=this.drawingContext;t.fillStyle=o.Color.getColor.apply(this,arguments)},o.prototype.noFill=function(){this._setProperty("_doFill",!1)},o.prototype.noStroke=function(){this._setProperty("_doStroke",!1)},o.prototype.stroke=function(){this._setProperty("_doStroke",!0);var t=this.drawingContext;t.strokeStyle=o.Color.getColor.apply(this,arguments)},o}({},core,constants,p5Color),dataarray_functions=function(t,e){"use strict";var r=e;return r.prototype.append=function(t,e){return t.push(e),t},r.prototype.arrayCopy=function(t,e,r,o,n){var i,s;"undefined"!=typeof n?(s=Math.min(n,t.length),i=o,t=t.slice(e,s+e)):("undefined"!=typeof r?(s=r,s=Math.min(s,t.length)):s=t.length,i=0,r=e,t=t.slice(0,s)),Array.prototype.splice.apply(r,[i,s].concat(t))},r.prototype.concat=function(t,e){return t.concat(e)},r.prototype.reverse=function(t){return t.reverse()},r.prototype.shorten=function(t){return t.pop(),t},r.prototype.sort=function(t,e){var r=e?t.slice(0,Math.min(e,t.length)):t,o=e?t.slice(Math.min(e,t.length)):[];return r="string"==typeof r[0]?r.sort():r.sort(function(t,e){return t-e}),r.concat(o)},r.prototype.splice=function(t,e,r){return Array.prototype.splice.apply(t,[r,0].concat(e)),t},r.prototype.subset=function(t,e,r){return"undefined"!=typeof r?t.slice(e,e+r):t.slice(e,t.length)},r}({},core),datastring_functions=function(t,e){"use strict";function r(){var t=arguments[0],e=0>t,r=e?t.toString().substring(1):t.toString(),o=r.indexOf("."),n=-1!==o?r.substring(0,o):r,i=-1!==o?r.substring(o+1):"",s=e?"-":"";if(3===arguments.length){for(var a=0;a<arguments[1]-n.length;a++)s+="0";s+=n,s+=".",s+=i;for(var u=0;u<arguments[2]-i.length;u++)s+="0";return s}for(var h=0;h<Math.max(arguments[1]-n.length,0);h++)s+="0";return s+=r}function o(){var t=arguments[0].toString(),e=t.indexOf("."),r=-1!==e?t.substring(e):"",o=-1!==e?t.substring(0,e):t;return o=o.toString().replace(/\B(?=(\d{3})+(?!\d))/g,","),arguments.length>1&&(r=r.substring(0,arguments[1]+1)),o+r}function n(){return parseFloat(arguments[0])>0?"+"+arguments[0].toString():arguments[0].toString()}function i(){return parseFloat(arguments[0])>0?" "+arguments[0].toString():arguments[0].toString()}var s=e;return s.prototype.join=function(t,e){return t.join(e)},s.prototype.match=function(t,e){return t.match(e)},s.prototype.matchAll=function(t,e){for(var r=new RegExp(e,"g"),o=r.exec(t),n=[];null!==o;)n.push(o),o=r.exec(t);return n},s.prototype.nf=function(){if(arguments[0]instanceof Array){var t=arguments[1],e=arguments[2];return arguments[0].map(function(o){return r(o,t,e)})}return r.apply(this,arguments)},s.prototype.nfc=function(){if(arguments[0]instanceof Array){var t=arguments[1];return arguments[0].map(function(e){return o(e,t)})}return o.apply(this,arguments)},s.prototype.nfp=function(){var t=this.nf(arguments);return t instanceof Array?t.map(n):n(t)},s.prototype.nfs=function(){var t=this.nf(arguments);return t instanceof Array?t.map(i):i(t)},s.prototype.split=function(t,e){return t.split(e)},s.prototype.splitTokens=function(){var t=arguments.length>0?arguments[1]:/\s/g;return arguments[0].split(t).filter(function(t){return t})},s.prototype.trim=function(t){return t instanceof Array?t.map(this.trim):t.trim()},s}({},core),environment=function(t,e,r){"use strict";function o(t){var e=document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled;if(!e)throw new Error("Fullscreen not enabled in this browser.");t.requestFullscreen?t.requestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen()}function n(){document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen()}var i=e,s=r,a=[s.ARROW,s.CROSS,s.HAND,s.MOVE,s.TEXT,s.WAIT];return i.prototype._frameRate=0,i.prototype._lastFrameTime=0,i.prototype._targetFrameRate=60,i.prototype.frameCount=0,i.prototype.focused=!0,i.prototype.cursor=function(t,e,r){var o="auto",n=this._curElement.elt;if(a.indexOf(t)>-1)o=t;else if("string"==typeof t){var i="";e&&r&&"number"==typeof e&&"number"==typeof r&&(i=e+" "+r),o="http://"!==t.substring(0,6)?"url("+t+") "+i+", auto":/\.(cur|jpg|jpeg|gif|png|CUR|JPG|JPEG|GIF|PNG)$/.test(t)?"url("+t+") "+i+", auto":t}n.style.cursor=o},i.prototype.frameRate=function(t){return"undefined"==typeof t?this._frameRate:(this._setProperty("_targetFrameRate",t),this._runFrames(),this)},i.prototype.getFrameRate=function(){return this.frameRate()},i.prototype.setFrameRate=function(t){return this.frameRate(t)},i.prototype.noCursor=function(){this._curElement.elt.style.cursor="none"},i.prototype.displayWidth=screen.width,i.prototype.displayHeight=screen.height,i.prototype.windowWidth=window.innerWidth,window.addEventListener("resize",function(){this.windowWidth=window.innerWidth}),i.prototype.windowHeight=window.innerHeight,window.addEventListener("resize",function(){this.windowHeight=window.windowHeight
4 | }),i.prototype.width=0,i.prototype.height=0,i.prototype.fullscreen=function(t){return"undefined"==typeof t?document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement:void(t?o(document.documentElement):n())},i}({},core,constants),imageimage=function(t,e,r){"use strict";var o=e,r=r;return o.prototype._imageMode=r.CORNER,o.prototype._tint=null,o.prototype.createImage=function(t,e){return new o.Image(t,e)},o}({},core,constants),canvas=function(t,e){var e=e;return{modeAdjust:function(t,r,o,n,i){return i===e.CORNER?{x:t,y:r,w:o,h:n}:i===e.CORNERS?{x:t,y:r,w:o-t,h:n-r}:i===e.RADIUS?{x:t-o,y:r-n,w:2*o,h:2*n}:i===e.CENTER?{x:t-.5*o,y:r-.5*n,w:o,h:n}:void 0},arcModeAdjust:function(t,r,o,n,i){return i===e.CORNER?{x:t+.5*o,y:r+.5*n,w:o,h:n}:i===e.CORNERS?{x:t,y:r,w:o+t,h:n+r}:i===e.RADIUS?{x:t,y:r,w:2*o,h:2*n}:i===e.CENTER?{x:t,y:r,w:o,h:n}:void 0}}}({},constants),imageloading_displaying=function(t,e,r,o,n){"use strict";var i=e,s=r,o=o,n=n;return i.prototype.loadImage=function(t,e){var r=new Image,o=new i.Image(1,1,this);return r.onload=function(){o.width=o.canvas.width=r.width,o.height=o.canvas.height=r.height,o.canvas.getContext("2d").drawImage(r,0,0),"undefined"!=typeof e&&e(o)},r.crossOrigin="Anonymous",r.src=t,o},i.prototype.image=function(t,e,r,n,i){var s=t.canvas?t.canvas:t.elt;void 0===n&&(n=t.width),void 0===i&&(i=t.height);var a=o.modeAdjust(e,r,n,i,this._imageMode);this._tint?this.drawingContext.drawImage(this._getTintedImageCanvas(t),a.x,a.y,a.w,a.h):this.drawingContext.drawImage(s,a.x,a.y,a.w,a.h)},i.prototype.tint=function(){var t=i.Color.getNormalizedColor.apply(this,arguments);this._tint=t},i.prototype.noTint=function(){this._tint=null},i.prototype._getTintedImageCanvas=function(t){if(!t.canvas)return t;var e=s._toPixels(t.canvas),r=document.createElement("canvas");r.width=t.canvas.width,r.height=t.canvas.height;for(var o=r.getContext("2d"),n=o.createImageData(t.canvas.width,t.canvas.height),i=n.data,a=0;a<e.length;a+=4){var u=e[a],h=e[a+1],p=e[a+2],l=e[a+3];i[a]=u*this._tint[0]/255,i[a+1]=h*this._tint[1]/255,i[a+2]=p*this._tint[2]/255,i[a+3]=l*this._tint[3]/255}return o.putImageData(n,0,0),r},i.prototype.imageMode=function(t){(t===n.CORNER||t===n.CORNERS||t===n.CENTER)&&(this._imageMode=t)},i}({},core,filters,canvas,constants),imagepixels=function(t,e,r){"use strict";var o=e,n=r;return o.prototype.pixels=[],o.prototype.blend=function(){var t=this.drawingContext.globalCompositeOperation,e=arguments[arguments.length-1],r=Array.prototype.slice.call(arguments,0,arguments.length-1);this.drawingContext.globalCompositeOperation=e,this.copy.apply(this,r),this.drawingContext.globalCompositeOperation=t},o.prototype.copy=function(){var t,e,r,o,n,i,s,a,u;if(9===arguments.length)t=arguments[0],e=arguments[1],r=arguments[2],o=arguments[3],n=arguments[4],i=arguments[5],s=arguments[6],a=arguments[7],u=arguments[8];else{if(8!==arguments.length)throw new Error("Signature not supported");e=arguments[0],r=arguments[1],o=arguments[2],n=arguments[3],i=arguments[4],s=arguments[5],a=arguments[6],u=arguments[7],t=this}this.drawingContext.drawImage(t.canvas,e,r,o,n,i,s,a,u)},o.prototype.filter=function(t,e){n.apply(this.canvas,n[t.toLowerCase()],e)},o.prototype.get=function(t,e,r,n){if(void 0===t&&void 0===e&&void 0===r&&void 0===n?(t=0,e=0,r=this.width,n=this.height):void 0===r&&void 0===n&&(r=1,n=1),t>this.width||e>this.height||0>t||0>e)return[0,0,0,255];var i=this.drawingContext.getImageData(t,e,r,n),s=i.data;if(1===r&&1===n){for(var a=[],u=0;u<s.length;u+=4)a.push(s[u],s[u+1],s[u+2],s[u+3]);return a}r=Math.min(r,this.width),n=Math.min(n,this.height);var h=new o.Image(r,n);return h.canvas.getContext("2d").putImageData(i,0,0,0,0,r,n),h},o.prototype.loadPixels=function(){var t=this.width,e=this.height,r=this.drawingContext.getImageData(0,0,t,e);this._setProperty("imageData",r),this._setProperty("pixels",r.data)},o.prototype.set=function(t,e,r){if(r instanceof o.Image)this.drawingContext.drawImage(r.canvas,t,e),this.loadPixels.call(this);else{var n=4*(e*this.width+t);if(this.imageData||this.loadPixels.call(this),"number"==typeof r)n<this.pixels.length&&(this.pixels[n]=r,this.pixels[n+1]=r,this.pixels[n+2]=r,this.pixels[n+3]=255);else if(r instanceof Array){if(r.length<4)throw new Error("pixel array must be of the form [R, G, B, A]");n<this.pixels.length&&(this.pixels[n]=r[0],this.pixels[n+1]=r[1],this.pixels[n+2]=r[2],this.pixels[n+3]=r[3])}else r instanceof o.Color&&n<this.pixels.length&&(this.pixels[n]=r.rgba[0],this.pixels[n+1]=r.rgba[1],this.pixels[n+2]=r.rgba[2],this.pixels[n+3]=r.rgba[3])}},o.prototype.updatePixels=function(t,e,r,o){void 0===t&&void 0===e&&void 0===r&&void 0===o&&(t=0,e=0,r=this.width,o=this.height),this.drawingContext.putImageData(this.imageData,t,e,0,0,r,o)},o}({},core,filters,p5Color);!function(t,e,r){"undefined"!=typeof module&&module.exports?module.exports=r():"function"==typeof define&&define.amd?define("reqwest",r):e[t]=r()}("reqwest",this,function(){function handleReadyState(t,e,r){return function(){return t._aborted?r(t.request):void(t.request&&4==t.request[readyState]&&(t.request.onreadystatechange=noop,twoHundo.test(t.request.status)?e(t.request):r(t.request)))}}function setHeaders(t,e){var r,o=e.headers||{};o.Accept=o.Accept||defaultHeaders.accept[e.type]||defaultHeaders.accept["*"],e.crossOrigin||o[requestedWith]||(o[requestedWith]=defaultHeaders.requestedWith),o[contentType]||(o[contentType]=e.contentType||defaultHeaders.contentType);for(r in o)o.hasOwnProperty(r)&&"setRequestHeader"in t&&t.setRequestHeader(r,o[r])}function setCredentials(t,e){"undefined"!=typeof e.withCredentials&&"undefined"!=typeof t.withCredentials&&(t.withCredentials=!!e.withCredentials)}function generalCallback(t){lastValue=t}function urlappend(t,e){return t+(/\?/.test(t)?"&":"?")+e}function handleJsonp(t,e,r,o){var n=uniqid++,i=t.jsonpCallback||"callback",s=t.jsonpCallbackName||reqwest.getcallbackPrefix(n),a=new RegExp("((^|\\?|&)"+i+")=([^&]+)"),u=o.match(a),h=doc.createElement("script"),p=0,l=-1!==navigator.userAgent.indexOf("MSIE 10.0");return u?"?"===u[3]?o=o.replace(a,"$1="+s):s=u[3]:o=urlappend(o,i+"="+s),win[s]=generalCallback,h.type="text/javascript",h.src=o,h.async=!0,"undefined"==typeof h.onreadystatechange||l||(h.event="onclick",h.htmlFor=h.id="_reqwest_"+n),h.onload=h.onreadystatechange=function(){return h[readyState]&&"complete"!==h[readyState]&&"loaded"!==h[readyState]||p?!1:(h.onload=h.onreadystatechange=null,h.onclick&&h.onclick(),e(lastValue),lastValue=void 0,head.removeChild(h),void(p=1))},head.appendChild(h),{abort:function(){h.onload=h.onreadystatechange=null,r({},"Request is aborted: timeout",{}),lastValue=void 0,head.removeChild(h),p=1}}}function getRequest(t,e){var r,o=this.o,n=(o.method||"GET").toUpperCase(),i="string"==typeof o?o:o.url,s=o.processData!==!1&&o.data&&"string"!=typeof o.data?reqwest.toQueryString(o.data):o.data||null,a=!1;return"jsonp"!=o.type&&"GET"!=n||!s||(i=urlappend(i,s),s=null),"jsonp"==o.type?handleJsonp(o,t,e,i):(r=o.xhr&&o.xhr(o)||xhr(o),r.open(n,i,o.async===!1?!1:!0),setHeaders(r,o),setCredentials(r,o),win[xDomainRequest]&&r instanceof win[xDomainRequest]?(r.onload=t,r.onerror=e,r.onprogress=function(){},a=!0):r.onreadystatechange=handleReadyState(this,t,e),o.before&&o.before(r),a?setTimeout(function(){r.send(s)},200):r.send(s),r)}function Reqwest(t,e){this.o=t,this.fn=e,init.apply(this,arguments)}function setType(t){var e=t.match(/\.(json|jsonp|html|xml)(\?|$)/);return e?e[1]:"js"}function init(o,fn){function complete(t){for(o.timeout&&clearTimeout(self.timeout),self.timeout=null;self._completeHandlers.length>0;)self._completeHandlers.shift()(t)}function success(resp){resp="jsonp"!==type?self.request:resp;var filteredResponse=globalSetupOptions.dataFilter(resp.responseText,type),r=filteredResponse;try{resp.responseText=r}catch(e){}if(r)switch(type){case"json":try{resp=win.JSON?win.JSON.parse(r):eval("("+r+")")}catch(err){return error(resp,"Could not parse JSON in response",err)}break;case"js":resp=eval(r);break;case"html":resp=r;break;case"xml":resp=resp.responseXML&&resp.responseXML.parseError&&resp.responseXML.parseError.errorCode&&resp.responseXML.parseError.reason?null:resp.responseXML}for(self._responseArgs.resp=resp,self._fulfilled=!0,fn(resp),self._successHandler(resp);self._fulfillmentHandlers.length>0;)resp=self._fulfillmentHandlers.shift()(resp);complete(resp)}function error(t,e,r){for(t=self.request,self._responseArgs.resp=t,self._responseArgs.msg=e,self._responseArgs.t=r,self._erred=!0;self._errorHandlers.length>0;)self._errorHandlers.shift()(t,e,r);complete(t)}this.url="string"==typeof o?o:o.url,this.timeout=null,this._fulfilled=!1,this._successHandler=function(){},this._fulfillmentHandlers=[],this._errorHandlers=[],this._completeHandlers=[],this._erred=!1,this._responseArgs={};var self=this,type=o.type||setType(this.url);fn=fn||function(){},o.timeout&&(this.timeout=setTimeout(function(){self.abort()},o.timeout)),o.success&&(this._successHandler=function(){o.success.apply(o,arguments)}),o.error&&this._errorHandlers.push(function(){o.error.apply(o,arguments)}),o.complete&&this._completeHandlers.push(function(){o.complete.apply(o,arguments)}),this.request=getRequest.call(this,success,error)}function reqwest(t,e){return new Reqwest(t,e)}function normalize(t){return t?t.replace(/\r?\n/g,"\r\n"):""}function serial(t,e){var r,o,n,i,s=t.name,a=t.tagName.toLowerCase(),u=function(t){t&&!t.disabled&&e(s,normalize(t.attributes.value&&t.attributes.value.specified?t.value:t.text))};if(!t.disabled&&s)switch(a){case"input":/reset|button|image|file/i.test(t.type)||(r=/checkbox/i.test(t.type),o=/radio/i.test(t.type),n=t.value,(!(r||o)||t.checked)&&e(s,normalize(r&&""===n?"on":n)));break;case"textarea":e(s,normalize(t.value));break;case"select":if("select-one"===t.type.toLowerCase())u(t.selectedIndex>=0?t.options[t.selectedIndex]:null);else for(i=0;t.length&&i<t.length;i++)t.options[i].selected&&u(t.options[i])}}function eachFormElement(){var t,e,r=this,o=function(t,e){var o,n,i;for(o=0;o<e.length;o++)for(i=t[byTag](e[o]),n=0;n<i.length;n++)serial(i[n],r)};for(e=0;e<arguments.length;e++)t=arguments[e],/input|select|textarea/i.test(t.tagName)&&serial(t,r),o(t,["input","select","textarea"])}function serializeQueryString(){return reqwest.toQueryString(reqwest.serializeArray.apply(null,arguments))}function serializeHash(){var t={};return eachFormElement.apply(function(e,r){e in t?(t[e]&&!isArray(t[e])&&(t[e]=[t[e]]),t[e].push(r)):t[e]=r},arguments),t}function buildParams(t,e,r,o){var n,i,s,a=/\[\]$/;if(isArray(e))for(i=0;e&&i<e.length;i++)s=e[i],r||a.test(t)?o(t,s):buildParams(t+"["+("object"==typeof s?i:"")+"]",s,r,o);else if(e&&"[object Object]"===e.toString())for(n in e)buildParams(t+"["+n+"]",e[n],r,o);else o(t,e)}var win=window,doc=document,twoHundo=/^(20\d|1223)$/,byTag="getElementsByTagName",readyState="readyState",contentType="Content-Type",requestedWith="X-Requested-With",head=doc[byTag]("head")[0],uniqid=0,callbackPrefix="reqwest_"+ +new Date,lastValue,xmlHttpRequest="XMLHttpRequest",xDomainRequest="XDomainRequest",noop=function(){},isArray="function"==typeof Array.isArray?Array.isArray:function(t){return t instanceof Array},defaultHeaders={contentType:"application/x-www-form-urlencoded",requestedWith:xmlHttpRequest,accept:{"*":"text/javascript, text/html, application/xml, text/xml, */*",xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript",js:"application/javascript, text/javascript"}},xhr=function(t){if(t.crossOrigin===!0){var e=win[xmlHttpRequest]?new XMLHttpRequest:null;if(e&&"withCredentials"in e)return e;if(win[xDomainRequest])return new XDomainRequest;throw new Error("Browser does not support cross-origin requests")}return win[xmlHttpRequest]?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP")},globalSetupOptions={dataFilter:function(t){return t}};return Reqwest.prototype={abort:function(){this._aborted=!0,this.request.abort()},retry:function(){init.call(this,this.o,this.fn)},then:function(t,e){return t=t||function(){},e=e||function(){},this._fulfilled?this._responseArgs.resp=t(this._responseArgs.resp):this._erred?e(this._responseArgs.resp,this._responseArgs.msg,this._responseArgs.t):(this._fulfillmentHandlers.push(t),this._errorHandlers.push(e)),this},always:function(t){return this._fulfilled||this._erred?t(this._responseArgs.resp):this._completeHandlers.push(t),this},fail:function(t){return this._erred?t(this._responseArgs.resp,this._responseArgs.msg,this._responseArgs.t):this._errorHandlers.push(t),this}},reqwest.serializeArray=function(){var t=[];return eachFormElement.apply(function(e,r){t.push({name:e,value:r})},arguments),t},reqwest.serialize=function(){if(0===arguments.length)return"";var t,e,r=Array.prototype.slice.call(arguments,0);return t=r.pop(),t&&t.nodeType&&r.push(t)&&(t=null),t&&(t=t.type),e="map"==t?serializeHash:"array"==t?reqwest.serializeArray:serializeQueryString,e.apply(null,r)},reqwest.toQueryString=function(t,e){var r,o,n=e||!1,i=[],s=encodeURIComponent,a=function(t,e){e="function"==typeof e?e():null==e?"":e,i[i.length]=s(t)+"="+s(e)};if(isArray(t))for(o=0;t&&o<t.length;o++)a(t[o].name,t[o].value);else for(r in t)t.hasOwnProperty(r)&&buildParams(r,t[r],n,a);return i.join("&").replace(/%20/g,"+")},reqwest.getcallbackPrefix=function(){return callbackPrefix},reqwest.compat=function(t,e){return t&&(t.type&&(t.method=t.type)&&delete t.type,t.dataType&&(t.type=t.dataType),t.jsonpCallback&&(t.jsonpCallbackName=t.jsonpCallback)&&delete t.jsonpCallback,t.jsonp&&(t.jsonpCallback=t.jsonp)),new Reqwest(t,e)},reqwest.ajaxSetup=function(t){t=t||{};for(var e in t)globalSetupOptions[e]=t[e]},reqwest});var inputfiles=function(t,e,r){"use strict";function o(t,e){var r={};if(e=e||[],"undefined"==typeof e)for(var o=0;o<t.length;o++)e[o.toString()]=o;for(var n=0;n<e.length;n++){var i=e[n],s=t[n];r[i]=s}return r}var n=e,r=r;return n.prototype.createInput=function(){throw"not yet implemented"},n.prototype.createReader=function(){throw"not yet implemented"},n.prototype.loadBytes=function(){throw"not yet implemented"},n.prototype.loadJSON=function(t,e){var o=[],n=-1===t.indexOf("http")?"json":"jsonp";return r({url:t,type:n,success:function(t){for(var r in t)o[r]=t[r];"undefined"!=typeof e&&e(o)}}),o},n.prototype.loadStrings=function(t,e){var r=[],o=new XMLHttpRequest;return o.open("GET",t,!0),o.onreadystatechange=function(){if(4===o.readyState&&(200===o.status||0===o.status)){var t=o.responseText.match(/[^\r\n]+/g);for(var n in t)r[n]=t[n];"undefined"!=typeof e&&e(r)}},o.send(null),r},n.prototype.loadTable=function(t){for(var e=null,r=[],i=!1,s=",",a=1;a<arguments.length;a++)"function"==typeof arguments[a]?e=arguments[a]:"string"==typeof arguments[a]&&(r.push(arguments[a]),"header"===arguments[a]&&(i=!0),"csv"===arguments[a]?s=",":"tsv"===arguments[a]&&(s="	"));var u=[],h=new n.Table,p=new XMLHttpRequest;return p.open("GET",t,!0),p.onreadystatechange=function(){if(4===p.readyState&&(200===p.status||0===p.status)){var t=p.responseText.match(/[^\r\n]+/g);for(var r in t)u[r]=t[r];if("undefined"!=typeof e){var a,l;if(i)for(h.columns=new n.TableRow(u[0]).arr,a=1;a<u.length;a++)l=new n.TableRow(u[a],s),l.obj=o(l.arr,h.columns),h.addRow(l);else{for(a=0;a<u[0].split(s).length;a++)h.columns[a]=a.toString();for(a=0;a<u.length;a++)l=new n.TableRow(u[a],s),h.addRow(l)}e(h)}}},p.send(null),h},n.prototype.loadXML=function(t,e){var o=[];return r({url:t,type:"xml",success:function(t){o[0]=t,"undefined"!=typeof e&&e(o)}}),o},n.prototype.parseXML=function(){throw"not yet implemented"},n.prototype.saveTable=function(){throw"not yet implemented"},n.prototype.selectFolder=function(){throw"not yet implemented"},n.prototype.selectInput=function(){throw"not yet implemented"},n}({},core,reqwest),inputkeyboard=function(t,e){"use strict";var r=e;return r.prototype.isKeyPressed=!1,r.prototype.keyIsPressed=!1,r.prototype.key="",r.prototype.keyCode=0,r.prototype.onkeydown=function(t){this._setProperty("isKeyPressed",!0),this._setProperty("keyIsPressed",!0),this._setProperty("keyCode",t.which);var e=String.fromCharCode(t.which);e||(e=t.which),this._setProperty("key",e);var r=this.keyPressed||window.keyPressed;"function"!=typeof r||t.charCode||r(t)},r.prototype.onkeyup=function(t){var e=this.keyReleased||window.keyReleased;this._setProperty("isKeyPressed",!1),this._setProperty("keyIsPressed",!1),"function"==typeof e&&e(t)},r.prototype.onkeypress=function(t){this._setProperty("keyCode",t.which),this._setProperty("key",String.fromCharCode(t.which));var e=this.keyTyped||window.keyTyped;"function"==typeof e&&e(t)},r}({},core),inputmouse=function(t,e,r){"use strict";function o(t,e){var r=t.getBoundingClientRect();return{x:e.clientX-r.left,y:e.clientY-r.top}}var n=e,r=r;return n.prototype.mouseX=0,n.prototype.mouseY=0,n.prototype.pmouseX=0,n.prototype.pmouseY=0,n.prototype.winMouseX=0,n.prototype.winMouseY=0,n.prototype.pwinMouseX=0,n.prototype.pwinMouseY=0,n.prototype.mouseButton=0,n.prototype.mouseIsPressed=!1,n.prototype.isMousePressed=!1,n.prototype.updateMouseCoords=function(t){var e=o(this._curElement.elt,t);this._setProperty("pmouseX",this.mouseX),this._setProperty("pmouseY",this.mouseY),this._setProperty("mouseX",e.x),this._setProperty("mouseY",e.y),this._setProperty("pwinMouseX",this.winMouseX),this._setProperty("pwinMouseY",this.winMouseY),this._setProperty("winMouseX",t.pageX),this._setProperty("winMouseY",t.pageY)},n.prototype.setMouseButton=function(t){1===t.button?this._setProperty("mouseButton",r.CENTER):2===t.button?this._setProperty("mouseButton",r.RIGHT):this._setProperty("mouseButton",r.LEFT)},n.prototype.onmousemove=function(t){var e=this._isGlobal?window:this;this.updateMouseCoords(t),this.isMousePressed?"function"==typeof e.mouseDragged?e.mouseDragged(t):"function"==typeof e.touchMoved&&(t.preventDefault(),e.touchMoved(t)):"function"==typeof e.mouseMoved?e.mouseMoved(t):"function"==typeof e.touchMoved&&(t.preventDefault(),e.touchMoved(t))},n.prototype.onmousedown=function(t){var e=this._isGlobal?window:this;this._setProperty("isMousePressed",!0),this._setProperty("mouseIsPressed",!0),this.setMouseButton(t),"function"==typeof e.mousePressed?e.mousePressed(t):"function"==typeof e.touchStarted&&(t.preventDefault(),e.touchStarted(t))},n.prototype.onmouseup=function(t){var e=this._isGlobal?window:this;this._setProperty("isMousePressed",!1),this._setProperty("mouseIsPressed",!1),"function"==typeof e.mouseReleased?e.mouseReleased(t):"function"==typeof e.touchEnded&&(t.preventDefault(),e.touchEnded(t))},n.prototype.onclick=function(t){var e=this._isGlobal?window:this;"function"==typeof e.mouseClicked&&e.mouseClicked(t)},n.prototype.onmousewheel=function(t){var e=this._isGlobal?window:this;"function"==typeof e.mouseWheel&&(t.preventDefault(),e.mouseWheel(t))},n}({},core,constants),inputtime_date=function(t,e){"use strict";var r=e;return r.prototype.day=function(){return(new Date).getDate()},r.prototype.hour=function(){return(new Date).getHours()},r.prototype.minute=function(){return(new Date).getMinutes()},r.prototype.millis=function(){return(new Date).getTime()-this._startTime},r.prototype.month=function(){return(new Date).getMonth()+1},r.prototype.second=function(){return(new Date).getSeconds()},r.prototype.year=function(){return(new Date).getFullYear()},r}({},core),inputtouch=function(t,e){"use strict";var r=e;return r.prototype.touchX=0,r.prototype.touchY=0,r.prototype.touches=[],r.prototype.setTouchPoints=function(t){var e=this._isGlobal?window:this;e._setProperty("touchX",t.changedTouches[0].pageX),e._setProperty("touchY",t.changedTouches[0].pageY);for(var r=[],o=0;o<t.changedTouches.length;o++){var n=t.changedTouches[o];r[o]={x:n.pageX,y:n.pageY}}e._setProperty("touches",r)},r.prototype.ontouchstart=function(t){var e=this._isGlobal?window:this;e.setTouchPoints(t),"function"==typeof e.touchStarted?(t.preventDefault(),e.touchStarted(t)):"function"==typeof e.mousePressed&&(t.preventDefault(),e.mousePressed(t))},r.prototype.ontouchmove=function(t){var e=this._isGlobal?window:this;e.setTouchPoints(t),"function"==typeof e.touchMoved?(t.preventDefault(),e.touchMoved(t)):"function"==typeof e.mouseDragged&&(t.preventDefault(),e.mouseDragged(t))},r.prototype.ontouchend=function(t){var e=this._isGlobal?window:this;e.setTouchPoints(t),"function"==typeof e.touchEnded?(t.preventDefault(),e.touchEnded(t)):"function"==typeof e.mouseReleased&&(t.preventDefault(),e.mouseReleased(t))},r}({},core),mathmath=function(t,e){"use strict";var r=e;return r.prototype.createVector=function(){return new r.Vector(this,arguments)},r}({},core),mathcalculation=function(t,e){"use strict";var r=e;return r.prototype.abs=Math.abs,r.prototype.ceil=Math.ceil,r.prototype.constrain=function(t,e,r){return Math.max(Math.min(t,r),e)},r.prototype.dist=function(t,e,r,o){return Math.sqrt((r-t)*(r-t)+(o-e)*(o-e))},r.prototype.exp=Math.exp,r.prototype.floor=Math.floor,r.prototype.lerp=function(t,e,r){return r*(e-t)+t},r.prototype.log=Math.log,r.prototype.mag=function(t,e){return Math.sqrt(t*t+e*e)},r.prototype.map=function(t,e,r,o,n){return(t-e)/(r-e)*(n-o)+o},r.prototype.max=function(){return arguments[0]instanceof Array?Math.max.apply(null,arguments[0]):Math.max.apply(null,arguments)},r.prototype.min=function(){return arguments[0]instanceof Array?Math.min.apply(null,arguments[0]):Math.min.apply(null,arguments)},r.prototype.norm=function(t,e,r){return this.map(t,e,r,0,1)},r.prototype.pow=Math.pow,r.prototype.round=Math.round,r.prototype.sq=function(t){return t*t},r.prototype.sqrt=Math.sqrt,r}({},core),mathrandom=function(t,e){"use strict";var r=e,o=!1,n=function(){var t,e,r=4294967296,o=1664525,n=1013904223;return{setSeed:function(o){e=t=o||Math.round(Math.random()*r)},getSeed:function(){return t},rand:function(){return e=(o*e+n)%r,e/r}}}();r.prototype.randomSeed=function(t){n.setSeed(t),o=!0},r.prototype.random=function(t,e){var r;if(r=o?n.rand():Math.random(),0===arguments.length)return r;if(1===arguments.length)return r*t;if(t>e){var i=t;t=e,e=i}return r*(e-t)+t};var i,s=!1;return r.prototype.randomGaussian=function(t,e){var r,o,n,a;if(s)r=i,s=!1;else{do o=this.random(2)-1,n=this.random(2)-1,a=o*o+n*n;while(a>=1);a=Math.sqrt(-2*Math.log(a)/a),r=o*a,i=n*a,s=!0}var u=t||0,h=e||1;return r*h+u},r}({},core),mathnoise=function(t,e){"use strict";for(var r=e,o=4,n=1<<o,i=8,s=1<<i,a=4095,u=4,h=.5,p=.5,l=Math.floor(360/p),c=new Array(l),d=new Array(l),f=Math.PI/180,g=0;l>g;g++)c[g]=Math.sin(g*f*p),d[g]=Math.cos(g*f*p);var y=l;y>>=1;var m;return r.prototype.noise=function(t,e,r){if(e=e||0,r=r||0,null==m){m=new Array(a+1);for(var p=0;a+1>p;p++)m[p]=Math.random()}0>t&&(t=-t),0>e&&(e=-e),0>r&&(r=-r);for(var c,f,g,w,v,_=Math.floor(t),x=Math.floor(e),b=Math.floor(r),C=t-_,R=e-x,E=r-b,S=0,T=.5,M=function(t){return.5*(1-d[Math.floor(t*y)%l])},I=0;u>I;I++){var A=_+(x<<o)+(b<<i);c=M(C),f=M(R),g=m[A&a],g+=c*(m[A+1&a]-g),w=m[A+n&a],w+=c*(m[A+n+1&a]-w),g+=f*(w-g),A+=s,w=m[A&a],w+=c*(m[A+1&a]-w),v=m[A+n&a],v+=c*(m[A+n+1&a]-v),w+=f*(v-w),g+=M(E)*(w-g),S+=g*T,T*=h,_<<=1,C*=2,x<<=1,R*=2,b<<=1,E*=2,C>=1&&(_++,C--),R>=1&&(x++,R--),E>=1&&(b++,E--)}return S},r.prototype.noiseDetail=function(t,e){t>0&&(u=t),e>0&&(h=e)},r.prototype.noiseSeed=function(t){var e=function(){var t,e,r=4294967296,o=1664525,n=1013904223;return{setSeed:function(o){e=t=o||Math.round(Math.random()*r)},getSeed:function(){return t},rand:function(){return e=(o*e+n)%r,e/r}}}();e.setSeed(t),m=new Array(a+1);for(var r=0;a+1>r;r++)m[r]=e.rand()},r}({},core),mathtrigonometry=function(t,e,r,o){"use strict";var n=e,i=r,o=o;return n.prototype._angleMode=o.RADIANS,n.prototype.acos=function(t){return this._angleMode===o.RADIANS?Math.acos(t):i.radiansToDegrees(Math.acos(t))},n.prototype.asin=function(t){return this._angleMode===o.RADIANS?Math.asin(t):i.radiansToDegrees(Math.asin(t))},n.prototype.atan=function(t){return this._angleMode===o.RADIANS?Math.atan(t):i.radiansToDegrees(Math.atan(t))},n.prototype.atan2=function(t,e){return this._angleMode===o.RADIANS?Math.atan2(t,e):i.radiansToDegrees(Math.atan2(t,e))},n.prototype.cos=function(t){return Math.cos(this._angleMode===o.RADIANS?t:this.radians(t))},n.prototype.sin=function(t){return Math.sin(this._angleMode===o.RADIANS?t:this.radians(t))},n.prototype.tan=function(t){return Math.tan(this._angleMode===o.RADIANS?t:this.radians(t))},n.prototype.degrees=function(t){return i.radiansToDegrees(t)},n.prototype.radians=function(t){return i.degreesToRadians(t)},n.prototype.angleMode=function(t){(t===o.DEGREES||t===o.RADIANS)&&(this._angleMode=t)},n}({},core,polargeometry,constants),outputfiles=function(t,e){"use strict";var r=e;return r.prototype.pWriters=[],r.prototype.beginRaw=function(){throw"not yet implemented"},r.prototype.beginRecord=function(){throw"not yet implemented"},r.prototype.createOutput=function(){throw"not yet implemented"},r.prototype.createWriter=function(t){-1===this.pWriters.indexOf(t)&&(this.pWriters.name=new this.PrintWriter(t))},r.prototype.endRaw=function(){throw"not yet implemented"},r.prototype.endRecord=function(){throw"not yet implemented"},r.prototype.escape=function(t){return t},r.prototype.PrintWriter=function(t){this.name=t,this.content="",this.print=function(t){this.content+=t},this.println=function(t){this.content+=t+"\n"},this.flush=function(){this.content=""},this.close=function(){this.writeFile(this.content)}},r.prototype.saveBytes=function(){throw"not yet implemented"},r.prototype.saveJSONArray=function(){throw"not yet implemented"},r.prototype.saveJSONObject=function(){throw"not yet implemented"},r.prototype.saveStream=function(){throw"not yet implemented"},r.prototype.saveStrings=function(t){this.writeFile(t.join("\n"))},r.prototype.saveXML=function(){throw"not yet implemented"},r.prototype.selectOutput=function(){throw"not yet implemented"},r.prototype.writeFile=function(t){this.open("data:text/json;charset=utf-8,"+this.escape(t),"download")},r}({},core),outputimage=function(t,e){"use strict";var r=e;return r.prototype.save=function(){window.open(this._curElement.elt.toDataURL("image/png"))},r}({},core),outputtext_area=function(t,e){"use strict";var r=e;return r.prototype.print=window.console&&console.log?console.log.bind(console):function(){},r.prototype.println=r.prototype.print,r}({},core),renderingrendering=function(t,e,r){var o=e,r=r;return o.prototype.createCanvas=function(t,e,r){var n;if(r)n=document.createElement("canvas"),n.id="defaultCanvas";else if(n=document.getElementById("defaultCanvas"))n.id="";else{var i="Warning: createCanvas more than once NOT recommended.";i+=" Very unpredictable behavior may result.",console.log(i)}n.setAttribute("width",t*this._pixelDensity),n.setAttribute("height",e*this._pixelDensity),n.setAttribute("style","width:"+t+"px !important; height:"+e+"px !important;"),this._setupDone||(n.className+=" p5_hidden",n.style.visibility="hidden"),this._userNode?this._userNode.appendChild(n):document.body.appendChild(n);var s=new o.Graphics(n,this);return r&&this._elements.push(s),this.scale(this._pixelDensity,this._pixelDensity),s},o.prototype.createGraphics=function(t,e){var r=document.createElement("canvas");r.setAttribute("width",t*this._pixelDensity),r.setAttribute("height",e*this._pixelDensity),r.setAttribute("style","width:"+t+"px !important; height:"+e+"px !important;");var n=this._userNode||document.body;n.appendChild(r);var i=new o.Graphics(r);this._elements.push(i);for(var s in o.prototype)i.hasOwnProperty(s)||(i[s]="function"==typeof o.prototype[s]?o.prototype[s].bind(i):o.prototype[s]);return i.scale(this._pixelDensity,this._pixelDensity),i},o.prototype.blendMode=function(t){if(t!==r.BLEND&&t!==r.DARKEST&&t!==r.LIGHTEST&&t!==r.DIFFERENCE&&t!==r.MULTIPLY&&t!==r.EXCLUSION&&t!==r.SCREEN&&t!==r.REPLACE&&t!==r.OVERLAY&&t!==r.HARD_LIGHT&&t!==r.SOFT_LIGHT&&t!==r.DODGE&&t!==r.BURN)throw new Error("Mode "+t+" not recognized.");this.drawingContext.globalCompositeOperation=t},o}({},core,constants),shape2d_primitives=function(t,e,r,o){"use strict";var n=e,r=r,o=o;return n.prototype.arc=function(t,e,n,i,s,a,u){if(this._doStroke||this._doFill){var h=this.drawingContext,p=r.arcModeAdjust(t,e,n,i,this._ellipseMode),l=p.h>p.w?p.h/2:p.w/2,c=p.h>p.w?p.w/p.h:1,d=p.h>p.w?1:p.h/p.w;return h.scale(c,d),h.beginPath(),h.arc(p.x,p.y,l,s,a),this._doStroke&&h.stroke(),u===o.CHORD||u===o.OPEN?h.closePath():(u===o.PIE||void 0===u)&&(h.lineTo(p.x,p.y),h.closePath()),this._doFill&&h.fill(),this._doStroke&&u!==o.OPEN&&void 0!==u&&h.stroke(),this}},n.prototype.ellipse=function(t,e,o,n){if(this._doStroke||this._doFill){var i=this.drawingContext,s=r.modeAdjust(t,e,o,n,this._ellipseMode),a=.5522848,u=s.w/2*a,h=s.h/2*a,p=s.x+s.w,l=s.y+s.h,c=s.x+s.w/2,d=s.y+s.h/2;return i.beginPath(),i.moveTo(s.x,d),i.bezierCurveTo(s.x,d-h,c-u,s.y,c,s.y),i.bezierCurveTo(c+u,s.y,p,d-h,p,d),i.bezierCurveTo(p,d+h,c+u,l,c,l),i.bezierCurveTo(c-u,l,s.x,d+h,s.x,d),i.closePath(),this._doFill&&i.fill(),this._doStroke&&i.stroke(),this}},n.prototype.line=function(t,e,r,o){if(this._doStroke){var n=this.drawingContext;if("rgba(0,0,0,0)"!==n.strokeStyle)return n.beginPath(),n.moveTo(t,e),n.lineTo(r,o),n.stroke(),this}},n.prototype.point=function(t,e){if(this._doStroke){var r=this.drawingContext,n=r.strokeStyle,i=r.fillStyle;if("rgba(0,0,0,0)"!==n)return t=Math.round(t),e=Math.round(e),r.fillStyle=n,r.lineWidth>1?(r.beginPath(),r.arc(t,e,r.lineWidth/2,0,o.TWO_PI,!1),r.fill()):r.fillRect(t,e,1,1),r.fillStyle=i,this}},n.prototype.quad=function(t,e,r,o,n,i,s,a){if(this._doStroke||this._doFill){var u=this.drawingContext;return u.beginPath(),u.moveTo(t,e),u.lineTo(r,o),u.lineTo(n,i),u.lineTo(s,a),u.closePath(),this._doFill&&u.fill(),this._doStroke&&u.stroke(),this}},n.prototype.rect=function(t,e,o,n){if(this._doStroke||this._doFill){var i=r.modeAdjust(t,e,o,n,this._rectMode),s=this.drawingContext;return this._doStroke&&s.lineWidth%2===1&&s.translate(.5,.5),s.beginPath(),s.rect(i.x,i.y,i.w,i.h),this._doFill&&s.fill(),this._doStroke&&s.stroke(),this._doStroke&&s.lineWidth%2===1&&s.translate(-.5,-.5),this}},n.prototype.triangle=function(t,e,r,o,n,i){if(this._doStroke||this._doFill){var s=this.drawingContext;return s.beginPath(),s.moveTo(t,e),s.lineTo(r,o),s.lineTo(n,i),s.closePath(),this._doFill&&s.fill(),this._doStroke&&s.stroke(),this}},n}({},core,canvas,constants),shapeattributes=function(t,e,r){"use strict";var o=e,r=r;return o.prototype._rectMode=r.CORNER,o.prototype._ellipseMode=r.CENTER,o.prototype.ellipseMode=function(t){return(t===r.CORNER||t===r.CORNERS||t===r.RADIUS||t===r.CENTER)&&(this._ellipseMode=t),this},o.prototype.noSmooth=function(){return this.drawingContext.mozImageSmoothingEnabled=!1,this.drawingContext.webkitImageSmoothingEnabled=!1,this},o.prototype.rectMode=function(t){return(t===r.CORNER||t===r.CORNERS||t===r.RADIUS||t===r.CENTER)&&(this._rectMode=t),this},o.prototype.smooth=function(){return this.drawingContext.mozImageSmoothingEnabled=!0,this.drawingContext.webkitImageSmoothingEnabled=!0,this},o.prototype.strokeCap=function(t){return(t===r.ROUND||t===r.SQUARE||t===r.PROJECT)&&(this.drawingContext.lineCap=t),this},o.prototype.strokeJoin=function(t){return(t===r.ROUND||t===r.BEVEL||t===r.MITER)&&(this.drawingContext.lineJoin=t),this},o.prototype.strokeWeight=function(t){return this.drawingContext.lineWidth="undefined"==typeof t||0===t?1e-4:t,this},o}({},core,constants),shapecurves=function(t,e){"use strict";var r=e;return r.prototype._bezierDetail=20,r.prototype._curveDetail=20,r.prototype.bezier=function(t,e,o,n,i,s,a,u){if(this._doStroke){var h=this.drawingContext;h.beginPath(),h.moveTo(t,e);for(var p=0;p<=this._bezierDetail;p++){var l=p/parseFloat(this._bezierDetail),c=r.prototype.bezierPoint(t,o,i,a,l),d=r.prototype.bezierPoint(e,n,s,u,l);h.lineTo(c,d)}return h.stroke(),this}},r.prototype.bezierDetail=function(t){return this._setProperty("_bezierDetail",t),this},r.prototype.bezierPoint=function(t,e,r,o,n){var i=1-n;return Math.pow(i,3)*t+3*Math.pow(i,2)*n*e+3*i*Math.pow(n,2)*r+Math.pow(n,3)*o
5 | },r.prototype.bezierTangent=function(t,e,r,o,n){var i=1-n;return 3*o*Math.pow(n,2)-3*r*Math.pow(n,2)+6*r*i*n-6*e*i*n+3*e*Math.pow(i,2)-3*t*Math.pow(i,2)},r.prototype.curve=function(t,e,o,n,i,s,a,u){if(this._doStroke){var h=this.drawingContext;h.moveTo(t,e),h.beginPath();for(var p=0;p<=this._curveDetail;p++){var l=parseFloat(p/this._curveDetail),c=r.prototype.curvePoint(t,o,i,a,l),d=r.prototype.curvePoint(e,n,s,u,l);h.lineTo(c,d)}return h.stroke(),h.closePath(),this}},r.prototype.curveDetail=function(t){return this._setProperty("_curveDetail",t),this},r.prototype.curvePoint=function(t,e,r,o,n){var i=n*n*n,s=n*n,a=-.5*i+s-.5*n,u=1.5*i-2.5*s+1,h=-1.5*i+2*s+.5*n,p=.5*i-.5*s;return t*a+e*u+r*h+o*p},r.prototype.curveTangent=function(t,e,r,o,n){var i=n*n,s=-3*i/2+2*n-.5,a=9*i/2-5*n,u=-9*i/2+4*n+.5,h=3*i/2-n;return t*s+e*a+r*u+o*h},r.prototype.curveTightness=function(){throw"not yet implemented"},r}({},core),shapevertex=function(t,e,r){"use strict";var o=e,r=r;return o.prototype._shapeKind=null,o.prototype._shapeInited=!1,o.prototype._contourInited=!1,o.prototype._contourVertices=[],o.prototype._curveVertices=[],o.prototype.beginContour=function(){return this._contourVertices=[],this._contourInited=!0,this},o.prototype.beginShape=function(t){return this._shapeKind=t===r.POINTS||t===r.LINES||t===r.TRIANGLES||t===r.TRIANGLE_FAN||t===r.TRIANGLE_STRIP||t===r.QUADS||t===r.QUAD_STRIP?t:null,this._shapeInited=!0,this.drawingContext.beginPath(),this},o.prototype.bezierVertex=function(t,e,o,n,i,s){if(this._contourInited){var a={};return a.x=t,a.y=e,a.x3=o,a.y3=n,a.x4=i,a.y4=s,a.type=r.BEZIER,this._contourVertices.push(a),this}return this.drawingContext.bezierCurveTo(t,e,o,n,i,s),this},o.prototype.curveVertex=function(t,e){var r={};return r.x=t,r.y=e,this._curveVertices.push(r),this._curveVertices.length>=4&&(this.curve(this._curveVertices[0].x,this._curveVertices[0].y,this._curveVertices[1].x,this._curveVertices[1].y,this._curveVertices[2].x,this._curveVertices[2].y,this._curveVertices[3].x,this._curveVertices[3].y),this._curveVertices.shift()),this},o.prototype.endContour=function(){this._contourVertices.reverse(),this.drawingContext.moveTo(this._contourVertices[0].x,this._contourVertices[0].y);var t=this.drawingContext;return this._contourVertices.slice(1).forEach(function(e){switch(e.type){case r.LINEAR:t.lineTo(e.x,e.y);break;case r.QUADRATIC:t.quadraticCurveTo(e.x,e.y,e.x3,e.y3);break;case r.BEZIER:t.bezierCurveTo(e.x,e.y,e.x3,e.y3,e.x4,e.y4);break;case r.CURVE:}}),this.drawingContext.closePath(),this._contourInited=!1,this},o.prototype.endShape=function(t){return t===r.CLOSE&&(this.drawingContext.closePath(),this._doFill&&this.drawingContext.fill()),this._doStroke&&this._curveVertices.length<=0?this.drawingContext.stroke():this._curveVertices=[],this},o.prototype.quadraticVertex=function(t,e,o,n){if(this._contourInited){var i={};return i.x=t,i.y=e,i.x3=o,i.y3=n,i.type=r.QUADRATIC,this._contourVertices.push(i),this}return this.drawingContext.quadraticCurveTo(t,e,o,n),this},o.prototype.vertex=function(t,e){if(this._contourInited){var o={};return o.x=t,o.y=e,o.type=r.LINEAR,this._contourVertices.push(o),this}return this._shapeInited?this.drawingContext.moveTo(t,e):this.drawingContext.lineTo(t,e),this._shapeInited=!1,this},o}({},core,constants),structure=function(t,e){"use strict";var r=e;return r.prototype.exit=function(){throw"exit() not implemented, see remove()"},r.prototype.noLoop=function(){this._loop=!1,this._drawInterval&&clearInterval(this._drawInterval)},r.prototype.loop=function(){this._loop=!0,this._draw()},r.prototype.push=function(){this.drawingContext.save(),this.styles.push({doStroke:this._doStroke,doFill:this._doFill,tint:this._tint,imageMode:this._imageMode,rectMode:this._rectMode,ellipseMode:this._ellipseMode,colorMode:this._colorMode,textFont:this.textFont,textLeading:this.textLeading,textSize:this.textSize,textStyle:this.textStyle})},r.prototype.pop=function(){this.drawingContext.restore();var t=this.styles.pop();this._doStroke=t.doStroke,this._doFill=t.doFill,this._tint=t.tint,this._imageMode=t.imageMode,this._rectMode=t.rectMode,this._ellipseMode=t.ellipseMode,this._colorMode=t.colorMode,this.textFont=t.textFont,this.textLeading=t.textLeading,this.textSize=t.textSize,this.textStyle=t.textStyle},r.prototype.pushStyle=function(){throw new Error("pushStyle() not used, see push()")},r.prototype.popStyle=function(){throw new Error("popStyle() not used, see pop()")},r.prototype.redraw=function(){var t=this._isGlobal?window:this;t.draw&&t.draw()},r.prototype.size=function(){throw"size() not implemented, see createCanvas()"},r}({},core),transform=function(t,e,r){"use strict";function o(t,e){for(var r=[],o=t.length,n=e.length,i=t[0].length,s=0;n>s;s++){r[s]=[];for(var a=0;i>a;a++){for(var u=0,h=0;o>h;h++)u+=t[h][a]*e[s][h];r[s].push(u)}}return r}var n=e,r=r;return n.prototype._matrices=[[1,0,0,1,0,0]],n.prototype.applyMatrix=function(t,e,r,n,i,s){this.drawingContext.transform(t,e,r,n,i,s);var a=this._matrices[this._matrices.length-1];return a=o(a,[t,e,r,n,i,s]),this},n.prototype.popMatrix=function(){throw new Error("popMatrix() not used, see pop()")},n.prototype.printMatrix=function(){throw new Error("printMatrix() not implemented")},n.prototype.pushMatrix=function(){throw new Error("pushMatrix() not used, see push()")},n.prototype.resetMatrix=function(){return this.drawingContext.setTransform(),this._matrices[this._matrices.length-1]=[1,0,0,1,0,0],this},n.prototype.rotate=function(t){this._angleMode===r.DEGREES&&(t=this.radians(t)),this.drawingContext.rotate(t);var e=this._matrices[this._matrices.length-1],o=Math.cos(t),n=Math.sin(t),i=e[0]*o+e[2]*n,s=e[1]*o+e[3]*n,a=e[0]*-n+e[2]*o,u=e[1]*-n+e[3]*o;return e[0]=i,e[1]=s,e[2]=a,e[3]=u,this},n.prototype.rotateX=function(){throw"not yet implemented"},n.prototype.rotateY=function(){throw"not yet implemented"},n.prototype.scale=function(){var t=1,e=1;1===arguments.length?t=e=arguments[0]:(t=arguments[0],e=arguments[1]),this.drawingContext.scale(t,e);var r=this._matrices[this._matrices.length-1];return r[0]*=t,r[1]*=t,r[2]*=e,r[3]*=e,this},n.prototype.shearX=function(t){this._angleMode===r.DEGREES&&(t=this.radians(t)),this.drawingContext.transform(1,0,this.tan(t),1,0,0);var e=this._matrices[this._matrices.length-1];return e=o(e,[1,0,this.tan(t),1,0,0]),this},n.prototype.shearY=function(t){this._angleMode===r.DEGREES&&(t=this.radians(t)),this.drawingContext.transform(1,this.tan(t),0,1,0,0);var e=this._matrices[this._matrices.length-1];return e=o(e,[1,this.tan(t),0,1,0,0]),this},n.prototype.translate=function(t,e){this.drawingContext.translate(t,e);var r=this._matrices[this._matrices.length-1];return r[4]+=r[0]*t+r[2]*e,r[5]+=r[1]*t+r[3]*e,this},n}({},core,constants,outputtext_area),typographyattributes=function(t,e,r){"use strict";var o=e,r=r;return o.prototype._textLeading=15,o.prototype._textFont="sans-serif",o.prototype._textSize=12,o.prototype._textStyle=r.NORMAL,o.prototype.textAlign=function(t){(t===r.LEFT||t===r.RIGHT||t===r.CENTER)&&(this.drawingContext.textAlign=t)},o.prototype.textHeight=function(t){return this.drawingContext.measureText(t).height},o.prototype.textLeading=function(t){this._setProperty("_textLeading",t)},o.prototype.textSize=function(t){this._setProperty("_textSize",t)},o.prototype.textStyle=function(t){(t===r.NORMAL||t===r.ITALIC||t===r.BOLD)&&this._setProperty("_textStyle",t)},o.prototype.textWidth=function(t){return this.drawingContext.measureText(t).width},o}({},core,constants),typographyloading_displaying=function(t,e,r){"use strict";var o=e,r=r;return o.prototype.text=function(){if(this.drawingContext.font=this._textStyle+" "+this._textSize+"px "+this._textFont,3===arguments.length)this._doFill&&this.drawingContext.fillText(arguments[0],arguments[1],arguments[2]),this._doStroke&&this.drawingContext.strokeText(arguments[0],arguments[1],arguments[2]);else if(5===arguments.length){var t=arguments[0].split(" "),e="",o=r.modeAdjust(arguments[1],arguments[2],arguments[3],arguments[4],this._rectMode);o.y+=this._textLeading;for(var n=0;n<t.length;n++){var i=e+t[n]+" ",s=this.drawingContext.measureText(i),a=s.width;if(o.y>o.h)break;a>o.w&&n>0?(this._doFill&&this.drawingContext.fillText(e,o.x,o.y),this._doStroke&&this.drawingContext.strokeText(e,o.x,o.y),e=t[n]+" ",o.y+=this._textLeading):e=i}o.y<=o.h&&(this._doFill&&this.drawingContext.fillText(e,o.x,o.y),this._doStroke&&this.drawingContext.strokeText(e,o.x,o.y))}},o.prototype.textFont=function(t){this._setProperty("_textFont",t)},o}({},core,canvas),src_app=function(t,e){"use strict";var r=e,o=function(){window.PHANTOMJS||(window.setup&&"function"==typeof window.setup||window.draw&&"function"==typeof window.draw)&&new r};return"complete"===document.readyState?o():window.addEventListener("load",o,!1),window.p5=r,r}({},core,p5Color,p5Element,p5Graphics,p5Image,p5Vector,p5TableRow,p5Table,colorcreating_reading,colorsetting,constants,dataarray_functions,datastring_functions,environment,imageimage,imageloading_displaying,imagepixels,inputfiles,inputkeyboard,inputmouse,inputtime_date,inputtouch,mathmath,mathcalculation,mathrandom,mathnoise,mathtrigonometry,outputfiles,outputimage,outputtext_area,renderingrendering,shape2d_primitives,shapeattributes,shapecurves,shapevertex,structure,transform,typographyattributes,typographyloading_displaying);


--------------------------------------------------------------------------------